How to forward input from dropdown list to a script

Setup, Configuration and Use Items & Sitemaps
,
1

I have successfully generated a select input / dropdown list acc. an example of the forum:

component: oh-input-card
config:
  title: oh-input select with options
slots:
  default:
    - component: oh-input
      config:
        type: select
        style:
          margin-left: 15px
      slots:
        default:
          - component: option
            config:
              value: foo_value
            slots:
              default:
                - component: Content
                  config:
                    text: foo_text
          - component: option
            config:
              value: bar_value
            slots:
              default:
                - component: Content
                  config:
                    text: bar_text

How can I forward the selected value to a script/rule?
Tried to play around with “action” - but without success.

Thx in advance, O.

2

You will need two steps. First you need to add the variable property to your input with the name of a variable that will hold the value of the selection. An oh-input must always have this property otherwise the input information never goes anywhere. The name of the variable can be anything you want. For example:

- component: oh-input
  config:
    variable: inputVar
    type: select
    style:
      margin-left: 15px

Second you will need another component such as an oh-button (but any component that has access to the action options will work). The action you need to set is the rule action which takes the UID of the rule or script you want to run, and can also take a series of values that will be added to the rule context as variables. So, the following button would run the rule with UID myRuleUID and when that rule is run from this button, it can automatically access the variable mySelectValue which will contain the value of the option selected.

- component: oh-button
  config:
    text: Run rule with selection value
    action: rule
    actionRule: myRuleUID
    actionRuleContext:
      mySelectValue: =vars.inputVar
3

Thx, almost working.
But “=vars.inputVar” is not holding the selected value. It’s undefined.
Any hint?

4

Can you post the code you tried?

5

sure …

component: oh-grid-row
config: {}
slots:
  default:
    - component: oh-grid-col
      config: {}
      slots:
        default:
          - component: oh-input-card
            config:
              title: oh-input select with options
            slots:
              default:
                - component: oh-input
                  config:
                    variable: inputVar
                    type: select
                    style:
                      margin-left: 15px
                  slots:
                    default:
                      - component: option
                        config:
                          value: 22
                        slots:
                          default:
                            - component: Content
                              config:
                                text: foo_text
                      - component: option
                        config:
                          value: bar_value
                        slots:
                          default:
                            - component: Content
                              config:
                                text: bar_text
                - component: oh-button
                  config:
                    text: Run rule with selection value
                    action: rule
                    actionRule: myRuleUID
                    actionRuleContext:
                      retvalue: =vars.inputVar

and the script “myRuleUID” is properly called, but “console.info(ctx[‘retvalue’]);” delivers “undefined” to log.

6

You don’t need anything that fancy. The variable is added to the main context of the rule so you just call it using the variable name:

console.log(retValue);

Also, at this point the oh-input-card is not doing anything for you because you are adding your own input widget. You can probably just move to a basic oh-card which will change the appearance just a little, but offer significantly lees potential for conflict between the input configurations.

7

Dear Justin,

1st of all many thanks for your support.
But I’m still struggling - espcecially with your latest advice to move to oh-card.
Could you please modify my code accordingly. I have no clue what you mean.

Once more - many thanks in advance. O.

8

You don’t have to change much. You just change oh-input-card to oh-card. When you do that all the other things will disappear. But that’s just because the oh-card doesn’t use a default slot; it uses several different slots. In this case, you want all those other widgets in the content of the card instead of the header or the footer, so you’ll change the name of the card slot from default → content. Those two changes are all that you need.

9

thx. Finally got it. My problem: I did NOT use widgets.

I tried to run it directly within a layout page. This is not working, e.g. oh-input-card can’t be changed into oh-card…