Looking to change widget selector action color

Setup, Configuration and Use Widgets
1

Using action: options on an item makes a selection menu pop up when selected.
It presents all the item’s options as a button list of choices with a blue label, plus a separate ‘Cancel’ button with red text.

I’d like to change those selection label colors, but could not find out to date how to. Any idea?

                              config:
                                action: options
                                actionItem: =loop.selection.actionItem
                                item: =loop.selection.actionItem
                                style:
                                  margin-left: auto
                                  margin-right: auto
                                visible: =loop.selection.visible
2

This is actually a non-trivial task. Those options are setup as an f7 action sheet, which means that they are one of the f7 modal types. The reason this impacts you is that the f7 modals are rendered in a portion of the page that is out of the scope of the widget custom css so you can’t really impact their styling directly. There also aren’t any options that I’m aware of that the user can set.

Pretty much the only way to get custom colors on that would be to build your own version in the widget. Here’s a sample that simulates the basic oh action sheet but with oh-link components that could have whatever oh action you want to set.

uid: actions_demo
props:
  parameterGroups: []
  parameters: []
tags: []
component: oh-card
config:
  title: Custom Action Sheet
slots:
  content:
    - component: oh-button
      config:
        text: Custom options
        actionsOpen: .demo-actions
    - component: f7-actions
      config:
        class:
          - demo-actions
      slots:
        default:
          - component: f7-actions-group
            slots:
              default:
                - component: oh-link
                  config:
                    class:
                      - actions-button
                      - color-blue
                  slots:
                    default:
                      - component: Label
                        config:
                          class:
                            - actions-button-text
                          text: Option 1
                - component: oh-link
                  config:
                    class:
                      - actions-button
                      - color-blue
                  slots:
                    default:
                      - component: Label
                        config:
                          class:
                            - actions-button-text
                          text: Option 2
          - component: f7-actions-group
            slots:
              default:
                - component: oh-link
                  config:
                    actionsClose: .demo-actions
                    class:
                      - actions-button
                      - color-red
                  slots:
                    default:
                      - component: Label
                        config:
                          class:
                            - actions-button-text
                          text: Cancel

Clicking on the Custom options button opens an actions sheet that looks like this:

image

Add on to that the fact that the repeater does have an itemCommandOptions property that means you could loop through preset options for a supplied item to produce the buttons. That way you have a complete replica of the oh built-in options sheet but you now can control the color and whatever other style you want.

2 Likes
3

Thank you Justin

I’m working on a custom action sheet widget in OpenHAB, where users can select options from a list, and the selected option should be displayed as a label on the button. However, I’m running into an issue where the variable selectedValue doesn’t seem to update or display as expected.

Code Snippet

Here’s the YAML configuration I’m using:

uid: audio_volume_control_widget
props:
  parameterGroups: []
  parameters: []
tags: []
component: oh-card
config:
  title: Custom Action Sheet
slots:
  content:
    - component: oh-button
      config:
        text: Custom options
        actionsOpen: .demo-actions
    - component: f7-actions
      config:
        class:
          - demo-actions
      slots:
        default:
          - component: f7-actions-group
            slots:
              default:
                - component: oh-link
                  config:
                    class:
                      - actions-button
                      - color-blue
                  slots:
                    default:
                      - component: Label
                        config:
                          class:
                            - actions-button-text
                          text: =vars.selectedValue
                - component: oh-link
                  config:
                    actionVariable: selectedValue
                    actionVariableValue: 1
                    class:
                      - actions-button
                      - color-blue
                  slots:
                    default:
                      - component: Label
                        config:
                          actionVariable: selectedValue
                          actionVariableValue: 1
                          class:
                            - actions-button-text
                          text: Option 1
                - component: oh-link
                  config:
                    class:
                      - actions-button
                      - color-blue
                  slots:
                    default:
                      - component: Label
                        config:
                          class:
                            - actions-button-text
                          text: Option 2
          - component: f7-actions-group
            slots:
              default:
                - component: oh-link
                  config:
                    actionsClose: .demo-actions
                    class:
                      - actions-button
                      - color-red
                  slots:
                    default:
                      - component: Label
                        config:
                          class:
                            - actions-button-text
                          text: Cancel

Issue

The action sheet opens as expected, and the options are displayed correctly. However, when I select an option, the selectedValue variable doesn’t seem to be set, and it doesn’t display on the top button.

What I’ve Tried

  1. Initializing selectedValue in Props: I tried adding selectedValue in props as a parameter to initialize it, but that didn’t solve the problem.
  2. Checking the Display Path: I’ve confirmed that =vars.selectedValue is the correct syntax in other places, but it doesn’t seem to work here.
  3. Debugging Variable Update: It’s unclear if the variable isn’t updating or if it’s just not displaying.

Questions

  1. Does anyone have experience with setting and displaying actionVariable values in widgets?
  2. Is there something I’m missing in terms of variable scope or syntax that would allow selectedValue to update and display correctly?
  3. Could there be an alternative approach to achieve this type of action sheet with variable display?

Any help or insight would be much appreciated!

Thanks in advance!

4

arg…

solved by using

action: variable

5

Labels don’t have actions, so you don’t need the actionVariable or actionVariableValue.

You haven’t actually set the action property on the link, so OH has no idea which action you wish to perform. You need to add action: variable