Download as pdf or txt
Download as pdf or txt
You are on page 1of 78

VPE 4: Successful Interactions with Vlocity

LWC OmniScript
Exercise Guide

Doc Version: VPE 4 Vlocity LWC OmniScript EG v4.0.1.docx


CONFIDENTIAL

VPE 4: Successful Interactions with Vlocity LWC OmniScript


CONFIDENTIAL

Legal Notice
USE OF OUR EDUCATIONAL SERVICES, COURSES, AND TRAINING MATERIALS (COLLECTIVELY REFERED
TO AS “EDUCATIONAL SERVICES”) IS CONDITIONED UPON THE ACCEPTANCE OF THESE TERMS BY YOU
(ALSO REFERRED TO AS “PARTICIPANT”). BY DOWNLOADING, INSTALLING, OR OTHERWISE ACCESSING OR
USING THE EDUCATIONAL SERVICES, YOU AGREE THAT YOU HAVE READ, UNDERSTOOD, AND AGREE TO
BE BOUND BY THESE TERMS OF SERVICE. IF YOU DO NOT WISH TO BE BOUND BY THESE TERMS OF
SERVICE, PLEASE DISCONTINUE USE OF THE EDUCATIONAL SERVICES IMMEDIATELY.

For your review, the terms of service are available at the following URL:

https://vlocity.com/cms/resources/vlocity-university-terms-of-service-2016.pdf

Restrictions on Your Use

You are granted a nonexclusive, nontransferable, revocable, limited license to access and use our Educational Services
in accordance with the Terms of Service (https://vlocity.com/cms/resources/vlocity-university-terms-of-service-
2016.pdf). Only the authorized registrant may participate as a licensee and user of our Educational Services. As a
condition of your use of our Educational Services, you warrant to us that you will not use our Educational Services for
any purpose that is prohibited by the Terms of Service.

Our Proprietary Information

The material, content, and Educational Services provided by us or accessible from this Site and any other website
owned, operated, licensed, or otherwise controlled by us (the “Content”) is our proprietary information or the proprietary
information of the party that provided or licensed the Content to us, whereby we or such providing party retain(s) all
right, title, and interest in the Content.

Accordingly, the Content may not be copied, decompiled, reverse engineered, disassembled, transferred, distributed,
republished, resold, sublicensed, uploaded, posted, used to create derivative works, or transmitted in any way without
our prior written consent or the prior written consent of the Content owner, except that you may print out a copy of the
Content solely for your personal use, including as part of the applicable training or educational program.

Representations; Warranties; Disclaimer

YOUR USE OF OUR EDUCATIONAL SERVICES IS AT YOUR OWN RISK. THE EDUCATIONAL SERVICES ARE
PROVIDED “AS IS” AND WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESSED OR IMPLIED. WE
DISCLAIM ALL WARRANTIES, INCLUDING ANY IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR
A PARTICULAR PURPOSE, TITLE, OR NON-INFRINGEMENT. WE DO NOT WARRANT THAT THE FUNCTIONS
OR CONTENT ASSOCIATED WITH OUR EDUCATIONAL SERVICES WILL BE UNINTERRUPTED OR ERROR-
FREE, THAT DEFECTS WILL BE CORRECTED, OR THAT OUR SITE AND EDUCATIONAL SERVICES ARE FREE
OF VIRUSES OR OTHER HARMFUL COMPONENTS. WE DO NOT WARRANT OR MAKE ANY REPRESENTATION
REGARDING USE, OR THE RESULT OF USE, OF THE EDUCATIONAL SERVICES IN TERMS OF ACCURACY,
RELIABILITY, OR OTHERWISE. THE EDUCATIONAL SERVICES MAY INCLUDE TECHNICAL INACCURACIES OR
TYPOGRAPHICAL ERRORS, AND WE MAY MAKE CHANGES OR IMPROVEMENTS AT ANY TIME.

© 2020 Vlocity, Inc.

Legal Notice - Page 1 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

Table of Contents
Legal Notice............................................................................................................................................ 1
Table of Contents ................................................................................................................................... 2
Document Conventions .......................................................................................................................... 3
Preface ................................................................................................................................................... 4
Quick Setup for Vlocity Communications & Insurance Orgs .................................................................... 7
Vlocity OmniScript Overview ................................................................................................................ 10
Review Your Project Requirements ...................................................................................................... 13
VPE 4 Part 1: Working with Simple OmniScripts.................................................................................... 14
Exercise VPE 4-1: Building an OmniScript’s Structure ............................................................................ 15
Exercise VPE 4-1.1: Design and Create the Edit Contact OmniScript ...................................................... 22
Exercise VPE 4-1.2: Design and Create the Edit Case OmniScript ........................................................... 24
Exercise VPE 4-2: Getting Data for an OmniScript ................................................................................. 27
Exercise VPE 4-2.1: Getting Data for the Edit Contact OmniScript ......................................................... 31
Exercise VPE 4-2.2: Getting Data for the Edit Case OmniScript .............................................................. 32
Exercise VPE 4-3: Ending an OmniScript ................................................................................................ 33
Exercise VPE 4-3.1: Ending the Edit Contact OmniScript ........................................................................ 39
Exercise VPE 4-3.2: Ending the Edit Case OmniScript ............................................................................. 40
VPE 4 Part 2: Working with Complex OmniScripts................................................................................. 41
Exercise VPE 4-4: Building a More Complex OmniScript ........................................................................ 43
Exercise VPE 4-4.1: Design an Update Account Primary Contact OmniScript ......................................... 48
Exercise VPE 4-5: Adding Branching to the OmniScript ......................................................................... 50
Exercise VPE 4-6: Adding a Typeahead Block ........................................................................................ 54
Exercise VPE 4-7: Refining the UX of an OmniScript .............................................................................. 60
Exercise VPE 4-8: Using Functions in Set Values Elements ..................................................................... 62
VPE 4 Part 3: Working with External Data ............................................................................................. 65
Exercise VPE 4-9: Adding External Data to an OmniScript ..................................................................... 66
Exercise VPE 4-9.1: Adding the Weather Forecast ................................................................................. 71
Exercise VPE 4-10: Adding a Warning Banner to an OmniScript ............................................................ 73
Exercise VPE 4-10.1: Adding Other Alert Conditions.............................................................................. 76
Last Revision: 8/4/20

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 2 Table of Contents
CONFIDENTIAL

Document Conventions
This training material uses the following conventions.

Convention Meaning Example


Boldface text This formatting highlights the name Click Save.
of a button, menu, link, field,
checkbox, radio button, list, list
option, or panel.

[Boldface text in This formatting highlights a variable /services/apexrest/vlocity_[NS]/v2/DataRapto


brackets] name. Replace this value with the r/AccountExtract/
value for your training environment.

Monospace text This formatting highlights text that IF(CONTAINS(%input_string%, %valu


you must type exactly as it appears, e%), %thenValue%, %elseValue%)
or it is a code example.

VLOCITY SUPPORT

For questions or assistance with your Vlocity implementation, please contact Vlocity Support
or your account manager.

ADDITIONAL RESOURCES

Indicates additional supporting materials or online resources.

TIPS AND TRICKS | BEST PRACTICES

Indicates nice-to-know information, best practices, or useful tips and tricks.

IMPORTANT

Indicates cautionary or important information.

NOTE

This is an informational note. It provides more detail and draws the reader’s attention.

Document Conventions – Page 3 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

Preface
These training exercises are based on the Winter’20 release of the Vlocity Communications & Media
application, and the Winter’20 release of the Vlocity Insurance & Health application. For additional
information about the topics covered in this module, see the https://docs.vlocity.com/en/OmniScript.html
documentation available in Vlocity Success Community at https://success.vlocity.com/s/.

Overview
This training covers the fundamental features and functionality of the Vlocity OmniScript Designer. The
module covers concepts such as OmniScript elements and common element properties, branching an
OmniScript based on what the user wants to do, error checking and validation, and adding an external
data source to OmniScripts. As you progress through this training, you complete practical, hands-on lab
exercises designed for use with the Trialforce trial org provided by Vlocity.

What You Will Learn


When you complete this training, you will be able to:

• Build the basic structure of an OmniScript


• Configure an Integration Procedure action to get data
• Configure an Integration Procedure action to save data
• Configure a Navigate action
• Inspect OmniScript JSON
• Understand what elements allow users to choose from preset values
• Show or hide elements based on logical conditions
• Understand how a Type Ahead block works and configure it with a data source
• Use OmniScript element properties to change the UI and UX of an OmniScript
• Use the OmniScript EXPRESSION EDITOR
• Add a logical function to a Set Values element
• Use tables and merge fields in a Text Block to display data and images in an OmniScript
• Use a Messaging element in an OmniScript

Prerequisites
The prerequisites for this training include a solid understanding of basic Salesforce concepts and
functionality.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 4 Preface


CONFIDENTIAL

About the Exercises


With Vlocity applications, it’s important to learn by doing. In this exercise guide, you’ll be presented with
many hands-on exercises. There are two types of hands-on exercises: lab exercises and challenge
exercises. It's recommended that you complete the exercises in order.

Lab exercises include:

