Dynamic UI

OVERVIEW:

• The 'Dynamic UI' activity allows you to show the dynamic UI in a custom Modal or Window pop-up inside Oracle Service Cloud. In the PopFlow Studio, you can configure the 'Dynamic UI' activity.

Open

• After opening the 'Dynamic UI' activity, you will get the below configuration panel.

Open

Default Configuration Parameters:

• Title: The title to be shown in the popup Modal or Window.

• Message Pop-up Type: The popup type to be opened in OSC.

• Message Content-Type: UI type of Pop-up.

• Pop-up height: The Height of the popup Modal or Window.

• Pop-up Width: The Width of the popup Modal or Window.

Add Button allows you to add buttons to the popup. When the button is clicked, the activities defined in the button definition will be executed.

Content allows you to add your own content in Text, HTML, and URL.

HOW IT WORKS:

A Simple Example to configure the 'Dynamic UI' activity in PopFlow Studio.

• Select the 'Dynamic UI' activity from 'Activity Sidebar'.

• Click on 'Dynamic UI' activity to open and configure the 'Dynamic UI' activity.

• Once the Activity is opened now fill the Default's required fields.

• Initially, you will get Message Pop-up Type as MODAL, Message Content Type as TEXT, Pop-up Height as 200, and Pop-up Width as 630.

• Enter the ‘Title’ and data to display on Modal.

• You can also format the text data using the formatting toolbar.

• Execute the workflow it will open a Modal in OSC as shown below.

• Now change the ‘Message Content-Type’ to HTML it will open an HTML editor as shown below.

• Write HTML code to show its preview in MODAL or WINDOW.

• You can also check the preview of HTML code in Popflow by clicking on the preview button on the HTML editor as shown below.

• Output in OSC

• Now change the ‘Message Content-Type’ to URL it will show a text field as shown below.

• Enter a valid URL in the 'ADD URL' field to open the link in Modal or Window.

• Output in OSC

Message Pop-up Type :

1. MODAL (Default)

2. WINDOW

NOTE: For Window Pop-up 'Pop-ups and redirects' setting must be selected as Allow for your instance in the browser setting.

Message Content-Type :

1. TEXT (Default)

2. HTML

3. URL

Pop-up Height and Width :

• Sets the height and width of Modal or Window which will open in the OSC.

Adding Buttons: 

• To add the Custom button you need to click on the 'Button' icon to create the buttons. After clicking on the button, you will see a field name as 'Name' and a checkbox name as 'Close Popup'. Enter the Button name inside the field and click on the checkbox if you want to close the pop-up after clicking on the button in the Oracle service cloud. You can create multiple buttons. Once the buttons are created you will notice on the designer page has changed under the 'Dynamic UI'  same path(button) is created which you created inside the 'Dynamic UI' activity. You can add multiple activities on that path to perform several tasks on a button click.

Tips: 

• You can use dynamic data in Dynamic UI activity.

• Use the variable name inside a curly bracket {}

• Example: {contact.lookupName} it will show the contact name.

• You can use Javascript and CSS code also inside a HTML editor.

Dynamic Data Example:

• Suppose we have a variable name as “ContactsInfo” which is of type object.

• Let’s use the variable in our Dynamic UI activity to preview the dynamic data.

• You can use the variable name inside the curly bracket as shown below.

• You can use the dynamic data in TEXT, HTML and URL type.

• Execute the activity it will show the value inside the “ContactsInfo.lookupName“ as shown below.