Visual Builder

Get Involved. Join the Conversation.

Topic

    Nazeer Anantha
    Need to update Check box value in Table...Answered
    Topic posted August 16, 2019 by Nazeer AnanthaRed Ribbon: 250+ Points, tagged Action Flows, Business Objects, Custom Code, JET, Layout, REST, Services, Style, Tip, UI, Validation, Web 
    61 Views, 7 Comments
    Title:
    Need to update Check box value in Table Variable(ArrayDataProvider)
    Summary:
    update required on ArrayDataProvider variable for CheckBox
    Content:

    Hi All,

    I have an Editable table, here editable data is populated based on the Variable of type ArrayDataProvider. I am able to update the text columns values in the variable. Text columns data is updating properly in ArrayDataProvider Variable.

    here the issue is, I have a checkbox column in the table. this checkbox value is also coming from ArrayDataProvider Variable only. when I do any changes on the checkbox, like select or deselect. The associated value is not updating in ArrayDataProvider Variable.

    I have followed the below link for Text columns update.

    https://www.youtube.com/watch?v=9j51yPE1YAw

    Checkbox code is:

    <oj-checkboxset id="cs1" value={{[ENABLED_FLAG]}} data-oj-context>
            <oj-option value="Y"  aria-label="ENABLED_FLAG"></oj-option>
          </oj-checkboxset>

    Please guide me how to update checkbox value in ArrayDataProvider Varaible.

     

    Thanks,

    Nazeer.

     

    Image:
    Code Snippet:

    Best Comment

    Shay Shmeltzer

    Try and use the cell template approach for your editable table as shown here:

    https://blogs.oracle.com/vbcs/editable-tables-in-visual-builder-the-oracle-jet-6-way

     

    Comment

     

    • Duncan Mills

      The issue is that checkbox-set expects a "value" which is an Array of values - which will not map easily in this kind of table use case. 

      You might want to try either using oj-switch which maps to a simple or oj-ext-checkbox-switch which provides a checkbox UI but mapped to a simple boolean

    • Shay Shmeltzer

      Here is a blog post showing you how to use the second component Duncan mentioned:

      Using Checkbox to Select Rows in a Table in Visual Builder

      • Nazeer Anantha

        Thanks, Duncan and Shay.

        I have done in the same way now. But on page load, all checkboxes are getting selected.

        On-Page Load, if ENABLED_FLAG value is true Checkbox should Select else none. I have bound the ENABLED_FLAG row attribute to checkbox data. Now irrespective of the ENABLED_FLAG value all checkboxes are getting selected by default. is there any setting am I missing here. Please guide me.

        attaching the screenshot for more reference.

        Note: ENABLED_FLAG value is boolean.

        Thanks,

        Nazeer.

        • Shay Shmeltzer

          How is your checkbox defined?

                      <oj-ext-checkbox-switch :id="[['oj-ext-checkbox-switch--283136707-1-' + $current.index]]" value="{{ $current.row.manager }}"></oj-ext-checkbox-switch>

          works for me.
           

          • Nazeer Anantha

            similarly. but little bit modification because this checkbox is part of Editable table.

            Defined two templates one for View and second is Edit.

            I have followed the below link for Editable table.

            https://www.youtube.com/watch?v=9j51yPE1YAw

            Note: when I use $current.row.ENABLED_FLAG inside the templatesException was raising like $current variable not found or not evaluated.

            whith this peice of code <oj-ext-checkbox-switch :id="[['oj-ext-checkbox-switch-1279035126-1-']]" value="{{ ENABLED_FLAG }}"></oj-ext-checkbox-switch> , Excpet default selection issue. everything is working as expected.

             

            Below is the complete code for editable table and checkbox. Please correct me.

            <div class="oj-flex">
                <div class="oj-flex-item oj-sm-12 oj-md-2">
                    <oj-button id="oj-button-1279035126-1" on-oj-action="[[$listeners.ojButton12790351261OjAction]]">Button</oj-button>
                </div>
                <div class="oj-flex-item oj-sm-12 oj-md-2">
                    <oj-button id="oj-button-1279035126-2" on-oj-action="[[$listeners.ojButton12790351262OjAction]]">Save</oj-button>
                </div>
            </div>
            <div class="oj-flex">
                <oj-table summary="Sample Table" scroll-policy="loadMoreOnScroll" id="oj-table-1279035126-1" class="oj-flex-item oj-sm-12 oj-md-12" row-renderer="[[$page.functions.rowRenderer]]" data="{{ $variables.fullLoad }}" columns='[{"headerText":"MSA_KEY","field":"MSA_KEY"},
                {"headerText":"ENABLED_FLAG","field":"ENABLED_FLAG"},
                {"headerText":"NEW_SEGMENT1","field":"NEW_SEGMENT1"},{"headerText":"NEW_SEGMENT2","field":"NEW_SEGMENT2"},
                {"headerText":"NEW_SEGMENT3","field":"NEW_SEGMENT3"},{"headerText":"NEW_SEGMENT4","field":"NEW_SEGMENT4"},
                {"headerText":"NEW_SEGMENT5","field":"NEW_SEGMENT5"},{"headerText":"NEW_SEGMENT6","field":"NEW_SEGMENT6"},
                {"headerText":"NEW_SEGMENT7","field":"NEW_SEGMENT7"},{"headerText":"NEW_SEGMENT8","field":"NEW_SEGMENT8"},
                {"headerText":"NEW_SEGMENT9","field":"NEW_SEGMENT9"},{"headerText":"NEW_SEGMENT10","field":"NEW_SEGMENT10"},
                {"headerText":"NEW_SEGMENT11","field":"NEW_SEGMENT11"},{"headerText":"NEW_SEGMENT12","field":"NEW_SEGMENT12"},
                {"headerText":"NEW_SEGMENT13","field":"NEW_SEGMENT13"}]' edit-mode="rowEdit" display="grid">
                    
                </oj-table>
            </div>
            <script type="text/html" id="rowTemplate">
              <tr>
                <td data-bind="text: MSA_KEY">
                </td>
                <td>
                <oj-ext-checkbox-switch :id="[['oj-ext-checkbox-switch-1279035126-1-']]" value="{{ ENABLED_FLAG }}"></oj-ext-checkbox-switch>
                </td>
                <td data-bind="text: NEW_SEGMENT1">
                </td>
                <td data-bind="text: NEW_SEGMENT2">
                </td>
                <td data-bind="text: NEW_SEGMENT3">
                </td>
                <td data-bind="text: NEW_SEGMENT4">
                </td>
                <td data-bind="text: NEW_SEGMENT5">
                </td>
                <td data-bind="text: NEW_SEGMENT6">
                </td>
                <td data-bind="text: NEW_SEGMENT7">
                </td>
                <td data-bind="text: NEW_SEGMENT8">
                </td>
                <td data-bind="text: NEW_SEGMENT9">
                </td>
                <td data-bind="text: NEW_SEGMENT10">
                </td>
                <td data-bind="text: NEW_SEGMENT11">
                </td>
                <td data-bind="text: NEW_SEGMENT12">
                </td>
                <td data-bind="text: NEW_SEGMENT13">
                </td>
              </tr>
            </script>
            <script type="text/html" id="editRowTemplate">
              <tr>
                <td>
                  <oj-input-text id="it1" value="{{MSA_KEY}}" data-oj-context></oj-input-text>
                </td>
                 <td>
                <oj-ext-checkbox-switch :id="[['oj-ext-checkbox-switch-1279035126-1-']]" value="{{ ENABLED_FLAG }}"></oj-ext-checkbox-switch>
                </td>
                <td>
                  <oj-input-text id="it2" value="{{NEW_SEGMENT1}}" data-oj-context></oj-input-text>
                </td>
                </td>
                <td>
                  <oj-input-text id="it3" value="{{NEW_SEGMENT2}}" data-oj-context></oj-input-text>
                </td>
                <td>
                  <oj-input-text id="it3" value="{{NEW_SEGMENT3}}" data-oj-context></oj-input-text>
                </td>
                <td>
                  <oj-input-text id="it3" value="{{NEW_SEGMENT4}}" data-oj-context></oj-input-text>
                </td>
                <td>
                  <oj-input-text id="it3" value="{{NEW_SEGMENT5}}" data-oj-context></oj-input-text>
                </td>
                <td>
                  <oj-input-text id="it3" value="{{NEW_SEGMENT6}}" data-oj-context></oj-input-text>
                </td>
                <td>
                  <oj-input-text id="it3" value="{{NEW_SEGMENT7}}" data-oj-context></oj-input-text>
                </td>
                <td>
                  <oj-input-text id="it3" value="{{NEW_SEGMENT8}}" data-oj-context></oj-input-text>
                </td>
                <td>
                  <oj-input-text id="it3" value="{{NEW_SEGMENT9}}" data-oj-context></oj-input-text>
                </td>
                <td>
                  <oj-input-text id="it3" value="{{NEW_SEGMENT10}}" data-oj-context></oj-input-text>
                </td>
                <td>
                  <oj-input-text id="it3" value="{{NEW_SEGMENT11}}" data-oj-context></oj-input-text>
                </td>
                <td>
                  <oj-input-text id="it3" value="{{NEW_SEGMENT12}}" data-oj-context></oj-input-text>
                </td>
                <td>
                  <oj-input-text id="it3" value="{{NEW_SEGMENT13}}" data-oj-context></oj-input-text>
                </td>
              </tr>
            </script>

             

            • Shay Shmeltzer

              Try and use the cell template approach for your editable table as shown here:

              https://blogs.oracle.com/vbcs/editable-tables-in-visual-builder-the-oracle-jet-6-way

               

              • Nazeer Anantha

                Wow, Thanks a lot Shay. Everything working as expected including default checkbox selection also.

                 

                Here is my working code.

                 

                <div class="oj-flex">
                    <oj-table summary="Sample Table" scroll-policy="loadMoreOnScroll" id="oj-table--848904807-1" class="oj-flex-item oj-sm-12 oj-md-12"
                     data="{{ $variables.dataLoad }}" columns='[{"headerText":"MSA_KEY","field":"MSA_KEY"},
                     {"headerText":"ENABLED_FLAG","field":"ENABLED_FLAG","template":"ENABLED_FLAG"},
                     {"headerText":"NEW_SEGMENT1","field":"NEW_SEGMENT1","template":"NEW_SEGMENT1"},
                     {"headerText":"NEW_SEGMENT2","field":"NEW_SEGMENT2","template":"NEW_SEGMENT2"}]' edit-mode="rowEdit">
                        <template slot="ENABLED_FLAG">
                            <oj-ext-checkbox-switch :id="[['oj-ext-checkbox-switch--848904807-1-' + $current.index]]" value="{{$current.row.ENABLED_FLAG}}"></oj-ext-checkbox-switch>
                        </template>
                        <template slot="NEW_SEGMENT1">
                            <oj-input-text value="{{$current.row.NEW_SEGMENT1}}" :id="[['oj-input-text--848904807-1-' + $current.index]]"></oj-input-text>
                        </template>
                        <template slot="NEW_SEGMENT2">
                            <oj-input-text value="{{$current.row.NEW_SEGMENT2}}" :id="[['oj-input-text--848904807-2-' + $current.index]]"></oj-input-text>
                        </template>
                    </oj-table>
                </div>
                <div class="oj-flex">
                    <div class="oj-flex-item oj-sm-12 oj-md-2">
                        <oj-button id="oj-button--848904807-1" on-oj-action="[[$listeners.ojButton8489048071OjAction]]">Save</oj-button>
                    </div>
                </div>