• A brief scenario that explains the use case or business need that drives the application
feature or functionality.
• A list of tasks
• Step-by-step instructions on how to complete the tasks.

Challenge exercises include:

• A brief scenario that explains the use case or business need that must be met.
• A list of requirements or tasks to complete.

There are three levels of challenge exercises:

A Level 1 Challenge:

• Reinforces the skills you learned in the lab exercises

A Level 2 Challenge:

• Is like a Level 1 Challenge


• Requires additional practice of the current skill or skills from previous lessons

A Level 3 Challenge:

• Is more advanced
• Requires you to integrate several skills from different lessons together

Challenge exercises solidify what you learned in the lab exercises, build your skills, and allow you to
make mistakes—which is how you will master this application.

Preface – Page 5 VPE 4: Successful Interactions with Vlocity LWC OmniScript


CONFIDENTIAL

Supported Browser

Salesforce and Vlocity only run properly in Google Chrome. Please ensure that you are using the Chrome
browser for all activities and exercises related to this course.

Getting Help

ADDITIONAL RESOURCES

If you need help or more information during the course, go to Vlocity Success Community.
You must be signed into the Community to access any associated links.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 6 Preface


CONFIDENTIAL

Quick Setup for Vlocity Communications & Insurance Orgs


Complete these setup tasks before you start your exercises. You only need to complete these tasks once
for each Communications or Insurance org. Therefore, skip this page if you already did this in VPE 3.

1. Log into your training org.

2. Change your email address.

a. In the upper right, click the “Astro” icon and then click Settings.
b. In the Details block, change the Email field to your corporate email address.
c. Scroll down and click Save. Click OK to confirm.

3. Set up My Domain.

a. Click the “Gear” icon to go to Setup.


b. In the Quick Find box, type my domain. Click My Domain.
c. In My Domain Step 1, enter a unique domain name. You can try the unique part of your training
org login plus the industry for this. For example, if your login is [email protected]
999999, try vusrvo-999999-cme. Or if your login is [email protected], try
student9999-cme.
d. Click Check Availability.
e. Click Register Domain. This process typically takes less than 30 minutes. Continue to the next
steps while you wait.

4. Set up the platform cache.

f. Duplicate the tab to open Setup in a new browser tab.


g. In the Quick Find box, type Platform Cache. Click Platform Cache.
h. In the VlocityMetadata row, on the left, click Edit.
i. Under Org Cache Allocation, enter 3.
j. Click Save.
k. Click Back to Platform Cache Partitions.
l. Click Request Trial Capacity and click OK.

5. Deploy Your Domain.

m. Go back to the browser tab where the My Domain page is open, and refresh the tab.
n. If your domain is ready to be deployed, you will see My Domain Step 3. If you do not see this,
wait until your domain is ready.
o. Under your domain name in the middle of the page, click the Log in button to relaunch your
browser in your domain.
p. Click Deploy to Users and click Ok.
q. Close any extra browser tabs open in the old domain.

In addition to these steps, you should disable pop-up blockers for your org.

Quick Setup for Vlocity Communications & Insurance Orgs – Page 7 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

6. Grant access to your org domains to enable LWC features. Make sure you have deployed your
domain before doing this.

a. In your org in the Cards tab, right-click in the screen and select View Frame Source from the
menu to open the iframe in a new browser tab.
b. Copy your domain from the address bar. For example, copy https://ins16883--vlocity-
ins.visualforce.com.
c. In your org, go to Setup > Security > Remote Site Settings.
d. Depending on whether you are using a CMT or INS org, click Edit to open the LWC_Enable_VF
or EnableLwcVisual remote site setting.
e. Paste your domain into the Remote Site URL field and click Save.
f. Copy your lightning.force.com URL, which is visible in the address browser bar on all pages in
your org. For example, copy https://ins16883.lightning.force.com.
g. Depending on whether you are using a CMT or INS org, click Edit to open the LWC_Enable or
EnableLwc remote site setting.
h. Paste your lightning.force.com URL into the Remote Site URL field and click Save.
i. See the next page for examples of how the remote settings should be configured.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 8 Quick Setup for Vlocity Communications & Insurance Orgs
CONFIDENTIAL

CMT Org Example

INS Org Example

Once these steps are done, your training org is ready for you to begin the lab exercises.

Quick Setup for Vlocity Communications & Insurance Orgs – Page 9 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

Vlocity OmniScript Overview


OmniScript Designer is a no/low-code process tool to create customer interactions and other business
workflows. The "omni" means that you can deploy these processes to numerous platforms, including
mobile, desktop, and other channels. OmniScripts can be deployed in and outside of Salesforce, and on
any device.

There are three main types of interactions:

Forms

The user enters information and selects options. Examples are applications for renting, patient forms for a
doctor visit, or a form for submitting gas and electricity meter readings, as shown in this example.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 10 Vlocity OmniScript Overview
CONFIDENTIAL

Guided Interactions

Guided interactions typically mirror customer or business processes. For example, a customer may wish
to view their bill, choose to pay it, and select a specific way to pay it.

In the following example, the customer needs to see their insurance coverage and deductible and then
file a claim.

Selections Can Determine Branching

Often a customer interaction means the user needs to enter information and choose certain items. The
details entered and choices made determine the next options presented to the customer. For example, a
customer may complete a questionnaire about their preferences for using a mobile phone, and then
receive recommendations based on their answers.

In this example, the customer enters information and selections to see what their options are for an
insurance policy.

Vlocity OmniScript Overview – Page 11 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

Metadata, Data, and Template

The metadata structure of Vlocity OmniScript supports prototyping and building the user experience. The
data itself is separated from the metadata. Templates control the UI and branding.

Using Data from Anywhere

The data-oriented elements of OmniScript can call DataRaptors, Integration Procedures, and use other
tools to access data from anywhere.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 12 Vlocity OmniScript Overview
CONFIDENTIAL

Review Your Project Requirements


Scenario for the Module

You’re a Platform Developer working on a Vlocity customer implementation project. Your


focus is currently on Vlocity OmniScripts. You receive the following customer requirements:

"As a service agent, I'd like simple guided workflows that allow me to update
some basic account, contact, and case details from the service console.

Then, for an account's primary contact, I'd like a more complex guided workflow
that provides me with options to:
- Update the contact information for the existing primary contact
- Change the primary contact to another existing contact that I can easily lookup
(and edit their contact information)
- Create a new contact and assign them as the primary contact

I'd like my data entries to be validated and to receive warnings if I make mistakes.

In the same Account Update Primary Contact guided workflow, I'd like to view weather
forecast information for the account's location and see alerts if there any hazardous weather
conditions."

As you progress through this module, you’ll complete tasks that address these requirements.

Here’s where your work on these requirements fits in with the overall solution.

Review Your Project Requirements – Page 13 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

VPE 4 Part 1: Working with Simple OmniScripts


Scenario for Part 1
In Part 1, you will build an Edit Account OmniScript. You can also build Edit Contact and Edit Case
OmniScripts.
"As a service agent, I'd like simple guided workflows that allow me to update some basic account,
contact, and case details from the service console. Then, for an account's primary contact, I'd like a
more complex guided workflow that provides me with options to:
- Update the contact information for the existing primary contact
- Change the primary contact to another existing contact that I can easily lookup
(and edit their contact information)
- Create a new contact and assign them as the primary contact
I'd like my data entries to be validated and to receive warnings if I make mistakes.
In the same Account Update Primary Contact guided workflow, I'd like to view weather
forecast information for the account's location and see alerts if there any hazardous weather conditions."

Overview of Part 1

Section Topic Task Challenge


VPE 4-1 Getting Started Design an OmniScript for Editing Accounts
ü
with OmniScript
Create an OmniScript for Editing Accounts ü
Design and Create an OmniScript for Editing
ü
Contacts
Design and Create an OmniScript for Editing
ü
Cases
VPE 4-2 Adding Add an Integration Procedure Action to the
ü
Integration Procedures Edit Account OmniScript
Add an Integration Procedure Action to the
ü
Edit Contact OmniScript
Add an Integration Procedure Action to the
ü
Edit Case OmniScript
VPE 4-3 Ending an Add second VIP Action and Navigate Action
ü
OmniScript to the Edit Account OmniScript
Add second VIP Action and Navigate Action
ü
to the Edit Contact OmniScript
Add second VIP Action and Navigate Action ü
to the Edit Case OmniScript

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 14 VPE 4 Part 1: Working with Simple OmniScripts
CONFIDENTIAL

Exercise VPE 4-1: Building an OmniScript’s Structure


Scenario

"As a service agent, I'd like simple guided workflows that allow me to update some basic
account, contact, and case details from the service console.”
Based on the user requirements, you determine you need an OmniScript that allows a user
to edit account information displayed on a Vlocity Card. Therefore, you need to build the
OmniScript to show the same fields as on the card, with the fields in the correct order.

What You Will Learn


• How to build the basic structure of an OmniScript

Task Overview
Task 1: Design the Edit Account OmniScript
Task 2: Create the Edit Account OmniScript

Task 1: Design the Edit Account OmniScript

Based on user requirements, you determine that the Edit Account OmniScript must have the following
characteristics:

