X

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 ( 9 )
  • 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.

    Thanks,
    Priya
  • 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 ?
    Thanks,
    Priya
  • 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.

    Regards,
    Sai
  • Nalinee Wednesday, November 13, 2019
    Hello Shay,

    First of all, thank you for taking the time to write your blogs. They are very helpful.

    I am having an issue with table selection. I am using the first-selected-row event to trigger a REST Endpoint call for the selected row.

    It is working correctly except for the first row. When the first row of the table is selected, the action chain is not triggered.

    Have you encountered this problem?

    Thanks and Regards,
    Nalinee
  • Shay Shmeltzer Wednesday, November 13, 2019
    Nalinee, this is a known issue with JET 7.1 that got fixed in JET 7.1.1 and VB 19.3.1.4 which should be rolled out to your server soon.
    You can try updating the JET version in your web app preferences to 7.1.1 and see if it helps.
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.