Oracle by Example brandingConfigure Buttons and Actions for Process Start Events in Visual Builder

section 0Before You Begin

This 15-minute tutorial shows you how to create buttons to start the travel process using each kind of start event.

Background

When you created the TravelProcess in Processes in Oracle Integration, you specified three different start events. In Visual Builder, you can create button components and specify action chains that start a process and configure the mapping of Visual Builder data to the messages and form data you created in Processes.

An action chain, which is triggered by an event (in this case, a button click), consists of one or more actions. Each action represents an individual unit of work. In this case, the action chain has two actions: starting the process and firing a notification.

What Do You Need?

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

section 1Place Buttons on the Canvas

  1. From the Common components, drag a Label component below the horizontal rule. In the Text field for the label, enter Start TravelProcess.
  2. From the Common components, drag a Button component under the label. It takes up two grid columns.
  3. Drag a second Button component to the right of the first one, and drag a third one to the right of the second one.
    Description of vbpb6_sec1_s3.png follows
    Description of the illustration vbpb6_sec1_s3.png
  4. Click the first button and, in the General tab, enter Simple Message in the Text field.
  5. Click the second button and enter Complex Message in the Text field.
  6. Click the third button and enter Complex Form in the Text field.

You'll configure these buttons to start the process, passing the data from the page variables to the process.


section 2Configure an Action Chain for the Simple Message Button

  1. Click the Simple Message button, then click the Events tab. Click + New Event. From the menu, select Quick Start: 'ojAction'.
    Description of vbpb6_sec2_s1.png follows
    Description of the illustration vbpb6_sec2_s1.png
  2. In the Actions palette, scroll down to Process and drag Start Process to the + sign pointed to by the Start action.
  3. In the Properties pane, click the Select link next to Process Interface. In the Select Process Interface dialog box, expand the Process Aliases node, expand the TravelProcess node, select Simple Message, and click Select.
    Description of vbpb6_sec2_s3.png follows
    Description of the illustration vbpb6_sec2_s3.png
  4. Click the Assign link next to Input Parameters.
    Description of vbpb6_sec2_s4.png follows
    Description of the illustration vbpb6_sec2_s4.png
  5. In the Assign Input Parameters dialog box, drag the amount, city, and reason page variables to the appropriate target parameters. Click Save when you are done.
    Description of vbpb6_sec2_s5.png follows
    Description of the illustration vbpb6_sec2_s5.png

    The input parameters are now displayed as MAPPED.

  6. From the General actions list, drag a Fire Notification action to the + sign of the success branch.
  7. In the Properties pane, click the Expression Editor Expression Editor icon icon next to Message.
    Description of vbpb6_sec2_s7.png follows
    Description of the illustration vbpb6_sec2_s7.png
  8. In the text area, enter "Started Process: " followed by a plus sign.
  9. Expand the Results node, then startProcess, then content. Select id and drag it next to the plus sign (insert spaces for readability), and then click Save.
    Description of vbpb6_sec2_s9.png follows
    Description of the illustration vbpb6_sec2_s9.png
  10. From the Display Mode drop-down list, select transient.
  11. From the Notification Type drop-down list, select info.
  12. In the required Summary field, enter Starting process for Simple Message.
    Description of vbpb6_sec2_s12.png follows
    Description of the illustration vbpb6_sec2_s12.png

section 3Configure an Action Chain for the Complex Message Button

  1. Click the Page Designer tab to return to the main-start canvas.
  2. Click the Complex Message button, and then click the Events tab if necessary. Click + New Event. From the menu, select Quick Start: 'ojAction'.
  3. In the Actions list, scroll down to Process and drag Start Process to the + sign pointed to by the Start action.
  4. In the Properties pane, click the Select link next to Process Interface. In the Select Process Interface dialog box, expand the Process Aliases node, expand TravelProcess, select Complex Message, and click the Select button.
  5. Click the Assign link next to Input Parameters.
    Description of vbpb6_sec3_s5.png follows
    Description of the illustration vbpb6_sec3_s5.png
  6. In the Assign Input Parameters dialog box, expand the travelApproval node under the target parameters. Drag the amount, city, and reason page variables from sources to the corresponding target parameters. Click Save when you are done.
  7. From the General actions list, drag a Fire Notification action to the + sign of the success branch.
  8. In the Properties pane, click the Expression Editor Expression Editor icon icon next to Message.
  9. In the text area, enter "Started Process: " followed by a plus sign.
  10. Expand the Results node, then startProcess, then content. Select id and drag it next to the plus sign (insert spaces for readability), then click Save.
  11. From the Display Mode drop-down list, select transient.
  12. From the Notification Type drop-down list, select info.
  13. In the required Summary field, enter Starting process for Complex Message.

section 4Configure an Action Chain for the Complex Form Button

  1. Click the Page Designer tab.
  2. Click the Complex Form button, and then click the Events tab if necessary. Click + New Event. From the menu, select Quick Start: 'ojAction'.
  3. In the Actions list, scroll down to Process and drag Start Process to the + sign pointed to by the Start action.
  4. In the Properties pane, click the Select link next to Process Interface. In the Select Process Interface dialog box, expand the Process Aliases node, expand TravelProcess, select Complex Form, and then click Select.
  5. Click the Assign link next to Input Parameters.
    Description of vbpb6_sec4_s5.png follows
    Description of the illustration vbpb6_sec4_s5.png
  6. In the Assign Input Parameters dialog box, drag the customerID page variable from sources to the customerID target parameter.
  7. Expand the travelApproval node under the target parameters, then drag the amount, city, and reason page variables to the corresponding target parameters. Click Save when you are done.
  8. From the General actions list, drag a Fire Notification action to the + sign of the success branch.
  9. In the Properties pane, click the Expression Editor Expression Editor icon icon next to Message.
  10. In the text area, enter "Started Process: " followed by a plus sign.
  11. Expand the Results node, then startProcess, then content. Select id and drag it next to the plus sign (insert spaces for readability), then click Save.
  12. From the Display Mode drop-down list, select transient.
  13. From the Notification Type drop-down list, select info.
  14. In the required Summary field, enter Starting process for Complex Form.

    You've now configured all the message start buttons.

  15. Click the Page Designer tab to return to the main-start canvas. From the Layout components, drag a Horizontal Rule under the three buttons.