VPE 4 Vlocity LWC OmniScript EG v5.0.3

VPE 4: Successful Interactions with Vlocity
LWC OmniScript
Exercise Guide
Doc Version: VPE 4 Vlocity LWC OmniScript EG v5.0.3 latest

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.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.
VPE 4: Successful Interactions with Vlocity LWC OmniScript Legal Notice - Page 1
CONFIDENTIAL
Table of Contents
Legal Notice ..............................................................................................................................................1
Table of Contents......................................................................................................................................2
Document Conventions ............................................................................................................................4
Preface .....................................................................................................................................................5
Quick Setup for Vlocity Communications & Insurance Orgs ......................................................................8
Review Your Project Requirements ........................................................................................................12
VPE 4 Part 1: Working with Simple OmniScripts .....................................................................................13
Exercise VPE 4-1: Building an OmniScript’s Structure ..............................................................................14
Exercise VPE 4-1.1: Design and Create the Edit Contact OmniScript ........................................................21
Exercise VPE 4-1.2: Design and Create the Edit Case OmniScript.............................................................23
Exercise VPE 4-2: Getting Data for an OmniScript ...................................................................................26
Exercise VPE 4-2.1: Getting Data for the Edit Contact OmniScript ...........................................................30
Exercise VPE 4-2.2: Getting Data for the Edit Case OmniScript ................................................................31
Exercise VPE 4-3: Ending an OmniScript ..................................................................................................32
Exercise VPE 4-3.1: Ending the Edit Contact OmniScript..........................................................................38
Exercise VPE 4-3.2: Ending the Edit Case OmniScript ..............................................................................39
VPE 4 Part 2: Working with Complex OmniScripts ..................................................................................40
Exercise VPE 4-4: Building a More Complex OmniScript ..........................................................................41
Exercise VPE 4-4.1: Design an Update Account Primary Contact OmniScript...........................................47
Exercise VPE 4-5: Adding Branching to the OmniScript ...........................................................................49
Exercise VPE 4-6: Adding a Typeahead Block ..........................................................................................54
Exercise VPE 4-7: Validating Data and Handling Errors............................................................................61
VPE 4 Part 3: Working with External Data ...............................................................................................66
Exercise VPE 4-8: Adding External Data to an OmniScript .......................................................................67
Exercise VPE 4-8.1: Adding the Weather Forecast ...................................................................................72
Exercise VPE 4-9: Adding a Warning Banner to an OmniScript ................................................................74
Exercise VPE 4-9.1: Adding Other Alert Conditions .................................................................................77
VPE 4-1: Building an OmniScript’s Structure - Page 2 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
VPE 4 Part 4: Launching and Deploying OmniScripts ...............................................................................78
Exercise VPE 4-10: Launching an OmniScript with a Vlocity Action .........................................................79
Exercise VPE 4-11: Deploying an Interaction Launcher ............................................................................84
Last Revision: 3/8/21
VPE 4: Successful Interactions with Vlocity LWC OmniScript Table of Contents - Page 3
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.
CONFIDENTIAL
Preface
These training exercises are based on the Winter’21 release of the Vlocity Communications & Media
application, and the Winter’21 release of the Vlocity Insurance & Health application. For additional
information about the topics covered in this module, see the https://docs.vlocity.com/en/LWC-
OmniScripts.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 LWC 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 Integration Procedure actions to get and save data
• Configure a Navigate action
• Inspect OmniScript JSON
• Understand the elements that allow users to choose from preset values
• Show or hide elements based on logical conditions
• Understand how a Type Ahead block works and how to 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
• Perform data validation with a Set Errors 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
• Create a Vlocity Action that allows you to launch your OmniScripts from any card.
Prerequisites
The prerequisites for this training include a solid understanding of basic Salesforce concepts and
functionality.
VPE 4: Successful Interactions with Vlocity LWC OmniScript VPE 4-1: Building an OmniScript’s Structure – Page 5
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
• Is like a Level 1 Challenge

• Requires additional practice of the current skill or skills from previous lessons
• 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 master this application.
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.
CONFIDENTIAL
Quick Setup for Vlocity Communications & Insurance Orgs

When we create training orgs (also referred to as training playgrounds) for your class, the majority of the
setup steps are performed automatically for you during the org creation process. These steps include:
• Setup and Deploy My Domain: You must register a custom domain to use several features for
displaying Vlocity components. This is most relevant when you build an industry console in VPE 6.
• Setup Remote Site Settings: To enable LWC features for your org, remote site settings must be
updated. This is most relevant when you create LWC-enabled cards in VPE 3. You refer back to
these cards as the course progresses.
When you log into your training org, there are setup tasks that you need to complete before you start your
exercises. You only need to complete these tasks once for each Communications or Insurance org.
1. 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. In the My Work Information block, review the Company Name field. If there are spaces or
special characters in the name, edit it to remove them.
d. Scroll down and click Save. Click OK to confirm. An email is sent to your corporate email address
for confirmation.
e. Open the email and click the link to finish changing your email address.
f. Click Continue when prompted. You now have two browser tabs open for your org. You can
close one of them if you want.
2. (Conditional) If you’re using an Insurance org, set up the platform cache. This step is already done
in Communications orgs.
a. Click the “Gear” icon to go to Setup.
b. In the Quick Find box, type Platform Cache. Click Platform Cache.
c. In the Vlocity Metadata row, on the left, click Edit.
d. Under Org Cache Allocation, enter 2.
e. Click Save.
f. Click Back to Platform Cache Partitions.
g. Click Request Trial Capacity and click OK.
In addition to these steps, you disable pop-up blockers for your org.
Once these steps are done, your training org is ready for you to begin the lab exercises.
CONFIDENTIAL
In the event that the automated setup steps have not been performed for your org, follow the steps
below to perform them manually.
NOTE: HOW TO TELL IF THE AUTOMATED SETUP STEPS HAVE BEEN DONE
Check if the setup steps have already been performed automatically as follows:
In Setup, use the Quick Find to open the My Domain page. If the image on the page shows
Step 4 Domain Deployed to Users, then it has been setup already. You can also see your
domain name is on this page.
Then, use the Quick Find in Setup to go to Remote Site Settings. If the Remote Site URLs
in the EnableLWC settings match your domain name, then they have been setup already.
See the image examples after Step 3 below for further clarification.
1. 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. Try the unique part of your training org login
plus the industry for this. For example, if your login is
name@company.com.700001@vlocityapps.com, try 70001@vlocityapps-cme. Or if your login
is student9999@cme.edu, try student9999-cme.
d. Click Check Availability.
e. Click Register Domain. This process typically takes less than 30 minutes.
2. Deploy Your Domain.
a. Refresh the tab where the My Domain page is open.
b. If your domain is ready to be deployed, you see My Domain Step 3. If you do not see this, wait
until your domain is ready.
c. Under your domain name in the middle of the page, click the Log in button to relaunch your
browser in your domain.
d. Click Deploy to Users and click Ok. If prompted, block pop-up messages. This stops any
browser windows opening issues from happening.
e. Close any extra browser tabs open in the old domain.
CONFIDENTIAL
3. 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 below for examples of how the remote settings are configured.
CMT Org Example
INS Org Example
CONFIDENTIAL
Once these steps are done, your training org is ready for you to begin the lab exercises.
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.
CONFIDENTIAL
VPE 4 Part 1: Working with Simple OmniScripts

