Switch to Display different Content

Setup, Configuration and Use Widgets
1

Hello,

I would like to replicate what the location “Popup” is doing with devices and properties.

image
image744×759 85.6 KB

I want to create a page similar to this where I can “tab” through 2 or 3 pages/sets of widgets depending on what I select on the top.

The only way I can think of is by using an item and then make the widgets visible or invisible depending on the item state. But I somehow think there must be a “better way” to do this. One thing I would not like on the item solution is that my choice would persist. But I want the page to always start the same.

Is there a “better” way to do this?

Greetings.

2

This is exactly what widget variables are for:

The component you’ve highlighted is just a segmental button which you can setup using the f7-segmented component:

And then, for each oh-button in the segmented button, you can set the action to variable and send a value to your chosen variable that will then allow you set visibility based on the non-persistent variable value rather than a persistent item state.

1 Like
3

Somehow i have not noticed that so far :wink: thanks for pointing me in the right direction. I’ll try it

4

I read, I tried, I Falied.

The f7-segmet is exactly what i need. but i can’t find out how to “connect” it with “wiget Variables”

Maybe I have to say, that i still (even after years :wink: ) try to wrap my head around these concepts used here. I have no background in Webdevelopment or frontenddesign… So i learn mostly by trial and error. YAML, CSS, F7 are all Alien to me. But i try and have build some really nice widgets for my self so far :wink:
So in those 2 Documentations I found nothing i really “understood”. Except that Variables exist and that i can use them for more complex tasks, what i would like to do.

So now i have 2 more specifc questions.

  • How do i define and access those “widget Variables” in YAML for OH3 Widgets.
    I know how to acces a item. And how to use props as “placeholders”… but i cant find out how to create or access those widget variables.

  • I would like all widgets on a page to acces what i set with one f7-segment in the page. Is this possible?

Thanks for trying to explain :wink:

5

The segmented button is just a container for regular button, it does nothing on its own. You need to have other buttons inside of it:

- component: f7-segmented
  config:
    ...
  slots:
    default:
      - component: oh-button
        config:
          ...
      - component: oh-button
        config:
          ...
      - component: oh-button
        config:
          ...

The variable gets modified by each of the oh-button components using the variable action:

So, one of the buttons might be configured to change a variable called displayType to lights

- component: oh-button
  config:
    text: Show lights
    action: variable
    actionVariable: displayType
    actionVariableValue: lights

Then the component you want to display would use test vars.displayType for visibilty:

- component: oh-label-card
  config:
    title: Light Card
    label: ON
    visible: =vars.displayType == 'lights'

One of the original intents of widget variables was to facilitate exactly this kind of communication between widgets. But to make sure that every widget on a page has access to the same variable you have to make sure to define that variable as a page variable in the page configuration:

config:
  defineVars:
    displayType: some_default_value
1 Like
6

Now i got my little widget and page to work as i wanted it (at least for that part ) :wink: Thanks alot!!!