VPE 4 Vlocity LWC OmniScript EG v4.0.1
VPE 4 Vlocity LWC OmniScript EG v4.0.1
LWC OmniScript
Exercise Guide
Legal Notice
USE OF OUR EDUCATIONAL SERVICES, COURSES, AND TRAINING MATERIALS (COLLECTIVELY REFERED
TO AS “EDUCATIONAL SERVICES”) IS CONDITIONED UPON THE ACCEPTANCE OF THESE TERMS BY YOU
(ALSO REFERRED TO AS “PARTICIPANT”). BY DOWNLOADING, INSTALLING, OR OTHERWISE ACCESSING OR
USING THE EDUCATIONAL SERVICES, YOU AGREE THAT YOU HAVE READ, UNDERSTOOD, AND AGREE TO
BE BOUND BY THESE TERMS OF SERVICE. IF YOU DO NOT WISH TO BE BOUND BY THESE TERMS OF
SERVICE, PLEASE DISCONTINUE USE OF THE EDUCATIONAL SERVICES IMMEDIATELY.
For your review, the terms of service are available at the following URL:
https://vlocity.com/cms/resources/vlocity-university-terms-of-service-2016.pdf
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.
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.
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.
Legal Notice - Page 1 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
Table of Contents
Legal Notice............................................................................................................................................ 1
Table of Contents ................................................................................................................................... 2
Document Conventions .......................................................................................................................... 3
Preface ................................................................................................................................................... 4
Quick Setup for Vlocity Communications & Insurance Orgs .................................................................... 7
Vlocity OmniScript Overview ................................................................................................................ 10
Review Your Project Requirements ...................................................................................................... 13
VPE 4 Part 1: Working with Simple OmniScripts.................................................................................... 14
Exercise VPE 4-1: Building an OmniScript’s Structure ............................................................................ 15
Exercise VPE 4-1.1: Design and Create the Edit Contact OmniScript ...................................................... 22
Exercise VPE 4-1.2: Design and Create the Edit Case OmniScript ........................................................... 24
Exercise VPE 4-2: Getting Data for an OmniScript ................................................................................. 27
Exercise VPE 4-2.1: Getting Data for the Edit Contact OmniScript ......................................................... 31
Exercise VPE 4-2.2: Getting Data for the Edit Case OmniScript .............................................................. 32
Exercise VPE 4-3: Ending an OmniScript ................................................................................................ 33
Exercise VPE 4-3.1: Ending the Edit Contact OmniScript ........................................................................ 39
Exercise VPE 4-3.2: Ending the Edit Case OmniScript ............................................................................. 40
VPE 4 Part 2: Working with Complex OmniScripts................................................................................. 41
Exercise VPE 4-4: Building a More Complex OmniScript ........................................................................ 43
Exercise VPE 4-4.1: Design an Update Account Primary Contact OmniScript ......................................... 48
Exercise VPE 4-5: Adding Branching to the OmniScript ......................................................................... 50
Exercise VPE 4-6: Adding a Typeahead Block ........................................................................................ 54
Exercise VPE 4-7: Refining the UX of an OmniScript .............................................................................. 60
Exercise VPE 4-8: Using Functions in Set Values Elements ..................................................................... 62
VPE 4 Part 3: Working with External Data ............................................................................................. 65
Exercise VPE 4-9: Adding External Data to an OmniScript ..................................................................... 66
Exercise VPE 4-9.1: Adding the Weather Forecast ................................................................................. 71
Exercise VPE 4-10: Adding a Warning Banner to an OmniScript ............................................................ 73
Exercise VPE 4-10.1: Adding Other Alert Conditions.............................................................................. 76
Last Revision: 8/4/20
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 2 Table of Contents
CONFIDENTIAL
Document Conventions
This training material uses the following conventions.
VLOCITY SUPPORT
For questions or assistance with your Vlocity implementation, please contact Vlocity Support
or your account manager.
ADDITIONAL RESOURCES
IMPORTANT
NOTE
This is an informational note. It provides more detail and draws the reader’s attention.
Document Conventions – Page 3 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
Preface
These training exercises are based on the Winter’20 release of the Vlocity Communications & Media
application, and the Winter’20 release of the Vlocity Insurance & Health application. For additional
information about the topics covered in this module, see the https://docs.vlocity.com/en/OmniScript.html
documentation available in Vlocity Success Community at https://success.vlocity.com/s/.
Overview
This training covers the fundamental features and functionality of the Vlocity OmniScript Designer. The
module covers concepts such as OmniScript elements and common element properties, branching an
OmniScript based on what the user wants to do, error checking and validation, and adding an external
data source to OmniScripts. As you progress through this training, you complete practical, hands-on lab
exercises designed for use with the Trialforce trial org provided by Vlocity.
Prerequisites
The prerequisites for this training include a solid understanding of basic Salesforce concepts and
functionality.
• 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.
• A brief scenario that explains the use case or business need that must be met.
• A list of requirements or tasks to complete.
A Level 1 Challenge:
A Level 2 Challenge:
A Level 3 Challenge:
• Is more advanced
• Requires you to integrate several skills from different lessons together
Challenge exercises solidify what you learned in the lab exercises, build your skills, and allow you to
make mistakes—which is how you will master this application.
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.
a. In the upper right, click the “Astro” icon and then click Settings.
b. In the Details block, change the Email field to your corporate email address.
c. Scroll down and click Save. Click OK to confirm.
3. Set up My Domain.
m. Go back to the browser tab where the My Domain page is open, and refresh the tab.
n. If your domain is ready to be deployed, you will see My Domain Step 3. If you do not see this,
wait until your domain is ready.
o. Under your domain name in the middle of the page, click the Log in button to relaunch your
browser in your domain.
p. Click Deploy to Users and click Ok.
q. Close any extra browser tabs open in the old domain.
In addition to these steps, you should disable pop-up blockers for your org.
Quick Setup for Vlocity Communications & Insurance Orgs – Page 7 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
6. Grant access to your org domains to enable LWC features. Make sure you have deployed your
domain before doing this.
a. In your org in the Cards tab, right-click in the screen and select View Frame Source from the
menu to open the iframe in a new browser tab.
b. Copy your domain from the address bar. For example, copy https://ins16883--vlocity-
ins.visualforce.com.
c. In your org, go to Setup > Security > Remote Site Settings.
d. Depending on whether you are using a CMT or INS org, click Edit to open the LWC_Enable_VF
or EnableLwcVisual remote site setting.
e. Paste your domain into the Remote Site URL field and click Save.
f. Copy your lightning.force.com URL, which is visible in the address browser bar on all pages in
your org. For example, copy https://ins16883.lightning.force.com.
g. Depending on whether you are using a CMT or INS org, click Edit to open the LWC_Enable or
EnableLwc remote site setting.
h. Paste your lightning.force.com URL into the Remote Site URL field and click Save.
i. See the next page for examples of how the remote settings should be configured.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 8 Quick Setup for Vlocity Communications & Insurance Orgs
CONFIDENTIAL
Once these steps are done, your training org is ready for you to begin the lab exercises.
Quick Setup for Vlocity Communications & Insurance Orgs – Page 9 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
Forms
The user enters information and selects options. Examples are applications for renting, patient forms for a
doctor visit, or a form for submitting gas and electricity meter readings, as shown in this example.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 10 Vlocity OmniScript Overview
CONFIDENTIAL
Guided Interactions
Guided interactions typically mirror customer or business processes. For example, a customer may wish
to view their bill, choose to pay it, and select a specific way to pay it.
In the following example, the customer needs to see their insurance coverage and deductible and then
file a claim.
Often a customer interaction means the user needs to enter information and choose certain items. The
details entered and choices made determine the next options presented to the customer. For example, a
customer may complete a questionnaire about their preferences for using a mobile phone, and then
receive recommendations based on their answers.
In this example, the customer enters information and selections to see what their options are for an
insurance policy.
Vlocity OmniScript Overview – Page 11 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
The metadata structure of Vlocity OmniScript supports prototyping and building the user experience. The
data itself is separated from the metadata. Templates control the UI and branding.
The data-oriented elements of OmniScript can call DataRaptors, Integration Procedures, and use other
tools to access data from anywhere.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 12 Vlocity OmniScript Overview
CONFIDENTIAL
"As a service agent, I'd like simple guided workflows that allow me to update
some basic account, contact, and case details from the service console.
Then, for an account's primary contact, I'd like a more complex guided workflow
that provides me with options to:
- Update the contact information for the existing primary contact
- Change the primary contact to another existing contact that I can easily lookup
(and edit their contact information)
- Create a new contact and assign them as the primary contact
I'd like my data entries to be validated and to receive warnings if I make mistakes.
In the same Account Update Primary Contact guided workflow, I'd like to view weather
forecast information for the account's location and see alerts if there any hazardous weather
conditions."
As you progress through this module, you’ll complete tasks that address these requirements.
Here’s where your work on these requirements fits in with the overall solution.
Review Your Project Requirements – Page 13 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
Overview of Part 1
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 14 VPE 4 Part 1: Working with Simple OmniScripts
CONFIDENTIAL
"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.
Task Overview
Task 1: Design the Edit Account OmniScript
Task 2: Create the Edit Account OmniScript
Based on user requirements, you determine that the Edit Account OmniScript must have the following
characteristics:
VPE 4-1: Building an OmniScript’s Structure – Page 15 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
Specify the elements you need to address each requirement. Choose the elements from the tables in the
Platform Essentials Take Home Guide: LWC OmniScript Element References section. We've
organized the tables by element type.
Hint: You don’t need to review the Functions table or the Common Element Properties table for this task.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 16 VPE 4-1: Building an OmniScript’s Structure
CONFIDENTIAL
2.1 Go to the Vlocity OmniScript Designer tab and find the team/editAccount OmniScript.
The system uses the combination of type, subtype, and language to identify the OmniScript
when launching it via an action. In this example:
• Type = team
• SubType = editAccount
• Language = English
This version of the OmniScript is active, so let’s keep it intact and create a new version.
VPE 4-1: Building an OmniScript’s Structure – Page 17 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
a. Click Create Version. You can see the Version increments from 1 to 2.
b. Change the OmniScript name to Team Edit Account. This name change saves the
OmniScript automatically. (You only need to click Save to save an OmniScript when you
create it from scratch).
c. Confirm the Enable LWC checkbox is selected to allow the use of Lightning web
components.
Enabling Lightning web components generates a component tag. This can be used if you
wish to embed the OmniScript in a Lightning web component.
2.3 Explore the help tips in the Script Configuration. Next to the Reusable field, move your cursor
over the tooltip Info icon to learn about embedding an OmniScript inside another one – you can
have only one level of nesting. This means if you plan to reuse an OmniScript, it cannot have a
reusable OmniScript as part of the structure.
2.4 As you plan to build a one-step OmniScript, you should hide the step chart that displays to let
users know where they are in a sequence of steps.
a. Drag a Step element into the STRUCTURE panel. A step forms a page in an OmniScript.
b. Specify the following values for the element:
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 18 VPE 4-1: Building an OmniScript’s Structure
CONFIDENTIAL
Field Label Account Details Field Labels are what the users see at the
top of the page for each step.
Step Chart Label If you are displaying the Step Chart you can
provide a unique label for each step. As you
are hiding the Step Chart, there is no need to
fill in this field.
Validation This is selected by default. This prevents the
Required user from advancing if fields do not pass
validation. For example, if a required field is
empty.
VPE 4-1: Building an OmniScript’s Structure – Page 19 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
This element should be read-only because it will hold data coming from the Salesforce
account name (Account.Name) field. The OmniScript user should be unable to edit the name.
You can see that the fields are wider than necessary.
2.7 Use the Control Width element property to narrow the fields. Control Width settings are an
HTML web standard and have a responsive grid.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 20 VPE 4-1: Building an OmniScript’s Structure
CONFIDENTIAL
Review
Confirm your understanding by answering these questions.
VPE 4-1: Building an OmniScript’s Structure – Page 21 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
"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.
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.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 22 VPE 4-1.1: Design and Create the Edit Contact OmniScript
CONFIDENTIAL
• Use line breaks and set control widths as you see fit.
*If no value is presented, choose your own (for example, for the Labels of each element).
VPE 4-1.1: Design and Create the Edit Contact OmniScript – Page 23 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
"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.”
You determine that this OmniScript has similar characteristics to the other Edit OmniScripts, with a few
exceptions:
• The user can view but cannot edit the Case Number and Case Open Date.
• The user can select a case status from a dropdown list.
• The Subject and Status fields are required.
• Two fields display on one line, and another two fields display on a separate line.
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.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 24 VPE 4-1.2: Design and Create the Edit Case OmniScript
CONFIDENTIAL
For this challenge, you also have a reference table for Common Element Properties. You need to
consider these properties to address a couple of the requirements.
VPE 4-1.2: Design and Create the Edit Case OmniScript - Page 25 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 - Page 26 VPE 4-1.2: Design and Create the Edit Case OmniScript
CONFIDENTIAL
You need to link an Integration Procedure to the Edit Account OmniScript so you
can get account data from Salesforce. The team has already built a stub Integration
Procedure for you to use, which is called team_getAccountDetails.
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. Click PROPERTIES, and in AVAILABLE COMPONENTS, expand the Actions section.
c. Drag an Integration Procedure Action element into the STRUCTURE panel under Script
Configuration.
VPE 4-2: Getting Data for an OmniScript - Page 27 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
d. Change the Element Name and Field Label to IPGetAccountDetails. The Field Label is
not displayed in LWC Preview. However best practice with Lightning web components
enabled is to enter the name in the Field Label. This is because the field label does display in
the OmniScript Debug Console. Later, when you configure multiple integration procedures,
having descriptive labels for them will help you confirm if they are pulling and pushing the
data correctly.
1.2 Configure the Integration Procedure action to define the node in the data JSON that should be
sent to the Integration Procedure. Rename it to something the Integration Procedure will
recognize.
By default, the OmniScript sends the entire JSON to the Integration Procedure, but this procedure
only needs a Record Id for the account. This Id is stored in a variable called ContextId.
Send JSON Path ContextId This value is the node in the JSON of the OmniScript
that you send to the Integration Procedure. In this case,
you send the JSON field, ContextId.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 28 VPE 4-2: Getting Data for an OmniScript
CONFIDENTIAL
NOTE
The following properties trim the data returned to the OmniScript and rename it like the Send
JSON Path and Send JSON Node in reverse:
• Response JSON Path
• Response JSON Node
You can use the following properties to call a DataRaptor Transform for more complex data
mapping when sending data or getting data back for the Integration Procedure:
• Pre-Transform DataRaptor Interface
• Post-Transform DataRaptor Interface
d. In addition, OmniScripts have a parser that matches incoming data with the elements based
on the element name. To populate the fields in the UI, you need to change the element
names to match the input field names from the Integration Procedure by adding “Account” to
the beginning of each element name.
e. In the STRUCTURE panel, click each element and set the following values:
Name AccountName
Phone AccountPhone
Website AccountWebsite
VPE 4-2: Getting Data for an OmniScript - Page 29 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
f. Click the AccountPhone element and remove the Mask as the phone number will not
display in LWC with the mask in place.
g. Click LWC PREVIEW.
h. Notice the data from the Integration Procedure now populates the fields in the UI.
Review
Confirm your understanding by answering these questions.
• What are the advantages of using Vlocity Integration Procedures as data sources?
• What determines the JSON structure of an OmniScript?
• What does the Send JSON Path field do? What about the Send JSON Node?
• How does an OmniScript match incoming data with elements?
• Why did we remove the mask?
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 30 VPE 4-2: Getting Data for an OmniScript
CONFIDENTIAL
You need to link the Edit Contact OmniScript to an Integration Procedure so you can
get contact data from Salesforce. The team has already built a stub Integration
Procedure for you to use, which is called team/getContactDetails.
Add an Integration Procedure Action to your version of the team/editContact OmniScript with these
settings:
Setting Value
VPE 4-2.1: Getting Data for the Edit Contact OmniScript - Page 31 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
You need to link the Edit Case OmniScript to an Integration Procedure so you can get
case data from Salesforce. The team has already built a stub Integration Procedure
for you to use, which is called team_getCaseDetails.
Add an Integration Procedure Action to your version of the team/editCase OmniScript with these settings.
Setting Value
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 32 VPE 4-2.2: Getting Data for the Edit Case OmniScript
CONFIDENTIAL
You need to configure the Edit Account OmniScript so that the user can complete
the guided interaction. You will add a second Integration Procedure Action that
saves the updated account details back to Salesforce, and a Navigate Action so
the user can complete the OmniScript.
The team has already built a starter Integration Procedure for you to use, which is
called team_saveAccountDetails.
Exercise Overview
Task 1: Add an Integration Procedure Action to the Edit Account OmniScript
Task 2: Add a Navigate Action to the Edit Account OmniScript
VPE 4-3: Ending an OmniScript - Page 33 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
1.1 If not already open, open the Team Edit Account (Version 2) OmniScript.
You also need to send a RecordId to identify which Salesforce account record to update. This
data is stored in the ContextId.
1.5 Configure REMOTE PROPERTIES and extra payload to identify the variable to send to the
Integration Procedure.
a. Go to PROPERTIES and in the IPSaveAccountDetails element, expand REMOTE
PROPERTIES if needed. Under Extra Payload, click Add New Key/Value Pair.
b. Set the following values:
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.
g. Notice the request and response expected JSON output with the account name, website, and
phone data.
1.8 In the LWC PREVIEW, click {Data} and then click the Next button. If you do not see the Next
button after collapsing {Data}, this may be due to the window size, so adjust it as needed until you
can click the Next button.
1.9 In the debug console, collapse the node IPGetAccountDetails, and expand the following nodes:
- IPSaveAccountDetails
- request
- response
VPE 4-3: Ending an OmniScript - Page 35 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
1.10 Notice the request input and response expected JSON output with StepAccount.
- There is no AccountId because you’re using stub data. If you were using live data, the
AccountId would have a RecordId value.
- For the response, no value is present. This Integration Procedure only saves data, so a
response is not expected.
1.11 Close the debug console.
You use a Navigation Action to open the record page for the Salesforce object that is coded into the
ContextId by default at the end of the OmniScript (to return the user to where they started).
Navigation Action elements don’t run in LWC PREVIEW mode. You will test the Navigation action when
you run the OmniScript from a live console.
2.1 Add an element to specify where to send the user when the OmniScript finishes.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 36 VPE 4-3: Ending an OmniScript
CONFIDENTIAL
NOTES
Once you are finished with an OmniScript, you must activate it, so it is available to you
elsewhere. It isn’t available for the OS Action you created on your account Card in the Cards
module. If you return to the list view you can see the active check box is next to V2 and that
V1 is no longer active. Remember that there can only be one active version of an OmniScript
at a time!
VPE 4-3: Ending an OmniScript - Page 37 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
Review
Confirm your understanding by answering these questions.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 38 VPE 4-3: Ending an OmniScript
CONFIDENTIAL
You need to add a second Integration Procedure Action that saves the updated
contact details, and a Navigate Action so the user can complete the OmniScript.
The team has already built a starter Integration Procedure for you to use, which is
called team_saveContactDetails.
Add an Integration Procedure Action to your version of the team/editContact OmniScript with these
settings.
Setting Value
- Use the DEBUG CONSOLE to verify that the correct data is sent to the Integration
Procedure.
- Add a Navigate Action to end the OmniScript. Don’t forget to configure it correctly for the
Contact Object.
- Activate Version 2 of the OmniScript
VPE 4-3.1: Ending the Edit Contact OmniScript - Page 39 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
You need to add a second Integration Procedure Action that saves the updated case
details, and a Navigate Action so the user can complete the OmniScript.
The team has already built a starter Integration Procedure for you to use, which is
called team_saveCaseDetails.
Add an Integration Procedure Action to your version of the team/editCase OmniScript with these settings.
Setting Value
- Use the DEBUG CONSOLE to verify that the correct data is sent to the Integration
Procedure.
- Add a Navigate Action to end the OmniScript. Don’t forget to configure it correctly for the
Case Object.
- Activate Version 2 of the OmniScript
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 40 VPE 4-3.2: Ending the Edit Case OmniScript
CONFIDENTIAL
"As a service agent, I'd like simple guided workflows that allow me to update
some basic account, contact, and case details from the service console. Then, for an account’s primary
contact, I'd like a more complex guided workflow that provides me with options to:
- Update the contact information for the existing primary contact
- Change the primary contact to another existing contact that I can easily lookup
(and edit their contact information)
- Create a new contact and assign them as the primary contact
I'd like my data entries to be validated and to receive warnings if I make mistakes.
- In the same Account Update Primary Contact guided workflow, I'd like to view weather
forecast information for the account's location and see alerts if there any hazardous weather
conditions."
Overview of Part 2
VPE 4 Part 2: Working with Complex OmniScripts - Page 41 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
The two integration procedures are already configured in the Starter version of this OmniScript. You will
add the DataRaptor.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 42 VPE 4 Part 2: Working with Complex OmniScripts
CONFIDENTIAL
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.
Exercise Overview
Task 1: Edit an Update Account Primary Contact OmniScript
1.1 Open the OmniScript Team Starter Update Account Primary Contact.
a. Click Create Version. You can see the Version increments from 1 to 2.
b. For OmniScript name, delete the word “Starter” to change the OmniScript name to Team
Update Account Primary Contact.
c. Confirm the Enable LWC checkbox is selected to allow the use of Lightning web
components.
In the STRUCTURE panel, click IPGetAccountPriContactDetails. You can see this element
contains an Integration Procedure called team_getPrimaryContactDetails, which gets data
about a primary contact for a Salesforce account.
VPE 4-4: Building a More Complex OmniScript - Page 43 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
c. Click LWC PREVIEW to see how these blocks currently look in PREVIEW mode. Note the
Step Chart isn’t hidden in this OmniScript because you will add instructions to the users that
display there.
1.4 Add some instructions to help guide the user through the interaction. It’s best practice to ensure
instructions are clear, concise, and complement the existing information in the UI.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 44 VPE 4-4: Building a More Complex OmniScript
CONFIDENTIAL
NOTE
If you do not see the rich-text editor, exit the OmniScript and open it up again or refresh your
screen.
You can copy the text or add instructions in your local language.
If you leave the Step Chart Label field blank, the system will display the value in the
Field Label field by default. You only need to use the Step Chart Label field if you
wish to display an alternate label.
NOTE
VPE 4-4: Building a More Complex OmniScript - Page 45 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
1.5 Make the Primary Contact Name read-only. This field corresponds to an un-editable field in
Salesforce, so it should be read-only.
a. Click the BlkUpdatePriContact block. In LWC PREVIEW mode, this block includes stub
details about the current primary contact for the account.
b. Click the UpdateName element.
c. Select the following options:
• Read Only
d. Click LWC PREVIEW. Notice the field value is no longer editable because the Primary
Contact Name is read-only.
NOTE
The Text2 field will display the ContactId, which is the RecordId for the primary contact.
Keeping the RecordId in the same block of the OmniScript when you update that contact’s
details and save the changes back to Salesforce will make your life as a developer much
easier. However, the RecordId has no purpose for the end-user. Therefore, you should hide
the RecordId from the UI.
1.6 Configure the BlkUpdatePriContact block to hide the RecordId so that it is not visible in the UI.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 46 VPE 4-4: Building a More Complex OmniScript
CONFIDENTIAL
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.
Review
Confirm your understanding by answering these questions.
• Why should you not let a user edit the Name field from a Salesforce contact record?
• Describe some of the ways you can change the UI of OmniScript elements?
• How is a Salesforce record uniquely identified?
• What variable identifies the context of an OmniScript?
VPE 4-4: Building a More Complex OmniScript - Page 47 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
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.
Choose from the tables in the Platform Essentials Take Home Guide: LWC OmniScript Element
References section.
• For the Change primary contact option, the user can start typing in a field to display the contact's
name and email address, and they can edit the email address if necessary.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 48 VPE 4-4.1: Design an Update Account Primary Contact
OmniScript
CONFIDENTIAL
Which Elements Do You Need for “Change the primary contact to another existing contact”?
VPE 4-4.1: Design an Update Account Primary Contact OmniScript - Page 49 VPE 4: Successful Interactions with Vlocity LWC
OmniScript
CONFIDENTIAL
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.
Exercise Overview
Task 1: Add Conditional Branching to an OmniScript
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)
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 50 VPE 4-5: Adding Branching to the OmniScript
CONFIDENTIAL
e. In the OPTIONS section, add three options with the following values and labels for the
associated variables in the OmniScript JSON.
Value Label
f. Click LWC PREVIEW. Notice the options you added are now radio buttons for choosing a
branching.
1.2 Configure a way for the value of the Radio element to control which block to display.
VPE 4-5: Adding Branching to the OmniScript - Page 51 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
TIP
You can think of this option as “Show element if true”, which is easier to think about when
defining Boolean logic for the condition.
TIP
You might need to clear data here if this option is already selected.
1.3 Set the display condition for the next block in the step: BlkChangePriContact.
a. In the STRUCTURE panel, click BlkChangePriContact. You’ll add elements to this block in
a later exercise.
b. Under CONDITIONAL VIEW, click Add Condition.
c. For Enter the field name select RadioPriContact.
d. Confirm that Is Equal To is selected.
e. For Enter the value, type or paste Change.
1.4 Set the display condition for the last block in the step: BlkCreatePriContact.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 52 VPE 4-5: Adding Branching to the OmniScript
CONFIDENTIAL
1.5 Click LWC PREVIEW. Because no options are selected, no fields are displayed. (If you see data,
click {Data} and Update).
1.6 Select Update primary contact and notice the primary contact fields are displayed.
BEST PRACTICE
When designing guided workflows, consider showing options for the most common use case
by default (if it will not result in end-users skipping a step). In this case, the most common use
case is to update primary contact details.
Review
Confirm your understanding by answering these questions.
• If an element has a conditional view, what setting do you need for that element to populate?
• Which OmniScript elements allow users to make selections from a given set of options? What are the
differences between these?
• What are some best-practice guidelines for building OmniScripts with conditional views?
VPE 4-5: Adding Branching to the OmniScript - Page 53 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
Exercise Overview
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.2 Configure a data source for the Type Ahead block. A stub DataRaptor Extract is already available
for you to use.
VPE 4-6: Adding a Typeahead Block - Page 55 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
As with an Integration Procedure, you need to add some input parameters to send data to the
DataRaptor. This DataRaptor only needs to look for contacts associated with this account.
Input parameters are comprised of a data source and a filter value. The data source specifies the
OmniScript element or JSON node that will be passed to the DataRaptor, and the filter value
renames it to a name that the DataRaptor expects. In this example, the first input parameter will
pass the AccountId to the DataRaptor to filter the search to the account's contacts. The second
input parameter will send the text that the user types in to the DataRaptor as the lookup key.
ContextId AccountId
TAChangeContact LookupKey
The first value limits the search to the contacts already associated with this account. The
second sends what the user types into the Type Ahead field.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 56 VPE 4-6: Adding a Typeahead Block
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.
VPE 4-6: Adding a Typeahead Block - Page 57 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
1.6 Add two more fields to this Type Ahead Block to store and view the data returned from the
DataRaptor.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 58 VPE 4-6: Adding a Typeahead Block
CONFIDENTIAL
e. Change the Element Name to ChangeContactId. This specifies where to store the
RecordId for the contact returned by the DataRaptor. Next, you should hide this field from the
UI.
f. Click Edit as JSON.
g. Change the hide value to true. Be sure to use all lowercase.
h. Click Edit in Property Editor.
i. Click LWC PREVIEW.
j. Click Edit (the pencil in the start typing field).
Review
Confirm your understanding by answering these questions.
• What are the three elements that need to be configured for a Type Ahead Block to work?
• What three OmniScript elements can be a data source for a Type Ahead Block?
• Where do you configure what data is displayed in the Type Ahead dropdown?
• What JSON node contains the text that the user types into a Type Ahead Block?
VPE 4-6: Adding a Typeahead Block - Page 59 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
A best practice is to design and build OmniScripts that require as little user input as
possible. To this end, you refine the OmniScript to remove extra steps for the user and
simplify the UI.
Exercise Overview
Task 1: Refine the UI
1.1 Notice two options in the Team Update Account Primary Contact PREVIEW.
- The Edit button, which the user must click to display the CONTACT EMAIL field for editing.
- The type-ahead field dropdown list, which shows a New option for adding a new contact.
In this scenario, removing these options means fewer clicks for the user.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 60 VPE 4-7: Refining the UX of an OmniScript
CONFIDENTIAL
1.3 Select Add new primary contact to view the associated fields.
a. Leave the fields empty and click Next. The OmniScript displays an error under each field due
to the missing field data. At least one field must be set to Required for the error message to
display.
b. In the STRUCTURE panel, click the StepContacts element.
c. Notice that Validation Required is selected. This option is enabled by default and specifies
that the OmniScript perform simple error checking for this step. Disable this option only if you
want to prevent the OmniScript from enforcing error checking for the step.
Review
Confirm your understanding by answering these questions.
VPE 4-7: Refining the UX of an OmniScript - Page 61 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
The time has come to start thinking about what kind of errors a user might make when
completing this OmniScript, and any simple error checking you can do to avoid them
making these mistakes. You’ll start by simulating a system error, and work from there.
Exercise Overview
Task 1: Add a Function to a Set Values Element
1.2 Add a condition that if the UpdateName is blank, you hide the Email field.
By leaving the field blank you are checking for a null value for the UpdateName.
VPE 4-8: Using Functions in Set Values Elements - Page 62 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
d. Notice the email field is no longer displayed. However, if the user clicks Next, they go to the
end of the OmniScript without having completed any actions.
You can copy this expression from your OmniScript in the Navigate Action Internal Notes field
near the bottom of the properties panel. If you paste the expression into the Value field rather
than pasting it into the EXPRESSION EDITOR (after you click fx), it will not work because "="
doesn’t prepend the formula. There must be an "=" before the formula for it to be correctly
evaluated.
i. Click Ok.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 63 VPE 4-8: Using Functions in Set Values Elements
CONFIDENTIAL
d. Click Update.
e. Select Change primary contact, and type “h”.
f. Chose Place Holder, then click Next.
g. Notice in the JSON code “SVErrorCheck”: “OK”.
Review
Confirm your understanding by answering these questions.
• What is a “Sad path”? In this exercise, how did you simulate one?
• What options are there for creating complex logical conditions in an OmniScript? What are
advantages and disadvantages for each?
VPE 4-8: Using Functions in Set Values Elements - Page 64 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
"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:
I'd like my data entries to be validated and to receive warnings if I make mistakes.
In the Account Update Primary Contact guided workflow, I'd like to view weather forecast
information for the account's location and see alerts if there any hazardous weather conditions."
Overview of Part 4
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 65 VPE 4 Part 3: Working with External Data
CONFIDENTIAL
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.
Exercise Overview
Task 1: Add the Current Weather
b. Click Create Version and make sure the version number increments up.
VPE 4-9: Adding External Data to an OmniScript - Page 66 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
Remember you need to send two pieces of information for when you have live data:
Property Value
f. Under Extra Payload, click Add New Key/Value Pair. The key is the name of the variable to
send to the Integration Procedure.
g. For the key, type Days, and for the value, type 2 to specify a fixed value.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 67 VPE 4-9: Adding External Data to an OmniScript
CONFIDENTIAL
• A “Forecast” node, which has an array of data showing multiple forecast days.
Because this is a stub Integration Procedure it always returns five days of data.
• A “Current” node, which has a set of sub-nodes providing data for temperature,
condition, and city/state.
• “CurrentIcon” and “ForecastIcon” nodes in the root with icon links. These link to
an image on the API website, which you display in the OmniScript.
e. Close the OMNISCRIPT DEBUG CONSOLE.
1.4 Add an element that displays the weather data in the OmniScript.
NOTE
A Text Block is a rich-text formatted HTML code block. You can expand the editing
workspace using the bottom-right down-arrow icon.
d. In the text editor, from the Table dropdown menu, click Insert table, and add a 2 x 2 table.
e. Grab the lower-right corner of the table to drag and expand the table to approximately 300 x
100.
f. Add the following text to the cells (use the temp format of your choice):
To display degree symbol: Mac – use shift+option+8, PC – use ASCII code 0176
The table should match the image below (with temp format of your choice):
VPE 4-9: Adding External Data to an OmniScript - Page 68 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
g. In the second row of the first column place the curser at the far left, click Insert, choose
Insert/edit image, and set the following values in the modal:
Property Value
Source https://%CurrentIcon%
Image description Current Icon
Dimensions 64 x 64
h. Click Ok.
i. The table should match the image below (with temp format of your choice):
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 69 VPE 4-9: Adding External Data to an OmniScript
CONFIDENTIAL
Review
Confirm your understanding by answering these questions.
• What are some examples of data that a service agent could find useful in a guided interaction that is
not in Salesforce?
• What is the merge field syntax for JSON sub nodes in OmniScripts?
• Which OmniScript element is basically a rich-text formatted HTML code block?
• How can you expand the editing workspace of the OmniScript rich-text editor?
VPE 4-9: Adding External Data to an OmniScript - Page 70 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
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%
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 71 VPE 4-9.1: Adding the Weather Forecast
CONFIDENTIAL
VPE 4-9.1: Adding the Weather Forecast - Page 72 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
The service agent wants to see any weather warnings clearly in the UI for the location
of the contact they are working with. You determine you will use a messaging function
to add a weather warning banner to the OmniScript.
A Messaging function:
• Uses a logical expression to determine whether to display a message banner.
• Can display two different messages based on whether the condition is true or
false.
Task Overview
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.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 73 VPE 4-10: Adding a Warning Banner to an OmniScript
CONFIDENTIAL
The following table shows the banner types available for true and false conditions.
IMPORTANT
If you have Requirement for the active false statement, it means the element is required. The
user cannot progress to the next step in the OmniScript until this condition is true.
You can also deactivate either message using the options shown below.
f. Under Messages, for true, select Warning to display a Warning message if the condition is
true.
g. For the true Message, add the following merge field that shows the alert condition:
h. For the false Message, uncheck Active because we are not using it.
VPE 4-10: Adding a Warning Banner to an OmniScript - Page 74 VPE 4: Successful Interactions with Vlocity LWC OmniScript
CONFIDENTIAL
1.3 Activate this version of the OmniScript to make it available for use.
Review
Confirm your understanding by answering these questions.
VPE 4: Successful Interactions with Vlocity LWC OmniScript - Page 75 VPE 4-10: Adding a Warning Banner to an OmniScript
CONFIDENTIAL
• Add the following conditions to the Validate Expression of your Messaging element: Thunderstorm
with Hail and Freezing Fog.
• What Boolean logic should you use multiple conditions, AND or OR?
VPE 4-10.1: Adding Other Alert Conditions - Page 76 VPE 4: Successful Interactions with Vlocity LWC OmniScript