Scenario for Part 1
In Part 1, you 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.”
Overview of Part 1
Section Topic Task Challenge

VPE 4-1 Building an Design an OmniScript for Editing Accounts
✓
OmniScript’s Structure
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
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:
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.
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 Vlocity Digital Studio app.
c. Click the dropdown arrow to open the menu and select the Vlocity OmniScript Designer
tab.
The team has already built some starter OmniScripts for you to use. 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).
g. The OmniScript opens in a new tab. Review the information in the Header.
Vlocity 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
Version 1 of the OmniScript is active – leave it that way and create a new version to edit.
CONFIDENTIAL
2.2 Create a new version of the OmniScript for editing.
a. In the header, click New Version. The Version increments from 1 to 2 and the new version
opens in a new tab.
b. Close the tab with version 1 to prevent confusion later.
c. Confirm you are in the tab for version 2, and in the header, click Edit.
d. In the Name field, remove Starter from the name. (It then reads Team Edit Account.)
e. Click Save.
2.3 Explore the help tips in the Script Configuration.
a. Click the Setup panel.

b. 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, hide the step chart that displays to let users know
where they are in a sequence of steps.
a. Scroll down the Setup panel and expand STEP CHART OPTIONS.
b. Select the Hide Step Chart checkbox.
2.5 Build the basic structure of the OmniScript.
a. Select the Build panel.

b. Expand the GROUPS section.
c. Drag a Step element into the Canvas. A step forms a page in an OmniScript.
d. Select the new element.
e. Click the Properties panel. (It is visible between Build and Setup when you select the
element.)
CONFIDENTIAL
f. Specify the following values for the element:
Property Value Best Practice
Element Name StepAccount Element names must be unique with no

spaces or special characters. It’s best to use
a descriptive name in camel case for
element names. They are not visible to
users.
Field Label Account Details Field Labels are what the users see at the
top of the page for each step.
Chart Label If you are displaying the Step Chart this
provides a unique label for each step. As you
are hiding the Step Chart, there is no need to
fill in this field.
Instruction If you wish to provide scripting or guidance
for end-users enter it here. You explore this
later in Part 2.
2.6 Add account details.
a. In the Build panel, 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
CONFIDENTIAL
c. Click the Name element and select Read-only.
Because it holds data coming from the Salesforce account name (Account.Name) field, the
OmniScript user must be unable to edit the name.
d. Click the Phone element and select Required.

e. Notice the Name field now displays read-only and the Phone field now displays required.
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. In the Name element, click on the right-side border of the element to activate the Control
Width Grid.
b. Drag the slider to set the Control Width to 4 squares of the grid.
c. Set the control width to 4 for the Phone and Website elements.
The fields are now displayed on a single line.
CONFIDENTIAL
2.8 Edit the OmniScript to display the fields on separate lines.
a. Click the Build panel.

b. In the Search For Element field, enter line to filter the list for Line Break. (Alternatively,
expand the Display section to find it.)
c. Drag a Line Break element into the canvas, between the Name and Phone elements.
d. Clone the Line Break and drag it to be between the Phone and Website elements.
The fields are now on separate lines.
e. In the Header, click Preview to view how the fields appear to end users.
f. Use the Theme drop-down to see the difference between Lightning and Newport.
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?
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.

User can edit the contact email
VPE 4: Successful Interactions with Vlocity LWC OmniScript VPE 4-1.1: Design and Create the Edit Contact OmniScript – Page 21
CONFIDENTIAL
Create the Edit Contact OmniScript
Create a new version of the team/editContact OmniScript.
• Build the basic structure of the OmniScript in the LWC Designer using descriptive labels.
• Use the following elements, element names, and settings*:
Element Name Setting, if applicable
Setup panel 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 22 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
Exercise VPE 4-1.2: Design and Create the Edit Case

OmniScript
Scenario
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 views but cannot edit the Case Number and Case Open Date.
• The user selects 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.

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 VPE 4-1.2: Design and Create the Edit Case OmniScript - Page 23
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 fit together on

one line, and ensure the Open Date and Status fit together
on another line
Task 2: Create the Edit Case OmniScript
Create a new version of the team/editCase OmniScript.
• Build the basic structure of the OmniScript in the LWC Designer using descriptive labels.
• Use the following elements, element names, and settings:
Element Name Setting
Setup panel Hide Step Chart = Yes

Step StepCase
Text CaseNumber Read-only

Text CaseSubject Required
Date CaseOpenDate Read-only
Select CaseStatus Required
VPE 4-1.2: Design and Create the Edit Case OmniScript - Page 24 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
• 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 VPE 4-1.2: Design and Create the Edit Case OmniScript - Page 25
CONFIDENTIAL
Exercise VPE 4-2: Getting Data for an OmniScript

Scenario
You need to link an Integration Procedure to the Edit Account OmniScript to 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
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. If still in Preview for Team Edit Account, in the Header, click Design.
c. Click the Build panel. Either expand the ACTIONS section or use the search to locate
Integration Procedure Action.
VPE 4-2: Getting Data for an OmniScript - Page 26 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
d. Drag the Integration Procedure Action element into the canvas above stepAccount.
e. Change the Element Name and Field Label to IPGetAccountDetails. The Field Label is
not displayed in the Preview. However best practice when working with Lightning web
components is to enter the name in the Field Label. This is because the field label does
display in the Action Debugger. Later, when you configure multiple integration procedures,
having descriptive labels for them helps you confirm if they are pulling and pushing the data
correctly.
f. From the Integration Procedure dropdown list, choose team_getAccountDetails.
1.2 Configure REMOTE PROPERTIES to identify the variable to send to the Integration Procedure.
You need to send a RecordId to identify which Salesforce account record to update. This data is
stored in the ContextId.
a. In the Properties panel, expand REMOTE PROPERTIES. Under Extra Payload, 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.3 Test the data configuration.
a. In the Header, click Preview.

