Visual Builder

Get Involved. Join the Conversation.

Topic

    James Pitman
    How do you bind data to menu options?
    Topic posted September 3, 2019 by James PitmanGreen Ribbon: 100+ Points, tagged JET, UI 
    27 Views, 3 Comments
    Title:
    How do you bind data to menu options?
    Summary:
    What is the syntax for binding data to a menu option?
    Content:

    In this JET example, how do we bind a data variables to the actual listing of Options in VBCS?

     

                <oj-menu-button id="menuButton1">
                  File
                  <!-- To handle menu item selection, use an action listener as shown, not a click listener. -->
                  <oj-menu id="myMenu1" slot="menu" style="display:none" on-oj-action="[[menuItemAction]]">
                    <!-- ko foreach: menuItems -->
                    <oj-option data-bind="attr: {id: id, disabled: disabled, value: label}">
                      <span slot="startIcon" data-bind="css: icon"></span>
                      <span data-bind="text: label"></span>
                    </oj-option>
                    <!-- /ko -->
                  </oj-menu>
                </oj-menu-button>
                <oj-menu-button id="menuButton2">

     

    We tried something like this, but we cannot get it to display.

     

    <oj-menu-button id="oj-menu-button-1336015352-1" style="width=100%">Commmissions
         <oj-menu style="display:none;" slot="menu" id="oj-menu-1336015352-1" >
               <oj-option value="{{ $variables.menuOptionSelection }}" on-value-changed="[[$listeners.menuCommissionsClicked]]" options="{{ $variables.menuOptionList }}" options-keys.label="label" options-keys.value="id"></oj-option>
         </oj-menu>
    </oj-menu-button>
    Version:
    19.1.3

    Comment

     

    • Duncan Mills

      It's always a good idea to consult the documentation for the components you are using rather than making up attributes that they don't support (this is why your second attempt does not render, it simply not valid) 

      https://docs.oracle.com/en/middleware/developer-tools/jet/7.1/reference-api/oj.ojOption.html

      As you see, the only attributes supported by oj-option are disabled and value

      The correct definition of the menu-button would be something like:

      oj-menu-button
       oj-menu on-oj-action="[[$listeners.menuCommissionsClicked]]"
        oj-for-each data="[[$variables.menuOptionList]]"
          template
            oj-option value="[[$current.id]]"
              oj-bind-text value="[[$current.label"
           
      (Note I've ommitted the less-than and  greater-than symbols and the closing tags because sometimes that messes up the forum posting)
      

      Note that the selection in the menu is handled by the ojAction event on the oj-menu component which is bound to the listener via on-oj-action

    • James Pitman

      Thanks for the input and example.  It is always a challenge to get a working model in VBCS from the examples in JET.  Just for other's benefit (since I know how helpful these posts can be), I have attached screenshot of the working example for this issue.  One trick was to make sure to add the "data" to the current reference before the field names.   Thanks again.

    • Duncan Mills

      Sorry forgetting the .data. part....