VPE 4-1: Building an OmniScript’s Structure – Page 15 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

Requirement Element Name

A page for the interaction

User can view the account name

User can edit the account phone number

User can edit the account website

Each field displays on a separate line on the page


(Hint: You need TWO of the same element).

OmniScript calls an integration procedure to get the


account data from Salesforce and save data updates
back to Salesforce
(Hint: You need TWO of the same element).

User can complete the guided interaction

Which Elements Do You Need?

Specify the elements you need to address each requirement. Choose the elements from the tables in the
Platform Essentials Take Home Guide: LWC OmniScript Element References section. We've
organized the tables by element type.

Hint: You don’t need to review the Functions table or the Common Element Properties table for this task.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 16 VPE 4-1: Building an OmniScript’s Structure
CONFIDENTIAL

Task 2: Create the Edit Account OmniScript

2.1 Go to the Vlocity OmniScript Designer tab and find the team/editAccount OmniScript.

a. Open the App Launcher.


b. Select the Digital Interaction Platform app.
c. Select the Vlocity OmniScript Designer tab.
The team has already built some starter OmniScripts for you to use. While they were set up in
angular/Aura, they were given names that would support converting to LWC. The type for
these OmniScripts is team.
d. In the Search/Find in page box, type the keyword team.
e. From the search results, expand team/editAccount.
f. Click Team Starter Edit Account (Version 1). The Script Configuration element opens. This
is the only element currently in this OmniScript.

The system uses the combination of type, subtype, and language to identify the OmniScript
when launching it via an action. In this example:

• Type = team
• SubType = editAccount
• Language = English

This version of the OmniScript is active, so let’s keep it intact and create a new version.

VPE 4-1: Building an OmniScript’s Structure – Page 17 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

2.2 Create a new version of the OmniScript for editing.

a. Click Create Version. You can see the Version increments from 1 to 2.
b. Change the OmniScript name to Team Edit Account. This name change saves the
OmniScript automatically. (You only need to click Save to save an OmniScript when you
create it from scratch).
c. Confirm the Enable LWC checkbox is selected to allow the use of Lightning web
components.
Enabling Lightning web components generates a component tag. This can be used if you
wish to embed the OmniScript in a Lightning web component.

2.3 Explore the help tips in the Script Configuration. Next to the Reusable field, move your cursor
over the tooltip Info icon to learn about embedding an OmniScript inside another one – you can
have only one level of nesting. This means if you plan to reuse an OmniScript, it cannot have a
reusable OmniScript as part of the structure.

2.4 As you plan to build a one-step OmniScript, you should hide the step chart that displays to let
users know where they are in a sequence of steps.

a. Scroll down the page and expand STEP CHART OPTIONS.


b. Select the Hide Step Chart checkbox.

2.5 Build the basic structure of the OmniScript.

a. Go to AVAILABLE COMPONENTS, then expand the Groups section.

TIPS AND TRICKS

Lightning web component compatible OmniScript components display a lightning icon.

a. Drag a Step element into the STRUCTURE panel. A step forms a page in an OmniScript.
b. Specify the following values for the element:

Property Value Best Practice

Element Name StepAccount Element names must be unique and should


not have spaces or special characters. It’s
best to use a descriptive name in pascal
case for element names.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 18 VPE 4-1: Building an OmniScript’s Structure
CONFIDENTIAL

Field Label Account Details Field Labels are what the users see at the
top of the page for each step.
Step Chart Label If you are displaying the Step Chart you can
provide a unique label for each step. As you
are hiding the Step Chart, there is no need to
fill in this field.
Validation This is selected by default. This prevents the
Required user from advancing if fields do not pass
validation. For example, if a required field is
empty.

2.6 Add account details.

a. In AVAILABLE COMPONENTS, expand the Inputs section.


b. Drag the following elements into the StepAccount element, and edit the values as follows:

Element Element Name Field Label

Text, for the account name Name Name


Telephone, for the account phone number Phone Phone
URL, for the account website Website Website

VPE 4-1: Building an OmniScript’s Structure – Page 19 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

c. Click the Name element and select Read Only.

This element should be read-only because it will hold data coming from the Salesforce
account name (Account.Name) field. The OmniScript user should be unable to edit the name.

d. Click the Phone element and select Required?


e. Click LWC PREVIEW. Notice three fields are displayed, with the Name field read-only and
the Phone field required.

You can see that the fields are wider than necessary.

2.7 Use the Control Width element property to narrow the fields. Control Width settings are an
HTML web standard and have a responsive grid.

a. Click PROPERTIES, then click the Name element.


b. Drag the slider to set the Control Width to 4.
c. Set the control width to 4 for the Phone and Website elements.
d. Click LWC PREVIEW. The fields are now displayed on a single line.

2.8 Edit the OmniScript to display the fields on separate lines.

a. Return to PROPERTIES and in AVAILABLE COMPONENTS, expand the Display section.


b. Drag a Line Break element into the STRUCTURE panel, below the Name element.
c. Drag another Line Break element below the Phone element.
d. Click LWC PREVIEW. The fields are now on separate lines.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 20 VPE 4-1: Building an OmniScript’s Structure
CONFIDENTIAL

Review
Confirm your understanding by answering these questions.

• What makes an OmniScript unique?


• What is the purpose of a Step Element?
• What are the best practice naming conventions for element names? Why?
• What is the purpose of the Control Width setting?

VPE 4-1: Building an OmniScript’s Structure – Page 21 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

Exercise VPE 4-1.1: Design and Create the Edit Contact


OmniScript
Scenario

"As a service agent, I'd like simple guided workflows that allow me to update some
basic account, contact, and case details from the service console.”

Based on the user requirements, you determine you need an OmniScript that allows a
user to edit contact information displayed on a Vlocity Card.

Design the Edit Contact OmniScript


Based on the user requirements, you determine that the Edit Contact OmniScript has the same
characteristics as the Edit Account OmniScript, with one exception: The Edit Contact OmniScript requires
an Email field instead of a Website field.

Which Element Do You Need?

Specify the element you need to address this requirement. Choose the element from the tables in the
Platform Essentials Take Home Guide: LWC OmniScript Element References section.

Requirement Element Name

User can edit the contact email

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 22 VPE 4-1.1: Design and Create the Edit Contact OmniScript
CONFIDENTIAL

Create the Edit Contact OmniScript

Create a new version of the team/editContact OmniScript.

• Build the basic structure of the OmniScript using descriptive labels.


• Use the following elements, element names, and settings*:

Element Element Name Setting, if applicable

Script Configuration Hide Step Chart = Yes


Step StepContact
Text ContactName Read Only
Email ContactEmail Required
Telephone ContactPhone

• Use line breaks and set control widths as you see fit.

*If no value is presented, choose your own (for example, for the Labels of each element).

VPE 4-1.1: Design and Create the Edit Contact OmniScript – Page 23 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

Exercise VPE 4-1.2: Design and Create the Edit Case


OmniScript
Scenario

"As a service agent, I'd like simple guided workflows that allow me to update some
basic account, contact, and case details from the service console.”

Task 1: Design the Edit Case OmniScript

You determine that this OmniScript has similar characteristics to the other Edit OmniScripts, with a few
exceptions:

• The user can view but cannot edit the Case Number and Case Open Date.
• The user can select a case status from a dropdown list.
• The Subject and Status fields are required.
• Two fields display on one line, and another two fields display on a separate line.

Which Elements Do You Need?

Specify the elements you need to address these requirements. Choose the elements from the tables in
the Platform Essentials Take Home Guide: LWC OmniScript Element References section.

Requirement Element Name


Allow the user to view the Case Number

Allow the user to view the Case Open Date

Allow the user to select a case status from a dropdown list

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 24 VPE 4-1.2: Design and Create the Edit Case OmniScript
CONFIDENTIAL

For this challenge, you also have a reference table for Common Element Properties. You need to
consider these properties to address a couple of the requirements.

Requirement Element Property


Prevent the user from editing the Case Number and Case
Open Date

Make the Subject field and Status fields required

Ensure the Case Number and Subject fields can fit


together on one line, and ensure the Open Date and Status
can fit together on another line

Task 2: Create the Edit Case OmniScript

VPE 4-1.2: Design and Create the Edit Case OmniScript - Page 25 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

Create a new version of the team/editCase OmniScript.

• Build the basic structure of the OmniScript using descriptive labels.


• Use the following elements, element names, and settings:

Element Element Name Setting

Script Configuration Hide Step Chart = Yes


Step StepCase
Text CaseNumber Read Only
Text CaseSubject Required
Date CaseOpenDate Read Only
Select CaseStatus Required

• Use line breaks and set control widths as you see fit but try to have the fields arranged in 2 rows
with 2 fields in each row.
• You must tie the Select element to the Salesforce sObject to pre-populate the dropdown list
values. To do this select SObject in the Option Source field and type Case.Status in the
Source field.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 26 VPE 4-1.2: Design and Create the Edit Case OmniScript
CONFIDENTIAL

Exercise VPE 4-2: Getting Data for an OmniScript


Scenario