b. Notice that the Name, Phone, and Website fields do not display any data.
VPE 4: Successful Interactions with Vlocity LWC OmniScript VPE 4-2: Getting Data for an OmniScript - Page 27
CONFIDENTIAL
c. Look at the Data JSON panel and notice the root-level of the JSON from the Integration
Procedure displays, but not in the step. The data is not displaying in the UI because the
element names in the UI don’t match the element names in the JSON.
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. In addition, 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. Updating the element
names to match the input field names updates the JSON and the data displays in the Step.
d. In the Header, click Design.
e. In the Canvas, select StepAccount. Click each element one at a time, then in the Properties
panel, set the following values:
For this Element… Set the Name value to…
Name AccountName
Phone AccountPhone
Website AccountWebsite
f. Click the AccountPhone element and update the Mask. Remove the mask as the phone
number does not display in a Lightning web component with a mask in place.
g. In the Header, click Preview.
VPE 4-2: Getting Data for an OmniScript - Page 28 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
h. Notice the data from the Integration Procedure now populates the fields in the UI.
Review
• What are the advantages of using Vlocity Integration Procedures as data sources?
• Why did you use the same value in the Name and Field Label of the Integration Procedure?
• What determines the JSON structure of an OmniScript?
• How does an OmniScript match incoming data with elements?
• Why did we update the mask?
VPE 4: Successful Interactions with Vlocity LWC OmniScript VPE 4-2: Getting Data for an OmniScript - Page 29
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 to 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
Remote Properties > ContactId = %ContextId%
Extra Payload
- Verify that the OmniScript populates with the stub data.

Hint: check the element names match the data field names and do you have to remove
something from the Phone element to ensure the phone number displays?
VPE 4-2.1: Getting Data for the Edit Contact OmniScript - Page 30 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 to 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

Label Use the team’s naming convention
Integration Procedure team_getCaseDetails
Remote Properties > CaseId = %ContextId%
Extra Payload
- Verify that the OmniScript populates with the stub data.
VPE 4: Successful Interactions with Vlocity LWC OmniScript VPE 4-2.2: Getting Data for the Edit Case OmniScript - Page 31
CONFIDENTIAL
Exercise VPE 4-3: Ending an OmniScript

Scenario
You need to configure the Edit Account OmniScript so the user completes the
guided interaction. You add a second Integration Procedure Action that saves the
updated account details back to Salesforce, and a Navigate Action to 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
• How to configure a Vlocity Action
Exercise Overview
Task 2: Add a Navigate Action to the Edit Account OmniScript
Task 3: Confirm the OmniScript Launches on the Console
VPE 4-3: Ending an OmniScript - Page 32 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 a new Integration Procedure Action.
a. If still in Preview, in the Header, click Design.

b. Click the Build panel. Either expand the ACTIONS section or use the search to locate
Integration Procedure Action.
c. Drag an Integration Procedure Action element into the Canvas and place it under the
stepAccount element.
d. Change the Element Name and Field Label to IPSaveAccountDetails.
e. From the Integration Procedure dropdown list, choose team_saveAccountDetails. This is
a starter Integration Procedure that the team has built.
1.3 Preview the changes and view the data flowing to and from the OmniScript.

b. Click Action Debugger.
c. If there are multiple entries, click Clear Logs to clear any existing data in the debug console.
d. If you cleared the logs, in the Canvas, click the Reset Data button.
VPE 4: Successful Interactions with Vlocity LWC OmniScript VPE 4-3: Ending an OmniScript - Page 33
CONFIDENTIAL
e. In the Action Debugger, expand the following nodes:

• IPGetAccountDetails, then
• Request Data
• Response (resize the response box by grabbing the lower-right corner if you wish to see
all of it without scrolling)
f. Notice the request and response expected JSON output with the account name, website, and
phone data. (The AccountId in the Request Data is empty because you are using stub data.)
g. In the Canvas, click the Next button.
CONFIDENTIAL
h. In the Action Debugger, collapse the node IPGetAccountDetails, and expand the following
nodes:
• IPSaveAccountDetails, then
• Request Data (resize the box if you wish to see the data without scrolling)
• Response
i. Notice the request input and response expected JSON output.

• The entire JSON from the OmniScript is being sent to the Integration Procedure. With
more complex OmniScripts, there is a way to only send one node – which is covered with
the more complex OmniScript you build later.
• For the response, no value is present. This Integration Procedure only saves data, so a
response is not expected.
j. In the Header, click Design.
CONFIDENTIAL
Task 2: Add a Navigate Action to the Edit Account OmniScript
You use a Navigation Action to specify where to send the user when the OmniScript finishes. Indicate
how to open the record page for the Salesforce object that is coded into the ContextId by default.
Navigation Action elements don’t run in Preview mode. You test the Navigation action when you run the
OmniScript from a console with live instead of stub data later.
2.1 Add an element to specify where to send the user when the OmniScript finishes.
a. In the Build panel, locate a Navigate Action element and then drag it into the Canvas under
IPSaveAccountDetails.
b. In the Navigate Action Properties panel, set or confirm the following values:
Field Name Value
Page Reference Type Record

Replace
Object API Name Account
c. In the Header, click Activate Version.

d. Click Done when the chevrons are all shaded and you see the Done confirmation icon.
e. Return to the Vlocity OmniScript Designer tab.
f. Click the LAST MODIFIED column to sort the list by that value.
g. Expand team/edit Account and notice the Active check is next to V2 and that V1 is no
longer active.
CONFIDENTIAL
NOTES
Once you are finished with an OmniScript, you must activate it, so it is available to you
elsewhere. For example, it isn’t available for the OS Action you created on your account Card
in the Cards module unless you activate it. If you return to the list view you see the active
check box is next to V2 and that V1 is no longer active. Remember that there is only one
active version of an OmniScript at a time!
Task 3: Confirm the OmniScript Launches on the Console
3.1 Confirm the OmniScript launches on the Console.
a. If you completed your console in VPE 3-7, return to the OmniStudio Console.
b. Click on the Acme tab and refresh the screen.
c. In the Account Details card, click Menu and select Edit Account to launch the Edit Account
OmniScript.
d. After the OmniScript launches, close that tab.
The OmniScript is either empty or displays stub data. The Navigate action won’t work until
you have live data, so you test it in VPE 5.
Review
• What is the merge field syntax for OmniScript?

• What are some uses for the OmniScript Action Debugger?
• What does a Navigate Action do?
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 completes the OmniScript.
called team_saveContactDetails.
Add an Integration Procedure Action to your version of the team/editContact OmniScript with these
settings.
Setting Value

Integration Procedure team_saveContactDetails
- Use the Action Debugger 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
- Navigate to the console and test the Update Contact action opens the OmniScript.
VPE 4-3.1: Ending the Edit Contact OmniScript - Page 38 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 completes the OmniScript.
called team_saveCaseDetails.
Add an Integration Procedure Action to your version of the team/editCase OmniScript with these settings.
Setting Value

Integration Procedure team_saveCaseDetails
- Use the Action Debugger 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
- Navigate to the console and test the Update Case action opens the OmniScript.
VPE 4: Successful Interactions with Vlocity LWC OmniScript VPE 4-3.2: Ending the Edit Case OmniScript - Page 39
CONFIDENTIAL
VPE 4 Part 2: Working with Complex OmniScripts

