How can I use a Smart Action to open a dialog box?

You can use a Smart Action to open a dialog box to address various use cases, such as updating custom fields or displaying child objects, and external data. Here we discuss the steps to open a dialog using a custom Smart Action to integration with your workflow.

Configuration Steps in Application Composer

In Application Composer, do the following:

1. In the Application Composer Common Setup list, select Smart Actions.
2. In the Smart Actions work area, click Create.
3. Select UI-based action and click Continue.
4. Provide the following information:
   • Name: Enter any name. For this example, we'll use My Dialog.
   • Object: Select Service Request from the drop-down list.
   • Action ID: This field is automatically populated.
5. Click Continue.
6. On the Availability workspace, do the following:
   • Application: Click in the field and select Service Center.
   • UI Availability: Click in the field and select the appropriate UI availability.
   • Roles: Click in the field and select the roles you want to enable for this dialog.
   • Add any conditions you want.
7. Click Continue.
8. On the Action Details workspace, do the following:
   • Navigation Type: Select local.
9. On the Confirmation Message leave the field blank, and click Continue, then click Submit which creates the Smart Action.

Configuration Steps in Visual Builder

1. Open Visual Builder Studio with Oracle CX Service UI Extension App installed.
2. Go to service > ec > sr > edit.
3. Choose the Subview Container Layout component from the Structure panel.
4. On the property panel, create a case.

   No condition is required.

5. Create a new section and drill into the new section.
6. From the component pallet, search for Dialog and drag the component into the Structure panel.
   1. Design the Dialog as needed.
   2. Copy the Dialog ID as we'll need in the next steps.
7. Still in the Edit page, navigate to Event Listener and create a new listener to beforeInvokeSmartActionEvent.

   Make sure the Input Parameters are properly mapped.

8. Drill into the created action chain.
9. Add an If action with the following condition: event.detail.smartAction === <your action ID>
10. Go to the code view and the dialog open followed by stopPropagation.
11. The action should look like the following example:

    async run(context, { previous, event }) {
    
    const { $page, $flow, $application, $base, $extension } = context;
    
    if(event.detail.smartAction === 'CUST-MyDialog-serviceRequests'){
    
    document.getElementById('oj-dialog-485071903-1').open();
    
    return {stopPropagation: true};
    
    }
    
    return previous;
    
    }