You need to link an Integration Procedure to the Edit Account OmniScript so you
can get account data from Salesforce. The team has already built a stub Integration
Procedure for you to use, which is called team_getAccountDetails.

What You Will Learn


• How to add an Integration Procedure action and select an Integration Procedure to use

Exercise Overview
Task 1: Add an Integration Procedure Action to the Edit Account OmniScript

Task 1: Add an Integration Procedure Action to the Edit Account OmniScript

1.1 Configure the first part of the data flow in your team/EditAccount OmniScript using a ContextId to
get some data.

a. If you did the challenges, return to Team Edit Account (Version 2).
b. Click PROPERTIES, and in AVAILABLE COMPONENTS, expand the Actions section.
c. Drag an Integration Procedure Action element into the STRUCTURE panel under Script
Configuration.
VPE 4-2: Getting Data for an OmniScript - Page 27 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

d. Change the Element Name and Field Label to IPGetAccountDetails. The Field Label is
not displayed in LWC Preview. However best practice with Lightning web components
enabled is to enter the name in the Field Label. This is because the field label does display in
the OmniScript Debug Console. Later, when you configure multiple integration procedures,
having descriptive labels for them will help you confirm if they are pulling and pushing the
data correctly.

e. From the Integration Procedure dropdown list, choose team_getAccountDetails.

1.2 Configure the Integration Procedure action to define the node in the data JSON that should be
sent to the Integration Procedure. Rename it to something the Integration Procedure will
recognize.

By default, the OmniScript sends the entire JSON to the Integration Procedure, but this procedure
only needs a Record Id for the account. This Id is stored in a variable called ContextId.

Expand the SEND/RESPONSE TRANSFORMATIONS section.

Property Value Notes

Send JSON Path ContextId This value is the node in the JSON of the OmniScript
that you send to the Integration Procedure. In this case,
you send the JSON field, ContextId.

This is case-sensitive. Enter it exactly as shown.


Send JSON Node AccountId Send JSON node renames the node that you send.
When you send a RecordId, best practice is to be
explicit about the type of RecordId.

For a contact based OmniScript, you would set the Send


JSON node value to “ContactId”.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 28 VPE 4-2: Getting Data for an OmniScript
CONFIDENTIAL

NOTE

The following properties trim the data returned to the OmniScript and rename it like the Send
JSON Path and Send JSON Node in reverse:
• Response JSON Path
• Response JSON Node

You can use the following properties to call a DataRaptor Transform for more complex data
mapping when sending data or getting data back for the Integration Procedure:
• Pre-Transform DataRaptor Interface
• Post-Transform DataRaptor Interface

1.3 Test the data configuration.

a. Click LWC PREVIEW.


b. Open the {Data} view.
c. Notice that the OmniScript’s StepAccount with the Name, Phone, and Website fields does not
display, but the root-level of the JSON from the Integration Procedure displays. This is
because the element names in the UI don’t match the element names in the JSON.
To condense the size of script and make them run faster, LWC OmniScripts only display data
in the JSON when there is data to display (information is not null) and only displays data one
step at a time.

d. In addition, OmniScripts have a parser that matches incoming data with the elements based
on the element name. To populate the fields in the UI, you need to change the element
names to match the input field names from the Integration Procedure by adding “Account” to
the beginning of each element name.
e. In the STRUCTURE panel, click each element and set the following values:

For this Element… Set the Element Name value to…

Name AccountName
Phone AccountPhone
Website AccountWebsite

VPE 4-2: Getting Data for an OmniScript - Page 29 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

f. Click the AccountPhone element and remove the Mask as the phone number will not
display in LWC with the mask in place.
g. Click LWC PREVIEW.
h. Notice the data from the Integration Procedure now populates the fields in the UI.

Review
Confirm your understanding by answering these questions.

• What are the advantages of using Vlocity Integration Procedures as data sources?
• What determines the JSON structure of an OmniScript?
• What does the Send JSON Path field do? What about the Send JSON Node?
• How does an OmniScript match incoming data with elements?
• Why did we remove the mask?

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 30 VPE 4-2: Getting Data for an OmniScript
CONFIDENTIAL

Exercise VPE 4-2.1: Getting Data for the Edit Contact


OmniScript
Scenario

You need to link the Edit Contact OmniScript to an Integration Procedure so you can
get contact data from Salesforce. The team has already built a stub Integration
Procedure for you to use, which is called team/getContactDetails.

Add an Integration Procedure Action to your version of the team/editContact OmniScript with these
settings:

Setting Value

Name Use the team's naming convention


Label Use the team’s naming convention
Integration Procedure team_getContactDetails
Send JSON Path ContextId
Send JSON Node ContactId

- Verify that the OmniScript populates with the stub data.


Hint: check the element names match the data field names.

VPE 4-2.1: Getting Data for the Edit Contact OmniScript - Page 31 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

Exercise VPE 4-2.2: Getting Data for the Edit Case


OmniScript
Scenario

You need to link the Edit Case OmniScript to an Integration Procedure so you can get
case data from Salesforce. The team has already built a stub Integration Procedure
for you to use, which is called team_getCaseDetails.

Add an Integration Procedure Action to your version of the team/editCase OmniScript with these settings.

Setting Value

Name Use the team's naming convention


Label Use the team’s naming convention
Integration Procedure team_getCaseDetails
Send JSON Path ContextId
Send JSON Node CaseId

- Verify that the OmniScript populates with the stub data.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 32 VPE 4-2.2: Getting Data for the Edit Case OmniScript
CONFIDENTIAL

Exercise VPE 4-3: Ending an OmniScript


Scenario

You need to configure the Edit Account OmniScript so that the user can complete
the guided interaction. You will add a second Integration Procedure Action that
saves the updated account details back to Salesforce, and a Navigate Action so
the user can complete the OmniScript.

The team has already built a starter Integration Procedure for you to use, which is
called team_saveAccountDetails.

What You Will Learn


• How to configure an Integration Procedure action to save data
• How to configure a Navigate action

Exercise Overview
Task 1: Add an Integration Procedure Action to the Edit Account OmniScript
Task 2: Add a Navigate Action to the Edit Account OmniScript

Task 1: Add an Integration Procedure Action to the Edit Account OmniScript

VPE 4-3: Ending an OmniScript - Page 33 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

1.1 If not already open, open the Team Edit Account (Version 2) OmniScript.

1.2 Add an Integration Procedure Action.

a. In AVAILABLE COMPONENTS, expand the Actions section.


b. Drag an Integration Procedure Action element onto the bottom of the STRUCTURE panel,
under the StepAccount element.
c. Change the Element Name and Field Label to IPSaveAccountDetails.
d. From the Integration Procedure dropdown list, choose team_saveAccountDetails. This is
a starter Integration Procedure that the team has built.
1.3 Click LWC PREVIEW.
1.4 Click the {Data} link and view the JSON for the OmniScript. The data you need to send is in the
StepAccount node shown below.

You also need to send a RecordId to identify which Salesforce account record to update. This
data is stored in the ContextId.
1.5 Configure REMOTE PROPERTIES and extra payload to identify the variable to send to the
Integration Procedure.
a. Go to PROPERTIES and in the IPSaveAccountDetails element, expand REMOTE
PROPERTIES if needed. Under Extra Payload, click Add New Key/Value Pair.
b. Set the following values:

Property Value Notes

Key AccountId The key is the name of the variable to send to the
Integration Procedure.
Value %ContextId% You need to use a merge field to get the value in the
context ID variable. The merge field syntax is a
percent sign before and after the value.
Enter ContextId exactly as shown.

1.6 Configure SEND/RESPONSE TRANSFORMATIONS to identify which data to send to the


Integration Procedure to save back to Salesforce.
a. Expand the SEND/RESPONSE TRANSFORMATIONS element.
b. For Send JSON Path, enter StepAccount. This obtains all the data from the Account step.
1.7 Preview the changes and view the data flowing to and from the OmniScript.
a. Click LWC PREVIEW.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 34 VPE 4-3: Ending an OmniScript
CONFIDENTIAL

b. Click Debug. The OMNISCRIPT DEBUG CONSOLE opens.


c. Drag the bottom-right corner of the console to enlarge the window.
d. Click Clear to clear any existing data in the debug console.
e. In the {Data} panel, click Update.
f. In the debug console, expand the following nodes:
• IPGetAccountDetails
• request
• response

g. Notice the request and response expected JSON output with the account name, website, and
phone data.
1.8 In the LWC PREVIEW, click {Data} and then click the Next button. If you do not see the Next
button after collapsing {Data}, this may be due to the window size, so adjust it as needed until you
can click the Next button.
1.9 In the debug console, collapse the node IPGetAccountDetails, and expand the following nodes:
- IPSaveAccountDetails
- request
- response

VPE 4-3: Ending an OmniScript - Page 35 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

1.10 Notice the request input and response expected JSON output with StepAccount.
- There is no AccountId because you’re using stub data. If you were using live data, the
AccountId would have a RecordId value.
- For the response, no value is present. This Integration Procedure only saves data, so a
response is not expected.
1.11 Close the debug console.

Task 2: Add a Navigate Action to the Edit Account OmniScript

