Build OmniStudio Components for Cases

After completing this unit, you’ll be able to:

Configure the Custom Lightning Web Component properties in an OmniScript.
Set Messaging Framework properties for an OmniScript.
Add a PubSub Event action in a FlexCard.
Create a PubSub Event Listener in a FlexCard.

Display and Create Cases

Vijay is ready to tackle how to display and create new cases in the Case Management OmniScript. To do this, he must:

Create a new OmniScript to create cases.
Create a FlexCard to display cases.
Embed both components in a new custom Lightning web component.
Configure how all these components communicate with each other.

This is arguably Vijay’s most complex requirement, so settle in with your beverage of choice, as the next two units walk through how he handles it.

OmniScript for New Cases

Vijay creates a second OmniScript called Create Case. When a Case Management OmniScript user clicks the Create Case button, the Create Case OmniScript opens in a modal window.

Configure the Field Elements and Button in the Step

Let’s examine the components that comprise this one-step OmniScript.

The Design view of the elements in the Create Case OmniScript

The OmniScript contains:

Two text inputs inside the step: Case Subject (1) and Case Details (2).
A Create Case button (3) inside the step.
A DataRaptor Post Action (4) outside the step. This action calls a DataRaptor Load to create the case.

Step Properties include a Button Properties section.

Create Case Button Properties are a section in Step Properties.

In Button Properties:

Enter Create Case in the Next Label property (1).
Set the button width to 3 in the Next Width property (2).

Configure the DataRaptor Post Action

In DataRaptor Post Action Properties, link to the DataRaptor Load that saves the new case data.

DataRaptor Post Action Properties include the name of the DataRaptor Load.

In DataRaptor Post Action Properties:

Enter CreateCase for Name (1) and Create Case for Field Label (2).
In DataRaptor Interface (3), select the sampleCreateCase DataRaptor Load. This is the DataRaptor that saves the new case.

The DataRaptor Post Action properties include a Messaging Framework section.

Messaging Framework Properties

In Messaging Framework properties:

Select the Pub/Sub checkbox (1) to enable the OmniScript and a custom Lightning web component to communicate. Key/value pairs pass events that trigger custom behavior in the component.
Enter CaseCreated for Key (2) and %DRId_Case% for Value (3).

Activate the OmniScript to compile and deploy it as a standalone Lightning web component.
Once the OmniScript is active, open the How To Launch window to copy the component tag.
Embed this tag in the custom Lightning web component. We’ll return to this step in the next unit.

Now that Vijay has an OmniScript to create new cases, he turns to the FlexCard Designer to display and select cases.

FlexCard to Select Cases

Vijay has a clear idea of what his Selectable Item FlexCard should look like for each case.

Corresponding screen capture of information

The Selectable Item FlexCard displays Subject and Status fields (1) and a Select Case button (2).

Configure the Data Source

When Vijay creates the FlexCard, he chooses Integration Procedures as the data source type, and he selects an Integration Procedure that retrieves case data.

The Data Source section in the Setup panel shows the Data Source Type and the name of the data source.

The Data Source Type (1) is Integration Procedures, and the Name (2) of the Integration Procedure is sample_getCaseList.

Configure the Field Elements

Subject and Status are Field elements. The output for each field comes from the data source, which is the sample_getCaseList Integration Procedure.

The Subject field element properties include the Field Type, which is set as Text, and the CaseSubject, which is set as Output.

Configure the Subject field properties as follows.

Enter Subject for the Label (1), and select Text for the Field Type (2).
Select CaseSubject for Output (3).

The Status field element properties include the Field Type, which is set as Text, and the CaseStatus, which is set as Output.

Configure the Status field properties.

Enter Status for the Label (1), and select Text for the Field Type (2).
Select CaseStatus for Output (3).

Configure the PubSub Event Action

The Select Case button triggers a pubsub event action. Pubsubs are the default way to communicate from the FlexCard to the OmniScript. When a user clicks the button, the event communicates to the OmniScript that the user has selected a case. This prompts the Case Management OmniScript to navigate automatically to step two, which is Manage Case Comments. Let’s review the action properties you need to set.

The Select Case action properties include the Action Type and Label.

Configure the Select Case action properties.

For Action Type, select Event (1) as the type of action to run. Use this action type when you want to fire a pubsub event to notify another component on a page or application when an event occurs.
Enter Select Case as the action label (2), which is visible to end users.

More properties are available to configure for the action.

The Select Case action properties include Event Type, Channel Name, Event Name, and Input Parameters.

Select PubSub from the Event Type dropdown list (1).
Enter newCaseSelected as the Channel Name (2), which updates the channel where the event posts.
For Event Name (3), enter data as the name of the event.

Don’t use the names reload, updatedatasource, or remove for events, because they’re reserved words.

4. To pass contextual data as a key/value pair, click + Add New (4).

5. Enter CaseId as the variable name in the Key field (5), and enter {CaseId} as the variable value in the Value field (6).

The Display As Button checkbox.

6. Select the Display As Button checkbox to display the action as a button.

Configure the Event Listeners

An event listener listens for an event that a component fires and performs an action in response.

A Pubsub event listens for an event from another component, such as another FlexCard on the same Lightning page.
A Custom event listens for an event that a child FlexCard fires or for an event from an element on the FlexCard.

The Selectable Item FlexCard has two event listeners.

The first event listener listens for when the Create Case OmniScript adds a new case, and then the event listener reloads the FlexCard.

Event Listener Properties for the Reload type

Configure this event listener.

Select Pubsub for Event Type (1).
Enter omniscript_action for Channel Name (2).
Enter data for Event Name (3).
Enter Reload Card for Action Name (4)
Select Card for Action Type (5).
Select Reload for Type (6).

The second event listener listens for when the user selects a new account. This event listener has two actions.

The first action listens for a data source update. A user creates a new case from the FlexCard, which triggers an update of the data source for the account’s case list.

Event Listener Properties for the Update Datasource type

Configure the Update Datasource event listener.

Select Pubsub for Event Type (1).
Enter newAccountSelected for Channel Name (2).
Enter data for Event Name (3).
Select Card for Action Type (4).
Select Update Datasource for Type (5).
Enter Integration Procedures for Data Source Type (6).
Select sample_getCaseList as the Name of the Integration Procedure (7).

The second action reloads the FlexCard. After the data source updates, the case list data for that account reloads immediately to show the new case for the selected account.

Event Listener Properties for the Reload type

Configure the properties for the second event listener action. Enter Reload for Type. Because this isn’t an Update Datasource type, no properties display to configure a data source.

Allow the FlexCard to Interact with an OmniScript

Vijay has one last configuration task before he activates this FlexCard.

In the Setup panel, select the OmniScript Support checkbox to allow the FlexCard to interact with an OmniScript Lightning web component.

Enable OmniScript Support in the Setup panel for the Selectable Item FlexCard.

Activate the FlexCard

Activate the FlexCard to compile and deploy it as a standalone Lightning web component. When you create a Lightning web component from a FlexCard, it activates with the namespace cf, which makes the full prefix <c-cf-. Everything after this prefix is the component name with dashes between each word of the name. Use this tab syntax when you embed an active FlexCard in a Lightning web component. We’ll return to this topic later.

Vijay now has the standard OmniStudio Lightning web components he needs to display, select, and create cases. However, his work isn’t done. Carry on with this module to see how Vijay embeds these new components in a custom Lightning web component.