Visual Builder

Get Involved. Join the Conversation.

Topic

    Muralidharan Kanagaraj
    How to check a checkboxset based on values?
    Topic posted October 18, 2019 by Muralidharan KanagarajRed Ribbon: 250+ Points, tagged Business Objects, UI, Validation 
    29 Views, 4 Comments
    Title:
    How to check a checkboxset based on values?
    Content:

    Hi All,


    In our application we have checkboxset. We are saving checked checkbox value as an array and storing that value in business object.
    Now we need to fetch that value and show in our page as same checkboxset (same checkboxset) (as shown in image).

    We are getting values from BO but we are not able to check the checkboxset based on the values we fetched.

    How to achieve this?


    Thanks

    Image:

    Comment

     

    • Shay Shmeltzer

      Your checkboxset value property should be hooked to a variable of type Array of Strings.

        <oj-checkboxset options="[[$page.variables.CheckValues]]" id="mycheck"
          labelled-by="oj-label--344972705-1" class="oj-flex-item oj-sm-12 oj-md-4" 
          value="{{ $page.variables.selected }}">
        </oj-checkboxset>

      Then you can set the value of that variable to the array of strings with the values that should be show.

      • Muralidharan Kanagaraj

        Hi Shay,

        We are using hard coded values for the options instead of consume it from rest services.How to handle this for the static list of options?

        Otherwise, Is there any other options to manually check the checkbox using ID?

        I have tried document.getElementById("check").checked=true; But its not working.

         

        Thanks,

         

        • Shay Shmeltzer

          Should be the same - set the value of the variable hooked to the value property and this will check the options for you.

    • Vignesh Viswanathan

      Hi shay,

      Is there any working example or sample code for this?

      Thanks,

      • Shay Shmeltzer

        Here is a sample HTML for the page:

        <div class="oj-flex">
          <oj-label id="oj-label--285061062-1" class="oj-flex-item oj-sm-12 oj-md-2">Checkbox Set</oj-label>
          <oj-checkboxset id="oj-checkboxset--285061062-1" labelled-by="oj-label--285061062-1" class="oj-flex-item oj-sm-12 oj-md-4" value="{{ $page.variables.selectvar }}">
            <oj-option value="shay">shay</oj-option>
            <oj-option value="joe">joe</oj-option>
            <oj-option value="jane">jane</oj-option>
          </oj-checkboxset>
        </div>
        <div class="oj-flex">
          <div class="oj-flex-item oj-sm-12 oj-md-1"></div>
          <oj-label id="oj-label--285061062-2" for="oj-input-text--285061062-1" class="oj-flex-item oj-sm-12 oj-md-2">Text</oj-label>
          <oj-input-text id="oj-input-text--285061062-1" class="oj-flex-item oj-sm-12 oj-md-4" value="{{ $variables.selectvar }}"></oj-input-text>
        </div>
        <div class="oj-flex">
          <div class="oj-flex-item oj-sm-12 oj-md-2">
            <oj-button id="oj-button--285061062-1" on-oj-action="[[$listeners.ojButton2850610621OjAction]]">Set to shay and joe</oj-button>
          </div>
        </div>

        The $variables.selectvar is of type array of string

        And then the button will have an assign variable action on it that assigns ["shay", "Joe"] to the variable.

        From the Json:

            "ButtonActionChain": {
              "description": "",
              "variables": {
                "detail": {
                  "required": true,
                  "type": "any",
                  "input": "fromCaller"
                }
              },
              "root": "assignVariables1",
              "actions": {
                "assignVariables1": {
                  "module": "vb/action/builtin/assignVariablesAction",
                  "parameters": {
                    "$page.variables.selectvar": {
                      "source": [
                        "shay",
                        "joe"
                      ]
                    }
                  }
                }
              }