You use a Navigation Action to open the record page for the Salesforce object that is coded into the
ContextId by default at the end of the OmniScript (to return the user to where they started).

Navigation Action elements don’t run in LWC PREVIEW mode. You will test the Navigation action when
you run the OmniScript from a live console.

2.1 Add an element to specify where to send the user when the OmniScript finishes.

a. In AVAILABLE COMPONENTS, drag a Navigate Action element to the bottom of the


STRUCTURE panel.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 36 VPE 4-3: Ending an OmniScript
CONFIDENTIAL

b. In the Navigate Action PROPERTIES, set or confirm the following values:

Field Name Value

Page Reference Type Record


Replace Yes
Object API Account
Record Id %ContextId%
Validation Required None
LWC PubSub Message? [select the checkbox]

c. Click the Script Configuration element, then click Activate Version.


d. Click Ok when you see the activation prompt.

NOTES

Once you are finished with an OmniScript, you must activate it, so it is available to you
elsewhere. It isn’t available for the OS Action you created on your account Card in the Cards
module. If you return to the list view you can see the active check box is next to V2 and that
V1 is no longer active. Remember that there can only be one active version of an OmniScript
at a time!

VPE 4-3: Ending an OmniScript - Page 37 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

Review
Confirm your understanding by answering these questions.

• What are best practices for sending data out of an OmniScript?


• What is the merge field syntax for OmniScript?
• What are some uses for the OmniScript Debug Console?
• What does a Navigate Action do?

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 38 VPE 4-3: Ending an OmniScript
CONFIDENTIAL

Exercise VPE 4-3.1: Ending the Edit Contact OmniScript


Scenario

You need to add a second Integration Procedure Action that saves the updated
contact details, and a Navigate Action so the user can complete the OmniScript.
The team has already built a starter Integration Procedure for you to use, which is
called team_saveContactDetails.

Add an Integration Procedure Action to your version of the team/editContact OmniScript with these
settings.

Setting Value

Name Use the team's naming convention


Integration Procedure team_saveContactDetails
Extra Payload ContactId - %ContextId%
Send JSON Path StepContact

- Use the DEBUG CONSOLE to verify that the correct data is sent to the Integration
Procedure.
- Add a Navigate Action to end the OmniScript. Don’t forget to configure it correctly for the
Contact Object.
- Activate Version 2 of the OmniScript

VPE 4-3.1: Ending the Edit Contact OmniScript - Page 39 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

Exercise VPE 4-3.2: Ending the Edit Case OmniScript


Scenario

You need to add a second Integration Procedure Action that saves the updated case
details, and a Navigate Action so the user can complete the OmniScript.
The team has already built a starter Integration Procedure for you to use, which is
called team_saveCaseDetails.

Add an Integration Procedure Action to your version of the team/editCase OmniScript with these settings.

Setting Value

Name Use the team's naming convention


Integration Procedure team_saveCaseDetails
Extra Payload CaseId - %ContextId%
Send JSON Path StepCase

- Use the DEBUG CONSOLE to verify that the correct data is sent to the Integration
Procedure.
- Add a Navigate Action to end the OmniScript. Don’t forget to configure it correctly for the
Case Object.
- Activate Version 2 of the OmniScript

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 40 VPE 4-3.2: Ending the Edit Case OmniScript
CONFIDENTIAL

VPE 4 Part 2: Working with Complex OmniScripts


Scenario for Part 2
In Part 2, you will build an Update Account Primary Contact OmniScript.

"As a service agent, I'd like simple guided workflows that allow me to update
some basic account, contact, and case details from the service console. Then, for an account’s primary
contact, I'd like a more complex guided workflow that provides me with options to:
- Update the contact information for the existing primary contact
- Change the primary contact to another existing contact that I can easily lookup
(and edit their contact information)
- Create a new contact and assign them as the primary contact

I'd like my data entries to be validated and to receive warnings if I make mistakes.
- In the same Account Update Primary Contact guided workflow, I'd like to view weather
forecast information for the account's location and see alerts if there any hazardous weather
conditions."

Overview of Part 2

Section Topic Task Challenge


VPE 4-4 Building a More Edit an OmniScript Outline: ü
Complex OmniScript Update Account Primary Contact
Build an OmniScript Outline for ü
Update Account Primary Contact
VPE 4-5 Adding Branching to Add Conditional Branching to the ü
an OmniScript OmniScript
VPE 4-6 Using a Type Ahead Add a Type Ahead Block to the ü
Block in an OmniScript OmniScript
VPE 4-7 Refining the UI Refine the OmniScript User ü
Interface
VPE 4-8 Using Functions in Add a Function to a Set Values ü
Set Value Elements Element

VPE 4 Part 2: Working with Complex OmniScripts - Page 41 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

The two integration procedures are already configured in the Starter version of this OmniScript. You will
add the DataRaptor.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 42 VPE 4 Part 2: Working with Complex OmniScripts
CONFIDENTIAL

Exercise VPE 4-4: Building a More Complex OmniScript


Scenario

The service agent needs a more complex guided workflow that allows them to choose
options and view different groups of fields based on what they choose.

This OmniScript is going to take a little longer to build. You’ll start as you did before by
designing and creating the structure of the OmniScript.

What You Will Learn


• How to use element properties to change the UI and UX of an OmniScript
• How to inspect OmniScript JSON

Exercise Overview
Task 1: Edit an Update Account Primary Contact OmniScript

Task 1: Edit an Update Account Primary Contact OmniScript

1.1 Open the OmniScript Team Starter Update Account Primary Contact.

a. Click the Vlocity OmniScript Designer tab.


b. In the Search box, type the keyword team.
c. From the search results, expand team/updateAccountPrimaryContact.
d. Click Team Starter Update Account Primary Contact (Version 1). The Script Configuration
element opens.

1.2 Create a new version of this OmniScript.

a. Click Create Version. You can see the Version increments from 1 to 2.
b. For OmniScript name, delete the word “Starter” to change the OmniScript name to Team
Update Account Primary Contact.
c. Confirm the Enable LWC checkbox is selected to allow the use of Lightning web
components.

1.3 Review the configuration as follows:

In the STRUCTURE panel, click IPGetAccountPriContactDetails. You can see this element
contains an Integration Procedure called team_getPrimaryContactDetails, which gets data
about a primary contact for a Salesforce account.

VPE 4-4: Building a More Complex OmniScript - Page 43 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

a. Expand SEND/RESPONSE TRANSFORMATIONS. You can see that this OmniScript is


sending the ContextId to the Integration Procedure on a variable named AccountId.

b. Notice the StepContacts element has three distinct blocks: BlkUpdatePriContact,


BlkChangePriContact, and BlkCreatePriContact.

c. Click LWC PREVIEW to see how these blocks currently look in PREVIEW mode. Note the
Step Chart isn’t hidden in this OmniScript because you will add instructions to the users that
display there.

1.4 Add some instructions to help guide the user through the interaction. It’s best practice to ensure
instructions are clear, concise, and complement the existing information in the UI.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 44 VPE 4-4: Building a More Complex OmniScript
CONFIDENTIAL

a. In the STRUCTURE panel, click StepContacts.


b. Copy the following instructional text and paste it into the Step Instruction rich-text editor.
You might need to copy and paste using CTRL + C and CTRL + V.

Update the contact information for the existing Primary Contact,


change the Primary Contact and update their contact information, or
create a new contact and make them a Primary Contact.

NOTE

If you do not see the rich-text editor, exit the OmniScript and open it up again or refresh your
screen.

You can copy the text or add instructions in your local language.

If you leave the Step Chart Label field blank, the system will display the value in the
Field Label field by default. You only need to use the Step Chart Label field if you
wish to display an alternate label.

c. Click LWC PREVIEW to view the instructions.

NOTE

If you do not see the instructions, make sure Lightning is selected.

VPE 4-4: Building a More Complex OmniScript - Page 45 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

1.5 Make the Primary Contact Name read-only. This field corresponds to an un-editable field in
Salesforce, so it should be read-only.

a. Click the BlkUpdatePriContact block. In LWC PREVIEW mode, this block includes stub
details about the current primary contact for the account.
b. Click the UpdateName element.
c. Select the following options:
• Read Only
d. Click LWC PREVIEW. Notice the field value is no longer editable because the Primary
Contact Name is read-only.

NOTE

The Text2 field will display the ContactId, which is the RecordId for the primary contact.
Keeping the RecordId in the same block of the OmniScript when you update that contact’s
details and save the changes back to Salesforce will make your life as a developer much
easier. However, the RecordId has no purpose for the end-user. Therefore, you should hide
the RecordId from the UI.

1.6 Configure the BlkUpdatePriContact block to hide the RecordId so that it is not visible in the UI.

a. Click the UpdateContactId element.


b. In PROPERTIES, notice that a checkbox to hide the field is unavailable. This means you
need to edit the JSON code.
c. Click Edit as JSON. The element JSON metadata defining this element is displayed.
d. Find the “hide” property and change the value to true. True/false Booleans must be all
lowercase.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 46 VPE 4-4: Building a More Complex OmniScript
CONFIDENTIAL

e. Click Edit in Property Editor.


