Design and Build a Case Management OmniScript

Learning Objectives

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

Explain implementation best practices for OmniStudio components.
Determine when to use custom Lightning web components to enhance standard OmniStudio functionality.

Prerequisites

Before you start this module, ensure that the required prerequisites are met. Also, consider the recommended prerequisites to best prepare you to learn.

Required

Completion of these modules:

Recommended

Complete the OmniStudio Developer Tools module to learn about the tools developers use to manage and move OmniStudio component changes between environments.
Install Visual Studio Code with the Salesforce Extension Pack to customize Lightning web components and deploy the files to an org.

Vijay’s New Use Case

Vijay Lahiri, a certified OmniStudio developer at Cloud Kicks, works on an implementation project that involves OmniStudio components, including OmniScripts and FlexCards.

Vijay Lahiri, certified OmniStudio developer

Vijay receives the following use case with requirements from his customer:

As a customer service agent, I want a workflow that allows me to manage cases for an account.

On the first page, I want to:

Select an account from a list of accounts.
View all the cases related to the selected account.
Create a new case and see it immediately in the list of cases.
Select a case from the list of cases.

When I select a case, I want to move to a second page where I can:

View case comments in tabular format.
Submit new comments that appear immediately in the table of comments.

Just another puzzle for Vijay to solve. Can he put the pieces together?

Vijay meets with his customer.

OmniStudio Implementation Best Practices

Before he puts on his application-designer hat, Vijay thinks, “I should revisit the OmniStudio implementation best practices, because I want this application to be top-notch." He’s worked with OmniStudio before, so he knows how to use the drag-and-drop WYSIWYG OmniScript and FlexCard designers to build many of his customer’s workflows entirely in OmniStudio.

However, sometimes Vijay receives a use case that requires him to build functionality that isn’t available in the OmniStudio designers. In this case, he needs to minimize the codebase. Apps that use minimal code not only run faster but are easier for his customers' Salesforce admins to maintain. Vijay can’t wait to build his next app to run fast and smooth, like a well-oiled machine.

Vijay reviews the high-level best practices for OmniStudio projects.

Best Practice

Guidance

Use standard OmniStudio components.

Use standard components in the OmniStudio designers whenever possible.
Define as much functionality as you can by using the OmniScript and FlexCard designers.

Customize standard OmniStudio components only when necessary.

If you need functionality that’s unavailable in the OmniStudio designers, you can use extensions or imports to customize standard OmniStudio components, and still allow admins to use the designers for maintenance. When you need to create code:

Create it in a generic, agnostic way.
Keep it as minimal as possible.

Use a hybrid OmniStudio designer and minimal code approach to build new components.

When it’s not possible to use or customize standard components to meet the requirements, build a new component. However, you should use a hybrid OmniStudio designer and minimal code approach.

Use a combination of standard components as much as possible so the app is easy to maintain and upgrade.
Build new Lightning web components with global and reusable logic. Structure the code to be reusable in a variety of use cases, not just one.

Use Case Requirements

The best practice guidance makes perfect sense. Vijay’s excited and rubs his hands together—it’s time to design and build. He breaks down the requirements of his new use case, starting with the overall requirement for a two-page workflow that allows users to manage cases for an account.

The steps in this module are for demonstration purposes only. OmniStudio is not enabled in Trailhead Playground orgs.

Create a Two-Page Workflow for Case Management

Vijay decides to use the OmniScript designer, because it’s the best tool for the job. The OmniScript should have two steps, one for each page of the workflow. On the first page, users select an account and case. On the second page, they manage case comments.

The Case Management OmniScript is a two-step OmniScript.

This Case Management OmniScript (1) acts as a container for the standard components Vijay uses and for any custom Lightning web components he creates. He takes advantage of the UI architecture of OmniStudio so that administrators can maintain the workflow with an OmniStudio designer.

Vijay plans to use the first step (2) to contain the components he needs for the first page of the workflow and the second step (3) to hold the components for the second page of the workflow.

Select an Account and Show Related Cases