Scenario for Part 2
In Part 2, you 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:
- Change the primary contact to another existing contact that I easily lookup
- 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

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 Using Functions in Add a Function to a Set Values ✓
Set Value Elements Element
VPE 4-3.2: Ending the Edit Case OmniScript - Page 40 VPE 4: Successful Interactions with Vlocity LWC OmniScript
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 to open Team Starter Update Account Primary Contact (Version 1).
The OmniScript opens in a new tab.
1.2 Create a new version of this OmniScript.
a. In the Header, click New Version. The new version opens in a new tab.
b. Close the tab with the previous version to prevent confusion later and continue in version 2.
c. Click Edit.
d. In the Name field, delete the word “Starter” to change the OmniScript name to Team Update
Account Primary Contact.
e. Click Save.
VPE 4: Successful Interactions with Vlocity LWC OmniScript VPE 4 Part 2: Working with Complex OmniScripts - Page 41
CONFIDENTIAL
1.3 Review the configuration as follows:
a. In the Canvas, select IPGetAccountPriContactDetails and review the Properties panel.

This element contains an Integration Procedure called team_getPrimaryContactDetails,
which gets data about a primary contact for a Salesforce account.
b. In the Navigation Panel, select the Tree View and expand StepContacts. Notice the
StepContacts element has three distinct blocks: BlkUpdatePriContact,
BlkChangePriContact, and BlkCreatePriContact.
c. On the canvas, click to expand StepContacts. The BlkChangePriContact is not visible there
because it is empty.
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.
a. In the Canvas, click StepContacts.

b. Click the Instruction text box.
c. Copy the following instructional text and paste it into the Edit Rich Text pop-up. 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 the Primary Contact.
NOTE
Copy the text or add instructions in your local language.
d. Click Save.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 42 VPE 4-4: Building a More Complex OmniScript
CONFIDENTIAL
NOTE
If you leave the Chart Label field blank, the OmniScript displays the value in the Field Label
field by default. You only need to use the Chart Label field if you wish to display an alternate
label.
e. In the Header, click Preview to view the instructions.

f. Click the x to close the Data JSON.
NOTE
If you do not see the instructions, make sure Lightning is selected rather than Newport.
1.5 Make the Primary Contact Name field read-only. This field corresponds to an un-editable field in
Salesforce, so it must be read-only.
a. In the Header, click Design.

b. In the StepContacts element, click the UpdateName text element. It is visible in the Canvas
as Primary Contact Name.
CONFIDENTIAL
c. In the Properties panel, select the Read-only checkbox.

Notice the field value is no longer editable because the Primary Contact Name is read-only.
NOTE
The Text2 field displays 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 makes your life as a developer much easier. However,
the RecordId has no purpose for the end-user. Therefore, 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. In the Canvas, click the UpdateContactId text element (visible as Text2).

b. In the Properties panel, notice that there isn’t a checkbox to hide the field. However, you can
edit the JSON instead.
c. Scroll to the bottom of the Properties and click Edit Properties 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.
e. At the bottom of the panel, click Close JSON Editor.

f. In the header, click Preview.
g. In the canvas, click the button to display the Data JSON and Action Debugger.
h. Notice the RecordId is no longer visible in the UI. However, if you view the Data JSON, you
see UpdateContactId. Also notice that StepContacts contains all the data to be saved.
i. In the Header, click Design.
CONFIDENTIAL
1.7 View the Integration Procedure that saves the data.
a. In the Canvas, 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.
d. Expand SEND/RESPONSE TRANSFORMATIONS.
c. Rather than sending the entire JSON and identifying ContextId via extra payload, this
OmniScript is sending just the JSON of the Step Account
Send JSON Path StepContacts This value is the node in the JSON of the OmniScript
that you send to the Integration Procedure. In this case,
you send the contents of the step.
NOTE
Send JSON Node renames the node that you send.
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
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
e. Notice that the OmniScript sends just the StepContacts JSON path to the Integration
Procedure.
CONFIDENTIAL
Review
• Why not let a user edit the Name field from a Salesforce contact record?
• Describe some of the ways to change the UI of OmniScript elements?
• How is a Salesforce record uniquely identified?
• What variable identifies the context of an 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?

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.
CONFIDENTIAL
Which Elements Do You Need for “Change the primary contact to another existing contact”?

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: Successful Interactions with Vlocity LWC OmniScript - Page 48 VPE 4-4.1: Design an Update Account Primary Contact
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 canvas, if it isn’t already expanded, click to expand StepContacts

b. In the Build panel, expand the INPUTS section or use Search and enter rad.
c. Drag a Radio element to the Canvas 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)
CONFIDENTIAL
d. In the Radio element, change the Name to RadioPriContact.

e. To help the end-user understand what to do next, for Field Label, add the following text:
What do you want to do?
f. Keep Display Mode set to Vertical. Keep Option Source set to Manual. You are about to
configure the options yourself in a way that is easier to read if they are presented vertically in
a list.
g. In the Options section, click + Add New Option to add three options with the following
values and labels for the associated variables in the OmniScript JSON. (You have to click
Save to save the first one and then + Add New Option to create the next one.)
Value Label
Update Update primary contact

Change Change primary contact
Create Create a new primary contact
1.2 Add a help tooltip to help the end user.
a. Expand HELP OPTIONS.

b. Select Activate Help Text.
c. In Help Text enter the following: Select the radio button that reflects what
you wish to do: Update, Change, or Create new.
NOTE
Translation is available for help tooltips if multilanguage is enabled. For today, enter
something in your local language if you prefer.
d. In the Header, click Preview.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 50 VPE 4-5: Adding Branching to the OmniScript
CONFIDENTIAL
e. Hover over the Tooltip icon next to What do you want to do? to view the tooltip.
1.3 Configure a way for the value of the Radio element to control which block to display.
a. In the header, click Design.

b. Click the BlkUpdatePriContact element. (It is the block beneath the radio element.)
c. Notice CONDITIONAL VIEW at the bottom of the Properties panel. It allows you to set the
conditions to Show Element if True.
d. Under View Condition, click Show Element if True.
e. Click in Field to open the pulldown list.
f. Choose RadioPriContact.
g. Verify that Equal To is selected.
h. For Value, type Update.
i. Click Save.
j. Notice the orange eye icon that appears indicating there is a condition configured for this
block.
k. In the header, click Preview.
l. Notice that BlkUpdatePriContact is now missing from the UI.
m. Select the Update primary contact radio button. The block appears.
TIP
You might need to refresh here if this option is already selected.
CONFIDENTIAL
1.4 Set the display condition for the next block in the step: BlkChangePriContact.