f. Click LWC PREVIEW.
g. Notice the RecordId is no longer visible in the UI. However, if you click {Data}, the JSON still
shows the ContactId. Also notice that StepContacts contains all the data to be saved, except
for the ContextId, which is at the top of the JSON.

1.7 View the Integration Procedure that saves the data.

a. In the STRUCTURE panel, click the IPSavePriContactDetails element. This is the


Integration Procedure that saves the data for this element. It is configured to use the starter
Integration Procedure: team_savePrimaryContactDetails.

b. In REMOTE PROPERTIES, under Extra Payload, notice the key value pair of AccountId,
%ContextId%. This specifies that the OmniScript sends the ContextId on a variable named
AccountId.

c. Expand SEND/RESPONSE TRANSFORMATIONS.

d. Notice that the OmniScript sends the StepContacts JSON path.

Review
Confirm your understanding by answering these questions.

• Why should you not let a user edit the Name field from a Salesforce contact record?
• Describe some of the ways you can change the UI of OmniScript elements?
• How is a Salesforce record uniquely identified?
• What variable identifies the context of an OmniScript?

VPE 4-4: Building a More Complex OmniScript - Page 47 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

Exercise VPE 4-4.1: Design an Update Account Primary


Contact OmniScript
Scenario

The service agent needs a more complex guided workflow that allows them to choose
options and view different groups of fields based on what they choose.

This OmniScript is going to take a little longer to build. You’ll start as you did before
by designing and creating the structure of the OmniScript.

Task 1: Design an Update Account Primary Contact OmniScript

Which Elements Do You Need for the OmniScript Structure?

Choose from the tables in the Platform Essentials Take Home Guide: LWC OmniScript Element
References section.

Requirement Which Element?


A page for the interaction

Allow the user to choose options for what they want to


do. They can only select one option at a time.

Group fields together

Which Common Element Property Do You Need?

Requirement Which Element?


Each group of fields conditionally displays based on the
option the user chooses

• For the Change primary contact option, the user can start typing in a field to display the contact's
name and email address, and they can edit the email address if necessary.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 48 VPE 4-4.1: Design an Update Account Primary Contact
OmniScript
CONFIDENTIAL

Which Elements Do You Need for “Change the primary contact to another existing contact”?

Requirement Which Element?


Allow the user to start typing a name so they can view
and select an existing contact

Allow the user to edit the contact email

Which Common Element Property Do You Need?

Requirement Which Common Element?


Prevent the user from leaving the primary contact email
blank

VPE 4-4.1: Design an Update Account Primary Contact OmniScript - Page 49 VPE 4: Successful Interactions with Vlocity LWC
OmniScript
CONFIDENTIAL

Exercise VPE 4-5: Adding Branching to the OmniScript


Scenario
You add options to the Update Account Primary Contact OmniScript so the OmniScript
branches based on options selected by the user.

This OmniScript only has one step, but each of the three blocks in the step represents
a different branch. The blocks shown in the UI depend on what the user selects.

What You Will Learn


• What elements allow users to choose from preset values
• How to show or hide elements based on logical conditions

Exercise Overview
Task 1: Add Conditional Branching to an OmniScript

Task 1: Add Conditional Branching to an OmniScript

1.1 Create options that the user can select:

a. In the Team Update Account Primary Contact OmniScript, in AVAILABLE COMPONENTS,


expand the Inputs section.
b. Drag a Radio element to the STRUCTURE panel at the top of the StepContacts element, as
shown below. Be careful not to place the Radio element inside the top block instead!

TIP

If you are having trouble adding an element to the OmniScript structure, check that you aren’t
zoomed out too much, as this sometimes prevents you from seeing the placement line when
you’re trying to drag and drop. (cmd + 0 or ctrl + 0)

c. Change the Element Name to RadioPriContact.


d. To help the end-user understand what to do next, for Field Label, add the following text:

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 50 VPE 4-5: Adding Branching to the OmniScript
CONFIDENTIAL

What do you want to do?

e. In the OPTIONS section, add three options with the following values and labels for the
associated variables in the OmniScript JSON.

Value Label

Update Update primary contact


Change Change primary contact
Create Add new primary contact

f. Click LWC PREVIEW. Notice the options you added are now radio buttons for choosing a
branching.

1.2 Configure a way for the value of the Radio element to control which block to display.

a. Click the BlkUpdatePriContact element.


b. Notice CONDITIONAL VIEW at the bottom of the PROPERTIES view. You have the
following choices for CONDITIONAL VIEW.
• Hide element if false.
• Set element to readonly if false.
• Set required element to optional if false.
c. Make sure the Hide element if false value is selected.

VPE 4-5: Adding Branching to the OmniScript - Page 51 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

TIP

You can think of this option as “Show element if true”, which is easier to think about when
defining Boolean logic for the condition.

d. Click Add Condition.


e. For the Enter the field name, click in the field to open the pulldown list.
f. Choose RadioPriContact.
g. Verify that Is Equal To is selected.
h. For the value, type Update.
i. Click LWC PREVIEW.
j. Notice that BlkUpdatePriContact is now missing from the UI.
k. Select Update primary contact.

TIP

You might need to clear data here if this option is already selected.

1.3 Set the display condition for the next block in the step: BlkChangePriContact.

a. In the STRUCTURE panel, click BlkChangePriContact. You’ll add elements to this block in
a later exercise.
b. Under CONDITIONAL VIEW, click Add Condition.
c. For Enter the field name select RadioPriContact.
d. Confirm that Is Equal To is selected.
e. For Enter the value, type or paste Change.

1.4 Set the display condition for the last block in the step: BlkCreatePriContact.

a. In the STRUCTURE panel, click BlkCreatePriContact.

b. Under CONDITIONAL VIEW, click Add Condition.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 52 VPE 4-5: Adding Branching to the OmniScript
CONFIDENTIAL

c. For Enter the field name select RadioPriContact.


d. Check that Is Equal To is selected.
e. For Enter the value, type or paste Create.

1.5 Click LWC PREVIEW. Because no options are selected, no fields are displayed. (If you see data,
click {Data} and Update).

1.6 Select Update primary contact and notice the primary contact fields are displayed.

BEST PRACTICE

When designing guided workflows, consider showing options for the most common use case
by default (if it will not result in end-users skipping a step). In this case, the most common use
case is to update primary contact details.

1.7 Set the default branching to Update primary contact.

a. In the STRUCTURE panel, click the RadioPriContact element.

b. In PROPERTIES, ensure that OPTIONS is expanded.


c. For the first option, select Default.
d. Click LWC PREVIEW.
e. Notice the Update primary contact option is the default selection, and the primary contact
data is populated.

Review
Confirm your understanding by answering these questions.

• If an element has a conditional view, what setting do you need for that element to populate?
• Which OmniScript elements allow users to make selections from a given set of options? What are the
differences between these?
• What are some best-practice guidelines for building OmniScripts with conditional views?

VPE 4-5: Adding Branching to the OmniScript - Page 53 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

Exercise VPE 4-6: Adding a Typeahead Block


Scenario
You add typeahead functionality to the OmniScript as a usability feature. Adding a
typeahead feature involves configuring the BlkChangePriContact element with an auto-
complete feature of OmniScript, which is called Type Ahead Block. This specifies that
the OmniScript Action Component retrieves data and displays it in a dropdown list as
the user types, saving them from having to type the full value.

What You Will Learn


• How a Type Ahead block works and how to configure it with a data source

Exercise Overview
Task 1: Add a Type Ahead Block

Task 1: Add a Type Ahead Block

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 54 VPE 4-6: Adding a Typeahead Block
CONFIDENTIAL

1.1 Add a Type Ahead block to the BlkChangePriContact block.

a. If you are not already in PROPERTIES, go there.


b. From AVAILABLE COMPONENTS, expand the Groups section.
c. Ensure the BlkChangePriContact block is expanded and then drag a Type Ahead Block
into the BlkChangePriContact block.
d. Set the following values:

Property Value Notes

Element Name TAChangeContact TA is an abbreviation for


“typeahead”.
Field Label Start typing contact name User instructions
Required ü

1.2 Configure a data source for the Type Ahead block. A stub DataRaptor Extract is already available
for you to use.

a. In AVAILABLE COMPONENTS, expand the Actions group.


b. Drag a DataRaptor Extract Action into the TAChangeContact block.
c. For Element Name and Field Label, change the value to DRChangeContactTA.
d. From the DataRaptor Interface dropdown list, select teamStubChangePriContactTA.

VPE 4-6: Adding a Typeahead Block - Page 55 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

1.3 Add input parameters.

As with an Integration Procedure, you need to add some input parameters to send data to the
DataRaptor. This DataRaptor only needs to look for contacts associated with this account.

Input parameters are comprised of a data source and a filter value. The data source specifies the
OmniScript element or JSON node that will be passed to the DataRaptor, and the filter value
renames it to a name that the DataRaptor expects. In this example, the first input parameter will
pass the AccountId to the DataRaptor to filter the search to the account's contacts. The second
input parameter will send the text that the user types in to the DataRaptor as the lookup key.

a. Click + Add Input Parameter twice.


b. Set the following values:

Data Source Filter Value

