Building Pages in OH 3 - Custom User Defined Widgets

Development Documentation
,
21

I believe if you put all your content in the default slot of an oh-link and set the link action to send the command of interest then the action behavior of the link will trigger no matter where in the content you click (note: if you have an item with its own action in the link content, clicking on that will trigger BOTH actions)

For example the following code

uid: widget_link_demo
component: f7-card
config: {}
slots:
  default:
    - component: oh-link
      config:
        action: options
        actionItem: Item_With_Command_Options
      slots:
        default:
          - component: f7-card
            slots:
              default:
              - component: oh-button
                config:
                  text: Button 1
                  raised: true
                  action: toggle
                  actionItem: Toggle_Switch_Item
                  actionCommand: ON
                  actionCommandAlt: OFF
              - component: f7-icon
                config:
                  f7: airplane
              - component: oh-button
                config:
                  text: Button 2
                  raised: true

Produces this little area:
image

Clicking on any part of that (either button or the airplane) with trigger the series of options buttons from Item_With_Command_Options, however, if that click is on the Button 1 part of the area then the options will AND the switch will get toggled.

1 Like
23

Unfortunately it is not working.

image
image400×545 10.1 KB

I have it in the oh-link but nothing is like a link.

uid: Fernsehprogramm
tags: []
props:
  parameters:
    - description: Title for the widget
      label: Static Title
      name: title
      required: false
      type: TEXT
    - context: item
      label: Select a 'Fernsehprogramm Group Item'
      name: prefix
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Apr 13, 2021, 9:05:22 PM
component: f7-card
config:
  title: =items[props.prefix+"_Sender"].state
  action: command
  actionItem: Fernsehsender
  actionCommand: =items[props.prefix+"_Sender"].state
slots:
  default:
  
  
    - component: oh-link
      config:
        action: command
        actionItem: Fernsehsender
        actionCommand: =items[props.prefix+"_Sender"].state
      slots:
        default:
        
    - component: f7-row
      slots:
        default:

          - component: Label
            config:
              text: =items[props.prefix+"_Start"].displayState              
              style:
                color: rgba(0,200,0,.7)
          - component: Label
            config:
              text: =items[props.prefix+"_Titel"].state
    - component: f7-row
      slots:
        default:
          - component: Label
            config:
              style:
                color: rgba(200,155,0,.7)
              text: =items[props.prefix+"_Start_Next"].displayState
          - component: Label
            config:
              text: =items[props.prefix+"_Titel_Next"].state
24

Your indentation is wrong. Your oh-link and the following f7-row are on the same level which means that the f7-row and its children are not within the oh-link. In the example, all the items that should be contained within the link are indented more than the link component itself.

1 Like
25

You were right. Now it is working. Thank you for your support:

image
image790×405 11.8 KB

uid: Fernsehprogramm
tags: []
props:
  parameters:
    - description: Title for the widget
      label: Static Title
      name: title
      required: false
      type: TEXT
    - context: item
      label: Select a 'Fernsehprogramm Group Item'
      name: prefix
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Apr 13, 2021, 9:05:22 PM
component: f7-card
config:
  title: =items[props.prefix+"_Sender"].state
  action: command
  actionItem: Fernsehsender
  actionCommand: =items[props.prefix+"_Sender"].state
slots:
  default:
  
  
    - component: oh-link
    
      config:
        action: command
        actionItem: Fernsehsender
        actionCommand: =items[props.prefix+"_Sender"].state
        
        style:
          width: 100%
      slots:
        default:
        
        - component: f7-card
          config:
            style:
              width: 100%

          slots:
            default:
    
              - component: Label
                config:
                  text: =items[props.prefix+"_Start"].displayState              
                  style:
                    color: rgba(0,200,0,.7)
              - component: Label
                config:
                  text: =items[props.prefix+"_Titel"].state        
                  style:
                    color: rgba(0,200,0,.7)
                  
              - component: Label
                config:
                  style:
                    color: rgba(255,144,0,.7)
                  text: =items[props.prefix+"_Start_Next"].displayState
              - component: Label
                config:
                  style:
                    color: rgba(255,144,0,.7)
                  text: =items[props.prefix+"_Titel_Next"].state
1 Like
26

Hello,

can i somehow show different icons on a widget depending on the state of an item?

For example i changed from a simple day/night mode to the timeOfDay design pattern of @rlkoshak .
Actual my nightmode at the widget just gets on and off. Now i would like to show a different icon depending on the timeOfDay state (MORNING, DAY, EVENING, BED, NIGHT).

                - component: f7-icon
                  config:
                    f7: moon_zzz_filled
                    item: =props.nachtmodus
                    color: '=(items[props.nachtmodus].state === "ON") ? "yellow" : "gray"'

Is this possible or can i just define two options (condition true/false)?

Thanks, Alex

27

You can do this in the Same way with the f7 icon like you did with the color, instead of state ON you replace with the time of day state and instead of the color use the f7 icon name. You can have more than 2 options lined up of course.

f7: '=(items[props.timeofday].state === “DAY”) ? “IconA” : (items[props.timeofday].state === “NIGHT”) ? “IconB” : IconC" ’

1 Like
28

Thank you! I tried this, but get the error, that nested mappings are not allowed in compact mappings:

f7: ‘=(items[props.timeofday].state === “MORNING”) ? “sunrise_fill” : (items[props.timeofday].state === “DAY”) ? “sun_max_fill” : (items[props.timeofday].state === “EVENING”) ? “sunset_fill” : (items[props.timeofday].state === “BED”) ? “bed_double_fill” : (items[props.timeofday].state === “NIGHT”) ? “moon_zzz_filled” : "clear_fill"’

(of course i created the new prop timeofday, too)

Edit: I found the issue, it was the " ’ "

This works fine now:

f7: '=(items[props.timeofday].state === "MORNING") ? "sunrise_fill" : (items[props.timeofday].state === "DAY") ? "sun_max_fill" : (items[props.timeofday].state === "EVENING") ? "sunset_fill" : (items[props.timeofday].state === "BED") ? "bed_double_fill" : (items[props.timeofday].state === "NIGHT") ? "moon_zzz_filled" : "clear_fill"'
29

yes, i believe it was my copy paste on a mobile, glad you figured it. :slight_smile:

31

Are there any plans to enable live-rendering of list-type YAML widgets in the dev tool? As someone who’s programming technique basically devolves to “throw it at the wall and see what sticks”, the inability of the dev tool to visualize list-item widgets is making developing new ones (not just copy-pasting code) very difficult for me.