b. In the Canvas, click BlkChangePriContact. (This is the empty block. You’ll add elements to
this block in a later exercise).
c. Under CONDITIONAL VIEW > View Condition, click Show Element if True.
d. For Field select RadioPriContact.
e. Confirm that Equal To is selected.
f. For Value, type Change.
g. Click Save.
1.5 Set the display condition for the last block in the step: BlkCreatePriContact.
a. In the Canvas, click BlkCreatePriContact.
b. Under CONDITIONAL VIEW, click Show Element if True.

c. For Field select RadioPriContact.
d. Confirm that Equal To is selected.
e. For Value, type Create.
f. Click Save.
g. Note all 3 blocks now have the orange eye icon in the upper-right corner indicating they have
conditions.
h. Click Preview. Because no options are selected, no fields are displayed. (If you see data,
click to refresh).
BEST PRACTICE
When designing guided interactions, consider showing options for the most common use
case by default (if it does not result in end-users skipping a step). In this case, we’ve
determined the most common use case is to update primary contact details.
1.6 Set the default display option to Update primary contact.
b. In the canvas, click the RadioPriContact element.
c. In Options, click the Update primary contact link.

d. Select the Use as Default Value checkbox.
e. Click Save.
f. In the header, click Preview.
g. Notice the Update primary contact option is the default selection, and the primary contact
data is populated.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 52 VPE 4-5: Adding Branching to the OmniScript
CONFIDENTIAL
Review
• 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?
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 2: Refine the UI of the 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.

b. From the Build panel, expand the GROUPS section or use Search and enter type and
locate the Type Ahead Block element.
c. Drag the Type Ahead Block into the BlkChangePriContact block on the Canvas (the empty
block).
d. In the Properties panel, set the following values:
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 the Build panel, expand the ACTIONS group (if you used search, remember to clear the
search conditions).
b. Drag a DataRaptor Extract Action into the TAChangeContact block. (It appears as a
button inside the block.)
c. For Name and Field Label, change the value to DRChangeContactTA.
CONFIDENTIAL
d. From the DataRaptor Interface dropdown list, select teamStubChangePriContactTA.
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 is passed to the DataRaptor, and the filter value renames
it to a name that the DataRaptor expects. In this example, the first input parameter passes the
AccountId to the DataRaptor to filter the search to the account's contacts. The second input
parameter sends the text that the user types in to the DataRaptor as the lookup key.
a. Set the following values:
Data Source Filter Value
ContextId AccountId
b. Click + Add Input Parameter.

c. Set the following values:
Data Source Filter Value
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. The first values have to be
typed in, which the second Data Source selected from the list of options in the dropdown list.
1.4 Review the data flow updates in the UI.
CONFIDENTIAL

b. Select the Change primary contact radio button.
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.
e. Click Action Debugger.

f. Expand the most recent entry DRChangeContactTA. You may need to scroll down.
g. Expand the Request Data node (you may also have to expand the box by dragging the
lower-right corner to see the entire node).
h. Notice the OmniScript is sending a LookupKey and an AccountId to the DataRaptor.

(Because you are using stub data, there is no AccountId being sent.)
i. Expand the Response node under the request data node to view the response from the
DataRaptor.
j. Notice the response contains two contact records with the following field names:
• ChangeContactNameKey
• ChangeContactId
• ChangeContactEmail
CONFIDENTIAL
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.
b. In the header, click Design.

c. In the Canvas, click the TAChangeContact element.
d. In the Properties panel, locate Typeahead Key and paste the JSON key from the clipboard.
e. Return to Preview, select Change primary contact, 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.

b. In the Build panel, expand the INPUTS section.
CONFIDENTIAL
c. Drag an Email element into the TAChangeContact type ahead block under the
DRChangeContactTA element.
d. Set the following values:
Name ChangeContactEmail This value matches the

output field from the
DataRaptor.
Field Label Contact Email
Required ✓
e. In the Build panel, drag a Text element under the ChangeContactEmail element, but still in
the TAChangeContact type ahead block.
f. Change the Name to ChangeContactId. This specifies where to store the RecordId for the
contact returned by the DataRaptor. Next, hide this field from the UI.
g. Click Edit Properties As JSON.
h. Change the hide value to true. Be sure to use all lowercase.
i. Click Close JSON Editor.
1.7 Preview the use of the Type Ahead block.
a. In the header, click Preview.

b. Select Change primary contact.
c. Click Edit (the pencil in the start typing field).
d. Notice Contact Email is now displayed as a required value.

e. Type a in the name field and select Place Holder from the list of choices.
Place Holder’s name and email display.
f. Review the Data JSON and notice the ContactId is present and available in the JSON data
in the BlkChangePriContact node (You may have to expand the TAChangeContact-Block
to view the details), in the ChangeContactId field, which is used to save data when you
make changes.
CONFIDENTIAL
Task 2: Refine the UI of the Type Ahead Block
2.1 Notice two options for the Change primary contact fields:
- The Edit button, which the user must click to display the Contact Email field.
- The type-ahead field dropdown list, which shows a New option for adding a new contact,
which you do not want to let end users do here.
2.2 Configure the OmniScript to refine the UI by hiding the Edit button and removing the New option.

b. In the canvas, click the TAChangeContact type ahead element
If you’re unsure of which element you’re in, look at the properties title. It lists the element
type.
c. In the Properties panel, for New Item Label, delete “New”. This removes the New option
from the typeahead dropdown list.
d. In the Properties panel, 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.
e. Select Hide Edit Button to hide the button from the UI.
f. Click Preview > Change primary contact.
g. Notice the Edit button is removed.
h. Start typing in the field and notice the New option is removed.
Review
• What are the three elements that need to be configured for a Type Ahead Block to work?
• What three OmniScript elements are potential data sources 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?
• What are some ways to change the UI in OmniScript Elements?
CONFIDENTIAL
Exercise VPE 4-7: Validating Data and Handling Errors

Scenario
The time has come to consider what kind of errors a user might make when completing
this OmniScript and consider what kind of simple error checking to configure to avoid
them making these mistakes. You’ll start by simulating an error in your OmniScript, 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
• How to add error checking with a Set Errors element to send a user back to a previous step
Exercise Overview
Task 1: Confirm Simple Error Checks
Task 2: Add a Function to a Set Values Element for a Complex Error Check
Task 3: Add Error Checking
Task 1: Confirm Simple Error Checks
1.1 Simulate a simple error check in your OmniScript.
a. In Preview. select Create a new primary contact to view the associated fields.
b. Leave the fields empty and click Next.
The OmniScript displays an error under each field due to the missing field data. At least one
visible field must be set to Required for these error messages to display. What do you do
when fields are no longer visible, but required?
Task 2: Add a Function to a Set Values Element for a Complex Error Check
2.1 Simulate a systematic error (the “Sad Path”).

b. In the Canvas, click IPGetAccountPriContactDetails.
c. Update the Active toggle to closed. This deactivates the element, which is the data source.
d. Click Preview.
CONFIDENTIAL
e. Notice that contact information is now absent from the UI for the default Update primary
contact option.
f. Click Next. Notice the text under the Primary Contact Email field.
2.2 Add a condition that hides the Email field if the UpdateName field is blank.
a. In the header, click Design to return to the designer view.