ContextId AccountId
TAChangeContact LookupKey

The first value limits the search to the contacts already associated with this account. The
second sends what the user types into the Type Ahead field.

1.4 Review the data flow updates in the UI.

a. Click LWC PREVIEW.


b. Select Change primary contact.
c. Type a in the field.
d. Notice the dropdown list has all of the Contact stub data. You need to finish configuring the
Type Ahead Block to only display Contact names that match what is entered.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 56 VPE 4-6: Adding a Typeahead Block
CONFIDENTIAL

e. Click Debug to open the OMNISCRIPT DEBUG CONSOLE.


f. Expand the console window.
g. Expand the most recent entry DRChangeContactTA. You may need to scroll down.
h. Expand the request node.

i. Notice the OmniScript is sending a LookupKey and an AccountId.


j. Expand the response node under the request node. This is the response from the
DataRaptor.
k. Notice the response contains two contact records with the following field names:
• ChangeContactNameKey
• ChangeContactId
• ChangeContactEmail

1.5 Configure the name of the field to display in the Type Ahead Block.

a. From the first contact record, copy the text ChangeContactNameKey to the clipboard.

VPE 4-6: Adding a Typeahead Block - Page 57 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

b. Close the Debug console.


c. In the STRUCTURE panel, click the element TAChangeContact.
d. For Typeahead Key, paste the JSON key from the clipboard.
e. Click LWC PREVIEW, and type “a”.
f. The dropdown now only displays names.

1.6 Add two more fields to this Type Ahead Block to store and view the data returned from the
DataRaptor.

a. In AVAILABLE COMPONENTS, expand the Inputs section.


b. Drag an Email element under the DRChangeContactTA element.
c. Click the Email element, and set the following values:

Property Value Notes

Element Name ChangeContactEmail This value matches the


output field from the
DataRaptor.
Field Label Contact Email
Required ü
d. Drag a Text element under the ChangeContactEmail element.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 58 VPE 4-6: Adding a Typeahead Block
CONFIDENTIAL

e. Change the Element Name to ChangeContactId. This specifies where to store the
RecordId for the contact returned by the DataRaptor. Next, you should hide this field from the
UI.
f. Click Edit as JSON.
g. Change the hide value to true. Be sure to use all lowercase.
h. Click Edit in Property Editor.
i. Click LWC PREVIEW.
j. Click Edit (the pencil in the start typing field).

k. Contact Email is displayed as a required value.


l. Type a in the field and select Place Holder from the list of choices.
m. Click {Data}.
n. Review the JSON and notice the ContactId is present and available in the JSON data in the
BlkChangePriContact node, in the ChangeContactId field, which will be used to save data
when you make changes.

Review
Confirm your understanding by answering these questions.

• What are the three elements that need to be configured for a Type Ahead Block to work?
• What three OmniScript elements can be a data source for a Type Ahead Block?
• Where do you configure what data is displayed in the Type Ahead dropdown?
• What JSON node contains the text that the user types into a Type Ahead Block?

VPE 4-6: Adding a Typeahead Block - Page 59 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

Exercise VPE 4-7: Refining the UX of an OmniScript


Scenario

A best practice is to design and build OmniScripts that require as little user input as
possible. To this end, you refine the OmniScript to remove extra steps for the user and
simplify the UI.

What You Will Learn


• Use OmniScript element properties to change the UI and UX.

Exercise Overview
Task 1: Refine the UI

Task 1: Refine the UI

1.1 Notice two options in the Team Update Account Primary Contact PREVIEW.

- The Edit button, which the user must click to display the CONTACT EMAIL field for editing.
- The type-ahead field dropdown list, which shows a New option for adding a new contact.

In this scenario, removing these options means fewer clicks for the user.

1.2 Configure the OmniScript to refine the UI.

a. In the STRUCTURE panel, click TAChangeContact.


b. Select Edit Mode, which specifies that all fields in the element are editable in the UI. This
means that the user no longer needs to click Edit to view or update the contact email
address.
c. Select Hide Edit Button to hide the button from the UI.
d. For New Item Label, delete “New”. This removes the New option from the typeahead
dropdown list.
e. Click LWC PREVIEW > Change primary contact.
f. Notice the Edit button is removed.
g. Start typing in the field and notice the New option is removed.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 60 VPE 4-7: Refining the UX of an OmniScript
CONFIDENTIAL

1.3 Select Add new primary contact to view the associated fields.

1.4 Perform a simple error check:

a. Leave the fields empty and click Next. The OmniScript displays an error under each field due
to the missing field data. At least one field must be set to Required for the error message to
display.
b. In the STRUCTURE panel, click the StepContacts element.
c. Notice that Validation Required is selected. This option is enabled by default and specifies
that the OmniScript perform simple error checking for this step. Disable this option only if you
want to prevent the OmniScript from enforcing error checking for the step.

Review
Confirm your understanding by answering these questions.

• What are some more ways to change the UI in OmniScript Elements?


• What are the two requirements for a step to have error checking?

VPE 4-7: Refining the UX of an OmniScript - Page 61 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

Exercise VPE 4-8: Using Functions in Set Values Elements


Scenario

The time has come to start thinking about what kind of errors a user might make when
completing this OmniScript, and any simple error checking you can do to avoid them
making these mistakes. You’ll start by simulating a system error, and work from there.

What You Will Learn


• How to use the OmniScript EXPRESSION EDITOR
• How to add a logical function to a Set Values element

Exercise Overview
Task 1: Add a Function to a Set Values Element

Task 1: Add a Function to a Set Values Element

1.1 Simulate a systematic error:

a. In the STRUCTURE panel, click IPGetAccountPriContactDetails.


b. Disable the Active option to deactivate the element, which is the data source.
c. Click LWC PREVIEW.
d. Notice that contact information is absent from the UI for the default Update primary contact
option.
e. Click Next. Notice the text under the Primary Contact Email field.

1.2 Add a condition that if the UpdateName is blank, you hide the Email field.

a. In the STRUCTURE panel, click the UpdateEmail element.


b. Under CONDITIONAL VIEW, click Add Condition and complete the fields as follows:

Enter the field name Logical Condition Enter the value

UpdateName Does Not Equal [Leave this field blank]

By leaving the field blank you are checking for a null value for the UpdateName.

c. Click LWC PREVIEW.

VPE 4-8: Using Functions in Set Values Elements - Page 62 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

d. Notice the email field is no longer displayed. However, if the user clicks Next, they go to the
end of the OmniScript without having completed any actions.

1.3 Add an element that evaluates the logic needed.

a. Go back to PROPERTIES and in AVAILABLE COMPONENTS, expand the Actions section.


b. Drag a Set Values action into the STRUCTURE panel, under the StepContacts element.
This may be easier if you collapse the StepContacts element first.
c. Set the following values for the Set Values action:
d. For Element Name, use SVErrorCheck. This is the variable name that shows up in the
JSON node.
e. Under Element Value Map, click + Add New Value.
f. For Element Name, use SVErrorCheck.
g. Under Value, click fx to open the EXPRESSION EDITOR.
h. Paste the following text into the EXPRESSION EDITOR to form the logical statement:
IF(%UpdateName%=null&&%TAChangeContact%=null&&%CreateLastName%=null,
"NotOK", "OK")
• If this statement is true, the expression should return the string “NotOK”.
• If this statement is false, the expression should return the string “OK”.
• If any of the three names in the expression contain a value, this expression returns OK.
• If all three names are missing a value, the expression returns NotOK.

You can copy this expression from your OmniScript in the Navigate Action Internal Notes field
near the bottom of the properties panel. If you paste the expression into the Value field rather
than pasting it into the EXPRESSION EDITOR (after you click fx), it will not work because "="
doesn’t prepend the formula. There must be an "=" before the formula for it to be correctly
evaluated.
i. Click Ok.

1.4 Test the element:

a. Click LWC PREVIEW > {Data}.


b. Click Next.
c. You can see that the value for “SVErrorCheck” is “NotOK”.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 63 VPE 4-8: Using Functions in Set Values Elements
CONFIDENTIAL

d. Click Update.
e. Select Change primary contact, and type “h”.
f. Chose Place Holder, then click Next.
g. Notice in the JSON code “SVErrorCheck”: “OK”.

This means that the logic is working correctly.

1.5 Activate the Integration Procedure element again.

a. Click the element IPGetAccountPriContactDetails to show the properties.


b. Select the Active checkbox.
c. Click LWC PREVIEW and you will see the default selection (Update Primary Contact) with
the Primary Contact data displayed again.

Review
Confirm your understanding by answering these questions.

• What is a “Sad path”? In this exercise, how did you simulate one?
• What options are there for creating complex logical conditions in an OmniScript? What are
advantages and disadvantages for each?

VPE 4-8: Using Functions in Set Values Elements - Page 64 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

VPE 4 Part 3: Working with External Data


Scenario for Part 3
In Part 4, you’ll work on the requirements bolded in the below scenario:

"As a service agent, I'd like simple guided workflows that allow me to update some basic account,
contact, and case details from the service console. Then, for an account's primary contact, I'd like a more
complex guided workflow that provides me with options to:

