Before You Begin

This 15-minute tutorial shows you how to create tables to display processes and tasks.

Background

In Visual Builder, a tab set component allows you to create two tables, one for processes and one for tasks. Only one table is visible at any one time. Beneath the tasks table, a text element displays the contents of the message used in the message start event for a specific task. A Refresh button updates the table data.

What Do You Need?

• Access to Oracle Integration
• A supported browser
• Completion of the previous tutorials in this Learning Path

Create a Tab Set to Display Processes and Tasks

1. On the main-start page, drag a Button from the Common components to below the horizontal rule you created at the end of the previous tutorial.
2. In the General tab of the Properties pane, enter Refresh in the Text field. You'll create an action chain for the button later.
3. From the Layout components, drag a Tabs with Content component under the button.

   

4. Click the Tab Bar component, then under Tabs in the Properties pane, change Tab 1 to Processes and Tab 2 to Tasks. Click the Delete icon for Tab 3 to delete it.

   

Create a Table to Display Processes

1. Click the Processes tab of the tabset if it isn't already selected.
2. From the Collection components, drag a Table to just under the Processes tab, into the Standard Layout component in the Grid Row in Switcher Slot area.
   

   

3. Click Add Data to use a quick start to populate the table.

   

4. On the Locate Data page of the quick start, select the process instance icon under Process Objects, and then click Next.

   

5. On the Bind Data page, select the id, label, and state check boxes, in that order. From the Primary Key drop-down list, select id if it isn't already selected. Click Next.

   

6. On the Define Query page, expand the parameters node under Target and select alias.

   

7. Enter ["TravelProcess"] in the expression area at the bottom. Select the Expression option. Click Finish.

   

   This string value is substituted for the processInfo.processId variable in each task title that you specified in Processes in Oracle Integration.

   The table is empty, since you didn't create any processes in the first module.

Create a Table to Display Tasks

1. Click Live, select the Tasks tab, then click Design to return to design view.
2. From the Collection components, drag a Table to just under the Processes tab, into the Standard Layout component in the Grid Row in Switcher Slot area, just as you did in the previous section.
3. Click Add Data to use a quick start to populate the table.
4. On the Locate Data page of the quick start, select the task icon under Process Objects, and then click Next.
5. On the Bind Data page, select the id, label, and state check boxes, in that order. From the Primary Key drop-down list, select id, if necessary. Click Next.
6. On the Define Query page, expand parameters under Target and select alias.
7. Enter ["TravelProcess"] in the expression area at the bottom. Select the Expression option. Click Finish.
8. Click the table and the Quick Start tab if necessary, and then click the Add Task Actions quick start. (If you don't see the Add Task Actions quick start right away, click another tab, and then click the Quick Start tab again. If you still don't see it, try refreshing your browser.)
   

   

9. On the Configure Task Actions page, click Finish to accept the default settings.
   

   

   The Tasks table now has a Choose an Action drop-down list and a Submit button next to it. Both are disabled.

   

10. Click the Variables tab. In addition to the variables created for the task actions and the tab set, you can see the Process Data Provider variables created for the two tables: processInstanceListPDP and taskListPDP. Don't worry if the list doesn't look exactly like the one shown.
    

    

Create a Text Area to Display Message Data

1. On the Variables page, click + Variable to add a new page variable to display the message contents.
2. Enter taskDescription in the ID field, accept the default String type, and click Create.
3. Click the Page Designer tab.
4. From the Common components, drag a Text component just under the table, but still within the Tabs with Content component. This is tricky, because the drop target is narrow.

   

5. By default, the Text component takes up two grid columns. Select and drag the right handle so the component takes up 6 columns.

   The Cell [2] component changes to Cell [6].

6. In the Structure view, click the Bind Text component, then in the Properties pane, click the Select Variable icon for the Value field.
7. From the Page Variables list, select taskDescription.
8. Click the Tasks table, click the Events tab, click + New Event, and select Quick Start: 'first-selected-row'. There's already a first-selected-row action chain; you're adding another one.

   

9. From the General actions list, drag an Assign Variables action to the + sign.
10. Click the Assign link next to Variables.
11. Drag rowData from the Sources side to taskDescription on the Target side.
12. In the Expression area, add .description after $variables.rowData. The expression is

    $variables.rowData.description

    

    In Visual Builder, this description attribute is mapped to the execData.longsummary that you configured in Processes in Oracle Integration.

13. Click Save.

Configure the Refresh Button

1. Click the Page Designer tab to return to the main-start canvas, and then click the Refresh button.
2. Click the Events tab if necessary, then click + New Event. From the menu, select Quick Start: 'ojAction'.
3. From the General actions list, drag a Fire Data Provider Event action to the + sign.
4. Under Type, select the Refresh option. Click the Select Variable icon for the Event Target field.
5. From the Page Variables list, select processinstanceListPDP.
   

   

6. From the General list, drag another Fire Data Provider Event action to the + sign, under the first Fire Data Provider Event.
7. Under Type, select the Refresh option. Click the Select Variable icon for the Event Target field.
8. From the Page Variables list, select taskListPDP.

   The Refresh button now fetches the current processes and tasks. This completes the page creation in Visual Builder. Click the Page Designer tab to return to the main-start page.