How to populate dropdown box in Custom Widget

Add-ons UIs
1

I am working on a custom widget and I want to have a drop down box allowing the user to select five options (1 -aaaaaa, 2-bbbbb, 3-cccccc, 4-ddddddd, 5-eeeee). How do I populate the drop down box with static values? Here’s my test code:

uid: test_dropdown
tags:

  • card
    props:
    parameters:
    • description: Title for the widget
      label: Static Title
      name: title
      required: false
      parameterGroups: []
      timestamp: Oct 11, 2021, 6:41:00 PM
      component: f7-card
      config:
      title: =props.title
      slots:
      default:
    • component: f7-row
      config:
      class:
      - justify-content-left
      style: margin-left:10px
      slots:
      default:
      - component: f7-col
      slots:
      default:
      - component: Label
      config:
      class:
      - text-align-left
      text: “Photo Rating (1-5):”
      style:
      margin-top: 10px
    • component: f7-row
      config:
      class:
      - padding-bottom
      style: margin-left:10px
      slots:
      default:
      - component: f7-col
      slots:
      default:
      - component: oh-input
      config:
      name: keywords
      variable: keywords
      type: select
      ####### put the 5 items here################
      outline: true
      style:
      padding: 5px
      margin-right: 10px
2

Please use code fences:

```
code goes here
```

Especially with YAML in which white space has meaning, it’s impossible to read otherwise.

I believe if you want a drop down to select from you need to use an oh_list.

4

OH. OK. Here’s a snippet of code again.

Where would I put the oh_list code and can you give me an example? I can’t figure it out.

    - component: f7-row
      config:
        class:
          - padding-bottom
        style: margin-left:10px
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-input
                  config:
                    name: keywords
                    variable: keywords
                    type: select
                    outline: true
                    style:
                      padding: 5px
                      margin-right: 10px
                    slots:
                      default:
                        - component: oh-list
                          config:
                            name: list
                            slots:
                              default:
                                - component: oh-list-item
                                  config:
                                    name: 1
5

I’m no expert in widgets but in your original you were using an oh-input widget. You need to use an oh-list instead. Beyond that I know no more than what’s in the docs.

Another alternative is to use just a oh-button an use the options action.

6

This is, to my knowledge, far and away the best option. I’m not sure you even can produce the kind of dropdown input that you are thinking of through the widget system. The array of options required to display an f7-input as a dropdown are simply not available through the widget yaml.

The oh-button with the options action is going to be far more responsive to different screen sizes and formats anyway and all the work integrating the buttons values with OH are already done for you instead of the convoluted steps required with the f7-input.

Using an oh-list with an accordion setup you could simulate a dropdown but it’s a kludge that will likely have downstream effects you don’t like (such as shifting other widgets when it opens since the accordion rows are not overlays).

2 Likes
7

You can define the needed options inside the item metadata. For the widget i use then something like this:

- component: oh-label-item
      config:
         title: Your title
         action: options
         item: your_item
         actionItem: your_item
1 Like
8

Thanks for the advice. It’s very frustrating because the oh-input acts as a drop down, but there’s no data in the overlay list. I’ve lost the will to live and changed it to a slider. :slight_smile:

9

I’ve just spotted that there is an open github issue for this:

10

Any news for this?
Thanks