How to make text on toggle-button widget configurable?

Add-ons UIs
,
1

I have a working ToggleButton widget, but the texts “On” and “Off” are hardcoded:

uid: ButtonToggle
tags: []
props:
  parameters:
    - context: item
      description: Item to use with this button.
      label: Item
      name: item
      required: true
      type: TEXT
      groupName: general
    - description: Text to show as title.
      label: Title
      name: Title
      required: false
      type: TEXT
    - description: Text to show as footer.
      label: Footer
      name: Footer
      required: false
      type: TEXT
    - description: Text to show on the 'ON' button.
      label: OnButton
      name: OnButton
      required: false
      type: TEXT
    - description: Text to show on the 'OFF' button.
      label: OffButton
      name: OffButton
      required: false
      type: TEXT
  parameterGroups:
    - name: general
      label: Display options
timestamp: Sep 11, 2022, 2:48:26 PM
component: f7-card
config:
  title: '=(props.Title) ? props.Title : ""'
  footer: '=(props.Footer) ? props.Footer : ""'
  style:
    min-width: 250px
slots:
  default:
    - component: f7-block
      config:
        class: bog
        style:
          display: flex
          flex-wrap: wrap
          justify-content: space-between
          align-content: space-between
          padding: 20px
      slots:
        default:
          - component: oh-button
            config:
              outline: false
              action: toggle
              actionItem: =props.item
              actionCommand: ON
              actionCommandAlt: OFF
              color: white
              text: "=(items[props.item].state === 'ON') ? 'On' : 'Off'"
              style:
                width: 100px
                background: "=(items[props.item].state === 'ON') ? 'rgb(76,217,100)' : 'rgb(255,59,48)'"

I need to combine the item state with the configured button texts somehow.
So this line
text: “=(items[props.item].state === ‘ON’) ? ‘On’ : ‘Off’”
needs to be something like this
text: “=(items[props.item].state === ‘ON’) ? ‘props.OnButton’ : ‘props.OffButton’”

But this does not work. It only shows the text “props.OnButton” or “props.OffButton”.
I also tried using the ‘content’ property of the style to set the text, but this didn’t set any text at all :frowning:

              style:
                width: 100px
                background: "=(items[props.item].state === 'ON') ? 'rgb(76,217,100)' : 'rgb(255,59,48)'"
                content: "=(items[props.item].state === 'ON') ? 'props.OnButton' : 'props.OffButton'"

Any help appreciated!

2

If you have props.OnButton in single quotes, it will treat it as normal text and display the text.
Remove the single quotes and it will treat this correctly as variable and it will reference to the properties you have set

In addition instead of using props for on/off state, you could define metadata at an item level and better use items[props.item].displayState here

1 Like
3

Thank you!
This does work
text: “=(items[props.item].state === ‘ON’) ? props.OnButton : props.OffButton”