b. In the canvas, click the Primary Contact Email (UpdateEmail) element.
a. Under CONDITIONAL VIEW, click the drop-down to review the Condition Types:
- Show Element if True
- Disable Read Only if True
- Set Element to Required if True
b. In View Condition, click Show Element if True.
c. Complete the fields as follows:
Enter the field name Logical Condition Enter the value
UpdateName Does Not Equal [leave blank]
d. Click Save.
e. Return to Preview.
f. 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.
2.3 Add an element that adds the logic needed to stop people from moving forward without taking
any actions.
a. Return to the Design view.

b. In the Build panel, expand the ACTIONS section or use Search to locate Set Values.
c. Drag a Set Values action into the Canvas, under the StepContacts element. This may be
easier if you collapse the StepContacts element first.
d. Set the following values for the Set Values action:
e. For Name, use SVErrorCheck. This is the variable name that shows up in the JSON node.
f. Under Element Value Map, click + Add New Element Value.
g. For Element Name, use SVErrorCheck.
h. Under Value, type = to open Expression mode.
VPE 4-7: Validating Data and Handling Errors - Page 62 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
i. Paste the following text into the Expression text box to form the logical statement:
IF(%UpdateName%=null&&%TAChangeContact%=null&&%CreateLastName%=null,
"NotOK", "OK")
• If this statement is true, the expression returns the string “NotOK”.
• If this statement is false, the expression returns 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.
IMPORTANT
If you paste the expression into the Value field rather than pasting it into the Expression text
box (after you enter =), it does not work because "=" doesn’t prepend the formula. There must
be an "=" before the formula for it to be correctly evaluated.
Rather than copy the text from this document, copy the expression from your OmniScript in
the Navigate Action > Internal Notes field near the bottom of the properties panel.
j. Click Save.
2.4 Test the element:
a. Click Preview > Next.

b. In the Data JSON you see the value for “SVErrorCheck” is “NotOK”.
c. Click Refresh.
d. Select Change primary contact, and type “h”.
e. Chose Place Holder, then click Next.
f. Notice in the JSON code “SVErrorCheck”: “OK”.
This means that the logic is working correctly.
CONFIDENTIAL
Task 3: Add Error Checking
3.1 Add a Set Errors element to send users back to a previous step if data is incomplete.

a. In the Build panel, expand the ACTIONS section or use Search to locate Set Errors.
b. Drag the Set Errors element into the canvas, under the SVErrorCheck element.
c. Change Name to SetErrors.
d. Under Element Error Map, click + Add New Element Value.
e. For Element Name, select RadioPriContact.
f. For Value, add Please change or create a new primary contact!
You need to specify the action to take when the radio button element is displayed. In this
case, you want the user to either change or create a new primary contact.
g. Click Save.
3.2 Add a conditional view to the Set Errors element.
Set Errors elements must have a conditional view. The condition for this error check is that
SVErrorCheck is equal to NotOK. Add the condition as follows:
a. Under CONDITIONAL VIEW > View Condition, click Show Element if True.
b. For the field name, choose SVErrorCheck from the dropdown list.
c. Ensure that Equal To is selected.
d. For the Value, use NotOK. (OK is case sensitive.)
e. Click Save.
Note the condition icon (the orange eye) now displays.
3.3 Test the Set Errors element.

b. Confirm no primary contact is shown and click Next.
c. Notice the instructions in red.
d. Select Change primary contact.

e. Type h and choose Place Holder.
CONFIDENTIAL
f. Click Next.
g. In the Data JSON notice that the value for “SVErrorCheck” is “OK”.
3.4 Activate the Integration Procedure element again.
a. Return to the Design view.

b. In the Navigation Panel, Tree View, select the IPGetAccountPriContactDetails element to
show the properties.
c. Change the Active toggle to blue or “on”.
d. Click Preview. You see the default selection (Update Primary Contact) with the Primary
Contact data displayed again.
Review
• What is the requirement for a step to have simple error checking?

• 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?
• What settings are required for a Set Errors Element?
CONFIDENTIAL
VPE 4 Part 3: Working with External Data

Scenario for Part 3
In Part 3 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:

- Change the primary contact to another existing contact that I easily lookup
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 3

VPE 4-8 Adding External Data to Add the Current Weather ✓
an OmniScript
Add the Weather Forecast ✓
VPE 4-9 Adding a Warning Add a Weather Banner ✓
Banner to an OmniScript
Add Other Alert Conditions ✓
CONFIDENTIAL
Exercise VPE 4-8: 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. In the header, click New Version.
b. Close the tab with the previous version to prevent confusion later.
c. Click Edit and add Weather to the end of the name. The full name is now = Team Update
Account Primary Contact Weather.
d. Click Save.
VPE 4 Part 3: Working with External Data VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 67
CONFIDENTIAL
1.2 Configure a second Integration Procedure to get weather data:
a. Return to the Designer.

b. In the Build panel, expand the ACTIONS section.
c. Drag an Integration Procedure Action underneath the existing
IPGetAccountPriContactDetails element and above the StepContacts element.
d. For the element Name and Field Label, use IPGetWeatherForecast.
e. From the Integration Procedure dropdown list, choose team_getWeatherForecast, which
is a stub Integration Procedure that the team has built for you to use.
You need to send two pieces of information to the Integration Procedure for when you have
live data:
• The ContextId, which is already contained in the JSON.

• The number of days of forecast data, which is not present.
f. Expand REMOTE PROPERTIES.

g. Under Extra Payload, for the key, type AccountId, and for the value, type %ContextId%.
h. Click + Add New Key/Value Pair.
i. For the key, type Days, and for the value, type 2 to specify a fixed value.
j. Click Send Only Extra Payload to only send the ContextId and days to the new Integration
Procedure.
1.3 Preview and debug to review the response code:

b. Click Action Debugger.
c. Click Clear Logs to clear any existing data.
d. In the canvas click Refresh. This sends the AccountId to the second Integration Procedure.
e. Expand the IPGetWeatherForecast node and then the Response (you may have to expand
the box in the lower-right corner to view more of it fully).
VPE 4-8: Adding External Data to an OmniScript - Page 68 VPE 4: Successful Interactions with Vlocity LWC 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.
1.4 Add an element that displays the weather data in the OmniScript.

b. In the Build panel, expand the DISPLAY section.
c. If it isn’t already expanded, click to expand StepContact.
d. Drag a Text Block element into the top of the StepContacts step (above RadioPriContact).
e. In the Properties, for the element Name, use TxtBlkWeather.
NOTE
A Text Block is a rich-text formatted HTML code block. Expand the editing workspace using
the bottom-right down-arrow icon.
f. Click in the Text box.
g. From the Table dropdown menu, click Table, and add a 2 x 2 table.
h. Click the Table Properties menu option.
i. In Width enter 400px and in Height enter 100px.

