[wiki] Building Pages in the OH3 UI: documentation draft (2/3)

@RGroll thanks for the information. I will use placeholders for now :frowning:

Do you know how i can reset certain variables at the same time? So i have 3 vars and want to reser all 3 with a single button. Is this possible?

@buschif4 Seems like we all think alike - asked the same here and fortunately you could use an array for that:

clearVariable: [var1, var2]
1 Like

The most important point is to keep learning and it seems, you are willed to do so. The successes come at some point for sure - and is even sweeter then. :slight_smile: :lollipop:

@RGroll thanks again for your help.
Do you know if I can set/get a variable with a f7-component? I was not able to find some documentation for this. And from my testing it seams that I can only access this from the oh-components.

As far as I understand the underlying architecture, f7-components does not support any of the OH-specific configurations, like variables or actions. Expressions instead does work on the most of the f7-components AFAIK.

In the most cases (at least from the things that I’ve tried) there is a workaround for that: so you can use f7-components for styling things and using OH-components for the inside (including variables and actions then, of course)

I’m sure @ysc is aware of that and as I understand, he would like to implement small oh-components too, which would be very usefull for widget-creators.

But don’t hesitate to contact me, if you have any questions for a specific use-case.

This makes thinks even more complicated :frowning:

Maybe you know a solution. I want to build an popover inside a card to make a dropdown selection. the problem is that I’m not able to close the popover again when I use a oh-component. When i use a f7-component I could just use the config parameter “popoverClose: .mypopover” to close the popover again.

See my example here which sets the var but can not close the popover on action time:

uid: widget_562ed42888
tags: []
props: []
timestamp: Nov 14, 2020, 12:17:34 PM
component: f7-card
config:
slots:
  default:
    - component: f7-button
      config:
        popoverOpen: .mypopover
        text: "click me"
      slots:
        default:
          - component: f7-popover
            config:
              class: mypopover
            slots:
              default:
                - component: oh-label-card
                  config:
                    action: variable
                    actionVariable: myVar
                    actionVariableValue: "test"
                    label: "I should close this popup and set a variable"

@buschif4 Interesting question - you can use a class for this:

btw. thanks for the hint with that component - haven’t used it yet and have some usecases in mind already. :stuck_out_tongue:

uid: widget_562ed42888
tags: []
props: []
component: f7-card
slots:
  default:
    - component: f7-button
      config:
        popoverOpen: .mypopover
        text: click me
      slots:
        default:
          - component: f7-popover
            config:
              class: mypopover
            slots:
              default:
                - component: oh-label-card
                  config:
                    class:
                      - popover-close
                    action: variable
                    actionVariable: myVar
                    clearVariable: true
                    actionVariableValue: success
                    label: I should close this popup and set a variable
                    
    - component: Label
      config:
        class:
          - padding
        text: =vars.myVar
1 Like

@RGroll cool that works. I had to place the label cards in f7-cards because the class object was not properly working when reopening the popover and choosing another item. But now it works. My heating control ist almost working.

Do you know if i can detect if the style is normal or dark mode? I need to change the colors on darkmode because the card shadow effect is not visible

Can we somehow use date time calculations in expressions?
i want to create a widget which only shows the ‘elapsed’ time since, say, the date-time state captured in an item. Eg.,
item “WANIP_Changed” gives the time stamp of last change. then, when i load the UI page containing the widget, it should show me the elapsed time since the change, like “3 hours and 10 minutes ago”. Note, i just want to see this with page load or in auto-refresh, i.e, without actually pressing the widget for action.
Any ideas?

That would be themeOptions.dark === 'dark', by the way the recent snapshots have a new “developer sidebar” where you can conveniently test your expressions:

That’s the sort of things I want to add, but not yet.

4 Likes

Oh okay - didn’t tested it with multiple elements but good to know.

Nice - a lot of people (including me) would be gratefull if you’d post this as an example in the UI category when you’re ready.

All other questions are already answered by @ysc. :slight_smile:

1 Like

About that, also keep in mind that framework7 defines a lot of CSS variables, whose value will vary depending on the theme/dark mode: margins, shadows, but mostly colors. So if you want to reuse them it’s possible in your component style like:

style:
  backgroundColor: var(--f7-page-bg-color)
  color: var(--f7-theme-color-text-color)

etc.

1 Like

How should I defined the drop down values for oh-input-card with type: select
f7-input documentation indicates using <option value="...">...</option>. What should be the equivalent here?

