X

Shay Shmeltzer's Oracle Development Tools Tips

Using Checkbox to Select Rows in a Table in Visual Builder

Shay Shmeltzer
Director of Product Management - Oracle

NOTE - The approach shown in this blog is no longer going to work with newer versions of Oracle JET/ Visual Builder. With Oracle JET 9 there is a built-in checkbox selection for tables. For JET 8.1 you can adopt the approach shown here.

This blog will show you how to add a checkbox to rows in a table to allow you to pick specific rows. Note that an alternative approach to selecting multiple rows in a table is to use the built in multi-row selection capabilities of the JET table as shown here, but some users find it easier to use a check box so...

To achieve this, you'll want to base your table on an ArrayDataProvide rather than an ServiceDataProvider - this way you'll be able to access the values in the rows later to figure out which ones were selected.

You'll add a new boolean attribute to your ADP to track if a row is selected or not - selecting a row will turn the value of this attribute to true.

For the check box, we are going to use the "boolean checkbox component" - one of the components available in the Visual Builder Component Exchange. Once you add the component to your VB application, you can drag it onto your table's empty column, and hook the value of the new boolean field you introduced.

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

In the video you can also see how to use the for loop and if logic actions in an action chain to loop over the records in the table and check the value in the field using this expression{{ $page.variables.DeptADP.data[$current.index].selected }}

Check out the quick demo here:

 

 

Join the discussion

Comments ( 9 )
  • Sharat Puranikmath Thursday, August 1, 2019
    Please show you ADP service response.
  • Shay Shmeltzer Thursday, August 1, 2019
    Sharat, I'm not sure what you are looking for the ADP is not returning anything - the content of the ADP comes from the BO + the extra field.
  • Sharat Puranikmath Friday, August 2, 2019
    I wanted to know the response structure/response from the service where you get the data from. When I am using my service create type, I get a different structure a the table population fails. When I create a SDP, it works. Please see my service type in the below link.
    https://drive.google.com/open?id=1X0gaQ72Nr_W0RfGU9ETthS7FyZEbSFCL
  • Shay Shmeltzer Friday, August 2, 2019
    Sharat - try posting your question on our forum -
    https://cloudcustomerconnect.oracle.com/resources/e610f4723c/summary
    From a quick scan looks like you have an extra level of array in your object []
  • Santoshi Thakur Tuesday, April 7, 2020
    Hi Shay,

    When I am trying to assign value of the checkbox component as {{$current.row.Selected}}, there is an error coming up as
    "Cannot set the value true/false to property Selected of the variable ' projectLOVADP_value 'as it disallows property writes. Use VB actions like assignVariablesAction to update the variable instead."
    In the above message "projectLOVADP" is my ADP.

    Any help around this would be of great help.
    Thanks in advance.
  • Shay Shmeltzer Tuesday, April 7, 2020
    Santoshi - if you are using VB 19.4.3 or higher you should be using ADP2 approach for updatable fields - see https://blogs.oracle.com/shay/editable-tables-in-visual-builder-the-oracle-jet-81-approach
  • Arvind Thursday, April 30, 2020
    Hi Shay,

    Hope you are doing well.

    After saving the data and re-open the same record selected check box is disappeared from the list.

    May i know what is the issue and solution for this?
  • Shay Shmeltzer Thursday, April 30, 2020
    Arvind, the info on which records were selected is not persisted in the database, so when you refetch records there is no info on which records you marked.
    For further questions post on our forum - https://cloudcustomerconnect.oracle.com/resources/e610f4723c/summary
  • Aditya Anand Thursday, June 25, 2020
    Hii,Shay
    Please make a video on Client Side validation.
    Thank You
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.