- Update the contact information for the existing primary contact


- Change the primary contact to another existing contact that I can easily lookup
(and edit their contact information)
- Create a new contact and assign them as the primary contact

I'd like my data entries to be validated and to receive warnings if I make mistakes.

In the Account Update Primary Contact guided workflow, I'd like to view weather forecast
information for the account's location and see alerts if there any hazardous weather conditions."

Overview of Part 4

Section Topic Task Challenge


VPE 4-9 Adding External Data to Add the Current Weather ü
an OmniScript
Add the Weather Forecast ü
VPE 4-10 Adding a Warning Add a Weather Banner ü
Banner to an OmniScript
Add Other Alert Conditions ü

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 65 VPE 4 Part 3: Working with External Data
CONFIDENTIAL

Exercise VPE 4-9: Adding External Data to an OmniScript


Scenario

You configure the OmniScript to display weather and forecast data from an external
data source. For the location, you use the billing postal code of the primary contact
account, which is already returned by an Integration Procedure.

What You Will Learn


• How to use tables and merge fields in a Text Block to display data and images in an OmniScript.

Exercise Overview
Task 1: Add the Current Weather

Task 1: Add the Current Weather

1.1 Create a new version of the team/UpdateAccountPrimaryContact OmniScript.

a. Click Script Configuration.

b. Click Create Version and make sure the version number increments up.

VPE 4-9: Adding External Data to an OmniScript - Page 66 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

c. Update the name of this version to:


Team Update Account Primary Contact Weather.

1.2 Configure a second Integration Procedure to get data:

a. In AVAILABLE COMPONENTS, expand the Actions section.


b. Drag an Integration Procedure Action underneath the existing
IPGetAccountPriContactDetails element and above the StepContacts element.
c. For the Element Name and Field Label, use IPGetWeatherForecast.
d. From the Integration Procedure dropdown list, choose the team_getWeatherForecast,
which is a stub Integration Procedure that the team has built for you to use.

Remember you need to send two pieces of information for when you have live data:

• The ContextId, which is already contained in the JSON.


• The Send JSON Node renamed to AccountId.

e. Expand SEND/RESPONSE TRANSFORMATIONS, and set the following values:

Property Value

Send JSON Path ContextId


Send JSON Node AccountId

f. Under Extra Payload, click Add New Key/Value Pair. The key is the name of the variable to
send to the Integration Procedure.
g. For the key, type Days, and for the value, type 2 to specify a fixed value.

1.3 Preview and debug to review the response code:

a. Click LWC PREVIEW.


b. Click Debug. The OMNISCRIPT DEBUG CONSOLE opens.
c. Drag the bottom-right corner of the console to expand the window size.
d. Click Clear to clear any existing data in the console and in {Data} click Update. You will send
the AccountId to the second Integration Procedure.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 67 VPE 4-9: Adding External Data to an OmniScript
CONFIDENTIAL

The response is JSON code with four nodes:

• A “Forecast” node, which has an array of data showing multiple forecast days.
Because this is a stub Integration Procedure it always returns five days of data.
• A “Current” node, which has a set of sub-nodes providing data for temperature,
condition, and city/state.
• “CurrentIcon” and “ForecastIcon” nodes in the root with icon links. These link to
an image on the API website, which you display in the OmniScript.
e. Close the OMNISCRIPT DEBUG CONSOLE.

1.4 Add an element that displays the weather data in the OmniScript.

a. In AVAILABLE COMPONENTS, expand the Display section.


b. Drag a Text Block element into the top of the StepContacts step (above RadioPriContact).
c. For the Element Name, use TxtBlkWeather.

NOTE

A Text Block is a rich-text formatted HTML code block. You can expand the editing
workspace using the bottom-right down-arrow icon.
d. In the text editor, from the Table dropdown menu, click Insert table, and add a 2 x 2 table.
e. Grab the lower-right corner of the table to drag and expand the table to approximately 300 x
100.
f. Add the following text to the cells (use the temp format of your choice):

Current weather for: %Current:CityState%


%Current:Condition% %Current:TempF% °F
or
%Current:TempC% °C

To display degree symbol: Mac – use shift+option+8, PC – use ASCII code 0176
The table should match the image below (with temp format of your choice):

VPE 4-9: Adding External Data to an OmniScript - Page 68 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

g. In the second row of the first column place the curser at the far left, click Insert, choose
Insert/edit image, and set the following values in the modal:

Property Value

Source https://%CurrentIcon%
Image description Current Icon
Dimensions 64 x 64

h. Click Ok.
i. The table should match the image below (with temp format of your choice):

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 69 VPE 4-9: Adding External Data to an OmniScript
CONFIDENTIAL

1.5 Preview the updates:

a. Click LWC PREVIEW.


b. Notice the weather conditions and temperature are displayed in the OmniScript UI.

Review
Confirm your understanding by answering these questions.

• What are some examples of data that a service agent could find useful in a guided interaction that is
not in Salesforce?
• What is the merge field syntax for JSON sub nodes in OmniScripts?
• Which OmniScript element is basically a rich-text formatted HTML code block?
• How can you expand the editing workspace of the OmniScript rich-text editor?

VPE 4-9: Adding External Data to an OmniScript - Page 70 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

Exercise VPE 4-9.1: Adding the Weather Forecast


Scenario

The service agent wants to be able to see the weather forecast for the location of
the primary account. You add the weather forecast to the OmniScript.

Add two more rows to the table in your Text Block and add merge codes to display the forecast for
tomorrow’s weather. Include:

• Forecast Date
• Forecast Icon
• Forecast Condition
• Forecast Hi/Lo Temp. Use the temperature format of your choice.

The forecast data itself is in an array, but the icon is not! To display the forecast data, you need to use a
special symbol in the merge field to designate which element in the array to display. You use the pipe
symbol | which you type with shift + \

• The merge code syntax for an array element is %parent|n:node% where n is the element number
(starting at 1)
• For example, to display tomorrow’s date (from the second element) you would use
%Forecast|2:Date%

The finished text block should display like this:

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 71 VPE 4-9.1: Adding the Weather Forecast
CONFIDENTIAL

If you’re stuck, refer to these images:

VPE 4-9.1: Adding the Weather Forecast - Page 72 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

Exercise VPE 4-10: Adding a Warning Banner to an


OmniScript
Scenario

The service agent wants to see any weather warnings clearly in the UI for the location
of the contact they are working with. You determine you will use a messaging function
to add a weather warning banner to the OmniScript.

A Messaging function:
• Uses a logical expression to determine whether to display a message banner.
• Can display two different messages based on whether the condition is true or
false.

What You Will Learn


• How to use a Messaging element in an OmniScript

Task Overview
Task 1: Add a Weather Warning Banner

Task 1: Add a Weather Warning Banner

1.1 Add and configure a Messaging element with a logical condition so that the OmniScript shows a
warning banner during hazardous weather conditions.

a. In AVAILABLE COMPONENTS, expand the Functions section.


b. Drag a Messaging element to the top of the StepContacts element.
c. For Element Name, use MsgWeatherAlert.
d. Under Validate Expression, click Add Condition.
e. For the condition, specify that Current:Condition Is Equal To Heavy Snow.

Now you need to specify the message shown on the banner.

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 73 VPE 4-10: Adding a Warning Banner to an OmniScript
CONFIDENTIAL

The following table shows the banner types available for true and false conditions.

Message Type Description True False

Comment Grey banner ü ü


Success Green banner ü ü
Warning Yellow banner ü ü
Requirement Red banner ü

IMPORTANT

If you have Requirement for the active false statement, it means the element is required. The
user cannot progress to the next step in the OmniScript until this condition is true.

You can also deactivate either message using the options shown below.

f. Under Messages, for true, select Warning to display a Warning message if the condition is
true.
g. For the true Message, add the following merge field that shows the alert condition:

Weather Alert: %Current:Condition%

h. For the false Message, uncheck Active because we are not using it.

1.2 Preview the changes:

a. Click LWC PREVIEW.


b. Notice the yellow weather-warning banner is displayed, because the current condition in the
stub data is Heavy Snow.

VPE 4-10: Adding a Warning Banner to an OmniScript - Page 74 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL

1.3 Activate this version of the OmniScript to make it available for use.

a. In the STRUCTURE panel, click the Script Configuration element.


b. Click Activate Version. Notice all the fields are greyed-out, so the configuration can no
longer be edited.

Review
Confirm your understanding by answering these questions.

• Which OmniScript element do you use to add a warning banner?


• Which types/colors of notification banner are available for the OmniScript?
• What is special about the Requirement message type? Why do you need to be careful when using it?

VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 75 VPE 4-10: Adding a Warning Banner to an OmniScript
CONFIDENTIAL

Exercise VPE 4-10.1: Adding Other Alert Conditions


Scenario

You configure the OmniScript with other alert conditions.

• Add the following conditions to the Validate Expression of your Messaging element: Thunderstorm
with Hail and Freezing Fog.
• What Boolean logic should you use multiple conditions, AND or OR?

VPE 4-10.1: Adding Other Alert Conditions - Page 76 VPE 4: Successful Interactions with Vlocity LWC OmniScript

You might also like