Oracle by Example brandingAccess the Values of a Selected Oracle Visual Builder Table Row

section 0Before You Begin

This 10-minute tutorial shows you how to access the column values of a table row that you select in an Oracle Visual Builder web application.

Background

When working with tables, you may find that you need to store the data contained in a row in a variable. For example, you may want to populate a text component with one or more field values from the row when the user clicks on it.

You should be familiar with the basics of creating an application, adding components to pages, and creating action chains. If you haven't already, you might want to complete the Create a Web Application in Oracle Visual Builder workshop, or equivalent.

What Do You Need?

section 1Create a Web Application

  1. In the web browser, log in to Oracle Visual Builder.
  2. On the Visual Applications page, click New.
    Description of vbcsst_cra_s2.png follows
    Description of the illustration vbcsst_cra_s2.png
  3. In the Create Application dialog box, enter the following.
    • Application Name: Selection Application
    • Description: Tutorial application

    The Application ID text field is automatically populated as you type based on the Application Name. The Application template field is set to Empty Application.

  4. Click Finish.

    The application is created and opens on the Welcome page.

  5. Click the Web Apps tab, then click + Web Application (or click the + sign at the top of the pane).
  6. In the Create Web Application dialog box, enter selectwebapp in the Application Name field and click Create.

    The application opens on the main-start page.

section 2Import a Business Object from a File

In this step, you'll import data from a CSV file to create a business object for the application.

  1. Click this link and on the page displaying the data, right-click the page and choose Save as from the menu to download the Country.csv file. Feel free to examine the contents of the file. It contains data for all the countries in the European Union.
  2. Click the Business Objects Business Objects icon tab.
  3. Click the Business Objects Menu Menu icon and select Data Manager.
  4. Click Import Business Objects.
  5. On the Upload File step of the import wizard, click the Drag and Drop area to select the Country.csv file, or drop the file into the area. Click Upload.
  6. When the upload succeeds, click Next.
  7. On the Business Objects step, you'll find that the Country business object was created. Click Next.
  8. On the Fields step, notice that the Country object has many fields, shown in alphabetical order: accession, area, capital, code, memEPs (number of members of the European Parliament), name, popDensity (population density), and population. Click Finish.
    Description of vbcsst_imp_s8.png follows
    Description of the illustration vbcsst_imp_s8.png
  9. In the Applying Changes dialog box, click Close after the data import finishes successfully.
  10. Click the Country business object in the Navigator, then click the Data tab to view the imported data, which is now displayed in the order in which it appeared in the CSV file.

section 3Use the main-start Page to Display Countries

  1. Click the Web Apps Web Applications icon tab in the Navigator.
  2. Expand the selectwebapp and main nodes, then click main-start. You're viewing the Page Designer.
  3. In the Components pane, under Controls & Navigation, locate the Heading component and drag it onto the page.
  4. In the Properties pane, enter Countries in the Text field.
  5. Type "input" in the Components pane's Filter box, then drag the Input Text component onto the page.
  6. In the Properties pane, enter Selected Country in the Label Hint field.
  7. Type "tab" in the Components pane's Filter box, then drag the Table component onto the page below the Input Text component.
  8. In the Properties pane, select Add Data on the Quick Start tab.
  9. On the Locate Data step of the Quick Start, select the Country business object, then click Next.
  10. On the Bind Data step, under item[i], select the id, name, capital, and population check boxes (in that order), and then click Next.

    You could include more fields, but we're keeping it simple.

  11. On the Define Query step, click Finish.

    The table is displayed, with all 28 countries.

    Description of vbcsst_tab_s11.png follows
    Description of the illustration vbcsst_tab_s11.png

  12. With the table selected, click the General tab in the Properties pane, then select Single for the Selection Mode, Row property to allow the user to select a single row. We’ll store the data from that row in a variable, which we’ll use later.
    Description of vbcsst_tab_s12.png follows
    Description of the illustration vbcsst_tab_s12.png

section 4Create a Type and Variable for the Selected Country

  1. Click the Types tab.
  2. Click + Type and select From Endpoint from the menu.
  3. In the Create Type From Endpoint dialog box, expand the Business Objects and Country nodes.
  4. Select GET /Country/{Country_Id}, then click Next.
    Description of vbcsst_var_s4.png follows
    Description of the illustration vbcsst_var_s4.png
  5. Under Endpoint Structure, select the id, name, capital, and population check boxes and click Finish.
  6. In the Properties pane, change the ID value from get_Country to CountryType.
    Description of vbcsst_var_s6.png follows
    Description of the illustration vbcsst_var_s6.png
  7. With CountryType selected, right-click and select Create Variable.
    Description of vbcsst_var_s7.png follows
    Description of the illustration vbcsst_var_s7.png

    A new CountryTypeVar variable appears in the Variables list on the Variables tab.

  8. In the Properties pane, change CountryTypeVar to selectedCountry in the ID field.
    Description of vbcsst_var_s8_result.png follows
    Description of the illustration vbcsst_var_s8_result.png

section 5Create an Action Chain to Display the Selected Country

  1. Click the Page Designer tab to return to the main-start page. Select the table on the page, and in the Properties pane, click the Events tab.
  2. Click + Event Listener and select On 'First Selected Row' from the menu.

    You are taken to the Action Chain editor, with the name of the new action chain shown in the Properties pane.

  3. From the Actions palette, drag an Assign Variables action onto the canvas.
  4. In the Properties pane, type "sel" in the Variables field and choose selectedCountry from the list:
    Description of vbcsst_acc_s5.png follows
    Description of the illustration vbcsst_acc_s5.png
  5. In the Properties pane, hover over Value and click the down arrow that appears.
  6. In the dialog box, select rowData, which is an input parameter that's automatically passed to the action chain, containing the clicked row's data.
  7. Click the Page Designer tab to return to the main-start page, select the Selected Country Input Text component, and click the Data tab.
  8. Hover over the Value label and click the down arrowSelect Variable icon that appears. Expand the selectedCountry node, and select name.
    Description of vbcsst_acc_s7.png follows
    Description of the illustration vbcsst_acc_s7.png

section 6Test and Enhance the Application

  1. Above the page, click Live to test the application.
  2. Select a row from the table to see the country name appear in the Selected Country field.
  3. Click Design to return to the design canvas.
  4. With the Input Text component selected, click the Data tab in the Properties pane. For Value, add the following snippet after the variable with the country name (variables.selectedCountry.name): 
     + ": " + $variables.selectedCountry.population
    Description of vbcsst_ten_s4.png follows
    Description of the illustration vbcsst_ten_s4.png

    The population of the country you last selected is immediately displayed in the Input Text field.

  5. Click Live and select a row from the table. This time both the country name and the population appear in the Selected Country field. Click Design when you're done.

more informationWant to Learn More?