j. For Border width leave blank or enter 0.
k. Under Advanced, for Border style select Hidden.
l. Click Save.
m. 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 (this is
only typed using the numeric keypad, not the keyboard).
CONFIDENTIAL
n. In the second row of the first column, place the curser at the far left, click Insert, choose
Image…., and set the following values in the modal:
Property Value
Source https://%CurrentIcon%
Alternative description Current Icon
Dimensions 64 x 64
o. Click Save.
p. Confirm the table matches the image below (with temp format of your choice):
a. Click Save.
VPE 4-8: Adding External Data to an OmniScript - Page 70 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
1.5 Preview the updates:

b. Notice the weather conditions and temperature are displayed in the OmniScript UI.
NOTE
If the full table does not display, return to the Designer, Open Rich Text Editor > View >
Source Code and remove and % values for width or height and return to the preview after
saving the changes.
Review
• 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?
CONFIDENTIAL
Exercise VPE 4-8.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 displays like this:
2021-01-27
VPE 4-8.1: Adding the Weather Forecast - Page 72 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
If you’re stuck, refer to these images:
CONFIDENTIAL
Exercise VPE 4-9: 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 decide to 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.

b. In the Build panel, expand the FUNCTIONS section.
c. Drag a Messaging element to the top of the stepContacts element (above the text block for
the weather).
d. For element Name, use MsgWeatherAlert.
e. Under CONDITIONAL VIEW > View Condition, click Show Element if True.
f. For the Field, specify that Current:Condition is Equal To Heavy Snow.
g. Click Save.
Now you need to specify the message shown on the banner.
The following table shows the banner types available for true and false conditions.
VPE 4-9: Adding a Warning Banner to an OmniScript - Page 74 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
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.
h. Under Messages, for true, select Warning to display a Warning message if the condition is
true.
i. For the true Message, add the following merge field that shows the alert condition:
Weather Alert: %Current:Condition%
j. For the false Message, uncheck Active because we are not using it. (You may not have
issues with the stub data but will have problems later on if you leave this checked.)
CONFIDENTIAL
1.2 Preview the changes:

b. Notice the yellow weather-warning banner is displayed, because the current condition in the
stub data is Heavy Snow.
Review
• 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-9: Adding a Warning Banner to an OmniScript - Page 76 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
Exercise VPE 4-9.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 allows multiple conditions, AND or OR?
CONFIDENTIAL
VPE 4 Part 4: Launching and Deploying OmniScripts

Scenario for Part 4
In Part 4 you’ll work on the requirements bolded in the below scenarios:
“As a developer, I need the OmniScripts I created to launch from several locations. To launch from
FlexCards, I want to create a Vlocity Action to re-use again and again.”
“As a service agent, I want to easily identify and verify a caller and launch the appropriate record in
my Console once they are verified.”
Overview of Part 4

VPE 4-10 Launching an Configure a Vlocity Action for ✓
OmniScript with a Vlocity Action your OmniScript
VPE 4-11 Deploying an Add an Interaction Launcher to ✓
Interaction Launcher your Console
VPE 4-9.1: Adding Other Alert Conditions - Page 78 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
Exercise VPE 4-10: Launching an OmniScript with a Vlocity

Action
Scenario
“As a developer, I need the OmniScripts I created to launch from several locations. To
launch from FlexCards, I want to create a Vlocity Action to re-use again and again.”
The most common way for end users to access your OmniScripts is to click an Action (if
using a console, the action is on a FlexCard, if deploying in an org without FlexCards on the
console, the action is on a button). Another member of your team built the shells of the
Action earlier, and you selected it to use in your Master Account Card FlexCard. Now is the
time to configure the Action to work with your completed OmniScript.
What You Will Learn

• What a Vlocity Action is
• How to configure a Vlocity Action to launch an OmniScript
Task Overview
Task 1: Configure a Vlocity Action for your OmniScripts
Task 1: Configure a Vlocity Action for your OmniScripts
1.1 Update the team Update Primary Contact Vlocity Action details.
a. Click the App Launcher to open the app menu.

b. In the search field enter Actions to filter the options, then select Vlocity Actions to open
the tab.
c. If you do not see any Actions on the tab, change the view to All (The default in Salesforce is
Recently Viewed).
d. Open the team Update Primary Contact Action.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 79 VPE 4-10: Launching an OmniScript with a Vlocity Action
CONFIDENTIAL
e. Review the fields and notice the following:
Field Explanation/Definition
Applicable Type The Objects the Action can be used with. (Best practice is to not
use All because it slows down processing.)
Applicable User Profile Which Salesforce User Profiles can see/use the Action.
Active Like OmniScripts, Card Layouts, or Integration Procedures, you
cannot deploy an Action if it is not active.
Display On Whether you can see the Action on Mobile, Web, or both.
Target URL URL that the action launches, in our case an OmniScript.
URL Parameter The field or fields that are be passed to the URL from the sObject
named in the Salesforce Object Type. Usually this is Id, but it
could be any field from the sObject.
Open URL in Where the OmniScript opens. In a new tab / window or the same
one.
Vlocity Icon Indicates which icon is visible on a Card. You can view the full list
of icons in the Edit modal below the details section. These are
only visible in Angular Cards.
Link Type What type of Action are you creating? OmniScript, ConsoleCards
(used by the Console), or Other
VPE 4-10: Launching an OmniScript with a Vlocity Action - Page 80 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
f. Click Edit, and make the following edits to the Action (other fields remain as they are):
Property Value Note
Applicable Type Account Remove All and replace it

with Account.
URL Parameter Id
Open URL in New Tab/Window
Link Type OmniScript
Display Sequence 100
g. Click Save.
1.2 Update the URL for the team Update Primary Contact Vlocity Action using the team Update
Account Primary Contact OmniScript.
a. Return to the tab with Team Update Account Primary Contact Weather.
b. In the header, click Activate Version. (You need to activate the OmniScript to use it
elsewhere.)
c. When the chevrons are green, click Done.
d. In the header, click the triangle next to Edit and select How To Launch.
e. In the Embedded section, notice the tag that lets you embed the component into any Aura or
LWC component.
CONFIDENTIAL
f. In the Lightning field, copy the URL from the / before lightning to the end. (If you wish,
paste it where you are tracking items to copy and paste.)
Copying the URL this way ensures portability for the OmnIScript. If you copied the entire
URL, you would only be able to deploy the OmnIScript in your org.
g. Click Done to close the modal window.

h. Return to the console tab with the team Update Primary Contact Action.
i. Click in the Target URL field to open it up for editing and paste the URL you just copied into
the field.
NOTES
The example screenshot was taken in a training playground. Your training playground has a
different URL.
j. Add &c__tabLabel=UpdatePriContact&c__ContextId={0} to the end of the URL.