For this requirement, Vijay focuses on what his customer wants to do on the first page. They want to select an account from a list of accounts and display the cases related to the account. To this end, he adds a standard Lookup component to the OmniScript. The Lookup allows users to get data from Salesforce one record at a time, which suits the requirement.

In Step 1, the standard Lookup component contains an Account Lookup Lightning web component.

The standard Lookup component meets only half the requirement, because Vijay also needs to fetch cases for a selected account. To do this, when a user selects an account, the OmniScript must pass a message to the component that fetches the cases.

To achieve this, Vijay decides to create a custom Lightning web component called accountLookupLWC (4). When the user selects an account, Vijay’s plan is for this custom component to send a message to a second custom component that fetches and displays the cases. This is the cue for the second component to fetch and display cases related to the account. Vijay uses the LWC Component Override field of the standard Lookup component to link the accountLookupLWC component to the OmniScript.

Create a New Case and Select a Case

The next requirement is for users to create a new case and see it immediately in the list of cases. Then they need to select a case from the list. To build this requirement, Vijay decides to use the OmniStudio designers as follows.

Use the OmniScript designer to build another OmniScript that allows users to create new cases.
Use the FlexCard designer to create a FlexCard that displays selectable case records.

Final structure of the Case Management OmniScript

Because he needs to provide additional functionality, Vijay decides to create a custom Lightning web component called caseSelectableItemLWC (5). This component must:

Contain the Selectable Item FlexCard and the Create Case OmniScript.
Receive a message from the accountLookupLWC component when a user selects an account.
Display a new case immediately in the list of cases without advancing to the next page.
Let users select a case to automatically advance to the next page.

Vijay plans to use a Custom Lightning Web Component element to link the caseSelectableItemLWC component to the Case Management OmniScript.

Now, Vijay focuses on the requirement for the second page of the workflow.

View and Submit Case Comments

Users want to view existing case comments in tabular format so the comments are easy to read. In addition, they need to submit new comments that appear immediately in the table of comments. Vijay decides to add two standard components to the second step.

A Text Area (1) for users to enter a new case comment
A DataRaptor Post Action (2) that links to a DataRaptor Load to save a new case comment

The Case Management OmniScript contains standard OmniScript components and custom Lightning web components, which hold OmniScripts and FlexCards.

To display existing case comments, Vijay decides to:

Use the FlexCard designer to create a FlexCard with a Datatable element.
Create a custom Lightning web component called caseCommentDataTableLWC (3), which contains the DataTable FlexCard.
Use a Custom Lightning Web Component element (4) to link the caseCommentDataTableLWC component to the Case Management OmniScript.

Vijay now has the structure in place for the Case Management OmniScript.

Case Management Workflow: A Preview

Let’s skip ahead to preview the steps a user will take to run Vijay’s Case Management OmniScript once it’s finished.

Open the Case Management OmniScript. The Select Account and Case page opens.

Select an account from a list of accounts in your org.

2. To find an account in your org, start typing in the Select Account search box.

3. Choose an account from the search results. The Select Account and Case page opens and shows:

A Create New Case button
A list of the account’s current cases, each with a Select Case button

For the selected account, the OmniScript displays selectable cases and a Create New Case button.

4. Click Create New Case. The Create New Case modal opens with:

Two input fields, one for the case subject and another for case details
A Create Case button to create the case

The Create New Case modal displays Case Subject and Case Description input fields and a Create Case button.

5. Add the case details, and click Create Case. When you create a new case, it immediately displays in the list of cases related to the account.

6. Click Select Case to choose a case and advance to the Manage Case Comments page. This page displays:

An input field to enter a new case comment
A Submit button to submit the comment
A table of case comments

The second step includes an Enter Case Comment field and a Submit button. The step also shows a table of case comments.

7. Enter and submit a new case comment. It immediately displays in the table of comments.

New case comments immediately display in the table of comments.

In the next unit, you delve into the configuration details and learn how Vijay configures and modifies the standard Lookup component.