The Visual Builder Cloud Service Blog

  • June 18, 2018

Accessing Selected Row's Values in a Table's in Visual Builder

Shay Shmeltzer
Director of Product Management - Oracle

Usually when you show data in a table in Visual Builder Cloud Service you also want to allow people to choose one of the rows and do something with it. For example you might want to pass a value from one of the columns in the row that you selected to some action flow.

In the video below we show you how to access the values in the selected row in a table.

We do this by hooking an action flow to the change event on the table's firstSelectedRow attribute. This attribute provides you with the data and the key of the selected row in an oj-Table. So, in the action flow we are taking the value from that data object and using it to do something, in the demo we just assign this to another variable on the page - which then allows us to show it in another field on the page.

Here is the complete flow:

In the action chain we have access to this variable with the data of the row:

{{ $chain.variables.firstSelectedRow.data }}

The result is a page that looks like this:

Join the discussion

Comments ( 7 )
  • Priya Tuesday, June 26, 2018
    Hi Shay,

    It is a very useful article.
    I am new to this vbcs and am trying many samples. Could you please provide a link to refer about table row selection and navigating to edit page. A video or any documents to refer for this will help me a lot.

  • shay Tuesday, June 26, 2018
  • Priya Wednesday, June 27, 2018
    Hi Shay,
    Thank you,
    For me when i try with the option "Add Edit Page" for a table, it does not add button,selextion event any action or action chain. It simply adds a edit page. "Add Create Page" works well by adding a + button and a navigation to a create page.
    It is a mobile application.
    Can i do the edit functionality manually? by adding button and mapping the selected row id to the get rest endpoint ?
  • shay Wednesday, June 27, 2018
    Priya, In a mobile app we don't add an edit button since this is not the best practice in terms of UI design.
    Rather, you would probably hook up a select event on the table to navigate to the edit page.
    See video - https://www.youtube.com/watch?v=6n6p6D4ReLE
    See tutorial - https://docs.oracle.com/en/cloud/paas/app-builder-cloud/tutorials.html
  • Chandrakala a Monday, February 25, 2019
    Hi Shay,
    could you please share reference to achieve below problem statement

    I have table with a column that is a hyperlink, on click of this hyperlink I want to navigate to next page and print the corresponding details in table format
  • shay Monday, February 25, 2019
    Chandrakala - please post technical questions to our forum - https://cloudcustomerconnect.oracle.com/resources/e610f4723c/summary
    In general with the approach shown in the blog you can pick up the value of the id in the row you are on then pass it as a parameter to your next page in the action chain when you use the navigate operation.
  • Saikumar Reddy T Wednesday, July 24, 2019
    This information helped me to solve the table selection issue which I am facing.
    Thank you Shay.

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.