This adds a label for the tab that displays the OmniScript and passes the ContextId (the
AccountId) to the OmniScript.
k. Click Save.
VPE 4-10: Launching an OmniScript with a Vlocity Action - Page 82 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
1.3 Test the Vlocity Action on the Console.
a. Return to the OmniStudio Console tab.

b. Click on the Acme tab and refresh the screen.
c. From the Account card’s menu, click to launch the Change Contact action.
When the OmniScript launches, close that tab. (It may launch in a sub-tab.)
Review
• What is a Vlocity Action?

• Can you deploy an Action if it is not active?
• How did you build the URL to use in the Action?
CONFIDENTIAL
Exercise VPE 4-11: Deploying an Interaction Launcher

Scenario
“As a service agent, I want to easily identify and verify a caller and launch the
appropriate record in my Console once they are verified.”
Your console is built, and you’ve provided the end-users with a 360° view of their
customers. You and the team decide that you prefer end users launch the console via an
Interaction Launcher to help ensure they select the right Account or Contact. Your team has
set up an OmniScript to use as the Interaction Launcher of your console.
What You Will Learn

• How to add an Interaction Launcher to a Console toolbar
Task Overview
Task 1: Add an Interaction Launcher to your Console
Tracking an Interaction with a Customer
Vlocity has a custom Salesforce object called a Customer Interaction. This sObject represents a record of
an interaction between a customer, prospect, partner, or other contact and your organization. This could
be a record for a phone call, web site visit, or a mobile application session.
The Interaction Launcher is a Vlocity tool that:
• Searches for customers

• Verifies permissions for access to records
• Creates Customer Interaction records
• Launches consoles that display the data and transactions that the customer has permissions to
use
OmniScript based Interaction Launchers use Selectable Items components and are added to a console
as a Utility Item in the bottom toolbar. Interaction Launchers are essentially Selectable Items OmniScripts
with a Mobile view template.
VPE 4-11: Deploying an Interaction Launcher - Page 84 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
Task 1: Add an Interaction Launcher to your Console
1.1 Add an OmniScript as a Utility Item on your Service Console toolbar.
Your team has set up a custom OmniScript that searches for Accounts to use on the console
rather than the out of the box Interaction Launcher.
a. Click Setup.
b. Select Apps > App Manager.
c. Locate the OmniStudio Console row.
d. Click the triangle to the right of that row and select Edit.
e. In the sidebar, select Utility Items (Desktop Only).

f. Click Add Utility Item.
g. From the Custom – Managed list, select Vlocity OmniScript.
h. Click the arrow button to move it down, below History.

i. Configure the properties as follows:
Property Value
Label Verify Account

Type InteractionLauncher
SubType sampleAccountSearch
Language English
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 85 VPE 4-11: Deploying an Interaction Launcher
CONFIDENTIAL
j. Click Save.
1.2 Confirm the Interaction Launcher displays in the console.
a. Go back to the OmniStudio Console and reload the page.

b. Click Verify Account and confirm the Interaction Launcher with Account Search displays.
c. In the Account Name field, enter Acme and click Next.
d. Next to Acme, click Verify.
e. Under Acme’s verification details, click Launch and confirm Acme’s detail page opens (it
does not display your FlexCards until they are linked to live data.
VPE 4-11: Deploying an Interaction Launcher - Page 86 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
Review
Confirm your understanding by answering this question.
• What is the Customer Interaction? What can it be used for?
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 87 VPE 4-11: Deploying an Interaction Launcher

VPE 4 Vlocity LWC OmniScript EG v5.0.3

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

VPE 4 Vlocity LWC OmniScript EG v5.0.3

Uploaded by

Copyright:

Available Formats

VPE 4: Successful Interactions with Vlocity

Doc Version: VPE 4 Vlocity LWC OmniScript EG v5.0.3 latest

VPE 4: Successful Interactions with Vlocity LWC OmniScript

Restrictions on Your Use

Our Proprietary Information

Representations; Warranties; Disclaimer

© 2020 Vlocity, Inc.

Document Conventions ............................................................................................................................4

Quick Setup for Vlocity Communications & Insurance Orgs ......................................................................8

Review Your Project Requirements ........................................................................................................12

VPE 4 Part 1: Working with Simple OmniScripts .....................................................................................13

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

Exercise VPE 4-2: Getting Data for an OmniScript ...................................................................................26

Exercise VPE 4-3: Ending an OmniScript ..................................................................................................32

Exercise VPE 4-3.1: Ending the Edit Contact OmniScript..........................................................................38

Exercise VPE 4-3.2: Ending the Edit Case OmniScript ..............................................................................39

VPE 4 Part 2: Working with Complex OmniScripts ..................................................................................40

Exercise VPE 4-4: Building a More Complex OmniScript ..........................................................................41

Exercise VPE 4-4.1: Design an Update Account Primary Contact OmniScript...........................................47

Exercise VPE 4-5: Adding Branching to the OmniScript ...........................................................................49

Exercise VPE 4-6: Adding a Typeahead Block ..........................................................................................54

Exercise VPE 4-7: Validating Data and Handling Errors............................................................................61

VPE 4 Part 3: Working with External Data ...............................................................................................66

Exercise VPE 4-8: Adding External Data to an OmniScript .......................................................................67

Exercise VPE 4-8.1: Adding the Weather Forecast ...................................................................................72

Exercise VPE 4-9: Adding a Warning Banner to an OmniScript ................................................................74

Exercise VPE 4-9.1: Adding Other Alert Conditions .................................................................................77

VPE 4 Part 4: Launching and Deploying OmniScripts ...............................................................................78

Exercise VPE 4-10: Launching an OmniScript with a Vlocity Action .........................................................79

Exercise VPE 4-11: Deploying an Interaction Launcher ............................................................................84

Last Revision: 3/8/21

Convention Meaning Example

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

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

Indicates additional supporting materials or online resources.

TIPS AND TRICKS | BEST PRACTICES

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

Indicates cautionary or important information.

What You Will Learn

• Build the basic structure of an OmniScript

About the Exercises

Lab exercises include:

Challenge exercises include:

There are three levels of challenge exercises:

• Reinforces the skills you learned in the lab exercises

• Is like a Level 1 Challenge

Quick Setup for Vlocity Communications & Insurance Orgs

1. Change your email address.

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

c. In the Vlocity Metadata row, on the left, click Edit.

d. Under Org Cache Allocation, enter 2.

f. Click Back to Platform Cache Partitions.

g. Click Request Trial Capacity and click OK.

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

b. In the Quick Find box, type my domain. Click My Domain.

d. Click Check Availability.

2. Deploy Your Domain.

a. Refresh the tab where the My Domain page is open.

e. Close any extra browser tabs open in the old domain.

c. In your org, go to Setup > Security > Remote Site Settings.

CMT Org Example

INS Org Example

Review Your Project Requirements

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