X

Shay Shmeltzer's Oracle Development Tools Tips

Multi-row Selection with JET 9 in Visual Builder

Shay Shmeltzer
Director of Product Management - Oracle

With the new support for Oracle JET 9 in Oracle Visual Builder, it's much simpler to create a multi-row selection enabled table that with checkboxes for row selection. Below is a quick video showing how this is done. This is much simpler compared to the approach you had to take before.

The table automatically adds a selection checkbox column when you set the selection-mode.row="multiple" attribute. There is an on-selected-changed event on the table - and you can attach an action chain to it. The event gets an array of the selected row keys as an input parameter. In the video, I'm simply looping over this array and show a notification with the row key referring to them with the expression - [[ $variables.keys[$current.index] ]]. You can of course use this array for any follow up steps you want to do on the rows.

Note that this will only work if your app is using the Redwood theme (the default for new apps in VB). If your app is still using an Alta based theme you won't see the checkboxes, you'll need to switch your app to Redwood to get them.

Join the discussion

Comments ( 9 )
  • Marcques Mouton Wednesday, October 21, 2020
    Good day, thank you for this amazing product.. And the efforts put into making it easy for us to work with...
    I have an off-topic question.. What is the possibilities of adding node_modules to visual builder? Example , i need to use react. I will i go about adding react to my project..
    thanks
  • Shay Thursday, November 12, 2020
    Marcques,
    VB is a client side tool - so you can add HTML Web components into it, and you can add REST sources of data on the back.
    I'm not exactly clear on what you are aiming to do with React in that case - I would suggest posting your question on our forum with more info on your use case - https://cloudcustomerconnect.oracle.com/resources/e610f4723c/summary
  • Ilias Friday, January 8, 2021
    Hi,

    I'm trying to reset selection after an action (e.g. delete row) on selected rows. Is there any trick for this ?
  • Shay Shmeltzer Sunday, January 10, 2021
    Elias - use our forum for technical questions - https://cloudcustomerconnect.oracle.com/resources/e610f4723c/summary
    In general you can bind a variable to the selected property of the table and then reset it to clear the selected rows.
  • Mike Friday, January 29, 2021
    Thank you for these articles. Is there a trick to sum up/aggregate the columns easily for a table and display under it?
  • Shay Shmeltzer Sunday, January 31, 2021
    Mike - you can use the footer area of a table to show totals - you'll need to calculate them on your own though. https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojTable.html#FooterRendererContext
  • Kanika Gupta Monday, February 15, 2021
    Reset Selection Tip didn't worked for me. Could you please elaborate.
    I have bind a variable of type 'any' to the selected property of the table and tried resetting it to clear the selected rows using button action but this didn't worked.
  • Kanika Gupta Monday, February 15, 2021
    How can we disable table rows based on certain column's data and disable row selection when user clicks on Select All checkbox.
  • Shay Sunday, March 7, 2021
    Kanika,
    There isn't a way to disable the selection box for specific rows - if you need to do this you'll need to build your own row selector field.
    If you are running into issues with clearing the selection - post on our forum: https://cloudcustomerconnect.oracle.com/resources/e610f4723c/summary
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.