@ysc wow thanks that helps a lot. Is there a overview of the implemented classes available?

@RGroll it will take some time until this is finalized. But i think i can share my sonos widget. It is combined with a new rule and has all features of the sonos controller app to control the players. I need to change some parts against parameter and then this can be reused :wink:

Here my current progress, but not yet finished in terms of features and ui usability

2 Likes

The f7-docs lists usable classes for each component. For me it works best to use the Chrome dev tools and see what classes are used for the components that I want to change.

Nice work - Every widget will suit some users needs and helps digging deeper into the mechanics of the widget-creation.

@candiesdoodle
I tried numerous ways, adding the options as an array in the value config of f7- / oh-input, but sadly wasn’t succesfull. Maybe @ysc has an idea how to do it with the current component.

It might be a missing option (which wonders me a bit tbh, as its documented and I don’t see a reason why f7-components should’ve been stripped down in OH)

1 Like

Hi Rainer,

I get the layout correct now, i just have to tune the styling, other backgroubd color

uid: widget_9ba8e79e82
tags: []
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Nov 15, 2020, 11:02:05 AM
component: f7-card
config:
  title: '=(props.item) ? "State of " + props.item : "Set props to test!"'
  footer: =props.prop1
  content: =items[props.item].displayState || items[props.item].state
slots:
  default:
    - component: f7-row
      slots:
        default:
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: a1
                    style:
                      height: 25px
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: a2
                    style:
                      height: 25px
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: a3
                    style:
                      height: 25px
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: a4
                    style:
                      height: 25px
    - component: f7-row
      slots:
        default:
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: b1
                    style:
                      height: 25px
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: b2
                    style:
                      height: 25px
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: b3
                    style:
                      height: 25px
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: b4
                    style:
                      height: 25px
    - component: f7-row
      slots:
        default:
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: c1
                    style:
                      height: 25px
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: c2
                    style:
                      height: 25px
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: c3
                    style:
                      height: 25px
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: c4
                    style:
                      height: 25px
    - component: f7-row
      slots:
        default:
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: d1
                    style:
                      height: 25px
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: d2
                    style:
                      height: 25px
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: d3
                    style:
                      height: 25px
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: d4
                    style:
                      height: 25px
    - component: f7-row
      slots:
        default:
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: e1
                    style:
                      height: 25px
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: e2
                    style:
                      height: 25px
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: e3
                    style:
                      height: 25px
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: e4
                    style:
                      height: 25px
    - component: f7-row
      slots:
        default:
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: f1
                    style:
                      height: 25px
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: f2
                    style:
                      height: 25px
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: f3
                    style:
                      height: 25px
          - component: f7-col
            config:
              class:
                - button
                - button-fill
                - button-large
                - button-raised
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:YOURWIDGET
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                      position: absolute
                      top: 0
                      left: 0
                      height: 100%
                      width: 100%
                - component: oh-icon
                  config:
                    icon: f4
                    style:
                      height: 25px

ir2

now i have to figure out how to get the binding to work if there is broadlink binding for 3.x.x

i have creted a separeted topic for this widget

regards
Ronny

2 Likes

Nice work!

You could remove the ‘button-fill’ class on the ‘f7-col’ to remove the background of the buttons (the ‘button-large’ and ‘button-raised’ is also not needed for you case, I think) - but just try out, what you prefer the most.

@RGroll so my Sonos player is done. If you are interested the code is here: Sonos Player widget for OH3 mainUI

IMG_1577

5 Likes

hello folks
how can I use props expression with actionItem. I have written the following but it doesn’t work.

props:
 parameters:
   - context: item
      description: An item to control mode
      label: Mode control Item
      name: Mode_item
      required: false
      type: TEXT

- component: oh-button
  config:
     text: favorite
     action: command
     actionItem: =props.Mode_item
     actionCommand: favorite

if i replace props.Mode_item with actual item name, it works perfectly.

edit: nvm, had to include it in single quotes. :smiley:

Hey @candiesdoodle,

your syntax seems correct and should work. Have you selected an item in the widget-config?

props:
 parameters:
   - context: item
     description: An item to control mode
     label: Mode control Item
     name: Mode_item
     required: false
     type: TEXT

- component: oh-button
  config:
     text: favorite
     action: command
     actionItem: =props.Mode_item
     actionCommand: favorite

There was an extra space after the first line of your parameters, maybe this is the problem?! But it should be highlighted as an error in the editor then.