Vlocity OmniStudio Documentation

OmniStudio
Copyright 2021 Vlocity LLC, a Salesforce company. All rights reserved. Information in this document is subject to change without
notice. This documentation and the software, tools, templates and other material described in this document (“Vlocity Materials”) are
furnished exclusively under a subscription services agreement or nondisclosure agreement. The Vlocity Materials may be used or
copied only in accordance with the terms of those agreements. No part of the Vlocity Materials may be reproduced, stored in a
retrieval system, or transmitted in any form or any means electronic or mechanical, including photocopying or recording for any
purpose other than the licensee’s personal use as set forth in the applicable agreement without the prior written permission of Vlocity
LLC. Vlocity is a trademark of Vlocity LLC, a Salesforce company, as are other names and marks. Other marks appearing herein may
be trademarks of their respective owners.
OmniStudio
Table of Contents
OmniStudio ................................................................................................................................ 1
OmniStudio Basics ..................................................................................................................... 2

What's New in OmniStudio .................................................................................................. 2
OmniStudio Enhancements, Vlocity Health and Insurance Spring '21 ............................. 2
Vlocity Insurance and Health Summer '20 and Vlocity CME Fall '20 ............................... 8
Vlocity Insurance and Health Spring '20 ...................................................................... 14
Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20 ............................. 19
Vlocity Insurance and Health Summer '19 and Vlocity Communications, Media, and
Energy Fall '19 Releases ............................................................................................ 24
Vlocity Insurance and Vlocity Health Spring '19 Release .............................................. 25
Vlocity Insurance and Vlocity Health Winter '19 Release .............................................. 26
Salesforce Newbie? ........................................................................................................... 26
Meeting Industry Challenges with OmniStudio Apps ............................................................. 26
Meeting Customer Service Challenges with Vlocity OmniScripts ................................... 26
Meeting Customer Context Challenges with Vlocity Cards Framework .......................... 27
Meeting Data Challenges with Vlocity DataRaptors ...................................................... 27
Using The Applications Together ......................................................................................... 27
OmniScript Basics ............................................................................................................. 28
Vlocity Cards Framework Basics ......................................................................................... 30
Customer Context ...................................................................................................... 30
Designer ................................................................................................................... 31
Cards ........................................................................................................................ 31
Design and Layout ..................................................................................................... 32
Data Sources ............................................................................................................ 32
Customizable Style Guide for Newport Design System ......................................................... 32
About the Newport Design System .............................................................................. 32
DataRaptor Basics ............................................................................................................. 33
Service Console Basics ...................................................................................................... 34
Vlocity User Interaction Tools ...................................................................................................... 36

Vlocity Lightning Web Components ..................................................................................... 36
Vlocity Lightning Web Components Reference ............................................................ 36
Set Up Lightning Web Components ............................................................................ 36
Extend Vlocity Lightning Web Components ................................................................. 37
Deploy Lightning Web Components ............................................................................ 39
Launch Lightning Web Component URLs with vlocityLWCWrapper ............................... 39
Access Actions in a Lightning Page with the Power Launcher Component ..................... 41
Base Vlocity LWC ReadMe Reference ........................................................................ 43
OmniScripts .................................................................................................................... 302
LWC OmniScripts .................................................................................................... 302
© 2021 Vlocity LLC, a Salesforce

company
OmniStudio
Classic OmniScript Designer .................................................................................... 956

OmniScript Best Practices ........................................................................................ 966
Create Multi-Language OmniScripts .......................................................................... 967
Advanced Configuration for OmniScript Form Elements ............................................. 985
Configuring OmniScript Styling and UI Behavior ...................................................... 1005
OmniScript Data and External Integrations .............................................................. 1038
Administering, Deploying, and Launching OmniScripts ............................................. 1091
OmniScript Element Reference ............................................................................... 1134
Vlocity Cards Framework ............................................................................................... 1266
Classic Card Designer ........................................................................................... 1267
FlexCard Designer ................................................................................................. 1268
Getting Started with the Vlocity Cards Framework .................................................... 1268
FlexCards ............................................................................................................. 1268
Classic Cards ........................................................................................................ 1451
Backward Compatibility Support for Passing Page Params ....................................... 1679
Vlocity Cards Framework Caching .......................................................................... 1679
Enable and Disable Data Sources ........................................................................... 1683
Building a Vlocity Service Console App ................................................................... 1687
Vlocity Customer Story ........................................................................................... 1713
Vlocity Actions ............................................................................................................... 1724
Configure a Vlocity Action ...................................................................................... 1724
Update Filter Logic for Vlocity Actions ..................................................................... 1728
Update Profile Settings for Contract Actions ............................................................ 1729
Update the Link Type for an Action ......................................................................... 1730
Target URL and URL Parameters ........................................................................... 1731
Display Vlocity Actions with the Vlocity Action Toolbar .............................................. 1734
Vlocity Conversation UI .................................................................................................. 1736
Creating the Conversation UI .................................................................................. 1736
Deploying the Conversation UI ............................................................................... 1740
Customizing Vlocity Conversation UI ....................................................................... 1743
OmniForm ..................................................................................................................... 1745
Creating an OmniForm for Integration Procedure's OmniForm Action ........................ 1746
Creating a Standalone OmniForm ........................................................................... 1747
Prefilling an OmniForm .......................................................................................... 1754
Submitting OmniForm Data .................................................................................... 1758
Customizing OmniForm using Data JSON Attributes ................................................ 1761
OmniForm Buttons ................................................................................................. 1763
OmniForm Elements .............................................................................................. 1763
Vlocity Interaction Launcher ........................................................................................... 1764
Create a Vlocity Interaction Launcher ...................................................................... 1767
Update the Layout of an Interaction Launcher .......................................................... 1772
Create a Customer Interaction Record With DataRaptor ........................................... 1776
Add a Vlocity Action to an Interaction Launcher Search Widget ................................ 1777
Set Up the Vlocity Interaction Console .................................................................... 1779
Create a Class-based Interaction Launcher ............................................................. 1780
Create an OmniScript-Based Interaction Launcher ................................................... 1786

company
OmniStudio
Download and Install an Interaction Launcher DataPack .......................................... 1787

Verify Caller Identity in an Interaction Launcher ....................................................... 1789
Add the Vlocity Interaction Launcher to a Console App ............................................. 1790
Accessing Actions and Manage Interactions with the Vlocity Interaction Wrapper ....... 1792
Configure a Secondary Search in an Interaction Launcher ........................................ 1794
View Actions Related to an Interaction Launcher Search Widget ............................... 1796
Vlocity Data Tools .................................................................................................................. 1798

DataRaptors .................................................................................................................. 1798
DataRaptor Turbo Extract Overview ........................................................................ 1799
DataRaptor Extract Overview ................................................................................. 1804
DataRaptor Transform Overview ............................................................................. 1827
DataRaptor Load Overview .................................................................................... 1834
DataRaptor Best Practices ..................................................................................... 1846
List Input for DataRaptors ....................................................................................... 1846
Use Formulas in DataRaptors ................................................................................. 1848
DataRaptor Output Data Types ............................................................................... 1851
DataRaptor Developer Features ............................................................................. 1852
DataRaptor Administration ..................................................................................... 1863
Cache for DataRaptors and Integration Procedures ................................................. 1865
Security for DataRaptors and Integration Procedures ............................................... 1867
Integration Procedures ................................................................................................... 1871
See Also ............................................................................................................... 1872
Create an Integration Procedure ............................................................................. 1872
Group Integration Procedure Steps Using Blocks ..................................................... 1874
Integration Procedure Actions ................................................................................. 1902
Integration Procedure Best Practices ...................................................................... 1962
Cache for DataRaptors and Integration Procedures ................................................. 1963
Error Handling in Integration Procedures ................................................................. 1970
Environment Variables in DataRaptors and Integration Procedures ........................... 1973
External Objects in Integration Procedures .............................................................. 1974
Test Procedures: Integration Procedures for Unit Testing .......................................... 1977
Integration Procedure Invocation ............................................................................ 1982
Settings for Long-Running Integration Procedures ................................................... 1996
Continuation in Long-Running Calls ........................................................................ 2002
Security for DataRaptors and Integration Procedures ............................................... 2008
Add Integration Procedure Components to an Upgraded Org ................................... 2013
New Integration Procedure Components by Release ............................................... 2015
DataRaptor or Integration Procedure? ............................................................................. 2015
See Also ............................................................................................................... 2016
Calculation Procedures and Matrices .............................................................................. 2016
Calculation Example for Life Insurance Quote .......................................................... 2017
Calculation Matrices ............................................................................................... 2018
Calculation Procedures Overview ........................................................................... 2041

company
OmniStudio
Declarative Calculation Procedures ......................................................................... 2046

Vlocity Intelligence ......................................................................................................... 2063
Get Started with Vlocity Intelligence ........................................................................ 2064
Add Profile Attributes ............................................................................................. 2068
Create a Vlocity Intelligence Machine ...................................................................... 2071
Add Attributes Automatically Using Attribute Assignment Rules ................................ 2072
Advanced Vlocity Intelligence Topics ....................................................................... 2075
Formulas and Functions ................................................................................................. 2076
Formula Overview .................................................................................................. 2077
Use Formulas in DataRaptors ................................................................................. 2077
Formula Syntax for Insurance Rules ....................................................................... 2078
Function Reference ............................................................................................... 2079
Workflow for Creating Custom Functions ................................................................. 2111
Vlocity Tracking Service ................................................................................................. 2115
Enable Tracking for Vlocity Components ................................................................. 2116
Vlocity Components Event Tracking ........................................................................ 2117
Vlocity OmniAnalytics Event Tracking ..................................................................... 2118
OmniScript Event Tracking ..................................................................................... 2119
Integration Procedure Event Tracking ..................................................................... 2120
Cards Framework Event Tracking ........................................................................... 2123
Vlocity Intelligence Event Tracking .......................................................................... 2125
Event Tracking for Custom Fields ........................................................................... 2125
Tracking Session Interaction Id ............................................................................... 2126
Tracking Data Preprocessor ................................................................................... 2126
Vlocity Lightning App and Community Builder Components Reference ...................................... 2128

company
OmniStudio
OmniStudio
OmniStudio is a set of services, components, and data model objects used to create Vlocity Industry Cloud
Apps. Take a quick tour of the important components: Vlocity Guided Interaction Platform.
OmniStudio enables you to create guided interactions using data from your Salesforce org and external
sources. This section explains how to create OmniScripts, which contain the interaction logic; DataRaptors,
which transfer data between OmniScripts and Salesforce; Integration Procedures, which bundle server-side
operations for efficiency and reuse; and the Cards Framework, which displays data and launches actions.

company 1
OmniStudio
OmniStudio Basics
This section introduces the basic building blocks of OmniStudio that you use to build Vlocity Service
Consoles and Vlocity Industry Cloud Apps.
What's New in OmniStudio

This page contains new enhancements and features for recent Vlocity releases.
OmniStudio Enhancements, Vlocity Health and Insurance Spring '21

This section summarizes the OmniStudio features and enhancements for the Vlocity Insurance and Health
Insurance Vlocity Health and Insurance Spring '21 package.
Hello OmniStudio, Farewell Vlocity Digital Interaction Platform

As part of Vlocity's integration into Salesforce, the Vlocity Digital Interaction Platform is now called
OmniStudio. Most of the names of the tools within the OmniStudio suite have changed accordingly.
The terminology change does not affect how your products work. Nothing at the data level, such as
DataPacks or objects, has changed.
Here’s a quick summary of the key terminology changes.
WE USED TO SAY... NOW WE SAY...

Vlocity Digital Interaction Platform OmniStudio
Vlocity OmniScripts OmniScripts
Vlocity DataRaptors OmniStudio DataRaptors
Integration Procedures OmniStudio Integration Procedures
FlexCards OmniStudio FlexCards
Vlocity Calculation Procedures OmniStudio Calculation Procedures
Vlocity Calculation Matrices OmniStudio Matrices
Vlocity DataPacks OmniStudio DataPacks
Vlocity DX IDX CLI or IDX Workbench
Vlocity Industry Console OmniStudio Industry Console
Vlocity LWC OmniStudio LWC
Vlocity Interaction Launcher OmniStudio Interaction Launcher
Vlocity OmniAnalytics OmniAnalytics
The name changes are not yet integrated into our documentation.
OmniStudio FlexCards
Download FlexCard LWCs from the FlexCard Designer. Get notified when you need to grant access to your
org domains. Control the format of the date, time, and currency on a Field element. Control the proportions
of your Chart element. Generate unmanaged versions of managed components in the FlexCard Designer.
Limit user access to FlexCards and Apex classes.

company 2
OmniStudio
Download FlexCard LWCs

Download both on and off-platform FlexCard LWCs.
Where: Available in Spring '21 and later releases.
Why: Download FlexCard LWCs to debug and inspect issues.
How: From the FlexCard Designer submenu, click the down arrow next to Activate, and click Download
LWC or Download Off-Platform LWC.
What's Next
• Download a FlexCard LWC from the FlexCard Designer.

• Download an Off-Platform FlexCard LWC from the FlexCard Designer.
View Notification to Update Remote Site Settings

Get notified when your Remote Site Settings need an update to grant access to your org domains to enable
LWC features such as Preview.
Why: When spinning a new org or new installation, the Tooling API calls necessary for LWC may fail if the
Remote Site Settings page in your org does not include the URLs required. A Warnings button alerts you
that your org's lightning.force.com URL and the visualforce.com URL of the Visualforce page that contains
the FlexCard Designer are missing in the Remote Site Settings.
How: Click the Warnings button on the OmniStudio FlexCards home page. Copy the two URLs provided.
In Setup > Security > Remote Site Settings, create a new Remote Site for each URL.
What's Next
Update Remote Site Settings to Preview Your FlexCard
Use User Locale to Format the Field Element

Use the logged-in user's locale to format the date, time, and currency on a Field element.
Why: By default, the FlexCard Author's user locale determines the format. If your FlexCard is used on an
application accessible across different locales, enable Use User Locale For Formatting to use the logged-
in user's locale to determine the format of your date, time, and currency.
How: Check the Use User Locale For Formatting checkbox in the Properties panel when you select a
Field element.
What's Next
Add a Field to a FlexCard

company 3
OmniStudio
Use an Absolute Date on a Field Element

Prevent converting the date based on the timezone when you update the Format property of a Field
element.
How: When Date is selected for Field Type, check the Use Absolute Date checkbox.
What's Next
Set a Chart Element's Aspect Ratio or Height

Adjust the proportions of a Chart element with the Aspect Ratio, Maintain Aspect Ratio, and Chart
Height features in the FlexCard Designer.
Why: By default, the aspect ratio of a Chart element is 1, such as 1:1. The chart width is always the
maximum width available given the number of columns it spans on the 12-column grid of the canvas in the
designer. Increase the aspect ratio to make your chart smaller or decrease it to make it taller. Maintain the
aspect ratio to set fixed proportions. Set a fixed height to override the aspect ratio entirely.
How: Add a Chart element to your FlexCard in the FlexCard Designer. In the Properties panel, update the
Aspect Ratio to a whole number or a decimal, and if needed, select the Maintain Aspect Ratio checkbox.
To override the aspect ratio, enter a number in the Chart Height field.
What's Next
FlexCard Chart Element Aspect Ratio
See Also
• Add a Chart to a FlexCard
Add an Apex Class Permissions Checker

Configure an Apex class permissions checker to require that users have explicit access to Apex classes
that administer remote actions called from FlexCards or Classic Cards (Vlocity Cards).
How: In Setup, go to Custom Settings > General Settings > Manage to create the ApexClassCheck with a
Value of true.
What's Next
Adding an Apex Class Permissions Checker

company 4
OmniStudio
Limit User Acces to a FlexCard or Classic Card in a Managed Package

For managed packages, you must add the vlocityRequiredPermissionCheck Apex class to use the
FlexCard and Classic Card Designers' Required Permissions feature to limit user access based on
custom permissions.
How: From Setup > Apex Classes, click New, and enter the code for the
vlocityRequiredPermissionCheck Apex class provided in the topics in the What's Next section on
this page.
What's Next
Limit User Access to a FlexCard with Custom Permissions
Limit User Access to a Card Layout in a Managed Package
Classic Cards
Limit user access to Classic Cards (Vlocity Cards) and Apex classes.
Add an Apex Class Permissions Checker

Configure an Apex class permissions checker to require that users have explicit access to Apex classes
that administer remote actions called from FlexCards or Classic Cards (Vlocity Cards).
How: In Setup, go to Custom Settings > General Settings > Manage to create the ApexClassCheck with a
Value of true.
What's Next
Limit User Acces to a FlexCard or Classic Card in a Managed Package

For managed packages, you must add the vlocityRequiredPermissionCheck Apex class to use the
FlexCard and Classic Card Designers' Required Permissions feature to limit user access based on
custom permissions.
How: From Setup > Apex Classes, click New, and enter the code for the
vlocityRequiredPermissionCheck Apex class provided in the topics in the What's Next section on
this page.
What's Next

company 5
OmniStudio
OmniScripts
Run OmniScripts through Adobe Experience Manager, and enable users to restart an OmniScript.
Deploy OmniScripts to Adobe Experience Manager

Host OmniScripts on your external Adobe Experience Manager application using LWC OmniOut.
Where: Available in Vlocity Health and Insurance Spring '21 and later releases.
Why: Add powerful, easy-to-use OmniScript forms to an existing Adobe Experience Manager server.
How: Download the LWC OmniOut Static Resource, and add your AEM credentials to the ./
aem.ui.apps/pom.xml file. Deploy LWC OmniOut to your server and add the Vlocity LWC OmniOut
component to an AEM page.
What's Next
Add OmniScripts to Adobe Experience Manager
See Also
• Run LWC OmniScripts Outside of Salesforce with LWC OmniOut

• Download the LWC OmniOut Static Resource
• Run OmniOut in Development Mode
Restart OmniScripts
Enable users to restart an OmniScript using the Navigate Action's Restart OmniScript target type.
Why: Provide users with an option to start over or conditionally perform a restart between steps if a critical
error occurs.
How: From a Navigate Action's properties panel, click Edit Properties As JSON. Locate the
"targetType" JSON Node. Set the value for "targetType" to "Restart OmniScript". The node
should read "targetType": "Restart OmniScript". Return to your OmniScript and test the
functionality.
What's Next
Restart an OmniScript
See Also
• Navigate Action
• Navigate Action Properties
Formulas and Functions

Filter list items with |n syntax and use the MAXSTRING and CustomFunction functions.

company 6
OmniStudio
List Items with |n Syntax in Formulas

List items with |n syntax are supported in formulas that filter lists.
Who: Salesforce administrators use functions within formulas in DataRaptors and Integration Procedures.
Why: If the list item you want to filter on is at a known position in the list, you can reference that position in
your filtering function.
How: Use a list item with |n syntax in any function that accepts a list.
See Also
• List Input for DataRaptors

• Function Reference
MAXSTRING Function
The MAXSTRING function returns the last string alphabetically. For example,
MAXSTRING("Amy","Ziggy") returns "Ziggy". The MAX function no longer works for Strings.
See Also
Function Reference
CustomFunction Function
Creating a custom function no longer requires creating metadata. Just create an Apex class and call the
function with CustomFunction('ClassName.MethodName',input).
Why: Creating metadata for a custom function is no longer necessary, which makes implementing custom
functions more efficient.
See Also
• Sample Apex Code for a Custom Function
• List Input in Custom Functions
IDX Workbench
Migrated OmniScripts and Integration Procedures are activated automatically.

company 7
OmniStudio
ParentInteractionToken in Integration Procedure Tracking Entry

A Vlocity Tracking Entry written by an Integration Procedure includes the ParentInteractionToken, which is
the VlocityInteractionToken from the calling OmniScript or parent Integration Procedure.
Who: Salesforce administrators use the Tracking Service to monitor the performance of OmniStudio
components.
Why: You can see how a tracked Integration Procedure was invoked.
How: The ParentInteractionToken is automatically included when you enable the Tracking Service and
configure it to track Integration Procedures.
See Also
Integration Procedure Event Tracking
OmniStudio Tracking Service

A Tracking Entry for an Integration Procedure references the OmniScript or Integration Procedure that
invoked it.
Automatic OmniScript and Integration Procedure Activation

OmniScripts and Integration Procedures migrated using IDX Workbench are automatically activated in the
target org.
Who: Salesforce administrators use IDX Workbench to migrate objects between orgs and Git repositories.
Why: You no longer need to activate migrated OmniScripts and Integration Procedures individually.
How: On Chrome this happens by default. If you use a browser other than Chrome, you must perform a
one-time setup of this activation.
See Also
Configure LWC OmniScript and FlexCard Activation and Compilation
Vlocity Insurance and Health Summer '20 and Vlocity CME Fall '20
This section summarizes the OmniStudio features and enhancements for the Vlocity Insurance and Health
Summer '20 and Vlocity CME Fall '20 releases.
FlexCard Designer
• With the FlexCard Designer, preview while you build dynamic, context-aware user experiences using a
drag and drop interface with WYSIWYG editing. Step through a configuration wizard to create a configure
basic settings and a data source for a FlexCard. Drag elements onto a Canvas, style elements using
design interfaces and custom CSS, and enable responsiveness. The FlexCard Designer is built with the

company 8
OmniStudio
Salesforce Lightning Web Component programming model. See FlexCard Designer. For changes and
enhancements, see FlexCard Designer Changes and Enhancements.
• Find context-sensitive help specific to an element or property using the FlexCard Designer's in-product
help tray feature. View specific field information by hovering over tooltips that appear next to properties.
Vlocity Cards
• View a sample APEX Class for getting Einstein NBA offers for a card. See IndustryNBA Class.
• When passing a parameter to a page in Lightning you must use a namespace prefix. For backward
compatibility, an Angular card inside the aura wrapper can read the parameters with both c__ and no
prefix. See Backward Compatibility Support for Passing Page Params.
• New "Action" picklist added to the Interaction Topic object with seed values "Discussed", "Created", and
"Resolved", and the option to add additional values to the picklist.
• Two record types, Classic and Flex, added to the VlocityCard__c Data Model. The default is Classic. 'Is
Child Card' checkbox filters child cards from parent cards.
LWC Cards
Target Parameters added to 'Community Named Page' and 'Named Page' Target Types on a Custom
Action. Target Names updated for all Target Types. See Adding a Custom Action to an LWC Card.
Vlocity Lightning Web Components

• The Datatable LWC cell title is customizable with the "field-label" and "field-title" properties of the
OutputField LWC. See OutputField Lightning Web Component ReadMe.
• Tracking fields added to the Interaction Wrapper LWC. See InteractionWrapper Lightning Web
Component ReadMe.
• The Interaction Wrapper LWC listens to pubsub events fired by FlexCards, triggers the Create Interaction
IP on load, and the Create Topic IP on event received. See InteractionWrapper Lightning Web
Component ReadMe.
• In the DataTable LWC, select 'icon' as a Type attribute value to display a check icon for a boolean value
that returns true. See DataTable Lightning Web Component ReadMe.
• Additional customizable attributes added to the DataTable LWC, such as user-selectable-row, active-
groups, hideExtraColumn, sortAcrossGroup, fireeventOnDeleteconfirm groupNameWrapperClass, style,
and preventNavigation. See DataTable Lightning Web Component ReadMe.
• Display an available image with the Img LWC. See Img Lightning Web Component ReadMe.
• With the Toggle LWC, enable users to pick between two states, enable or disable an option, or select
multiple options. The Toggle LWC supports attributes available in the CheckboxGroup Lightning Web
Component. See Toggle Lightning Web Component ReadMe.
• Enable tracking and specify tracking objects in the Action LWC. See Action Lightning Web Component
ReadMe.
LWC OmniScript
All of the LWC OmniScript changes and enhancements apply to both the LWC OmniScript Designer and
the Classic OmniScript Designer. To view changes and enhancements specific to the LWC OmniScript
Designer, see LWC OmniScript Designer Changes and Enhancements.

company 9
OmniStudio
Download the LWC HTML, CSS, and ReadMe files for this release by clicking here.
LWC OmniOut
Run an OmniScript on an external site by using the LWC OmniOut in your external application. OmniOut
enables apps to run an OmniScript that connects to Salesforce and external APIs to send and receive data.
See Run LWC OmniScripts Outside of Salesforce with LWC OmniOut.
Added OmniScript Element Support

LWC OmniScript supports these elements:
Element LWC Behavior Angular Behavior

PDF Action No change No change
New Properties
New LWC OmniScript properties appear in the LWC OmniScript Designer only. See LWC OmniScript
Designer Changes and Enhancements.
Added Property Support

LWC OmniScript supports these OmniScript properties:
Property LWC Behavior Angular Behavior

Enable Unload Warning No change No change
New Functionalities
These new functionalities are exclusive to LWC OmniScripts:
Functionality Description
Browser Navigation A browser's forward and back buttons navigate an LWC OmniScript to the next or previous Step.
Custom Styling Support for Add custom styling for right-to-left languages using static resources. See Custom Stylesheet
RTL Language Static Resource.
Download Off-Platform LWC Download the OmniScript LWC to add it to OmniOut. See Run LWC OmniScripts Outside of
Salesforce with LWC OmniOut.
Expanded Google Maps Type Ahead's Google Maps functionality returns an expanded response containing more JSON
Response Node nodes. See Using Google Maps Autocomplete in LWC OmniScripts.
Improved Readability Readability has been improved for screenreaders.
Messaging Framework Pass a value in the c__messagingKey URL parameter to change the node that stores the
messaging payload for window.postMessage and session storage message. See Message with
Window Post Messages and Session Storage Messages.
Place Custom LWC Elements Custom LWC Elements are usable in a non-repeatable Block element. The Block cannot be
in Blocks nested. See Custom LWC Element.
Run OmniScripts Off-Platform Add OmniOut to an application to run OmniScripts on a third-party website.
with OmniOut
Translate Tooltip Help Text in Provide translations for tooltip help text in multi-language OmniScripts by defining and adding
Multi-Language OmniScripts custom labels. See Translate Tooltip Help Text in OmniScripts.
Added Functionality Support

LWC OmniScript supports these OmniScript functionalities:

company 10
OmniStudio
Functionality LWC Behavior Angular

Behavior
Beta support for right-to-left Multi-language and single language OmniScripts provide beta support for No change
languages right-to-left languages.
Mobile View in App Builder Preview how your OmniScript displays on a mobile device by Lightning No change
App Builder's device view to Phone. See Add an LWC OmniScript to a
Community or Lightning Page.
LWC OmniScript Designer

This section lists changes and enhancements specific to the LWC OmniScript Designer. To view LWC
OmniScript changes and enhancements that apply to both the LWC OmniScript Designer and the classic
designer, see LWC OmniScript Changes and Enhancements.
New Setup Properties

Section: Property Description
Enable Unload Warning The Enable Unload Warning property is available in LWC OmniScripts.
Styling Options: Custom Lightning Reference a static resource that contain a custom Lightning stylesheet. See Apply Custom
Stylesheet File Name Styling to OmniScripts with Static Resources.
Styling Options: Custom Newport Reference a static resource that contain a custom Newport stylesheet. See Apply Custom
Styling Options: Scroll Animation Turn scroll animation on to add a smooth scroll animation to your OmniScript.
Cancel Options: Tracking Business Define a business category for a tracking entry. See Enable Tracking for Vlocity
Category Components.
Cancel Options: Tracking Business Define a business tracking event for a tracking entry. See Enable Tracking for Vlocity
Event Components.
New Element Properties

These properties are now available in LWC OmniScript Designer
Property Description
Tracking Business Category Define a business category for a tracking entry. See Enable Tracking for Vlocity Components.
Tracking Business Event Define a business tracking event for a tracking entry. See Enable Tracking for Vlocity Components.
Added Element Property Support

The LWC OmniScript Designer now supports these properties.
Edit Block Label LWC Edit Block's Cards and Long Cards modes support the Edit Block Label LWC Component
Component Override Override. See Extending the Edit Block Label LWC.
Edit Block New LWC Edit Block's Cards mode supports the Edit Block New LWC Component Override. See Extending
Component Override the Edit Block New LWC.
Use Continuation The Remote Action's Use Continuation property, which enables you to invoke apex classes that
return continuation objects, appears in the UI. See Remote Action.
Added Element Support

The LWC OmniScript Designer now supports these elements.

company 11
OmniStudio
Element Description
Matrix Action Call a Calculation Procedure with specific inputs and retrieve a value.
PDF Action Fill and display PDFs using OmniScript data.
Set Errors Action Render validation messaging on one or more elements in a Step.
New Functionalities
The LWC OmniScript Designer now includes these functionalities.
Cancel Options Configure Cancel Options to direct users to different Salesforce experiences. See Enable and
Configure Cancel Functionality in an LWC OmniScript.
Download Off-Platform Download the OmniScript LWC to add it to OmniOut. See Run LWC OmniScripts Outside of Salesforce
LWC with LWC OmniOut.
Hide Conditional Hide conditional elements in the designer by checking the hide conditional elements checkbox in the
Elements canvas. See Conditionally Display Elements Using the Conditional View Property.

The LWC OmniScript Designer now supports these functionalities.
Edit Block SObject The SObject mapping section appears in the UI of the Edit Block properties.See Configuring an Edit
Mapping Block
Full-width Preview Collapse the Debug Panel to hide the Data JSON and Action debugger and preview the OmniScript
in a full-width page. See Preview an OmniScript in the LWC OmniScript Designer.
Multi-Language: Custom Configure custom label translations from the LWC OmniScript Designer when designing a multi-
Label Translations language OmniScript. See Define Custom Label Translations in Multi-Language OmniScripts.
Changes in Functionality
The File and Image elements no longer contain the Upload to Content Document checkbox property.
LWC OmniScripts always upload files and images to the content document. See Add a File or Image to
OmniScript.

• The ~= operator performs a case insensitive String comparison. For example, "ABC" ~= "abc" returns
true. See Function Reference.
DataRaptors
• The process and processFromApex methods of the DRGlobal class have locale parameters of
type String. See DRGlobal Class and Methods.
• DataRaptors use API version 49.

company 12
OmniStudio
Integration Procedures
• Cache Blocks have an Add To Cache Conditional Formula property. If a formula is present in this
property, the block is cached only if the formula evaluates to true. If this property is blank, the block is
always cached. See Enhance Performance Using Cache Blocks.
• Test Procedures are a major new feature:
• An Integration Procedure is a Test Procedure if its Is Test property is checked. A Test Procedure can
run another Integration Procedure to test it, and the Integration Procedure being tested can contain
mock results that are only for the tests. After a Test Procedure finishes running, any changes it
produced aside from its test results are rolled back. See Test Procedures: Integration Procedures for
Unit Testing.
• An Assert Action in a Test Procedure compares expected results to actual results. It can evaluate the
results or the performance of anything the Test Procedure invokes. To evaluate performance, its Assert
Conditional Formula can reference performance variables. See Assert Action.
• The results of Test Procedures are logged to the Vlocity Tracking Entry object as Assert, Error, and
TestResult event records. See Integration Procedure Event Tracking.
OmniAnalytics
• Using Vlocity OmniAnalytics, you can track user interactions with LWC OmniScripts and FlexCards with
or without a third-party system such as Google Analytics. All Vlocity industry products can use Vlocity
OmniAnalytics. See Vlocity OmniAnalytics Overview.
• Vlocity OmniAnalytics tracks LWC OmniScript user interaction data. LWC OmniScripts can send data to
an external analytics vendor such as Google Analytics using the Messaging Framework. See Workflow
for Adding Ecommerce Data to the Example OmniScript and Card.
• Vlocity OmniAnalytics tracks FlexCard user interaction data. FlexCards can send data internally or to an
external analytics vendor such as Google Analytics using the Business Category and Business Event
properties. See Workflow for Adding Ecommerce Data to the Example OmniScript and Card.
• When included in a Lightning App Page, the Vlocity Tracking Manager LWC listens for Vlocity
OmniAnalytics events. It can send these events to Vlocity Tracking Groups and to external analytics
vendors. See Create a Lightning App Page with a Tracking Manager.
• Vlocity OmniAnalytics can record tracking data to Vlocity Tracking Entry objects in the Vlocity Tracking
Service or to Vlocity Tracking Event records as Platform Events. See Enable OmniAnalytics and Store
Tracking Data.
• Vlocity OmniAnalytics provides dashboards for the tracking data it collects from LWC OmniScripts and
FlexCards. You can also create your own custom Salesforce Reports. See View the Tracking Data in the
Vlocity Tracking Group Page and Create a Report Using Vlocity Tracking Entry Data.
• You can specify conditions that determine whether events that Vlocity OmniAnalytics tracks are sent to
external analytics vendors. See Create an Inclusion Rule for an Event Type.
• Due to a Salesforce issue, Vlocity OmniAnalytics does not support the Safari web browser.
Vlocity Intelligence End of Life

September 1, 2020
Editions affected: All existing releases of:

company 13
OmniStudio
• Vlocity Insurance
• Vlocity Health
• Vlocity Communications
• Vlocity Media
• Vlocity Energy
• Vlocity Public Sector
Beginning December 31, 2020, Salesforce will end support for Vlocity Intelligence. We believe we can offer
customers better options for recommending actions and offers through tighter integration with Salesforce
Einstein.
The feature will not be included in any renewals beyond September 1st, 2020. Existing customers may
continue to use Vlocity Intelligence if installed. However, it will not be supported after the end of 2020 and
new releases thereafter will not include the feature.
Vlocity Insurance and Health Spring '20

This section provides a summary of the Digital Interaction Platform features and enhancements for the
Vlocity Spring '20 release.

The Vlocity LWC OmniScript Designer enables you to preview while you build dynamic customer
interactions without code using a user-friendly drag-and-drop interface with WYSIWYG editing. While
building your script, preview elements inside steps, view property changes live, and access contextual
guidance with in-product help to discover and learn about functionality without leaving your script. See LWC
OmniScript Designer Overview. For changes and enhancements, see LWC OmniScript Designer Changes
and Enhancements.

• A new Lightning Web Component named Vlocity State Transition displays the states in a State Model in
an interactive flow. See Workflow for Preparing the Base Object for a State Model.
• A new Lightning Web Component named Vlocity Rules Log displays the results of invoked rules in a
State Model. See Workflow for Preparing the Base Object for a State Model.
• Expose Input LWC, DateTimePicker LWC, DatePicker LWC, and TimePicker LWC custom labels to
enable customization as API properties. See ???.
• Multi-language custom label support is available for DatePicker LWC, Alert LWC, Interaction Wrapper
LWC, Power Launcher LWC, Wizard LWC, Pill LWC, and ProgressBar LWC. See ???.
• Direct users to Login pages, Logout pages, Community Named Pages, and App pages using the
Navigate Action LWC. See ???.
• The disableCache attribute is available in the Action LWC. See ???.
• The Label attribute is available in the Menu Item LWC. See ???.
• The Tooltip LWC supports custom HTML. See Tooltip Lightning Web Component ReadMe.
• The AsyncUtils Module exposes a collection of utilities designed to simplify asynchronous operations.
See AsyncUtils ReadMe.
• The NavigationUtils Module exposes a collection of utilities designed to simplify navigational functions.
See NavigationUtils ReadMe.

company 14
OmniStudio
• The Pubsub Component enables custom logic before executing a callback function when an event is
fired. See Pubsub Component.
• The new ActionGridState LWC card state template displays a vertical list of actions as icons followed by
labels, and an optional title at the top. See Base LWC Card and Layout Templates and Action Grid State
LWC Card Template.
New Vlocity Base Lightning web components include these components:
Component Description
Wizard LWC Displays a modal that enables navigation between steps in a process and displays a progress bar that shows
where a user is in the process. See Wizard Lightning Web Component ReadMe.
Wizard Item LWC Creates the template for each wizard item inside the Wizard LWC. See Wizard Item Lightning Web Component
ReadMe.
Related List LWC Displays a table of data with a header that supports actions. See Related List Lightning Web Component
ReadMe.
SLDS Header LWC Displays a page header, which contains a title, an icon, field data, and action links. See SLDS Header Lightning
Web Component ReadMe.
LWC Cards
• Grant access to your org domains to enable LWC features by adding required URLs to Remote Site
Settings from the Vlocity Cards home. See Fixing Inactive/Invalid Error When Enabling LWC on a Card
Layout.
• LWC state templates style and layouts updated. See Base LWC Card and Layout Templates.
• Style updates made to the title font, icon size, and button label for LWC storyOngoingState template.
• Style and layout updates made to the title font, attribute pills, actions, and the address field for the LWC
profileCardState template.
• Style and layout updates made to fonts, icon sizes, labels, fields, and actions for the LWC
wideCardSmart state template.
• CardMiniActive template has max-height and truncates description at two lines.
• Configure ContextId, console tab icon, and console tab label on an OS Action when an LWC OmniScript
is selected. See Launching an LWC OmniScript from an OS Action on a Card.
• Fire pubsub events from an action to notify another component on a page or application of an event
occurring on an LWC enabled card. See Firing a Pubsub Event from an Action on an LWC Card.
• Configure metadata properties on an LWC enabled card with an updated, more user-friendly Show XML
Interface feature. See Configuring the Metadata Values for an LWC Card.
• The Lightning Web Component Bundle API Name must only contain underscores and alphanumeric
characters. It must be unique, begin with a letter, not include spaces, not end with an underscore, and not
contain two consecutive underscores. See Card and Card Layout Naming Conventions.
• From the Layout LWC and State LWC fields in the Card Designer, only custom unmanaged LWCs are
downloadable. See Downloading Custom Unmanaged LWCs From the Card Designer.
• The Name of a custom LWC attribute must match the custom LWC attribute's markup name. See
Embedding a Vlocity Lightning Web Component Inside an LWC Card State.

company 15
OmniStudio
Angular Cards
• Disable caching across the Vlocity Cards Framework. See Disable Vlocity Platform Cache.
• The GetObjectFromInteraction class leverages platform caching (when available) to store the
descriptions of the field lists and pull them, and adds optional inputs to increase performance. See
GetObjectIdFromInteractionObject Method.
DataRaptors
• DataRaptor Extracts, Turbo Extracts, and Transforms support metadata and data caching. See
DataRaptor Extract Output.
• The Preview tab has an Ignore Cache checkbox for testing. See Test a DataRaptor Extract.
• DataRaptor Turbo Extracts support relationship query notation for including fields from related objects.
See DataRaptor Turbo Extract Overview.
• DataRaptor Extracts and Turbo Extracts can enforce field-level security directly. See DataRaptor Extract
Output.
• Integration Procedures support DataRaptor Turbo Action components, which invoke DataRaptor Turbo
Extracts. See DataRaptor Turbo Action.
• Integration Procedures support Chatter Action components, which create Chatter posts and send them to
Chatter feeds. See Chatter Action.
• Vlocity Scheduled Jobs and the Batch Actions that call them support List Input as a Data Source Type,
which simplifies Batch Action configuration. See Batch Action.
• Try-Catch Block failure responses support merge fields. See Handle Errors Using Try-Catch Blocks.
Functions
• The VALUELOOKUP function returns the value of a JSON node referenced by another JSON node. This
lets you dynamically specify the node to retrieve from. See Function Reference.
• The SUBSTRING function converts the first parameter to a String automatically. See Function Reference.
LWC OmniScripts
Download the HTML, CSS, and ReadMe files for this release by clicking here.

The Vlocity LWC OmniScript Designer enables you to preview while you build dynamic customer
interactions without code using a user-friendly drag-and-drop interface with WYSIWYG editing. While
building your script, preview elements inside steps, view property changes live, and access contextual
guidance with in-product help to discover and learn about functionality without leaving your script. See LWC
OmniScript Designer Overview. For changes and enhancements, see LWC OmniScript Designer Changes
and Enhancements.
New Elements
These new elements are available in LWC OmniScripts.

company 16
OmniStudio
Element Description
Action Block Groups Action elements together to enable backend calls to fire asynchronously using the same
configuration.
DataRaptor Turbo Extract Action Invokes a DataRaptor Turbo Extract.


Calculation Action Calculation Action's Pre-Transform DataRaptor Calculation Action's Pre-Transform DataRaptor
Interface and Post-Transform DataRaptor Interface Interface and Post-Transform DataRaptor Interface
properties are now in the remote properties section. properties are now in the remote properties section.
This enables both DataRaptors to run in a single This enables both DataRaptors to run in a single
Apex call. Apex call.
Delete Action No change No change
Matrix Action No change No change
Set Errors Action No change No change
New Properties
These new properties are exclusive to LWC OmniScripts:
Send only Extra Pass an Extra Payload's Key/Value pairs without sending an OmniScript's data JSON by using the Send
Payload Only Extra Payload property available in these actions: Calculation Action, HTTP Action, Integration
Procedure Action, and Remote Action.
Step: Messaging Steps support the pubsub, window post message, and session storage message properties. See
Framework Communicate with OmniScript from a Lightning Web Component.


Conditional View: Set element to The conditional view property takes precedence The element's Read Only property
readonly if false over an element's Read Only property. takes precedence.
Conditional View: Set required The conditional view property takes precedence The element's Required property
element to optional if false over an element's Required property. takes precedence.
Repeat No change No change
New Functionalities
Custom Stylesheet Static Resource Add custom styling to an OmniScript using a custom style sheet static resource.
Enable LWC OmniScripts with Create LWC OmniScripts or convert Angular OmniScripts with a Type that begins with an
UpperCase Type uppercase letter with no additional configuration. See Create an LWC OmniScript.
Inline OmniScripts Display OmniScripts inline in Community and Lightning pages.

company 17
OmniStudio
Navigate to Additional Direct users to an App, Community Named Page, Logout, or Login page using the Navigate
PageReference Types Action. See Navigate Action.
Override the Edit Block LWC Override an Edit Block LWC, Edit Block New LWC, and Edit Block Label LWC, to add custom
functionality and styling to an Edit Block.
Override the Modal LWC Extend and override the OmniScript Modal LWC.
Override the Save For Later Override the Save For Later Acknowledgment LWC to add customizations.
Acknowledgement LWC
Override the Type Ahead LWC The LWC Type Ahead element's LWC Component Override field overrides the Type Ahead
component instead of overriding the Type Ahead Block component.
SEO OmniScripts Enable OmniScripts to appear in online searches and direct users to specific Steps in the
OmniScript by configuring OmniScript's SEO options.
SLDS Token Override Add customizations to SLDS Design Tokens in the OmniScript.
Stateful OmniScripts Store the state of an OmniScript's progression in the URL to direct users to specific Steps in
an OmniScript and temporarily store data.
Time Tracking in Navigate Action The Navigate Action supports time tracking. The action is tracked in the StepActionTime time
tracking entry. See Vlocity Tracking Service.

Functionality LWC Behavior Angular Behavior

Cancel Add a cancel option to an LWC OmniScript by configuring The Cancel button options appear in the
the Navigate Action. See Enable and Configure Cancel Script Configuration's Cancel Options
Functionality in an LWC OmniScript. section.
Edit Block Cards Override the Card with an LWC to add customizations. Use templates to add customizations to the
Card.
Multi-Language • Add and access custom labels in custom LWCs. • Angular Multi-Language OmniScripts
OmniScripts • Provides Beta support for right-to-left languages. cannot use LWCs.
• Requires different custom label translations • Supports right-to-left languages
• Requires different custom label translations
Angular OmniScripts
• Improved messaging and error handling has been added for SFDC authentication in AEM deployments.
• Content Ids appear in the OmniScript's data JSON when a Content Document is uploaded.
• The prettify filter has been removed due to the CC-BY-SA-4.0 licensed snippet. Create a solution to
replace this functionality by referencing this document, pretty-print-json.
• Step elements support window post message, session storage message, and the message property. See
Message with Window Post Messages and Session Storage Messages.
State Model Core Functionalities

• State Models support almost any base object type, not just Asset, Quote, Contract, or
InsuranceClaim__c. See Workflow for Preparing the Base Object for a State Model.
• State Model Versions support rules that determine whether state transitions can occur. A transition can
have no rules, one rule, or more than one rule with Any True or All True logic. Each rule can have an

company 18
OmniStudio
associated Vlocity Action and success and failure messages. See Workflow for Creating State Transition
Rules.
• State Model Versions also support an optional Trigger-enabled On Creation Action. See Workflow for
Using a Trigger and an On Creation Action.
• State Model Versions also support an optional custom rule evaluation Apex class. See Custom Rule
Evaluator Class.
• You can cache State Model states, transitions, rules, and actions for better performance. See Workflow
for Setting Up Caching for State Models.
• You can invoke state transitions automatically on a schedule. See Automatic State Model Transitions.
IDX Workbench
• The Version Compare dashboard lets you compare two versions of an OmniScript or Integration
Procedure in the same Source or Target org. See Compare OmniScript and Integration Procedure
Versions.
• You can specify a Project object in your Source org instead of configuring a project. See IDX Workbench
Configuration for Migration.
Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20
• Make remote calls from any custom LWC using the Common Action Utility. See Make Remote Calls from
Lightning Web Components using the LWC OmniScript Action Framework.
• Enable Salesforce's Debug Mode to view Lightning web component errors. See Enable Debug Mode.
Cards
• Limit user access to a card layout with custom permissions. See Creating a Card Layout Using Card
Designer.
• Clear user sessions, custom labels, card layouts, cards, and card template caches across the Vlocity
platform with the new Cache Settings feature in the Cards Designer. See Clear Vlocity Platform and User
Session Caches.
• Update information on a card after making a change to an LWC OmniScript by passing a reload event to
the OmniScript through a URL parameter on the OS Action. See Launching an LWC OmniScript from an
OS Action on a Card.
• Use the $root.vlocity variable to return information about the logged-in user from the data source of a
card on an LWC enabled card layout. See Creating an LWC Card Layout.
• In the new Vlocity Interaction Wrapper component, access all available actions on a customer interaction,
complete, cancel, or resume customer interactions, and view a list of tracking events submitted during a
customer interaction. See Accessing Actions and Manage Interactions with the Vlocity Interaction
Wrapper.
• On a Customer Story card, replace the preconfigured list of actions that create new records with a
customized list of actions. See Replacing Actions on an LWC Customer Story Card.
• The cardActiveState, wideCard, wideCardSlim, and wideCardSmart LWC card templates support field
tracking.

company 19
OmniStudio
• On a card state, configure a Smart Action and one or more standard actions, such as Vlocity Actions,
Custom Actions, and OS Actions. Prior to this release, you must configure a Smart Action or one or more
standard actions on a card state, not both. See Configuring Smart Actions on an LWC Card.
• Cards with Smart Actions reload when profile attributes update on Lightning or Community pages with
the Vlocity Lightning Profiler component. See Reloading a Smart Card After Updating Profile Attributes.
• New Description field on the Vlocity Action object describes the action. See Vlocity Actions.
• Custom Actions on an LWC enabled card supports Salesforce PageReference Types that enable
navigation within Lightning Experience, within Communities, or to an external web address. See Adding a
Custom Action to an LWC Card.
• OS Actions are fully supported on LWC enabled cards.
• Explicitly deploy and save your LWC enabled card layout, and update the card preview by clicking the
new Deploy button. Autosave triggers only when the card’s layout or card is activated. See Creating an
LWC Card Layout.
• Embed any Vlocity Lightning Web Component, such as an LWC OmniScript, an LWC enabled card, or
any other custom LWC, inside an LWC Card state, and set the attributes of the embedded component.
See Embedding a Vlocity Lightning Web Component Inside an LWC Card State.
• LWC enabled cards and card layouts support Async/Queueable support on Integration Procedures and
Apex Remotes, Dual, and Streaming API data sources. The Preview pane does not support the
Streaming API data source. See LWC Cards Changes and Enhancements.
• New Accordion LWC displays content as vertically stacked sections. Sections can embed other
components. See Accordion Lightning Web Component ReadMe.
• New leftAccountInfoState LWC card state template displays account data listed in rows. See
LeftAccountInfoState LWC Card Template.
• New leftProfileState LWC card state template displays account information as a google map image, up to
three data fields, and up to three actions. See LeftProfileState LWC Card Template.
• Configure the attributes of a Vlocity Lightning Web Component used as a flyout on an LWC enabled card
layout. See Creating an LWC Flyout.
• View a comprehensive list of available LWC card templates and their compatible card layouts, and LWC
layout templates and their compatible cards. See Base LWC Card and Layout Templates.
DataRaptors
A DataRaptor Turbo Extract retrieves data from a single Salesforce object type. You can filter the data and
select the fields to return. Unlike a standard DataRaptor Extract, a DataRaptor Turbo Extract doesn't
support formulas or complex field mappings. See DataRaptor Turbo Extract Overview.
Functions
To enable conversions between Strings and JSON objects, the DESERIALIZE, RESERIALIZE, SERIALIZE,
and TOSTRING functions are supported. See Formulas and Functions.
Error Logging
• Write Integration Procedure errors to Vlocity Error Log Entry SObject records by setting
ErrorLoggingEnabled to true. ErrorLoggingEnabled is a Custom Setting under General Settings. See
Error Handling in Integration Procedures.

company 20
OmniStudio
• Integration Procedures can write Failure Response values to specific fields, including custom fields, in
Vlocity Error Log Service SObject records. See Error Handling in Integration Procedures.
Security
• If a user has access to a parent Integration Procedure, the parent can invoke child Integration
Procedures and DataRaptors even if the user doesn’t have direct access to them. See Create an
Integration Procedure.
• You can call DataRaptors and Integration Procedures privately from Apex, ignoring Sharing Rules. See
DRGlobal Class and Methods and IntegrationProcedureService.
Chainable Settings
• The Chainable Actual Time setting specifies the number of seconds an Integration Procedure can run
before chaining occurs to avoid reaching the Salesforce Concurrent Request Limit. It has no default. See
Settings for Long-Running Integration Procedures.
• Integration Procedure Actions in Integration Procedures have a Disable Chainable checkbox, which is
unchecked by default. If checked, this setting disables the Chainable settings of the subordinate
Integration Procedure. It doesn't affect the Queueable settings. See Integration Procedure Action and
Settings for Long-Running Integration Procedures.
Unit Testing
The setMockHttpResponseByUrlOrActionName method enables unit testing of Integration Procedures that
include more than one HTTP Action. See Integration Procedure Unit Testing from Apex.
Caching
The IntegrationProcedureService class provides methods to clear Integration Procedure data from the
cache: clearSessionCache, clearOrgCache, clearSessionCacheBlock, and clearOrgCacheBlock. See
Cache for DataRaptors and Integration Procedures.
LWC OmniScripts
New Properties
Action Message Enables custom action messages to render under an action's loading spinner when an Action runs. For
more information, see Common Action Element Properties.
Display Outside Enables Knowledge base articles to display in a separate Lightning web component in a Lightning page.
OmniScript For more information, see Opening Knowledge Base Articles Outside of a Classic OmniScript.
Merge Saved Data JSON Enables a saved OmniScript to merge data into an updated version of the OmniScript. For more
into updated OmniScript information, see Configure Save Options.


company 21
OmniStudio
• Console Tab Title and Console Tab Icon

• Custom Tracking Data
• Enable Tracking
• Fetch Picklist Values At Script Load
• Hide
• Knowledge
• Repeat - Only Block elements are supported
New Functionalities
• Make remote calls from any custom LWC using the Common Action Utility. Make Remote Calls from
• View Knowledge Base articles outside of the OmniScript using the Vlocity OmniScript Knowledge Base
Component. See Opening Knowledge Base Articles Outside of a Classic OmniScript.
• Pass parameters into LWC OmniScripts in a Community. See Launch an LWC OmniScript with LWC
OmniScript Wrapper.
• Launch an OmniScript from a Card in a Community. See Launching an LWC OmniScript from an OS
Action on a Card.
• Override the default save for later error message with a custom message. See Configure Save Options.
• Pass events to an LWC OmniScript in the c_vlocEvents parameter, and fire the event by configuring
the Navigate Action. See Navigate Action.
• Hide the Next and Previous button on a Step by setting the width for each button to 0. See Hide the Next
and Previous Buttons.
• Override the Step Chart Lightning web component. See Customize the Step Chart Component.
• The OmniScript Base Mixin component includes methods to enable these functionalities:
• Navigating to a Step
• Saving a state in a disconnected callback
• Clearing a saved state when a user navigates to a previous Step
• Making remote calls
• Applying response data to an OmniScript's data JSON
• In LWC OmniScripts, validation runs when a user clicks out of a field by using the onBlur function. In
Angular OmniScripts, validation runs when a user types in a field by using the onChange function.
To enable the LWC OmniScript to run validation when a user types:
1. In the Setup properties, click Edit as JSON.
2. Add the property "commitOnChange": true.
3. Preview the behavior.
NOTE
In LWC OmniScripts, the onChange behavior runs after a half-second delay.


company 22
OmniStudio
• Displaying Knowledgebase articles in OmniScript. For more information, see Initial Configuration for the
Knowledge Component in Classic OmniScript.
• Saving and resuming OmniScripts. Saving and resuming LWC OmniScripts requires additional
configuration due to new behavior. For more information, see Configure Save Options.
• Group elements support the validation framework. For example, when a Group element, such as a Block,
is hidden, validation does not apply to any element inside of the hidden group element.
• Prefilling repeatable blocks. For more information, see Prefill Repeatable Blocks


Block No change No change
Edit Block The Edit Block replaces HTML templates with the Select Modes property. For more Edit Block uses
information, see Configuring an Edit Block. HTML templates to
display different Edit
Block styles.
Email Action No change No change
DocuSign No change No change
Envelope
DocuSign LWC OmniScripts use a new Visuaforce page to render the DocuSign Signature modal. The Visualforce page
Signature To use the DocuSign Signature Action in Communities, add user profile permission for does not exist.
the Visualforce page. For more information, see Using the DocuSign Signature Action to
Sign Documents From Within an OmniScript.
File Supports uploads up to 2GB. For more information, see Upload Files and Images in Supports uploads up
OmniScripts. to 25 MB.
NOTE
The Image and File elements do not work in the LWC preview due
to a Salesforce limitation. When Image and File elements are
required in a Step, the LWC Preview cannot advance past the
Step. Vlocity recommends marking File and Image elements as
Required only before activating the OmniScript.
Image Supports uploads up to 2 GB. For more information, see Upload Files and Images in Supports uploads up
NOTE
The Image and File elements do not work in the LWC preview
because they use Salesforce components. When Image and File
elements are required in a Step, the LWC Preview cannot
advance past the Step. Vlocity recommends marking File and
Image elements as Required only before activating the
OmniScript.
Messaging Validation runs when a user clicks out of a field. See Display Messages in OmniScripts. Validation runs when
a user types.

company 23
OmniStudio

Password No change No change
Type Ahead The Type Ahead Block displays a progress bar instead of a spinner when retrieving data There is no progress-
Block results. See ProgressBar Lightning web component ReadMe. bar component
SDK Enhancements
Translation SDK now supports anonymous users.
Vlocity Insurance and Health Summer '19 and Vlocity Communications, Media,
and Energy Fall '19 Releases

Vlocity provides Salesforce Lightning Web Components support with Vlocity Lightning Web Components.
Vlocity Lightning Web Components enable you to use standard JavaScript and HTML to modify and extend
Vlocity products. Vlocity Lightning web components are fast, easy to use and reuse, and are supported by
all major browsers because it uses web components standards set by the W3C instead of AngularJs.
Vlocity Cards and Vlocity OmniScript both support Lightning Web Components.
For more information, see Vlocity Lightning Web Components.
To access the introductory training course for Vlocity Lightning web components, see Introduction to Vlocity
Lightning Web Components.
Cards
Vlocity Cards supports Salesforce’s Lightning Web Components programming model by including
components, functionalities, and templates exclusive to LWC Cards. LWC Cards enable the use of custom
components built with standard JavaScript and HTML. For more information, see LWC Cards.
DataRaptor
• If emails are configured in Case assignment rules, checking Use Assignment Rules in a DataRaptor Load
automatically sends emails to users when Cases are assigned. For more information, see Create a
DataRaptor Load.
• The Required Permissions setting limits access to DataRaptors and Integration Procedures based on the
user's Profiles and Permission Sets. For more information, see Security for DataRaptors and Integration
Procedures.
• DataRaptor metadata is cached for better performance. For more information, see Cache for
DataRaptors and Integration Procedures.
• Moving product relationships between orgs is supported.
Integration Procedure
• An Integration Procedure can include a Try-Catch Block, which returns specified output or calls an Apex
class if a step within it fails. For more information, see Handle Errors Using Try-Catch Blocks.

company 24
OmniStudio
• You can cache metadata and JSON data for an entire Integration Procedure. A Cache Block lets you
cache data for specific actions and use cache keys. Caching improves performance. For more
information, see Cache for DataRaptors and Integration Procedures.
• An Integration Procedure can include a Batch Action, which runs a Vlocity Scheduled Job. For more
information, see Batch Action.
• You can use the Wrap Up Process Name and Wrap Up Process Type fields to run a different Integration
Procedure or VlocityOpenInterface as a child of the initial process, in the same transaction, once the
initial process finishes. For more information, see Batch Jobs for Integration Procedures and Vlocity
Open Interfaces.
• In an Integration Procedure, you can increase Salesforce governor limits by allowing a chainable step to
start a queueable job. You can also configure heap size, CPU, and query limits for a queueable/chainable
Integration Procedure. For more information, see Settings for Long-Running Integration Procedures.
• Send/Response Transformation fields support merge field syntax. This lets you include variables
(%variable%) to generate path and node values dynamically. For more information, see Manipulate
JSON with the Send/Response Transformations Properties.
OmniScript
OmniScript supports Salesforce’s Lightning Web Components programming model by including
components, functionalities, and elements exclusive to LWC OmniScripts. LWC OmniScripts enable the use
of custom components built with standard JavaScript and HTML. For more information, see LWC
OmniScripts.
Upgrade Instructions
1. Upgrade OmniScript by adding these values to the Type picklist in the Vlocity OmniScript Element
(ns_Element_c) table:
• Custom Lightning Web Component
• Navigate Action
For more information, see Adding OmniScript Elements to an Upgraded Org.
2. Upgrade Integration Procedures by adding these values to the Type picklist in the Vlocity OmniScript
Element (ns_Element_c) table:
• Batch Action
• Cache Block
• Try Catch Block
For more information, see Add Integration Procedure Components to an Upgraded Org.
Known Issue Workaround

A DataRaptor Transform adds a year to a date if the year is within 1974-1976, the day is within
12/28-12/31, and the format is Date(MM/dd/YYYY). To avoid this issue, use the Date(MM/dd/yyyy) format.
Vlocity Insurance and Vlocity Health Spring '19 Release
• Process Arrays Using Loop Blocks

• Deploy and Apply Global Styling Changes using the Newport Design System

company 25
OmniStudio
Vlocity Insurance and Vlocity Health Winter '19 Release
• Launching OmniScript from Salesforce Flow

• Making Attachments Available in External OmniScripts
• Customizing Error Messages for OmniScript Actions
• Script Configuration Reference
• Configuring the Vlocity OS Player Lightning Component
• Manipulating JSON with the Send and Response Transformations Property
• OmniScript Input Components
Salesforce Newbie?
If you are new to Salesforce, here are some Trailheads you might want to explore:
• Salesforce Platform Basics

• Service Cloud Platform: Quick Look
• Service Cloud for Lightning Experience
• Platform Development Basics
Meeting Industry Challenges with OmniStudio Apps

The industries we serve face daunting challenges to thrive and remain competitive. To better serve
customers, companies often resort to custom coding, which can be expensive, risky, can require months or
years to complete. And custom projects can be delayed because a business process has changed.
Improving and transforming customer service can be a monumental task. Here are the industries that
Vlocity serves:
OmniStudio includes three main applications designed for meeting specific challenges:
• OmniScripts - to keep customer service interactions on the business process flow

• Cards Framework - to view the customer in all contexts
• DataRaptors - to solve data integration and transformation issues
Meeting Customer Service Challenges with Vlocity OmniScripts

Take a quick tour of Vlocity Omniscripts.
https://player.vimeo.com/video/277166788

company 26
OmniStudio
Meeting Customer Context Challenges with Vlocity Cards Framework

Take a quick tour of the Vlocity Cards Framework.
Meeting Data Challenges with Vlocity DataRaptors

Take a quick tour of Vlocity DataRaptors.
Using The Applications Together

Here's an example of the Cards Framework, OmniScript, and DataRaptor used together to:
• Provide a context for information and actions

• Complete a guided process
• Retrieve the correct data for the process
The agent views order-related information and actions contained in the card. When the agent clicks the new
order link on the card, an OmniScript launches to begin a guided process for purchasing products.
OmniScript uses a DataRaptor to get a list of products for display. Then the agent can choose one or more
products for purchase. When the purchasing process ends, the OmniScript returns the agent to the view
that includes the Orders card.

company 27
OmniStudio
OmniScript Basics
A Vlocity OmniScript guides users through complex processes with fast, personalized, and consistent
responses. For example, you can create an OmniScript to guide:
• A customer service agent to add a new customer

• An insurance agent to update a policy
• An end user to complete a self-service interaction such as troubleshooting
You can create a guided interaction to match the flow of your process. OmniScript is a declarative scripting
tool, meaning you create it with clicks, not code. To create the structure of an OmniScript, you drag and
drop different types of elements to:
• Add actions such as extract data or send an email

• Group items together by creating a step or displaying a list of items the customer can select from
• Create a function such as a formula
• Add input fields and lookups for the user to enter data
• Refine the display by using a headline or text block
• Create branches that dynamically adjust the controls and enable or disable steps depending on choices
the user makes in the guided process
• Configure calculations and messages that provide immediate feedback and error checking to the user
Templates control both the style and appearance of OmniScripts. You can customize whether your guided
interaction has a horizontal or vertical mode, branding, and any other aspects you wish to change.

company 28
OmniStudio
You can launch an OmniScript from anywhere, including:
• An action button such as the one shown here on the account page
• An action link on a card

company 29
OmniStudio
Vlocity Cards Framework Basics

The Vlocity Cards Framework provides tools for building customer-centric, industry-specific UI components
and applications on the Salesforce platform. Cards are rich in information and actions relevant to the
customer's context. Create your cards in a declarative design tool and add them to your Lightning or
Community pages.
Customer Context
Each customer is linked to multiple aspects of your company's products and services. Customers have
accounts, preferred methods to receive bills, preferred means of contact, and a history of the products they
have purchased as well as their interactions with the company. When agents must use different systems to
gather contextual information about the customer, it affects customer service. Use the Vlocity Cards
Framework to streamline customer engagement.
NOTE
Beginning with Vlocity Health and Insurance Summer '19, Vlocity supports Salesforce's
Lightning Web Components programming model with Vlocity Lightning Web Components.
Vlocity Lightning Web Components include components, functionalities, and templates
exclusive to LWC Cards. LWC Cards enables you to use standard JavaScript and HTML to
modify and extend Vlocity products. To learn more, see Vlocity Lightning Web
Components.

company 30
OmniStudio
Designer
The framework features a card designer, a declarative tool to create UI components.
With the Classic Card Designer, build Angular cards and LWC enabled cards with templates and cards
embedded in card layouts, with minimal code. See Working with the Template Designer and Card Designer.
Build dynamic customer-centric UIs without code from a drag interface with WYSIWYG editing. See
FlexCards.
Cards
A card is a block that contains a combination of pertinent information and links to processes within a
specific context. For example, an account card can include unique account information, such as:
• Status
• Priority or service level agreement
• Creation date
Actions on an account card might include:
• Closing a case
• Opening a new case
• Creating a new task
Each action in the Classic Card Designer can launch an OmniScript to begin a guided process, or perform
other actions such as opening an external link.

company 31
OmniStudio
In the FlexCard Designer, you can create an action that launches or updates an OmniScript, navigates to a
web page or application, displays a flyout, fires an event, update field values, and more. See Add an Action
to a FlexCard.
Design and Layout

In the Classic Card Designer, each card and card layout is associated with a template to which you can
modify or add HTML, CSS/SCSS, and JavaScript. Templates control the style and appearance of the card
and the card layout, and they can be changed using the Template Designer.
Style individual elements or add custom CSS directly on an element within the FlexCard Designer. You can
also make elements responsive. See Style FlexCard Elements.
Data Sources
Select from multiple data source options to retrieve data to display on your cards. For a list of data sources
available in the Classic Cards Designer, see Configuring Data Sources for Cards Components. For a list of
data sources available in the FlexCard Designer, see FlexCards Data Source Reference.
Customizable Style Guide for Newport Design System

Vlocity's customers have their own set of brand guidelines and design specifications, particularly for
customer-facing applications. The Vlocity Omniscript and Cards Designers allow you to choose between
two templates:
• Lightning: This references the Salesforce Lightning Design System.

• Newport: This references Vlocity's style guide.
About the Newport Design System

Newport is the CSS framework that allows customers to re-theme all the Vlocity components in one place.
It is intended as a tool for both designers and web developers to easily re-style all the Vlocity components

company 32
OmniStudio
in a single place and generate custom, optimized CSS files that can be used consistently across all
components and pages.
The Newport Design System supports two functions:
• Provides an out-of-the-box consumer-grade visual style guide.

• Provides a framework for re-branding and updating Vlocity components globally.
Designers
Use the new Design System [beta release] to review all the components and download a Sketch library to
accelerate the design.
Developers
Go to the Vlocity Github repository to help you customize and rebrand all the Vlocity Newport based
templates in one place.
DataRaptor Basics
Vlocity DataRaptor moves data into and out of Vlocity applications, and is commonly referred to as an
Extract, Transform, and Load application. DataRaptors enable you to read and write data to and from your
Salesforce org.
With DataRaptor:
• No coding is required because it abstracts queries.

• Any DataRaptor can be saved, exported, and reused.
DataRaptor's transform feature modifies values by using formulas and functions. For example, formulas
and functions can:
• Convert JSON input to XML output, and XML output to JSON input.
• Restructure the input data and rename fields.
• Substitute values in fields.

company 33
OmniStudio
Service Console Basics

Cards are part of the Service Console framework in Salesforce. This framework consists of the following
parts:
• Service Console Apps, which contain multiple tabs and a way to navigate between them. You create and
edit Service Console Apps in the App Manager in Setup. Each tab contains a Lightning Record Page.
• Lightning Record Pages, which contain multiple screen components that display data based on a specific
Salesforce object type, such as Accounts. You create and edit Lightning Record Pages in the Lightning
App Builder in Setup. Screen components in a Lightning page include:
• Prebuilt Salesforce Lightning Components
• Prebuilt Vlocity Lightning Components
• Cards, which display data and launch actions
Prebuilt Vlocity Service Console Apps use console navigation mode, which is also recommended for any
custom Service Console Apps that you build. This mode lets you display an object type, such as Accounts,
in a primary tab, and specific object records in subtabs. Vlocity provides Lightning components and Action
behaviors to support console navigation. You can customize, clone, and reuse these apps as needed.
This multiple-tab structure allows you to have all of your customer service information and links to actions at
your fingertips for each customer. You can work quickly through a list of customer records and follow
industry-specific guided flows.
TIP
Learn more about the Salesforce Console in the Salesforce Help. This Salesforce article
discusses console navigation, implementation, and limitations.
You can use the Lightning App Builder to quickly create and customize Lightning Record Pages for your
own Vlocity Service Console App. Components on these pages use the main platform applications: Cards
Framework, OmniScript, and DataRaptor.
• Cards Framework enables you to build, edit, and define the look and feel of cards.
• Data sources enable you to use DataRaptors to provide the information displayed on the card.
• Actions are embedded links on cards that launch guided workflows built as OmniScripts.
There are many additional components, but this section introduces the basic platform components.
A typical Lightning Record Page includes:
• A left sidebar that displays basic account information and the customer story, which is a record of
previous customer activity and interaction.
• A center card canvas that contains cards focused on different contexts.

company 34
OmniStudio
• A right sidebar that displays dynamic information such as offers, and profile "tags" to describe
characteristics of the company, such as culture, concerns, and news.
Before you begin creating your own Vlocity Service Console app, see Installing and Activating Vlocity
Templates and Cards.
To create a simple Lightning Record Page for a Service Console app, see Building an Account Lightning
Record Page.

company 35
OmniStudio
Vlocity User Interaction Tools
Vlocity User Interaction Tools enable you to develop interactive user interfaces to permit your users to view
and change data. To define how data is managed in your org as a result of these user interactions, use
Vlocity Data Tools.

Take advantage of Vlocity's declarative 'clicks not code' approach to building and modifying your
applications with the Vlocity Lightning Web Components. With Vlocity Lightning Web Components, use
standard JavaScript and HTML to modify and extend Vlocity products.
Vlocity Lightning Web Components are:
• Fast and Lightweight. Runs natively in browsers and is independent from JavaScript frameworks.
• Reusable. Vlocity Lightning Web Components use web components to create reusable custom HTML
elements. Custom elements wrap functionality, protecting components from other styles and scripts on
the page.
Required Versions
Available beginning with Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19.
While some Vlocity Lightning web components appear in the Community and App Builders, they differ from
the Vlocity Lightning Components that also appear in the builders. Vlocity Lightning Web Components
follow the same standards as Salesforce's Lightning Web Components. For more information on Lightning
Web Component standards, see Lightning Web Components.
Vlocity Lightning Web Components Reference

Component Type Description References
Base Basic components used by the entire Vlocity platform. ReadMes: Base Vlocity LWC ReadMe
Extend or modify base components to customize Reference
appearance and behavior.
Cards Components specific to Vlocity Cards. • LWC Cards
• ReadMes: Vlocity Cards LWC ReadMe
Reference
Digital Commerce Components specific to Vlocity Communications, Media, Digital Commerce Lightning Web
Lightning Web and Energy. Components
Components
OmniScript Components specific to OmniScript. ReadMes: LWC OmniScript ReadMe
Reference
Insurance Components specific to Health and Insurance products. Insurance Lightning Web Component UI
Development Kit
Set Up Lightning Web Components

To manage and develop Vlocity Lightning Web Components, use Salesforce DX with Visual Studio or IDX
Workbench with Visual Studio. Both development approaches have source control. However, we

company 36
OmniStudio
recommend IDX Workbench because it enables you to migrate Vlocity components from one org to another
and compare both source and target files.
• To manage and develop your LWCs with Salesforce DX, see Set Up Your Development Environment.
• To manage and develop your LWCs with IDX Workbench, see IDX Workbench Desktop Application.
Required Versions
Extend Vlocity Lightning Web Components

Customize the behavior and styling of an application by extending Vlocity Lightning web components. For
example, override properties, add other components, or insert HTML.
Required Versions
NOTE
Custom Lightning web components built outside of the package cannot use any Salesforce
Lightning web component that uses Salesforce resources or affects the component at run
time. For more information, see Salesforce Modules.
NOTE
Custom Lightning web components will not throw errors unless Debug Mode is enabled.
For more information, see Debug Lightning Web Components.
1. Ensure you have IDX Workbench, or Salesforce DX set up locally. For information on setting up IDX
Workbench or Salesforce DX, see Set Up Lightning Web Components.
2. Choose which component you want to extend. For a list of Lightning web components, see Vlocity
3. To create a new Lightning web component, navigate to your lwc folder in your project and run the
force:lightning:component:create SFDX command. For example:
sfdx force:lightning:component:create --type lwc --componentname

componentname_extended
To learn more about creating a Lightning web component, see Create Lightning Web Components. For
a complete list of available SFDX commands, see Lightning Commands.

company 37
OmniStudio
4. In your JavaScript file, import and extend the Lightning web component. See code example on this
page.
5. To make the custom Lightning web component compatible with Vlocity Lightning web components, you
must set two metadata tags in your XML configuration file:
• Add the namespace of your Vlocity package using the runtimeNamespace metadata tag. See the
code example on this page. For more information on finding the namespace of your package, see
Viewing the Namespace and Version of the Vlocity Package.
• Set the isExposed metadata tag to true. See code example on this page.
6. (Optional) Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, Enable
a custom Lightning web component to make remote calls by using the Common Action utility. For more
information, see Make Remote Calls from Lightning Web Components using the LWC OmniScript
Action Framework.
Example
In this code example, a custom Lightning web component extends the Button Lightning Web Component.
Replace the NS variable in the code example with the namespace of the Vlocity package you are using.
//.js
import Button from "NS/button";
export default class buttonExtended extends Button {

//override the property here so it gets triggered
onclickbutton() {
this.label = "Button clicked";
}}
//.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?><LightningComponentBundle xmlns="http://

soap.sforce.com/2006/04/metadata">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>button_extended</masterLabel>
<description>Button extended</description>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
<runtimeNamespace>NS</runtimeNamespace>
</LightningComponentBundle>
//.html

company 38
OmniStudio
<template>
//add HTML here to override the template layout
</template>
//_slds.css
//add CSS to override or append the SLDS theme css

.slds-button {
background: #cccccc;
border-color: #dddddd;
}
Deploy Lightning Web Components

Deploy new Lightning web components or change existing components from your local development
environment with Visual Studio and Salesforce DX or IDX Workbench. To set up your development
environment for managing and deploying your components, see Set Up Lightning Web Components.
Required Versions
1. Open your project in Visual Studio.

2. Make sure you have Salesforce DX or IDX Workbench installed. To install Salesforce DX or IDX
Workbench, see Salesforce DX Setup Guide.
3. In the terminal, run the following command to deploy changes to your org:
sfdx force:source:push
For more on deploying components to your org with Visual Studio, see Analyze Your Code and Deploy
It to Your Org.
Launch Lightning Web Component URLs with vlocityLWCWrapper

Add the vlocityLWCWrapper to make Lightning web components in a Lightning page URL addressable.
Lightning web components are not URL addressable by default. The vlocityLWCWrapper wraps the
Lightning web component in a URL addressable aura component.
For information on accessing an LWC OmniScript through a URL, see Launch an LWC OmniScript with
LWC OmniScript Wrapper.
Required Versions
Configuring a URL to launch a Lightning Web Component

1. Add the wrapper by copying the relative path in the example and replacing the NS variable with the
namespace of the Vlocity package. For information on locating the namespace, see Viewing the
Namespace and Version of the Vlocity Package.

company 39
OmniStudio
lightning/cmp/NS__vlocityLWCWrapper?
2. Target the component by adding c__target= to the URL.
lightning/cmp/NS__vlocityLWCWrapper?c__target=
3. Set the URL to target the component by adding c: to indicate a component and add the component
name without dashes using camelCase. For example, to add a component with the name <c-demo-
button> use the syntax c:demoButton.
lightning/cmp/NS__vlocityLWCWrapper?c__target=c:demoButton
4. (Optional) When using the wrapper in a console app, add a Console Tab Icon and a Console Tab Label
by setting the c__tabIcon and c__tabLabel parameters. The c__tabIcon accepts an SLDS Icon , and
c__tabLabel accepts plain text. For example, &c__tabLabel=Custom
Label&c__tabIcon=standard:account renders the console tab shown in this example image.
5. (Optional) Assign additional attributes by passing parameters that match the attribute names.
Parameters must use the c__ prefix.
Example Button Component Code:
<c-button label=”Dynamically Generated” variant=”outline-brand”</c-button>
Example Button Component as a URL addressable component:
lightning/cmp/NS__vlocityLWCWrapper?
c__target=c:button&c__label=Dynamically Generated&c__variant=outline-brand
Example Image:

company 40
OmniStudio
Launching an LWC from a Layout Action

1. From Setup, enter Object Manager into the Quick Find search.
2. Select an Object, and click Buttons, Links, and Actions.
3. Click New Button or Link.
4. Set Display Type to Detail Page Button.
5. Set Content Source to URL.
6. In the URL value, add a vlocityLWCWrapper URL. For information on configuring vlocityLWCWrapper
URLs, see Configuring a URL to launch a Lightning Web Component.
lightning/cmp/NS__vlocityLWCWrapper?c__target=c:demoButton
Access Actions in a Lightning Page with the Power Launcher Component

Access all the available Actions in a Lightning Page using the Power Launcher component's typeahead
functionality. Enable Lightning Record Pages and Lightning App Pages to use the Power Launcher
component by adding the Power Launcher Lightning Web Component to a Lightning Page. See Lightning
Pages.
Required Versions
1. Navigate to the Lightning Page, and open the Lightning App Builder. For information on the Lightning
App Builder, see Lightning App Builder.
2. In the Lightning Components search field, enter powerLauncher.

company 41
OmniStudio
3. Drag the powerLauncher component into the Lightning Page.

4. If you are editing a Record Lightning Page, the powerLauncher component automatically populates the
Record Id property with {RecordId}. The {RecordId} pulls in the Record Id from the Record Page. If
you are not editing a Lightning Page that does not have a Record on it, ensure that the RecordId
property is blank. When the RecordId property is blank, all available actions appear in the Power
Launcher.

company 42
OmniStudio
5. Click Save, and click Back to preview the page.

6. Click on the Power Launcher's search field, or press Command + K, to open the Power Launcher, and
begin typing to view the actions available to the Lightning Page.
Base Vlocity LWC ReadMe Reference

View examples, and learn about available attributes, methods, and other functions from the ReadMes of
each Base Vlocity Lightning web component. To extend components, see Extend Vlocity Lightning Web
Components.
Accordion Displays content as vertically stacked sections.
AccordionSection Adds the basic element inside the Accordion LWC.
Action The base component for all action components.
Alert Displays an SLDS or Newport styled alert.
AsyncUtils A module that exposes a collection of utilities designed to simplify asynchronous operations
BaseLayout All cards extend this component.

company 43
OmniStudio
BaseState All card layouts extend this component.
Button Renders a button element to perform an action
Carousel Displays a series of images inside a container one image at a time.
CarouselItem Displays the basic element inside a Carousel LWC.
Chart Displays data as a chart and enables users to perform actions from the chart.
ChartDonut Extends the Chart LWC and adds the ability to display and resize text at the center of the
donut.
CheckboxGroup Enables users to select from single or multiple options.
CheckboxImageGroup Extends the CheckboxGroup and enables users to select from single or multiple options by
clicking images instead of checkboxes.
Combobox Displays a read-only input element enabling users to select an option from a list of options.
Datasource Fetches data from Salesforce using different data source types by providing relevant input
data.
DatasourceApexRemote Extends Datasource LWC with additional features for fetching data using an Apex class using
a class and method.
DatasourceApexRest Extends Datasource LWC with additional features for fetching data using an Apex class from a
rest endpoint.
DatasourceDataraptor Extends Datasource LWC with additional features for fetching data from a Vlocity DataRaptor.
DatasourceIntegrationprocedure Extends Datasource LWC with additional features for fetching data from an Vlocity Integration
Procedure.
DatasourceQuery Extends Datasource LWC with additional features for fetching data using a Salesforce Object
Query Language (SOQL) query.
DatasourceRest Extends Datasource LWC with additional features for for data fetched from a REST web data
source.
DatasourceSdk Extends Datasource LWC with additional features for data fetched from an SDK.
DatasourceSearch Extends Datasource LWC with additional features for etching data through a Salesforce
Object Search Language (SOSL) query.
DataTable Creates a tabular structure of the data provided.
DataTableCell Adds the basic element inside a DataTable LWC to create individual cells.
DatePicker Displays a date input element with a graphical user interface (GUI) widget that enables the
user to select a date from a calendar.
DateTimePicker Displays a set of input fields with graphical user interface (GUI) widgets that enables the user
to select a date from a calendar and a time from a list.
Form Creates a wrapper around Vlocity form elements to enable form capabilities.
Icon Renders an SVG icon.
Img Displays an available image.
Input Renders an input element.
InteractionWrapper A wrapper component for a customer interaction and the Power Launcher. The component is
used inside a customer interaction records page to see all interactions with a customer and
perform any actions related to the interaction.
Layout Creates a flexible grid system arranging containers on a page or inside other containers.
LayoutItem Adds the basic element inside the parent Layout LWC container, grouping content together to
create sections inside the parent container.
List Creates a searchable and sortable list from the data provided.
ListItems Adds the basic element for the List LWC. Creates the template for each list item.
MaskedInput Extends the Input LWC and controls what you can enter in the form input fields.

company 44
OmniStudio
Menu Creates a menu from the list of menu items provided.
MenuItem Adds the base element for building a menu with the Menu LWC.
Modal Displays content in a layer on top of the app, such as creating or editing a record, or various
types of messaging and wizards.
MonacoEditor Displays the code editor tool used inside Salesforce.
NavigateAction Enables navigation to any of Salesforce PageReference type by leveraging Salesforce's
navigation service.
NavigationUtils A module that exposes a collection of utilities designed to simplify navigational functions.
Newport Loader A utility that exposes a single load function used to ensure the Newport CSS styles load in the
<head> of the page.
OutputField Returns a read-only label, help text and value for the field name of a record.
Pill Displays an input element that displays read-only labels, which can containing links and be
removed from view on-demand.
Popover Displays a non-modal dialog that must pair with a clickable trigger element and contain at
least one focusable element.
Power Launcher Gets and displays a list of vlocity actions based on the recordId.
Power Launcher Action Displays Vlocity actions inside the PowerLauncher LWC and extends Action LWC.
ProgressBar Displays progress of activity on a page.
Prompt Displays simple content on a layer on top of an app. For example, use a prompt to confirm
form submission or to direct the user to confirm a step in a process.
Pubsub Enables data sharing between components. Multiple components can register and receive
data from the same channel.
RadioGroup Enables users to select from single or multiple options by selecting one radio button.
RadioImageGroup Extends the RadioGroup LWC and enables users to choose from single or multiple options by
selecting an image instead of a radio button.
Related List Displays a table of data with a header that supports actions. All attributes from the DataTable
LWC and SLDS Header LWC are available to this component.
RichTextEditor Displays a text editor tool for rich content editing.
SLDS Header Displays a page header, which contains a title, an icon, field data, and action links.
Slider Displays a graphical control element for a user to set a value by moving an indicator
horizontally or vertically.
Spinner Displays an animated image that indicates a feature is loading
Styles Specifies the theme of a component and gets the base CSS for that theme.
Tab Adds the base element inside a Tabset LWC.
Tabset Displays a tabbed container with multiple content areas, only one of which is visible at a time.
Textarea Displays an HTML textarea element for entering multi-line text input that holds an unlimited
number of characters.
TimePicker Displays a graphical user interface (GUI) widget that allows the user to select a time from a list
of options.
Toast A feedback and confirmation tool that runs after the user takes an action.
Toggle Enables a user to pick between two states, enable or disable an option, or select multiple
options.
Tooltip Displays an icon with a popover containing a small amount of text describing an element on
the screen.
Tree Displays the visualization of a structural hierarchy, such as a sitemap for a website or a role
hierarchy in an organization.

company 45
OmniStudio
TreeItem Adds the basic element in a Tree LWC.
Typeahead Provides hints or a list of possible choices based on the text the user enters while filling out a
form or performing a search.
Utility Functions Helper functions available for all Vlocity Lightning Web Components.
Wizard Displays a modal that enables navigating between steps in a process and displays a progress
bar that shows where the user is in the process. Supports custom labels.
Wizard Item Creates the template for each wizard item inside the Wizard LWC.
Accordion Lightning Web Component ReadMe

This page contains the Accordion LWC ReadMe for each Vlocity release.
The Accordion Lightning Web Component displays content as vertically stacked sections. Sections can
embed other components.
Available c-accordion Attributes
Attribute Value Type Required Description

theme slds, nds (Default: string Specifies which theme to use.
slds)
active-section-name string or array Sets the default open section.
allow-multiple- true, false (Default: boolean To open multiple sections at the same time,
sections-open false) set to true.
Example c-accordion Component
activeSectionName = ["a", "b"];

allow = true;
<c-accordion active-section-name="b">
<c-accordion-section name="a" title="a">...</c-accordion-section>
<c-accordion-section name="b" title="b">...</c-accordion-section>
<c-accordion-section name="c" title="c">...</c-accordion-section>
</c-accordion>

<c-accordion
allow-multiple-sections-open="{allow}"
active-section-name="{activeSectionName}"
>
<c-accordion-section name="a" title="a">...</c-accordion-section>
<c-accordion-section name="b" title="b">...</c-accordion-section>
<c-accordion-section name="c" title="c">...</c-accordion-section>
</c-accordion>

company 46
OmniStudio
Available listeners
onaccordionsectionopen
Triggered after a section opens. The event detail contains the name of the section and its uniqueKey which
can be used to identify it using class accordion-class_[uniqueKey]
onaccordionsectionclose
Triggered after a section closes. The event detail contains the name of the section and its uniqueKey which
can be used to identify it using class accordion-class_[uniqueKey]
this.template.addEventListener("onaccordionsectionclose", function(event) {
console.log(
"onAccordionSectionClose : ",
JSON.stringify(event.detail.result)
);
});
this.template.addEventListener("onaccordionsectionopen", function(event) {
console.log("onAccordionSectionOpen : ",
JSON.stringify(event.detail.result));
});
AccordionSection Lightning Web Component ReadMe

This page contains the AccordionSection LWC ReadMe for each Vlocity release.
The Accordion Lightning Web Component is the basic element inside the Accordion Lightning Web
Component.
Available c-accordion-sectionAttributes

label string Sets the label for the section.
name string Used to bind to the parent accordion component. Name must be
unique for each section inside an accordion.
title string Sets the title of the component.
menuitem array yes (if menu size and Defines the list of menu items.
position is given)
Example menuitems
[
{
actionUrl: "javaScript:void(0);",
openUrlIn: "newTab",
name: "menu1",

company 47
OmniStudio
type: "action",
record: {
id: "001122",
value: "Menu1",
label: "Menu1"
}
},
{
name: "menu1",
type: "action",
record: {
id: "001124",
value: "Menu3",
label: "Menu3"
}
}
];
Note: All the keys of the menuItem array object are required. However, the value can be null or empty. For
more info check the readme of the Menu Lightning Web Component.
Example c-accordion-section Component

@track
menuitem = [
{
name: "menu1",
type: "action",
record: {
id: "001122",
value: "Menu1",
label: "Menu1"
}
},
{
name: "menu2",
type: "action",
record: {
id: "001123",
value: "Menu2",
label: "Menu2"

company 48
OmniStudio
}
}]
<c-accordion active-section-name="B">
<c-accordion-section
theme="slds"
label="Accordion With Menu"
name="A"
title="A"
menuitem="{menuitem}"
>
<p>This is the first accordion</p>
<p>.</p>
<p>.</p>
<p>.</p>
</c-accordion-section>
theme="slds"
label="Accordion Without Menu"
name="B"
title="B"
>
<p>This is the second accordion</p>
<p>.</p>
<p>.</p>
<p>.</p>
theme="slds"
label="Accordion Without Menu"
name="C"
title="C"
>
<p>This is the third accordion</p>
<p>.</p>
<p>.</p>
<p>.</p>
</c-accordion>
Action Lightning Web Component ReadMe

This page contains the Action LWC ReadMe for each Vlocity release.
Available c-data-table Attributes

The Action Lightning Web Component is the base component for all action components.

company 49
OmniStudio
Available c-action Attributes

To navigate the page after fetching data from a datasource, use the following attributes.

debug true, false (Default: boolean To enable debug mode, set to true. Prints fetched data
false) inside template and updates JSON for testing.
definition JSON object yes Contains required object. See Available definition
Attributes
disableCache true, false (Default: boolean To turn off caching, set to true.
false)
url URL string Reads the interpolated url.
Example c-action Component

<c-action
onclick={fetchData}
ondata={onsuccesscallback}
onerror={onerrorcallback}
>
<c-button label="Fetch Contact" type="button" variant="neutral"></c-button>
<c-navigate-action
target-type={_targetType}
target-id={_targetId}
target-name={_targetName}
target-params={_targetParams}
target-action={_targetAction}
replace
>
<p>URL: {url}</p>
</c-navigate-action>
</c-action>
@track
query = JSON.stringify({
datasource: {
type: "query",
value: {
query: "SELECT Id, name FROM Contact LIMIT 1"
}
},
url: "/${data[0].Id}",
target: "_blank",
parameters: {},
navigate: false
});

company 50
OmniStudio
fetchData(ev) {
let action = ev.currentTarget;
let def = JSON.parse(this.query);
action.definition = this.query;
action.triggerAction();
}
// Passing these properties down to the navigate-action using attributes.
onsuccesscallback(ev) {
let result = ev.detail.result;
this._targetType = "Record";
this._targetId = result[0].Id;
// Because attribute values are set using attributes, give the ui a chance
to re-render.
Promise.resolve().then(() => {
let navigateAction = this.template.querySelector("c-navigate-action");
navigateAction.navigate();
this.url = ev.target.url;
this.onResult(
result.map(obj => {
var rObj = obj;
rObj.isEdit = false;
return rObj;
})
);
});
}
onerrorcallback(error) {
console.log(error);
}
Available definition Attributes

data JSON object To use the data fetched from the datasource dierctly inside
the definition, add data here.
datasource JSON object yes Defines the source from which to fetch the data. See
Datasource Lightning Web Component for more information.
isTrackingDisabled true, false string To disable tracking, set to false.
(Default: true)
navigate true or false boolean Specifies whether the url navigates or not.
(Default:
false)

company 51
OmniStudio

navigateTo JSON object Defines the navigation service object. If url is not present, this
object is considered for navigation and is interpolated if type
and value are passed. See Salesforce documentation on
navigation
parameters JSON object Adds all fields as url parameters only if url is set.
target current string Specifies which window the url opens. Works only if the url is
window or relative and is not salesforce object data.
new window
trackingObj string Specifies the tracking object of the container FlexCard.
url string Defines the navigation url, which is interpolated if type and
value are passed. The url is given higher preference over the
navigateToobject.
Example definition JSON
Navigate to View Page by Navigation Object
{
"datasource": {
"type": "query",
"value": {
"query": "SELECT Id, name FROM Contact LIMIT 1"
}
},
"navigateTo": {
"type": "standard__objectPage",
"attributes": {
"objectApiName": "${data[0].Id}",
"actionName": "view"
}
},
"navigate": true
}
Navigate to View Page by URL
{
"datasource": {
"type": "query",
"value": {
}
},
"url": "/${data[0].Id}",
"navigate": true
}

company 52
OmniStudio
Navigation to Object with Direct Data
{
"data": {
"Id": "001B000000qBQXDIA4"
},
"url": "/${data.Id}",
"navigate": true
}
Navigate to Object Home Page
{
"navigateTo": {
"attributes": {
"objectApiName": "Account",
"actionName": "home"
}
},
"navigate": true
}
Navigate to Account Create New Screen
{
"navigateTo": {
"attributes": {
"actionName": "new"
}
},
"navigate": true
}
Available c-action Attributes for Links

To perform an action by clicking on the link, use the following attributes.

action-labelclass string Adds an extra class to the action label element.To add multiple
classes, use a space to separate each class, such as 'classone
classtwo'.
action-wrapperclass string Adds an extra class to the action wrapper element. To add
multiple classes, use a space to separate each class, such as
'classone classtwo'.
context-id string Sets action context Id.

company 53
OmniStudio

icon-color string Sets the color of the icon.
icon-extraclass string Adds an extra class to the icon element. To add multiple
classtwo'.
icon-size xx-small, string Sets the size of the icon.
small,
medium,
large, x-large
icon-url URL string Sets the icon URL. Use with Newport Design System (NDS)
theme only.
icon-wrapperclass string Adds an extra class to the icon wrapper element. To add
s-object-type sObject string Sets action sObject type.
state-action JSON object yes Sets the action Info.
state-obj JSON object Contains the layout/card records.
styles string To set inline styles of label and text-align property. it should be
in this formt style = { "label": "", "textAlign" :
""}
theme slds, nds string Specifies which theme to use.
(Default:
slds)
Example c-action Component (inside Vlocity Card state template)
<c-action
icon-extraclass="slds-m-right_small"
state-obj={obj}
context-id={contextId}
s-object-type={sObjectType}
state-action={item}
action-wrapperclass="slds-size--1-of-1"
action-labelclass="slds-size--7-of-8"
icon-wrapperclass="slds-size--1-of-8"
></c-action>

Available c-action Attributes

To navigate the page after fetching data from a data source, use the following attributes.

debug true, false (Default: boolean To enable debug mode, set to true. Prints fetched data inside
false) the template and updates JSON for testing.
definition JSON object yes Contains the required object. See Available
definitionAttributes

company 54
OmniStudio

disableCache true, false (Default: boolean To turn off caching, set to true.
false)
url URL string Reads the interpolated URL.

data JSON object To use the data fetched from the datasource directly inside the
definition, add data here.
datasource JSON object yes Defines the source from which to fetch the data. See Datasource
Lightning Web Component for more information.
navigate true or false boolean Specifies whether the URL navigates or not.
(Default:
false)
navigateTo JSON object Defines the navigation service object. If URL is not present, this
object is considered for navigation and is interpolated if type and
value are passed. See Salesforce documentation on navigation
parameters JSON object Adds all fields as URL parameters only if url is set.
target current string Specifies which window the URL opens. Works only if the URL is
window or relative and is not salesforce object data.
new window
url string Defines the navigation URL, which is interpolated if type and value
are passed. The url is given a higher preference over the
navigateToobject.
<c-action
onclick={fetchData}
>
<c-navigate-action
replace
>
<p>URL: {url}</p>
</c-action>

company 55
OmniStudio
@track
datasource: {
type: "query",
value: {
}
},
target: "_blank",
parameters: {},
navigate: false
});
fetchData(ev) {
}
// I'm passing these properties down to the navigate-action via
// attributes.
// Because we're setting the attribute values via attributes,

// we need to give the ui a chance to re-render.
this.onResult(
result.map(obj => {
var rObj = obj;
return rObj;
})
);
});
}
console.log(error);

company 56
OmniStudio
Examples for definition JSON
{
"datasource": {
"type": "query",
"value": {
}
},
"navigateTo": {
"attributes": {
}
},
"navigate": true
}
{
"datasource": {
"type": "query",
"value": {
}
},
"url": "/${data[0].Id}",
"navigate": true
}
{
"data": {
"Id": "001B000000qBQXDIA4"
},
"navigate": true
}

company 57
OmniStudio
{
"navigateTo": {
"attributes": {
}
},
"navigate": true
}
{
"navigateTo": {
"attributes": {
"actionName": "new"
}
},
"navigate": true
}


classes, use a space to separate each class, such as
small,
medium,
large, x-large
theme only.

company 58
OmniStudio

(Default: slds)
<c-action
state-obj={obj}
state-action={item}
></c-action>
Available c-action Attributes for Navigation


debug true, false (Default: boolean To enable debug mode, set to true. Prints fetched data inside
false) template and updates JSON for testing.
definition JSON object yes Contains required object. See Available definition Attributes
url URL string Reads the interpolated url.
Available Definition Attributes

data JSON object To use the data fetched from the datasource directly inside the
definition, add data here.
datasource JSON object yes Defines the source from which to fetch the data. See Datasource
Lightning Web Component for more information.
navigate true or false boolean Specifies whether the url has to navigate or not.
(Default: false)
navigateTo JSON object Defines the navigation service object. If url is not present, this object
will be considered for navigation and is interpolated if type and value
are passed.
parameters JSON object Adds all fields as url parameters only if url is set.

company 59
OmniStudio

target current window string Specifies which window the url opens. Works only if the url is
or new window relative and is not salesforce object data.
url string Defines the navigation url, which is interpolated if type and value are
passed. The url is given higher preference over the navigateTo
object.

<c-action
onclick={fetchData}
>
<c-navigate-action
replace
>
<p>URL: {url}</p>
</c-action>
@track
datasource: {
type: "query",
value: {
}
},
target: "_blank",
parameters: {},
navigate: false
});
fetchData(ev) {
}

company 60
OmniStudio

// attributes.

this.onResult(
result.map(obj => {
var rObj = obj;
return rObj;
})
);
});
}
console.log(error);
}
{
"datasource": {
"type": "query",
"value": {
}
},
"navigateTo": {
"attributes": {
}
},

company 61
OmniStudio
"navigate": true
}
{
"datasource": {
"type": "query",
"value": {
}
},
"url": "/${data[0].Id}",
"navigate": true
}
{
"data": {
"Id": "001B000000qBQXDIA4"
},
"navigate": true
}
{
"navigateTo": {
"attributes": {
}
},
"navigate": true
}
{
"navigateTo": {
"attributes": {
"actionName": "new"

company 62
OmniStudio
}
},
"navigate": true
}


small,
medium,
large, x-large
theme only.
(Default: slds)

<c-action
state-obj={obj}
state-action={item}
></c-action>

company 63
OmniStudio
Available c-action Attributes for Navigation


debug true, false (Default: boolean To enable debug
false) mode, set to true.
Prints fetched data
inside template and
updates JSON for
testing.
definition JSON object yes Contains required
object. See Available
definition Attributes
url URL string Reads the
interpolated url.

data JSON object To use the data
fetched from the
datasource directly
inside the definition,
add data here.
datasource JSON object yes Defines the source
from which to fetch
the data. See
Datasource Lightning
Web Component for
more information.
navigate true or false (Default: boolean Specifies whether the
false) url has to navigate or
not.
navigateTo JSON object Defines the navigation
service object. If url is
not present, this
object will be
considered for
navigation and is
interpolated if type
and value are passed.
See Salesforce
documentation on
navigation.
parameters JSON object Adds all fields as url
parameters only ifurl
is set.
target current window or new string Specifies which
window window the url opens.
Works only if the url is
relative and is not
salesforce object data.

company 64
OmniStudio

url string Defines the navigation
url, which is
interpolated if type
and value are passed.
The url is given higher
preference over
thenavigateTo object.
<c-action
onclick={fetchData}
>
<c-navigate-action
replace
>
<p>URL: {url}</p>
</c-action>
@track
query == JSON.stringify({
datasource: {
type: "query",
value: {
}
},
target: "_blank",
parameters: {},
navigate: false
});
fetchData(ev) {
let action == ev.currentTarget;
let def == JSON.parse(this.query);
action.definition == this.query;

company 65
OmniStudio
}
// attributes.
let result == ev.detail.result;
this._targetType == "Record";
this._targetId == result[0].Id;

let navigateAction == this.template.querySelector("c-navigate-action");
this.url == ev.target.url;
this.onResult(
result.map(obj => {
var rObj == obj;
rObj.isEdit == false;
return rObj;
})
);
});
}
console.log(error);
}
{
"datasource": {
"type": "query",
"value": {
}
},
"navigateTo": {
"attributes": {

company 66
OmniStudio
}
},
"navigate": true
}
{
"datasource": {
"type": "query",
"value": {
}
},
"url": "/${data[0].Id}",
"navigate": true
}
{
"data": {
"Id": "001B000000qBQXDIA4"
},
"navigate": true
}
{
"navigateTo": {
"attributes": {
}
},
"navigate": true
}
{
"navigateTo": {
"attributes": {

company 67
OmniStudio
"actionName": "new"
}
},
"navigate": true
}


action-labelclass string Adds an extra class to
the action label
element.To add
multiple classes, use
a space to separate
each class, such as
`classone classtwo'.
action-wrapperclass string Adds an extra class to
the action wrapper
element. To add
a space to separate
each class, such as
icon-extraclass string Adds an extra class to
the icon element. To
add multiple classes,
use a space to
separate each class,
such as `classone
classtwo'.
icon-size xx-small, small, string Sets the size of the
medium, large, x-large icon.
icon-url URL string Sets the icon URL.
Use with Newport
Design System (NDS)
theme only.
icon-wrapperclass string Adds an extra class to
the icon wrapper
element. To add
a space to separate
each class, such as
s-object-type sObject string Sets action sObject
type.
state-obj JSON object Contains the layout/
card records.
theme slds, nds (Default: string Specifies which theme
slds) to use.

company 68
OmniStudio
<c-action
state-obj={obj}
state-action={item}
></c-action>
Alert Lightning Web Component ReadMe

This page contains the Alert LWC ReadMe for each Vlocity release.

The Alert Lightning Web Component displays an SLDS or Newport alert.
Available c-alert Attributes

theme slds, nds string Specifies the theme to use.
(Default: slds)
message string Pass simple message into the component. For messages
containing markup, use the default slot. If slotted content is passed,
Alert#message is ignored.
variation info, warning, string An enum value representing the components style variation.
error, offline
(Default: info)
dismissible true, false boolean If true, the alert can be dismissed by user.
(Default: false)
icon string The icon name in spriteName:iconNameformat. For example
utility:info. Pass an empty string to hide. See SLDS icons.
Example c-alert* Component
<c-alert theme="slds"
variation="info|warning|error|offline"
icon="utility:trail"
message="This is a simple message.">
<span>For more <em>complex</em> messaging, use the default slot.
<a href="https://lwc.dev/guide/composition#pass-markup-into-
slots" target="_blank">Using slots.</a>
</span>
</c-alert>

company 69
OmniStudio
Available Custom Labels
Label ApiName Description

Close cmpClose Assistive text for the icon to close or dismiss the alert.
Available Methods
dismiss()
Dismisses the alert.
Available Classes
Alert
Static class of c-alert component.
Available Events
dismissed
Fires when the alert is dismissed.
Available Variations
enum
Enum for style variations. Is read-only.
The Alert Lightning Web Component displays an SLDS or Newport alert.
Available c-alert Attributes

(Default: slds)
message string Pass simple message into the component. For messages
containing markup, use the default slot. If slotted content is passed,
Alert#message is ignored.
variation info, warning, string An enum value representing the components style variation.
error, offline
(Default: info)
dismissible true, false boolean If true, the alert is can be dismissed by user.
(Default: false)
icon string The icon name in spriteName:iconNameformat. For example
utility:info. Pass an empty string to hide. See SLDS icons.
Example c-alert Component
<c-alert theme="slds"
variation="info|warning|error|offline"

company 70
OmniStudio
icon="utility:trail"
message="This is a simple message.">
<span>For more <em>complex</em> messaging, use the default slot.
<a href="https://lwc.dev/guide/composition#pass-markup-into-
slots" target="_blank">Using slots.</a>
</span>
</c-alert>
Available Methods
dismiss()
Dismisses the alert.
Available Classes
Alert
Static class of c-alert component.
Available Events
dismissed
Fires when the alert is dismissed.
Available Variations
enum
Enum for style variations. Is read-only.
AsyncUtils ReadMe
This page contains an AsyncUtils ReadMe for each Vlocity release.

This module exposes a collection of utilities designed to simplify asynchronous operations.
ns/asyncUtils.debounce(func, wait, immediate)

Delay the execution of a function for the given amount of time. Use to throttle the the call rate of a method
that can be repeatedly called.
Kind: static method of ns/asyncUtils
Param Type Description

func function Function to execute after the given duration.
wait number Time in milliseconds to delay.
immediate boolean When true, will execute on the front end onf the duration instead of after.
ns/asyncUtils.delay(waitFor, [result])
Delays execution in the form of a promise.

company 71
OmniStudio
Kind: static method of ns/asyncUtils

waitFor number Number of milliseconds to delay by.
[result] * Pass through a previous result.
BaseLayout Lightning Web Component ReadMe

This page contains a BaseLayout LWC ReadMe for each Vlocity release.

All card layouts extend BaseLayout Lightning Web Component as a mixin.
Available baseLayout Attributes

record-id string Specifies params id used for the card.
theme slds, nds string Specifes the theme to use.
(Default: slds)
records string or array Specifies the data to pass to the cards inside the layout.
parent string Sets parent if the layout is a flyout.
definition string Specifies the complete JSON obj, which defines the data and
definition for the card.
isLoaded true, false boolean To load the layout, set to true.
(Default: false)
debug boolean Enables the debug mode.
Example baseLayout Component
export default class CardCanvas extends BaseLayout(LightningElement) {

// component definition
}
Available Methods
reloadLayout()
Fetches the updated data from the data source and reloads the layout.
manipulateData()
Manipulates records before passing to cards. Updates the records, passes them to the cards.
fetchUserProfile()
Call this method to fetch the userProfile data. By default, when the fetch User Info is checked, this fetches
the value and stores it in the userProfile field. If the data is not present, you can call this method to
fetch it again.

company 72
OmniStudio
setDefinition(val)
The definition is auto-generated when a layout is created in the Card Designer, defining the layout. If it
needs to be changed at runtime, you can call this method and pass val as the card definition.
evaluateMetatags()
By default, this method gets triggered when setting the definition value and sets the metatag from the
definition. To set the metadata manually, use this method.
loadRecords()
Fetches the data again from the card data source and updates the records data.
All card layouts extend BaseLayout Lightning Web Component as a mixin.
Available baseLayout Attributes

record-id string The params id used for the card.
(Default:
slds)
records string or array Data to pass to the cards inside the layout.
parent string Set parent if the layout is a flyout.
definition string The complete JSON obj which defines the data and definition for
the card.
isLoaded boolean It is false until the layout is loaded.
Example baseLayout Component
export default class CardCanvas extends BaseLayout(LightningElement) {

}
BaseState Lightning Web Component ReadMe

This page contains a BaseState LWC ReadMe for each Vlocity release.

All card states extend BaseState Lightning Web Component as a mixin.
Available baseState Attributes

record-id string Specifies the params id used for the state.

company 73
OmniStudio

(Default: slds)
records string or array Specifies the complete data obj from a layout or card.
obj string Sets the state object.
state string Sets the state definition.
selectedState true, false boolean To set as the selected state and make active, set to true.
(Default: false)
userProfile string or object Sets the user profile for the component, which is the same
user profile for the org.
Example baseState Component
import { BaseState } from "c/baseState";
export default class CardActiveState extends BaseState(LightningElement) {

}
Available Methods
enableEditMode
An API method that sets edit mode to true.
disableEditMode
An API method that sets edit mode to false.
updateObject
Updates a record, and takes the record object as the parameter.
toggleFlyout
Shows or hides the flyout.
handleSmartActions
Reloads the smartActions. It can also be triggerd by pubsub, such as channel: smartActions , name:
reload.
All card states extend BaseState Lightning Web Component as a mixin.

company 74
OmniStudio
Available baseState Attributes

record-id string This is the params id used for the state.
theme slds, nds string Specifes the theme to use.
(Default:
slds)
records string or array The complete data obj from layout or card.
obj string Sets the state object.
state string Sets the state definition.
selectedState boolean Is true if this state is the selected state and is active.
userProfile string or object Sets the userprofile for the component, which is the same
userprofile for the org.
enableEditMode method Fire this method to enable the edit mode.
disableEditMode method Fire this method to disable the edit mode.
Example baseState Component
export default class CardActiveState extends BaseState(LightningElement) {

}
Button Lightning Web Component

This page contains a Button LWC ReadMe for each Vlocity release.

The Button Lightning Web Component renders a button element to perform an action.
Available c-button Attributes

bg-color Accepts name, rgb and hex string Adds a background color to the button element.
disabled true, false (Default: false) boolean To disable button, set to false.
disable-tab true, false (Default: false) boolean To remove the button element from tab focus.
extraclass string Adds a class to the button element. To add multiple
icon-bg-color Accepts name, rgb and hex string Adds a background color to the icon.
values.
icon-fill Accepts name, rgb and hex string Adds color inside the icon.
values.
icon-name (Format: utility:close) string Adds an icon to the button. See SLDS icons.
icon-position left, right (Default: left, if string Sets the position of the button icon.
label is specified)

company 75
OmniStudio

icon-size xx-small, x-small, small, string Sets the icon size for the button element.
medium, large (Default: xx-
small)
icon-url URL string Overrides the defined url for the icon svg resource.
icon-variant inverse, warning, error , string Changes the appearance of the icon. The inverse
success, light, default variant adds a white fill on a dark background.
(Default: default)
label string Adds a visible label for the button element.
styles string To set inline styles of label. it should be in this formt
style = { "label": ""}
theme slds, nds (Default: slds) string Sets the theme for the button.
type reset, button, submit Sets the type of button element.
(Default: button)
variant string Sets the style of the button based on the
typesupported by the chosen theme. For example,
success, brand, and so on.
Example c-button Component
<c-button
icon-url="/slds"
variant="brand"
disabled=""
label="disabled"
icon-name="utility:close"
icon-position="right"
></c-button>

values.
values.
icon-position left, right (Default: left) string Sets the position of the button icon.

company 76
OmniStudio

small)
(Default: default)
(Default: button)
<c-button
icon-url="/slds"
variant="brand"
disabled=""
label="disabled"
></c-button>
Button Lightning Web Component


values.
values.
icon-position left, right (Default: left) string Sets the position of the button icon.
small)

company 77
OmniStudio

(Default: default)
(Default: button)
<c-button
icon-url="/slds"
variant="brand"
disabled=""
label="disabled"
></c-button>

bg-color Accepts name, rgb string Adds a background
and hex color to the button
element.
disabled true, false (Default: boolean To disable button, set
false) to false.
disable-tab true, false (Default: boolean To remove the button
false) element from tab
focus.
extraclass string Adds a class to the
button element. To
use a space to
such as `classone
classtwo'.
icon-bg-color Accepts name, rgb string Adds a background
and hex values. color to the icon.
icon-fill Accepts name, rgb string Adds color inside the
and hex values. icon.

company 78
OmniStudio

icon-name (Format: utility:close) string Adds an icon to the
button. See SLDS
icons.
icon-position left, right (Default: left) string Sets the position of
the button icon.
icon-size xx-small, x-small, string Sets the icon size for
small, medium, large the button element.
(Default: xx-small)
icon-url URL string Overrides the defined
url for the icon svg
resource.
icon-variant inverse, warning, string Changes the
error , success, light, appearance of the
default (Default: icon. The inverse
default) variant adds a white
fill on a dark
background.
label string Adds a visible label for
the button element.
theme slds, nds (Default: string Sets the theme for the
slds) button.
type reset, button, submit Sets the type of button
(Default: button) element.
variant string Sets the style of the
button based on the
typesupported by the
chosen theme. For
example, success,
brand, and so on.
<c-button
icon-url="/slds"
variant="brand"
disabled=""
label="disabled"
></c-button>
Carousel Lightning Web Component ReadMe

This page contains a Carousel LWC ReadMe for each Vlocity release.
The Carousel Lightning Web Component displays a series of images inside a container. Images display
one at a time and you can set how to navigate between images (by image thumbnail or colored dots).

company 79
OmniStudio
Available c-carousel Attributes

arrow true, false boolean To display next and previous navigation arrows, set to false.
(Default: true)
extraclass string Sets extra class to parent level element. To add multiple classes,
use a space to separate each class, such as 'classone classtwo'.
interval number If set, adds timer in milliseconds, with play and pause controls.
mode preview, dots string Sets which navigation type to display.
(Default: dots)
thumbnaillimit number Limits the number of thumbnails to display. Controls thumbnail
width when thumnaillimit is greater than the number of carousel
items.
Example c-carousel Component
<c-carousel
interval="5000"
arrow="false"
thumbnaillimit="3"
>
<c-carousel-item
src="{item.image}"
header="{item.title}"
description="{item.description}"
>
</c-carousel-item>
<c-carousel-item
src="{item.image}"
>
</c-carousel-item>
<c-carousel-item
src="{item.image}"
>
</c-carousel-item>
</c-carousel>
The Carousel Lightning Web Component displays a series of images inside a container. Images display
one at a time and you can set how to navigate between images (by image thumbnail or colored dots).

company 80
OmniStudio
Available c-carousel Attributes

arrow true, false (Default: boolean To display next and
true) previous navigation
arrows, set to false.
extraclass string Sets extra class to
parent level element.
To add multiple
classes, use a space
to separate each
class, such as
interval number If set, adds timer in
milliseconds, with play
and pause controls.
mode preview, dots (Default: string Sets which navigation
dots) type to display.
thumbnaillimit number Limits the number of
thumbnails to display.
Controls thumbnail
width when
thumnaillimit is greater
than the number of
carousel items.
Example c-carousel Component

<c-carousel
interval="5000"
arrow="false"
thumbnaillimit="3"
>
<c-carousel-item
src="{item.image}"
>
</c-carousel-item>
<c-carousel-item
src="{item.image}"
>
</c-carousel-item>
<c-carousel-item
src="{item.image}"

company 81
OmniStudio
>
</c-carousel-item>
</c-carousel>
CarouselItem Lightning Web Component ReadMe

This page contains a CarouselItem LWC ReadMe for each Vlocity release.
The CarouselItem Lightning Web Component is the basic element inside the Carousel Lightning Web
Component. Each carousel item populates the carousel images.
Available c-carousel-item Attributes

assertive-text string Adds assistive text for the image.
description string Adds text to display under the header.
header string Adds text to display under the image.
src URL string yes Adds the image source path.
thumbnail URL string Adds the thumbnail source path.
Example c-carousel-item Component

<c-carousel
interval="5000"
arrow="false"
thumbnaillimit="3"
>
<c-carousel-item
src="{item.image}"
>
</c-carousel-item>
<c-carousel-item
src="{item.image}"
>
</c-carousel-item>
<c-carousel-item
src="{item.image}"

company 82
OmniStudio
>
</c-carousel-item>
</c-carousel>
The CarouselItem Lightning Web Component is the basic element inside the Carousel Lightning Web
Component. Each carousel item populates the carousel images.
Available c-carousel-item Attributes

assertive-text string Adds assistive text for
the image.
description string Adds text to display
under the header.
header string Adds text to display
under the image.
src URL string yes Adds the image
source path.
thumbnail URL string Adds the thumbnail
source path.
Example c-carousel-item Component
<c-carousel
interval="5000"
arrow="false"
thumbnaillimit="3"
>
<c-carousel-item
src="{item.image}"
>
</c-carousel-item>
<c-carousel-item
src="{item.image}"
>
</c-carousel-item>
<c-carousel-item
src="{item.image}"

company 83
OmniStudio
>
</c-carousel-item>
</c-carousel>
Chart Lightning Web Component ReadMe

This page contains a Chart LWC ReadMe for each Vlocity release.

The Chart Lightning Web Component displays data as a chart and enables users to perform actions from
the chart.
Available c-chart Attributes

values array yes Contains the data for the chart.
labels array yes Contains the labels for the chart.
type line, bar, radar, string yes Sets the type of the chart to display. See also
doughnut, pie, ChartDonut Lightning Web Component, which
polarArea, bubble, extends the Chart component for a dougnut chart.
scatter
background-color RGB value or color array yes Sets background color for each data segment on
name (Default: the chart.
rgba(0, 0, 0, 0.1))
background RGB value or color string Sets the color for the background of the chart.
name (Default: white)
channel query, dataraptor string Sets the data source type.
aspectRatio (Default: 2) number Provides the canvas aspect ratio. (For example,
width : height, a value of 1 representing a square
canvas.)
cutoutPercentage (Default : 50 for number If type is "doughnut", sets the percentage of the
doughnut chart. doughnut chart that is cut out of the middle.
Default: 0 for all other
chart types)
displayLegend true, false (Default: boolean To hide chart legend, set to false.
true)
disableAnimateRotate true, false (Default: boolean To enable chart rotation animation, set to false.
true)
disableAnimateScale true, false (Default: boolean To disable chart scaling animation from the center
false) outwards, set to true.
icon-class string Adds an extra class to the icon element. To add
multiple classes, use a space to separate each
class, such as 'classone classtwo'.
icon-name (Format: utility:add) string Sets the icon for the chart. See SLDS icons.
icon-size xx-small, x-small, string Sets the icon size for the button element.
small, medium, large
icon-url URL string Sets the icon URL, overriding the defined url for
the svg resource. Used with Newport Design
System (NDS) theme only.
title string Adds a title to the chart.

company 84
OmniStudio

minSizeResizeable boolean Adds a minimum canvas width for the chart. This
attribute is required if you are using the chart inside
a responsive parent where resizing is required.
For more chart configuration options, see Chart.js.
Example c-chart Component
<c-chart
values="{val2}"
labels="{labels2}"
type="{type2}"
background-color="{backgroundColor2}"
></c-chart>
Example Using Query as a Data Source

Set the channel attribute to a value of "query".
// import the dataHandler method

import { getDataHandler } from "c/utility";
// declare the query

recordSource = {
type: "query",
{
query: "SELECT FirstName,Id FROM Contact"
}
};
// declare a variable with track

@track
testLabel1 = [];
let request = JSON.stringify(this.recordSource);
// call the getDataHandler and format the response from the query
getDataHandler(
request
).then(data => {
console.log('request from query : ',data);
this.formatResponse(data);
}).catch(error => {
console.log('error from query : ',error);
});

company 85
OmniStudio
<c-chart
channel="query"
values="{testVal1}"
labels="{testLabel1}"
type="{testType1}"
background-color="{testBackgroundColor1}"
></c-chart>
Example Using DatarRaptor as a Data Source

To use a DataRaptor as a data source:
• Create a DataRaptor to use with the Chart component.

• Set the channel attribute to a value of "dataraptor".
• Add and configure a DatasourceDataRaptor component. See DatasourceDataRaptor Lightning Web
Component.
@track
testLabel2 = [];
<c-chart
values="{testVal2}"
type="{testType2}"
channel="dataraptor"
>
</c-chart>
<c-datasource-dataraptor
bundlename="GetContactDetails"
inputmap="{inputMap}"
debug="true"
>
</c-datasource-dataraptor>
Example Values for Arrays

// Labels needs to be an array.
labels = ['Red', 'Orange', 'Yellow', 'Green', 'Blue'];
// Incase you provide a string it will get converted into character array
labels = 'hello' /* This Becomes */ labels = ['h','e','l','l','o']
// Values needs to be an array.

values = [10,5,45,25,15]
//or

company 86
OmniStudio
values = [,,,4,2]
//or
values = [3.5,6,7,0,8.5]
/****** CANNOT BE NULL *****/
// BackgroundColor needs to be an array.
// can be RGB colors

backgroundColor1 = [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)'
];
// can be string color names
backgroundColor1 = ['Red','Green','Yellow']
the chart.

values array yes Contains the data for the chart.
labels array yes Contains the labels for the chart.
type line, bar, radar, string yes Sets the type of the chart to display. See also
doughnut, pie, ChartDonut Lightning Web Component, which
polarArea, bubble, extends the Chart component for a dougnut chart.
scatter
background-color RGB value or color array yes Sets background color for each data segment on
name (Default: rgba(0, the chart.
0, 0, 0.1))
background RGB value or color string Sets the color for the background of the chart.
name (Default: white)
channel query, dataraptor string Sets the data source type.
aspectRatio (Default: 2) number Provides the canvas aspect ratio. (For example,
width : height, a value of 1 representing a square
canvas.)
cutoutPercentage (Default : 50 for number If type is "doughnut", sets the percentage of the
doughnut chart. doughnut chart that is cut out of the middle.
Default: 0 for all other
chart types)
displayLegend true, false (Default: boolean To hide chart legend, set to false.
true)

company 87
OmniStudio

disableAnimateRotate true, false (Default: boolean To enable chart rotation animation, set to false.
true)
disableAnimateScale true, false (Default: boolean To disable chart scaling animation from the center
false) outwards, set to true.
icon-class string Adds an extra class to the icon element. To add
icon-name (Format: utility:add) string Sets the icon for the chart. See SLDS icons.
icon-size xx-small, x-small, string Sets the icon size for the button element.
small, medium, large
icon-url URL string Sets the icon URL, overriding the defined url for
the svg resource. Used with Newport Design
System (NDS) theme only.
title string Adds a title to the chart.
<c-chart
values="{val2}"
labels="{labels2}"
type="{type2}"
></c-chart>

Set the channel attribute to a value of "query".


recordSource = {
type: "query",
{
}
};

@track
testLabel1 = [];
let request = JSON.stringify(this.recordSource);

company 88
OmniStudio
getDataHandler(
request
).then(data => {
}).catch(error => {
});
<c-chart
channel="query"
values="{testVal1}"
type="{testType1}"
></c-chart>


• Set the channel attribute to a value of "dataraptor".
• Add and configure a DatasourceDataRaptor component. See DatasourceDataRaptor Lightning Web
Component.
@track
testLabel2 = [];
<c-chart
values="{testVal2}"
type="{testType2}"
>
</c-chart>
debug="true"
>

company 89
OmniStudio

labels = ['Red', 'Orange', 'Yellow', 'Green', 'Blue'];
labels = 'hello' /* This Becomes */ labels = ['h','e','l','l','o']

values = [10,5,45,25,15]
//or
values = [,,,4,2]
//or
values = [3.5,6,7,0,8.5]

backgroundColor1 = [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)'
];
backgroundColor1 = ['Red','Green','Yellow']
the chart.

values array yes Contains the data for
the chart.
labels array yes Contains the labels for
the chart.

company 90
OmniStudio

type line, bar, radar, string yes Sets the type of the
doughnut, pie, chart to display. See
polarArea, bubble, alsoChartDonut
scatter Lightning Web
Component, which
extends the Chart
component for a
dougnut chart.
background-color RGB value or color array yes Sets background color
name (Default: rgba(0, for each data segment
0, 0, 0.1)) on the chart.
background RGB value or color string Sets the color for the
name (Default: white) background of the
chart.
channel query, dataraptor string Sets the data source
type.
aspectRatio (Default: 2) number Provides the canvas
aspect ratio. (For
example, width :
height, a value of 1
representing a square
canvas.)
cutoutPercentage (Default : 50 for number If type is ``doughnut'',
doughnut chart. sets the percentage of
Default: 0 for all other the doughnut chart
chart types) that is cut out of the
middle.
displayLegend true, false (Default: boolean To hide chart legend,
true) set to false.
disableAnimateRotate true, false (Default: boolean To enable chart
true) rotation animation, set
to false.
disableAnimateScale true, false (Default: boolean To disable chart
false) scaling animation from
the center outwards,
set to true.
icon-class string Adds an extra class to
the icon element. To
use a space to
such as `classone
classtwo'.
icon-name (Format: utility:add) string Sets the icon for the
chart. See SLDS
icons.
icon-size xx-small, x-small, string Sets the icon size for

small, medium, large the button element.

company 91
OmniStudio

icon-url URL string Sets the icon URL,
overriding the defined
url for the svg
resource. Used with
Newport Design
System (NDS) theme
only.
title string Adds a title to the
chart.
<c-chart
values="{val2}"
labels="{labels2}"
type="{type2}"
></c-chart>

Set the channel attribute to a value of ``query''.


recordSource == {
type: "query",
{
}
};

@track
testLabel1 == [];
let request == JSON.stringify(this.recordSource);
getDataHandler(
request
).then(data => {

company 92
OmniStudio
}).catch(error => {
});
<c-chart
channel="query"
values="{testVal1}"
type="{testType1}"
></c-chart>


• Set the channel attribute to a value of ``dataraptor''.
• Add and configure a DatasourceDataRaptor component. SeeDatasourceDataRaptor Lightning Web
Component.
@track
testLabel2 == [];
<c-chart
values="{testVal2}"
type="{testType2}"
>
</c-chart>
debug="true"
>

labels == ['Red', 'Orange', 'Yellow', 'Green', 'Blue'];
labels == 'hello' /* This Becomes */ labels == ['h','e','l','l','o']

company 93
OmniStudio

values == [10,5,45,25,15]
//or
values == [,,,4,2]
//or
values == [3.5,6,7,0,8.5]

backgroundColor1 == [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)'
];
backgroundColor1 == ['Red','Green','Yellow']
ChartDonut Lightning Web Component ReadMe

This page contains a ChartDonut LWC ReadMe for each Vlocity release.
The ChartDonut Lightning Web Component extends the Chart Lightning Web Component and adds
additional features. This component adds the ability to display and resize text at the center of the donut.
Available c-chart-donut Attributes

center-text string If set, displays text inside the center of the donut.
text-color (Default: #000000) string Defines the color of the text.
font-style (Default: Arial) string Sets the font style of the display text.
side-padding (Default: 20px) string Sets the side padding for the text inside. Value must be 20px or
greater.
Example c-chart-donut
<c-chart-donut
values={val1}
labels={labels1}
icon-class="classOne"

company 94
OmniStudio
type={type1}
title="Doughnut Chart"
background-color={backgroundColor1}
cutout-percentage="30"
center-text={centerText}
text-color={textColor}
font-style={fontStyle}
side-padding={sidePadding}
>
</c-chart-donut>
Example JavaScript for Center Text Feature

To implement the center text feature:
• Pass a string value to the center-text attribute.

• Pass a plugin to the plugin sevice. See Chart.js plugins for more information.
let plugin = function(chart) {

if (chart.config.options.elements.center) {
// Your plugin code
}
};
this.renderChart(this.config, this.template, this.templateName, plugin);
The ChartDonut Lightning Web Component extends the Chart Lightning Web Component and adds
additional features. This component adds the ability to display and resize text at the center of the donut.
Available c-chart-donut Attributes

center-text string If set, displays text
inside the center of
the donut.
text-color (Default: #000000) string Defines the color of
the text.
font-style (Default: Arial) string Sets the font style of
the display text.
side-padding (Default: 20px) string Sets the side padding
for the text inside.
Value must be 20px or
greater.
Example c-chart-donut
<c-chart-donut
values={val1}
labels={labels1}

company 95
OmniStudio
icon-class="classOne"
type={type1}
title="Doughnut Chart"
background-color={backgroundColor1}
cutout-percentage="30"
center-text={centerText}
text-color={textColor}
font-style={fontStyle}
side-padding={sidePadding}
>
</c-chart-donut>
Example JavaScript for Center Text Feature

To implement the center text feature:
• Pass a string value to the center-text attribute.

• Pass a plugin to the plugin sevice. See Chart.js plugins for more information.
let plugin == function(chart) {

if (chart.config.options.elements.center) {
// Your plugin code
}
};
this.renderChart(this.config, this.template, this.templateName, plugin);
CheckboxGroup Lightning Web Component ReadMe

This page contains a CheckboxGroup LWC ReadMe for each Vlocity release.

The CheckboxGroup Lightning Web Component enables users to select from single or multiple options.
Available c-checkbox-group Attributes

alignment vertical, horizontal string Sets the orientation of the checkbox group.
(Default for 'slds' theme
is vertical) (Default for
'nds' theme is horizontal)
checked- Accepts name, RGB, string When type is set to 'icon', sets the checkbox button
background-color and Hex values. background color when checkbox is checked.
(Default: slds brand
blue)
checked-border- Accepts name, RGB,and string When type is set to 'icon', sets the checkbox button
color Hex values. (Default: border color when checkbox is checked.
slds brand blue)

company 96
OmniStudio

checked-icon- Accepts name, RGB, string When type is set to 'icon', sets the checkbox icon
color and Hex values. color when checkbox is checked.
blue)
checked-icon- (Default: utility:add) string When type is set to 'icon', sets icon to use when
name checkbox is checked.
checked-label- Accepts name, RGB, string When type is set to 'icon', sets the checkbox label
color and Hex values. color when checkbox is checked.
blue)
disabled If set, the checkbox group is disabled and users
cannot interact with it.
extraclass Adds a class to the main container element. To add
icon-url URL string Sets the icon URL, overriding the defined url for the
svg resource.
label string yes Sets visible label for the checkbox group.
message-when- string To display a message when no checkbox is selected
value-missing and required is set to true, set this attribute.
name string Specifies the name of the checkbox group. Only only
one button can be selected if a name is specified for
the group.
options string yes Defines the array of label-value pairs for each
checkbox.
required If set, a checkbox must be selected before the form
can be submitted.
required-label string Adds a title for the asterisk when required is set to
true.
theme slds, nds (Default: slds) Sets the theme for the component.
type checkbox, button string Sets the type of input elements to render.
(Default: checkbox)
unchecked- Accepts name, RGB, string When type is set to 'icon', sets the checkbox button
background-color and Hex values. background color when checkbox is not checked.
blue)
unchecked- Accepts name, RGB, string When type is set to 'icon', sets the checkbox button
border-color and Hex values. border color when checkbox is not checked.
gray )
unchecked-icon- Accepts name, RGB, string When type is set to 'icon', sets the checkbox icon
color and Hex values. color when checkbox is not checked.
(Default: white)
unchecked-icon- (Default: utility:check) string When type is set to 'icon', sets icon to use when
name checkbox is not checked.
unchecked-label- Accepts name, RGB, string When type is set to 'icon', sets the checkbox label
color and Hex values. color when checkbox is not checked.
(Default: white)
validity JSON Object Sets the validity state for an element, with respect to
constraint validation.
value string Sets the default value of checkbox group.

company 97
OmniStudio
Example c-checkbox-group Component
<c-checkbox-group
name="vehicle"
value="bike"
options='[{"label":"car","value":"car"},{"label":"bike","value":"bike"},
{"label":"ship","value":"ship"}]'
></c-checkbox-group>
Label Slot Usage

A named slot (name = label) is available in the event a user would like to dynamically insert markup next to
the input's label.
<c-checkbox-group
name="vehicle"
value="bike"
>
<span slot="label">Additional markup is inserted here</span>
</c-checkbox-group>
Available Methods
checkValidity()
Returns the valid attribute value (boolean) on the ValidityState object.
reportValidity()
Displays the error messages and returns false if the input is invalid. If the input is valid, reportValidity()
clears the error message and returns true.
setCustomValidity(message)
Sets a custom error message to display when the input value is submitted. Takes the message argument. If
message is an empty string, the error message is reset.
showHelpMessageIfInvalid()
Displays error messages on invalid fields. An invalid field fails at least one constraint validation and returns
false when checkValidit() is called.
focus()
Sets the focus on the textarea field.

company 98
OmniStudio

alignment vertical, horizontal string Sets the orientation of the checkbox group.
(Default for 'slds' theme:
vertical) (Default for
'nds' theme: horizontal)
checked- Accepts name, rgb and string When type is set to 'icon', sets the checkbox button
background-color hex values. (Default: background color when checkbox is checked.
slds brand blue)
checked-border- Accepts name, rgb and string When type is set to 'icon', sets the checkbox button
color hex values. (Default: border color when checkbox is checked.
slds brand blue)
checked-icon- Accepts name, rgb and string When type is set to 'icon', sets the checkbox icon
color hex values. (Default: color when checkbox is checked.
slds brand blue)
checked-icon- (Default: utility:add) string When type is set to 'icon', sets icon to use when
name checkbox is checked.
disabled If set, the checkbox group is disabled and users
extraclass Adds a class to the main container element. To add
multiple classes, use a space to separate each class,
such as 'classone classtwo'.
icon-url URL string Sets the icon URL, overriding the defined url for the
svg resource.
label string yes Sets visible label for the checkbox group.
message-when- string To display a message when no checkbox is selected
value-missing and required is set to true, set this attribute.
name string Specifies the name of the checkbox group. Only only
one button can be selected if a name is specified for
the group.
options string yes Defines the array of label-value pairs for each
checkbox.
required If set, a checkbox must be selected before the form
can be submitted.
theme slds, nds (Default: slds) Sets the theme for the component.
type checkbox, button string Sets the type of input elements to render.
(Default: checkbox)
unchecked- Accepts name, rgb and string When type is set to 'icon', sets the checkbox button
background-color hex values. (Default: background color when checkbox is not checked.
slds brand blue)
unchecked- Accepts name, rgb and string When type is set to 'icon', sets the checkbox button
border-color hex values. (Default: border color when checkbox is not checked.
slds brand gray )
unchecked-icon- Accepts name, rgb and string When type is set to 'icon', sets the checkbox icon
color hex values. (Default: color when checkbox is not checked.
white)
unchecked-icon- (Default: utility:check) string When type is set to 'icon', sets icon to use when
name checkbox is not checked.
validity JSON Object Sets the validity state for an element, with respect to

company 99
OmniStudio

value string Sets the default value of checkbox group.
<c-checkbox-group
name="vehicle"
value="bike"
Available Methods
checkValidity()
reportValidity()
false when checkValidity() is called.
focus()

alignment vertical, horizontal string Sets the orientation of
(Default for `slds' the checkbox group.
theme: vertical)
(Default for `nds'
theme: horizontal)

company 100
OmniStudio

checked-background- Accepts name, rgb string When type is set to
color and hex values. ìcon', sets the
(Default: slds brand checkbox button
blue) background color
when checkbox is
checked.
checked-border-color Accepts name, rgb string When type is set to
and hex values. ìcon', sets the
blue) border color when
checkbox is checked.
checked-icon-color Accepts name, rgb string When type is set to
(Default: slds brand checkbox icon color
blue) when checkbox is
checked.
checked-icon-name (Default: utility:add) string When type is set to
ìcon', sets icon to use
when checkbox is
checked.
disabled If set, the checkbox
group is disabled and
users cannot interact
with it.
extraclass Adds a class to the
main container
element. To add
a space to separate
each class, such as
icon-url URL string Sets the icon URL,
overriding the defined
url for the svg
resource.
label string yes Sets visible label for
the checkbox group.
message-when-value- string To display a message
missing when no checkbox is
selected and required
is set to true, set this
attribute.
name string Specifies the name of
the checkbox group.
Only only one button
can be selected if a
name is specified for
the group.
options string yes Defines the array of
label-value pairs for
each checkbox.

company 101
OmniStudio

required If set, a checkbox
must be selected
before the form can
be submitted.
theme slds, nds (Default: Sets the theme for the
slds) component.
type checkbox, button string Sets the type of input
(Default: checkbox) elements to render.
unchecked- Accepts name, rgb string When type is set to
background-color and hex values. ìcon', sets the
blue) background color
when checkbox is not
checked.
unchecked-border- Accepts name, rgb string When type is set to
color and hex values. ìcon', sets the
gray ) border color when
checkbox is not
checked.
unchecked-icon-color Accepts name, rgb string When type is set to
(Default: white) checkbox icon color
checked.
unchecked-icon-name (Default: utility:check) string When type is set to
ìcon', sets icon to use
checked.
validity JSON Object Sets the validity state
for an element, with
respect to constraint
validation.
value string Sets the default value
of checkbox group.
<c-checkbox-group
name="vehicle"
value="bike"
Available Methods
checkValidity()
reportValidity()

company 102
OmniStudio
focus()
CheckboxImageGroup Lightning Web Component ReadMe

This page contains a CheckboxImageGroup LWC ReadMe for each Vlocity release.
The CheckboxImageGroup Lightning Web Component extends the CheckboxGroup Lightning Web
Component adding additional features. The CheckboxImageGroup Lightning Web Component enables
users to select from single or multiple options by clicking images instead of checkboxes.
Available c-checkbox-image-group Attributes

checked true, false (Default: boolean Sets the default value of checkbox input.
false) Applies only when is-display-checkbox is true.
enabled-caption true, false (Default: boolean To show a caption, set to true.
false)
control-width Width in pixels. string Sets the width of checkbox image.
(Default: auto)
control-height Height in pixels. string Sets the height of checkbox image.
(Default: auto)
image-count-in- integer, To set the number of checkbox images to
row string display in a row, set this attribute.
is-display- true, false (Default: boolean yes (if is-image To display checkbox as a checkbox input, set to
checkbox false) is set to false) true. If set to true, is-image cannot be true.
is-image true, false (Default: boolean (if is-display- To display checkbox as image, set to true. If set
false) checkbox is set to true, is-display-checkbox cannot be true.
to false)
is-image-display true, false (Default: boolean To display images, set to true.
false)
Example c-checkbox-image-group Component

<c-checkbox-image-group
class="slds-p-top_small"

company 103
OmniStudio
name="check"
required
image-count-in-row=6
type="checkbox"
label="Don't Accept"
is-display-checkbox="true"
>
</c-checkbox-image-group>
Available Methods
checkValidity()
reportValidity()
focus()
The CheckboxImageGroup Lightning Web Component extends theCheckboxGroup Lightning Web
Component adding additional features. TheCheckboxImageGroup Lightning Web Component enables
users to select from single or multiple options by clicking images instead of checkboxes.
Available c-checkbox-image-group Attributes

checked true, false (Default: boolean Sets the default value
false) of checkbox input.
Applies only when is-
display-checkbox is
true.
enabled-caption true, false (Default: boolean To show a caption, set
false) to true.
control-width Width in pixels. string Sets the width of
(Default: auto) checkbox image.

company 104
OmniStudio

control-height Height in pixels. string Sets the height of
(Default: auto) checkbox image.
image-count-in-row integer, string To set the number of
checkbox images to
display in a row, set
this attribute.
is-display-checkbox true, false (Default: boolean yes (ifis-image is set To display checkbox
false) to false) as a checkbox input,
set to true. If set to
true, is-image cannot
be true.
is-image true, false (Default: boolean (ifis-display-checkbox To display checkbox
false) is set to false) as image, set to true.
If set to true, is-
display-checkbox
cannot be true.
Example c-checkbox-image-group Component

<c-checkbox-image-group
name="check"
required
image-count-in-row=6
type="checkbox"
label="Don't Accept"
is-display-checkbox="true"
>
Available Methods
checkValidity()
reportValidity()**
setCustomValidity(message)**
false when checkValidit() is called.
focus()

company 105
OmniStudio
Combobox Lightning Web Component ReadMe

This page contains a Combobox LWC ReadMe for each Vlocity release.
Vlocity Health and Insurance Spring '21

The Combobox Lightning Web Component is a read-only input element in which the user can select an
option from a list of options.
Available c-combobox Attributes

label string Adds a title for the combobox component.
name string Adds a name to the combobox component.
placeholder string Adds text to the input element to prompt user to select from the
dropdown (list of options to render labels). For example, "Select
an option".
variant standard, string Changes the appearance of the input element.
label-hidden
(Default:
standard)
value string Adds a pre-populatd value to the combobox input.
options array yes Sets the list of options available for selection. Each option has
"label" and "value" attributes, such as
{"label":"Apple","value":"apple"}. It also supports
grouping if option is set as
{"label":"Apple","value":"apple",
"group":"group1"}
required true, false boolean If the user must enter a value before submitting the form, set to
(Default: true.
false)
multiple true, false boolean To enable the ability to select multiple options, set to true.
(Default:
false)
searchable true, false boolean To enable user search, set to true.
(Default:
false)
read-only true, false boolean To prevent the user from editing the field, set to true.
(Default:
false)
theme slds, nds string Sets the theme for the combobox component.
(Default:
slds)
errormessage warning, string Sets the style of the error message.
success,
error, info
disabled true, false boolean To disable the combobox, set to true.
(Default:
false)
max-count number Sets the number of options to display before user must scroll.

company 106
OmniStudio

sorted true, false boolean If set to true the options are sorted in alphabetic order of value or
(Default: the sortField.
false)
sortField string number To set the sortField used to sort the options. Works only if sorted
is true
deleteMultiple true, false boolean To have delete on multiple select pill
(Default:
false)
isDisplayFlex true, false boolean To set display:flex style for pill wrapper div and it also set
(Default: overflow:hidden and text-overflow:ellipsis style to each pill.
false) Selected values will be displayed as pills only if the multiple
attribute is true.
data-show- true, false string Applicable only when read-only is set to true. Set to true to
lookup (Default: display the lookup fields.
false)
Example c-combobox Component
<c-combobox
theme="slds"
read-only="true"
options='[{"label":"Apple","value":"apple"},
{"label":"Orange","value":"orange"},{"label":"Mango","value":"mango"}]'
label="Single Select"
placeholder="Normal Input"
></c-combobox>


<c-combobox
theme="slds"
read-only="true"
options='[{"label":"Apple","value":"apple","group":"group1"},
{"label":"Orange","value":"orange","group":"group1"},
{"label":"Potato","value":"Potato",,"group":"group2"}]'
></c-combobox>


<c-combobox
theme="slds"
read-only="true"
>

company 107
OmniStudio
<div slot="footer">
<span>Footer</span>
</div>
</c-combobox>
Example Label Slot Usage

the input's label.
<c-combobox
theme="slds"
read-only="true"
>
</c-combobox>


deleteMultiple true, false boolean Enables deleting multiple pills.
(Default:
false)
disabled true, false To disable the combobox, set to true.
(Default:
false)
success,
error, info
isDisplayFlex true, false boolean Makes the wrapper 'div' of the pill flexible by setting the CSS
(Default: 'display' property to 'flex'. Also sets 'overflow' property to 'hidden',
false) and 'text-overflow' to 'ellipsis'. Selected values display as pills only
if the multiple attribute is set to true.
max-count number Sets the number of options to display before the user must scroll.
multiple true, false To enable the ability to select multiple options, set to true.
(Default:
false)

company 108
OmniStudio

{"label":"Apple","value":"apple"}. It also supports
grouping if option is set as
{"label":"Apple","value":"apple",
"group":"group1"}
dropdown (list of options to render labels). For example, "Select an
option".
read-only true, false To prevent the user from editing the field, set to true.
(Default:
false)
required true, false If the user must enter a value before submitting the form, set to
(Default: true.
false)
searchable true, false To enable user search, set to true.
(Default:
false)
sorted true, false boolean If set to true the options are sorted in alphabetic order of value or
(Default: the sortField.
false)
sortField string number Sets the field used to sort the options. Works only if sorted is set o
true.
(Default:
slds)
label-hidden
(Default:
standard)
<c-combobox
theme="slds"
read-only="true"
></c-combobox>


<c-combobox
theme="slds"
read-only="true"
options='[{"label":"Apple","value":"apple","group":"group1"},
{"label":"Orange","value":"orange","group":"group1"},

company 109
OmniStudio
{"label":"Potato","value":"Potato",,"group":"group2"}]'
></c-combobox>

<c-combobox
theme="slds"
read-only="true"
>
<div slot="footer">
<span>Footer</span>
</div>
</c-combobox>
Label Slot Usage

the input's label.
<c-combobox
theme="slds"
read-only="true"
>
</c-combobox>

disabled true, false To disable the combobox, set to true.
(Default:
false)
success,
error, info

company 110
OmniStudio

max-count number Sets the number of options to display before user must scroll.
multiple true, false To enable the ability to select multiple options, set to true.
(Default:
false)
{"label":"Apple","value":"apple"}.
dropdown (list of options to render labels). For example, "Select an
option".
read-only true, false To prevent the user from editing the field, set to true.
(Default:
false)
required true, false If the user must enter a value before submitting the form, set to
(Default: true.
false)
searchable true, false To enable user search, set to true.
(Default:
false)
(Default: slds)
label-hidden
(Default:
standard)
<c-combobox
theme="slds"
read-only="true"
></c-combobox>

<c-combobox
theme="slds"
read-only="true"

company 111
OmniStudio
>
<div slot="footer">
<span>Footer</span>
</div>
</c-combobox>

disabled true, false (Default: To disable the
false) combobox, set to true.
errormessage warning, success, string Sets the style of the
error, info error message.
label string Adds a title for the
combobox
component.
max-count number Sets the number of
options to display
before user must
scroll.
multiple true, false (Default: To enable the ability to
false) select multiple
options, set to true.
name string Adds a name to the
combobox
component.
options array yes Sets the list of options
available for selection.
Each option has
label'' and
`value''
attributes, such
as{"label":"Apple","val
ue":"apple"}`.
placeholder string Adds text to the input
element to prompt
user to select from the
dropdown (list of
options to render
labels). For example,
``Select an option''.
read-only true, false (Default: To prevent the user
false) from editing the field,
set to true.
required true, false (Default: If the user must enter
false) a value before
submitting the form,
set to true.

company 112
OmniStudio

searchable true, false (Default: To enable user
false) search, set to true.
slds) combobox
component.
value string Adds a pre-populatd
value to the
combobox input.
variant standard, label-hidden string Changes the
(Default: standard) appearance of the
input element.
<c-combobox
theme="slds"
read-only="true"
></c-combobox>

<c-combobox
theme="slds"
read-only="true"
>
<div slot="footer">
<span>Footer</span>
</div>
</c-combobox>
Datasource Lightning Web Component ReadMe

This page contains a Datasource LWC ReadMe for each Vlocity release.
The Datasource Lightning Web Component fetches data from Salesforce using different data source types
by providing relevant input data.

company 113
OmniStudio
Available c-datasource Attributes

value JSON string yes Full JSON dump including type and value for the datasource
component to use.
channel string To use with pubsub, set this feature to register an event listener. By
default, the Datasource Lightning Web Component fires onresult
and oninit callbacks.
debug true, false boolean To enable debug mode, set to true. Prints fetched data inside
(Default: false) template and updates JSON for testing.
(Default: slds)
Example c-datasource Component
<c-datasource
theme=""
channel="testChannel"
value='{ "type": "query", "value": {"query": "Select Name from Account Limit
1"}}'
debug="true"
></c-datasource>
Using the channel name you can listen to result and error event inside the LWC where datasource is
used as below
pubsub.register("testChannel", {
result: this.onResult.bind(this),
error : this.onError.bind(this)
});
The following Vlocity Lightning Web Components extend the Datasource Lightning Web Component with
additional features for fetching data from specific data sources:
• DatasourceQuery Lightning Web Component

• DatasourceSearch Lightning Web Component
• DatasourceApexRemote Lightning Web Component
• DatasourceApexRest Lightning Web Component
• DatasourceDataRaptor Lightning Web Component
• DatasourceIntegrationProcedure Lightning Web Component
• DatasourceRest Lightning Web Component
• DatasourceSdkComponent Lightning Web Component
The Datasource Lightning Web Component fetches data from Salesforce using different data source types
by providing relevant input data.

company 114
OmniStudio
Available c-datasource Attributes

value JSON string yes Full JSON dump
including type and
value for the
datasource
component to use.
channel string To use with pubsub,
set this feature to
register an event
listener. By default,
the Datasource
Lightning Web
Componentfires
onresult and
oninit callbacks.
debug true, false (Default: boolean To enable debug
false) mode, set to true.
Prints fetched data
inside template and
updates JSON for
testing.
slds) to use.
Example c-datasource Component
<c-datasource
theme=""
channel="testChannel"
1"}}'
debug="true"
></c-datasource>
Using the channel name you can listen to result and error event inside the LWC where datasource is
used as below
pubsub.register("testChannel", {
result: this.onResult.bind(this),
error : this.onError.bind(this)
});
The following Vlocity Lightning Web Components extend the Datasource Lightning Web Component with
additional features for fetching data from specific data sources:
• DatasourceQuery Lightning Web Component

• DatasourceSearch Lightning Web Component
• DatasourceApexRemote Lightning Web Component

company 115
OmniStudio
• DatasourceDataRaptor Lightning Web Component

• DatasourceIntegrationProcedure Lightning Web Component
• DatasourceRest Lightning Web Component
DatasourceApexRemote Lightning Web Component ReadMe

This page contains a DatasourceApexRemote LWC ReadMe for each Vlocity release.
The DatasourceApexRemote Lightning Web Component extends the Datasource Lightning Web
Component with additional features for fetching data using an Apex class.
Available c-datasource-apexremote Attributes

classname string yes Provides the Apex remote class name.
methodname string yes Provides the Apex remote method to call.
inputmap string yes Provides the input map data to pass as a parameter.
optionsmap string yes Provides the options map data to pass as a parameter.
Example c-datasource-apexremote

<c-datasource-apexremote
theme="slds"
classname="LWCDatasource"
methodname="query"
inputmap={inputMap}
channel="apexremote"
debug="true"
></c-datasource-apexremote>
The DatasourceApexRemote Lightning Web Component extends theDatasource Lightning Web
Component with additional features for fetching data using an Apex class.
Available c-datasource-apexremote Attributes

classname string yes Provides the Apex
remote class name.
methodname string yes Provides the Apex
remote method to call.
inputmap string yes Provides the input
map data to pass as a
parameter.

company 116
OmniStudio

optionsmap string yes Provides the options
parameter.
Example c-datasource-apexremote

<c-datasource-apexremote
theme="slds"
classname="LWCDatasource"
methodname="query"
inputmap={inputMap}
channel="apexremote"
debug="true"
></c-datasource-apexremote>
DatasourceApexRest Lightning Web Component ReadMe

This page contains a DatasourceApexRest LWC ReadMe for each Vlocity release.
The DatasourceApexrest Lightning Web Component extends the Datasource Lightning Web Component
with additional features for fetching data using an Apex class from a REST endpoint.
Available c-datasource-apexrest Attributes

endpoint string yes Provides the Apex rest endpoint.
methodType string yes Provides the Apex rest method type. For eg: GET, POST.
payload string no Provides the payload data to pass as a parameter. Only applicable if
methodType is not GET
Example c-datasource-apexrest
<c-datasource-apexrest
endpoint="/services/apexrest/vlocity_ins/v1/mockapexrest"
method-type="GET"
channel="apexrest"
debug="true">
</c-datasource-apexrest>
The DatasourceApexrest Lightning Web Component extends the Datasource Lightning Web Component
with additional features for fetching data using an Apex class from a REST endpoint.

company 117
OmniStudio
Available c-datasource-apexrest Attributes

endpoint string yes Provides the Apex
rest endpoint.
methodType string yes Provides the Apex
rest method type. For
eg: GET, POST.
payload string no Provides the payload
data to pass as a
parameter. Only
applicable if
methodType is not
GET
Example c-datasource-apexrest
<c-datasource-apexrest
endpoint="/services/apexrest/vlocity_ins/v1/mockapexrest"
method-type="GET"
channel="apexrest"
debug="true">
</c-datasource-apexrest>
DatasourceDataRaptor Lightning Web Component ReadMe

This page contains a DatasourceDataRaptor LWC ReadMe for each Vlocity release.
The DatasourceDataRaptor Lightning Web Component extends the Datasource Lightning Web Component
with additional features for fetching data from a Vlocity DataRaptor.
Available c-datasource-dataraptor Attributes

bundlename string yes Provides the name of DataRaptor to use.
inputmap JSON string yes Provides the input map data from the DataRaptor to pass as a parameter.
Example c-datasource-dataraptor Component


theme="slds"
bundlename="TestDRBundle"
debug="true"
></c-datasource-dataraptor>

company 118
OmniStudio
The DatasourceDataRaptor Lightning Web Component extends theDatasource Lightning Web Component
with additional features for fetching data from a Vlocity DataRaptor.
Available c-datasource-dataraptor Attributes

bundlename string yes Provides the name of
DataRaptor to use.
inputmap JSON string yes Provides the input
map data from the
DataRaptor to pass as
a parameter.
Example c-datasource-dataraptor Component


theme="slds"
bundlename="TestDRBundle"
debug="true"
></c-datasource-dataraptor>
DatasourceIntegrationProcedure Lightning Web Component ReadMe

This page contains a DatasourceIntegrationProcedure LWC ReadMe for each Vlocity release.
The DatasourceIntegrationProcedure Lightning Web Component extends the Datasource Lightning Web
Component with additional features for fetching data from a Vlocity Integration Procedure.
Available c-datasource-integrationprocedure Attributes

methodname string yes Provides the name of the Integraton Procedure to use.
inputmap string yes Provides the input map data to pass as a parameter.
optionsmap string Provides the options map data to pass as a parameter.
Example c-datasource-integrationprocedure Component


<c-datasource-integrationprocedure
theme="nds"
methodname="TestType_TestSubType"
channel="integrationprocedure"

company 119
OmniStudio
debug="true"
></c-datasource-integrationprocedure>
The DatasourceIntegrationProcedure Lightning Web Component extends theDatasource Lightning Web
Component with additional features for fetching data from an Vlocity Integration Procedure.
Available c-datasource-integrationprocedure Attributes

methodname string yes Provides the name of
the Integraton
Procedure to use.
inputmap string yes Provides the input
parameter.
optionsmap string Provides the options
parameter.
Example c-datasource-integrationprocedure Component


<c-datasource-integrationprocedure
theme="nds"
methodname="TestType_TestSubType"
channel="integrationprocedure"
debug="true"
></c-datasource-integrationprocedure>
DatasourceQuery Lightning Web Component ReadMe

This page contains a DatasourceQuery LWC ReadMe for each Vlocity release.
The DatasourceQuery Lightning Web Component extends the Datasource Lightning Web Component with
additional features for fetching data using a Salesforce Object Query Language (SOQL) query.
Available c-datasource-query Attributes

query string yes The SOQL query to call.
Example c-datasource-query Component
<c-datasource-query
theme="slds"

company 120
OmniStudio
query="SELECT Id, name FROM Account LIMIT 5"

channel="query"
debug="true"
></c-datasource-query>
The DatasourceQuery Lightning Web Component extends the Datasource Lightning Web Component with
additional features for fetching data using a Salesforce Object Query Language (SOQL) query.
Available c-datasource-query Attributes

query string yes The SOQL query to
call.
Example c-datasource-query Component

<c-datasource-query
theme="slds"
query="SELECT Id, name FROM Account LIMIT 5"
channel="query"
debug="true"
></c-datasource-query>
DatasourceRest Lightning Web Component ReadMe

This page contains a DatasourceRest LWC ReadMe for each Vlocity release.
The DatasourceRest Lightning Web Component extends the Datasource Lightning Web Component with
additional features for data fetched from a REST web data source.
Available c-datasource-rest Attribute

methodtype GET, POST (Default: string yes Specifies request method type.
GET)
subtype web, namedcredential string yes Specifies type of rest.
(Default: web)
headers JSON string Provides headers sent along with the request.
payload string Provides data sent along with the request.
endpoint string yes Provides the REST URL.
namedcredential string If subtype is namedcredential, specifies the named
credential from your org.
Example c-datasource-rest Component



company 121
OmniStudio
<c-datasource-rest
theme="slds"
methodtype="GET"
subtype="web"
headers="{headers}"
channel="restweb"
endpoint="https://jsonplaceholder.typicode.com/users"
debug="true"
></c-datasource-rest>
<c-datasource-rest
theme="slds"
methodtype="GET"
subtype="namedcredential"
channel="restnamed"
namedcredential="test"
headers="{headers}"
endpoint="posts"
debug="true"
The DatasourceRest Lightning Web Component extends the Datasource Lightning Web Component with
additional features for data fetched from a REST web data source.
Available c-datasource-rest Attribute

methodtype GET, POST (Default: string yes Specifies request
GET) method type.
subtype web, namedcredential string yes Specifies type of rest.
(Default: web)
headers JSON string Provides headers sent
along with the
request.
payload string Provides data sent
along with the
request.
endpoint string yes Provides the REST
URL.
namedcredential string If subtype is
namedcredential,
specifies the named
credential from your
org.

company 122
OmniStudio
Example c-datasource-rest Component

<c-datasource-rest
theme="slds"
methodtype="GET"
subtype="web"
headers="{headers}"
channel="restweb"
endpoint="https://jsonplaceholder.typicode.com/users"
debug="true"
<c-datasource-rest
theme="slds"
methodtype="GET"
subtype="namedcredential"
channel="restnamed"
namedcredential="test"
headers="{headers}"
endpoint="posts"
debug="true"
DatasourceSDK Lightning Web Component ReadMe

This page contains a DatasourceSDK LWC ReadMe for each Vlocity release.
The DatasourceSDK Lightning Web Component extends the Datasource Lightning Web Component with
additional features for data fetched from an SDK.
Available c-datasource-sdk-component Attributes

value string yes Full JSON dump including type and value for the datasource to use.
See sample code on this page.
channel string If using with pubsub, channel attribute registers listener. Fires
onresult and oninit callbacks.
debug true, false To enable debug mode, set to true. If set to true, it prints fetched data
(Default: false) inside template and enables changing the JSON there for testing
purpose.
theme slds, nds Sets the theme to use for this component.
(Default: slds)

company 123
OmniStudio
Example c-datasource-sdk-component Component
<c-datasource-sdk-component
theme=""
channel="true"
1"}}'
debug="true"
></c-datasource-sdk-component>

channel="apexRemote"
value={apexRemote}
debug="false"

value={dataraptorData}
debug="false"


company 124
OmniStudio
channel="integrationpreocedure"
value={iprocedure}
debug="false"
channel="search"
value='{ "type": "search", "value": {"search": "Find {savings} IN ALL
FIELDS RETURNING Account(Name) limit 1"}}'
debug="false"
The DatasourceSDK Lightning Web Component extends the Datasource Lightning Web Component with
additional features for data fetched from an SDK.
Available c-datasource-sdk-component Attributes

value string yes Full JSON dump
including type and
value for the
datasource to use.
See sample code on
this page.
channel string If using with pubsub,
channel attribute
registers listener.
Fires onresult and
oninit callbacks.
debug true, false (Default: To enable debug
false) mode, set to true. If
set to true, it prints
fetched data inside
template and enables
changing the JSON
there for testing
purpose.
theme slds, nds (Default: Sets the theme to use
slds) for this component.
Example c-datasource-sdk-component Component
theme=""
channel="true"
1"}}'
debug="true"

company 125
OmniStudio

channel="apexRemote"
value={apexRemote}
debug="false"

value={dataraptorData}
debug="false"

channel="integrationpreocedure"
value={iprocedure}
debug="false"
channel="search"
value='{ "type": "search", "value": {"search": "Find {savings} IN ALL
FIELDS RETURNING Account(Name) limit 1"}}'

company 126
OmniStudio
debug="false"
DatasourceSearch Lightning Web Component ReadMe

This page contains a DatasourceSearch LWC ReadMe for each Vlocity release.
The DatasourceSearch Lightning Web Component extends the Datasource Lightning Web Component with
additional features for fetching data through a Salesforce Object Search Language (SOSL) query.
Available c-datasource-search Attributes

searchterm string yes Provides search term to search accross provided sObject fields.
Search term must be at least two characters long.
searchfields (Default: string Provides which fields to search.
all)
returningsobjectfields string Provides which SObject fields to return. For example,
"Account(Name), Contact(Id)".
limitto string Limits the returned records for all the sObjects.
Example c-datasource-search Component
<c-datasource-search
searchterm="quick"
searchfields="ALL"
returningsobjectfields="Account(Name),Contact(Name)"
channel="search"
debug="true"
limitto="2"
></c-datasource-search>
The DatasourceSearch Lightning Web Component extends the Datasource Lightning Web Component with
additional features for fetching data through a Salesforce Object Search Language (SOSL) query.
Available c-datasource-search Attributes

searchterm string yes Provides search term
to search accross
provided sObject
fields. Search term
must be at least two
characters long.
searchfields (Default: all) string Provides which fields
to search.

company 127
OmniStudio

returningsobjectfields string Provides which
SObject fields to
return. For example,
`Àccount(Name),
Contact(Id)''.
limitto string Limits the returned
records for all the
sObjects.
Example c-datasource-search Component
<c-datasource-search
searchterm="quick"
searchfields="ALL"
returningsobjectfields="Account(Name),Contact(Name)"
channel="search"
debug="true"
limitto="2"
></c-datasource-search>
DataTable Lightning Web Component ReadMe

This page contains the DataTable LWC ReadMe as of the Summer '20 release.
The DataTable Lightning Web Component creates a tabular structure of the data provided. The DataTable
LWC supports grouping, search, pagination, and sorting capabilities.

IMPORTANT: The table reflects the order by which attributes must be set for c-data-table.

extraclass string Adds a class to the table element. To add multiple
issearchavailable true, false boolean To make table searchable, set to true. Displays the
(Default: search input field and filter dropdown.
false)
issortavailable true, false boolean To make table sortable, set to true. This feature is not
(Default: available on phones and smaller screens.
false)
(Default:
slds)
icon-url url string Overrides the default URL of the svg resource. Used
with Newport Design System (NDS) theme only.
group-by JSON object To group table based on a record field, set this attribute.
To make field name the group header, set the field name
as the value for this attribute. To add a group description
with the group header, pass an object as a value for this
attribute (see Available group-by Attributes).

company 128
OmniStudio

pagesize number If set, enables pagination.
row-level-edit true, false boolean To enable row-level editing, set to true. The
(Default: columnsJSON must have editable fields. See Available
false) columns Attributes.
user-selectable-column true, false boolean Enables users to choose which columns are visible. If
(Default: set to true, in the columns JSON, only those fields with
true) userSelectableset to true will be visible. See Available
columnsAttributes.
columns JSON array yes Contains heading names and specifies settings for each
column. See Available columnsAttributes.
records JSON array yes Contains the data to populate the table.
cell-level-edit true, false boolean To enable cell-level editing, set to true. To make specific
(Default: cells editable, see Available columnsAttributes.
false)
group-order asc, dsc string Orders group in ascending or descending order.
hide-table-header true, false boolean To hide table header, set to true.
(Default:
false)
pagelimit (Default: 3) number Specifies how many page navigation links to add to
pagination. The pagesizemust be set.
draggable true, false boolean Specifies whether rows are draggable. The
(Default: onupdateevent is fired when a row is dragged and the
false) order is updated. Inside the event handler get the
updated data from event.detail.result.
row-delete true, false boolean Specifies whether each row includes a delete option.
(Default: Once the row is deleted, it is removed from the table.
false) The ondeleteevent is fired. Inside the event handler
get the deleted data from event.detail.result.
user-selectable-row true, false boolean Specifies whether each row includes select option. Once
(Default: the row is selected, selectrow event is fired. Inside the
false) event handler get the deleted data from
event.detail.result. If all rows are selected
event.detail.resultwill have "all" as value.
active-groups true, false boolean Specifies whether groups are expanded or collapsed.
(Default: Valid only for datatables with group-by
true)
groupNameWrapperClass JSON object additional styles for group header in group-by table.
hideExtraColumn true, false boolean Valid only for datatable with group by. Enable to prevent
(Default: the space below and above the grouped name. Hides
false) group by on the first column and draggable.
confirmdeleterow true, false boolean Enables the user to show the delete confirmation prompt
(Default: when deleting a row from the table.
false)
sortAcrossGroups true, false boolean Valid only for grouped datatable. Enables user to sort
(Default: based on the group name.
false)
fireeventOnDeleteconfirm true, false boolean Valid when confirmdeleterow is true . When true, the
(Default: row will not be deleted from the datatable. It will only fire
false) the event with the data to be deleted. Once the delete is
confirmed, the deleteconfirm event is fired. Inside
the event handler get the row to be deleted from
event.detail.result.

company 129
OmniStudio

styles Object A style object to use for element specific styling.
Example c-data-table Component
<c-data-table extraclass="slds-table_bordered" issearchavailable="true"

issortavailable="true" theme="{theme}" icon-url="{iconUrl}" group-by="company"
pagesize="4" onupdate="{tableDataUpdated}" row-level-edit="true" user-
selectable-column="true" columns="{columns}" records="{tableData}"
styles="{styles}"
>
</c-data-table>
Example of styles object
styles = { showGroupedHeaderAsAnchor: true, // used to show the group table

header as anchor tag columnHeaderCaps: true // used to capitalize the table
columns header fields
};
Example data JSON
[{ "email": "[email protected]", "company": "Motors R Us", "age": "44",

"balance": "$11,500", "address": "846 Livonia Avenue, Siglerville, Maryland,
5503", "isActive": true }, { "email": "[email protected]", "company":
"TreeLine Group", "age": "32", "balance": "$9,678", "address": "902 Myrtle
Avenue, Rockhill, Delaware, 3863", "isActive": true }, { "email": "n-
[email protected]", "company": "Daily Corp", "age": "57", "balance": "$22,888",
"address": "408 Aster Court, Riceville, Indiana, 9646", "isActive": false },
{ "email": "[email protected]", "company": "Daily Corp", "age": "44",
"balance": "$6,983", "address": "856 Benson Avenue, Ballico, North Carolina,
4930", "isActive": true }
];
Available columns Attributes

editable true, false (Default: boolean Specifies whether column is editable.
false)
fieldName string yes Gets the key for the column from the dataJSON.
label string yes Sets the visible name of the column heading.
searchable true, false (Default: boolean To enable the ability to search column values, set to
false) true.
sortable true, false (Default: boolean To enable column sorting, set to true. On hover of
false) column heading, a sorting icon displays next to the
column name.

company 130
OmniStudio

type currency, date, datetime string Specifies the type of value column holds. checkbox
percent, number, text, and icon both used for boolean values. Whereas
email, textarea, url, icon type is used to show the value as a check icon.
checkbox,icon (Default:
text)
userSelectable true, false (Default: boolean If set to true, enables user to choose if column is
false) visible.
visible true, false (Default: true) boolean To hide the column, set to false. If set to false and
userSelectableis set to true, user can make column
visible.
format date formats (Default: string Sets the date format. Required only if field type is
YYYY-MM-DD) "date" or "datetime".
preventNavigation true, false (Default: boolean Prevents default navigation. Required only if field
false) type is "url".
Example columns JSON
[{ "fieldName": "company", "label": "Company", "sortable": true, "searchable":

true }, { "fieldName": "email", "label": "Email", "sortable": true,
"searchable": true, "type": "email", "editable": true, "userSelectable":
true }, { "fieldName": "age", "label": "Age", "sortable": true, "type":
"number", "editable": true, "userSelectable": true }, { "fieldName":
"balance", "label": "Balance", "sortable": true, "userSelectable": true },
{ "fieldName": "address", "label": "Address", "sortable": false, "type":
"textarea", "editable": true, "userSelectable": true }, { "fieldName":
"isActive", "label": "Active", "sortable": false, "type": "checkbox",
"editable": true } ];
Available group-by Attributes

fields list array Sets group header description for every visible row after grouping. Each
object takes a field name that has its own group desciption, which by default
is the sum of all selected field from all the records. To get group description
using a custom function, pass function to methodToCalculateSummary,
which takes 'groupItems' as an argument. For example,
nameOfFunction(groupItems){}.
sortFieldName string no Specifies the field name to sort datatable by.
Example group-by JSON
{ "sortFieldName": "company", "fields": [ { "name": "balance",

"methodToCalculateSummary": "" } ] };
Available Event Listeners

onupdate
Triggers when table data changes.

company 131
OmniStudio
ondelete
Triggers when a table row is deleted.
onrowclick
Triggers when a row is clicked and includes the record on which the click happens. Is inside
event.detail.result. event.detail.fieldNamewill give the name of the field from where event
was triggered.
Adding Custom Column UI

To add a custom column specify each column inside a dataTable and add the relevant column inside the
data table element.
Note: The element inside the dataTable is either a dataTableCell or an extended LWC of the dataTableCell.
The display order is the same as the order of the dataTableCell HTML in the slot.
Table 1. Required Column Attributes

Attribute Description
data-field-name This is the same field name specified inside columns array.
class To define the column as a column UI, add a dataTableCellclass.
Table 2. Column Data

Data Description
cellData Contains the column cell data. For example, if this column field name is "email", this variable will contain related data to
that field name. You can read it with cellData.value.
rowData Contains complete row data from one single record, which can be used to show more data as well.
columnData Contains the metadata from columns json.
NOTE: To customize one column you must specify all the columns inside the dataTable. If you do not want
to customize any column then leave dataTable empty.
NOTE: GROUP BY tables does not support custom column UI.
Example customDataTableCell

issortavailable="true" theme="{theme}" icon-url="{iconUrl}" draggable="true"
columns="{columns}" records="{tableData}" onupdate="{tableUpdateHandler}"
ondelete="{tableUpdateHandler}" row-delete="true"
> <c-customDataTableCell data-field-name="email" class="dataTableCell"> </c-
customDataTableCell> <c-data-table-cell data-field-name="age"
class="dataTableCell"> </c-data-table-cell> <c-data-table-cell data-field-
name="balance" class="dataTableCell"> </c-data-table-cell> <c-data-table-cell
data-field-name="address" class="dataTableCell"> </c-data-table-cell> <c-data-

company 132
OmniStudio
table-cell data-field-name="isActive" class="dataTableCell"> </c-data-table-

cell> <c-data-table-cell data-field-name="phone" class="dataTableCell"> </c-
data-table-cell>
</c-data-table>
DataTableCell or an extend LWC of a DataTableCell are supported inside the data table.
Column Required Attributes

a) data-field-name : This is the same field name specified inside columns array.
b) class : Add a dataTableCell class to treated it as a column UI.
Data Inside the Extended Component

a) cellData : The column cell data. For example, if this column field name is "email", this variable comtains
related data for that field name. Read it by "cellData.value".
b) rowData: Contains complete row data as one single record and can also be used to show more data.
c) columnData: Contains metadata for what you pass inside columns JSON.
NOTE: To customize one column, you must specify all the columns inside the data table. If you
don't want to customize any column, leave the data table empty.
NOTE: Custom column UI support is not available in GROUP BY tables.
<template> <div if:true="{cellData}" class="tableRowCell">  {cellData.value} : <br />{rowData.phone} <button
onclick="{toggleText}">Toggle</button> <div if:true="{hiddenText}">
{cellData.value} </div> </div>
</template>
import { track } from "lwc";

import dataTableCell from "c/dataTableCell";
export default class DataTableCellExtended extends dataTableCell { @track
hiddenText = false; toggleText() { this.hiddenText = !this.hiddenText; }
}
.tableRowCell { display: table-cell; padding: 0.25rem 0.5rem; white-space:

nowrap; position: relative;
} .tableRowCell:first { border: 0;
}
DataTable Lightning Web Component ReadMe CME Spring '20

This page contains the DataTable LWC Readme as of the Vlocity CME Spring '20 release.
For the latest ReadMe, see DataTable Lightning Web Component ReadMe.

company 133
OmniStudio
The DataTable Lightning Web Component creates a tabular structure of the data provided. The DataTable
LWC supports grouping, search, pagination, and sorting capabilities.


extraclass string Adds a class to the table element. To add multiple classes,
use a space to separate each class, such as 'classone
classtwo'.
issearchavailable true, false boolean To make table searchable, set to true. Displays the search
(Default: input field and filter dropdown.
false)
false)
(Default:
slds)
icon-url url string Overrides the default URL of the svg resource. Used with
Newport Design System (NDS) theme only.
group-by JSON object To group table based on a record field, set this attribute. To
make field name the group header, set the field name as the
value for this attribute. To add a group description with the
group header, pass an object as a value for this attribute
(see Available groupByAttributes).
row-level-edit true, false boolean To enable row-level editing, set to true. The columns JSON
(Default: must have editable fields. See Available
false) columnsAttributes.
user-selectable- true, false boolean Enables users to choose which columns are visible. If set to
column (Default: true, in the columns JSON, only those fields with
true) userSelectable set to true will be visible. See Available
columnsAttributes.
columns JSON array yes Contains heading names and specifies settings for each
column. See Available columnsAttributes.
cell-level-edit true, false boolean To enable cell-level editing, set to true. To make specific cells
(Default: editable, see Available columns Attributes.
false)
(Default:
false)
pagination. The pagesizemust be set.
draggable true, false boolean Specifies whether rows are draggable. The onupdate event
(Default: is fired when a row is dragged and the order is updated.
false) Inside the event handler get the updated data from

company 134
OmniStudio

row-delete true, false boolean Specifies whether each row includes a delete option. Once
(Default: the row is deleted, it is removed from the table. The
false) ondelete event is fired. Inside the event handler get the
deleted data from event.detail.result.

<c-data-table
extraclass="slds-table_bordered"
issearchavailable="true"
issortavailable="true"
theme="{theme}"
icon-url="{iconUrl}"
group-by="company"
pagesize="4"
onupdate="{tableDataUpdated}"
row-level-edit="true"
user-selectable-column="true"
columns="{columns}"
records="{tableData}"
>
</c-data-table>
Example data JSON

[{
"email": "[email protected]",
"company": "Motors R Us",
"age": "44",
"balance": "$11,500",
"address": "846 Livonia Avenue, Siglerville, Maryland, 5503",
"isActive": true
},
{
"company": "TreeLine Group",
"age": "32",
"balance": "$9,678",
"address": "902 Myrtle Avenue, Rockhill, Delaware, 3863",
"isActive": true
},
{
"company": "Daily Corp",
"age": "57",
"balance": "$22,888",

company 135
OmniStudio
"address": "408 Aster Court, Riceville, Indiana, 9646",

"isActive": false
},
{
"company": "Daily Corp",
"age": "44",
"balance": "$6,983",
"address": "856 Benson Avenue, Ballico, North Carolina, 4930",
"isActive": true
}
];

false)
fieldName string yes Gets the key for the column from the dataJSON.
searchable true, false (Default: boolean To enable the ability to search column values, set to
false) true.
sortable true, false (Default: boolean To enable column sorting, set to true. On hover of
false) column heading, a sorting icon displays next to the
column name.
type number, text, email, string Specifies the type of value column holds.
textarea, checkbox
(Default: text)
userSelectable true, false (Default: boolean If set to true, enables user to choose if column is visible.
false)
visible true, false (Default: boolean To hide column, set to false. If set to false and
true) userSelectableis set to true, user can make column
visible.
confirmdeleterow true, false (Default: boolean Enables the user to show the delete confirmation prompt
false) when deleting a row from the table.
[{
"fieldName": "company",
"label": "Company",
"sortable": true,
"searchable": true
},
{
"fieldName": "email",
"label": "Email",
"sortable": true,

company 136
OmniStudio
"searchable": true,
"type": "email",
"editable": true,
"userSelectable": true
},
{
"fieldName": "age",
"label": "Age",
"sortable": true,
"type": "number",
"editable": true,
},
{
"fieldName": "balance",
"label": "Balance",
"sortable": true,
},
{
"fieldName": "address",
"label": "Address",
"sortable": false,
"type": "textarea",
"editable": true,
},
{
"fieldName": "isActive",
"label": "Active",
"sortable": false,
"type": "checkbox",
"editable": true
}
];

object takes a field name that has its own group desciption, which by
default is the sum of all selected field from all the records. To get group
description using a custom function, pass function to
methodToCalculateSummary, which takes 'groupItems' as an argument.
For example, nameOfFunction(groupItems){}.
groupFieldName string yes The reference key (field name) from the data JSON used to group the
table.

company 137
OmniStudio
{
"groupFieldName": "company",
"fields": [
{
"name": "balance",
"methodToCalculateSummary": ""
}
]
};

onupdate
ondelete
onrowclick

To add a custom column specify each column inside the data table:
<c-data-table
issearchavailable="true"
issortavailable="true"
theme={theme}
icon-url={iconUrl}
draggable="true"
columns={columns}
records={tableData}
onupdate={tableUpdateHandler}
ondelete={tableUpdateHandler}
row-delete="true"
>
<c-customDataTableCell data-field-name="email" class="dataTableCell">
</c-customDataTableCell>
<c-data-table-cell data-field-name="age" class="dataTableCell">
</c-data-table-cell>
<c-data-table-cell data-field-name="balance" class="dataTableCell">

company 138
OmniStudio
<c-data-table-cell data-field-name="address" class="dataTableCell">
<c-data-table-cell data-field-name="isActive" class="dataTableCell">
<c-data-table-cell data-field-name="phone" class="dataTableCell">
</c-data-table>
DataTableCell or an extend LWC of a DataTableCell are supported inside the data table.
Column Required Attributes

a) data-field-name : This is the same field name specified inside columns array.
b) class : Add a dataTableCell class to treated it as a column UI.
Data Inside the Extended Component

a) cellData : The column cell data. For example, if this column field name is "email", this variable comtains
related data for that field name. Read it by "cellData.value".
b) rowData: Contains complete row data as one single record and can also be used to show more data.
c) columnData: Contains metadata for what you pass inside columnsJSON.
NOTE: To customize one column, you must specify all the columns inside the data table. If you
don't want to customize any column, leave the data table empty.
NOTE: Custom column UI support is not available in GROUP BY tables.
<template>
<div if:true={cellData} class="tableRowCell">

{cellData.value} : <br>{rowData.phone}
<button onclick={toggleText}>Toggle</button>
<div if:true={hiddenText}>
{cellData.value}
</div>
</div>
</template>
import {track} from 'lwc';

export default class DataTableCellExtended extends dataTableCell {
@track hiddenText= false;
toggleText(){

company 139
OmniStudio
this.hiddenText = !this.hiddenText;
}
}
.tableRowCell{
display: table-cell;
padding: 0.25rem 0.5rem;
white-space: nowrap;
position: relative;
}
.tableRowCell:first {
border: 0;
}
Datatable Lightning Web Component ReadMe Winter '20

This page contains the DataTable LWC ReadMe as of the Vlocity Insurance and Health Winter '20 release.
The DataTable Lightning Web Component creates a tabular structure of the data provided. It supports
grouping, search, pagination and sorting capabilities.


issearchavailable true, false boolean To make table searchable, set to true. Displays the
(Default: search input field and filter dropdown.
false)
false)
(Default:
slds)
icon-url url string Overrides the default URL of the svg resource. Used
with Newport Design System (NDS) theme only.
group-by JSON object To group table based on a record field, set this
attribute. To make field name the group header, set the
field name as the value for this attribute. To add a
group description with the group header, pass an
object as a value for this attribute (see Available
groupBy Attributes).

company 140
OmniStudio

row-level-edit true, false boolean To enable row-level editing, set to true. The columns
(Default: JSON must have editable fields. See Available
false) columns Attributes.
user-selectable- true, false boolean Enables users to choose which columns are visible. If
column (Default: set to true, in the columns JSON, only those fields with
true) userSelectable set to true will be visible. See Available
columns Attributes.
columns JSON array yes Contains heading names and specifies settings for
each column. See Available columns Attributes.
cell-level-edit true, false boolean To enable cell-level editing, set to true. To make
(Default: specific cells editable, see Available columns
false) Attributes.
(Default:
false)
pagination. The pagesize must be set.
draggable (Default: boolean Specifies whether rows should be draggable or not.
false) whenever a drag happens and order is updated then
onupdate event is fired. Inside event handler you can
get the updated data inside event.detail.result.
row-delete (Default: boolean Specifies whether each row includes a delete option or
false) not. NOTE: if once deleted it gets removed from the
table altogether. Whenever we delete ondelete event is
fired. Inside event handler you can get the deleted data
inside event.detail.result.

>
</c-data-table>
Example data JSON


company 141
OmniStudio

];

false)
fieldName string yes Gets the key for the column from the data JSON.
searchable true, false (Default: boolean To enable the ability to search column values, set to true.
false)
sortable true, false (Default: boolean To enable column sorting, set to true. On hover of column
false) heading, a sorting icon displays next to the column name.
type number, text, email, string Specifies the type of value column holds.
textarea, checkbox
(Default: text)
userSelectable true, false (Default: boolean If set to true, enables user to choose if column is visible.
false)
visible true, false (Default: boolean To hide column, set to false. If set to false and
true) userSelectable is set to true, user can make column
visible.
[{ "fieldName": "company", "label": "Company", "sortable": true,

"searchable": true }, { "fieldName": "email", "label": "Email", "sortable":
true, "searchable": true, "type": "email", "editable": true, "userSelectable":

object takes a field name that has its own group desciption, which by
default is the sum of all selected field from all the records. To get group
description using a custom function, pass function to
methodToCalculateSummary, which takes 'groupItems' as an argument.
For example, nameOfFunction(groupItems){}.
groupFieldName string yes The reference key (field name) from the data JSON used to group the
table.

company 142
OmniStudio
{ "groupFieldName": "company", "fields": [ { "name": "balance",


onupdate
ondelete
onrowclick

To add a custom column specify each column inside data table:

issortavailable="true" theme={theme} icon-url={iconUrl} draggable="true"
columns={columns} records={tableData} onupdate={tableUpdateHandler}
ondelete={tableUpdateHandler} row-delete="true"
> <c-customDataTableCell data-field-name="email" class="dataTableCell"> </c-
customDataTableCell> <c-data-table-cell data-field-name="age"
class="dataTableCell"> </c-data-table-cell> <c-data-table-cell data-field-
name="balance" class="dataTableCell"> </c-data-table-cell> <c-data-table-cell
data-field-name="address" class="dataTableCell"> </c-data-table-cell> <c-data-
table-cell data-field-name="isActive" class="dataTableCell"> </c-data-table-
cell> <c-data-table-cell data-field-name="phone" class="dataTableCell"> </c-
data-table-cell>
</c-data-table>
As you can see how we create a data table is not changed at all, the only piece that is different is for each
column you want to show, you have to write its relevant column inside data table element.
THE ELEMENT THAT IS SUPPORTED INSIDE DATA TABLE IS EITHER DATATABLECELL OR

EXTENDED LWC OF DATA TABLE CELL.
Each column element should have two mandatory attributes: a) data-field-name : This is the same field
name we specify inside columns array as mentioned before.
b) class : You should add a dataTableCell class for it to be treated a column UI.

company 143
OmniStudio
INSIDE EXTENDED COMPONENT YOU WILL HAVE FOLLOWING DATA: a) cellData : This is that
particular column cell data. For eg: if this column field name is "email". this variable will contain related data
to that field name. You can read it by "cellData.value"
b) rowData: This contains complete row data as it is of one single record and can be used to show more
data as well.
c) columnData: This contains metadata of what you pass inside columns json.
NOTE: Even if we just want to customize one column we have to specify all the columns inside data
table. If you dont want to customize any column then keep inside of data table empty.
NOTE: For now custom column UI support is not supported in GROUP BY tables.
Examples of a custom column UI component. You can use it as a reference. Please look at above data
table example.
customDataTableCell
<template> <div if:true={cellData} class="tableRowCell">  {cellData.value} : <br>{rowData.phone} <button
onclick={toggleText}>Toggle</button> <div if:true={hiddenText}>
{cellData.value} </div> </div>
</template>
import {track} from 'lwc';

export default class DataTableCellExtended extends dataTableCell { @track
hiddenText= false; toggleText(){ this.hiddenText = !this.hiddenText; }
}
.tableRowCell{ display: table-cell; padding: 0.25rem 0.5rem; white-space:

nowrap; position: relative;
} .tableRowCell:first { border: 0;
}
Datatable Lightning Web Component ReadMe Summer '19

This page contains the DataTable LWC ReadMe as of the Vlocity Insurance and Health Summer '19
release.
The DataTable Lightning Web Component creates a tabular structure of the data provided. It supports
grouping, search, pagination and sorting capabilities.


company 144
OmniStudio

extraclass string Adds a class to
the table element.
To add multiple
classes, use a
space to separate
each class, such
as `classone
classtwo'.
issearchavailable true, false boolean To make table
(Default: false) searchable, set to
true. Displays the
search input field
and filter
dropdown.
issortavailable true, false boolean To make table
(Default: false) sortable, set to
true. This feature
is not available on
phones and
smaller screens.
theme slds, nds (Default: string Specifies which
slds) theme to use.
icon-url url string Overrides the
default URL of the
svg resource.
Used with
Newport Design
System (NDS)
theme only.
group-by JSON object To group table
based on a record
field, set this
attribute. To make
field name the
group header, set
the field name as
the value for this
attribute. To add a
group description
with the group
header, pass an
object as a value
for this attribute
(seeAvailable
groupBy
Attributes).
pagesize number If set, enables
pagination.

company 145
OmniStudio

row-level-edit true, false boolean To enable row-
(Default: false) level editing, set
to true. The
columns JSON
must have
editable fields.
See Available
columns
Attributes.
user-selectable- true, false boolean Enables users to
column (Default: true) choose which
columns are
visible. If set to
true, in
thecolumns
JSON, only those
fields with
userSelectable
set to true will be
visible. See
Available
columns
Attributes.
columns JSON array yes Contains heading
names and
specifies settings
for each column.
See Available
columns
Attributes.
records JSON array yes Contains the data
to populate the
table.
cell-level-edit true, false boolean To enable cell-
level editing, set
to true. To make
specific cells
editable, see
Available
columns
Attributes.
group-order asc, dsc string Orders group in
ascending or
descending order.
hide-table-header true, false boolean To hide table
(Default: false) header, set to
true.
pagelimit (Default: 3) number Specifies how
many page
navigation links to
add to pagination.
The pagesize
must be set.

company 146
OmniStudio

>
</c-data-table>
Example data JSON

];

editable true, false (Default: boolean Specifies whether
false) column is editable.
fieldName string yes Gets the key for the
column from the
dataJSON.
label string yes Sets the visible name
of the column
heading.
searchable true, false (Default: boolean To enable the ability
false) to search column
values, set to true.
sortable true, false (Default: boolean To enable column
false) sorting, set to true.
On hover of column
heading, a sorting
icon displays next to
the column name.
type number, text, email, string Specifies the type of
textarea, checkbox value column holds.
(Default: text)
userSelectable true, false (Default: boolean If set to true, enables
false) user to choose if
column is visible.

company 147
OmniStudio

visible true, false (Default: boolean To hide column, set to
true) false. If set to false
and userSelectable is
set to true, user can
make column visible.

[{ "fieldName": "company", "label": "Company", "sortable": true,
"searchable": true }, { "fieldName": "email", "label": "Email", "sortable":
true, "searchable": true, "type": "email", "editable": true, "userSelectable":

fields list array Sets group header
description for every
visible row after
grouping. Each object
takes a field name
that has its own group
desciption, which by
default is the sum of
all selected field from
all the records. To get
group description
using a custom
function, pass function
to
methodToCalculateSu
mmary, which takes
groupItems' as
an argument. For
example,
`nameOfFunction(
groupItems){}.
groupFieldName string yes The reference key
(field name) from
thedata JSON used to
group the table.

{ "groupFieldName": "company", "fields": [ { "name": "balance",

company 148
OmniStudio

onupdate
DataTableCell Lightning Web Component ReadMe

This page contains a DataTableCell LWC ReadMe for each Vlocity release.
The DataTableCell Lightning Web Component is the base element inside a DataTable Lightning Web
Component forming individual cells.
Available dataTableCell Attributes

columnData JSON Contains metadata of what you pass inside columns json.
cellData JSON Specifiies column cell data. For example, if this column field
name is "email", this variable will contain related data to that
field name
iconUrl string Defines the base url used for the edit field for a custom icon.
theme slds, nds (Default: string Specifes the theme of the component.
slds)
isCustomUi true, false boolean Set to true to implement a custom UI.
(Default:false)
rowData JSON Contains complete row data from one single record. Can show
more data.
Example of baseState
<c-data-table
theme="{theme}"
draggable="true"
pagesize="5"
row-level-edit="true"
row-delete="true"
columns="{columns}"
records="{tableData}"
onupdate="{tableUpdateHandler}"
ondelete="{tableDeleteHandler}"
onrowclick="{tableOnRowClickHandler}"
>
<c-data-table-cell
data-field-name="age"
class="dataTableCell"
></c-data-table-cell>

company 149
OmniStudio
<c-data-table-cell
data-field-name="balance"
class="dataTableCell"
></c-data-table-cell>
</c-data-table>
DatePicker Lightning Web Component ReadMe

This page contains a DatePicker LWC ReadMe for each Vlocity release.

The DatePicker Lightning Web Component is a date input element with a graphical user interface (GUI)
widget that enables the user to select a date from a calendar. The DatePicker LWC supports custom labels.
Available c-date-picker Attributes

label string Adds a visible name for the rendered date picker.
placeholder string Adds placeholder text in the input field.
error string Adds text for an error message.
name string Adds a name for the date picker.
mask To define how a user must write an input value, set this
attribute. (For example, "$###,###.000" , "##’##")
format string Sets the input format for the selected date. View format
options here.
locale-format string Sets the locale. See Dayjs locales here. Refer to the
custom label cmpDayJsLocaleFormats
output-format (Default: string Sets the format of the output, when output-type is string.
YYYY-MM- View format options here.
DD)
min string Sets a minimum date. User defined value.
max string Sets a maximum date. User defined value
position left, right string Specifies where the component displays in relation to the
(Default: input field.
left)
required true, false boolean To make this component required, set to true. Adds an
(Default: asterisk next to the label.
false)
disabled true, false boolean To disable this component, set to true.
(Default:
false)
readonly true, false boolean To make this component read only, set to true.
(Default:
false)
(Default:
slds)
output-type string, date string Sets the type of output.
(Default:
string)

company 150
OmniStudio

value string Specifies the value of the datePicker element.
display-value string Read-only property that displays the formatted property
value.
locale-format- string Specifies the error message displayed when locale format
invalid-error is invalid.
select-date-label string Adds a title describing the instructions for the date picker.
prev-month-label string Adds a title for the prev month icon.
next-month-label string Adds a title for the next month icon.
required-label string Adds a title for the asterisk when required is true.
pick-year-label string Adds a title for the year dropdown selector.
today-label string Adds a visible name for today.
Example c-date-picker Component
<c-date-picker
theme=""
disabled="true"
label="Disabled"
name="date picker"
value="date picker"
hide-icon=false
></c-date-picker>

the input's label.
<c-date-picker
theme=""
disabled="true"
label="Disabled"
name="date picker"
value="date picker"
hide-icon=false
>
</c-date-picker>

Select Date cmpSelectDate Text visible on mouse over of the calendar icon.
This field value is missing. cmpFieldValueMissing Message to display when user leaves the date picker when the
value is missing.

company 151
OmniStudio

Unable to render ${1} due to localeFormatInvalidError Text visible when a user enters an invalid locale format.
invalid localeFormat [${2}].
Please provide a valid
localeFormat in the form of
Previous Month prevMonthLabel Text visible on mouse over of the calendar's previous month icon.
Default icon is a left arrow.
Next Month nextMonthLabel Text visible on mouse over of the calender's next month icon.
Default icon is right arrow.
required requiredLabel Text visible on mouse over of *next to the Date label.
Pick a year cmpPickYr Assistive text for the year dropdown on the calendar's header.
Today todayLabel Text for the link to select today's date.
Invalid Value. cmpInvalidValue Text visible on input of an invalid value.
Date is before the allowed range. cmpRangeUnderflow Text visible when a user selects a date below the allowed range.
Date is after the allowed range. cmpRangeOverflow Text visible when a user selects a date date after the allowed
range.
widget that enables the user to select a date from a calendar.

label string Adds a visible name for the rendered date picker.
placeholder string Adds placeholder text in the input field.
error string Adds text for an error message.
name string Adds a name for the date picker.
mask To define how a user must write an input value, set this
attribute. (For example, "$###,###.000" , "##’##")
format string Sets the input format for the selected date. View format
options here.
output-format (Default: YYYY- string Sets the format of the output, when output-type is string.
MM-DD) View format options here.
min string Sets a minimum date. User defined value.
max string Sets a maximum date. User defined value
position left, right (Default: string Specifies where the component displays in relation to the
left) input field.
required true, false boolean To make this component required, set to true. Adds an
(Default: false) asterisk next to the label.
disabled true, false boolean To disable this component, set to true.
(Default: false)
readonly true, false boolean To make this component read only, set to true.
(Default: false)
(Default: slds)

company 152
OmniStudio

output-type string, date string Sets the type of output.
(Default: string)
value string Specifies the value of the datePicker element.
displayValue string Getter only property, which displays as the formatted
property value.
hide-icon true,false boolean Specifies if date picker icon should be hidden
(Default: false)
<c-date-picker
theme=""
disabled="true"
label="Disabled"
name="date picker"
value="date picker"
hide-icon=false
></c-date-picker>
widget that enables the user to select a date from a calendar.

label string Adds a visible
name for the
rendered date
picker.
placeholder string Adds placeholder
text in the input
field.
error string Adds text for an
error message.
name string Adds a name for
the date picker.
mask To define how a
user must write
an input value, set
this attribute. (For
example, `
$,.000'' , ` ’'')
format string Sets the input
format for the
selected date.
View format
options here.

company 153
OmniStudio

output-format (Default: YYYY- string Sets the format of
MM-DD) the output, when
output-type is
string. View
format
optionshttps://
date-fns.org/
v2.0.0-alpha.37/
docs/format[here].
min string Sets a minimum
date. User
defined value.
max string Sets a maximum
date. User
defined value
position left, right (Default: string Specifies where
left) the component
displays in
relation to the
input field.
required true, false boolean To make this
(Default: false) component
required, set to
true. Adds an
asterisk next to
the label.
disabled true, false boolean To disable this
(Default: false) component, set to
true.
readonly true, false boolean To make this
(Default: false) component read
only, set to true.
theme slds, nds (Default: string Specifies which
slds) theme to use.
output-type string, date string Sets the type of
(Default: string) output.
value string Specifies the
value of the
datePicker
element.
<c-date-picker
theme=""
disabled="true"
label="Disabled"
name="date picker"
value="date picker"
></c-date-picker>

company 154
OmniStudio
DateTimePicker Lightning Web Component ReadMe

This page contains a DateTimePicker LWC ReadMe for each Vlocity release.

The DateTimePicker Lightning Web Component is a set of input fields with graphical user interface (GUI)
widgets that enable the user to select a date from a calendar and a time from a list.
Available c-datetime-picker Attributes

theme slds, nds Specifies which theme to use.
(Default: slds)
label string Sets the visible name for the component.
disabled no value (See string To prevent users from interacting with the field, set this
example attribute. Sets both date and time elements.
code.)
required no value (See To require input field, set this attribute. Sets both date
example and time elements.
code.)
read-only no value (See string If field is read-only and cannot be edited by user, set this
example attrubute.
code.)
min string The minimum acceptable value for the date. Must be in
output-format.
max string The maximum acceptable value for the date. Must be in
output-format.
message-when- (Default: This string Error message to display when the value is missing.
value-missing field is
required)
message-when- (Default : This string Error message to display when a bad input is detected.
bad-input field is not
valid)
message-when- string Displays an error message when min and max are set
range-overflow and a user sets a value that goes above the max value.
range-underflow and a user sets a value that goes below the min value.
icon-url (Default: slds string Defines the url for the icon. Set for both date and time
icon url) elements.
field-level-help string Adds help text.
interval string/ Defines the time range in the dropdown options of the
number time input field. User can set value as "15" or 15.
output-format (Default: string Sets the format of the output when output-type is string.
DD/MM/YYYY View format options here.
hh:mm a)
output-type string, date string Sets the output type. If date is set, returns date object.
(Default:
string)
date-name string Specifies the name of the date input element.
time-name string Specifies the name of the time input element.

company 155
OmniStudio

date-label string Sets the visible name for the date field.
time-label string Sets the visible name for the time field.
date-placeholder string Adds placeholder text inside the date input field.
time-placeholder string Adds placeholder text inside the time input field.
value string Specifies the value of the datetimePicker element. When
the date value is set, the default time value is 12:00pm.
When the time value is set, the default date value is
today.
display-value string Read-only property that displays as the formatted
property value.
hide-icon true, false boolean Specifies if date time picker icon should be hidden
(Default: false)
locale-format- string Specifies the error message displayed when locale
invalid-error format is invalid.
select-date-label string Adds a title describing the instructions for the date
picker.
prev-month-label string Adds a title for the previous month icon.
next-month-label string Adds a title for the next month icon.
pick-year-label string Adds a title for the year dropdown selector.
today-label string Adds a visible name for today.
Example c-datetime-picker Component

<c-datetime-picker
value="2019-03-30T10:15:00"
read-only
disabled
required
date-name="date"
time-name="time"
date-label="Date"
time-label="Time"
label="Select Datetime (empty date/time label)"
hide-icon=false
></c-datetime-picker>

the input's label.
<c-datetime-picker
value="2019-03-30T10:15:00"
read-only
disabled
required

company 156
OmniStudio
date-name="date"
time-name="time"
date-label="Date"
time-label="Time"
hide-icon=false
>
</c-datetime-picker>

theme slds, nds Specifies which theme to use.
(Default: slds)
label string Sets the visible name for the component.
disabled no value (See string To prevent users from interacting with the field, set this
example code.) attribute. Sets both date and time elements.
required no value (See To require input field, set this attribute. Sets both date
example code.) and time elements.
read-only no value (See string If field is read-only and cannot be edited by user, set this
example code.) attrubute.
min string The minimum acceptable value for the date. Must be in
output-format.
max string The maximum acceptable value for the date. Must be in
output-format.
message-when- (Default: This string Error message to display when the value is missing.
value-missing field is
required)
message-when- (Default : This string Error message to display when a bad input is detected.
bad-input field is not
valid)
range-overflow and a user sets a value that goes above the max value.
range-underflow and a user sets a value that goes below the min value.
icon-url (Default: slds string Defines the url for the icon. Set for both date and time
icon url) elements.
interval string/ Defines the time range in the dropdown options of the
number time input field. User can set value as "15" or 15.
output-format (Default: string Sets the format of the output when output-type is string.
DD/MM/YYYY View format options here.
hh:mm a)

company 157
OmniStudio

output-type string, date string Sets the output type. If date is set, returns date object.
(Default: string)
date-name string Specifies the name of the date input element.
time-name string Specifies the name of the time input element.
date-label string Sets the visible name for the date field.
time-label string Sets the visible name for the time field.
date-placeholder string Adds placeholder text inside the date input field.
time-placeholder string Adds placeholder text inside the time input field.
value string Specifies the value of the datetimePicker element. When
the date value is set, the default time value is 12:00pm.
When the time value is set, the default date value is
today.
property value.
hide-icon true, false boolean Specifies if date time picker icon should be hidden
(Default: false)
<c-datetime-picker
value="2019-03-30T10:15:00"
read-only
disabled
required
date-name="date"
time-name="time"
date-label="Date"
time-label="Time"
hide-icon=false

theme slds, nds (Default: Specifies which theme
slds) to use.
label string Sets the visible name
for the component.

company 158
OmniStudio

disabled no value (See string To prevent users from
example code.) interacting with the
field, set this attribute.
Sets both date and
time elements.
required no value (See To require input field,
example code.) set this attribute. Sets
both date and time
elements.
read-only no value (See string If field is read-only
example code.) and cannot be edited
by user, set this
attrubute.
min string The minimum
acceptable value for
the date. Must be
inoutput-format.
max string The maximum
the date. Must be
inoutput-format.
message-when-value- (Default: This field is string Error message to
missing required) display when the
value is missing.
message-when-bad- (Default : This field is string Error message to
input not valid) display when a bad
input is detected.
message-when-range- string Displays an error
overflow message whenmin
and max are set and a
user sets a value that
goes above the max
value.
message-when-range- string Displays an error
underflow message when min
and max are set and a
user sets a value that
goes below the min
value.
icon-url (Default: slds icon url) string Defines the url for the
icon. Set for both date
and time elements.
interval string/number Defines the time
range in the dropdown
options of the time
input field. User can
set value as ``15'' or
15.

company 159
OmniStudio

output-format (Default: DD/MM/ string Sets the format of the
YYYY hh:mm a) output when output-
type is string. View
format optionshttps://
date-fns.org/v2.0.0-
alpha.37/docs/
format[here].
output-type string, date (Default: string Sets the output type. If
string) date is set, returns
date object.
date-name string Specifies the name of
the date input
element.
time-name string Specifies the name of
the time input
element.
date-label string Sets the visible name
for the date field.
time-label string Sets the visible name
for the time field.
date-placeholder string Adds placeholder text
inside the date input
field.
time-placeholder string Adds placeholder text
inside the time input
field.
value string Specifies the value of
the datetimePicker
element.
<c-datetime-picker
value="2019-03-30T10:15:00"
read-only
disabled
required
date-name="date"
time-name="time"
date-label="Date"
time-label="Time"
Form Lightning Web Component ReadMe

This page contains a Form LWC ReadMe for each Vlocity release.

company 160
OmniStudio
The Form Lightning Web Component creates a wrapper around Vlocity form elements to enable form
capabilities.
Available c-form Attributes
Attribute Value Value Required Description

layout stacked, horizontal, string Defines the form layout.
compound (Default:
stacked)
model (Default: {}) string, Keeps key-value pairs for all elements with their synced
stringify json values. All elements inside the c-form component must
have a name attribute. If available, populates with values
from elements.
theme slds, nds (Default: string Specifies which theme to use.
slds)
action string Specifies where to send the form data when the form is
submitted.
method get, post (Default: get) string Defines method to submit the form.
Example c-form Component
<c-form
model={model}
layout="stacked"
>
<c-input value="" label="Name" placeholder="Normal Input"
name="name"></c-input>
<c-input value="" label="Password" placeholder="Normal Input"
name="password"></c-input>
<c-typeahead data={data} label="Typeahead" placeholder="Normal Input"
name="typeahead"></c-typeahead>
<c-combobox theme="" value="" multiple options={data} label="Default
Multi Selected" placeholder="Normal Input" name="multiselect"></c-combobox>
<c-checkbox label="Normal Checkbox" name="checkbox"></c-checkbox>
<c-radio-group extraclass="slds-p-around_small" groupname="slds1"
label="Select option" options={data} name="radiogroup"></c-radio-group>
<c-button theme="" type="submit" name="submit" variant="brand"
label="brand" icon="utility:close" icon-position="right"></c-button>
</c-form>
The Form Lightning Web Component creates a wrapper around Vlocity form elements to enable form
capabilities.

company 161
OmniStudio
Available c-form Attributes
Attribute Value Value Required Description

layout stacked, horizontal, string Defines the form
compound (Default: layout.
stacked)
model (Default: {}) string, stringify json Keeps key-value pairs
for all elements with
their synced values.
All elements inside
the`c-form`
component must have
a name attribute. If
available, populates
with values from
elements.
slds) to use.
action string Specifies where to
send the form data
when the form is
submitted.
method get, post (Default: get) string Defines method to
submit the form.
Example c-form Component
<c-form
model={model}
layout="stacked"
>
<c-input value="" label="Name" placeholder="Normal Input"
name="name"></c-input>
<c-input value="" label="Password" placeholder="Normal Input"
name="password"></c-input>
<c-typeahead data={data} label="Typeahead" placeholder="Normal Input"
name="typeahead"></c-typeahead>
<c-combobox theme="" value="" multiple options={data} label="Default
Multi Selected" placeholder="Normal Input" name="multiselect"></c-combobox>
<c-checkbox label="Normal Checkbox" name="checkbox"></c-checkbox>
<c-radio-group extraclass="slds-p-around_small" groupname="slds1"
label="Select option" options={data} name="radiogroup"></c-radio-group>
<c-button theme="" type="submit" name="submit" variant="brand"
label="brand" icon="utility:close" icon-position="right"></c-button>
</c-form>
Icon Lightning Web Component ReadMe

This page contains an Icon LWC ReadMe for each Vlocity release.

company 162
OmniStudio
The Icon Lightning Web Component renders an SVG icon.
Available c-icon Attributes

alternative-text string Adds alternative text for the icon. For best practice, if icon
is part of a button or is clickable, text should describe what
action is taken, such as 'Upload File', and not what the icon
is, such as "Paperclip".
baseurl URL string Overrides the defined url for the SVG resource.
bg-color Accepts name, rgb and string Adds a background color to the icon.
hex values
color Accepts name, rgb and string Sets the color of the icon.
hex values
extraclass string Adds a class to the parent of the input element. To add
multiple classes, use a space to separate each class, such
as 'classone classtwo'.
icon-name (For example, string yes Sets which icon to use.
utility:info)
iconposition left, right (Default: left) string Sets the position of the icon.
imgsrc string Sets the icon image from the image URL.
size xx-small, x-small, small, string Sets the size of the icon.
medium, large (Default:
small)
theme slds, nds (Default: slds) string Sets the theme for the icon.
variant inverse, warning, error , string Changes the appearance of action,custom, standard and
success, light, default utility icons. The inverse variant adds a white fill on a dark
(Default: default) background.
Example c-icon Component
<c-icon
theme="slds"
icon-name="utility:add"
size="small"
extraclass="slds-icon-text-default"
></c-icon>

alternative-text string Adds alternative text for the icon. For best practice, if icon
is part of a button or is clickable, text should describe what
action is taken, such as 'Upload File', and not what the
icon is, such as "Paperclip".

company 163
OmniStudio

baseurl URL string Overrides the defined url for the SVG resource.
bg-color Accepts name, rgb and string Adds a background color to the icon.
hex values
color Accepts name, rgb and string Sets the color of the icon.
hex values
multiple classes, use a space to separate each class,
such as 'classone classtwo'.
icon-name (For example, string yes Sets which icon to use.
utility:info)
iconposition left, right (Default: left) string Sets the position of the icon.
size xx-small, x-small, small, string Sets the size of the icon.
medium, large (Default:
small)
theme slds, nds (Default: slds) string Sets the theme for the icon.
variant inverse, warning, error , string Changes the appearance of action,custom, standard and
success, light, default utility icons. The inverse variant adds a white fill on a dark
(Default: default) background.
<c-icon
theme="slds"
size="small"
></c-icon>

icon-name (For example, string yes Sets which icon to
utility:info) use.
slds) icon.
baseurl URL string Overrides the defined
url for the SVG
resource.
parent of the input
element. To add
a space to separate
each class, such as

company 164
OmniStudio

size xx-small, x-small, string Sets the size of the
small, medium, large icon.
(Default: small)
color Accepts name, rgb string Sets the color of the
and hex values icon.
bg-color Accepts name, rgb string Adds a background
and hex values color to the icon.
iconposition left, right (Default: left) string Sets the position of
the icon.
variant inverse, warning, string Changes the
error , success, light, appearance of
default (Default: action,custom,
default) standard and utility
icons. The inverse
variant adds a white
fill on a dark
background.
alternative-text string Adds alternative text
for the icon. For best
practice, if icon is part
of a button or is
clickable, text should
describe what action
is taken, such as
Ùpload File', and not
what the icon is, such
as ``Paperclip''.
<c-icon
theme="slds"
size="small"
></c-icon>
Img Lightning Web Component ReadMe

This page contains the Img LWC ReadMe for each Vlocity release.

The Img Lightning Web Component displays an available image.
Available c-img Attributes

alternative-text string yes Specifies the text that describes the image. When the 'imgsrc' is
available, 'alternative-text' displays as a tooltip on image hover.
When the 'imgsrc' is not available, 'alternative-text' displays next to
the default NDS or SLDS image icon.

company 165
OmniStudio

cropsize 1x1, 4x3, string Specifies the cropping ratio for the image, which is constrained to the
16x9 parents width.
extraclass string Adds a class to the root parent of the img element. To add multiple
classtwo'.
img-height string Specifies the height of the image. Used only when size is not
specified.
imgsrc string yes Sets the source path for the image. An NDS or SLDS image icon
displays when an image source is not available.
img-width string Specifies the width of the image. Used only when size is not
specified.
size small, string Sets the size of the image.
medium,
large, x-
large, xx-
large
theme slds, nds, string Sets the theme for the component.
(Default:
slds)
title string Specifies the title that displayed at the bottom of the image.
titleclass string Adds a class to the title element. To add multiple classes, use a
space to separate each class, such as 'classone classtwo'.
Example c-img Component
<c-img
theme="slds"
imgsrc="https://www.domain.com/image.jpg"
alternative-text="Image Description"
size="small"
extraclass="slds-image slds-image--card"
></c-img>
Input Lightning Web Component ReadMe

This page contains an Input LWC ReadMe for each Vlocity release.

The Input Lightning Web Component renders an input element.
Available c-input Attributes

accept pdf, png, jpg, string Specifies the types of files that the server
and so forth accepts. Applies only when type is set to 'file'.
access-key string Sets the keyboard shortcut for input field.
aria-controls string Specifies a space-separated list of element IDs
whose presence or content is controlled by the
input.

company 166
OmniStudio

aria-described-by string Specifies a space-separated list of element IDs
that provide descriptive labels for the input.
aria-label string Adds a label describing the input to assistive
technologies.
aria-labelled-by string Specifies a space-separated list of element IDs
that provide labels for the input.
checkboxLabelIconName string Specifies the icon to display in the checkbox.
date-format (Default: YYYY- string Specifies the format of a date input element.
MM-DD) Applies only when type is set to 'datetime'.
date-label (Default: Date ) string Specifies the label of a date input element.
Applies only when type is set to 'datetime'.
date-name string Specifies the name of a date input element.
date-placeholder (Default: Select string Specifies the placeholder of a date input
Date) element. Applies only when type is set to
'datetime'.
date-time-locale-format string Specifies the locale for date, time and date/time
element and replaces months, days of week,
etc to the correct locale. Dayjs locales here.
Refer to the custom label
cmpDayJsLocaleFormats
date-time-locale-format- string Specifies the error message displayed when
invalid-error locale format is invalid.
disabled boolean If set, the textarea field is disabled and users
display-value string Read-only property that displays the child's
displayValue or the maskedValue.
end-date string Adds a value for the endDate input of range
date picker component. Applies only when type
is set to 'date'.
end-date-picker-label string Adds a visible label for the endDate input when
range date picker component. Applies only
when type is set to 'date'.
extraclass string Adds a class to the parent of the input element.
To add multiple classes, use a space to
separate each class, such as 'classone
classtwo'.
files array Specifies a list of files. Applies only when type is
set to 'file'.
formatter percent, string Sets how to format the input value when value
currency is a number.
icon-click-callback method Calls the specified callback method when the
icon of either icon-name-rightattribute or icon-
name-leftattribute is clicked.
icon-color string Sets the color of the icon in the input element.
icon-name-left (Format: string Sets an icon.
utility:info)
icon-name-right (Format: string Sets an icon.
utility:info)

company 167
OmniStudio

icon-url string Sets the icon base url. Applies only when type
is set to 'file'.
inlinehelp string Adds help text after the input element.
interval number Sets the interval between the options of the
time dropdown. Applies only when type is set to
'time/datetime'
label string yes Sets a title for the textarea input field. Applies
only when type is set to 'textarea'.
mask string Adds a mask for the input value. See mask Use
Cases for this component.
mask-range string Sets a limit for the input. Truncates the value to
a maximum number of characters.
max string, Sets the maximum acceptable value for the
number input. Applies only when type is number, range,
date, time, or datetime. For number and range
type, the max value is a decimal number. For
the date, time, and datetime types, the max
value must use a valid string for the type.
max-length number Sets the maximum number of characters
allowed in the textarea.
message-when-bad-input string Displays an error message when a bad input is
detected.
message-when-pattern- string Displays an error message when a pattern
mismatch mismatch is detected.
message-when-range- string Displays an error message when a range
overflow overfolow is detected.
message-when-range- string Displays an error message when a range
underflow underflow is detected.
message-when-step- string Displays an error message when a step
message-when-too-long string Displays an error message when the value is
too long.
message-when-too-short string Displays an error message when the value is
too short.
message-when-type- string Displays an error message when a type
message-when-value- string Displays an error message when the value is
missing missing.
min string, Sets the minimum acceptable value for the
number input. Applies only when type is number, range,
date, time, or datetime. For number and range
types, the min value is a decimal number. For
the date, time, and datetime types, the min
min-length number Sets the minimum number of characters
allowed in the textarea.
multiple string Enables user to enter more than one value.
Applies only when type is set to 'file' or 'email'.
name string Specifies the name of the input element.
next-month-label string Specifies a title for the next month icon.

company 168
OmniStudio

novalidate true, false To prevent default validation, set to true. Use
(Default: the setCustomValidity to set the custom
false) validation method. See Available Methods for
this component.
output-format (Default for string Sets the format of the output, when output-type
date: is string and type is set to 'time' or 'datetime'.
HH:mm:ss.SSS For format options, see date-fns.
ZZ) (Default for
datetime:
DD/MM/YYYY
hh:mm a)
output-type string, date string Sets the output type. Applies only when type is
(Default: string) set to 'time' or 'datetime'.
pattern string Specifies the regular expression that the input
value is checked against. Applies only when
type is text, search, url, tel, email, or password.
pick-year-label string Specifies a title for the year dropdown selector.
placeholder string To display text when field is empty, set this
attribute.
position string Sets the position of the DatePicker Lightning
Web Component. Applies only when type is set
to 'date'.
posttext string Specifies the text after the input textbox.
pretext string Specifies the text in front of the input text box.
prev-month-label string Specifies a title for the prev month icon.
range string Adds a range to the DatePicker Lightning
Web Component. Applies only for type is set to
'date'.
read-only boolean If set, the textarea field is read-only and cannot
be edited.
required boolean If set, the textarea field must be filled out before
the form can be submitted.
required-label string Specifies a title for the asterisk when required is
true.
select-date-label string Specifies a title describing the instructions for
the date picker.
size string Set the size of the DatePicker Lightning Web
Component input field. Applies only when type
is set to 'date'.
static boolean Makes the input element static.
(Default:
false)
step any, positive string, Sets the granularity of the value. Use 'any' when
floating number number granularity is not important.
(Default: 1)
tab-index number For internal use only, indicates if an element is
focusable. A value of 0 means element is
focusable and participates in sequential
keyboard navigation. A value of -1 means
element is focusable but does not participate in
keyboard navigation.

company 169
OmniStudio

theme slds, nds Specifies the theme to use.
(Default:
slds)
time-format (Default: string Specifies the format of a time input element.
HH:mm) Applies only when type is set to 'datetime'.
time-label ( Default: Time) string Specifies the label of a time input element.
time-name string Specifies the name of a time input element.
time-placeholder (Default: Select string Specifies the placeholder of a time input
Time) element. Applies only when type is set to
'datetime'.
today-label string Specifies a visible name for today.
toggle-off-label string When type is set to 'toggle', sets the label in the
off state.
toggle-on-label string When type is set to 'toggle', sets the label in the
on state.
type (Default: text) string Sets the input type. For a date input, see
DatePicker Lightning Web Component. For a
list of input types, see Form Input Types.
validity object Represents the validity states of the textarea
input, with respect to constraint validation. For
example: { badInput: false,
customError: false,
patternMismatch: false,
rangeOverflow: false,
rangeUnderflow: false,
stepMismatch: false, tooLong:
false, tooShort: false,
typeMismatch: false, valid: true,
valueMissing: false }
value string Sets the value of the textarea input. Used as
the default value during init.
variant standard, label- string Changes the appearance of an input field.
hidden (Default:
standard)
Example c-input Component
<c-input
theme="slds"
inline-help="ex: (415)111-2222"
label="Input"
placeholder="Inline-help"
></c-input>
<c-input
theme="slds"
multiple

company 170
OmniStudio
type="file"
accept="image/*"
label="Accept only image"
></c-input>
<c-input
theme="slds"
required
label="Required Input"
placeholder="Required Input"
></c-input>
<c-input
theme="slds"
min-length="10"
required
label="Minimum 10 char"
placeholder="Minimum 10 char"
></c-input>
mask Use Cases

• The mask uses custom logic with any input type, when mask is set, and formatter is not set.
• Format is international when type is set to 'number', formatter is set to 'currency', and mask is not set.
See NumberFormat.
• Javascript number formatter is used when type is set to 'number',formatter is set to 'currency', and mask
is set. See JavaScript Number Formatter.
Label Slot Usage

the input's label. This feature is not available for inputs that are formula, checkbox, file, or has isToggle =
true.
Example Slot Usage

<c-input
theme="slds"
inline-help="ex: (415)111-2222"
label="Input"
>
</c-input>
Available Methods
checkValidity()

company 171
OmniStudio
reportValidity()
clears displayed error messages and returns true.
Displays a custom error message when the textarea value is submitted. Takes the message argument. If
focus()
Sets focus on the textarea field.
blur()
Removes focus from the textarea field.
resetValidations()
Removes the error state.


accept pdf, png, jpg, string Specifies the types of files that the server accepts. Applies
and so forth only when type is set to 'file'.
access-key string Sets the keyboard shortcut for input field.
aria-controls string Specifies a space-separated list of element IDs whose
presence or content is controlled by the input.
aria-described- string Specifies a space-separated list of element IDs that
by provide descriptive labels for the input.
aria-label string Adds a label describing the input to assistive technologies.
aria-labelled-by string Specifies a space-separated list of element IDs that
provide labels for the input.
date-format (Default: YYYY- string Specifies the format of a date input element. Applies only
MM-DD) when type is set to 'datetime'.
date-label (Default: Date ) string Specifies the label of a date input element. Applies only
when type is set to 'datetime'.

company 172
OmniStudio

date-name string Specifies the name of a date input element. Applies only
date- (Default: Select string Specifies the placeholder of a date input element. Applies
placeholder Date) only when type is set to 'datetime'.
date-time- string Specifies the locale for date, time and date/time element
locale-format and replaces months, days of week, etc to the correct
locale. Dayjs locales here. Refer to the custom label
cmpDayJsLocaleFormats
date-time- string Specifies the error message displayed when locale format
locale-format- is invalid.
invalid-error
disabled boolean If set, the textarea field is disabled and users cannot
interact with it.
display-value string Read-only property that displays the child's
end-date string Adds a value for the endDate input of range date picker
component. Applies only when type is set to 'date'.
end-date- string Adds a visible label for the endDate input when range date
picker-label picker component. Applies only when type is set to 'date'.
files array Specifies a list of files. Applies only when type is set to
'file'.
formatter percent, string Sets how to format the input value when value is a
currency number.
icon-color string Sets the color of the icon in the input element.
utility:info)
utility:info)
icon-url string Sets the icon base url. Applies only when type is set to
'file'.
inlinehelp string Adds help text after the input element.
interval number Sets the interval between the options of the time
dropdown. Applies only when type is set to 'time/datetime'
label string yes Sets a title for the textarea input field. Applies only when
type is set to 'textarea'.
mask string Adds a mask for the input value. See mask Use Cases for
this component.
mask-range string Sets a limit for the input. Truncates the value to a
maximum number of characters.
max string, Sets the maximum acceptable value for the input. Applies
number only when type is number, range, date, time, or datetime.
For number and range type, the max value is a decimal
number. For the date, time, and datetime types, the max
max-length number Sets the maximum number of characters allowed in the
textarea.

company 173
OmniStudio

message- string Displays an error message when a bad input is detected.
when-bad-input
message- string Displays an error message when a pattern mismatch is
when-pattern- detected.
mismatch
message- string Displays an error message when a range overfolow is
when-range- detected.
overflow
message- string Displays an error message when a range underflow is
when-range- detected.
underflow
message- string Displays an error message when a step mismatch is
when-step- detected.
mismatch
message- string Displays an error message when the value is too long.
when-too-long
message- string Displays an error message when the value is too short.
when-too-short
message- string Displays an error message when a type mismatch is
when-type- detected.
mismatch
message- string Displays an error message when the value is missing.
when-value-
missing
min string, Sets the minimum acceptable value for the input. Applies
number only when type is number, range, date, time, or datetime.
For number and range types, the min value is a decimal
number. For the date, time, and datetime types, the min
min-length number Sets the minimum number of characters allowed in the
textarea.
multiple string Enables user to enter more than one value. Applies only
when type is set to 'file' or 'email'.
name string Specifies the name of the input element.
next-month- string Specifies a title for the next month icon.
label
novalidate true, false To prevent default validation, set to true. Use the
(Default: setCustomValidityto set the custom validation
false) method. See Available Methods for this component.
output-format (Default for date: string Sets the format of the output, when output-type is string
HH:mm:ss.SSS and type is set to 'time' or 'datetime'. For format options,
ZZ) (Default for see date-fns.
datetime:
DD/MM/YYYY
hh:mm a)
output-type string, date string Sets the output type. Applies only when type is set to 'time'
(Default: string) or 'datetime'.
pattern string Specifies the regular expression that the input value is
checked against. Applies only when type is text, search,
url, tel, email, or password.
pick-year-label string Specifies a title for the year dropdown selector.

company 174
OmniStudio

placeholder string To display text when field is empty, set this attribute.
position string Sets the position of the DatePicker Lightning Web
Component. Applies only when type is set to 'date'.
posttext string Specifies the text after the input textbox.
pretext string Specifies the text in front of the input text box.
prev-month- string Specifies a title for the prev month icon.
label
range string Adds a range to the DatePicker Lightning Web
Component. Applies only for type is set to 'date'.
read-only boolean If set, the textarea field is read-only and cannot be edited.
required boolean If set, the textarea field must be filled out before the form
can be submitted.
required-label string Specifies a title for the asterisk when required is true.
select-date- string Specifies a title describing the instructions for the date
label picker.
Component input field. Applies only when type is set to
'date'.
static boolean Makes the input element static.
(Default:
false)
step any, positive string, Sets the granularity of the value. Use 'any' when
floating number number granularity is not important.
(Default: 1)
tab-index number For internal use only, indicates if an element is focusable.
A value of 0 means element is focusable and participates
in sequential keyboard navigation. A value of -1 means
element is focusable but does not participate in keyboard
navigation.
theme slds, nds Specifies the theme to use.
(Default:
slds)
time-format (Default: string Specifies the format of a time input element. Applies only
HH:mm) when type is set to 'datetime'.
time-label ( Default: Time) string Specifies the label of a time input element. Applies only
time-name string Specifies the name of a time input element. Applies only
time- (Default: Select string Specifies the placeholder of a time input element. Applies
placeholder Time) only when type is set to 'datetime'.
today-label string Specifies a visible name for today.
toggle-off-label string When type is set to 'toggle', sets the label in the off state.
toggle-on-label string When type is set to 'toggle', sets the label in the on state.
type (Default: text) string Sets the input type. For a date input, seeDatePicker
Lightning Web Component. For a list of input types, see
https://developer.mozilla.org/en-US/docs/Web/HTML/
Element/input#Form_%3Cinput%3E_types.

company 175
OmniStudio

validity object Represents the validity states of the textarea input, with
respect to constraint validation. For example:
{ badInput: false, customError: false,
patternMismatch: false, rangeOverflow:
false, rangeUnderflow: false, stepMismatch:
false, tooLong: false, tooShort: false,
typeMismatch: false, valid: true,
valueMissing: false }
value string Sets the value of the textarea input. Used as the default
value during init.
variant standard, label- string Changes the appearance of an input field.
hidden (Default:
standard)
<c-input
theme="slds"
inline-help="ex: (415)111-2222"
label="Input"
></c-input>
<c-input
theme="slds"
multiple
type="file"
accept="image/*"
></c-input>
<c-input
theme="slds"
required
></c-input>
<c-input
theme="slds"
min-length="10"
required
></c-input>

company 176
OmniStudio
mask Use Cases
See NumberFormat.
• Javascript number formatter is used when type is set to 'number',formatter is set to 'currency', and mask
Label Slot Usage

the input's label. This feature is not available for inputs that are formula, checkbox, file, or has isToggle =
true.
Example Slot Usage
<c-input
theme="slds"
inline-help="ex: (415)111-2222"
label="Input"
>
</c-input>
Available Methods
checkValidity()
reportValidity()
focus()

company 177
OmniStudio
blur()

accept Specifies the types of files that the server accepts. Applies
only when type is set to 'file'.
access-key Sets the keyboard shortcut for input field.
aria-controls Specifies a space-separated list of element IDs whose
presence or content is controlled by the input.
aria-described- Specifies a space-separated list of element IDs that
by provide descriptive labels for the input.
aria-label Adds a label describing the input to assistive technologies.
aria-labelled-by Specifies a space-separated list of element IDs that
provide labels for the input.
date-format (Default: YYYY- string Specifies the format of a date input element. Applies only
MM-DD) when type is set to 'datetime'. s
date-label (Default: Date ) string Specifies the label of a date input element. Applies only
date-name string Specifies the name of a date input element. Applies only
date-placeholder (Default: Select string Specifies the placeholder of a date input element. Applies
Date) only when type is set to 'datetime'.
disabled If set, the textarea field is disabled and users cannot
interact with it.
displayValue string Getter only property which collects the child's
end-date string Adds a value for the endDate input of range date picker
component. Applies only when type is set to 'date'.
end-date-picker- string Adds a visible label for the endDate input when range date
label picker component. Applies only when type is set to 'date'.
extraclass Adds a class to the parent of the input element. To add
files A FileList that contains selected files. Applies only when
type is set to 'file'.
formatter percent, currency string Sets how to format the input value when value is a
number.
icon-color Sets the color of the icon in the input element.
utility:info)
utility:info)

company 178
OmniStudio

icon-url Sets the icon base url. Applies only when type is set to
'file'.
inlinehelp Adds help text after the input element.
interval number Sets the interval between the options of the time
dropdown. Applies only when type is set to 'time/datetime'
label yes Sets a title for the textarea input field. Applies only when
type is set to 'textarea'.
mask Adds a mask for the input value. See mask Use Cases for
this component.
mask-range Sets a limit for the input value.
max Sets the maximum acceptable value for the input. Applies
only when type is number, range, date, time, or datetime.
For number and range type, the max value is a decimal
number. For the date, time, and datetime types, the max
max-length Sets the maximum number of characters allowed in the
textarea.
message-when- Displays an error message when a bad input is detected.
bad-input
message-when- Displays an error message when a pattern mismatch is
pattern- detected.
mismatch
message-when- Displays an error message when a range overfolow is
range-overflow detected.
message-when- Displays an error message when a range underflow is
range-underflow detected.
message-when- Displays an error message when a step mismatch is
step-mismatch detected.
message-when- Displays an error message when the value is too long.
too-long
message-when- Displays an error message when the value is too short.
too-short
message-when- Displays an error message when a type mismatch is
type-mismatch detected.
message-when- Displays an error message when the value is missing.
value-missing
min Sets the minimum acceptable value for the input. Applies
only when type is number, range, date, time, or datetime.
For number and range types, the min value is a decimal
number. For the date, time, and datetime types, the min
min-length Sets the minimum number of characters allowed in the
textarea.
multiple Enables user to enter more than one value. Applies only
when type is set to 'file' or 'email'.
name Specifies the name of the input element.
novalidate true, To prevent default validation, set to true. Use the
false setCustomValidity to set the custom validation
(Default: method. See Available Methods for this component.
false)

company 179
OmniStudio

output-format (Default for date: string Sets the format of the output, when output-type is string
HH:mm:ss.SSS and type is set to 'time' or 'datetime'. For format options,
ZZ) (Default for see date-fns.
datetime:
DD/MM/YYYY
hh:mm a)
output-type string, date string Sets the output type. Applies only when type is set to 'time'
(Default: string) or 'datetime'.
pattern Specifies the regular expression that the input value is
checked against. Applies only when type is text, search,
url, tel, email, or password.
placeholder To display text when field is empty, set this attribute.
position string Sets the position of the DatePicker Lightning Web
Component. Applies only when type is set to 'date'.
posttext Adds text after the input textbox.
pretext Adds text in front of the input text box.
range string Adds a range to the DatePicker Lightning Web
Component. Applies only for type is set to 'date'.
read-only If set, the textarea field is read-only and cannot be edited.
required If set, the textarea field must be filled out before the form
can be submitted.
Component input field. Applies only when type is set to
'date'.
static Makes the input element static.
step any, positive string Sets the granularity of the value, specified as a positive
floating number floating point number. Use 'any' when granularity is not
(Default: 1) important.
tab-index For internal use only, indicates if an element is focusable.
A value of 0 means element is focusable and participates
in sequential keyboard navigation. A value of -1 means
element is focusable but does not participate in keyboard
navigation.
theme The theme defines if the element has to use slds or nds
theme.
time-format (Default: string Specifies the format of a time input element. Applies only
HH:mm) when type is set to 'datetime'.
time-label ( Default: Time) string Specifies the label of a time input element. Applies only
time-name string Specifies the name of a time input element. Applies only
time-placeholder (Default: Select string Specifies the placeholder of a time input element. Applies
Time) only when type is set to 'datetime'.
toggle-off-label When type is set to 'toggle', sets the label in off state.
toggle-on-label When type is set to 'toggle', sets the label in on state.
type (Default: text) Sets the input type. For a date input, see DatePicker
Lightning Web Component. For a list of input types, see
Form Input Types.
validity Represents the validity states of the textarea input, with
respect to constraint validation.

company 180
OmniStudio

value Sets the value of the textarea input. Used as the default
value during init.
variant standard, label- Changes the appearance of an input field.
hidden (Default:
standard)
mask Use Cases:
See NumberFormat.
• Javascript number formatter is used when type is set to 'number', formatter is set to 'currency', and mask

<c-input
theme="slds"
inline-help="ex: (415)111-2222"
label="Input"
></c-input>
<c-input
theme="slds"
multiple
type="file"
accept="image/*"
></c-input>
<c-input
theme="slds"
required
></c-input>
<c-input
theme="slds"
min-length="10"
required
></c-input>

company 181
OmniStudio
Available Methods
checkValidity()
reportValidity()
focus()
blur()

accept Specifies the types of
files that the server
accepts. Applies only
when type is set to
`file'.
access-key Sets the keyboard
shortcut for input field.
aria-controls Specifies a space-
separated list of
element IDs whose
presence or content is
controlled by the
input.

company 182
OmniStudio

aria-described-by Specifies a space-
separated list of
element IDs that
provide descriptive
labels for the input.
aria-label Adds a label
describing the input to
assistive technologies.
aria-labelled-by Specifies a space-
separated list of
element IDs that
provide labels for the
input.
date-format (Default: YYYY-MM- string Specifies the format of
DD) a date input element.
Applies only when
type is set to
`datetime'.
date-label (Default: Date ) string Specifies the label of
a date input element.
Applies only when
type is set to
`datetime'.
date-name string Specifies the name of
a date input element.
Applies only when
type is set to
`datetime'.
date-placeholder (Default: Select Date) string Specifies the
placeholder of a date
input element. Applies
only when type is set
to `datetime'.
disabled If set, the textarea
field is disabled and
with it.
end-date string Adds a value for the
endDate input of
range date picker
component. Applies
to `date'.
end-date-picker-label string Adds a visible label for
the endDate input
when range date
picker component.
Applies only when
type is set to `date'.

company 183
OmniStudio

extraclass Adds a class to the
parent of the input
element. To add
a space to separate
each class, such as
files A FileList that
contains selected
files. Applies only
whentype is set to
`file'.
formatter percent, currency string Sets how to format the
input value when
value is a number.
icon-color Sets the color of the
icon in the input
element.
icon-name-left (Format: utility:info) string Sets an icon.
icon-name-right (Format: utility:info) string Sets an icon.
icon-url Sets the icon base url.
Applies only when
type is set to `file'.
inlinehelp Adds help text after
the input element.
interval number Sets the interval
between the options
of the time dropdown.
Applies only when
type is set to `time/
datetime'
label yes Sets a title for the
textarea input field.
Applies only when
type is set to
`textarea'.
mask Adds a mask for the
input value. See mask
Use Cases for this
component.
mask-range Sets a limit for the
input value.

company 184
OmniStudio

max Sets the maximum
the input. Applies only
when type is number,
range, date, time, or
datetime. For number
and range type, the
max value is a
decimal number. For
the date, time, and
datetime types, the
max value must use a
valid string for the
type.
max-length Sets the maximum
number of characters
allowed in the
textarea.
message-when-bad- Displays an error
input message when a bad
input is detected.
message-when- Displays an error
pattern-mismatch message when a
pattern mismatch is
detected.
message-when-range- Displays an error
overflow message when a
range overfolow is
detected.
message-when-range- Displays an error
underflow message when a
range underflow is
detected.
message-when-step- Displays an error
mismatch message when a step
mismatch is detected.
message-when-too- Displays an error
long message when the
value is too long.
message-when-too- Displays an error
short message when the
value is too short.
message-when-type- Displays an error
mismatch message when a type
mismatch is detected.
message-when-value- Displays an error
missing message when the
value is missing.

company 185
OmniStudio

min Sets the minimum
the input. Applies only
when type is number,
range, date, time, or
datetime. For number
and range types, the
min value is a decimal
number. For the date,
time, and datetime
types, the min value
must use a valid string
for the type.
min-length Sets the minimum
allowed in the
textarea.
multiple Enables user to enter
more than one value.
Applies only when
type is set to `file' or
èmail'.
name Specifies the name of
the input element.
novalidate true, false (Default: To prevent default
false) validation, set to true.
Use the
setCustomValidit
y to set the custom
validation method.
See Available
Methods for this
component.
output-format (Default for date: string Sets the format of the
HH:mm:ss.SSS ZZ) output, when output-
(Default for datetime: type is string and type
DD/MM/YYYY hh:mm is set to `time' or
a) `datetime'. For format
options, see date-fns.
output-type string, date (Default: string Sets the output type.
string) Applies only when
type is set to `time' or
`datetime'.
pattern Specifies the regular
expression that the
input value is checked
against. Applies only
when type is text,
search, url, tel, email,
or password.
placeholder To display text when
field is empty, set this
attribute.

company 186
OmniStudio

position string Sets the position of
the DatePicker
Lightning Web
Component. Applies
to `date'.
posttext Adds text after the
input textbox.
pretext Adds text in front of
the input text box.
range string Adds a range to the
DatePicker Lightning
Web Component.
Applies only for type is
set to `date'.
read-only If set, the textarea
field is read-only and
cannot be edited.
required If set, the textarea
field must be filled out
before the form can
be submitted.
size string Set the size of the
DatePicker Lightning
Web Component
input field. Applies
to `date'.
static Makes the input
element static.
step any, positive floating string Sets the granularity of
number (Default: 1) the value, specified as
a positive floating
point number. Use
àny' when granularity
is not important.
tab-index For internal use only,
indicates if an element
is focusable. A value
of 0 means element is
focusable and
participates in
sequential keyboard
navigation. A value of
-1 means element is
focusable but does
not participate in
keyboard navigation.
theme The theme defines if
the element has to
use slds or nds
theme.

company 187
OmniStudio

time-format (Default: HH:mm) string Specifies the format of
a time input element.
Applies only when
type is set to
`datetime'.
time-label ( Default: Time) string Specifies the label of
Applies only when
type is set to
`datetime'.
time-name string Specifies the name of
Applies only when
type is set to
`datetime'.
time-placeholder (Default: Select Time) string Specifies the
placeholder of a time
input element. Applies
to `datetime'.
toggle-off-label When type is set to
`toggle', sets the label
in off state.
toggle-on-label When type is set to
`toggle', sets the label
in on state.
type (Default: text) Sets the input type.
For a date input,
seeDatePicker
Lightning Web
Component. For a list
of input types, see
Form Input Types.
validity Represents the
validity states of the
textarea input, with
respect to constraint
validation.
value Sets the value of the
textarea input. Used
as the default value
during init.
variant standard, label-hidden Changes the
(Default: standard) appearance of an
input field.
mask Use Cases:

• Format is international when type is set to `number', formatter is set to `currency', and mask is not set.
See NumberFormat.
• Javascript number formatter is used when type is set to `number',formatter is set to `currency', and mask

company 188
OmniStudio
<c-input
theme="slds"
inline-help="ex: (415)111-2222"
label="Input"
></c-input>
<c-input
theme="slds"
multiple
type="file"
accept="image/*"
></c-input>
<c-input
theme="slds"
required
></c-input>
<c-input
theme="slds"
min-length="10"
required
></c-input>
Available Methods
checkValidity()
reportValidity()

company 189
OmniStudio
focus()
blur()
InteractionWrapper Lightning Web Component ReadMe

This page contains the Power Launcher LWC ReadMe for each Vlocity release.

The InteractionWrapper Lightning Web Component is a wrapper component for the customer interaction
and power launcher. Use inside a record page to see all the interactions for that customer and trigger any
related actions. The InteractionWrapper LWC supports custom labels.
Available c-interaction-wrapper Attributes

recordId string Automatically fetches from record page
theme slds, nds (Default: slds) string Sets the theme to use. NDS theme not implemented yet
Available c-interaction-wrapper Design Time Attributes

Create Interaction true, false Boolean When set to true uses the configured Create Interaction
(Default:false) Integration Procedure and create interaction object
Create Interaction string yes If Create Interaction is set to true, this field if required to
IP configure the Integration Procedure to create the
interaction
Create Topic IP string Cretaes interaction topic when triggerd. Triggering
mechanism explained below.
Create Interaction IP
When Create Interaction flag is set to true, on page load, the wrapper automatically calls the IP configured
on the Create Interaction IP with the input data below.
{
recordId: this.recordId, //recordId of the sObject
verificationdate: Date.now(),
verifiedby: username //logged in username
}

company 190
OmniStudio
Pubsub Listener
When the Create Interaction flag is set to true, on page load, the wrapper automatically creates a
unique channel addInteractionTopic:<recordId> with eventName trackInteraction which
other components on the page can trigger this event to track the interaction and create interaction topic.
Example on How to Trigger trackInteraction
pubsub.fire('addInteractionTopic:<recordId>', 'trackInteraction', {
name : "", // Name of the sObject
label: "", //label of the field
value: "", //value of the field
contextId : "" //Id of the sObject
});
This can be configured using the Action Component on Flex Card Designer
Create Topic IP
When Create Interaction flag is set to true, on page load the wrapper automatically adds a pubsub listener
and when we trigger if Create Topic IP is pointer to an Integration Procedure. It gets called with input
data below.
OOTB Integration Procedure: Interaction_handleInteractionFieldClick
Default required fields. All the fields sent through the Pubsub Event are passed to the Create Topic IP.
Create Interaction IP depends on the Create Interaction Flag and also Create Topic IP
depends on both Create Interaction Flag and the pubsub listener.
{
accountId: this.recordId, //recordId of the page, mostly account
name: data.name, //Name that was send through the pubsub event
contextId: data.contextId, //Id that was send through the pubsub event
interactionId: this.interactionId // The created interaction Id
}

Call cmpCall Assistive text for the call icon.
Refresh cmpRefresh Assistive text for the refresh icon visible after clicking the call icon.
Viewed cmpViewed Assistive text for icons in the Tasks Performed list.
Viewed as cmpViewedAs Label for tasks viewed in the Tasks Performed list.
Tasks Performed cmpTasksPerf Label for the lists of tasks performed.
Action cmpAction Label for action type tasks in the Tasks Performed list.
Cancel Cancel Label for button to cancel interaction.
Summary (Optional) cmpSummary Label for the interaction summary textarea field.

company 191
OmniStudio

Submit & End Call SubmitAndEndCall Label for the interaction submit button.
Resume Interaction ResumeInteraction Label for the interaction resume button.

The InteractionWrapper Lightning Web Component is a wrapper component for the customer interaction
and power launcher. Use inside a customer interaction record page to see all the interactions for that
customer and trigger any related actions. The InteractionWrapper LWC supports custom labels.

recordId string yes Specifes the Id of the record.
theme slds, nds (Default: slds) string Sets the theme to use.
Example c-interaction-wrapper Component
<c-interaction-wrapper
record-id="001f400000Odl3cAAB"
theme="slds"
>
</c-interaction-wrapper>

Call cmpCall Assistive text for the call icon.
Refresh cmpRefresh Assistive text for the refresh icon visible after clicking the call icon.
Viewed cmpViewed Assistive text for icons in the Tasks Performed list.
Viewed as cmpViewedAs Label for tasks viewed in the Tasks Performed list.
Tasks Performed cmpTasksPerf Label for the lists of tasks performed.
Action cmpAction Label for action type tasks in the Tasks Performed list.
Cancel Cancel Label for button to cancel interaction.
Summary (Optional) cmpSummary Label for the interaction summary textarea field.
The InteractionWrapper Lightning Web Component is a wrapper component for a customer interaction and
the Power Launcher. The component is used inside a customer interaction records page to see all
interactions with a customer and perform any actions related to the interaction.

recordId number yes Sets the ID of the record.

company 192
OmniStudio

theme slds, nds (Default: slds) string Sets the theme for the layout of the component.
Example c-interaction-wrapper Component
<c-interaction-wrapper
recordId=1
theme="slds"
>
</c-interaction-wrapper>
Layout Lightning Web Component ReadMe

This page contains a Layout LWC ReadMe for each Vlocity release.
The Layout Lightning Web Component is a flexible grid system arranging containers on a page or inside
other containers.
Available c-layout Attributes

theme slds, nds string Sets the theme to use for the layout.
(Default: slds)
extraclass string Adds an additional class. To add multiple classes, use a space
to separate each class, such as 'classone classtwo'.
horizontal-align center, space, string Determines how to spread the layout items horizontally in the
spread, end container.
vertical-align start, center, string Determines how to align the layout items vertically in the
end, stretch container.
pull-to- small, medium, string Pulls layout items to the layout boundaries and corresponds to
boundary large the padding size on the layout item component. See
LayoutItem Lightning Web Componentpadding attribute.
multiple-rows boolean If set, layout items wrap to the following line when they exceed
the layout width.
Example c-layout Component
<c-layout
class="custom-slds-grid"
theme="nds"
horizontal-align="center"
vertical-align="stretch"
pull-to-boundary="medium"
>
<c-layout-item size="3">
{item.name}
</c-layout-item>

company 193
OmniStudio
{item.name}
</c-layout-item>
<c-layout-item
size="1"
alignment-bump="left"
padding="around-medium"
flexibility="auto,no-grow,no-shrink"
>
{item.name}
</c-layout-item>
{item.name}
</c-layout-item>
</c-layout>
The Layout Lightning Web Component is a flexible grid system arranging containers on a page or inside
other containers.
Available c-layout Attributes

theme slds, nds (Default: string Sets the theme to use
slds) for the layout.
extraclass string Adds an additional
class. To add multiple
classes, use a space
to separate each
class, such as
horizontal-align center, space, spread, string Determines how to
end spread the layout
items horizontally in
the container.
vertical-align start, center, end, string Determines how to
stretch align the layout items
vertically in the
container.
pull-to-boundary small, medium, large string Pulls layout items to
the layout boundaries
and corresponds to
the padding size on
the layout item
component. See
LayoutItem
Lightning Web
Component
paddingattribute.

company 194
OmniStudio

multiple-rows boolean If set, layout items
wrap to the following
line when they exceed
the layout width.
Example c-layout Component
<c-layout
class="custom-slds-grid"
theme="nds"
horizontal-align="center"
vertical-align="stretch"
pull-to-boundary="medium"
>
{item.name}
</c-layout-item>
{item.name}
</c-layout-item>
<c-layout-item
size="1"
>
{item.name}
</c-layout-item>
{item.name}
</c-layout-item>
</c-layout>
LayoutItem Lightning Web Component ReadMe

This page contains a LayoutItem LWC ReadMe for each Vlocity release.
The LayoutItem Lightning Web Component is the basic element inside the parent Layout Lightning Web
Component container, grouping content together to create sections inside the parent container. You can
add one or more c-layout-item components inside the c-layout component.

company 195
OmniStudio
Available c-layout-item Attributes

size 1 through 12 number Sets the relative space the layout item
occupies. Applies to all device-types.
smallDeviceSize 1 through 12 number Sets the relative space the layout item
occupies on device-types larger than mobile.
Defaults to same as size attribute if no value
provided.
mediumDeviceSize 1 through 12 number Sets the relative space the layout item
occupies on device-types larger than tablet.
provided.
largeDeviceSize 1 through 12 number Sets the relative space the layout item
occupies on device-types larger than desktop.
provided.
flexibility auto (columns grow or string Determines if the grid item is fluid so that it
shrink equally as space absorbs any extra space in its container or if it
allows), shrink (columns shrinks when there is less space. For multiple
shrink equally as space options, use a comma to separate each option,
decreases), no-shrink such as 'auto, no-shrink'.
(columns don't shrink as
space reduces), grow
(columns grow equally as
space increases), no-grow
(columns don't grow as
space increases), no-flex
(columns don't grow or
shrink as space changes)
alignment-bump left, top, right, bottom string Specifies a direction to bump the alignment of
adjacent layout items.
padding horizontal-small, horizontal- string Adds padding to either the right or left side of
medium, horizontal-large, the layout item, or to all sides of the layout
around-small, around- item.
medium, around-large
Example c-layout-item Component
<c-layout class="custom-slds-grid">
{item.name}
</c-layout-item>
{item.name}
</c-layout-item>
<c-layout-item
size="1"
>

company 196
OmniStudio
{item.name}
</c-layout-item>
{item.name}
</c-layout-item>
</c-layout>
The LayoutItem Lightning Web Component is the basic element inside the parent Layout Lightning Web
Component container, grouping content together to create sections inside the parent container. You can
add one or more c-layout-item components inside the c-layout component.
Available c-layout-item Attributes

size 1 through 12 number Sets the relative
space the layout item
occupies. Applies to
all device-types.
smallDeviceSize 1 through 12 number Sets the relative
occupies on device-
types larger than
mobile. Defaults to
same as size attribute
if no value provided.
mediumDeviceSize 1 through 12 number Sets the relative
occupies on device-
types larger than
tablet. Defaults to
largeDeviceSize 1 through 12 number Sets the relative
occupies on device-
types larger than
desktop. Defaults to

company 197
OmniStudio

flexibility auto (columns grow or string Determines if the grid
shrink equally as item is fluid so that it
space allows), shrink absorbs any extra
(columns shrink space in its container
equally as space or if it shrinks when
decreases), no-shrink there is less space.
(columns don’t shrink For multiple options,
as space reduces), use a comma to
grow (columns grow separate each option,
equally as space such as àuto, no-
increases), no-grow shrink'.
(columns don’t grow
as space increases),
no-flex (columns don’t
grow or shrink as
space changes)
alignment-bump left, top, right, bottom string Specifies a direction
to bump the alignment
of adjacent layout
items.
padding horizontal-small, string Adds padding to either
horizontal-medium, the right or left side of
horizontal-large, the layout item, or to
around-small, around- all sides of the layout
medium, around-large item.
Example c-layout-item Component
<c-layout class="custom-slds-grid">
{item.name}
</c-layout-item>
{item.name}
</c-layout-item>
<c-layout-item
size="1"
>
{item.name}
</c-layout-item>
{item.name}
</c-layout-item>
</c-layout>
List Lightning Web Component ReadMe

This page contains a List LWC ReadMe for each Vlocity release.

company 198
OmniStudio

The List Lightning Web Component creates a searchable and sortable list from the provided data.
Available c-list Attributes

channel string If set, the list component acts as observer
and listens to the channel for data from the
Datasource LWC.
enable-load-more true, false (Default: false) boolean To enable a button to load more list items.
field-name (Default: Name) string Specifies which key from the records to
display.
issearchavailable true, false (Default: false) boolean To display the search input field and filter
dropdown list, set to true.
issortavailable true, false (Default: false) boolean To enable sorting by ascending and
descending order, set to true.
load-more-btn-label (Default: "Load More string Specifies the label of the load more button.
Items")
load-more-number-of- (Default: Default value string Limits the content to load when load more
items depends upon the parent button is clicked.
container height)
max-height CSS (if set, the string Specifies maximum height for the
heightproperty takes component.
priority)
name string Specifies the name of the element. Used by
the Form Lightning Web Component.
records array yes Contains the data for the list.
searchattribute (Default: name) string Specifies comma separated field names
used to search.
sortattribute (Default: name) string Specifies which field to sort.
theme slds, nds (Default: slds) string Specfies which theme to use.
Example c-list Component with Defined c-list-item

To create your own template for the list items, add a c-list-items component inside the c-
listcomponent and write an iteration template.
<c-list records={data} issearchavailable="true" issortavilable="true">

<c-list-items>
</c-list-items>
</c-list>


<template>
<ul class="slds-has-dividers_around slds-has-block-links_space">
<template for:each={data} for:item="item" for:index="index">
<li key={item.id} class="slds-item">
<a href="javascript:void(0);">{item.name}</a>
</li>

company 199
OmniStudio
</template>
</ul>
</template>
Example c-list Component

If a c-list-items component is not specified, the default layout for the list items is used. Only the
item.name is visible as the label for each list item. However, the user can still change the sort field and
search field.
<c-list records={data}>
</c-list>
Available Methods
sortListBy(reverse, field)
Sorts the list by field. The second parameter is optional. If no field is provided then it takes name.
searchListBy(searchKey, fields)
Filters the list. The second parameter is optional. If no fields are provided, then it takes only name. Fields
can also be a comma separated attribute string.
The List Lightning Web Component creates a searchable and sortable list from provided data.

channel string If set, the list component acts as observer and
listens to the channel for data from the
Datasource LWC.
enable-load-more true, false (Default: boolean To enable a button to load more list items.
false)
issearchavailable true, false (Default: boolean To display the search input field and filter
false) dropdown list, set to true.
issortavailable true, false (Default: boolean To enable sorting by ascending and descending
false) order, set to true.
load-more-btn-label (Default: "Load More string Specifies the label of the load more button.
Items")
load-more-number-of- (Default: Default string Limits the content to load when load more button
items value depends upon is clicked.
the parent container
height)
name string Specifies the name of the element. Used by the
Form Lightning Web Component.
records array yes Contains the data for the list.
searchattribute (Default: name) string Specifies comma separated field names used to
search.
sortattribute (Default: name) string Specifies which field to sort.

company 200
OmniStudio

theme slds, nds (Default: string Specfies which theme to use.
slds)
| field-name | (Default: Name) | string | | Specifies which key from the records to display.|

To create your own template for the list items, add a c-list-items component inside the c-list
component and write an iteration template.

<c-list-items>
</c-list-items>
</c-list>

<template>
</li>
</template>
</ul>
</template>

search field.
</c-list>
Available Methods
can also be a comma separated attribute string.
The List Lightning Web Component creates a searchable and sortable list from data provided.

company 201
OmniStudio

channel string If set, the list
component acts as
observer and listens
to the channel for data
from the Datasource
LWC.
issearchavailable true, false (Default: boolean To display the search
false) input field and filter
dropdown list, set to
true.
issortavailable true, false (Default: boolean To enable sorting by
false) ascending and
descending order, set
to true.
the element. Used by
the Form Lightning
Web Component.
records array yes Contains the data for
the list.
searchattribute (Default: name) string Specifies comma
separated field names
used to search.
sortattribute (Default: name) string Specifies which field
to sort.
theme slds, nds (Default: string Specfies which theme
slds) to use.

To create your own template for the list items, add a c-list-items`component inside the `c-
list component and write an iteration template.

<c-list-items>
</c-list-items>
</c-list>

<template>
</li>
</template>
</ul>
</template>

company 202
OmniStudio

search field.
</c-list>
Available Methods
can also be a comma separated attribute string. === Preview Lightning Web Component
The Preview Lightning Web Component enables previewing Lightning web components. User can set
values to public attributes from user interface and dynamically check the output.
ListItems Lightning Web Component ReadMe

This page contains a ListItems LWC ReadMe for each Vlocity release.
The ListItems Lightning Web Component creates the template for each list item inside the List Lightning
Web Component.
Available c-list-items Attributes

theme slds, nds (Default: slds) string Specfies which theme to use.
records array Contains the data for the list.
Example c-list-items Component

<c-list-items>
</c-list-items>
</c-list>


<template>

company 203
OmniStudio
</li>
</template>
</ul>
</template>
The ListItems Lightning Web Component creates the the template for each list item inside the List Lightning
Web Component.
Available c-list-items Attributes

theme slds, nds (Default: string Specfies which theme
slds) to use.
records array Contains the data for
the list.
Example c-list-items Component

<c-list-items>
</c-list-items>
</c-list>


<template>
</li>
</template>
</ul>
</template>
MaskedInput Lightning Web Component ReadMe

This page contains a MaskedInput LWC ReadMe for each Vlocity release.

The MaskedInput Lightning Web Component controls what and how a user can enter data in form input
fields. The MaskedInput Lightning Web Componentextends the Input Lightning Web Component.
For possible use cases for the masked-input component, see imask documentation.

company 204
OmniStudio
Available c-masked-input Attributes

currency string Enables user to set currency code.
imask JSON object yes Contains the valid imask attribute JSON.
inputmode string Enables user to set inputmode which corresponds to different keypads on
mobile.
locale string Enables user to set locale for the currency type.
Public Variables to Access Value
Name Description
maskedValue Returns value with masking.
typedValue Returns the valid value based on type.
unmaskedValue Returns value without masking.
To Note
• For the 'currency' and 'number' masks, the value of the mask parameter must be new Number(), not
Number. See Example masked-inputComponent on this page.
• For date, use c-input element where type is set to 'date'.
Example c-masked-input Component
<c-masked-input
imask={maskAttrib}
theme={theme}
label="InputMask"
value="123456"
type="text"
>
</c-masked-input>
maskAttrib ={
mask: new Number(),
thousandsSeparator: ',',
radix: '.'
}
Label Slot Usage

the input's label. This feature is not available for formula input.
<c-masked-input
imask={maskAttrib}

company 205
OmniStudio
theme={theme}
label="InputMask"
value="123456"
type="text"
>
</c-masked-input>
The MaskedInput Lightning Web Component controls what you can enter in form input fields. The
MaskedInput Lightning Web Component extends the Input Lightning Web Component.

imask JSON object yes Contains the valid imask attribute JSON.

Name Description
To Note
• For the 'currency' and 'number' masks, the value of the mask parameter must be new Number(), not
Number. See Example masked-input Component on this page.
• For date, use c-input element where type is set to 'date'.

<c-masked-input
imask="{maskAttrib}"
theme="{theme}"
label="InputMask"
value="123456"
type="text"
>
</c-masked-input>
maskAttrib ={
mask: new Number(),

company 206
OmniStudio
radix: '.'
}
The MaskedInput Lightning Web Component controls what you can enter in form input fields. The
MaskedInput Lightning Web Component extends theInput Lightning Web Component.

imask JSON object yes Contains the valid
imask attribute JSON.
Name Description
To Note
• For the currency' and `number' masks, the value of the mask parameter must be
`new Number(), not Number. See Example masked-input Component on this page.
• For date, use c-input element where type is set to `date'.
<c-masked-input
imask="{maskAttrib}"
theme="{theme}"
label="InputMask"
value="123456"
type="text"
>
</c-masked-input>
maskAttrib ={
mask: new Number(),
radix: '.'
}

company 207
OmniStudio
Menu Lightning Web Component ReadMe

This page contains a Menu LWC ReadMe for each Vlocity release.

The Menu Lightning Web Component creates a menu from the list of menu items provided.
Available c-menu Attributes

checked single, multiple, true, false string To create a menu with multi selectable or single
(Default: false) selectable items, set this value.
disabled true, false (Default: false) boolean To disable menu, set to false.
extra-class value:string sets the class for menu
icon-name (Format: standard:arrow) string Sets the icon for the menu. See SLDS icons.
(Default: utility:down)
icon-position right, left (Default: left) string Sets icon position for the menu.
icon-size xx-small, x-small, small, string Sets the icon size for the button element inside
large (Default: xx-small) menu.
menuItems Array Adds the MenuItem LWC inside the Menu LWC.
overflow true, false (Default: false) boolean
position left, right, bottom (Default: string Sets the position of the dropdown menu.
left)
record Object Provides the record from which to interpolate the
field values.
size xx-small, x-small, small, string Sets the size of dropdown menu.
medium, large
theme slds, nds (Default: slds) Sets the theme for the menu.
type action string To create a menu where each item is a link that
performs an action, set attribute to action.
variant string Sets the style of the menu button based on the
typesupported by the chosen theme. For
example, success, brand, and so on.
Example menuItems Array

[{ name: name,
label: "Action",
iconName: "standard-default",
actionData: {} }]
Example c-menu Component

<c-menu theme="slds" scroll="5" checked="multiple" type="action" size="large"
position="right" icon-name="utility:down">
</c-menu>
<c-menu theme="slds" icon-name="utility:down">

<c-menu-item record={data1} icon-name="action:info"></c-menu-item>

company 208
OmniStudio
<c-menu-item record={data2} icon-position="Right" icon-

name="action:info"></c-menu-item>
</c-menu>

checked single, multiple, true, false (Default: string To create a menu with multi selectable or
false) single selectable items, set this value.
icon-name (Format: standard:arrow) (Default: string Sets the icon for the menu. See SLDS icons.
utility:down)
icon-position right, left (Default: left) string Sets icon position for the menu.
icon-size xx-small, x-small, small, large string Sets the icon size for the button element
(Default: xx-small) inside menu.
overflow true, false (Default: false) boolean
position left, right, bottom (Default: left) string Sets the position of the dropdown menu.
size xx-small, x-small, small, medium, string Sets the size of dropdown menu.
large
theme slds, nds (Default: slds) Sets the theme for the menu.
type action string To create a menu where each item is a link
that performs an action, set attribute to action.
<c-menu theme="slds" scroll="5" checked="multiple" type="action"

size="large" position="right" icon-name="utility:down">
</c-menu>

</c-menu>

checked single, multiple, true, string To create a menu with
false (Default: false) multi selectable or
single selectable
items, set this value.

company 209
OmniStudio

icon-name (Format: string Sets the icon for the
standard:arrow) menu. See SLDS
(Default: utility:down) icons.
icon-position right, left (Default: left) string Sets icon position for
the menu.
overflow true, false (Default: boolean
false)
position left, right, bottom string Sets the position of
(Default: left) the dropdown menu.
size xx-small, x-small, string Sets the size of
small, medium, large dropdown menu.
slds) menu.
type action string To create a menu
where each item is a
link that performs an
action, set attribute to
action.
<c-menu theme="slds" scroll="5" checked="multiple" type="action"

size="large" position="right" icon-name="utility:down">
</c-menu>

</c-menu>
MenuItem Lightning Web Component ReadMe

This page contains a MenuItem LWC ReadMe for each Vlocity release.

The MenuItem Lightning Web Component is the basic element inside the Menu Lightning Web Component.
Each c-menu-item component adds an item to the menu.
Available c-menu-item Attributes

name unique string Sets the visible menu item name.
record string Contains the menu item data.
theme slds, nds (Default: slds) string Sets which theme menu uses.
icon-name (Format: string Sets the icon for the menu item. See SLDS icons.
standard:arrow)
icon-position right, left (Default: left) string Sets icon position for the menu item data.

company 210
OmniStudio

type header, action string To the make menu item a sub-header of the menu, set to
header. To create a menu where each item is a link that
performs an action, set to action.
action-url string Sets the action URL for the menu item. Must set type to
action.
open-url-in newTab, currentTab string Sets the mode in which the action URL should be opened.
(Default: newTab)
status error, warning, success string Sets the status for the menu item and updates the menu
item style.
checked true, false (Default: boolean To set a default selected menu item, set to true.
false)
label string Contains the menu item label.
obj Object Provides the record to set the stateObject property of an
action LWC.
actionData Object Adds the details of an action menu item LWC.
Example c-menu-item Component

<c-menu-item
name="home"
record={menuItem1}
icon-name="action:info"
status="error"
checked
>

<c-menu-item
record={data1}
></c-menu-item>
<c-menu-item
record={data2}
></c-menu-item>
</c-menu>
Example actionData Object

actionData: {
stateObj: "{record}",
card: "{card}",
stateAction: {
id: "test-action",
type: "Custom",

company 211
OmniStudio
displayName: "Action",
vlocityIcon: "standard-default",
targetType: "Web Page",
openUrlIn: "Current Window",
"Web Page": { targetName: "/apex" }
}
}


name unique string yes Sets the visible menu item name.
record string Contains the menu item data.
icon-name (Format: standard:arrow) string Sets the icon for the menu item. See SLDS icons.
type header, action string To make the menu item a sub-header of the menu, set to
header. To create a menu where each item is a link that
performs an action, set to action.
"action".
open-url-in newTab, currentTab string Sets the mode in which the action URL should be
(Default: newTab) opened.
status error, warning, success string Sets the status for the menu item.
checked true, false (Default: false) boolean To set a default selected menu item, set to true.
label string Contains the menu item label.

<c-menu-item
name="home"
record={menuItem1}
status="error"
checked
>

<c-menu-item
record={data1}
></c-menu-item>

company 212
OmniStudio
<c-menu-item
record={data2}
></c-menu-item>
</c-menu>

name unique string yes Sets the visible menu item name.
record string yes Contains the menu item data.
icon-name (Format: standard:arrow) string Sets the icon for the menu item. See SLDS icons.
type header, action string To make the menu item a sub-header of the menu, set
to header. To create a menu where each item is a link
that performs an action, set to action.
"action".
open-url-in newTab, currentTab string Sets the mode in which the action URL should be
(Default: newTab) opened.
status error, warning, success string Sets the status for the menu item.
checked true, false (Default: false) boolean To set a default selected menu item, set to true.

<c-menu-item
name="home"
record={menuItem1}
status="error"
checked
>

<c-menu-item
record={data1}
></c-menu-item>
<c-menu-item
record={data2}

company 213
OmniStudio
></c-menu-item>
</c-menu>
The MenuItem Lightning Web Component is the basic element inside theMenu Lightning Web Component.

name unique string yes Sets the visible menu
item name.
record string yes Contains the menu
item data.
theme slds, nds (Default: string Sets which theme
slds) menu uses.
standard:arrow) menu item. See SLDS
icons.
icon-position right, left (Default: left) string Sets icon position for
the menu item data.
type header, action string To make the menu
item a sub-header of
the menu, set to
header. To create a
menu where each
item is a link that
performs an action,
set to action.
action-url string Sets the action url for
the menu item. Must
set type to "action".
open-url-in newTab, currentTab string Sets the mode in
(Default: newTab) which the action URL
should be opened.
status error, warning, string Sets the status for the
success menu item.
checked true, false (Default: boolean To set a default
false) selected menu item,
set to true.
<c-menu-item
name="home"
record={menuItem1}

company 214
OmniStudio
status="error"
checked
>

<c-menu-item
record={data1}
></c-menu-item>
<c-menu-item
record={data2}
></c-menu-item>
</c-menu>
Modal Lightning Web Component ReadMe

This page contains a Modal LWC ReadMe for each Vlocity release.

The Modal Lightning Web Component displays content in a layer on top of the app. Common use cases for
modals include: creating or editing a record, as well as various types of messaging and wizards. Use the
Prompt Lightning Web Component for form submission confirmation.
Available c-modal Attributes

extraclass string Adds a class to the container element. To add
height CSS (Default: string To adjust the height of the modal, set attribute.
calc(100vh - 160px)) Supports all CSS value types, such as calc, px, %,
vh, and so on.
hidefooter no value (See string To hide the footer from the modal, set attribute.
example code.)
hideheader no value (See string To hide the header from the modal, set attribute.
example code.)
isModelOpen true, false (Default: boolean To show model by default, set to true.
false)
max-height CSS (If height is set string To set the max-height of the modal, set attribute.
this won't apply) Supports all CSS value types, such as calc, px, %,
vh, and so on.
min-height CSS (If height is set string To set the min-height of the modal, set attribute.
this won't apply) Supports all CSS value types, such as calc, px, %,
vh, and so on.
modalBackdropStyle CSS string Sets custom backdrop style.
size small, medium, large string Sets the modal size. If not set, component takes the
default size of the chosen theme.

company 215
OmniStudio

theme slds, nds (Default: string Sets the theme for this component.
slds)
title string Adds the header title to the modal component.
Example c-modal Component
<c-modal title="Profile Info" size="large" isModeOpen hideheader hidefooter>

<div slot="header">
<h1>Header description</h1>
</div>
<div slot="content">
<c-vlocity_input
value=""
label="Name"
placeholder="Enter Name"
></c-vlocity_input>
</div>
<div slot="footer">
<c-vlocity_button variant="brand" label="Save"></c-vlocity_button>
</div>
</c-modal>
<button onclick="{openModal}" class="test">Open Modal</button>
Available Methods
openModal()
If hidden, shows the modal.
closeModal()
If visible, hides the modal.
modals include: creating or editing a record, as well as various types of messaging and wizards. Use the
Prompt Lightning Web Component for form submission confirmation.

extraclass string Adds a class to the container element. To add multiple
height CSS (Default: string To adjust the height of the modal, set attribute. Supports
calc(100vh - 160px)) all CSS value types, such as calc, px, %, vh, and so on.

company 216
OmniStudio

hidefooter no value (See example string To hide the footer from the modal, set attribute.
code.)
hideheader no value (See example string To hide the header from the modal, set attribute.
code.)
isModelOpen true, false (Default: boolean To show model by default, set to true.
false)
size small, medium, large string Sets the modal size. If not set, component takes the
default size of the chosen theme.
theme slds, nds (Default: string Sets the theme for this component.
slds)
title string Adds the header title to the modal component.

<c-modal
title="Profile Info"
size="large"
isModeOpen
hideheader
hidefooter
>
<div slot="header">
</div>
<c-vlocity_input value="" label="Name" placeholder="Enter
Name"></c-vlocity_input>
</div>
<div slot="footer">
</div>
</c-modal>
<button onclick={openModal} class="test">Open Modal</button>
Available Methods
openModal()
closeModal()
modals include: creating or editing a record, as well as various types of messaging and wizards. Use
thePrompt Lightning Web Component for form submission confirmation.

company 217
OmniStudio

container element. To
use a space to
such as `classone
classtwo'.
height CSS (Default: string To adjust the height of
calc(100vh - 160px)) the modal, set
attribute. Supports all
CSS value types,
such as calc, px, %,
vh, and so on.
hidefooter no value (See string To hide the footer from
example code.) the modal, set
attribute.
hideheader no value (See string To hide the header
example code.) from the modal, set
attribute.
isModelOpen true, false (Default: boolean To show model by
false) default, set to true.
size small, medium, large string Sets the modal size. If
not set, component
takes the default size
of the chosen theme.
theme slds, nds (Default: string Sets the theme for this
slds) component.
title string Adds the header title
to the modal
component.

<c-modal
title="Profile Info"
size="large"
isModeOpen
hideheader
hidefooter
>
<div slot="header">
</div>
<c-vlocity_input value="" label="Name" placeholder="Enter
Name"></c-vlocity_input>
</div>
<div slot="footer">

company 218
OmniStudio

</div>
</c-modal>
<button onclick={openModal} class="test">Open Modal</button>
Available Methods
openModal()
closeModal()
MonacoEditor Lightning Web Component ReadMe

This page contains a MonacoEditor LWC ReadMe for each Vlocity release.
The MonacoEditor Lightning Web Component is a code editor tool used inside Salesforce.
Available c-monaco-editor Attributes

config object string yes Sets the options to create the editor. For more information, see
IEditorConstructionOptions
value string Adds default code inside the editor.
height css string To adjust the height of the editor, set this value. Supports all css
height value options such as units (for example, 'px', 'em', an so on)
and functions (for example, 'calc').
editor-src-url url string Defines the source of the editor. By default, editor-src-url points to the
static resource. Used for off-platform support.
modal true, false boolean Adds support for monaco editor to open in a modal.
(Default:
false)
Example c-monaco-editor Component
<c-monaco-editor
onchange={valueChnged}
editor-src-url={url}
config={editorConfig}
value="var t = 10"
height="calc(100vh - 350px)"
></c-monaco-editor>


<c-modal size="large" icon-url={iconUrl}>
<div slot="header">

company 219
OmniStudio
<h1>Monaco Editor</h1>
</div>
<c-monaco-editor
modal="true"
config={editorModalConfig}
value="var t = 10"
></c-monaco-editor>
</div>
</c-modal>
Available Methods
updateConfig(Type,Value)
Updates the editor's configuration settings.
Option Value Description

theme vs, vs-dark, hc-black Sets the theme for the editor.
language html, css, json, typescript Sets the language of the editor. For more information, see Monaco.Languages
options object Sets the editor options such as readOnly. For more information, see IEditorOptions
let editor = this.template.querySelector("c-monaco-editor");

// set theme
editor.updateConfig("theme", "vs");
// set language
editor.updateConfig("language", "html");
// set readOnly
editor.updateConfig("options", { readOnly:true });
The MonacoEditor Lightning Web Component is a code editor tool used inside Salesforce.
Available c-monaco-editor Attributes

config object string yes Sets the options to
create the editor. For
more information, see
IEditorConstructionOp
tions
value string Adds default code
inside the editor.

company 220
OmniStudio

height css string To adjust the height of
the editor, set this
value. Supports all css
height value options
such as units (for
example, `px', èm',
an so on) and
functions (for
example, `calc').
editor-src-url url string Defines the source of
the editor. By default,
editor-src-url points to
the static resource.
Used for off-platform
support.
modal true, false (Default: boolean Adds support for
false) monaco editor to open
in a modal.
Example c-monaco-editor Component
<c-monaco-editor
config={editorConfig}
value="var t == 10"
></c-monaco-editor>


<c-modal size="large" icon-url={iconUrl}>
<div slot="header">
<h1>Monaco Editor</h1>
</div>
<c-monaco-editor
modal="true"
config={editorModalConfig}
value="var t == 10"
></c-monaco-editor>
</div>
</c-modal>
Available Methods
updateConfig(Type,Value)

company 221
OmniStudio
Updates the editor’s configuration settings.
Option Value Description

theme vs, vs-dark, hc-black Sets the theme for the editor.
language html, css, json, typescript Sets the language of the editor. For more
information, see Monaco.Languages
options object Sets the editor options such as readOnly.
For more information, see IEditorOptions
let editor == this.template.querySelector("c-monaco-editor");

// set theme
editor.updateConfig("theme", "vs");
// set language
editor.updateConfig("language", "html");
// set readOnly
editor.updateConfig("options", { readOnly:true });
Navigate Action Lightning Web Component ReadMe

This page contains a Navigate Action LWC ReadMe for each Vlocity release.

The NavigateAction Lightning Web Component enables navigation to any of Salesforce's PageReference
types, by leveraging Salesforce's navigation service.
Available c-navigate-action Attributes

targetType App, Component, string yes Specifies the name of the target PageReference type.
Knowledge Article, Pass undefined for the current PageReference.
Login, Object,
Record, Record
Relationship, Named
Page, Community
Named Page,
Navigation Item,
Web Page, Current
Page
targetId string Specifies the 18 character record ID.
targetName string Specifies the API name of the component, object, tab,
app or record.
targetParams string Adds state params sent to the target page reference.
targetAction string Specifies action passed to object, login and record
targetType.
targetArticleType string If the targetType is knowledgeArticle, specifies the
articleType API name of the Knowledge Article record.
In Communities, articleType is ignored.
targetRelationship string Specifies the API name of the object’s relationship field.
replace true or false (Default: boolean To call the navigate() function to replace the current
false) entry in window.history, set to true.

company 222
OmniStudio

useHref true or false (Default: boolean To wrap with an anchor tag, set to true.
false)
openTargetIn newTab, currentTab string Specifies whether to open the target in a new tab or the
current tab.
url string Read-only property that displays the value of the
generated url when useHref is set to true.
pageReference string Read-only property that gets the generated page
reference object for the given properties.
Example c-navigate-action Component

The navigate-action component renders a single template, and is designed to attach functionality onto
the slotted markup.
<c-navigate-action
target-type="{string}"
target-name="{string}"
target-id="{string}"
target-params="{string}"
target-action="{string}"
replace
use-href
>

Configure c-navigate-action to Navigate to a Salesforce Tab

Navigate to any app tab or Lightning page by setting target-type to 'navigation item', and target-name
(found in the url when viewing the app tab or page, such as /n/namespace__Target_Name).
Notenamespace must be replaced with actual the namespace in your org.
<c-navigation-action target-type="Navigation Item"

target-name="namespace__LWC_Designer">

Configure c-navigate-action to Navigate to a Component

Navigate to an aura component by specifying the target-type="Component" and target-name attributes
where the aura components name is the value of target-name.
Currently Lightning web components must be wrapped in an aura component that implements the
lightning:isUrlAddressable interface.
<c-navigate-action
target-type="Component"
target-name="c__example_aura_wrapper"

company 223
OmniStudio
>
Configuring c-navigate-action to navigate to update the current page reference

To update the CurrentPageReference.state, use a navigation action that excludes the target-type
attribute. Values passed in target-params are added to the current state.
<c-navigate-action target-params="c__paramone=value one&c__layout=newport">

To remove parameters from the CurrentPageReference.state, set the param to an empty value. In
the following example, executing the navigation removes the view parameter from the
PageReference.state.
<c-navigate-action target-params="c__paramone=">
Configuring c-navigate-action to Navigate to a Record

Navigate to an action by setting target-type to 'record', a target-id, and a target-action (clone, edit, or view).
By default the target-actionvalue is 'view'.
<c-navigate-action
target-type="Record"
target-name="Account"
target-id="001B000000vYIINIA4"
>
Open the Default Salesforce Edit Dialogue

<c-navigate-action
target-action="edit"
>
Available Methods
NavigationAction.navigate()
Performs navigation to the PageReference that is constructed via the passed attributes. Calls
NavigationMixin.Navigate(). The generated pageReference is returned.

company 224
OmniStudio
NavigateAction.generateUrl()
Returns a promise that resolves the value of the configured PageReference URL and updates the tracked
property url. This method is called on connectedCallback. Note, if useHref is set to true and
properties are updated after component initialization, generateUrl must be called manually.
The NavigateAction Lightning Web Component enables navigation to any of Salesforce's PageReference
types, by leveraging Salesforce's navigation service.
Properties
Name Scope Description

targetType api (public) {string} The name of the target PageReference type. One of - component, knowledgeArticle,
object, record, relationship, tab, web - Pass undefined for the current PageReference.
targetId api (public) {string} - The 18 character record ID.
targetName api (public) {string} - Name of the component, object, tab or record.
targetParams api (public) {string} - State params sent to the target page reference.
targetAction api (public) {string} - Action passed to object, and record references.
targetArticleType api (public) {string} - The articleType API name of the Knowledge Article record. In Communities,
articleType is ignored.
targetRelationship api (public) {string} - The relationship name of the record.
replace api (public) {boolean} - When replace is true, calling the navigate() will replace the current entry in
window.history.
useHref api (public) {boolean} - If true, wrap the slot with an anchor tag.
openTargetIn api (public) {string} - To open the target in newTab/currentTab.
url track (private) {string} - When useHref is true, the value of the generated url.
pageReference private get {PageReference} - The generated page reference object for the given properties.
Methods
Signature Scope Return Value Description

navigate public PageReference Calls lightning/navigation NavigationMixin.navigate() with the
configured attributes.
generateUrl public Promise Generates a url value based on the configured attributes.
Markup
the slotted markup.
Usage
<c-navigate-action

company 225
OmniStudio
replace
use-href
>

Example Usage

Navigate to any app tab or Lightning page by setting target-type to 'navigation item', and target-name
(found in the url when viewing the app tab or page /n/namespace__Target_Name).


Navigate to an aura component by specifying the target-type="Component" and target-name attributes
<c-navigate-action
>

attribute. Values passed in target-params are added to the current state.
<c-navigate-action target-params="c__paramone=value one&c__layout=newport">


company 226
OmniStudio

Navigate to an action by setting target-type to 'record', a target-id, and a target-action (clone, edit, or view).
By default the target-action value is 'view'.
<c-navigate-action
>
<c-navigate-action
>
Available Methods
Performs navigation to the PageReference that is constructed via the passed attributes.
NavigationMixin.Navigate() is called, and the generated pageReference is returned.
property url. This method is called on connectedCallback. Note, if use-href is set to true and
properties are updated after component initialization, generateUrl must be called manually.
The NavigateAction Lightning Web Component enables navigation to any of Salesforce’s PageReference
types, by leveraging Salesforce’s navigation service.

company 227
OmniStudio
Properties

targetType api (public) {string} The name of the target
PageReference type. One of -
component, knowledgeArticle, object,
record, relationship, tab, web - Pass
undefined for the current PageReference.
targetId api (public) {string} - The 18 character record ID.
targetName api (public) {string} - Name of the component, object,
tab or record.
targetParams api (public) {string} - State params sent to the target
page reference.
targetAction api (public) {string} - Action passed to object, and
record references.
targetArticleType api (public) {string} - The articleType API name of the
Knowledge Article record. In
Communities, articleType is ignored.
targetRelationship api (public) {string} - The relationship name of the
record.
replace api (public) {boolean} - When replace is true, calling
the navigate() will replace the current
entry in window.history.
useHref api (public) {boolean} - If true, wrap the slot with an
anchor tag.
openTargetIn api (public) {string} - To open the target in newTab/
currentTab.
url track (private) {string} - When useHref is true, the value
of the generated url.
pageReference private get {PageReference} - The generated page
reference object for the given properties.
Methods

navigate public PageReference Calls`lightning/navigation
NavigationMixin.navigate()`
with the configured attributes.
generateUrl public Promise Generates a url value based
on the configured attributes.
Markup
the slotted markup.
Usage
<c-navigate-action

company 228
OmniStudio
replace
use-href
>

Example Usage

Navigate to any app tab or Lightning page by setting target-type to `navigation item', and target-name
(found in the url when viewing the app tab or page /n/namespaceTarget_Name__).


Navigate to an aura component by specifying thetarget-type=``Component'' and target-name attributes
<c-navigate-action
>

attribute. Values passed intarget-params are added to the current state.
<c-navigate-action target-params="c__paramone=value
one&c__layout=newport">

company 229
OmniStudio

Navigate to an action by setting target-type to `record', atarget-id, and a target-action (clone, edit, or view).
By default the target-action value is `view'.
<c-navigate-action
>

<c-navigate-action
>
Available Methods
Performs navigation to the PageReference that is constructed via the passed attributes.
NavigationMixin.Navigate() is called, and the generated pageReference is returned.
property url. This method is called on connectedCallback. Note, if use-href is set to true and
properties are updated after component initialization, generateUrlmust be called manually.
NavigationUtils ReadMe
This page contains a NavigationUtils ReadMe for each Vlocity release.

This module exposes a collection of utilities designed to simplify navigational functions.

company 230
OmniStudio
ns/navigationUtils.PageReference
Kind: static class of ns/navigationUtils
new exports.PageReference(type, attributes, [stateParams])

To navigate in Lightning Experience, Lightning Communities, or the Salesforce mobile app, define a
PageReference object. The PageReference type generates a unique URL format and defines attributes that
apply to all pages of that type.

type PageReferenceType Page reference type.
attributes Object Page reference attributes.
[stateParams] string ⎮ any State parameters passed to the target context. Can be in the form of a url query string or
an object.
PageReference.unfreeze(pageReference, newParams)
Utility method to unfreeze, and update PageReference object returned from @wire(CurrentPageReference)
is frozen
Kind: static method of PageReference

pageReference PageReference A page reference object received from @wire(CurrentPageReference)
newParams string ⎮ any [stateParams] - State parameters to be extended on the current reference. Can be in the form
of a url query string or an object.
ns/navigationUtils.AppPageReference
new exports.AppPageReference(appTarget, pageReference)

A standard or custom app available from the App Launcher in an org. Use this type to create custom
navigation components that take users to a specific app or to a page within an app. Connected apps aren’t
supported.

appTarget string App that you are navigating to. Pass either the appId or appDeveloperName to the
appTarget. - The appId is the DurableId field on the AppDefinition object. - To form the
appDeveloperName value, concatenate the app’s namespace with the developer name. To
find the app’s developer name, navigate to the App Manager in Setup and look in the
Developer Name column. For standard apps, the namespace is standard__. For custom
apps it’s c__. For managed packages, it’s the namespace registered for the package.
pageReference PageReference Identifies a specific location in the app you are navigating to. Pass in the
pageReferenceand applicable attributes for that pageReference type.
ns/navigationUtils.ComponentPageReference
Kind: static class of ns/navigationUtils Supports: Lightning Experience, Salesforce Mobile App

company 231
OmniStudio
new exports.ComponentPageReference(name, [stateParams])

A Lightning component. To make an addressable Lightning web component, embed it in an Aura
component that implements the lightning:isUrlAddressable interface.

name string The Lightning component name in the format namespace__componentName
[stateParams] string ⎮ Object State parameters passed to the target context. Can be in the form of a url query string or an
object.
ns/navigationUtils.KnowledgeArticlePageReference
new exports.KnowledgeArticlePageReference(articleType, urlName)

A page that interacts with a Knowledge Article record.

articleType string The articleType API name of the Knowledge Article record. In Communities, articleType is ignored.
urlName string The value of the urlName field on the target KnowledgeArticleVersion record. The urlName is the article's
URL.
ns/navigationUtils.LoginPageReference
new exports.LoginPageReference(action, [stateParams])

A page for authentication into a community.

action 'login' ⎮ 'logout' A login-related action to be performed. Possible values are: 'login' or 'logout'.
[stateParams] string ⎮ Object State parameters passed to the target context. Can be in the form of a url query string or an
object.
ns/navigationUtils.NamedPageReference
new exports.NamedPageReference(pageName, [stateParams])

A standard page with a unique name. If an error occurs, the error view loads and the URL isn’t updated.

pageName string The unique name of the page.
[stateParams] string ⎮ any State parameters passed to the target context. Can be in the form of a url query string or an object.
ns/navigationUtils.CommNamedPageReference

company 232
OmniStudio
new exports.CommNamedPageReference(pageName, [stateParams])

A standard page with a unique name, for use in communities. If an error occurs, the error view loads and
the URL isn’t updated.

pageName string The unique name of the page.
ns/navigationUtils.NavItemPageReference
new exports.NavItemPageReference(tabName, [stateParams])

A page that displays the content mapped to a CustomTab. Visualforce tabs, Web tabs, Lightning Pages,
and Lightning Component tabs are supported.

tabName string The unique name of the CustomTab.
ns/navigationUtils.ObjectPageReference
new exports.ObjectPageReference(objectName, [action], [filter])

A page that interacts with a standard or custom object in the org and supports standard actions for that
object.
Param Type Default Description

objectName string The API name of the standard or custom object. For custom objects that are part of a
managed package, prefix the custom object with ns__
[action] string "home" The action name to invoke. Valid values include home,list, and new. In Communities,
list and homeare the same.
[filter] string "Recent" Id of the object page. Default is Recent.
ns/navigationUtils.RecordPageReference
new exports.RecordPageReference(id, [objectName], [action])

A page that interacts with a relationship on a particular record in the org. Only related lists are supported.

id string The 18 character record ID.
[objectName] string The API name of the record’s object. Optional for lookups.
[action] string "view" The action name to invoke. Valid values include clone,edit, and view. Communities
doesn’t support the values clone or edit.

company 233
OmniStudio
ns/navigationUtils.RelationshipPageReference
new exports.RelationshipPageReference(recordId, [objectApiName],

[relationshipApiName], [actionName])
A page that interacts with a relationship on a particular record in the org. Only related lists are supported.

recordId string The 18 character record ID of the record that defines the relationship.
[objectApiName] string The API name of the object that defines the relationship. Optional for lookups.
[relationshipApiName] string The API name of the object’s relationship field.
[actionName] string "view" The action name to invoke. Only view is supported.
ns/navigationUtils.WebPageReference
new exports.WebPageReference(url, replace)

An external URL.

url string The URL of the page you are navigating to.
replace Boolean replace the current page with this URL in your browser’s session history, set replace to true. The current
page is not saved in session history, meaning the user can’t navigate back to it.
ns/navigationUtils.pageReferenceTypes : enum
Kind: static enum of ns/navigationUtils Read only: true
ns/navigationUtils.parseParams(queryString)
Expands query params to an object
Kind: static method of ns/navigationUtils

queryString string key=value pairs separated by &
ns/navigationUtils.normalizeParams(namespacedParams) ⇒ object
Returns a copy of a params object with the namespace values removed. Duplicate values will be
overwritten.
Kind: static method of ns/navigationUtils

namespacedParams object A collection of params derived from pageReference.state.

company 234
OmniStudio
ns/navigationUtils~APP : 'App'
Kind: inner constant of ns/navigationUtils
ns/navigationUtils~COMPONENT : 'Component'
ns/navigationUtils~KNOWLEDGE_ARTICLE : 'Knowledge Article'

ns/navigationUtils~LOGIN : 'Login'
ns/navigationUtils~OBJECT : 'Object'
ns/navigationUtils~RECORD : 'Record'
ns/navigationUtils~RELATIONSHIP : 'Record Relationship'

ns/navigationUtils~NAMED_PAGE : 'Named Page'

ns/navigationUtils~COMM_NAMED_PAGE : 'Community Named Page'

ns/navigationUtils~NAVIGATION_ITEM : 'Navigation Item'

ns/navigationUtils~WEB_PAGE : 'Web Page'

ns/navigationUtils~CURRENT_PAGE : 'Current Page'

ns/navigationUtils~parseValue(value) ⇒ string
Parse the value of a url parameter.
Kind: inner method of ns/navigationUtils Scope: private
Param Type
value string
Newport Loader ReadMe

This page contains the Newport Loader ReadMe for each Vlocity release.

company 235
OmniStudio
Vlocity Insurance and Health Winter '20 and CME Winter '20
The Newport Loader is a utility that exposes a single load function used to ensure the Newport CSS styles
load in the <head> of the page.
This utility:
• Ensures the styles are loaded only once across the page
• Loads a custom version of Newport if the newportZipUrlhas been configured in the org.
Available Methods
load(component)
You must always pass your component to the load function.
import { load } from `c/newportLoader`;
...
export default class MyComponent extends LightningElement {
connectedCallback() {
// It's recommended to add the styles into the page
// from your connectedCallback so they're not added
// to the page before they're needed, but available
// for when the component's `render` is called.
load(this)
.then(() => {
// newport styles added to page
});
}
}
OutputField Lightning Web Component ReadMe

This page contains an OutputField LWC ReadMe for each Vlocity release.

The OutputField Lightning Web Component returns the label, help text and value for the field name of a
record. The returned data is read-only.
Available c-output-field Attributes

currency string default: Sets Currency type. valid only for currency fields
USD
extraclass string Adds class to the parent div.

company 236
OmniStudio

field-label string Sets the title of the field if field-title is not provided.
field-name string yes Sets the field value to fetch.
field-title string Sets the title of the field.
label string Sets a label for the output field.
labelclass string Adds class to the label field.
locale string default: Sets Locale. valid only for currency fields
en-US
mask string Adds a mask for the input value. It is applicable only for
type: date/number. For type date the mask is different date
formats. For type number it supports the same mask which
is supported in input lwc component.
prevent- string Prevents default navigation of url. It is applicable only for
navigation type: url.
record string yes Provides the record from which to fetch the field value.
type string, date, string Formats the field based on the type provided.
datetime,
currency,
phone,
address, and
so forth
(Default:
string)
valueclass string Adds class to the value field.
Example c-output-field Component
<c-output-field
record={record}
field-name="Name"
type={field.type}
></c-output-field>

field-name string yes Sets the field value to fetch.
record string yes Provides the record from which to fetch the field value.
type string, date, datetime, currency, string Formats the field based on the type provided.
phone, address, and so forth
(Default: string)

company 237
OmniStudio
<c-output-field
record={record}
field-name="Name"
type={field.type}
></c-output-field>

field-name string yes Sets the field value to
fetch.
record string yes Provides the record
from which to fetch
the field value.
<c-output-field
record={record}
field-name="Name"
></c-output-field>
Pill Lightning Web Component ReadMe

This page contains a Pill LWC ReadMe for each Vlocity release.

The Pill Lightning Web Component is an input element that displays read-only labels that can contain links
and can be removed from view on demand. For example, a user can create a list of email addresses or
keywords by adding options using the input field or by selecting from a list of options, which then display as
read-only labels with delete buttons. The Pill LWC supports custom labels.
Available c-pill Attributes

freetext true, false (Default: string If set, enables free text. To enable users to create their
false) own pill values apart from the values provided in options,
set this to true. To create a free text pill, user enters the
text in the input element, then presses the enter key.
name string Sets the name of the element. Used by the Form
Lightning Web Component.

company 238
OmniStudio

theme slds, nds (Default: string Sets the theme for the pill component.
slds)
viewonly To enable, add If set, hides input field and prevents users from adding
viewonlywithout value new pills.
to the c-
pillelement.
placeholder string Adds text to the input element to prompt user to select
from the dropdown (list of optionsto render labels). For
example, "Select an option".
label string Adds a title for the rendered pill element.
disabled true, false (Default: boolean To disable the input field, set to true.
false)
options array Adds the initial list of label options. You can use this
string attribute to restrict options for users.
value string To add visible labels by default, set this attribute. To add
more than one label, enter a comma sepatated list, such
as 'One, Two, Three'.
Example c-pill Component
<c-pill
options='["Morin", "Banks", "Olivia"]'
label="Users"
value='"Adeola" "Mariam"'
freetext="true"
placeholder="Please enter you interest"
></c-pill>
Available Custom labels

Press delete or backspace to remove cmpRemove Text visible on mouse over of the delete icon.
Available Custom Events

onremove
Triggers on deleting a value.
onselect
Triggers on selecting an option.
Available Methods
getValue()
Returns comma-separated pill values.

company 239
OmniStudio
keywords by adding options using the input field or by selecting from a list of options, which are then
displayed as read-only labels with delete buttons.

freetext true, false string If set, enables free text. To enable users to create their own pill
(Default: false) values apart from the values provided in options, set this to
true. To create a free text pill, user enters the text in the input
element, then presses the enter key.
name string Sets the name of the element. Used by the Form Lightning
Web Component.
theme slds, nds string Sets the theme for the pill component.
(Default: slds)
viewonly To enable, add If set, hides input field and prevents users from adding new
viewonly without pills.
value to the c-
pill element.
dropdown (list of options to render labels). For example, "Select
an option".
label string Adds a title for the rendered pill element.
disabled true, false boolean To disable the input field, set to true.
(Default: false)
options array Adds the initial list of label options. You can use this attribute to
string restrict options for users.
value string To add visible labels by default, set this attribute. To add more
than one label, enter a comma sepatated list, such as 'One,
Two, Three'.
<c-pill
label="Users"
freetext="true"
></c-pill>

onremove
onselect

company 240
OmniStudio
Available Methods
getValue()
keywords by adding options using the input field or by selecting from a list of options, which are then
displayed as read-only labels with delete buttons.

freetext true, false (Default: string If set, enables free
false) text. To enable users
to create their own pill
values apart from the
values provided in
options, set this to
true. To create a free
text pill, user enters
the text in the input
element, then presses
the enter key.
name string Sets the name of the
element. Used by the
Form Lightning Web
Component.
slds) pill component.
viewonly To enable, add If set, hides input field
viewonly without value and prevents users
to the `c-pillèlement. from adding new pills.
placeholder string Adds text to the input
element to prompt
user to select from the
dropdown (list of
options to render
labels). For example,
``Select an option''.
label string Adds a title for the
rendered pill element.
disabled true, false (Default: boolean To disable the input
false) field, set to true.
options array string Adds the initial list of
label options. You can
use this attribute to
restrict options for
users.

company 241
OmniStudio

value string To add visible labels
by default, set this
attribute. To add more
than one label, enter a
comma sepatated list,
such as Òne, Two,
Three'.
<c-pill
label="Users"
freetext="true"
></c-pill>

onremove
onselect
Available Methods
getValue()
Popover Lightning Web Component ReadMe

This page contains a Popover LWC ReadMe for each Vlocity release.
The Popover Lightning Web Component is a non-modal dialog. The component must be paired with a
clickable trigger element and contain at least one focusable element.
Available c-popover Attributes

extraclass string Adds a class to the table element. To add
multiple classes, use a space to separate
each class, such as 'classone classtwo'.
theme slds, nds (Default: slds) string Sets the theme to use for this component.

company 242
OmniStudio

variant error, feature, panel, string Sets what type of popover to use. If a
walkthrough, warning value is not set, a basic popover displays.
nubbinposition top, left, bottom, right string Sets the position of the triangle (nubbin)
(See description for pointing to the content. There are three
more options) (Default: ways to provide nubbin position: top, top-
top-left) left or top-left-corner.
size small, medium, large, string Sets the size of popover.
full-width (Default:
medium)
show true, false (Default: boolean To display popover by default, set to true.
false)
showclosebutton true, false (Default: boolean To show the close button by default, set to
false) true.
icon-url (Default: slds icon url) string Defines the base url for the icon.
To display its content, the
Popover component
supports three slots:
header, content,
footer (see example
below). You must specific
content. This component
does not support base
templates.
Example c-popover Component
<c-popover
title="Test"
theme="{theme}"
showclosebutton="true"
onmouseover="{showPopover}"
onmouseout="{hidePopover}"
>
<div slot="header">
</div>
This is a sample text
</div>
<div slot="footer">
<button>test</button>
</div>
</c-popover>
The Popover Lightning Web Component is a non-modal dialog. The component must be paired with a
clickable trigger element and contain at least one focusable element.

company 243
OmniStudio
Available c-popover Attributes

table element. To add
a space to separate
each class, such as
theme slds, nds (Default: string Sets the theme to use
slds) for this component.
variant error, feature, panel, string Sets what type of
walkthrough, warning popover to use. If a
value is not set, a
basic popover
displays.
nubbinposition top, left, bottom, right string Sets the position of
(See description for the triangle (nubbin)
more options) pointing to the
(Default: top-left) content. There are
three ways to provide
nubbin position: top,
top-left or top-left-
corner.
size small, medium, large, string Sets the size of
full-width (Default: popover.
medium)
show true, false (Default: boolean To display popover by
false) default, set to true.
showclosebutton true, false (Default: boolean To show the close
false) button by default, set
to true.
icon-url (Default: slds icon url) string Defines the base url
for the icon.
To display its content, the Popover component supports three slots:`header`, content, footer (see
example below). You must specific content. This component does not support base templates.
Example c-popover Component
<c-popover
title="Test"
theme="{theme}"
showclosebutton="true"
onmouseover="{showPopover}"
onmouseout="{hidePopover}"
>
<div slot="header">
</div>

company 244
OmniStudio
This is a sample text
</div>
<div slot="footer">
<button>test</button>
</div>
</c-popover>
Power Launcher Lightning Web Component ReadMe

This page contains the Power Launcher LWC ReadMe for each Vlocity release.

The Power Launcher Lightning Web Component gets and displays a list of vlocity actions based on the
recordId. The Power Launcher LWC supports custom labels.
Available c-power-launcher Attributes

recordId string yes Gets the actions based on the recordId.
disableCache true, false (Default: false) boolean To turn off caching, set to true.
Example c-power-launcher Component
<c-power-launcher
></c-power-launcher>

Navigate cmpNavigate Text visible next to the keyboard shortcut icon that shows user how to move up and down the list of
actions.
Enter cmpEnter Text visible next to the keyboard shortcut icon that shows user how to select an action.
Dismiss cmpDismiss Text visible next to the keyboard shortcut icon that shows user how to close the actions dropdown.
The Power Launcher Lightning Web Component gets and displays a list of vlocity actions based on the
recordId.
Available c-power-launcher Attributes

recordId string yes Gets the actions based on the recordId.
disableCache true, false (Default: false) boolean To turn off caching, set to true.

company 245
OmniStudio
Example c-power-launcher Component
<c-power-launcher
></c-power-launcher>
Power Launcher Action Lightning Web Component ReadMe

This page contains the Power Launcher Action LWC ReadMe for each Vlocity release.
The PowerLauncherAction Lightning Web Component displays Vlocity actions inside the PowerLauncher
LWC and extends Action LWC.
Available c-power-launcher-action Attributes

See available attributes from the Action Lightning Web Component.
Example c-power-launcher Action Component
<c-power-launcher-action
state-action={item}
context-id={recordId}
disable-cache="true"
></c-power-launcher-action>
Available Methods
Navigate()
Performs the click event on an action.
ProgressBar Lightning Web Component

This page contains the ProgressBar LWC ReadMe for each Vlocity release.

The ProgressBar Lightning Web Component displays the progress of activity on a page. The ProgressBar
LWC supports custom labels.
Available c-progress-bar Attributes

progress 0-100 (Default: 0) number Value representing the progress bar's completeness.
size xx-small, x-small, small, string Corresponds to slds/nds styles determining size. {theme}-
medium, large (Default: progress-bar_xx-small, x-small, small, medium, large.
small)
transition number Number in seconds. Represents the css property
transition-duration.
theme slds, nds (Default: slds) string Specifies the theme to use.

company 246
OmniStudio

success true, false (Default: false) boolean Flag when true will render the component with success
styling.
Example c-progress-bar Component
<c-progress-bar progress="0"
size="x-small"
theme="nds"
transition="0.5"
success
></c-progress-bar>

Progress cmpProgress Assistive text for the icon that displays where a user is in the process.
Available Methods
setProgress(value) Sets the % of completeness of the progress bar value without setting the api value
directly.

value number Value representing the progress bar's completeness. Valid values from 0-100.
progressBar.setSuccess() Sets the value of ProgressBar.success without setting the api value directly.
Name Type Description

success boolean If success is true, the progress indicator will change to the success color.
ProgressBar.ProgressBar Custom element that will render a slds-progress-bar or nds-progress bar css
component. Extends the LightningElement.
The ProgressBar Lightning Web Component displays the progress of activity on a page.
Available c-progress-bar Attributes

progress 0-100 (Default: 0) number Value representing the progress bar's completeness.
size xx-small, x-small, small, string Corresponds to slds/nds styles determining size. {theme}-
medium, large (Default: progress-bar_xx-small, x-small, small, medium, large.
small)
transition number Number in seconds. Represents the css property
transition-duration.
theme slds, nds (Default: slds) string Specifies the theme to use.

company 247
OmniStudio

success true, false (Default: false) boolean Flag when true will render the component with success
styling.
Example c-progress-bar Component
<c-progress-bar progress="0"
size="x-small"
theme="nds"
transition="0.5"
success>
</c-progress-bar>
Available Methods
setProgress(value)
Sets the % of completeness of the progress bar value without setting the API value directly.

value number Value representing the progress bar's completeness. Valid values from 0-100.
progressBar.setSuccess()
Sets the value of ProgressBar.success without setting the API value directly.
Name Type Description

success boolean If success is true, the progress indicator will change to the success color.
ProgressBar.ProgressBar Custom element that will render a slds-progress-bar or nds-progress bar CSS
component. Extends the LightningElement.
Prompt Lightning Web Component ReadMe

This page contains a Prompt LWC ReadMe for each Vlocity release.
The Prompt Lightning Web Component displays simple content on a layer on top of the app. For example,
use a prompt to confirm form submission or to direct the user to confirm a step in a process. Use the Modal
Lightning Web Component to modify data with forms and fields.
Available c-prompt Attributes

title string yes Adds the header title to the prompt.
message string yes Adds the content to the prompt.
theme slds, nds (Default: slds) string Sets the theme for the prompt component.

company 248
OmniStudio
Example c-prompt Component
<c-prompt
theme="slds"
title="Service Unavailable"
message="Sit nulla est ex deserunt exercitation anim occaecat. Nostrud
ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse
quis. Cillum sunt ad dolore
quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor
cupidatat consequat elit dolor adipisicing."
></c:prompt>
Available Methods
openPrompt()
If hidden, displays the prompt.
closePrompt()
If visible, hides the prompt.
The Prompt Lightning Web Component displays simple content on a layer on top of the app. For example,
use a prompt to confirm form submission or to direct the user to confirm a step in a process. Use the Modal
Lightning Web Component to modify data with forms and fields.
Available c-prompt Attributes

title string yes Adds the header title
to the prompt.
message string yes Adds the content to
the prompt.
slds) prompt component.
Example c-prompt Component
<c-prompt
theme="slds"
title="Service Unavailable"
message="Sit nulla est ex deserunt exercitation anim occaecat. Nostrud
ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse
quis. Cillum sunt ad dolore
quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor

company 249
OmniStudio
cupidatat consequat elit dolor adipisicing."

></c:prompt>
Available Methods
openPrompt()
If hidden, displays the prompt.
closePrompt()
If visible, hides the prompt.
Pubsub Component
This page contains the Pubsub Component ReadMe for each Vlocity release.

The Pubsub Component enables data sharing between components. Multiple components can register and
receive data from the same channel.
This component exposes 4 functions:
• register
• unregister
• fire
• shouldExecuteCallbackHandler.shouldExecuteCallback
Available Methods
Register
Register a callback for an event.
pubsub.register(this.channel, {
result: // Pass the payload here
});
Unregister
Unregister from an event.
pubsub.unregister(this.channel, {
onresult: // Do on successfull disconnect
});
Fire
Fire an event to a listener.
pubsub.fire("Event Name ", "Name of the Action", {

name: // some name,

company 250
OmniStudio
value: // payload
});
shouldExecuteCallbackHandler.shouldExecuteCallback
Override this function to implement a check before executing the registered callback. This function should
return true if you want the callback to execute or return false. The default value returned is true.
pubsub.shouldExecuteCallbackHandler.shouldExecuteCallback =
(callback,payload)=>{
//implement the function to return true if you want the callback to
execute else return false.
if(condition){ //some condition.
return true;
}else{
return false;
}
}
Register and Receive Data from Multiple Components
// Inside sending component

pubsub.fire("Notify", "sendNotification", {
name: "Notify",
value: // payload
});
// Inside receving component 1

pubsub.register("Notify", {
sendNotification: //Do something
});

sendNotification: //Do something else
});
Vlocity Insurance and Health Summer '19 and CME Fall '19
The Pubsub Component enables data sharing between components. Multiple components can register and
receive data from the same channel.
This component exposes 3 functions:
• register
• unregister
• fire

company 251
OmniStudio
Available Methods
Register
Register a callback for an event.
pubsub.register(this.channel, {
result: // Pass the payload here
});
Unregister
Unregister from an event.
pubsub.unregister(this.channel, {
onresult: // Do on successfull disconnect
});
Fire
Fire an event to a listener.
pubsub.fire("Event Name ", "Name of the Action", {

name: // some name,
value: // payload
});
Register and Receive Data from Multiple Components
// Inside sending component

pubsub.fire("Notify", "sendNotification", {
name: "Notify",
value: // payload
});

sendNotification: //Do something
});

sendNotification: //Do something else
});
RadioGroup Lightning Web Component ReadMe

This page contains a RadioGroup LWC ReadMe for each Vlocity release.

company 252
OmniStudio
The RadioGroup Lightning Web Component enables users to select from single or multiple options by
selecting one radio button.
Available c-radio-group Attributes

type radio, string Sets the style of the radio group.
button
(Default:
radio)
label string yes Adds a visible title to the radio group.
options array yes Contains the list of label-value pairs for each radio button.
message-when- string Displays a message when no radio button is selected and the
value-missing required attribute is set to true.
name string Specifies the name of the radio button group. User can select only
one button if a name is specified for the group.
value string Sets the default value of the radio group.
disabled If present, the radio group is disabled and users cannot interact
with it.
required If present, user must select the radio button in order to submit the
form.
validity JSON Object Defines the validity states for an element, with respect to constraint
validation.
extraclass string Adds a class to the main container of the component. To add
theme slds, nds string Sets the theme for the radio group component.
(Default:
slds)
Example c-radio-group Component
<c-radio-group
name="vehicle"
value="bike"
></c-radio-group>
Available Methods
checkValidity()
reportValidity()

company 253
OmniStudio
focus()
The RadioGroup Lightning Web Component enables users to select from single or multiple options by
selecting one radio button.
Available c-radio-group Attributes

type radio, button (Default: string Sets the style of the
radio) radio group.
label string yes Adds a visible title to
the radio group.
options array yes Contains the list of
label-value pairs for
each radio button.
message-when-value- string Displays a message
missing when no radio button
is selected and the
required attribute is
set to true.
the radio button
group. User can select
only one button if a
name is specified for
the group.
value string Sets the default value
of the radio group.
disabled If present, the radio
group is disabled and
with it.

company 254
OmniStudio

required If present, user must
select the radio button
in order to submit the
form.
validity JSON Object Defines the validity
states for an element,
with respect to
main container of the
component. To add
a space to separate
each class, such as
slds) radio group
component.
Example c-radio-group Component
<c-radio-group
name="vehicle"
value="bike"
></c-radio-group>
Available Methods
checkValidity()
reportValidity()
focus()

company 255
OmniStudio
RadioImageGroup Lightning Web Component ReadMe

This page contains a RadioImageGroup LWC ReadMe for each Vlocity release.
The RadioImageGroup Lightning Web Component extends the RadioGroup Lightning Web Component
adding additional features. The RadioImageGroup Lightning Web Component enables users to choose
from single or multiple options by selecting an image instead of a radio button.
Available c-radio-image-group Attributes

enabled-caption true, false (Default: boolean To show a caption, set to true.
false)
control-width Width in pixels string Sets the width of radio button image.
(Default: auto)
control-height Height in pixels string Sets the height of radio button image.
(Default: auto)
image-count-in- Integer/ To set the number of checkbox images
row String to display in a row, set this attribute.
horizontal-mode true, false (Default: boolean To display the radio buttons
false) horizontally, set to true.
is-image-display true, false (Default: boolean To show image, set to true. Only valid
false) when is-image is set to true.
is-display-radio true, false (Default: boolean yes (if is-image and is- Displays radio buttons as radio input.
false) display-wide are set to
false)
is-display-wide true, false (Default: boolean yes (if is-image and is- Displays radio buttons as tabs.
false) display-radio are set
to false)
is-image true, false (Default: boolean yes (if is-display-radio Displays radio buttons as image.
false) and is-display-wide
are set to false)
Available Methods
checkValidity()
reportValidity()

company 256
OmniStudio
focus()
Example c-radio-image-group Component
<c-radio-image-group
name="rad"
type="radio"
options='[{"name": "male", "value": "male", imgId: "https://
image.shutterstock.com/image-photo/summer-beach-holiday-online-
shopping-450w-461355724.jpg", "selected": false},
{"name": "female", "value": "female", imgId: "https://cdn.pixabay.com/photo/
2015/11/06/15/13/internet-1028794__340.jpg", "selected": true}]'
is-image="true"
></c-radio-image-group>
The RadioImageGroup Lightning Web Component extends the RadioGroup Lightning Web Component
adding additional features. TheRadioImageGroup Lightning Web Component enables users to choose from
single or multiple options by selecting an image instead of a radio button.
Available c-radio-image-group Attributes

enabled-caption true, false (Default: boolean To show a caption, set
false) to true.
control-width Width in pixels string Sets the width of radio
(Default: auto) button image.
control-height Height in pixels string Sets the height of
(Default: auto) radio button image.
image-count-in-row Integer/String To set the number of
checkbox images to
display in a row, set
this attribute.
horizontal-mode true, false (Default: boolean To display the radio
false) buttons horizontally,
set to true.
is-image-display true, false (Default: boolean To show image, set to
false) true. Only valid when
is-image is set to true.

company 257
OmniStudio

is-display-radio true, false (Default: boolean yes (if is-image and is- Displays radio buttons
false) display-wide are set to as radio input.
false)
is-display-wide true, false (Default: boolean yes (if is-image and is- Displays radio buttons
false) display-radio are set as tabs.
to false)
is-image true, false (Default: boolean yes (if is-display-radio Displays radio buttons
false) and is-display-wide as image.
are set to false)
Available Methods
checkValidity()
reportValidity()
focus()
Example c-radio-image-group Component
<c-radio-image-group
name="rad"
type="radio"
options='[{"name": "male", "value": "male", imgId: "https://
image.shutterstock.com/image-photo/summer-beach-holiday-online-
shopping-450w-461355724.jpg", "selected": false},
{"name": "female", "value": "female", imgId: "https://cdn.pixabay.com/photo/
2015/11/06/15/13/internet-1028794__340.jpg", "selected": true}]'
is-image="true"
></c-radio-image-group>

company 258
OmniStudio
Related List Lightning Web Component ReadMe

This page contains the Related List LWC ReadMe for each Vlocity release.

The Related List Lightning Web Component displays a table of data with a header that supports actions. All
attributes from the DataTable LWC and sldsHeader LWC are available to this component.
Available c-related-list Attributes

recordId string yes, if actionList is set Sets Vlocity Actions contextId.
sObjectType sObject string Sets Vlocity Actions sObject type.
actionList vlocity action name array Displays Vlocity Actions in the header.
Example c-related-list Component
<c-related-list
header="Sample Header"
description="Sample title for the header"
theme={theme}
icon-name="standard:opportunity"
icon-size="large"
icon-color="#fcb95b"
icon-bg-color="#fff"
draggable="false"
columns={columns}
records={tableData}
action-list={actionList}
></c-related-list>
RichTextEditor Lightning Web Component ReadMe

This page contains a RichTextEditor LWC ReadMe for each Vlocity release.
The RichTextEditor Lightning Web Component enables the text editor tool for rich content editing.
Available c-rich-text-editor Attributes

config object yes Sets the options to create the editor. For more information, see
TinyMCE Basic Setup
value string Adds default code inside the editor.
height CSS To adjust the height of the editor, set this value. Only supports height
(Default: without any postfix. For example, 300.
300)

company 259
OmniStudio

editor-src-url URL string For off-platform support, set the source of the rich text editor. By
default, editor-src-url points to the static resource.
For more options, see TinyMCE Documentation.
Example c-rich-text-editor Component
<c-rich-text-editor
onchange="{valueChnged}"
editor-src-url="{url}"
config="{editorConfig}"
value="{initialValue}"
height="400"
></c-rich-text-editor>
Basic Editor Config
{
height: 300;
}
Advanced Editor Config
{
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor
textcolor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | bold italic forecolor backcolor |
alignleft aligncenter alignright alignjustify | bullist numlist outdent indent
| removeformat | preview | help',
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tiny.cloud/css/codepen.min.css'
],
skin: 'oxide'
}
The RichTextEditor Lightning Web Component enables the text editor tool for rich content editing.

company 260
OmniStudio
Available c-rich-text-editor Attributes

config object yes Sets the options to
create the editor. For
more information, see
TinyMCE Basic Setup
value string Adds default code
inside the editor.
height CSS (Default: 300) To adjust the height of
the editor, set this
value. Only supports
height without any
postfix. For example,
300.
editor-src-url URL string For off-platform
support, set the
source of the rich text
editor. By default,
editor-src-url points to
the static resource.
For more options, see TinyMCE Documentation.
Example c-rich-text-editor Component
<c-rich-text-editor
onchange="{valueChnged}"
editor-src-url="{url}"
config="{editorConfig}"
value="{initialValue}"
height="400"
></c-rich-text-editor>
Basic Editor Config
{
height: 300;
}
Advanced Editor Config
{
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor
textcolor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],

company 261
OmniStudio
toolbar: 'undo redo | formatselect | bold italic forecolor backcolor |

alignleft aligncenter alignright alignjustify | bullist numlist outdent indent
| removeformat | preview | help',
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tiny.cloud/css/codepen.min.css'
],
skin: 'oxide'
}
Slider Lightning Web Component ReadMe

This page contains a Slider LWC ReadMe for each Vlocity release.
The Slider Lightning Web Component is a graphical control element for a user to set a value by moving an
indicator horizontally or vertically.
Available c-slider Attributes

label string Adds a visible label to the slider component.
theme slds, nds (Default: Sets the theme for the slider component.
slds)
disabled true, false (Default: To disable the slider, set to true.
false)
min (Default : 0) string Sets the min value of the range. (For example -1000, 0, and so
on)
max (Default : 100) string Sets the maximum value of the range. (For example, 100,
1000, and so on)
value string Sets the initial value for the slider.
step (Default: 0) number Specifies the size of each movement (an increment or jump
between values) of the slider control.
size xx-small, small, string Sets the size of the slider.
medium
type horizontal, vertical string Sets the orientation of the slider.
(Default: horizontal )
imask object string Supports masking to range and input value. For display, not
manuplation. For more information on imask, see imask.js
Example c-slider Component
<c-slider
type="vertical"
step="20"
label="Slider Component"
size="medium"
min="-1000"

company 262
OmniStudio
max="1000"
value="0"
>
</c-slider>
The Slider Lightning Web Component is a graphical control element for a user to set a value by moving an
indicator horizontally or vertically.
Available c-slider Attributes

label string Adds a visible label to
the slider component.
slds) slider component.
disabled true, false (Default: To disable the slider,
false) set to true.
min (Default : 0) string Sets the min value of
the range. (For
example -1000, 0, and
so on)
max (Default : 100) string Sets the maximum
value of the range.
(For example, 100,
1000, and so on)
value string Sets the initial value
for the slider.
step (Default: 0) number Specifies the size of
each movement (an
increment or jump
between values) of
the slider control.
size xx-small, small, string Sets the size of the
medium slider.
type horizontal, vertical string Sets the orientation of
(Default: horizontal ) the slider.
imask object string Supports masking to
range and input value.
For display, not
manuplation. For
more information on
imask, see imask.js
Example c-slider Component

<c-slider
type="vertical"
step="20"
label="Slider Component"
size="medium"

company 263
OmniStudio
min="-1000"
max="1000"
value="0"
>
</c-slider>
SLDS Header Lightning Web Component ReadMe

This page contains the SLDS Header LWC ReadMe for each Vlocity release.

The SldsHeader Lightning Web Component displays a page header, which contains a title, an icon, field
data, and action links.
Available c-slds-header Attributes

description string Adds a short description for the header.
displayName string Sets the alternative text for the image.
fields string Sets the array of objects containing fields data.
header string recommended Sets the header title.
headerWrapperClass css class string Pass a wrapper CSS class the sldsHeader component.
iconBgColor string Sets the color of the icon background when using slds
icons.
iconColor string Sets the color of the icon when using slds icons.
iconImgWrapperclass string Adds a class provided by the user for the custom image
wrapper.
iconName string recommended Specifies the name of the icon to show next to the header
title and description.
iconSize string Sets the size of the icon. For available values check the
Icon LWC.
imageRef string To use a custom image, enter a URL.
obj string Specifies the obj containing the data for the fields
showSpinner true, false string Displays a spinner icon next to the header.
(Default:
false)
(Default:
slds)
Example c-slds-header Component
<c-slds-header
theme={theme}
icon-size="large"

company 264
OmniStudio
>
</c-slds-header>
Available Event Handlers

handleEdit()
An event that expects params detail.message to be set to the header when in edit mode.
handleSave()
An event that resets the header after editing is done.
fields
This accepts an array of objects with keys name,label and type. Supports number, currency, date, datetime,
percentage, phone, address, checkbox, url & icon. For type = icon the value need to be boolean. If true
it shows check. If false it shows nothing.
const fields = [
{ name: "Author", label: this.authorLabel, type: "string" },
{ name: "Status", label: this.statusLabel, type: "string" },
{ name: "IsChildCard", label: this.isChildCardLabel, type: "icon" }
];

The SldsHeader Lightning Web Component displays a page header, which contains a title, an icon, field
data, and action links.
Available c-slds-header Attributes

description string Adds a short description for the header.
displayName string Sets the alternative text for the image.
fields string Sets the array of objects containing fields data.
header string recommended Sets the header title.
iconBgColor string Sets the color of the icon background when using slds
icons.
iconColor string Sets the color of the icon when using slds icons.
iconImgWrapperclass string Adds a class provided by the user for the custom image
wrapper.
iconName string recommended Specifies the name of the icon to show next to the header
title and description.
iconSize string Sets the size of the icon. For available values check the
Icon LWC.
imageRef string To use a custom image, enter a URL.

company 265
OmniStudio

obj string Specifies the obj containing the data for the fields
(Default:
slds)
Example c-slds-header Component
<c-slds-header
theme={theme}
icon-size="large"
>
</c-slds-header>
Available Event Handlers

handleEdit()
An event that expects params detail.message to be set to the header when in edit mode.
handleSave()
An event that resets the header after editing is done.
Spinner Lightning Web Component ReadMe

This page contains a Spinner LWC ReadMe for each Vlocity release.

The Spinner Lightning Web Component displays an animated image that indicates a feature is loading. You
can display this component when retrieving data or when an operation takes time to complete.
Available c-spinner Attributes

alternative-text string Adds alternative text that describes the purpose for the wait.
extraclass string Adds a class to the parent of the input element. To add multiple
classtwo'.
extraouterclass string Adds a class to the outer container of the spinner element. To add
'classone classtwo'. You can add a class with this attribute to
increase background color opacity.

company 266
OmniStudio

message string Adds a message displayed underneath the spinner.
messageclass string Adds class to the message displayed underneath the spinner.
size small, string Sets the size of the spinner.
medium, large
(Default:
small)
theme slds, nds string Defines the styles that is used on the element. slds or nds.
(Default: slds)
variant base, brand, string Changes the appearance of the spinner.
inverse
Example c-spinner Component
<c-spinner
variant="inverse"
alternative-text="Loading content..."
size="medium"
></c-spinner>

alternative-text string Adds alternative text that describes the purpose for the wait.
extraclass string Adds a class to the parent of the input element. To add multiple
classtwo'.
extraouterclass string Adds a class to the outer container of the spinner element. To
add multiple classes, use a space to separate each class, such
as 'classone classtwo'. You can add a class with this attribute to
increase background color opacity.
size small, medium, string Sets the size of the spinner.
large (Default:
medium)
theme slds, nds string Defines the styles that is used on the element. slds or nds.
(Default: slds)
variant base, brand, string Changes the appearance of the spinner.
inverse (Default:
base)
<c-spinner
variant="inverse"

company 267
OmniStudio
size="medium"
></c-spinner>

alternative-text string Adds alternative text
that describes the
purpose for the wait.
parent of the input
element. To add
a space to separate
each class, such as
extraouterclass string Adds a class to the
outer container of the
spinner element. To
use a space to
such as `classone
classtwo'. You can
add a class with this
attribute to increase
background color
opacity.
size small, medium, large string Sets the size of the
(Default: medium) spinner.
theme slds, nds (Default: string Defines the styles that
slds) is used on the
element. slds or nds.
variant base, brand, inverse string Changes the
(Default: base) appearance of the
spinner.
<c-spinner
variant="inverse"
size="medium"
></c-spinner>
Styles Lightning Web Component ReadMe

This page contains a Styles LWC ReadMe for each Vlocity release.

company 268
OmniStudio
The Styles Lightning Web Component specifies the theme and gets the base CSS for that theme.
Available c-styles Attributes

url string Specifies the CSS resource URL.
theme slds, nds (Default: Theme defines the style of the form; we have slds and nds as
slds) options.
Example c-styles Component
<c-styles theme={theme}> .... </c-styles>
The Styles Lightning Web Component specifies the theme and gets the base CSS for that theme.
Available c-styles Attributes

url string Specifies the CSS
resource URL.
theme slds, nds (Default: ???? Theme defines
slds) the style of the form;
we have slds and nds
as options.
<c-styles theme={theme}> .... </c-styles>
Tab Lightning Web Component ReadMe

This page contains a Tab LWC ReadMe for each Vlocity release.
The Tab Lightning Web Component keeps related content in a single container. The tab content displays
when a user clicks the tab. This component is a base element of the c-tabset component.
Available c-tab Attributes

label string yes Sets the visible text for the tab header.
title string Specifies text that displays in a tooltip over the tab content.
icon-name (Format: string Sets icon for the tab. Must use utility icons only. See
utility:down) Lightning Design System Icons.
icon-assistive- string Sets the alternative text for the icon specified by icon-name.
text

company 269
OmniStudio

display-tab true, false boolean To hide the tab title, set to false.
(Default: true)
tabId unique id Sets unique id to the tab, if provided this will be returned
with the tabchange event result.
Example c-tab Component

The c-tab is defined as an element inside c-tabset and has its own id so user can update and modify the
content directly.
<c-tabset id="tabTest" class="via-slds" active-tab-value="1">

<c-tab title="Item 1">
<slot name="content">Item Content 1</slot>
</c-tab>
</c-tab>
</c-tabs>
The Tab Lightning Web Component keeps related content in a single container. The tab content displays
when a user clicks the tab. This component is a base element of the c-tabset component.
Available c-tab Attributes

label string yes Sets the visible text
for the tab header.
title string Specifies text that
displays in a tooltip
over the tab content.
icon-name (Format: utility:down) string Sets icon for the tab.
Must use utility icons
only. See Lightning
Design System Icons.
icon-assistive-text string Sets the alternative
text for the icon
specified by icon-
name.
display-tab true, false (Default: boolean To hide the tab title,
true) set to false.
Example c-tab Component

The c-tab is defined as an element inside c-tabset and has its own id so user can update and modify the
content directly.


company 270
OmniStudio

</c-tab>
</c-tab>
</c-tabs>
Tabset Lightning Web Component ReadMe

This page contains a Tabset LWC ReadMe for each Vlocity release.

The Tabset Lightning Web Component displays a tabbed container with multiple content areas, only one of
which is visible at a time. A tabset can hold multiple c-tab components. The first tab is activated by
default.
Available c-tabset Attributes

active-tab-value tab index string Specifies which tab is active by default. use the
position (index) of a c-tabcomponent. By default,
the first tab is active.
hideTabNav true, false (Default: boolean To hide the tab navigation bar, set to true.
false)
theme slds, nds (Default: Sets the theme for the tabset component.
slds)
variant standard, scoped, Sets the appearance of the tabset.
vertical, default
(Default: default)

ontabchange
Triggers when the tab is changed, it returns the tabIndex and tab-id, if tab-id is passed on c-tab, if tab-id is
not specified only tabIndex will be returned as result.


</c-tab>
</c-tab>
</c-tabset>

company 271
OmniStudio


<c-tabset id="tabTest" class="via-slds" active-tab-value="tabOne">
<c-tab id="tabOne" title="Item 1">
</c-tab>
<c-tab id="tabTwo" title="Item 2">
</c-tab>
</c-tabset>
default.

active-tab- tab index string Specifies which tab is active by default. use the
value position (index) of a c-tab component. By default,
the first tab is active.
theme slds, nds (Default: Sets the theme for the tabset component.
slds)
variant standard, scoped, Sets the appearance of the tabset.
vertical, default
(Default: default)

ontabchange
Triggers when the tab is changed, it returns the tabIndex and tab-id, if tab-id is passed on c-tab, if tab-id is
not specified only tabIndex will be returned as result.

</c-tab>
</c-tab>
</c-tabset>

company 272
OmniStudio

</c-tab>
</c-tab>
</c-tabset>
default.

active-tab-value tab index or tab id string Specifies which
tab is active by
default. Use the id
of a c-tab
component or use
the position
(index) of a c-
tab component.
By default, the
first tab is active.
theme slds, nds (Default: Sets the theme
slds) for the tabset
component.
variant standard, scoped, Sets the
vertical, default appearance of the
(Default: default) tabset.

</c-tab>
</c-tab>
</c-tabset>


company 273
OmniStudio

</c-tab>
</c-tab>
</c-tabset>
Textarea Lightning Web Component ReadMe

This page contains a Textarea LWC ReadMe for each Vlocity release.
The Textarea Lightning Web Component creates an HTML textarea element for entering multi-line text
input. A text area holds an unlimited number of characters.
Available c-textarea Attributes
Attrubute Value Type Required Description

label string yes Adds a title for the textarea element.
placeholder string Adds text to inside the textarea that displayed when the field is
empty, prompting the user for a valid entry.
name string Specifies the name of the textarea element.
message-when-bad- string Displays an error message when a bad input is detected.
input
message-when-too- string Displays an error message when the value is too short.
short
message-when-too- string Displays an error message when the value is too long.
long
message-when- string Displays an error message when the value is missing.
value-missing
access-key string The keyboard shortcut for input field.
max-length number The maximum number of characters allowed in the textarea.
min-length Sets the minimum number of characters allowed in the
textarea.
value string Sets the value of the textarea input.
disabled If present, the textarea field is disabled and users cannot
interact with it.
read-only If present, the textarea field is read-only and user cannot edit
it.
required If present, user must fill out textarea in order to submit the
form.
variant standard, string Changes the appearance of the input field.
label-
hidden
(Default:
standard)
validity Sets the validity states for the textarea element, with respect to

company 274
OmniStudio

field-level-help string To provide an informational tooltip on the textarea input field,
set this attribute.
theme slds, nds, string string Sets the theme for the textarea component.
(Default:
slds)
extraclass Adds a class to the textarea input element. To add multiple
height Sets the height of the textarea.
Example c-textarea Component
<c-textarea
label="Message When Value Long(30 char)"
max-length="30"
message-when-too-long="Value is too long."
placeholder="Enter Description..."
></c-textarea>
Available Methods
checkValidity()
Returns the valid attribute value (Boolean) on the ValidityState object.
reportValidity()
setCustomValidity()
focus()
blur()

company 275
OmniStudio
The Textarea Lightning Web Component creates an HTML textarea element for entering multi-line text
input. A text area holds an unlimited number of characters.
Available c-textarea Attributes

label string yes Adds a title for the
textarea element.
placeholder string Adds text to inside the
textarea that
displayed when the
field is empty,
prompting the user for
a valid entry.
the textarea element.
message-when-bad- string Displays an error
input message when a bad
input is detected.
message-when-too- string Displays an error
short message when the
value is too short.
message-when-too- string Displays an error
long message when the
value is too long.
message-when-value- string Displays an error
missing message when the
value is missing.
access-key string The keyboard shortcut
for input field.
max-length number The maximum number
of characters allowed
in the textarea.
min-length Sets the minimum
allowed in the
textarea.
value string Sets the value of the
textarea input.
disabled If present, the textarea
field is disabled and
with it.
read-only If present, the textarea
field is read-only and
user cannot edit it.
required If present, user must
fill out textarea in
order to submit the
form.

company 276
OmniStudio

variant standard, label-hidden string Changes the
(Default: standard) appearance of the
input field.
validity Sets the validity states
for the textarea
element, with respect
to constraint
validation.
field-level-help string To provide an
informational tooltip
on the textarea input
field, set this attribute.
theme slds, nds, (Default: string string Sets the theme for the
slds) textarea component.
Example c-textarea Component
<c-textarea
label="Message When Value Long(30 char)"
max-length="30"
message-when-too-long="Value is too long."
placeholder="Enter Description..."
></c-textarea>
Available Methods
checkValidity()
Returns the valid attribute value (Boolean) on the ValidityState object.
reportValidity()
setCustomValidity()
focus()
blur()

company 277
OmniStudio
TimePicker Lightning Web Component ReadMe

This page contains a TimePicker LWC ReadMe for each Vlocity release.

The TimePicker Lightning Web Component is a graphical user interface widget that allows the user to
select a time from a list of options.
Available c-time-picker Attributes

theme slds, nds Sets the theme for this component.
(Default:
slds)
label string Adds the text label for the input field.
disabled no value string To disable the input field so users cannot interact with it, set this
attribute.
required no value string If the input field must be filled out before the form is submitted,
(See set this attribute.
example
code)
read-only no value string To prevent users from editing the input field, set this attribute.
placeholder string Displays text when the input field is empty to prompt the user for
a valid entry.
min string Sets the minimum acceptable value for the input field.
max string Sets the maximum acceptable value for the input field.
message-when- string Adds an error message to be displayed when the value is
value-missing missing. Default: This field is required.
message-when- string Adds an error message to be displayed when a bad input is
bad-input detected. Default : This field is not valid.
name string Specifies the name of an input element.
icon-url string Defines the URL to get the icon. Default points to the relevant
slds icon URL.
field-level-help string Adds a help-text to the input element.
format (Default: string Sets the format for the time. View format options here
HH:mm)
locale-format string Sets the locale. See Day.js locales here. Refer to the custom
label cmpDayJsLocaleFormats
interval number Sets the interval between the options in the time dropdown.
output-format (Default: string Sets the format of the output when output-type is string. View
HH:mm) format options here
output-type string, date string Sets the time output type. If set to date, returns time as a date
(Default: object.
string)
hide-icon true, false boolean Specifies if the time picker icon should be hidden.
(Default:
false)

company 278
OmniStudio

display-value string Read-only property that displays the formatted property value.
Example c-time-picker Component
<c-time-picker
label="Time (max : 2:00 pm, min : 10:00 pm)"
min="14:00"
max="10:00"
placeholder="Select Time"
required
output-type="date"
hide-icon=false
>
</c-time-picker>
Label Slot Usage

the input's label.
Example ---
<c-time-picker
min="14:00"
max="10:00"
required
output-type="date"
hide-icon=false
>
</c-time-picker>

theme slds, nds Sets the theme for this component.
(Default: slds)
label string Adds the text label for the input field.

company 279
OmniStudio

disabled no value string To disable input field so users cannot interact with it, set this
attribute.
required no value (See string If input field must be filled out before the form is submitted,
example set this attribute.
code)
read-only no value string To prevent users from editing input field, set this attribute.
placeholder string Displays text when input field is empty to prompt the user for
a valid entry.
min string Sets the minimum acceptable value for the input field.
max string Sets the maximum acceptable value for the input field.
message-when- string Adds an error message to be displayed when the value is
value-missing missing. Default: This field is required.
message-when- string Adds an error message to be displayed when a bad input is
bad-input detected. Default : This field is not valid.
name string Specifies the name of an input element.
icon-url string Defines the url to get the icon. Default points to the relevant
slds icon url.
field-level-help string Adds a help-text to the input element.
format (Default: string Sets the format for the time. View format options here
HH:mm)
interval number Sets the interval between the options in the time dropdown.
output-format (Default: string Sets the format of the output when output-type is string. View
HH:mm) format options here
output-type string, date string Sets the time output type. If set to date, returns time as date
(Default: object.
string)
hide-icon true, false boolean Specifies if time picker icon should be hidden.
(Default:
false)
property value.
<c-time-picker
min="14:00"
max="10:00"
required
output-type="date"
hide-icon = false
>
</c-time-picker>

company 280
OmniStudio

theme slds, nds (Default: Sets the theme for this
slds) component.
label string Adds the text label for
the input field.
disabled no value string To disable input field
so users cannot
interact with it, set this
attribute.
required no value (See string If input field must be
example code) filled out before the
form is submitted, set
this attribute.
read-only no value string To prevent users from
editing input field, set
this attribute.
placeholder string Displays text when
input field is empty to
prompt the user for a
valid entry.
min string Sets the minimum
the input field.
max string Sets the maximum
the input field.
message-when-value- string Adds an error
missing message to be
displayed when the
value is missing.
Default: This field is
required.
message-when-bad- string Adds an error
input message to be
displayed when a bad
input is detected.
Default : This field is
not valid.
an input element.
icon-url string Defines the url to get
the icon. Default
points to the relevant
slds icon url.
field-level-help string Adds a help-text to the
input element.

company 281
OmniStudio

format (Default: HH:mm) string Sets the format for the
time. View format
options here
interval number Sets the interval
between the options in
the time dropdown.
output-format (Default: HH:mm) string Sets the format of the
output when output-
type is string. View
format optionshttps://
date-fns.org/v2.0.0-
alpha.31/docs/
format[here]
output-type string, date (Default: string Sets the time output
string) type. If set to date,
returns time as date
object.
<c-time-picker
min="14:00"
max="10:00"
required
output-type="date"
>
</c-time-picker>
Toast Lightning Web Component ReadMe

This page contains a Toast LWC ReadMe for each Vlocity release.
The Toast Lightning Web Component is a feedback and confirmation tool run after the user takes an action.
Available c-toast Attributes

title string Adds a title to the toast component.
message string yes Sets the message to display.
theme slds, nds (Default: string Sets the theme for the toat component.
slds)
fixed-width string Adds a fixed width to the toast container element.
styletype info, warning, string Sets the styling based on the type supported by the selected
succeess, error slds or nds theme.
(Default: info)

company 282
OmniStudio

duration time in milliseconds number To automatically remove toast after specified time, set this
attribute.
extraclass string Adds a class to the container element. To add multiple classes,
use a space to separate each class, such as 'classone
classtwo'.
Example c-toast Component
<c-toast
title="Information"
theme="nds"
styletype="error"
message="This is an info toast"
duration="3000"
></c-toast>
The Toast Lightning Web Component is a feedback and confirmation tool run after the user takes an action.
Available c-toast Attributes

toast component.
message string yes Sets the message to
display.
slds) toat component.
fixed-width string Adds a fixed width to
the toast container
element.
styletype info, warning, string Sets the styling based
succeess, error on the type supported
(Default: info) by the selected slds or
nds theme.
duration time in milliseconds number To automatically
remove toast after
specified time, set this
attribute.
container element. To
use a space to
such as `classone
classtwo'.

company 283
OmniStudio
Example c-toast Component

<c-toast
title="Information"
theme="nds"
styletype="error"
message="This is an info toast"
duration="3000"
></c-toast>
Toggle Lightning Web Component ReadMe

This page contains a Toggle LWC ReadMe for each Vlocity release.

The Toggle Lightning Web Component enables a user to pick between two states, enable or disable an
option, or select multiple options. The Toggle LWC supports attributes available in the CheckboxGroup
Available c-toggle Attributes

checked-label string Sets the label to display when the toggle is checked. Applies
when type is set to 'icon', 'statefulButton', or 'dualStatefulButton'.
icon-name (Default: string Sets the icon of the toggle. Applies when type is set to
utility:check) 'statefulIcon'.
icon-on-focus (Default: string Sets the toggle icon to display on hover of the element. Applies
utility:check) when type is set to 'statefulButton'.
label-on-focus string Sets the toggle label to use on hover of element. Applies when
type is set to 'statefulButton'.
toggle-disabled- (Default: string Sets the toggle label to display when the toggle is unchecked.
label Enabled) Applies when type is set to 'toggle'.
toggle-enabled- (Default: string Sets the toggle label to display when the toggle is checked.
label Enabled) Applies when type is set to 'toggle'.
type button, string yes Sets the type of toggle element to display.
checkbox, icon
(Default:
checkbox)
unchecked-label string Sets the label to display when the toggle is unchecked. Applies
When type is set to 'icon', 'statefulButton', or
'dualStatefulButton'.
variant string Sets the style of the toggle button based on the type supported
by the chosen theme. For example, 'success', 'brand', and so
on.
Example c-toggle Component

<c-toggle
name="vehicle"
value="bike"

company 284
OmniStudio
></c-toggle>
Label Slot Usage

To dynamically insert markup next to the input's label, add a named slot (name = label).
<c-toggle
name="vehicle"
value="bike"
>
</c-toggle>
Available Methods
Supports all methods available in the CheckboxGroup Lightning Web Component.
Tooltip Lightning Web Component ReadMe

This page contains a Tooltip LWC ReadMe for each Vlocity release.

The Tooltip Lightning Web Component displays a small amount of contextual information about an element
on the screen when a user hovers or focuses on an icon next to the element. Information can either be
plain text or custom markup (HTML).
Available c-tooltip Attributes

arrowposition top, bottom, left, right (See string Sets the arrow (nubbin) position. There are three ways
description for more to provide arrow position: top, top-left, or top-left-corner.
options). (Default: bottom-
left)
button-icon true, false (Default: true) string Creates a button Icon type tooltip.
content string yes Adds the text to display in the tooltip. If custom markup
exists, content text is ignored. See Example Custom
Markup on this page.
'classone classtwo'. This attribute can also override
classes specified by arrowposition.
icon-name (Format: standard:arrow) string Sets the icon for the tooltip. See SLDS icons.
(Default: utility:info)

company 285
OmniStudio

icon-size xx-small, x-small, small, string Sets the size of the icon.
medium, large. (Default: xx-
small)
icon-url string Overrides the default URL of the svg resource.
icon-variant inverse, warning, error, string To change the appearance of a utility icon, set this
default (Default: default) attribute. Use the 'inverse' variant to implement a white
fill on dark backgrounds for utility icons.
theme slds, nds (Default: slds) Sets the theme for the tooltip component.
Example c-tooltip Component
<c-tooltip
content="This is a test message"
arrowposition="top-right"
></c-tooltip>
Example Custom Markup
<c-tooltip
theme="{theme}"
content="This is a demo help text"
>
<div>
<h1>This is Custom markup</h1>
<span>You can put HTML inside the tooltip</span>
<c-button variant="brand" label="This is a Button"></c-button>
</div>
</c-tooltip>

The Tooltip Lightning Web Component displays a small amount of contextual information about an element
on the screen when a user hovers or focuses on an icon next to the element. Information can either be
plain text or custom markup (HTML).

description for more to provide arrow position: top, top-left, or top-left-corner.
options). (Default: bottom-
left)
content string yes Adds the text to display in the tooltip. If custom markup
exists, content text is ignored. See Example Custom
Markup on this page.

company 286
OmniStudio

medium, large. (Default:
xx-small)
<c-tooltip
></c-tooltip>
Example Custom Markup
<c-tooltip
theme="{theme}"
content="This is a demo helptextsssss"
>
<div>
<h1>This is Custom markup</h1>
<span>You can put HTML inside the tooltip</span>
<c-button variant="brand" label="This is a Button"></c-button>
</div>
</c-tooltip>
The Tooltip Lightning Web Component displays an icon with a popover containing a small amount of text
describing an element on screen. The popover displays on hover or on focus of the icon.

company 287
OmniStudio

description for more to provide arrow position: top, top-left, or top-left-
options). (Default: bottom- corner.
left)
content string yes Adds the text to display in the tooltip.
medium, large. (Default: xx-
small)
<c-tooltip
></c-tooltip>
The Tooltip Lightning Web Component displays an icon with a popover containing a small amount of text
describing an element on screen. The popover displays on hover or on focus of the icon.

arrowposition top, bottom, left, right string Sets the arrow
(See description for (nubbin) position.
more options). There are three ways
(Default: bottom-left) to provide arrow
position: top, top-left,
or top-left-corner.
content string yes Adds the text to
display in the tooltip.

company 288
OmniStudio

table element. To add
a space to separate
each class, such as
This attribute can also
override classes
specified by
arrowposition.
standard:arrow) tooltip. See SLDS
(Default: utility:info) icons.
icon-size xx-small, x-small, string Sets the size of the
small, medium, large. icon.
(Default: xx-small)
icon-url string Overrides the default
URL of the svg
resource.
icon-variant inverse, warning, string To change the
error, default (Default: appearance of a utility
default) icon, set this attribute.
Use the ìnverse'
variant to implement a
white fill on dark
backgrounds for utility
icons.
slds) tooltip component.
<c-tooltip
></c-tooltip>
Tree Lightning Web Component ReadMe

This page contains a Tree LWC ReadMe for each Vlocity release.
The Tree Lightning Web Component displays a visualization of a structural hierarchy, such as a sitemap for
a website or a role hierarchy in an organization. Items display as hyperlinks. Items in the hierarchy can be
nested. Items with nested items are also known as branches.
Available c-tree Attributes

header string Sets the text for the tree heading.

company 289
OmniStudio

items array Adds the data for the tree. The items attribute is an array of key-value
pairs that describe the tree. See Available items Attributes.
icon-url url string Overrides the default URL of the svg resource.
theme slds, nds string Sets the theme for the tree component.
(Default: slds)
Example c-tree Component
<c-tree
theme="{theme}"
items="{treeData}"
onselect="{handleTreeSelect}"
>
</c-tree>
Available items Attributes

label string yes Sets the title and label for the hyperlink.
metatext string Adds text to provide users with supplemental information and aid with
identification or disambiguation.
name string yes Defines the item's unique name for the onselect event handler to return
the tree item the user clicks.
href string Sets the URL for the item link.
expanded (Default: To display nested (branched) items, set to true.
false)
disabled (Default: To disable branch, set to true. A disabled branch cannot be expanded.
false)
Event Listener
onselect
Fires when a tree item is selected and before navigating to a given hyperlink. Returns the item object.
The Tree Lightning Web Component displays visualization of a structural hierarchy, such as a sitemap for a
website or a role hierarchy in an organization. Items display as hyperlinks. Items in the hierarchy can be
nested. Items with nested items are also known as branches.
Available c-tree Attributes

header string Sets the text for the
tree heading.

company 290
OmniStudio

items array Adds the data for the
tree. The items
attribute is an array of
key-value pairs that
describe the tree. See
Available items
Attributes.
icon-url url string Overrides the default
URL of the svg
resource.
slds) tree component.
<c-tree
theme="{theme}"
items="{treeData}"
onselect="{handleTreeSelect}"
>
</c-tree>
Available items Attributes

label string yes Sets the title and label
for the hyperlink.
metatext string Adds text to provide
users with
supplemental
information and aid
with identification or
disambiguation.
name string yes Defines the item’s
unique name for
theònselect` event
handler to return the
tree item the user
clicks.
href string Sets the URL for the
item link.
expanded (Default: false) To display nested
(branched) items, set
to true.
disabled (Default: false) To disable branch, set
to true. A disabled
branch cannot be
expanded.

company 291
OmniStudio
Event Listener
onselect
Fires when a tree item is selected and before navigating to a given hyperlink. Returns the item object.
TreeItem Lightning Web Component ReadMe

This page contains a TreeItem LWC ReadMe for each Vlocity release.
The TreeItem Lightning Web Component defines the individual items of a tree component.
Available c-tree-item Attributes

theme slds, nds string Sets the theme for the tree component.
(Default: slds)
items array The items attribute is an array of key-value pairs that describes the
treeItem, which can have nested trees inside itself.
index 1,2... number A unique number to identify the tree node.
<c-tree-item icon-url={iconUrl} items={items} index="0"></c-tree-item>
Typeahead Lightning Web Component ReadMe

This page contains a Typeahead LWC ReadMe for each Vlocity release.
c/typeahead
Slots: iconLeft, iconRight, lastItem
Example
<c-typeahead label={string}
options={array}
theme={"slds"|"nds"}
onchange={changeHandler}
onkeyup={keyupHandler}
icon-name-left={string}
icon-name-right={string}
required={boolean}
disable-filter={boolean}
remote-source={boolean}>
</c-typeahead>
• c/typeahead
• .disableFilter: boolean

company 292
OmniStudio
• .remoteSource : boolean
• isLookupVisible : boolean
• .input : HTMLInputElement
• .firstRender : boolean
• ._isFocused : boolean
• ._validity : ValidityState
• ._progressBar : ProgressBar
• .focusChange(evt)
• .showLookup(isVisible)
• .selectOption(evt)
• .lastItemChange(evt)
• .updateValue(event)
• .showHelpMessageIfInvalid()
• .progressStart()
• .progressComplete()
• .progressReset()
typeahead.disableFilter : boolean
• When boolean attribute disable-filter is applied, then no filtering will be appliedto the options array on
keyup. For use when backend system is filtering.
Kind: instance property of c/typeahead.
Scope: api (public)
typeahead.remoteSource : boolean
• When boolean attribute remote-source is applied a progress bar will be displayed while options are
retrieved.
Scope: api (public)
typeahead.isLookupVisible : boolean
• Controls the display of the typeahead's combo box.
Scope: track (private)
typeahead.input : HTMLInputElement
• A reference to the embedded html input. Set in renderedCallback.

company 293
OmniStudio
Scope: private
typeahead.firstRender : boolean
• Used to control the flow of renderedCallback.
Scope: private
typeahead._isFocused : boolean
• Used in calculating the visibility of the lookup list.
Scope: private
typeahead._validity : ValidityState
• A reference to the embedded html input's validity state.
typeahead._progressBar : ProgressBar
typeahead.focusChange(evt)
Event handler covering both focus and blur events.
Kind: instance method of c/typeahead
Scope: private
Param Type
evt Event
typeahead.showLookup(isVisible)
Method which controls the visibility of lookup.
Kind: instance method of c/typeahead

isVisible boolean When true lookup list will be visible.
typeahead.selectOption(evt)
Kind: instance method of c/typeahead.

company 294
OmniStudio
Param Type
evt MouseEvent
typeahead.lastItemChange(evt)
Hides the last item element when no content is passed into the lastItem slot.
Scope: private
Param Type
evt Event
typeahead.updateValue(event)
Keeps the _value up to date with the value of the input.
Param Type
event KeyboardEvent
typeahead.progressStart()
Sets progress bar visibility, and starts progress.
Scope: api (public)
typeahead.progressComplete()
Sets progress-bar's progress to 100%
Scope: private
typeahead.progressReset()
Hides the progress bar and resets progress.
Scope: private
The Typeahead Lightning Web Component supplies hints or a list of possible choices based on the text the
user enters while filling out a form or performing a search.

company 295
OmniStudio
Available c-typeahead Attributes

typeahead
component.
data array yes Contains all available
search options.
slds) typeahed component.
value string Adds a pre-populated
the value to
typeahead input.
label string string Sets label of the
typeahead element.
placeholder string string Sets the placeholder
of the typeahead
element.
name string string This attribute is for
internal use only. The
form element uses
this attribute for
syncing.
icon-name-left string Sets the left icon for
the typeahead
component.
icon-name-right string Sets the right icon for
the typeahead
component.
icon-size xx-small, x-small, string Sets the size of icon
small, medium, large for the typeahead
component.
Example c-typeahead Component
<c-typeahead
value="Morin"
data='["Morin", "Banks", "Olivia", "Morina", "Banker", "Adeola"]'
label="Options"
placeholder="Select Value"
></c:typeahead>
Utility Functions for Lightning Web Components ReadMe

This page contains a Utility Functions for Lightning web components ReadMe for each Vlocity release.
isRtl
The isRTL function enables 'right-to-left' scripts.

company 296
OmniStudio
Supported languages
• Arabic
• Aramaic
• Dhivehi, Maldivian
• Hebrew
• Kurdish (Sorani)
• Persian, Farsi
• Urdu Steps to implement isRtl
Implementation
1. Set isRTL by adding the dir attribute inside a parent 'div' element.
<div dir={dir}></div>
2. Assign the value (returned from isRTL function) to the respective property.
this.dir = isRtl();
createMask
The createMask function enables masking for input fields.
Available masks
• dd-ddd-ddd
• yyyy-mm-dd
• dd-mm-yyyy
• yyyy/mm/dd
• dd/mm/yyyy
Example custom masks

To add a custom mask, use '#' keyword to represent the digits.
• value = "12345678901234" mask="+7(###)###-##-##" mask-range ="10"

• output: +7(123)456-78-90
• value = "1234123412341234" mask="#### ####" mask-range ="16"
• output: 1234 1234 1234 1234
• value = "1234123412341234" mask="$###,###"
• output: $1234,1234,1234,1234
• value = "123456789" mask="$##.##"
• output: $1234567.89
• value = "123456789" mask="##.##%"
• output: $1234567.89%
Implementation
Call createMask function on 'keyup' event of input.

company 297
OmniStudio
this.value = creatMask(event)
fetchCustomLabels
The fetchCustomLabels function gets custom labels, and accepts one required parameter and two
optional parameters.
Implementation
1. Pass an array of labels

2. (Optional) Specify a language.
• The function returns the translations for the labels array based on the language. If language is not
passed the function will use the language from the userprofile.
3. (Optional) Specify default values for labels.
• If there are no translations available for a label, a default value is returned. However, if an array of
labels are passed, and any one or more labels do not have translations and no default values are
defined, then an error is thrown. The error displays in the console, points to the faulty label, and
returns the label key as the translation.
Note The labels array and the default values must be of the same length so that they are mapped correctly.
If labels and values are incorrectly mapped, the default values are not considered.
Example fetchCustomLabels function
fetchCustomLabels(["DeleteLayout", "Preview", "DRMapperFilter"], "en-US",

[/** Default values array **/]).then(
data => {
console.log(data);
});
Example fetchCustomLabels output

The output is an object with a key-value pair. The key is the label and the value is the translation in the
provided language.
{
DRMapperFilter: "Filter"
DeleteLayout: "Delete Layout?"
Preview: "Preview"
isRtl
The isRTL function enables `right-to-left' scripts.

company 298
OmniStudio
Supported languages
• Arabic
• Aramaic
• Dhivehi, Maldivian
• Hebrew
• Kurdish (Sorani)
• Persian, Farsi
• Urdu Steps to implement isRtl
Implementation
1. Set isRTL by adding the dir attribute inside a parent `div' element.
<div dir={dir}></div>
1. Assign the value (returned from isRTL function) to the respective property.
this.dir == isRtl();
createMask
The createMask function enables masking for input fields.
Available masks
• dd-ddd-ddd
• yyyy-mm-dd
• dd-mm-yyyy
• yyyy/mm/dd
• dd/mm/yyyy
Example custom masks

To add a custom mask, use `#' keyword to represent the digits.
• value == 12345678901234'' mask=+7()--'' mask-range =``10''

• output: +7(123)456-78-90
• value == 1234123412341234'' mask= # #'' mask-range =``16''
• output: 1234 1234 1234 1234
• value == 1234123412341234'' mask=$,''
• output: $1234,1234,1234,1234
• value == 123456789'' mask=$.''
• output: $1234567.89
• value == 123456789'' mask= .%''
• output: $1234567.89%

company 299
OmniStudio
Implementation
Call createMask function on `keyup' event of input.
this.value == creatMask(event)
fetchCustomLabels
The fetchCustomLabels function gets custom labels, and accepts one required parameter and two
optional parameters.
Implementation
1. Pass an array of labels

2. (Optional) Specify a language.
• The function returns the translations for the labels array based on the language. If language is not
passed the function will use the language from the userprofile.
3. (Optional) Specify default values for labels.
• If there are no translations available for a label, a default value is returned. However, if an array of
labels are passed, and any one or more labels do not have translations and no default values are
defined, then an error is thrown. The error displays in the console, points to the faulty label, and
returns the label key as the translation.
Note The labels array and the default values must be of the same length so that they are mapped correctly.
If labels and values are incorrectly mapped, the default values are not considered.
Example fetchCustomLabels function
fetchCustomLabels(["DeleteLayout", "Preview", "DRMapperFilter"], "en-US",

[/** Default values array **/]).then(
data => {
console.log(data);
});
Example fetchCustomLabels output

The output is an object with a key-value pair. The key is the label and the value is the translation in the
provided language.
{
DRMapperFilter: "Filter"
DeleteLayout: "Delete Layout?"
Preview: "Preview"
Wizard Lightning Web Component ReadMe

This page contains the Wizard LWC ReadMe for each Vlocity release.

company 300
OmniStudio

The Wizard Lightning Web Component displays a modal that enables navigating between steps in a
process and displays a progress bar that shows where the user is in the process. The Wizard LWC
supports custom labels.
Available Attributes

header string This sets the header of the wizard component.
theme slds, nds (Default: slds) string Specifies the theme to use
Example of c-wizard component
<c-wizard header="Wizard Component">

<c-wizard-item label="Step1">...</c-wizard-item>
</div>
</c-wizard>

Close cmpClose Assistive text for the close icon.
Cancel cmpCancel Text for the cancel button.
Back cmpBack Text for the button that returns user to previous step.
Step cmpStep Text visible on mouse over of a step icon on the progress bar in the wizard.
Next cmpNext Text for the button that navigates to the next step in the wizard.
Save cmpSave Text for the button that saves the process executed in the wizard.
Wizard Item Lightning Web Component ReadMe

This page contains the Wizard Item LWC ReadMe for each Vlocity release.

The WizardItem Lightning Web Component creates the template for each wizard item inside the Wizard
Available c-wizard-item Attributes

wizardItemId string Sets the Id for the wizardItem component. The Id must be unique.
label string yes Sets the label for the wizardItem component. This needs to be
unique.

company 301
OmniStudio

wizardItemWrapperClass string Sets one or more classes, separated by spaces, for the div that
wraps around the content.
Example of c-wizard-item Component
<c-wizard header="Wizard Component">

<c-wizard-item label="Step1">
<div slot="wizarditemcontent">...</div>
</c-wizard-item>
</c-wizard-item>
</c-wizard-item>
</div>
</c-wizard>
OmniScripts
An OmniScript is an omnichannel customer engagement and a business tool built on the Salesforce
platform. OmniScripts allow you to craft dynamic customer interactions without code and deploy to multiple
channels and devices. Administrators can define a script once and then deploy the script within a
Salesforce application or on a web page.
Create OmniScripts to guide users through sales and service processes with fast, personalized responses,
and seamless integration to enterprise applications and data.
LWC OmniScripts
LWC OmniScripts enable you to enhance an existing OmniScript element or add custom functionality to the
OmniScript by using custom Lightning web components. For information on Vlocity's Lightning web
components, see Vlocity Lightning Web Components.
NOTE
It is possible to switch an OmniScript to either an LWC OmniScript or an Angular
OmniScript at any time. However, Angular OmniScripts and LWC OmniScripts do not
support the same components and functionalities. For more information on OmniScript's
Lightning web component support, see LWC OmniScript Considerations.

company 302
OmniStudio
LWC OmniScript Designer Overview

Beginning with the Vlocity Insurance and Health Spring '20, the Vlocity LWC OmniScript Designer enables
you to preview dynamic web forms as you build them using a drag-and-drop interface with WYSIWYG
editing.
While building your script, preview elements inside steps, view property changes live, and access
contextual guidance with in-product help to discover and learn about functionality without leaving your
script. To access the LWC OmniScript Designer, see Access the LWC OmniScript Designer.
NOTE
The LWC OmniScript Designer is optimized for use in the Google Chrome browser.
Header (1), Navigation Panel (2), Canvas (3), Build panel (4), Properties panel (5), Setup panel (6),
Preview (7)
LWC OmniScript Designer Highlights

Notable features of the LWC OmniScript Designer include:
• Building your scripts on a wide and adjustable Canvas and instantly view changes made to element
properties.
• Repositioning, cloning, and adjusting the width of step elements along a 12-column horizontal grid.
• Accessing inactive elements and navigating between elements in high-level and detailed views from the
Navigation Panel.
• Configuring elements from the Properties panel.

company 303
OmniStudio
• Searching for and dragging elements onto the Canvas from the Build panel.
• Configuring script-wide settings from the Setup panel.
• Viewing contextual In-Product Help to discover and learn about elements and properties without leaving
your script.
• Previewing, testing, and debugging your script in Preview.
Header (1)
In the Header, view metadata and perform actions related to your script.
View high-level metadata about your OmniScript such as Type, SubType, Version, Language, and
Activation status.
In the actions navigation, toggle between design and preview mode, create a new version, activate or
deactivate the current version, edit basic settings, download your OmniScript, and get launch instructions.
Navigation Panel (2)

Access and navigate between active and inactive actions, steps, and step elements from the Navigation
Panel.
The Slide View tab provides a high-level view of the structure of large and complex scripts. Click on a slide to
open the Properties panel for a step or action.
The Tree View tab provides a detailed view of the script's structure. Click on a branch to open the Properties
panel for a step, element, or action.

company 304
OmniStudio
Canvas (3)
(A) Build your scripts by dragging elements from the Build panel onto the Canvas.
(B) Rearrange, clone, and delete elements as needed.
(C) Adjust the width of the Canvas from either side.
(D) Expand Steps to preview and configure elements. Adjust the width of elements on a 12-column grid,
and drag elements next to each other to automatically take up the remaining width of the grid.
(E) See how your scripts look with a Newport or Lightning theme without switching to Preview.
Build panel (4)

Drag action, display, function, group, and input elements, and entire OmniScripts from the Build panel onto
the Canvas to build your scripts.
Properties panel (5)

In the Properties panel, configure properties for action, display, function, group, input, and embeddable
OmniScript elements in the UI, or edit properties as JSON.
Setup panel (6)

Configure optional script-wide settings in the Setup panel.
Configure basic settings, Step Chart Options, Save Options, Knowledge Options, Error Messages,
Messaging Framework, and Lightning Design System Tokens in the UI, or edit properties as JSON.

company 305
OmniStudio
In-Product Help
In the Build, Properties, and Setup panels, access In-Product Help to view contextual information and
instruction about elements and properties without leaving your script.
(A) Access in-line information about properties with tooltips.
(B) View detailed documentation about element functionality with slide-out help panels.
Preview (7)

company 306
OmniStudio
Preview
(A) Preview your script in real-time with real data.
(B) Enter a record Id into the Context Id field and click refresh to preview your form with test data.
(C) Preview how an OmniScript appears on different devices, such as mobile, desktop, and tablet, with the
Preview Device feature.
(D) With the Theme dropdown, see how your OmniScript looks with a Lightning or Newport theme. If a
custom Newport style sheet is in the org, it overrides the out-of-the-box Newport style sheet.
(E) Reload the Canvas to reset data, and update the Data JSON and Action Debugger.
(F) The Data JSON provides an easy-to-read JSON format, which updates when you enter values in data
fields on the Canvas. Also, copy the entire JSON with just one click.
Debug
(G) The Action Debugger enables you to debug action requests and response data. Search for actions,
copy specific nodes in one click, and clear the console logs.
LWC OmniScript Designer Changes and Enhancements

Beginning with the Vlocity Insurance and Health Spring '20, the Vlocity LWC OmniScript Designer includes
new features and changes to existing features.
Changes in functionality affect how you must configure an LWC OmniScript and how an LWC OmniScript
performs. For information on unsupported elements, functionalities, and properties see LWC OmniScript
Designer Considerations.
Changes and Enhancements for Vlocity Insurance and Health and Vlocity CME Summer
'20
This section lists changes and enhancements specific to the LWC OmniScript Designer. To view LWC
OmniScript changes and enhancements that apply to both the LWC OmniScript Designer and the classic
designer, see LWC OmniScript Changes and Enhancements.
New Setup Properties
Section: Property Description

Enable Unload Warning The Enable Unload Warning property is available in LWC OmniScripts.
Styling Options: Custom Lightning Reference a static resource that contain a custom Lightning stylesheet. See Apply Custom
Styling Options: Custom Newport Reference a static resource that contain a custom Newport stylesheet. See Apply Custom
Styling Options: Scroll Animation Turn scroll animation on to add a smooth scroll animation to your OmniScript.
Cancel Options: Tracking Business Define a business category for a tracking entry. See Enable Tracking for Vlocity
Category Components.
Cancel Options: Tracking Business Define a business tracking event for a tracking entry. See Enable Tracking for Vlocity
Event Components.

company 307
OmniStudio
New Element Properties

These properties are now available in LWC OmniScript Designer
Tracking Business Category Define a business category for a tracking entry. See Enable Tracking for Vlocity Components.
Tracking Business Event Define a business tracking event for a tracking entry. See Enable Tracking for Vlocity Components.
Added Element Property Support

The LWC OmniScript Designer now supports these properties.
Edit Block Label LWC Edit Block's Cards and Long Cards modes support the Edit Block Label LWC Component
Component Override Override. See Extending the Edit Block Label LWC.
Edit Block New LWC Edit Block's Cards mode supports the Edit Block New LWC Component Override. See Extending
Component Override the Edit Block New LWC.
Use Continuation The Remote Action's Use Continuation property, which enables you to invoke apex classes that
return continuation objects, appears in the UI. See Remote Action.
Added Element Support

The LWC OmniScript Designer now supports these elements.
Element Description
Matrix Action Call a Calculation Procedure with specific inputs and retrieve a value.
PDF Action Fill and display PDFs using OmniScript data.
Set Errors Action Render validation messaging on one or more elements in a Step.
New Functionalities
The LWC OmniScript Designer now includes these functionalities.
Cancel Options Configure Cancel Options to direct users to different Salesforce experiences. See Enable and
Configure Cancel Functionality in an LWC OmniScript.
Download Off-Platform Download the OmniScript LWC to add it to OmniOut. See Run LWC OmniScripts Outside of Salesforce
LWC with LWC OmniOut.
Hide Conditional Hide conditional elements in the designer by checking the hide conditional elements checkbox in the
Elements canvas. See Conditionally Display Elements Using the Conditional View Property.

The LWC OmniScript Designer now supports these functionalities.
Edit Block SObject The SObject mapping section appears in the UI of the Edit Block properties.See Configuring an Edit
Mapping Block
Full-width Preview Collapse the Debug Panel to hide the Data JSON and Action debugger and preview the OmniScript
in a full-width page. See Preview an OmniScript in the LWC OmniScript Designer.

company 308
OmniStudio
Multi-Language: Custom Configure custom label translations from the LWC OmniScript Designer when designing a multi-
Label Translations language OmniScript. See Define Custom Label Translations in Multi-Language OmniScripts.
The File and Image elements no longer contain the Upload to Content Document checkbox property.
LWC OmniScripts always upload files and images to the content document. See Add a File or Image to
OmniScript.
Changes and Enhancements for Vlocity Insurance and Health Spring '20
Changes to UI Section Names
UI Section Name LWC OS UI Section Name Classic OS Description

Designer Designer
Build Available Components Lists available elements.
Canvas (not labeled) Structure Drag and drop elements here to build the script.
Navigation Panel (not labeled) n/a See higher-level and detailed views of the script
structure.
Setup Script Configuration Configure script-wide settings.
Functionality LWC OS Designer Classic OS Designer

Activating Inactive Inactive elements disappear from the canvas. To Activate inactive elements by clicking the
Elements activate inactive elements, from Tree View or Slide View element on the Structure Panel and activating it
of the Navigation Panel, select the element, then on the Properties panel.
activate it in the Properties panel. See a Activate
Elements in the LWC OmniScript Designer.
Cancel Add a cancel option to an LWC OmniScript by The Cancel link appears on every Step in an
configuring the Navigate Action. See Enable and OmniScript. Configure Cancel Options in the
Configure Cancel Functionality in an LWC OmniScript. Script Configuration tab. See Configuring the
Cancel Link in an OmniScript.
Conditional View In the Properties panel, from the Conditional Type In the Properties panel, from the Conditional
dropdown, select Show Element If True, Set Element To View dropdown, select Hide element if false, Set
Required If True, or Disable Read Only If True. element to readonly if false, or Set required
element to optional if false.
Data JSON In Preview, view Data JSON. Click clipboard icon to In Preview, click Data to view full data JSON.
copy full data JSON. Copy all or parts of the data JSON.
Editing Properties Property options are not visible when Editing Edit as JSON to edit all properties available in
as JSON for a Properties as JSON. To view the options in the JSON, the Properties UI.
Navigation Action first set the property in the property UI.
Step Elements Control the width and placement of elements in a step Drag-and-drop elements onto Structure Panel.
Widths on the canvas with the adjustable 12-column horizontal Control element widths with the Control Width
grid and drag-and-drop features. property in the Properties panel.
Theme View OmniScript in Newport or Lightning themes in View OmniScript in Newport or Lightning themes
Design and Preview modes. in Preview.
Update Preview Click the reload icon in Preview to update preview and In Preview, click Data, click Update to update
reset data fields. preview and reset data fields.

company 309
OmniStudio
Edit Block: SObject In the LWC OmniScript Designer, the SObject Mapping section does not work. To edit the SObject
Mapping mapping, use the classic designer. Once the edits are complete, switch back to the LWC OmniScript
Designer to test the mapping.
Functionality Unique to LWC OS Designer
Canvas Build and manage your script on an adjustable canvas.
In-Product Help Access In-Product Help to view contextual information and instruction about elements and properties without
leaving your script.
Preview Device Preview how your LWC OmniScript appears on mobile, desktop, and tablet with the Preview Device feature.
Slide View In the Slide View of the Navigation Panel, see a high-level overview of our OmniScript and navigate between active
and inactive elements.
Tree View In the Tree View of the Navigation Panel, see a detailed view of your OmniScript and navigate between active and
inactive elements.
Setup Properties Unique to LWC OS Designer
Property Description Example

Default Error Message Sets a script wide default error message that displays if an error Customize OmniScript Error
message for a specific action does not exist. Messages
Lightning Design System Override Salesforce's Lightning Design System design tokens. Customize SLDS Design
Design Token Overrides Tokens in OmniScript
Element Changes
• View elements in Build panel to drag onto the canvas to build your scripts.
• Search for elements in the Build panel.
LWC OmniScript Designer Considerations

The Vlocity LWC OmniScript Designer does not support all of the elements, functionalities, and deployment
options available in the Classic OmniScript Designer.
For information on new features and enhancements exclusive to the LWC OmniScript Designer, and newly
supported elements and properties, see LWC OmniScript Designer Changes and Enhancements.
Considerations for Vlocity Insurance and Health Summer '20

These elements, properties, and functionalities are not supported in Vlocity Insurance and Health Summer
'20.
Unsupported Functionality
• Copy individual Data JSON nodes in Preview

• Delete

company 310
OmniStudio
• Testing additional data when in Preview

• Close or open all steps
Considerations for Vlocity Insurance and Health Spring '20

These elements, properties, and functionalities are not supported in Vlocity Insurance and Health Spring
'20 .
Unsupported Elements
• Set Errors - Available beginning with Vlocity Insurance and Health Summer '20.
• Matrix Action - Available beginning with Vlocity Insurance and Health Summer '20.
Unsupported Properties
• Edit Block New LWC Component Override - Available beginning with Vlocity Insurance and Health
Summer '20
• Edit Block Label LWC Component Override - Available beginning with Vlocity Insurance and Health
Summer '20
• Edit Block's SObject Mapping - Available beginning with Vlocity Insurance and Health Summer '20
• Cancel Options. See Enable and Configure Cancel Functionality in an LWC OmniScript - Available
beginning with Vlocity Insurance and Health Summer '20.
• Multi-language OmniScripts - Available beginning with Vlocity Insurance and Health Summer '20
• Copy Individual Data JSON nodes in Preview
• SEO - Available beginning with Vlocity Insurance and Health Summer '20
• Delete
• Export - Available beginning with Vlocity Insurance and Health Summer '20
• Testing additional data when in Preview
• Full-Width Preview - Available beginning with Vlocity Insurance and Health Summer '20
• Close or open all steps
Permanently Unsupported
These functionalities, elements, and properties in Vlocity Insurance and Health Spring '20 and future
releases.
• Review Action
• Post to Object Action
• Submit Action
• Done Action
• Persistent Component
• Available For Prefill When Hidden (Prefilled by default)

company 311
OmniStudio
Access the LWC OmniScript Designer

Access the LWC OmniScript Designer from the Classic OmniScript Designer or the Vlocity OmniScript
Designer home page.
editing. See LWC OmniScript Designer Overview.
Accessing From Vlocity OmniScript Designer App Home

To access the LWC OmniScript Designer from the Vlocity OmniScript Designer tab, click the down arrow for
a version of an LWC Omniscript, and click Open in LWC OmniScript Designer.
Accessing from Classic OmniScript Designer

To access the LWC OmniScript Designer inside the Classic OmniScript Designer
1. From the Vlocity OmniScript Designer tab, click an LWC OmniScript, click a version to open the
OmniScript Designer.
2. Click Open in LWC OmniScript Designer.
Create an LWC OmniScript in the LWC OmniScript Designer

Create a new LWC OmniScript to build a script in the LWC OmniScript Designer. For information on
features exclusive to LWC OmniScripts, see LWC OmniScript Changes and Enhancements.
IMPORTANT
When using an existing OmniScript in the LWC OmniScript Designer, create a new version
of the OmniScript to update the OmniScript's property set. Without a new version, errors
may appear in the designer. See Upgrade an LWC OmniScript's Property Set.
To create an LWC OmniScript in the LWC OmniScript Designer:
1. From the Vlocity OmniScript Designer tab, click New.

2. Enter a Name for your OmniScript.
3. Enter a Type, SubType , and Language to create the unique identity of your OmniScript.
4. Select LWC Enabled OmniScript.
5. (Optional) Enter a Description of your OmniScript which displays along with the Name on the Vlocity
OmniScript Designer home page.
6. Click Save.

company 312
OmniStudio
7. Click Open in LWC OmniScript Designer.
What's Next
Next steps, configure your OmniScript. See Set Up an OmniScript in the LWC OmniScript Designer.
See Also
• LWC OmniScript Designer Changes and Enhancements

• Build an LWC OmniScript with Elements in the LWC OmniScript Designer
• Configure Elements in the LWC OmniScript Designer
• LWC OmniScript Designer Considerations
Set Up an OmniScript in the LWC OmniScript Designer

Configure optional settings for your OmniScript in the Setup panel of the LWC OmniScript Designer, such
as making your OmniScript reusable or enabling tracking.
Before You Begin

Create an OmniScript. See Create an LWC OmniScript in the LWC OmniScript Designer.
1. From your OmniScript, click Setup to view the Setup panel.

2. Configure specific Setup properties. See Setup and Script Configuration Reference.
What's Next
Next steps, build your script. See Build an LWC OmniScript with Elements in the LWC OmniScript Designer.
See Also

• LWC OmniScript Designer Overview
Creating the Script Structure

Create the logic that executes when the script runs, by building a hierarchical structure of Actions and
Steps.
Actions outside steps perform actions for the entire script, such as getting, posting, evaluating, and
transforming data. Steps typically include Block, Input, and Display elements, but can also include Actions
as buttons and Functions specific to the step. Learn more about OmniScript Script Structure Definitions.
Each page of an OmniScript is called a Step and can contain Group elements, such as Blocks, Input
elements, such as Checkboxes, Actions, such as Email Actions, and Functions, such as Formulas.

company 313
OmniStudio
Build an LWC OmniScript with Elements in the LWC OmniScript Designer

Drag elements and entire OmniScripts from the Build panel onto the canvas to build your scripts in the
Follow the hierarchical structure of Actions and Steps to build your script. Actions outside steps perform
actions for the entire script, such as getting, posting, evaluating, and transforming data. Steps typically
include Block, Input, and Display elements, but can also include Actions as buttons and Functions specific
to the step. Learn more about OmniScript Script Structure Definitions.

company 314
OmniStudio
Figure 1. Script Structure
Before You Begin

1. Create an OmniScript. See Create an LWC OmniScript in the LWC OmniScript Designer.
2. Set up your OmniScript with optional settings. See Set Up an OmniScript in the LWC OmniScript Designer.
1. From OmniScript, click Build to open the Build panel.

2. (Optional) Populate data fields in your OmniScript. To populate the script's data fields, click Actions,
and drag the DataRaptor Extract Action onto the canvas.
a. Enter a name in the Name field.

company 315
OmniStudio
b. From the DataRaptor Extract Action dropdown, select a DataRaptor that retrieves data from one
or more related Salesforce objects.
c. (Optional) To configure other DataRaptor Extract Action properties, see DataRaptor Extract Action
Properties.
NOTE
To execute more than one server call to fetch data, use an Integration Procedure or an
Action Block.
3. (Optional) To enable canceling out of an OmniScript and navigating to a different Salesforce

experience, add a Cancel action, see Enable and Configure Cancel Functionality in an LWC
OmniScript.
4. To create a page for your form:
a. Click Groups, and drag Step on to the canvas.
b. To populate your form with data fields and other elements, click the down arrow on the step, and
drag elements from the Build panel into the step. See Steps.
NOTE
Actions placed inside a step render as buttons.
5. To post changes made to data fields:

a. Enter a name in the Name field.
b. From the DataRaptor Post Action dropdown, select a DataRaptor that posts data back to
Salesforce.
c. (Optional) To configure other DataRaptor Post Action properties, see DataRaptor Post Action
Properties.
NOTE
To execute more than one server call to fetch data, use an Integration Procedure or an
Action Block.
6. To end the OmniScript and return the user either to where the script was launched or a custom URL:
1. Click Actions, and drag a Navigate Action onto the canvas.
2. To configure the Navigate Action, click the help icon (?) next to the Navigate Action Properties title
in the Properties panel, or see Navigate Action.
What's Next
Next steps, configure your elements. See Configure Elements in the LWC OmniScript Designer.

company 316
OmniStudio
See Also

• Preview an OmniScript in the LWC OmniScript Designer
• Test Data in the LWC OmniScript Designer
Configure Elements in the LWC OmniScript Designer

Configure elements for your OmniScript in the Properties panel of the designer when an element is
selected, such as the name, label, and instructions for a step element.
Before You Begin

3. Add elements to your OmniScript. See Build an LWC OmniScript with Elements in the LWC OmniScript Designer.
1. From your OmniScript, click an element on the canvas or the Navigation Panel to open the Properties
panel.
2. Enter values for any required fields marked with an asterisk (*), such as the Name field of a Text input
element.
3. (Optional) To view an inactive element, see Activate Elements in the LWC OmniScript Designer.
4. (Optional) Enter values for optional fields, such as the Placeholder and Label fields of a Text input
element.
5. (Optional) To learn more about a specific property, hover over the tooltip icon (i) next to the name of the
property.
6. (Optional) For detailed documentation about your selected element, select the help icon (?) next to the
name of the property. See also OmniScript Element Reference.

company 317
OmniStudio
7. To activate the element, click Active.
What's Next
Next steps, preview the look and functionality of your OmniScript. See Preview an OmniScript in the LWC
See Also

• Launch an LWC OmniScript with LWC OmniScript Wrapper
Activate Elements in the LWC OmniScript Designer

Activate an inactive element by selecting the element in the Navigation Panel of the OmniScript Designer.
When an element is deactivated, it disappears from the canvas. View inactive and active steps and actions
placed outside of steps in the Slide View of the Navigation Panel. View all inactive and active elements,
including those inside steps, in the Tree View of the Navigation Panel.

company 318
OmniStudio
Navigation Panel: Slide View (default)

Navigation Panel: Tree View
Activating Step or Action Elements

To activate an inactive step or action outside of a step:
1. From OmniScript, In the Navigation panel, click the Slide View icon or the Tree View icon.
2. Click the step or action you want to activate.
3. In the Properties panel, click Activate.
Activating Elements Inside Steps

To activate an inactive element inside a step:
1. From OmniScript, in the Navigation panel, click the Tree View icon.
2. Click a step, and click the element you want to activate.
3. In the Properties panel, click Activate.
See Also
• Create an LWC OmniScript in the LWC OmniScript Designer

Preview an OmniScript in the LWC OmniScript Designer

View the LWC OmniScript's appearance and functionality by previewing the OmniScript in the LWC
Before You Begin

3. Add elements to your OmniScript. See Build an LWC OmniScript with Elements in the LWC OmniScript Designer.
4. Configure your OmniScript elements. See Configure Elements in the LWC OmniScript Designer.
1. In your OmniScript, click Preview.

company 319
OmniStudio
2. For additional preview options, select these properties:

• Context ID: If your OmniScript does not have a Set Values Action that defines a ContextId, to
preview the form with test data, enter a record ID.
IMPORTANT
Using Set Values Action to set the context ID only works in preview.
NOTE
Confirm that a Context Id is defined in your data source. For example, if you have a
DataRaptor Extract Action that gets account records, you must have an Input
Parameter whose Data Source is ContextId, and whose Filter Value is the
DataRaptor Extract's output name, such as AccountId.
• Preview Device: To preview how your OmniScript appears on different devices, select Mobile,
Tablet, or Desktop.
• Theme: Preview your OmniScript with a Lightning or Newport theme.
• To reset data fields in your OmniScript after making changes, click the reload icon.
3. (Optional) Hide the Data JSON and Action Debugger by clicking X. Display the Data JSON and Action
again by clicking the debug panel button that appears when the panel closes.

company 320
OmniStudio
What's Next
Next steps, test your OmniScript. See Test Data in the LWC OmniScript Designer.
See Also

Test Data in the LWC OmniScript Designer

Test your OmniScript in the LWC OmniScript Designer by adding test data, viewing the data JSON, and
debugging action requests and response data.
Before You Begin

Preview the look and functionality of your OmniScript. See Preview an OmniScript in the LWC OmniScript Designer.
Add Test Data
1. From OmniScript, click Preview.

2. If your OmniScript does not have a SetValues action that defines a ContextId, to preview the form with
data, enter a record ID in the Context ID field.
NOTE
Confirm that a ContextId is defined in your data source. For example, if you have a
DataRaptor Extract Action that gets account records, you must have an Input
Parameter whose Data Source is ContextId, and whose Filter Value is the
DataRaptor Extract's output name, such as AccountId.
View the Data JSON
1. View the JSON Data in the Data JSON.

2. (Optional) Click the clipboard icon to copy the full JSON.

company 321
OmniStudio
View and Debug Action Requests and Response Data
1. Click Action Debugger to open the debug console.

2. (Optional) Search for an action name in the Search field.
3. (Optional) To copy a specific node, click the clipboard icon next to the node. For example, copy
Remote Options in a DataRaptor Extract Action.

company 322
OmniStudio
4. (Optional) To clear the debug console, click Clear Logs.

5. (Optional) Click the reload icon to repopulate the debug console with new action request and response
data.
Next Steps
Next steps, launch your OmniScript on a Lightning or Community page. See Activate and Deploy an LWC
OmniScript.
See Also


company 323
OmniStudio
Upgrade an LWC OmniScript's Property Set

When using an existing OmniScript in the LWC OmniScript Designer, create a new version of the
OmniScript to update the OmniScript's property set. Without a new version, errors could appear in the
designer. Prevent or resolve this error by upgrading the OmniScript's property set.
Example Error
1. From your OmniScript, click New Version to trigger a class that adds any missing JSON properties.
2. Repeat the process for any older or imported OmniScripts.
See Also

LWC OmniScript Changes and Enhancements

Beginning with the Vlocity Insurance and Health Summer '19 and Vlocity Communications, Media, and
Energy Fall '19 releases, Vlocity supports the Salesforce Lightning Web Component programming model.
Changes in functionality affect how you must configure an LWC OmniScript and how an LWC OmniScript
performs. For information on unsupported elements, functionalities, properties, and deployments, see LWC
OmniScript Considerations.

company 324
OmniStudio
Changes and Enhancements for Vlocity Insurance and Health and Vlocity CME Summer
'20
All of the LWC OmniScript changes and enhancements apply to both the LWC OmniScript Designer and
the Classic OmniScript Designer. To view changes and enhancements specific to the LWC OmniScript
Designer, see LWC OmniScript Designer Changes and Enhancements.
Download the LWC HTML, CSS, and ReadMe files for this release by clicking here.
LWC OmniOut
Run an OmniScript on an external site by using the LWC OmniOut in your external application. OmniOut
enables apps to run an OmniScript that connects to Salesforce and external APIs to send and receive data.
See Run LWC OmniScripts Outside of Salesforce with LWC OmniOut.


New Properties
New LWC OmniScript properties appear in the LWC OmniScript Designer only. See LWC OmniScript
Designer Changes and Enhancements.


Enable Unload Warning No change No change
New Functionalities
Browser Navigation A browser's forward and back buttons navigate an LWC OmniScript to the next or previous Step.
Custom Styling Support for Add custom styling for right-to-left languages using static resources. See Custom Stylesheet
RTL Language Static Resource.
Download Off-Platform LWC Download the OmniScript LWC to add it to OmniOut. See Run LWC OmniScripts Outside of
Salesforce with LWC OmniOut.
Expanded Google Maps Type Ahead's Google Maps functionality returns an expanded response containing more JSON
Response Node nodes. See Using Google Maps Autocomplete in LWC OmniScripts.
Improved Readability Readability has been improved for screenreaders.

company 325
OmniStudio
Messaging Framework Pass a value in the c__messagingKey URL parameter to change the node that stores the
messaging payload for window.postMessage and session storage message. See Message with
Window Post Messages and Session Storage Messages.
Place Custom LWC Elements Custom LWC Elements are usable in a non-repeatable Block element. The Block cannot be
in Blocks nested. See Custom LWC Element.
Run OmniScripts Off-Platform Add OmniOut to an application to run OmniScripts on a third-party website.
with OmniOut
Translate Tooltip Help Text in Provide translations for tooltip help text in multi-language OmniScripts by defining and adding
Multi-Language OmniScripts custom labels. See Translate Tooltip Help Text in OmniScripts.

Functionality LWC Behavior Angular

Behavior
Beta support for right-to-left Multi-language and single language OmniScripts provide beta support for No change
languages right-to-left languages.
Mobile View in App Builder Preview how your OmniScript displays on a mobile device by Lightning No change
App Builder's device view to Phone. See Add an LWC OmniScript to a
Community or Lightning Page.
Changes and Enhancements for Vlocity Insurance and Health Spring '20 and Vlocity
CME Summer '20
Download the HTML, CSS, and ReadMe files for this release by clicking here.
New Elements
These new elements are available in LWC OmniScripts.
Element Description
Action Block Groups Action elements together to enable backend calls to fire asynchronously using the same
configuration.
DataRaptor Turbo Extract Action Invokes a DataRaptor Turbo Extract.


Calculation Action Calculation Action's Pre-Transform DataRaptor Calculation Action's Pre-Transform DataRaptor
Interface and Post-Transform DataRaptor Interface Interface and Post-Transform DataRaptor Interface
properties are now in the remote properties section. properties are now in the remote properties section.
This enables both DataRaptors to run in a single This enables both DataRaptors to run in a single
Apex call. Apex call.
Disclosure No change No change

company 326
OmniStudio
New Properties
Send only Extra Pass an Extra Payload's Key/Value pairs without sending an OmniScript's data JSON by using the Send
Payload Only Extra Payload property available in these actions: Calculation Action, HTTP Action, Integration
Procedure Action, and Remote Action.
Step: Messaging Steps support the pubsub, window post message, and session storage message properties. See
Framework Communicate with OmniScript from a Lightning Web Component.


Conditional View: Set element to The conditional view property takes precedence The element's Read Only property
readonly if false over an element's Read Only property. takes precedence.
Conditional View: Set required The conditional view property takes precedence The element's Required property
element to optional if false over an element's Required property. takes precedence.
Repeat No change No change
New Functionalities
Custom Stylesheet Static Resource Add custom styling to an OmniScript using a custom style sheet static resource.
Enable LWC OmniScripts with Create LWC OmniScripts or convert Angular OmniScripts with a Type that begins with an
UpperCase Type uppercase letter with no additional configuration. See Create an LWC OmniScript.
Inline OmniScripts Display OmniScripts inline in Community and Lightning pages.
Navigate to Additional Direct users to an App, Community Named Page, Logout, or Login page using the Navigate
PageReference Types Action. See Navigate Action.
Override the Edit Block LWC Override an Edit Block LWC, Edit Block New LWC, and Edit Block Label LWC, to add custom
functionality and styling to an Edit Block.
Override the Modal LWC Extend and override the OmniScript Modal LWC.
Override the Save For Later Override the Save For Later Acknowledgment LWC to add customizations.
Acknowledgement LWC
Override the Type Ahead LWC The LWC Type Ahead element's LWC Component Override field overrides the Type Ahead
component instead of overriding the Type Ahead Block component.
SEO OmniScripts Enable OmniScripts to appear in online searches and direct users to specific Steps in the
OmniScript by configuring OmniScript's SEO options.
SLDS Token Override Add customizations to SLDS Design Tokens in the OmniScript.
Stateful OmniScripts Store the state of an OmniScript's progression in the URL to direct users to specific Steps in
an OmniScript and temporarily store data.
Time Tracking in Navigate Action The Navigate Action supports time tracking. The action is tracked in the StepActionTime time
tracking entry. See Vlocity Tracking Service.


company 327
OmniStudio

Cancel Add a cancel option to an LWC OmniScript by configuring The Cancel button options appear in the
the Navigate Action. See Enable and Configure Cancel Script Configuration's Cancel Options
Functionality in an LWC OmniScript. section.
Edit Block Cards Override the Card with an LWC to add customizations. Use templates to add customizations to the
Card.
Multi-Language • Add and access custom labels in custom LWCs. • Angular Multi-Language OmniScripts
OmniScripts • Provides Beta support for right-to-left languages. cannot use LWCs.
• Requires different custom label translations • Supports right-to-left languages
• Requires different custom label translations
Changes and Enhancements for Vlocity Insurance and Health Winter '20 and Vlocity
CME Winter '20
New Properties
Action Message Enables custom action messages to render under an action's loading spinner when an Action runs. For
more information, see Common Action Element Properties.
Display Outside Enables Knowledge base articles to display in a separate Lightning web component in a Lightning page.
OmniScript For more information, see Opening Knowledge Base Articles Outside of a Classic OmniScript.
Merge Saved Data JSON Enables a saved OmniScript to merge data into an updated version of the OmniScript. For more
into updated OmniScript information, see Configure Save Options.

• Console Tab Title and Console Tab Icon

• Custom Tracking Data
• Enable Tracking
• Fetch Picklist Values At Script Load
• Hide
• Knowledge
• Repeat - Only Block elements are supported
New Functionalities
• Make remote calls from any custom LWC using the Common Action Utility. Make Remote Calls from
• View Knowledge Base articles outside of the OmniScript using the Vlocity OmniScript Knowledge Base
Component. See Opening Knowledge Base Articles Outside of a Classic OmniScript.
• Pass parameters into LWC OmniScripts in a Community. See Launch an LWC OmniScript with LWC
OmniScript Wrapper.
• Launch an OmniScript from a Card in a Community. See Launching an LWC OmniScript from an OS
Action on a Card.

company 328
OmniStudio
• Override the default save for later error message with a custom message. See Configure Save Options.
• Pass events to an LWC OmniScript in the c_vlocEvents parameter, and fire the event by configuring
the Navigate Action. See Navigate Action.
• Hide the Next and Previous button on a Step by setting the width for each button to 0. See Hide the Next
and Previous Buttons.
• Override the Step Chart Lightning web component. See Customize the Step Chart Component.
• The OmniScript Base Mixin component includes methods to enable these functionalities:
• Navigating to a Step
• Saving a state in a disconnected callback
• Clearing a saved state when a user navigates to a previous Step
• Making remote calls
• Applying response data to an OmniScript's data JSON
• In LWC OmniScripts, validation runs when a user clicks out of a field by using the onBlur function. In
NOTE

• Displaying Knowledgebase articles in OmniScript. For more information, see Initial Configuration for the
Knowledge Component in Classic OmniScript.
• Saving and resuming OmniScripts. Saving and resuming LWC OmniScripts requires additional
configuration due to new behavior. For more information, see Configure Save Options.
• Group elements support the validation framework. For example, when a Group element, such as a Block,
is hidden, validation does not apply to any element inside of the hidden group element.
• Prefilling repeatable blocks. For more information, see Prefill Repeatable Blocks


Block styles.

company 329
OmniStudio

Envelope
NOTE
NOTE
OmniScript.
a user types.
Changes and Enhancements for Vlocity Insurance and Health Summer '19 and Vlocity
Communications, Media, and Energy Fall '19

Conditional View LWC supports Hide element if false. Angular supports all Conditional
View options.
Currency Optionally display a Currency code in addition to the Currency symbol. Displays the Currency symbol
Element
Data Preview In addition to the ContextId functionality, test data in the OmniScript's Angular cannot test additional
Data panel by adding Key/Value pairs. For more information, see Test data.
Angular OmniScript Data in the OmniScript Data Panel.

company 330
OmniStudio

HTTP Action To use an HTTP Action that calls Apex, you must add the Salesforce HTTP Actions calling Apex do not
org's domain into a Remote Site's Remote Site URL field. For more require a Remote Site.
information, see Adding Remote Site Settings.
Input Fields LWC supports placeholder text in Input fields. Angular does not support
placeholder text in Input fields.
Launching an The How to Launch Activated Script modal now displays an LWC tab Clicking the How to Launch an
Activated Script that provides code to embed or launch a URL addressable LWC Activated Script opens a modal
OmniScript. that contains information on
embedding an OmniScript and
• Embedding: Embed an OmniScript Lightning Web Component in a launching an OmniScript from a
Lightning Web Component URL.
• Launching from a URL: Launch an LWC OmniScript with LWC
OmniScript Wrapper.
Lightning LWC OmniScripts use pure SLDS. Angular OmniScripts do not use
pure SLDS.
Previewing an OmniScripts using custom Lightning web components must be active Angular OmniScripts support
OmniScript before previewing. previewing Inactive and Active
OmniScripts with custom
templates.
Single-step • LWC OmniScripts load and render Steps individually, resulting in faster • Loads all of the OmniScript's
rendering initial load times Steps when the OmniScript first
• Actions receive smaller data sets because the data JSON only loads
contains prefilled data and data from Steps that have rendered • The OmniScript's data JSON is
• Data, including data from previous Steps, is accessible to a Step present for every Step after the
containing conditionals, formulas, and merge fields once the Step initial load
renders • Actions receive the entire set of
• Previously loaded Steps containing conditionals, formulas, and merge data JSON that is present
fields can evaluate data JSON when it becomes available • Merge fields in future Steps can
• A future Step containing conditionals, formulas, and merge fields will access the data JSON
not have access to the data JSON until the Step renders • Formulas in future Steps can
• Prefill data present in the data JSON loads into a Step once the Step access the data JSON
renders
Step Chart • Navigating to a future step is not possible, even if there are no Actions • Advance to a future Step by
Navigation between the Steps clicking the Step in the Step
• Navigate back to any previously loaded Step by clicking the Step in the Chart if no Actions exist
Step Chart. between the Steps.
• Navigate back to a previously
loaded step by clicking the Step
in the Step Chart.
Step Instruction Merge fields are usable in the Step Instruction field. Merge fields are not usable in the
Field Step Instruction field.
Type An LWC OmniScript's Type must begin with a lowercase letter. You The OmniScript's Type must be a
cannot use case-sensitivity to define a Type's unique name if another unique name that is not case-
OmniScript with the same Type exists. For example, if you have an sensitive. For example, if a Type
Angular OmniScript with an existing Type named Test, you cannot named Test exists, you cannot
create an LWC OmniScript with a Type named test. enter test as a Type.

company 331
OmniStudio

UI Validation • Validation runs when a User clicks out of a field • Validation runs when a User
• Validation runs when a User submits a Step types
• When a User submits a step,
error messages appear in a
NOTE modal
The Step always runs the validation and ignores
the Step's Validation Required property.
• When a User submits a Step, error messages appear inline with the
Element
• Validation runs for typed values and values set by an API
• Validation methods are accessible in custom Lightning web
components. For more information, see Add Validation to a Custom
Lightning Web Component in OmniScript.
URL Element Accepts a broader range of URL patterns, including: Accepts a pattern of http://
www.xyz.com
• http://www.xyz.com
• https://www.xyz.com
• www.xyz.com
• test.xyz.com
Script Configuration Properties Exclusive to LWC OmniScripts
Property Purpose Example

Deploy LWC Redeploy an active OmniScript if the previously generated LWC Activate and Deploy an LWC
OmniScript fails to deploy by clicking Deploy LWC. OmniScript
Download LWC Review the auto-generated OmniScript LWC by clicking Download n/a
LWC.
Element Type To LWC Enables a custom Lightning web component to override all Add Custom Lightning Web
Component Mapping elements of a specific Element Type. Components to an OmniScript
Enable LWC Enables the OmniScript to use the Vlocity Lightning Web Create an LWC OmniScript
Component framework.

company 332
OmniStudio
Property Purpose Example

Step Chart Options Exclusive to LWC OmniScripts using Lightning styling, set the Step Right:
Chart to display to the right, to the left, or on top of the OmniScript.
Left:
Top:
Elements Exclusive to LWC OmniScripts
Element Description Example

Custom LWC The Custom LWC element enables custom components that do not extend an Custom LWC Element
OmniScript element to exist in OmniScript.
Navigate Action The Navigate Action enables the OmniScript to open different Salesforce experiences Navigate Action
and external endpoints.
Element Changes
• Elements that support Lightning web components display a Lightning icon in the available components
section of an OmniScript.
• The LWC Component Override property enables custom Lightning web components to override an
individual element's component. For more information, see Add Custom Lightning Web Components to
an OmniScript.
LWC OmniScript Element Availability

This page lists each LWC OmniScript element's availability by release.
LWC OmniScripts For information on unsupported elements, properties, and functionalities, see LWC
OmniScript Considerations.

company 333
OmniStudio
Added Elements for Vlocity Insurance and Health and Vlocity CME Summer '20

Added Elements for Vlocity Insurance and Health Spring '20

Action Block Groups Action elements together to enable backend n/a
calls to fire asynchronously using the same
configuration.
Calculation Action Calculation Action's Pre-Transform DataRaptor Interface Calculation Action's Pre-Transform
and Post-Transform DataRaptor Interface properties are DataRaptor Interface and Post-Transform
now in the remote properties section. This enables both DataRaptor Interface properties are now in
DataRaptors to run in a single Apex call. the remote properties section. This enables
both DataRaptors to run in a single Apex
call.
DataRaptor Turbo No change No change
Action
Disclosure No change No change
Added Elements for Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20

Block styles.
Envelope

company 334
OmniStudio

NOTE
NOTE
OmniScript.
a user types.
Added Elements for Vlocity Insurance and Health Summer '19 and Vlocity

Aggregate No change No change
Checkbox No change No change
Currency Element Optionally display a Currency code in addition to the Currency symbol. Displays the Currency symbol
Custom LWC The Custom LWC element enables custom components that do not n/a
extend an OmniScript element to exist in OmniScript.
DataRaptor No change No change
Extract Action
DataRaptor Post No change No change
Action
DataRaptor No change No change
Transform Action
Date No change No change
Date/Time No change No change

company 335
OmniStudio

Email No change No change
Formula No change No change
HTTP Action To use an HTTP Action that calls Apex, you must add the Salesforce HTTP Actions calling Apex do
org's domain into a Remote Site's Remote Site URL field. For more not require a Remote Site.
Integration No change No change
Procedure Action
Line Break No change No change
Lookup No change No change
Multi-select No change No change
Navigate Action The Navigate Action enables the OmniScript to open different Salesforce n/a
experiences and external endpoints.
Number No change No change
Radio No change No change
Radio Group No change No change
Range No change No change
Remote Action No change No change
Select No change No change
Set Values No change No change
Step • Prefill data present in the data JSON loads into a Step once the Step • Loads all of the OmniScript's
renders Steps when the OmniScript
• A future Step containing conditionals, formulas, and merge fields will first loads
not have access to the data JSON until the Step renders • The OmniScript's data JSON
• Previously loaded Steps containing conditionals, formulas, and merge is present for every Step after
fields can evaluate data JSON when it becomes available the initial load
• Data, including data from previous Steps, is accessible to a Step • Actions receive the entire set
containing conditionals, formulas, and merge fields once the Step of data JSON that is present
renders • Merge fields in future Steps
• Actions receive smaller data sets because the data JSON only can access the data JSON
contains prefilled data and data from Steps that have rendered • Formulas in future Steps can
• LWC OmniScripts load and render Steps individually, resulting in faster access the data JSON
initial load times
• Validation runs when a User submits a Step
NOTE
The Step always runs the validation and ignores
the Step's Validation Required property.
• When a User submits a Step, error messages appear inline with the
Element
• Merge fields are usable in the Step Instruction field.
Text No change No change
Text Area No change No change
Text Block Does not insert data into the data JSON No change
Time No change No change

company 336
OmniStudio

URL Element Accepts a broader range of URL patterns, including: Accepts a pattern of http://
www.xyz.com
• www.xyz.com
• test.xyz.com
LWC OmniScript Considerations

LWC OmniScripts do not support all of the elements, functionalities, and deployment options that Angular
OmniScripts support. For information on new features that are exclusive to LWC OmniScripts and newly
supported elements and properties, see LWC OmniScript Changes and Enhancements.
Permanently Unsupported
The elements and functionalities in this section are permanently unsupported in LWC OmniScripts.
• Done Action - The Done Action has been replaced with the Navigate Action
• Filter Block
• Headline
• Input Block
• Post to Object Action
• Review Action
• Selectable Items
• Submit Action
Angular OmniScript's Cart Component functionality is permanently unsupported.
Considerations for Vlocity Insurance and Health and Vlocity CME Summer '20
These considerations apply to Vlocity Insurance and Health Summer '20.
• Mask is not supported in the Currency element

• Min and Max in a Date Element
• Merge fields in a Range Element
Unsupported Functionalities
• Click Tracking
• Text Block does not insert data into the data JSON

company 337
OmniStudio
Considerations for Vlocity Insurance and Health Spring '20

These considerations apply to Vlocity Insurance and Health Spring '20.
Vlocity plans to add support for the elements on this page in future releases. LWC compatible elements
display a Lightning icon in the Available Components panel of an OmniScript. Unsupported elements are
still available in the available components section. However, unsupported elements will not render in a
Lightning Web Component OmniScript.
• PDF Action - Available beginning with Vlocity Insurance and Health Summer '20
• Cancel Options - Available beginning with Vlocity Insurance and Health Summer '20. In Vlocity Insurance
and Health Spring '20, cancel behavior is provided by the Navigate Action. See Enable and Configure
Cancel Functionality in an LWC OmniScript
• Clicking a browser's forward and back button to navigate steps in an OmniScript - Available beginning
with Vlocity Insurance and Health Summer '20.
• Click Tracking
Unsupported Deployments
LWC OmniScripts do not support any off-platform deployment. For more information, see Deploying
OmniScripts Off-Platform with OmniOut. Available beginning with Vlocity Insurance and Health Summer
'20.
Considerations for Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20
These considerations apply to Vlocity Insurance and Health Winter '20.
• Calculation Action - Available starting with Vlocity Insurance and Health Spring '20.
• Delete Action - Available starting with Vlocity Insurance and Health Spring '20.
• Disclosure - Available starting with Vlocity Insurance and Health Spring '20.
• Matrix Action - Available starting with Vlocity Insurance and Health Spring '20
• PDF Action - Available beginning with Vlocity Insurance and Health Summer '20.

company 338
OmniStudio
• Set Errors - Available starting with Vlocity Insurance and Health Spring '20
• Cancel Button - Beginning with Vlocity Insurance and Health Spring '20, Cancel behavior is provided by
the Navigate Action. See Enable and Configure Cancel Functionality in an LWC OmniScript
• Cancel Options - Available beginning with Vlocity Insurance and Health Summer '20. In Vlocity Insurance
and Health Spring '20, cancel behavior is provided by the Navigate Action. See Enable and Configure
Cancel Functionality in an LWC OmniScript
• Conditional - Required - Available starting with Vlocity Insurance and Health Spring '20
• Conditional - Read Only - Available starting with Vlocity Insurance and Health Spring '20
• Post-Transform DataRaptor Interface in Remote Properties - Available starting with Vlocity Insurance and
Health Spring '20
• Pre-Transform DataRaptor Interface in Remote Properties - Available starting with Vlocity Insurance and
Health Spring '20
• Repeatable element - Available Vlocity Insurance and Health Spring '20.Block supports the Repeat
property starting with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20
• Click Tracking
• Multi-language OmniScripts - Available starting with Vlocity Insurance and Health Spring '20
'20.
Considerations for Vlocity Insurance and Health Summer '19 and Vlocity
These considerations apply to Vlocity Insurance and Health Summer '19 and Vlocity Communications,
Media, and Energy Fall '19.

company 339
OmniStudio
• Block - Available starting with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20
• Calculation Action - Available starting with Vlocity Insurance and Health Spring '20
• Delete Action - Available starting with Vlocity Insurance and Health Spring '20
• Disclosure - Available starting with Vlocity Insurance and Health Spring '20.
• Docusign - Available starting with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20
• Edit Block - Available starting with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20
• Email Action - Available starting with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20
• File - Available starting with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20
• Image - Available starting with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20
• Matrix Action - Available starting with Vlocity Insurance and Health Spring '20
• Messaging - Available starting with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20
• Password - Available starting with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20
• PDF Action - Available beginning with Vlocity Insurance and Health Summer '20.
• Set Errors - Available starting with Vlocity Insurance and Health Spring '20
• Type Ahead Block - Available starting with Vlocity Insurance and Health Winter '20 and Vlocity CME
Winter '20
• Cancel Button - Beginning with Vlocity Insurance and Health Spring '20, Cancel behavior is provided by
• Cancel Options - Beginning with Vlocity Insurance and Health Spring '20, Cancel behavior is provided by
• Conditional - Required - Available starting with Vlocity Insurance and Health Spring '20
• Conditional - Read Only - Available starting with Vlocity Insurance and Health Spring '20
• Hide - Available starting with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20
• Knowledge Component - Available starting with Vlocity Insurance and Health Winter '20 and Vlocity CME
Winter '20
• Post-Transform DataRaptor Interface in Remote Properties - Available starting with Vlocity Insurance and
Health Spring '20
• Pre-Transform DataRaptor Interface in Remote Properties - Available starting with Vlocity Insurance and
Health Spring '20
• Repeatable element - Available for the Block element starting with Vlocity Insurance and Health Winter
'20 and Vlocity CME Winter '20
• Save for Later - Available starting with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter
'20

company 340
OmniStudio
• Click Tracking
• Console Tab Title and Icon - Available starting with Vlocity Insurance and Health Winter '20 and Vlocity
CME Winter '20
• Custom Tracking Data - Available starting with Vlocity Insurance and Health Winter '20 and Vlocity CME
Winter '20
• Multi-language OmniScripts - Available beginning with Vlocity Insurance and Health Summer '20.
• Fetching picklist values when an OmniScript loads - Available starting with Vlocity Insurance and Health
Winter '20 and Vlocity CME Winter '20
• Time tracking - Available starting with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter
'20
'20.
Create an LWC OmniScript

Create an LWC OmniScript to use custom Lightning web components and functionalities exclusive to LWC
OmniScripts. For information on new features that are exclusive to LWC OmniScripts, see LWC OmniScript
Changes and Enhancements.
NOTE
It is possible to switch an OmniScript to either an LWC OmniScript or an Angular
OmniScript at any time. However, Angular OmniScripts and LWC OmniScripts do not
support the same elements and functionalities. For more information on Lightning Web
Component support, see LWC OmniScript Considerations.
1. From the OmniScript's Script Configuration, add a Type, Subtype, and Language.

company 341
OmniStudio
NOTE
In the Vlocity Insurance and Health Summer '19-Winter '20 and Vlocity CME Fall '19-
Winter '20 releases, the OmniScript's Type must begin with a lowercase letter. You
cannot use case-sensitivity to define a Type's unique name if another OmniScript with
the same Type exists. For example, if you have an Angular OmniScript with an
existing Type named Test, you cannot create an LWC OmniScript with a Type named
test. For information on converting Angular OmniScripts to LWC OmniScripts, see
Convert an Angular OmniScript to an LWC OmniScript. The Type limitation occurs
because Type is stored in a Salesforce picklist, and Salesforce picklists store values
without case-sensitivity.
2. Check the Enable LWC checkbox.

3. Save the OmniScript by clicking Save.
4. Drag and drop supported elements into the structure panel. LWC compatible elements display a
Lightning icon in the Available Components panel of an OmniScript.
5. Click the LWC Preview tab to deploy the Lightning Web Component.
6. (Optional) To create custom Lightning web components for OmniScript, see Create a Custom Lightning
Web Component for OmniScript.
See Also
• Create an LWC OmniScript in the LWC OmniScript Designer

• Activate and Deploy an LWC OmniScript
Convert an Angular OmniScript to an LWC OmniScript

Enable the use of custom Lightning web components for an existing Angular OmniScript by converting the
OmniScript to an LWC OmniScript. For more information on LWC OmniScripts, see LWC OmniScripts.
NOTE
LWC compatible elements display a Lightning icon in the Available Components panel of
an OmniScript.
Before You Begin

Review the LWC OmniScript Considerations page to ensure LWC OmniScripts support the same elements and functionalities present in
your Angular OmniScript. For information on new features that are exclusive to LWC OmniScripts, see LWC OmniScript Changes and
Enhancements.

company 342
OmniStudio
1. Beginning with Vlocity Insurance and Health Spring '20, LWC OmniScripts may begin with an
uppercase letter. If the OmniScript is in an earlier package, perform these steps:
a. In the Vlocity Insurance and Health Summer '19-Winter '20 and Vlocity CME Fall '19-Winter '20
releases, an LWC OmniScript's Type must begin with a lowercase letter. If the OmniScript's Type
begins with an uppercase letter, change the Type to a unique name that begins with a lowercase
letter. You cannot use case-sensitivity to convert the Angular OmniScript's Type. For example, if
you have an Angular OmniScript with an existing Type named Test, you cannot create an LWC
OmniScript with a Type named test.
NOTE
The Type limitation occurs because Type is stored in a Salesforce picklist, and
Salesforce picklists store values without case-sensitivity.
b. (Optional) If you rely on the OmniScript's Type as a naming convention and cannot create a new
unique Type, see Converting an Angular OmniScript's Type to an LWC OmniScript Type.
2. Check the Enable LWC checkbox.
3. Replace any existing Done Actions in the OmniScript with a Navigate Action. For information on
configuring the Navigate Action, see Navigate Action.
NOTE
LWC OmniScripts do not support the Done Action element.
4. Elements in an Angular OmniScript that use custom templates must now use custom Lightning web
components to provide custom functionality. For information on creating custom Lightning web
components, see Create a Custom Lightning Web Component for OmniScript.
5. (Optional) If the Angular OmniScript exists in a Community or Lightning page, see Add an LWC
OmniScript to a Community or Lightning Page.
Create a Custom Lightning Web Component for OmniScript

Add custom HTML, JavaScript, and CSS to an OmniScript by creating a custom Lightning web component.
For information on using the Lightning Web Component framework, see Set Up Lightning Web
Components.
NOTE
Before previewing an OmniScript that uses custom Lightning web components, you must
activate the OmniScript. If the OmniScript is not active, custom Lightning web components
won't render in the preview. If you deploy changes to a custom Lightning web component
that is present in an Active OmniScript, the OmniScript will display the changes.

company 343
OmniStudio
Requirements
To make the custom Lightning web component compatible with Vlocity Lightning web components, you
• runtimeNamespace: You must add the namespace of your Vlocity package to the XML metadata file in
your component by using the runtimeNamespace metadata tag. Replace the NS variable in the code
example with the namespace of your Vlocity package. For more information on finding the namespace of
your package, see Viewing the Namespace and Version of the Vlocity Package.
<runtimeNamespace>NS</runtimenamespace>
• Custom Lightning web components built outside of the package cannot use any Salesforce Lightning web
component that uses resources or affects the component at runtime. For more information, see
Salesforce Modules.
• isExposed : Set the isExposed metadata tag to true.
<isExposed>True</isExposed>
For more information on extending Vlocity Lightning web components, see Extend Vlocity Lightning Web
Components.
NOTE
Custom Lightning Web Components will not throw errors unless Debug Mode is enabled.
Custom OmniScript Lightning Web Components

To create a custom Lightning web component, review these component types:
Component Type Description Reference

OmniScript Element Customize an OmniScript element by extending the Extend an OmniScript Element's
Lightning web component element's Lightning web component. LWC-compatible Lightning Web Component
elements display a Lightning icon in the Available
Components panel of an OmniScript.
OmniScriptBaseMixin Enable a custom component to interact with an OmniScript Extend the OmniScriptBaseMixin
component by extending the OmniScriptBaseMixin component. Component
Standalone component A custom standalone component. The component cannot Create a Standalone Custom
extend the OmniScriptBaseMixin component or an Lightning Web Component
OmniScript element Lightning web component.
For information on adding a custom Lightning web component to an OmniScript, see Add Custom Lightning
Web Components to an OmniScript.

company 344
OmniStudio
Custom LWC Element

Add a custom Lightning web component that does not extend an OmniScript element component to an
OmniScript using the Custom LWC element. To extend an OmniScript element's component, see Extend an
OmniScript Element's Lightning Web Component.
NOTE
Use Custom LWC Elements in a Step, and, beginning with Vlocity Insurance and Health
and Vlocity CME Summer '20, a non-repeatable Block element that is not nested.
Before You Begin

Create a custom LWC. The Custom LWC element supports these two types of custom Lightning web components:
• Components that extend the OmniScriptBaseMixin component. For more information, see Extend the OmniScriptBaseMixin
Component.
• Standalone components that run independently from OmniScript. For more information, see Create a Standalone Custom Lightning
Web Component.
1. In an OmniScript, add the Custom LWC element.

2. In Name and Field Label, enter a name and display name for the Custom LWC element.
3. In the Lightning Web Component Name field, enter the name of your custom Lightning web
component.
4. (Optional) Check Standalone LWC if your custom component does not extend the
OmniScriptBaseMixin component.
5. (Optional) Pass property values into the OmniScript by entering values in these property fields:
Property Name Enter a property name using the HTML attribute format to pass it into the custom component. For example,
the property recordId converts to the HTML attribute record-id.
Property Enter a value to pass in the property. Values may use merge field syntax to pass a JSON node. For
Source example, to pass the JSON node ContextId, enter %ContextId%.
6. (Optional) Activate and preview the OmniScript to view your custom Lightning web component.
See Also
• Extend the OmniScriptBaseMixin Component
• Create a Standalone Custom Lightning Web Component
Extend an OmniScript Element's Lightning Web Component

Add custom behavior and styling to an OmniScript Element while maintaining its core functionality by
extending an OmniScript element's Lightning web component.
Lightning web components in OmniScript provide the HTML, JavaScript, and CSS for an OmniScript
element. For example, a Text element has an extendable component named OmniScriptText. For

company 345
OmniStudio
information on creating custom Lightning web components that do not extend an OmniScript element's
Lightning web component, see Create a Custom Lightning Web Component for OmniScript.
NOTE
Beginning with Vlocity Insurance and Health Spring '20 , download the HTML, CSS, and ReadMe files for
every available Lightning web component in one file.
Release HTML, CSS, and ReadMe Download File

Vlocity Insurance and Health and Vlocity CME Summer '20 Download
Vlocity Insurance and Health Spring '20 Download
To extend an OmniScript element's Lightning web component:
1. Ensure you have set up IDX Workbench or Salesforce DX locally. For information on setting up IDX
Workbench or Salesforce DX, see Set Up Lightning Web Components.
2. Locate the name of the OmniScript element's Lightning web component. Information about OmniScript
element Lightning web components is available in the LWC OmniScript ReadMe Reference.
NOTE
LWC compatible elements display a Lightning icon in the Available Components panel
of an OmniScript.
3. Create a custom component and extend the OmniScript element's Lightning web component.
4. To make the custom Lightning web component compatible with Vlocity Lightning web components, you
• runtimeNamespace: You must add the namespace of your Vlocity package to the XML metadata
file in your component by using the runtimeNamespace metadata tag. Replace the NS variable in
the code example with the namespace of your Vlocity package. For more information on finding the
namespace of your package, see Viewing the Namespace and Version of the Vlocity Package.

company 346
OmniStudio
For more information on extending Vlocity Lightning web components, see Extend Vlocity Lightning
Web Components.
5. Once customizations are complete, deploy the custom component to your Salesforce org. For more
information on deploying Lightning web components, see Deploy Lightning Web Components.
6. Add the custom component to an OmniScript by overriding an individual element or mapping all the
elements of one type to the custom component. For more information on adding custom lightning web
components to an OmniScript, see Add Custom Lightning Web Components to an OmniScript.
Example
In this code example, a custom Lightning web component is extending the OmniScriptText component.
Replace the NS variable in the code example with the namespace of the Vlocity package you are using. For
more information on finding the namespace of your package, see Viewing the Namespace and Version of
the Vlocity Package.
import OmniScriptText from 'NS/omniscriptText';

import tmpl from './omniscriptTextCustom.html';
export default class OmniscriptTextCustom extends OmniscriptText {

handleBlur(evt) {
this.applyCallResp(evt.target.value);
}
render() {
return tmpl;
}
}
Extend the OmniScriptBaseMixin Component

Enable a custom Lightning web component to interact with an OmniScript by extending the
OmniScriptBaseMixin component. The OmniScriptBaseMixin includes methods to update an OmniScript's
data JSON, pass parameters, and more.
Requirements
• Custom Lightning web components extending the OmniScriptBaseMixin component cannot also
extend or override an OmniScript element Lightning web component. For more information on extending
an OmniScript element's Lightning web component, see Extend an OmniScript Element's Lightning Web
Component.
• Custom Lightning web components extending the OmniScriptBaseMixin must use the Custom LWC
element in OmniScript. For more information on using the Custom LWC element, see Add Custom
Lightning Web Components to an OmniScript.
Salesforce Modules.

company 347
OmniStudio
• To make the custom Lightning web component compatible with Vlocity Lightning web components, you
• runtimeNamespace: You must add the namespace of your Vlocity package to the XML metadata file
in your component by using the runtimeNamespace metadata tag. Replace the NS variable in the
code example with the namespace of your Vlocity package. For more information on finding the
Components.
OmniScriptBaseMixin ReadMe
View all of the component's properties, attributes, and methods in the ReadMe. See OmniScript Base Mixin
(omniscriptBaseMixin) ReadMe.See LWC OmniScript ReadMe Reference.
Extending the Component

In this code example, a custom Lightning web component is extending the OmniScriptBaseMixin
component to wrap a Salesforce Lightning Element. Replace the NS variable in the code example with the
namespace of the Vlocity package you are using. For more information on finding the namespace of your
package, see Viewing the Namespace and Version of the Vlocity Package.
import tmpl from './customLightningElement.html';

import { LightningElement } from 'lwc';
import { OmniscriptBaseMixin } from 'NS/omniscriptBaseMixin';
export default class customLightningElementWithMixin extends

OmniscriptBaseMixin(LightningElement) {
handleBlur(evt) {
this.omniUpdateDataJson(evt.target.value);
}
render() {
return tmpl;
}
}
Validating the Component

To add validation to a custom component, redefine the checkValidity() function in your component.
This code example contains a checkValidity() function that returns false when the sum is less than
zero. Replace the NS variable in the code example with the namespace of the Vlocity package you are
using.
import { api } from 'lwc';

import { OmniscriptBaseMixin } from 'NS/omniscriptBaseMixin';

company 348
OmniStudio
export default class MyCustomLwc extends OmniscriptBaseMixin(LightningElement)

{
sum = 0;
// defining custom validation conditions

@api checkValidity() {
return this.sum < 100;
}
}
Navigating to a Step
Beginning with Vlocity Insurance and Health Winter '20 , enable users to navigate to different steps in the
OmniScript using these three mixins:
• omniNextStep(): Advances users to the next Step in the OmniScript.

JS Example
nextButton(evt) {
if (evt) {
this.omniNextStep();
}
}
HTML Example
<button onclick={nextButton}>Custom Next Button </button>

• omniPrevStep(): Takes users to the previous step in the OmniScript.
JS Example
prevButton(evt) {
if (evt) {
this.omniPrevStep();
}
}
HTML Example
<button onclick={prevButton}>Custom Prev Button </button>

• omniNavigateTo(step): Takes users to a specific Step in the OmniScript by passing an argument.
The argument passed into the function can be a number that refers to the Step's index in the OmniScript
or a Step's Element name passed as a hardcoded string. The index for the current step is accessible
using the property this.omniScriptHeaderDef.asIndex.
NOTE
Auto advancing to a step more than one step ahead is not permitted.

company 349
OmniStudio
JS Example
goToStep(evt) {
if (evt) {
this.omniNavigateTo(this.omniScriptHeaderDef.asIndex - 2);
}
}
HTML Example
<button onclick={goToStep}>Custom Step Button </button>
Saving Data inside of a Custom Component

When the custom component does not exist in the DOM, store the data in a state. To store data in a state,
use the omniSaveState() function. The omniSaveState function accepts three arguments: a data object,
a key, and a boolean.
Method: omniSaveState(input,key,usePubSub=false):
Arguments:
• input: The data to be saved.
let mySaveState = {"my":"data"};

this.omniSaveState(mySaveState);
• (optional) key: A string value that the obj parameter maps to as a key-value pair. If a key is not sent as a
parameter, the key defaults to the name of the component.
let mySaveState = {"my":"data"};

let key = 'customLwcKey';
this.omniSaveState(mySaveState, key);
• (optional) usePubSub: Set the boolean to true to store data for use in a pubsub pattern. For more
information on pubsub patterns, see pubsub events. When left blank or set to false, the data is usable by
events. For more information on events, see LWC Events. When omniSaveState is in a
disconnectedCallback, usePubSub must be set to true to pass the event in the pubsub instead of
event bubbling.
Beginning with Vlocity Insurance and Health Winter '20 , optionally save the state within a disconnected
callback. Saving the state within a disconnected callback enables the state of the element to save when
users leave the element automatically. In disconnected callbacks, the usePubSub argument must be set to
true. Events in disconnected callbacks can only be passed using pubsub.
Example of an omniSaveState being called in a disconnectedCallback:
disconnectedCallback() {
let mySaveState = {"my":"data", "here" : 8};
let usePubSub = true;

company 350
OmniStudio
this.omniSaveState(mySaveState, key, usePubSub);

}
Retrieving Custom Component Data from an OmniScript

Use the omniGetSaveState() function to retrieve custom component data from an OmniScript.
omniGetSaveState(key): The omniGetSaveState accepts a key as an optional argument. If a key is not

sent, the key defaults to the name of the custom component. The key stores the data from the
omniSaveState() function.
Example with a key argument:

const state = this.omniGetSaveState(key);
Example with no key:
// assumes the data is inside of the same custom component

const state = this.omniGetSaveState()
Clearing a Saved State from a Previous Step

Beginning with Vlocity Insurance and Health Winter '20 , when a Custom LWC's saved state relies on data
from a previous step, you can conditionally clear the saved state of the Custom LWC whenever a user
navigates to a previous step. After configuration, the Step element passes a boolean flag to the custom
LWC. The code in your Custom LWC must use the boolean to determine whether to instantiate a new
saved state or continue using the existing saved state.
To configure the clear saved state functionality:
1. In OmniScript, determine the Step that clears the Custom LWCs saved state.
2. In the Step's properties, click Edit as JSON.
3. Enter the property "omniClearSaveState": [ ].
4. In the omniClearSaveState property, enter the name of one or more custom LWC elements
"omniClearSaveState": [ "CustomLWC1"]. The Step sends data to the Custom LWC enabling
the Custom LWC to determine if the Step rendered.
5. In your Custom LWC's code, retrieve the current state.
const state = this.omniGetSaveState()

6. In your Custom LWC's code, set a variable equal to
this.omniGetSaveState(this.omniJsonDef.name + '-$Vlocity.cleared'. The function
evaluates whether the previous Step containing the omniClearSaveState property rendered and
returns a boolean.
let stateCleared = this.omniGetSaveState(this.omniJsonDef.name + '-

$Vlocity.cleared');
7. Modify your code by using the boolean value to determine whether to keep the current saved state or
instantiate a new saved state.

company 351
OmniStudio
Accessing the Layout of the OmniScript Base Mixin

Call the Layout for your Custom LWC by passing the data-omni-layout parameter to the
getAttribute method.
this.getAttribute('data-omni-layout')
Making Remote Calls

Beginning with Vlocity Insurance and Health Winter '20 , enable users to make remote calls from a Custom
LWC by using the omniRemoteCall() method.
Method: omniRemoteCall(params, boolean)
Arguments:
• The first argument must be an object with the properties input, sClassName, sMethodName, and options.
The values of each of the properties must be in String data type.
NOTE
Methods called within a package must have the namespace prepended with ${this._ns}.
For example, `${this._ns}IntegrationProcedureService`.
const params = {
input: JSON.stringify(this.omniJsonData),
sClassName: 'SomeApexClass',
sMethodName: 'someApexMethod',
options: '{}',
};
• The second argument for omniRemoteCall is an optional boolean value that links a tracked property
called omniSpinnerEnabled. The HTML must have some code to check the boolean's value.
HTML Example
<template if:true={omniSpinnerEnabled}>
<div class="slds-spinner-container__wrapper">
<c-spinner variant="brand"
alternative-text="Loading.."
size="medium">
</c-spinner>
</div>
</template>
After omniRemoteCall executes, the response callback returns an object containing the two properties
result and error.
• result: The result property contains a raw response from the server.
• error: The error property stores an error value from the Vlocity's GenericInvoke2 class.

company 352
OmniStudio
Vlocity provides properties that, when passed in the options, enable jobs to be queuable, future, chainable,
and continuable.
Use Case Examples:
• Example remote call invoking an Apex class.
const params = {
input: this.omniJsonDataS,
options: '{}',
};
this.omniRemoteCall(params, true).then(response => {

window.console.log(response, 'response');
}).catch(error => {
window.console.log(error, 'error');
});
• Example Integration Procedure call. For information on Integration Procedures, see Integration
Procedures.
const params = {
input: this.omniJsonDataStr,
sClassName: `${this._ns}IntegrationProcedureService`,
sMethodName: 'test_RemoteAction', this will need to match the VIP ->
type_subtype
options: '{}',
};

}).catch(error => {
});
• Example chainable Integration Procedure call passing the property chainable: true. Use chainable
when an Integration Procedure exceeds the Salesforce CPU Governor limit.
const options = {
chainable: true,
};
const params = {
sMethodName: 'test_RemoteAction', this will need to match the VIP ->
type_subtype
options: JSON.stringify(options),

company 353
OmniStudio
};

}).catch(error => {
});
• Example queueable remote call passing the property useQueueableApexRemoting: true . For more
information on how queueable works, see Queueable Apex.
const options = {
vlcClass: 'SomeApexClass',
vlcMethod: 'someApexMethod',
useQueueableApexRemoting: true,
};
const params = {
sClassName: `$
{this._ns}VFActionFunctionController.VFActionFunctionControllerOpen`,
sMethodName: 'runActionFunction',
};

}).catch(error => {
});
• Example future remote call passing the property useFuture: true. For more information on how
Future Methods work, see Future Methods.
const options = {
useFuture: true,
};
const params = {
};

}).catch(error => {

company 354
OmniStudio
});
• Example continuation remote call passing the parameter useContinuation: true. For more
information on how continuation works, see Continuation Class.
const options = {
vlcClass: 'SomeApexClass',
vlcMethod: 'someApexMethod',
useContinuation: true,
};
const params = {
};

}).catch(error => {
});
Update the Data JSON
Update the Custom LWC Element's Data

Apply the response of a Custom LWC callout to the Custom LWC element by using the
omniUpdateDataJson method.
Method: omniUpdateDataJson(input, aggregateOverride = false)
Arguments:
• input: The first argument, input, accepts data in an object or primitive data type. Undefined is not
accepted. The input data either replaces the current value or merges with the existing data depending on
the setting of the second argument, aggregateOverride.
• aggregateOverride: The second argument, aggregrateOverride, controls how the data saves to the data
JSON. It is an optional argument that is set to false by default. When set to false, the input data merges
with the existing data. If the data is not an object it does not merge into the data JSON. When set to true,
the input data overrides any existing data in the Custom LWC element.
Examples:
• An example passing the input argument with the default aggregrateOverride behavior.
let myData = "myvalue" // any kind of data that is a string, object, number,
etc

company 355
OmniStudio
this.omniUpdateDataJson(this.myData);
• An example passing the input argument with the aggregateOverride argument set to false.
// 1. first call to omniUpdateDataJson

// input for omniUpdateDataJson when aggregateOverride = false
{
"prop1" : "data1"
}
// 2. output of data JSON after the first call

//
{
"Step1" : {
"CustomLWC1" : {
"prop1": "data1"
}
}
// 3. second call to omniUpdateDataJson

// input for omniUpdateDataJson when aggregateOverride = false
{
"prop2" : "data2"
}
// 4. output of data JSON after the second call

// notice that the value of CustomLWC1 contains both prop1 and prop2
// because the data is merged instead of replaced when aggregateOverride is
set to false
{
"Step1" : {
"CustomLWC1" : {
"prop1": "data1",
"prop2": "data2"
}
}
Map Responses to the OmniScript's Data JSON

Beginning with Vlocity Insurance and Health Winter '20 and CME Winter '20 , apply responses from custom
actions using the omniApplyCallResp() method.
The method accepts an object that it passes into the OmniScript's data JSON. If the root data node name in
the response matches an element name in the OmniScript, that data prefills the element, and any nested
elements, when it renders in the OmniScript. If the root node name does not match an element in the data
JSON, the node inserts into the data JSON immediately. Applying the response works similar to the Send/

company 356
OmniStudio
Response property. For information, see Manipulate JSON with the Send/Response Transformations
Properties.
Method: omniApplyCallResp(response, usePubsub = false)
Arguments:
• response: The first argument, response, is an object that merges into the data JSON.
• usePubSub: The second argument, usePubSub, controls how the response passes up to the
OmniScript header to merge into the data JSON. This boolean is set to false by default. When set to
false, response is sent to the OmniScript header via javascript events. When set to true, response is
sent to the OmniScript header by the pubsub module.
The usePubSub argument enables users to call omniApplyCallResp asynchronously. When running
asynchronously, the UI is not blocked waiting for the response.
Optionally perform a remote call by using the omniNextStep() method and calling the
omniApplyCallResp() method asynchronously.
This example demonstrates how the omniApplyCallResp() method updates Data JSON.
1. View the current data JSON before running omniApplyCallResp().
{
"Step1" : {
"Currency1" : 12345,
"Text1" : "data1"
},
"Step2" : {
"Text3": "data3"
}
}
2. Call omniApplyCallResp and pass data as an argument.
let myData = {
"Step1" : {
"CustomLWC1" : "newprop"
},
"Anotherprop" : {
"prop1" : "anothervalue"
}
}
this.omniApplyCallResp(myData);
3. View the updated data JSON.
{
"Step1" : {
"Currency1" : 12345,

company 357
OmniStudio
"Text1" : "data1",
"CustomLWC1" : "newprop"
},
"Step2" : {
"Text3": "data3"
},
"Anotherprop" : {
"prop1" : "anothervalue"
}
}
Create and Map Data Inside the Custom LWC Element

Beginning with Vlocity Insurance and Health and Vlocity CME Summer '20, construct additional data JSON
nodes in the Custom LWC element and pass values down from the element into the new JSON nodes
using the omniaggregate event.For more information on events, see Create and Dispatch Events
(Salesforce documentation).
Event: omniaggregate
1. Create a custom aggregate function and set the omniaggregate event to a variable.
Example:
customAggregate() {
const eventName = 'omniaggregate'
}
2. Create a variable to store the LWC element's input data.
Example:
customAggregate() {
const data = {
anyKeyName : 'myElementData'
};
}
3. Construct an object by mapping the data to the key data, and an element name to the key elementId.
customAggregate() {
const data = {
};
const detail = {
data: data,
elementId: 'elementName2'
};
}

company 358
OmniStudio
4. (Optional) In the detail object, include the key-value pair aggregateOverride: true to override all
existing data in the Custom LWC element.
customAggregate() {
const data = {
};
const detail = {
data: data,
elementId: 'elementName2',
aggregateOverride: true
};
}
5. Create a new event object that passes the omniaggregate event and an object containing these four
properties:
• bubbles: A boolean that determines if the event bubbles up to the DOM.
• cancelable: A boolean that determines if the event is cancelable.
• composed: A boolean that determines if the event can pass through the shadow boundary.
• detail: Data passed in the event.
Example:
omniAggregate() {
const data = {
};
const detail = {
data: data,
};
const myEvent = new CustomEvent(eventName, {
bubbles: true,
cancelable: true,
composed: true,
detail: detail,
});
}
6. Call this.dispatchEvent() and pass in the event object as a parameter.

company 359
OmniStudio
Code Example Data JSON Result Example

// code to call "CustomLWC12": {
omniAggregate() { "elementName1": {
const eventName = 'omniaggregate' "prop": "prop1"
const data = { },
anyKeyName : 'myElementData' "elementName2": {
}; "anyKeyName": "myElementData"
const detail = { }
data: data, }
};
bubbles: true,
cancelable: true,
composed: true,
detail: detail,
});
this.dispatchEvent(myEvent);
}
What's Next
Add a Custom Lightning Web Component to a Custom LWC Element
See Also
• Create a Custom Lightning Web Component for OmniScript

• Create a Standalone Custom Lightning Web Component
Create a Standalone Custom Lightning Web Component

Enable custom Lightning web components to act independently from an OmniScript by adding it to the
OmniScript as a standalone component. For information on the different ways to create a custom Lightning
web component for OmniScript, see Create a Custom Lightning Web Component for OmniScript.
Requirements
• The component cannot extend an OmniScript element's Lightning web component.

• The component cannot extend the OmniScriptBaseMixin component.
• The component can only interact with OmniScript through the omniscriptaggregate event.
Salesforce Modules.
• To make the custom Lightning web component compatible with Vlocity Lightning web components, you
• runtimeNamespace: You must add the namespace of your Vlocity package to the XML metadata file
in your component by using the runtimeNamespace metadata tag. Replace the NS variable in the
code example with the namespace of your Vlocity package. For more information on finding the
<runtimeNamespace>NS</runtimeNamespace>

company 360
OmniStudio
Components.
Create and Map Data Inside the Custom LWC Element

Beginning with Vlocity Insurance and Health and Vlocity CME Summer '20, construct additional data JSON
nodes in the Custom LWC element and pass values down from the element into the new JSON nodes
using the omniaggregate event.For more information on events, see Create and Dispatch Events
(Salesforce documentation).
Event: omniaggregate
1. Create a custom aggregate function and set the omniaggregate event to a variable.
Example:
customAggregate() {
}
2. Create a variable to store the LWC element's input data.
Example:
customAggregate() {
const data = {
};
}
3. Construct an object by mapping the data to the key data, and an element name to the key elementId.
customAggregate() {
const data = {
};
const detail = {
data: data,
};
}
4. (Optional) In the detail object, include the key-value pair aggregateOverride: true to override all
existing data in the Custom LWC element.
customAggregate() {
const data = {
};

company 361
OmniStudio
const detail = {
data: data,
elementId: 'elementName2',
aggregateOverride: true
};
}
5. Create a new event object that passes the omniaggregate event and an object containing these four
properties:
• bubbles: A boolean that determines if the event bubbles up to the DOM.
• cancelable: A boolean that determines if the event is cancelable.
• composed: A boolean that determines if the event can pass through the shadow boundary.
• detail: Data passed in the event.
Example:
omniAggregate() {
const data = {
};
const detail = {
data: data,
};
bubbles: true,
cancelable: true,
composed: true,
detail: detail,
});
}
6. Call this.dispatchEvent() and pass in the event object as a parameter.

company 362
OmniStudio
Code Example Data JSON Result Example

// code to call "CustomLWC12": {
omniAggregate() { "elementName1": {
const eventName = 'omniaggregate' "prop": "prop1"
const data = { },
anyKeyName : 'myElementData' "elementName2": {
}; "anyKeyName": "myElementData"
const detail = { }
data: data, }
};
bubbles: true,
cancelable: true,
composed: true,
detail: detail,
});
this.dispatchEvent(myEvent);
}
What's Next
See Also
• Communicate with OmniScript from a Lightning Web Component

• Custom LWC Element
• Extend the OmniScriptBaseMixin Component
Communicate with OmniScript from a Lightning Web Component

Send data from OmniScript Actions and Steps to other LWCs using the Pub/Sub property.
The Pub/Sub property enables Action elements and Step elements to send data in Key-Value pairs to other
LWCs. LWCs must register the OmniScript component's event name and add code to handle the data sent
from the event.
Before You Begin

Review the Salesforce documentation on using PubSub. See Communicate Between Components.
NOTE
Beginning with Vlocity Insurance and Health Spring '20, the Step element supports the
Pub/Sub property.
1. In an OmniScript Action or Step, select the Messaging Framework and check Pub/Sub.
2. In the Key and Value fields, configure which data to pass to another LWC.

company 363
OmniStudio
a. In the Key field, enter a name to store the value.

b. In the Value field, enter data to pass to the LWC. The field accepts merge syntax.
Action Example Step Example

Pass data from the Action's response in the value field using Pass data from an element within the Step using
merge syntax. For example, to pass the response node merge syntax. For example, to pass a Text element
"accountId", enter %accountId% in the Value field. named Text1, enter %Text1% in the Value field.
3. Activate the OmniScript.

4. In an LWC that receives data from the Action or Step, import the pubsub module. Using this example,
replace ns with the namespace of your Vlocity package. See Viewing the Namespace and Version of
import pubsub from 'ns/pubsub';

5. In the LWC, register the pubsub event. The even must register after the component renders.
Action pubsub Event Step pubsub Event

pubsub.register('omniscript_action', { pubsub.register('omniscript_step', {
data: this.handleOmniAction.bind(this), data: this.handleOmniStepLoadData.bind(this),
}); });
6. In the LWC, create a pubsub event handler.
Action Event Handler Example Step Event Handler Example

handleOmniAction(data) { handleOmniStepLoadData(data) {
// perform logic to handle the Action's // perform logic to handle the pubsub data from
response data the Step
} }
7. (Optional) If different Actions or Steps require different logic in the code, use a switch statement to
determine how to handle the event. For information on switch statements, see switch.

company 364
OmniStudio

Access the Action's Element Name using data.name. Access the Step's Element Name using data.name.
switch(data.name) { switch(data.name) {
case 'SomeNameForAction': case 'FirstStep':
this.handleSomeNameForAction(data);
break; this.handleOmniFirstStepLoadData(data);
case 'SomeNameForAction2': break;
this.handleSomeNameForAction2(data); case 'SecondStep':
break;
default: this.handleOmniSecondStepLoadData(data);
// handle default case break;
} default:
} // handle default case
}
handleSomeNameForAction(data) { }
// perform some logic specific to
SomeNameForAction action handleOmniFirstStepLoadData(data) {
// that has element name = // perform some logic specific when a
"SomeNameForAction" Step element which name is
} // FirstStep is loaded
}
handleSomeNameForAction2(data) {
// perform some logic specific to handleOmniSecondStepLoadData(data) {
SomeNameForAction2 action // perform some logic specific when a
// that has element name = Step element which name is
"SomeNameForAction2" // SecondStep is loaded
} }
Access the Action's Element Type using data.type. n/a
handleOmniAction(data) {
switch(data.type) {
case 'Integration Procedure Action':
this.handleIPActionPubsubEvents(data);
break;
case 'Remote Action':
this.handleRemoteActionPubsubEvents(data);
break;
default:
// handle default case
}
}
handleIPActionPubsubEvents(data) {
Integration Procedure Actions
}
handleRemoteActionPubsubEvents(data) {
// perform some logic specific to Remote
Actions
}
See Also
• Message with Window Post Messages and Session Storage Messages


company 365
OmniStudio
Make Remote Calls from Lightning Web Components using the LWC OmniScript Action
Framework
Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, LWC OmniScripts
make remote calls using a new action framework built with JavaScript classes. The Action framework is
available to all custom LWCs in your Salesforce org. Enable an LWC to make remote calls using specific
functionalities by importing the Common Action Utility class into the LWC.
NOTE
Custom LWCs extending the OmniScript Base Mixin must use the omniRemoteCall()
function. For more information, see Extend the OmniScriptBaseMixin Component.
Generic Framework Flow Diagram

The Generic Framework Flow diagram illustrates the order that the Common Action Utility methods
execute.
Requirements
To make the custom Lightning web component compatible with Vlocity Lightning web components, you
• runtimeNamespace: You must add the namespace of your Vlocity package to the XML metadata file in
your component by using the runtimeNamespace metadata tag. Replace the NS variable in the code
example with the namespace of your Vlocity package. For more information on finding the namespace of
your package, see Viewing the Namespace and Version of the Vlocity Package.

company 366
OmniStudio
Salesforce Modules.
Components.
NOTE
Custom Lightning Web Components will not throw errors unless Debug Mode is enabled.
Best Practice
When making remote calls, start the flow with the executeAction method. Do not start the flow with the
invokeAction method. To standardize the action flow and use the built-in logic of the action framework,
Vlocity recommends that all action flows begin with executeAction.
NOTE
The invokeAction method's purpose is to make the remote call with request parameters
processed by the preProcess method. The preProcess method, by default, supports
queueable and chainable process flows. The postProcess method standardizes the
response in a predictable format.
Common Action Utility

Make remote calls from any custom LWC using the Common Action Utility. The Common Action Utility
relies on the Vlocity Action Framework to make remote calls without the dependency of a strict OmniScript
data structure.
Utility: omniscriptActionUtils
Utility Class Name: OmniscriptActionCommonUtil

company 367
OmniStudio
Defined Methods
Method Name Description Argument - Data Type Returns

executeAction Begins the execution of an action flow. • params - object promise
• queueableId - string
• comp - component
• payload - object
• vlcParams - object
handleActionEvent Handles action events once the remote call obtains a response. • comp - component void
s It can be configured to send events to the OmniScript Designer • resp - object
Debug console. Configured for sending pubsub events. • params - object
• element - object
In LWC, if sendDataToDebugConsole is defined in the
component, event logs can be sent to the Debug Console in the
Omniscript Designer. If the component is not in OmniScript,
define _debugLabel in the component populate the debug log
event name. If from omniscript, the debug log event name is
populated from the label property in the element's property set.
invokeAction Method that invokes an Apex class or a Promise resolution using • data - object promise
an action transformed request. • comp - component
• (optional) payload -
object
postProcess Post-processes remote call response for both successful and • resp - object object
failed remote calls and returns a post-processed response. The • element - object
return contains an object with the key nodes: • comp - component
• (optional) failure -
• result: stores the remote call's raw response boolean
• error: boolean
preProcess Preprocesses remote call parameters before invoking an action. • params - object object
• queueableRespId -
string
• comp - component
• payload - object
• vlcParams - object
Available Variables
Variable Name Description

_ns Namespace in dot notation
_element (Optional) Omniscript element JSON definition
Implementing the Common Action Utility

To implement the Common Action Utility:
1. Obtain the dot notation format of the namespace in your LWC by importing
getNamespaceDotNotation from omniscriptInternalUtils. Replace NS in the first line of
code with the namespace of your package. For information on finding the namespace of your package,
see Viewing the Namespace and Version of the Vlocity Package.

company 368
OmniStudio
NOTE
Remote calls made to Apex classes inside a vlocity managed package must include
the namespace in the sClassName parameter sent into the executeAction.
import { getNamespaceDotNotation } from 'NS/omniscriptInternalUtils';

_ns = getNamespaceDotNotation();
2. Import OmniscriptActionCommonUtil into your LWC from the utility
class omniscriptActionUtils. Replace NS in the first line of code with the namespace of your
package. For information on finding the namespace of your package, see Viewing the Namespace and
Version of the Vlocity Package.
import { OmniscriptActionCommonUtil } from 'NS/omniscriptActionUtils';

3. Create an instance of the OmniscriptActionCommonUtil javascript class.
this._actionUtilClass = new OmniscriptActionCommonUtil();

4. Use the OmniscriptActionCommonUtil methods to execute remote calls to the server.
• The most common flow is to use the executeAction method. This method starts the remote call
flow, and the response callback from executeAction returns an object that has these properties:
• result: Contains the response from the remote call.
• error: Contains a boolean indicating the invoke status of GenericInvoke2.
• Parameters sent into the executeAction must be in an object format. The object must have the
following keys:
• input
• sClassName
• sMethodName
• options
NOTE
Each key requires a stringified value.
• If the LWC displays in the Omniscript Designer, it is possible to send events to the Debug Console.
Send events to the Debug Console by including the sendDataToDebugConsole method in your
LWC. The method provides logic on sending events to the Debug Console.
sendDataToDebugConsole accepts these arguments:
• params
• resp
• label
Examples
To use the Common Action Utility, refer to these examples:

company 369
OmniStudio
• Sample remote call using executeAction:
}
triggerRemote() {
const params = {
input: '{}',
sClassName: 'LwcTest',
sMethodName: 'lwctest',
options: '{}',
};
this._actionUtilClass
.executeAction(params, null, this, null, null)
.then(response => {
window.console.log(response);
})
.catch(error => {
window.console.log(error);
});
}
• Sample sendDataToDebugConsole method:
sendDataToDebugConsole(params, resp, label) {

let sendParams = JSON.parse(JSON.stringify(params));
if (sendParams && sendParams.options) {
let optionNode = JSON.parse(sendParams.options);
delete optionNode.options;
delete optionNode.input;
sendParams.options = optionNode;
}
let sendResp = JSON.parse(JSON.stringify(resp));
// for queueable support

if (sendResp && sendResp.responseResult) {
sendResp.responseResult = JSON.parse(sendResp.responseResult);
}
// dispatches action data to debug console

const debugEvent = new CustomEvent('omniactiondebug', {
bubbles: true,
cancelable: true,
composed: true,
detail: {

company 370
OmniStudio
params: sendParams,
response: sendResp,
element: { label: label },
},
});
this.dispatchEvent(debugEvent);
}
• Sample queueable remote call using executeAction:
}
triggerQueueable() {
const options = {
input: '{}',
vlcClass: 'LwcTest',
vlcMethod: 'lwctest',
useQueueableApexRemoting: true,
};
const params = {
input: '{}',
sClassName: `$
{this._ns}VFActionFunctionController.VFActionFunctionControllerOpen`,
sMethodName: 'runActionFunction',
};
.then(response => {
})
.catch(error => {
});
}
• Sample continuation remote call using executeAction:
}
triggerContinuation() {
const options = {
input: '{}',
vlcClass: 'QeRemoteAction2',

company 371
OmniStudio
vlcMethod: 'populateElements',
useContinuation: true,
};
const params = {
input: JSON.stringify(this.omniJsonData),
sClassName: 'QeRemoteAction2',
sMethodName: 'populateElements',
};
.then(response => {
})
.catch(error => {
});
}
• Sample future remote call using executeAction:
}
triggerFuture() {
const options = {
useFuture: true,
};
const params = {
input: '{}',
sMethodName: 'Test_Chainable',
};
.then(response => {
})
.catch(error => {
});
}
• Sample chainable remote call using executeAction:

company 372
OmniStudio
}
triggerChainable() {
const options = {
chainable: true,
};
const params = {
input: '{}',
};
.then(response => {
})
.catch(error => {
});
}
• Sample parameters for a remote call from inside a Vlocity package:
const params = {
input: '{}',
options: '{chainable: true}',
};
Add Validation to a Custom Lightning Web Component in OmniScript

Add validation to custom Lightning web components that extend an OmniScript element's component by
using Vlocity's built-in validation methods.
The omniscriptValidation component provides the OmniScript element's component with the functions to
enable validation. For information on using validation in custom components that do not extend an
OmniScript element's component, see Extend the OmniScriptBaseMixin Component.
OmniScript Validation ReadMe

View validation examples for custom Lightning web components in the OmniScript Validation
(omniscriptValidation) ReadMe.
Customize the Step Chart Component

Add customizations to your Step Chart by extending the Step Chart Lightning web components, the
StepChart component, and the Step Items component.

company 373
OmniStudio
The stepChartItems Lightning web component contains logic that determines the different step statuses the
step chart and its labels display. For information on extending OmniScript Lightning web components, see
Extend an OmniScript Element's Lightning Web Component.
1. Create a custom Step Chart Lightning web component that extends the stepChart Lightning web
component. For more information, download the ReadMe LWC OmniScript ReadMe Reference.
2. Extend the stepChartItems Lightning web component in one of two ways:
• Customize the stepChartItems LWC by creating an additional custom component that extends the
stepChartItems LWC. For more information, download the ReadMe LWC OmniScript ReadMe
Reference.
• Extend the stepChartItems LWC directly in your custom Step Chart LWC. The default behavior and
styling of the stepChartItems LWC will display in your custom Step Chart LWC.
3. (Optional) If a custom Step Chart Items LWC exists, extend that component in your custom Step Chart
component.
4. After deploying custom LWCs to Salesforce, open an OmniScript.
5. In the OmniScript's Script Configuration properties, go to Element Type To LWC Component
Mapping, and click Add New Mapping.
6. In the Element Type field, enter StepChart.
7. In the Lightning Web Component field, enter the name of your custom Lightning web component.
8. Activate the OmniScript, and Preview your changes.
See Also

• Extend an OmniScript Element's Lightning Web Component
Extend and Override an OmniScript Modal Lightning Web Component

Customize modals in OmniScript by extending and overriding the Modal LWC.
Required Versions
Available with Vlocity Insurance and Health Spring '20 and CME Fall '20.
Default Modal Default Error Modal
1. Create a custom LWC that extends the omniscriptModal LWC and add it to your Salesforce org.
See Extend an OmniScript Element's Lightning Web Component.
2. The custom modal LWC must have these three slots for OmniScript to insert content into the modal:

company 374
OmniStudio
<slot name="header></slot>
<slot name="content></slot>
<slot name="footer"></slot>
3. In OmniScript Setup , scroll to the Element Type to LWC Component Mapping property.
4. In the Element Type field, enter Modal.
5. In the Lightning Web Component field, enter the name of the custom LWC.
6. Activate and preview the OmniScript to view your modal changes.
See Also
• Customize the Step Chart Component

• Deploy Lightning Web Components
Extend and Override the Save for Later Acknowledge Lightning Web Component
Customize the Save for Later messaging modal in OmniScript by extending and overriding the Save for
later Acknowledge LWC.
Required Versions
Available with Vlocity Insurance and Health Spring '20 and CME Fall '20.
Default Save for Later Acknowledge message:
To extend and override the Save for Later Acknowledge LWC:
1. Create a custom LWC that extends the omniscriptSaveForLaterAcknowledge LWC and add it to
your Salesforce org. See Extend an OmniScript Element's Lightning Web Component.
2. From OmniScript Setup or Script Configuration, scroll to the Element Type to LWC Component
Mapping property.
3. In the Element Type field, enter SaveForLaterAcknowledge.

company 375
OmniStudio
4. In the Lightning Web Component field, enter the name of the custom LWC.
5. In Save Options, check Allow Save For Later.
6. Activate and preview the OmniScript to view the save for later override.
See Also

• Deploy Lightning Web Components
Add Custom Lightning Web Components to an OmniScript

After you Create a Custom Lightning Web Component for OmniScript, apply the component's new behavior
by adding it to an OmniScript.
Use the custom component to override an individual OmniScript element's component, override all
OmniScript element components of one element type, or to add an entirely custom component that does
not extend an element's component.
Mapping Option Description

Override an Element's Lightning Web Component Override an individual element's LWC.
Map an Element Type to a Custom Lightning Web Override the LWC for every element of a specific element Type—for
Component example, override the element Types Text or Currency.
Add a Custom Lightning Web Component to a Custom Add custom LWCs that do not extend an existing OmniScript element using
LWC Element the Custom LWC element.
NOTE
See Also

• Style OmniScripts
Override an Element's Lightning Web Component

Override an element's component using the element's LWC Component Override

company 376
OmniStudio
The custom LWC must extend the element's component because OmniScript passes in properties specific
to the original component that the custom component is overriding. For more information on extending
OmniScript element components, see Extend an OmniScript Element's Lightning Web Component.
1. From the element's properties pane, in the LWC Component Override field, enter the name of a
custom Lightning web component.
2. Save and Activate the OmniScript.
3. Activate the OmniScript and click the Preview tab to preview the OmniScript.
What's Next
Deploy your OmniScript to preview the Custom LWC's design and behavior. See Activate and Deploy an
LWC OmniScript.
See Also
• Add Custom Lightning Web Components to an OmniScript

Map an Element Type to a Custom Lightning Web Component

Override all elements of one type with a custom Lightning web component by mapping the element type to
the Custom LWC.
The custom Lightning web component must extend the Element Type's Lighting web component. For
example, to override all of the Text elements in the OmniScript, the custom component must extend the
OmniScriptText component.
1. From the OmniScript's Script Configuration, locate the property Element Type To LWC Component
Mapping, and click New Mapping.
2. In the Element Type field, enter the Element type that the custom component overrides.
3. In the Lightning Web Component field, enter the name of the custom component that overrides the
element type.
5. Click Preview to preview the OmniScript.
What's Next
LWC OmniScript.
See Also


Add custom Lightning web components that do not extend an OmniScript element's component by using
the Custom LWC element.

company 377
OmniStudio
The Custom LWC element enables custom components to either interact with the OmniScript or to act as a
standalone component. Standalone components do not interact with the OmniScript or the OmniScript's
data JSON.
Add a Custom LWC that Extends the OmniScript Base Mixin

To add a custom Lightning web component to a Custom LWC element:
NOTE
Enable custom Lightning web components to interact with OmniScript by extending the
OmniScriptBaseMixin component. Custom Lightning web components extending the
OmniScriptBaseMixin cannot extend an OmniScript element's component. For more
information on the OmniScriptBaseMixin, see Extend the OmniScriptBaseMixin
Component
1. Drag a Custom LWC element from Inputs into the canvas.

2. In the Lightning Web Component Name field, enter the name of a component that extends the
OmnIScriptBaseMixin.
3. (Optional) Expand the Custom Lightning Web Components Properties section and click Add New
Option.
4. (Optional) In the Property Name field, enter the name of a property that is defined in the custom
Lightning web component.
5. (Optional) In the Property Source field, enter a string or a merge field.
Add a Standalone Custom LWC

To add a standalone custom Lightning web component to an OmniScript:
NOTE
Standalone custom Lightning web components cannot extend any OmniScript element
component or the OmniScriptBaseMixin component. The standalone component supports
custom functionalities but cannot interact with an OmniScript. For more information on the
standalone components, see Create a Standalone Custom Lightning Web Component.
1. Drag a Custom LWC element from Inputs into the canvas.

2. In the Lightning Web Component Name field, enter the name of a Lightning web component.

company 378
OmniStudio
3. Check the Standalone checkbox.

What's Next
LWC OmniScript.
See Also

Style OmniScripts
Add custom styling to OmniScripts by using static resources, extending an Element's Lightning web
component, overriding global stylesheets, or using SLDS design tokens.
View the behavior of each customization option in this page's table, and choose the solution that meets
your requirements.
Styling Option Description Supported Design

Systems
Apply Custom Styling to OmniScripts Add custom styles to OmniScript using a custom style sheet. SLDS, NDS
with Static Resources
Extend an OmniScript Element's Create a custom LWC that extends an OmniScript to add custom SLDS, NDS
Lightning Web Component HTML, JS, and CSS.
Apply Global Branding to OmniScripts Override the Newport Design System with custom styles for an NDS
entire Salesforce org.
Customize SLDS Design Tokens in Add customizations to SLDS Design Tokens that exist in the SLDS
OmniScript OmniScript.
See Also

• Extend and Override an OmniScript Modal Lightning Web Component
• Extend and Override the Save for Later Acknowledge Lightning Web Component
Apply Custom Styling to OmniScripts with Static Resources

Apply CSS changes to an OmniScript using SLDS or Newport styling by referencing a CSS file static
resource in the Styling Options section of the LWC OmniScript Designer. For example, a CSS sheet can
change the text color for every Number element in an OmniScript without using custom Lightning web
components to override the Number element.
Required Versions
Available beginning with Vlocity Insurance and Health Summer '20 and CME Fall '20.

company 379
OmniStudio
NOTE
To add custom stylesheets to individual OmniScripts prior to Vlocity Insurance and Health
Summer '20, see Reference Stylesheet Names in an OmniScript's JSON.
NOTE
Beginning with Vlocity Insurance and Health Summer '20, Multi-Language OmniScripts
provide beta support for right-to-left languages. See Create Multi-Language OmniScripts.
Before You Begin

1. Choose SLDS or Newport as the OmniScript theme.
2. View the OmniScript's original CSS by inspecting the element's on the page in console tools or by downloading the CSS files for
LWCs in the OmniScript. Download.
3. Create a CSS style sheet with custom CSS.
4. In Salesforce, add the CSS file as a static resource. See Using Static Resources (Salesforce Documentation).
1. In the LWC OmniScript Designer, click Setup, and click Styling Options.
2. In the Custom Lightning Stylesheet File Name or Custom Newport StyleSheet File Name field,
enter the name of that Static Resource that stores your custom Lightning or Newport styling.

company 380
OmniStudio
3. (Optional) To add custom styling for right-to-left languages, see Reference Stylesheet Names in an
OmniScript's JSON.
4. Activate and preview the OmniScript to view your custom styling.
See Also
• Apply Global Branding to OmniScripts
• Create Multi-Language OmniScripts
Reference Stylesheet Names in an OmniScript's JSON

Apply CSS changes to an OmniScript using SLDS or Newport styling by referencing a CSS file static
resource in your OmniScript's JSON properties. For example, a CSS sheet can change the text color for
every Number element in an OmniScript without using custom Lightning web components to override the
Number element.

company 381
OmniStudio
Required Versions
Available beginning with Vlocity Insurance and Health Spring '20 and CME Fall '20.
Before You Begin

1. Choose SLDS or Newport as the OmniScript theme.
2. View the OmniScript's original CSS by inspecting the element's on the page in console tools or by downloading the CSS files for
LWCs in the OmniScript. Download.
3. Create a CSS style sheet with custom CSS.
4. In Salesforce, add the CSS file as a static resource. See Using Static Resources (Salesforce Documentation).
NOTE
Beginning with Vlocity Insurance and Health Summer '20, Multi-Language OmniScripts
provide beta support for right-to-left languages.
1. In OmniScript, go to Setup or Script Configuration and click Edit as JSON.

2. In the JSON properties, find the node named style sheet:
"stylesheet": {
"newport": "",
"lightning": ""
}
3. Add the name of the static resource as a value to newport or lightning.
"stylesheet": {
"newport": "",
"lightning": "myCustomOmniScriptStyles"
}
4. (Optional) Available beginning with Vlocity Insurance and Health Summer '20. Add the name of the
static resource as a value to newportRtl or lightningRtl to display the styling for right-to-left
languages. If you are updating an existing OmniScript, add newportRTL and lightningRtl
manually.
"stylesheet": {
"newport": "",
"lightning": "",
"newportRtl": "myRtlNewportStyles",
"lightningRtl": ""
}
5. Activate and preview the OmniScript to view your custom styling.

company 382
OmniStudio
See Also
Apply Global Branding to OmniScripts

Apply global style changes to OmniScripts by using the Newport Design System. The Newport Design
System enables you to download, edit, and override the existing Newport CSS styling to apply your
changes.
Required Versions
Before You Begin

If you are unfamiliar with using command-line interfaces, see Command Line 101 (git-tower documentation).
System Requirements:
• Git (git-scm documentation)

• nodeJS v12.0 or higher (Node documentation)
• Gulp CLI: npm install --global gulp-cli
1. Ensure that Node and NPM are installed on your local computer using the commands NPM outlines in
their documentation https://www.npmjs.com/get-npm. If you do not have Node or NPM, download them
from https://nodejs.org/en/download/.
2. Clone vlocityinc/newport-design-system from https://github.com/vlocityinc/newport-design-system
using a command-line interface. To see which components are provided by Newport, look at the UI/
components directory.
3. From the GitHub page, perform the latest steps to install the correct dependencies.
4. After installation is complete, launch the Storybook.js preview by issuing the command npm start.
5. Review the documentation in the Storybook preview.
6. Add customizations to your theme. See Customizing OmniScripts and Cards with Vlocity Newport
Design System.
7. Apply the OmniScript to individual OmniScripts or override the Newport theme for the entire org. See
Deploy and Apply Global Styling Changes using the Newport Design System.
8. Preview the changes in your Salesforce org by using the Newport Player in the OmniScript Designer
Preview.
See Also
• Apply Custom Styling to OmniScripts with Static Resources

Customize SLDS Design Tokens in OmniScript

Modify the appearance of an OmniScript by overriding Salesforce's SLDS Design tokens.

company 383
OmniStudio
OmniScript elements use SLDS Design Tokens for styling. Override tokens that have global access to
modify the appearance of your OmniScript.
NOTE
Design Tokens are not supported in Safari browsers, the classic OmniScript designer, and
Community pages.
Required Versions
Available beginning with Vlocity Insurance and Health Spring '20 and CME Fall '20.
Before You Begin

1. View the Design Tokens that have global access. See Design Tokens.
2. Preview and inspect an OmniScript in a developer console to view the current tokens present in the OmniScript.
1. In your OmniScript's Setup panel, click the Styling Options section or Lightning Design System
Design Tokens section.

company 384
OmniStudio
2. In the Lightning Design System Design Tokens field, enter tokens by applying these changes:
a. Remove the dashes and apply camelcase to the token. For example, the token $spacing-xx-
small must be $spacingXxSmall.
b. Replace the token's $ symbol with --lwc-.
--lwc-spacingXxSmall
c. Set the token's value, and end the line for each token using a ;.
--lwc-spacingXxSmall: 10rem;
--lwc-spacingSmall: 5rem;
--lwc-spacingMedium: 2rem;

company 385
OmniStudio
Customizing SLDS Design Tokens in the Classic OmniScript Designer

To override a token in the classic OmniScript designer:
1. In an OmniScript's Script Configuration, select Edit as JSON to open the JSON editor.
2. Add the node designTokenOverride.
3. Set the node's value to a token, and edit the token's syntax by applying these changes:
a. Remove the dashes and apply camelcase to the token. For example, the token $spacing-xx-
small must be $spacingXxSmall.
b. Replace the token's $ symbol with --lwc-.
--lwc-spacingXxSmall
c. Set the token's value, and end the line for each token in the designTokenOverride node using
a ;.
"designTokenOverride": "--lwc-spacingXxSmall: 10rem;

--lwc-spacingSmall: 5rem;
--lwc-spacingMedium: 2rem;"
4. Activate the OmniScript, and preview it in the LWC OmniScript Designer or a Lightning page.
See Also

Deploy, Launch, and Embed LWC OmniScripts

Deploy your OmniScript and launch it from a Community page, Lightning page, custom LWC, or off-platform
application.
Generate the OmniScript's Lightning web component by deploying your OmniScript. Add the generated
LWC to Lightning pages, Community pages, third-party applications, and custom LWCs to launch your
OmniScripts.
1. Deploy your OmniScript. See Activate and Deploy an LWC OmniScript.

2. After deploying your OmniScript, launch your OmniScript from one of these experiences:

company 386
OmniStudio
Experience Description Example

Community Pages Launch an OmniScript from a Community page using the Add an LWC OmniScript to a
OmniScript's generated LWC or the Vlocity LWC Community or Lightning Page.
OmniScript Wrapper component.
Embedded inside of Launch an OmniScript from a custom Lightning web Embed an OmniScript Lightning Web
a custom component by embedding the OmniScript's LWC. Component in a Lightning Web
component Component
Off-Platform Run OmniScripts off-platform using OmniOut. Available Run LWC OmniScripts Outside of
beginning with Vlocity Insurance and Health and Vlocity Salesforce with LWC OmniOut
CME Summer '20.
Lightning Pages Launch an OmniScript from a Lightning page using the Add an LWC OmniScript to a
Activate and Deploy an LWC OmniScript

Make OmniScripts available to Communities, Lightning Pages, custom LWCs, and Lightning tabs by
activating and deploying the OmniScript.
1. From OmniScript, click Activate to activate the OmniScript and deploy the OmniScript automatically.
2. (Optional) Click Deactivate, and then Activate to redeploy the OmniScript and apply updates or
resolve a deployment issue.
3. (Optional) Exclusive to the Classic Designer, if there is an issue with the deployment, redeploy the
OmniScript by clicking the Deploy LWC button in the Script Configuration properties.
NOTE
Ensure the OmniScript is active, then click the Deploy LWC button to redeploy the
OmniScript.
4. After deploying your OmniScript, launch your OmniScript from one of these experiences:
Experience Description Example

Community Pages Launch an OmniScript from a Community page using the Add an LWC OmniScript to a
Embedded inside of Launch an OmniScript from a custom Lightning web Embed an OmniScript Lightning Web
a custom component by embedding the OmniScript's LWC. Component in a Lightning Web
component Component
Off-Platform Run OmniScripts off-platform using OmniOut. Available Run LWC OmniScripts Outside of
beginning with Vlocity Insurance and Health and Vlocity Salesforce with LWC OmniOut
CME Summer '20.
Lightning Pages Launch an OmniScript from a Lightning page using the Add an LWC OmniScript to a
5. (Optional) If an error occurs on the initial load of an OmniScript, in the OmniScript, click Deactivate,
then click Activate. This redeploys the OmniScript.
6. (Optional) Map deployment errors using the Error Handling Framework. Available beginning with
Vlocity Insurance and Health Winter '20 and Vlocity CME Fall '20 . See Customize OmniScript Error
Messages.

company 387
OmniStudio
Error Mapping Example:

Original error
Error Message Mapping a Path and Value to a new message
New error message
7. (Optional) Click the dropdown arrow, and click Download LWC to view the metadata for the
OmniScript.
What's Next
Add an LWC OmniScript to a Community or Lightning Page
See Also

• Embed an OmniScript Lightning Web Component in a Lightning Web Component
• Launching an LWC OmniScript from a Vlocity or Custom Action on a Card

company 388
OmniStudio
Launch LWC OmniScripts from Lightning and Community Pages

Launch LWC OmniScripts in Communities and Lightning Pages using the generated OmniScript
Component or the LWC OmniScript Wrapper component.
Generated LWC OmniScript Lightning Web Component or LWC OmniScript Wrapper?

Use this table to determine whether the LWC OmniScript Wrapper component or a generated LWC
OmniScript component meets your requirements.
Component Type Capabilities Reference

Generated OmniScript LWC • Automatically passes the RecordId for the page into the Add an
OmniScript's Data JSON in the ContextId node LWC
• Displays one layout, Lightning or Newport OmniScript
• Not directly URL addressable to a
• URL addressable through the Community Page or Lightning Community
Page URL or
Lightning
• Cannot accept parameters since it is not directly URL
Page
addressable
Vlocity LWC OmniScript Wrapper • Accepts additional URL parameters Launch an
• Loads in different OmniScripts based on parameters LWC
• Accepts prefill information OmniScript
• Compatible with LWC Save For Later prefill functionality with LWC
OmniScript
Wrapper
Add an LWC OmniScript to a Community or Lightning Page

Add an OmniScript to a Community or Lightning page by adding the OmniScript's generated Lightning web
component. The component is generated when you activate the OmniScript.
Before You Begin

1. Deploy an LWC OmniScript to make it available in Community and Lightning App Builders. For more information, see Activate and
Deploy an LWC OmniScript.
2. Review the options for launching an LWC OmniScript from a Lightning or Community Page. See Launch LWC OmniScripts from
Lightning and Community Pages.
Add your OmniScript to a Community Page

Add your OmniScript to a Salesforce Community page.
1. In a Community Builder, click on the Components tab.
2. Search for the name of your OmniScript by entering the OmniScript's unique Type, SubType, and
Language. Use the syntax Type/SubType/Language to search as the search does not ignore forward
slashes.

company 389
OmniStudio
3. Drag the component into the Community page.

4. (Optional) Apply Newport styling by entering newport into the layout field in the component's
properties panel. Lightning styling is the default styling when the layout property is blank.
5. (Optional) Configure the inline options. See Display Inline OmniScripts on Lightning and Community
Pages.

company 390
OmniStudio
6. (Optional) Control how right-to-left languages display. OmniScript provides beta support for right-to-left
languages. In the dir field, select whether the OmniScript displays ltr or rtl.Available beginning with
Vlocity Insurance and Health and Vlocity CME Summer '20.
7. (Optional) Change the device view in the Community Builder to Phone or Tablet to see how the
OmniScript displays on a mobile or tablet device. Available beginning with Vlocity Insurance and
Health and Vlocity CME Summer '20
Add your OmniScript to a Lightning Page

Add your OmniScript to a Salesforce Lightning page.
1. In a Lightning Page's App Builder, search for the name of your OmniScript by entering the OmniScript's
unique Type, SubType, and Language. Use the syntax Type/SubType/Language to search as the
search does not ignore forward slashes.
2. Drag the component into the Lightning Page.

3. (Optional) Apply Newport styling by entering newport into the layout field in the component's
properties panel. Lightning styling is the default styling when the layout property is blank.

company 391
OmniStudio
4. (Optional) Configure the inline options. See Display Inline OmniScripts on Lightning and Community
Pages.

company 392
OmniStudio
5. (Optional) Control how right-to-left languages display. OmniScript provides beta support for right-to-left
languages. In the dir field, select whether the OmniScript displays ltr or rtl. Available beginning
with Vlocity Insurance and Health and Vlocity CME Summer '20
6. (Optional) Modify the component's visibility by adding filters. For more information, see Dynamic
Pages.
7. (Optional) Change the device view of the App Builder to Phone to see how the OmniScript displays on
a mobile device. Available beginning with Vlocity Insurance and Health and Vlocity CME Summer '20
See Also
• Activate and Deploy an LWC OmniScript

Launch an LWC OmniScript with LWC OmniScript Wrapper

Launch LWC Omniscripts on Community and Lightning pages using the Vlocity LWC OmniScript Wrapper
component.
The wrapper component makes the OmniScript URL addressable to enable the passing of additional
parameters to the OmniScript. The Vlocity LWC OmniScript Wrapper component and the
vlocityLWCOmniWrapper are Aura components that wrap an OmniScript to make the OmniScript URL
addressable. For information on launching OmniScripts from a Card OS Action, see Launching an
OmniScript from an OS Action on a Card.
NOTE
If the LWC OmniScript Wrapper component exists on a record page, the record Id passes
into the OmniScript as the Context Id automatically.
Required Versions
Available beginning with the Vlocity Insurance and Health Winter '20, and Vlocity CME Winter '20.
Before You Begin

1. Deploy an LWC OmniScript to make it available in Community and Lightning App Builders. For more information, see Activate and
Deploy an LWC OmniScript.
2. Review the options for launching an LWC OmniScript from a Lightning or Community Page. See Launch LWC OmniScripts from
Lightning and Community Pages.
Launch OmniScripts in Communities from URLs

Launch any LWC OmniScript on a Community Page by sending a URL to the Vlocity LWC OmniScript
Wrapper component on the page.
To add the Vlocity LWC OmniScript Wrapper component to a Community page:

company 393
OmniStudio
1. On a Community Builder page, click on the Components tab.
2. Search for the Vlocity LWC OmniScript Wrapper component, and drag it onto the page.
3. Leave the fields in the component blank.
4. (Optional) To test an OmniScript using the LWC OmniScript Wrapper in the Community Builder:
1. In the LWC OmniScript Wrapper, check the Stand Alone Mode checkbox.
2. In the LWC OmniScript Name field, enter the component name of your OmniScript with the prefix
c:. The OmniScript's component name is a combination of the Type, SubType, and Language of
your OmniScript without spaces.
c:customTestEnglish

company 394
OmniStudio
To configure the URL to access the Vlocity LWC OmniScript Wrapper component:
1. Configure the URL for the Community page in a URL field, such as a URL in a Card Action or text
editor.
Example URL for a Community named AccountCommunity that has a page named AccountPage:
https://exampleURL.force.com/AccountCommunity/s/AccountPage?
2. In your OmniScript, click the How to Launch Activated Script button.
3. In the How to Launch modal, click the LWC tab.
4. In the Vlocity Aura Wrapper section of the LWC tab, copy the text appearing after the question mark.
https://exampleURL.na130.visual.force.com/lightning/cmp/
namespace__vlocityLWCOmniWrapper?
c__target=namespace:myLWCTestEnglish&c__layout=lightning
• The c__target parameter is set to a component indicated by c:. The component is the Name of your
OmniScript combined with the Type, SubType, and Language. This component passes into the LWC
OmniScript Name field of the Vlocity LWC OmniScript Wrapper.
• The c__layout parameter passes the layout to the Layout field of the Vlocity LWC OmniScript
Wrapper.
5. In the c__target parameter of the URL, replace the namespace with c.
c__target=c:myLWCTestEnglish&c__layout=lightning
6. Paste the copied text to the end of the Community Page URL.

company 395
OmniStudio
7. (Optional) Pass additional parameters by separating them with an ampersand, &. Parameters must use
the c__ prefix. For example, to pass "AccountName": "Acme" into the OmniScript's data JSON,the
syntax must be &c__AccountName=Acme.
8. (Optional) Fire events from the Navigate Action by passing an event to the OmniScript in the URL
parameter c__vlocEvents. The Navigate Action element must have the checkbox property LWC
PubSub Message? enabled to fire the event. To refresh Cards using events, see Reloading a Card
After Updating an LWC OmniScript.
Launching an LWC OmniScript in Lightning

To make an OmniScript URL addressable using the vlocityLWCOmniWrapper:
1. In your LWC OmniScript, click the How to Launch Activated Script button.
2. In the How to Launch modal, click the LWC tab.
3. In the Vlocity Aura Wrapper section of the LWC tab, copy the relative path of the URL.
https://exampleURL.na130.visual.force.com/lightning/cmp/
c__target=namespace:myLWCTestEnglish&c__layout=lightning
4. (Optional) Launch the OmniScript using a Newport layout by clicking Newport and copying the relative
path.
5. (Optional) When using the URL path in a production org, you must replace the namespace of your
component. In the c__target parameter of the URL, replace the namespace with c.
6. (Optional) Prefill an OmniScript by assigning prefill values with the prefix &c__ placed before the key.
For example, to pass "AccountName": "Acme" into an OmniScript's data JSON, add the parameter
using the syntax &c__AccountName=Acme. For more information on prefilling data, see Load Data
into OmniScript Elements.
lightning/cmp/NS__vlocityLWCOmniWrapper?
c__target=c:myTypeExampleEnglish&c__AccountName=Acme
7. (Optional) When using the wrapper in a console app, add a Console Tab Icon and a Console Tab Label
by setting the c__tabIcon and c__tabLabel parameters. The c__tabIcon accepts an SLDS Icon , and
c__tabLabel accepts plain text. For example, &c__tabLabel=Custom

company 396
OmniStudio
8. (Optional) To view additional parameters for the vlocityLWCOmniWrapper, see Launch Lightning Web
Component URLs with vlocityLWCWrapper.
9. (Optional) Fire events from the Navigate Action by passing an event to the OmniScript in the URL
parameter c__vlocEvents. The Navigate Action element must have the checkbox property LWC
PubSub Message? enabled to fire the event. To refresh Cards using events, see Reloading a Card
After Updating an LWC OmniScript.
10. Paste the URL wherever you plan to invoke the OmniScript from and preview the functionality.
Launching an LWC OmniScript from a Layout Action

To launch the LWC OmniScript from a layout action:
1. From Setup, enter Object Manager into the Quick Find search.
2. Select an Object, and click Buttons, Links, and Actions.
4. Set Display Type to Detail Page Button.
5. Set Content Source to URL.
6. Configure the URL value to equal the relative path of the vlocityLWCOmniWrapper. For information on
obtaining the relative path, see Launching an LWC OmniScript in Lightning.
Display Inline OmniScripts on Lightning and Community Pages

Enable LWC OmniScripts to run inline without leaving the context of a page.
An inline OmniScript renders as a button that, when clicked, launches the OmniScript inline. The record id
of a page passes into an inline OmniScript as a Context Id automatically. You can render more than one
inline OmniScript on a page beginning in Vlocity Insurance and Health Summer '20 and CME Fall '20 .
Required Versions
Available beginning with Vlocity Insurance and Health Spring '20 and Vlocity CME Summer '20.

company 397
OmniStudio
Before You Begin

Ensure your OmniScript is active. For more information, see Activate and Deploy an LWC OmniScript.
NOTE
Running OmniScripts in inline mode disables SEO Enabled and Save For Later.
1. From the Community or App Builder, add an activated OmniScript to a page. For information on adding
OmniScripts to a Lightning page, see Add an LWC OmniScript to a Community or Lightning Page.
2. In the OmniScript component, check the inline checkbox.
3. In the inlineLabel field, enter the text to display on the button.

4. (Optional) Choose an inlineVariant to alter the button's appearance.
5. (Optional) Enable events to fire by enabling Cancel Options. See Enable and Configure Cancel
Functionality in an LWC OmniScript.
6. Click Save, and preview the OmniScript.

company 398
OmniStudio
See Also

Embed an OmniScript Lightning Web Component in a Lightning Web Component

Embed an OmniScript LWC in a Lightning web component by copying the LWC OmniScript component tag
and adding it directly into a component.
NOTE
When passing data from an LWC into an embedded LWC OmniScript's prefill property, the
string values "true" and "false" will convert to boolean values. To avoid this issue,
stringify your values by adding additional quotation marks escaped by backslashes. For
example, to convert this prefill object prefill = { "Multi-select1":"true"} the
new syntax must be prefill = { "Multi-select1":"\"true\""}.
Embed the Component

Copy the OmniScript component tag and embed it in a component.
1. In an OmniScript Designer, copy the LWC OmniScript tag using one of these options:
• In the OmniScript Designer, click the dropdown menu, click How To Launch, and copy one of the
component tags.
• In the Classic Designer, copy the LWC OmniScript component tag from the Script Configuration
properties.

company 399
OmniStudio
• In the Classic Designer, copy the LWC OmniScript component code from one of the examples found
in the How to Launch activated script section of the OmniScript.

company 400
OmniStudio
2. In your component's HTML file, enter the component tag to embed the OmniScript component.
<template>
<c-doc-example-english layout="lightning"></c-doc-example-english>
</template>
Detect Data JSON Updates in an Embedded OmniScript

Detect changes in an embedded OmniScript's data JSON by using the omniaggregate event.
1. Add an event listener that accepts the omniaggregate event as an argument.
this.template.addEventListener( 'omniaggregate');

company 401
OmniStudio
2. Create a separate function that handles the response of the event and assigns the value to a variable.
omniUpdateHandler(event) {
if(event.detail) {
this.omniDataJSON = event.detail;
// do something with the data JSON
}
3. Add the function that handles the response as an argument to the event listener so that it fires
whenever the OmniScript data JSON updates.
this.template.addEventListener( 'omniaggregate',
this.omniUpdateHandler.bind(this));
Run LWC OmniScripts Outside of Salesforce with LWC OmniOut

Run LWC OmniScripts off-platform on third-party websites using LWC OmniOut.
OmniOut enables you to display OmniScripts and connect to Salesforce from a content management
system's external website. An OmniScript webform handles user input, stores data in a browser-side JSON
object, and sends and receives data to and from Salesforce and other APIs. Run an OmniScript on your
external site by adding an OmniScript to the OmniOut project, integrating OmniOut into your application,
and deploying your application to your CMS.
Required Versions
Available beginning with Vlocity Insurance and Health Summer '20 and CME Summer '20.
NOTE
CMS configuration is separate from OmniOut. You must complete your CMS configuration
before using OmniOut.
Before You Begin

1. Ensure you have a Content Management System built.
2. Install Node and npm. See Installing Node (node.js documentation).
3. Download Visual Studio Code. See Visual Studio Code (visual studio documentation).
1. Download the OmniOut static resource from Salesforce and open it in Visual Studio Code. See
Download the LWC OmniOut Static Resource.
2. Install dependencies for the OmniOut project. See Install LWC OmniOut Dependencies.
3. (Optional) Add any nested custom LWCs that exist in your OmniScript before adding an OmniScript to
OmniOut. See Include Nested Custom LWCs in Your OmniOut OmniScript.
4. Download and add your OmniScript to the OmniOut project. See Add an OmniScript Lightning Web
Component to OmniOut.

company 402
OmniStudio
5. Create a Connected App to enable a Salesforce API connection. See Create a Connected App for
OmniOut.
6. (Optional) Configure OmniOut to use multi-language OmniScripts. See Configure Multi-Language in
OmniOut
7. Run OmniOut in development mode to view and test your OmniScript. See Run OmniOut in
Development Mode
8. (Optional) Control where OmniScripts direct users by using the Navigate Action. See Navigate to a URL
from an OmniOut App.
9. (Optional) Add OmniOut to your application. This step is required if you are not deploying to Adobe
Experience Manager. See Move OmniOut into Your App.
10. (Optional) Beginning with Spring '21, Add OmniOut to an Adobe Experience Manager application. See
Add OmniScripts to Adobe Experience Manager.
11. (Optional) Add custom styling to your OmniScript using stylesheets. See Add Custom Stylesheets to
Your OmniOut Application.
12. Build a connection in your application. See Connect Your OmniOut App.
Download the LWC OmniOut Static Resource

Obtain OmniScript files by downloading the LWC OmniOut Static Resource.
The LWC OmniOut static resource includes JS, HTML, CSS, and other files necessary for OmniScript to
run outside of Salesforce.
1. In your Salesforce Org, navigate to Setup, and in the quick find box, enter Static Resources.
2. In the Static Resources page, locate and select the vlocityomnioutlwc resource.
3. Click on View File to download the static resource.
4. Open the uncompressed downloaded file in Visual Studio Code.
What's Next
Install LWC OmniOut Dependencies
See Also
• Create a Connected App for OmniOut
Install LWC OmniOut Dependencies

Configure and install the LWC OmniOut dependencies using a command-line-tool.
Before You Begin

1. Download the LWC OmniOut static resource. See Download the LWC OmniOut Static Resource.
2. Request an NPM repository access key from your Vlocity customer representative.
3. Understand how to run commands in a terminal. See Command Line 101 (git-tower documentation).
4. Install npm. See npm (npm documentation).
1. Uncompress the downloaded static resource into a folder.

2. In the uncompressed folder, open the .npmrc file and set _auth equal to your NPM repository access
key.

company 403
OmniStudio
_auth=Authentication_Key
3. In a new terminal shell, install the npm packages by running the command npm install.
4. Run the command npm run watch in the terminal console to run the development server.
5. Access the local development server at localhost:4002 to view the demo application.
What's Next
Add an OmniScript Lightning Web Component to OmniOut
See Also

• Include Nested Custom LWCs in Your OmniOut OmniScript
• Configure Multi-Language in OmniOut
Include Nested Custom LWCs in Your OmniOut OmniScript

Map nested custom Lightning web components in your OmniScript to include them in your OmniOut project.
Lightning web components that override or map to an OmniScript element are automatically downloaded
with the off-platform OmniScript LWC.
Nested custom Lightning web components referenced by a custom Lightning web component in the
OmniScript are not included by default. To include nested custom LWCs, map them to a dummy element in
the Element Type To LWC Component Mapping section.
1. From OmniScript Setup, scroll to the Element Type To LWC Component Mapping section.
2. In the Element Type field, enter a fake element type. For example, nestedElement.
3. In the Lightning Web Component field, enter the name of your nested custom Lightning web
component. For example, nestedElement.
4. Save and Activate your OmniScript.
What's Next

company 404
OmniStudio
See Also
• Navigate to a URL from an OmniOut App

Download and configure an OmniScript to use it off-platform in OmniOut.
Before You Begin

1. Install OmniOut's required dependencies. See Install LWC OmniOut Dependencies
2. (Optional) Configure OmniScript to include nested custom Lightning web components in OmniOut. See Include Nested Custom
LWCs in Your OmniOut OmniScript.
1. Open an OmniScript in your Salesforce org, and click Activate.

2. Click on the Download Off Platform LWC button and uncompress the downloaded file.
NOTE
If your OmniScript includes Custom LWCs from a managed package, the Custom
LWCs may not work. Custom LWCs that exist in a managed package only work if they
are off-platform compatible.
3. Copy the component located in the lwc folder of your downloaded component into the ./src/modules/
vlocityomniscript folder of your OmniOut LWC project.

company 405
OmniStudio
4. In an OmniScript Designer, copy the OmniScript tag using one of these options:
• In the LWC OmniScript Designer, click the dropdown menu, click How To Launch, and copy one of
the component tags.
• In the Classic Designer, copy the LWC OmniScript component tag from the Script Configuration
properties.
• In the Classic Designer, copy the LWC OmniScript component code from one of the examples found
in the How to Launch activated script section of the OmniScript.

company 406
OmniStudio
5. In Visual Studio Code, open the ./src/index.html file and replace the component tag with your
OmniScript component tag.
6. Edit your component tag by replacing c-- with vlocityomniscript- and save the file.

company 407
OmniStudio
7. Open the ./src/index.js file and take these steps to import and define your component:
a. Replace the sample component import with your component's file path.
import VlocApp from 'vlocityomniscript/

typeExampleSubtypeExampleEnglish';
b. Replace the sample component tag with your modified component tag and remove the closing tag
and angle brackets.
customElements.define('vlocityomniscript-type-example-subtype-example-
english', buildCustomElementConstructor(VlocApp));
8. (Optional) In the OmniScript component tag, remove the run-mode="localScriptDef" attribute to

check if the OmniScript is active in Salesforce.

company 408
OmniStudio
NOTE
When running a multi-language OmniScript, the run-mode="localScriptDef"
attribute forces the OmniScript to use the locally defined custom labels. If run-mode
is not present, a connection is made to retrieve the custom labels.
9. (Optional) In the OmniScript component tag, add dir="rtl" to force the OmniScript styles to load
right-to-left regardless of the OmniScript language. Without this attribute, right-to-left languages still
load with right-to-left styling. OmniScript provides beta support for right-to-left styling.
<vlocityomniscript-type-example-subtype-example-english run-
mode="localScriptDef" dir="rtl"> </vlocityomniscript-type-example-
subtype-example-english>
10. (Optional) In Index.html, uncomment the Newport stylesheets to apply Newport styling.
<link rel="stylesheet" type="text/css" href="/newport/assets/styles/

vlocity-newport-design-system.min.css">
11. In Index.html, uncomment the appropriate Script file for each of these elements that exist in your
OmniScript:
Element Script File

PDF Action <script src="/vlocityresources/javascript/VlocityPdf.js"></script>
Type Ahead Block Uncomment this file, and in the key parameter, enter your API key.
using Google Maps
<script type="text/javascript" src="https://maps.googleapis.com/
maps/api/js?key={YOUR_API_KEY_HERE}&libraries=places">
</script>
12. In Index.html, include the SLDS styles even when using Newport styles, if these elements exist in your
OmniScript:
Element Stylesheets Note

File  LWC OmniOut supports file
<link rel="stylesheet" type="text/css" href="/slds/assets/ uploads up to 30 MB.
styles/salesforce-lightning-design-system.css">
<link rel="stylesheet" type="text/css" href="/
vlocityresources/slds/styles/OmniLwcUtilsCss.css">
Image  LWC OmniOut supports
<link rel="stylesheet" type="text/css" href="/slds/assets/ image uploads up to 30 MB.
styles/salesforce-lightning-design-system.css">
<link rel="stylesheet" type="text/css" href="/
vlocityresources/slds/styles/OmniLwcUtilsCss.css">
13. Save your file.

14. Run the command npm run watch in your terminal console to restart the server and view your
OmniScript.
What's Next
Create a Connected App for OmniOut

company 409
OmniStudio
See Also

Create a Connected App for OmniOut

Enable the external connection to interact with Salesforce by configuring a Connected App in Salesforce.
You must create a Connected App to make external calls from OmniOut. Connected Apps provide OmniOut
with an access token that enables proxies and login authentication to work. For more information, see
Connected Apps (Salesforce documentation).
Before You Begin

Add an OmniScript LWC component to your OmniOut project. See Add an OmniScript Lightning Web Component to OmniOut.
1. From Salesforce Setup, search for Apps in the Quick Find box, and click App Manager.
2. Click New Connected App.
3. In the Connected App Name field, enter a Name for your Connected App.
4. Enter an API name that is used to refer to the Connected App from your program.
5. Enter a contact email.
6. Check Enable OAuth Settings.
7. Enter a callback URL. The callback URL is the URL for the App's public site.
8. Move the Fullaccess (full) scope or Access and manage your data (api) into Selected OAuth
Scopes.
9. Save your Connected App.
10. From your Connected App page, click Edit Policies.
11. In the Permitted Users field, select All users may self-authorize, and save the Connected App.
12. Copy the Consumer Key and Consumer Secret. These values populate the client_id and
client_secret.
13. Open the OmniOut project in Visual Studio Code, and in the terminal, perform these tasks:
a. Enter this command without running it.
curl -d "username=USERNAME" -d "password=PASSWORD" -d

"client_id=CLIENTID" -d "client_secret=CLIENTSECRET" -v -d
"grant_type=password" https://test.salesforce.com/services/oauth2/token
b. In the command, replace these values:
Value Description
USERNAME Replace with your Salesforce username.
PASSWORD Replace with your Salesforce password.
CLIENTID Replace with your Connected App's Consumer Key.
CLIENTSECRET Replace with your Connected App's Consumer Secret.
c. (Optional) In the command, enter the appropriate URL for your Salesforce environment. By
default, the URL is configured for a Sandbox org.

company 410
OmniStudio
Environment URL
Developer Org https://login.salesforce.com/services/oauth2/token
Sandbox Org https://test.salesforce.com/services/oauth2/token
d. Run the command, and copy the Access Token and Instance URL.
What's Next
Run OmniOut in Development Mode
See Also

Configure Multi-Language in OmniOut

Display multi-language OmniScripts in OmniOut using custom labels.
Access custom labels in your OmniScript directly from Salesforce or use custom labels defined in local files.
Control which language displays by using a language code. The language code searches locally defined
language files or a Salesforce connection to access a language's custom labels. If the OmniScript
component tag's run-mode attribute is present and set to localScriptDef, the OmniScript uses the locally
defined custom labels. If run-mode is not present, the OmniScript accesses the custom labels through a
Salesforce connection.
Before You Begin

1. Create a multi-language OmniScript. See Create Multi-Language OmniScripts.
2. Add your multi-language OmniScript to an OmniOut LWC. See Add an OmniScript Lightning Web Component to OmniOut.
3. View Salesforce language codes. See Translations (Salesforce documentation).
1. After adding your multi-language OmniScript to OmniOut, in the VSCode command line, enter this
command, and replace LANGCODE with a Salesforce language code:
npm run customlabels LANGCODE

2. View these two generated files:
• LANGCODE.translations.js: contains all of the custom labels, both user-defined and out of the box,
in a single file. The language code replaces the LANGCODE property used in this example file
name.
• translations.js: contains the exports of all different translations for all of the custom labels.
3. In translations.js, uncomment export lines to include them when the OmniScript is running.
export * from "./es.translations.js";

4. Pass the language code using a combination of these two options:
NOTE
If both options are present, the component tag property overrides the URL parameter.

company 411
OmniStudio
Language Code Description Example

Option
Component Tag Passes the language code in the OmniScript's <my-omniscript prefill='\
Property component tag as a prefill property. {"LanguageCode":"iw"}'> </my-
omniscript>
URL Parameter Append the LanguageCode parameter to your localhost:4002/myOmniScript?
URL endpoint and enter a Salesforce language LanguageCode=en_US
code.
5. (Optional) In the OmniScript component tag, add the run-mode="localScriptDef" attribute to force the
OmniScript to use the locally defined custom labels. If run-mode is not present, a connection is made
to retrieve the custom labels from Salesforce.
6. (Optional) If you are using run-mode="localScriptDef" in your OmniScript component tag, you must
define custom translations for each language manually.
To define your custom labels:
a. In OmniOut, select a LANGCODE.translations.js file.
b. In your file, locate a key-value pair, and in the value field, enter the translation for that custom
label. Repeat this process for each custom label.
export const es = {
"New": "Nuevo"
}
7. (Optional) Test the multi-language OmniScript In the command line:
a. In the command line, enter and run the command npm run watch.
b. Click the localhost link that appears in the command line.
c. In your browser, edit the URL to include a language code.
localhost:4002/myOmniScript?LanguageCode=en_US
What's Next
See Also

Navigate to a URL from an OmniOut App

Direct users to different URLs from an OmniOut app using the Navigate Action.
Configure endpoints in the Navigate Action and create redirects for the URLs in your OmniOut app.
OmniOut supports all Navigate Action types, including URL generation and browser location updates.
Application authors must decide how to handle the generated URLs based on the project's unique
requirements.
Before You Begin

Configure a Navigate Action. See Navigate Action.

company 412
OmniStudio
1. View the generated URL format for each of these Navigate Action page reference types:
Page Format URL Example

Reference
Type
App /{appName}/{pageReference} /vlocity-digital-studio/omni-script-
home
Knowledge /{articleType}/{articleURL} /vlocity-ins-knowledge/new-test
Article
Lightning /cmp/{componentName}? /cmp/exampleComponent?
Component {...targetParameters} c__exampleParameter=ABC123
Login Page /login /login
OR
/logout
Named Page /{pageName}?{...targetParameters} /home
Navigation Navigation items, such as tabs, transform the item /my-custom-tab
Item name into kebab-case.
Object Page /o/{sObjectApiName}/home? /o/case/home
{...targetParameters}
Record /r/{sObjectApiName}?id={objectId} /r/account?id=0012E00001qF0l2QAC
Page {...targetParameters}
Record /r/{sObjectApiName}? /r/case?
Relationship id={objectId}&rel={relationshipApiName} id=0012E00001qF0l2QAC&rel=CaseComments
Page
Vlocity /vlocityomniscript/ /vlocityomniscript/
OmniScript {OmniScriptComponentName} demoNavigateActionEnglish
Web Page A web URL. Navigate Action does not format Web <https://trailhead.salesforce.com>
Page URLs.
2. (Optional) If your application has a predetermined URL structure that does not match the generated
URL, take these steps to redirect the URLs:
a. In the OmniOut project, create this file ./src/modules/vlocityoverride/redirects.js
b. In redirect.js, add a map object to contain your redirect mappings.
const redirects = new Map([
]);
export default redirects;

c. In the redirects object, add a key that maps the generated URL and a value representing the
transformed URL. Each key and value must start with /. For example, map any Navigate action
that generates the URL /home to /my-custom-home.

['/home','/my-custom-home']
]);
export default redirects;

company 413
OmniStudio
d. (Optional) Include wildcards in your URL to redirect all object pages to a single page. For example,
redirect case object and case record navigate actions to a single page with the endpoint /case.
Each of these generated URLs: /o/case/home, /r/case?id=0012E00001qF0l2QAC, and /r/case?
id=0012E00001qF0l2QAC&rel=CaseComments would point to /case. The URL parameters for
each generated URL is preserved.

['/home','/my-custom-home'],
['/*/case', '/case']
]);
What's Next
Move OmniOut into Your App
See Also

• Add Custom Stylesheets to Your OmniOut Application

View and test your OmniScript before adding it to your application by running it in development mode.
Before You Begin

1. Download your OmniScript Lightning web component and add it to OmniOut. See Add an OmniScript Lightning Web Component to
OmniOut.
2. Create a Salesfroce Connected App to enable a Salesforce API connection from your app. See Create a Connected App for
OmniOut.
1. In the .src folder's index.html file, locate function JSForceConnectionExample().

2. In the const connection object, enter the Salesforce Connected App's access token and instance
URL. See Access Token (jsforce documentation).
const connection = new jsforce.Connection({ // Set your jsForce

configuration here
accessToken: '',
instanceUrl: ''
});

company 414
OmniStudio
3. Set this.namespace equal to the namespace of your package namespace. To find your namespace,
4. Save your file.
5. In the terminal, enter and run the command npm run watch.
What's Next

company 415
OmniStudio
See Also

• Connect Your OmniOut App

Generate a compiled dist folder to move OmniOut into your app project before deploying your app to a
content management system.
Before You Begin

1. In your OmniOut project, run the command npm run build in your Visual Studio Code terminal. The
command compiles OmniOut into a dist folder.
npm run build

company 416
OmniStudio

company 417
OmniStudio
2. In the dist folder, copy the files your OmniScript requires to run from the OmniOut project to your App.
File/Folder Required? Description

app.js files, including numbered app.js files, Yes The JavaScript files required for OmniScript
such as 0.app.js
vlocityresources Yes The static resources required for OmniScript.
index.html Optional A sample index.html file that shows how to run the
OmniOut LWC project.
newport Optional This file is required if you are using the default Newport
theme. If your OmniScript contains an Image or File
element, you must also copy over the slds folder.
slds Optional This file is required if you are using the Lightning theme. If
your OmniScript contains an Image or File element, you
must copy over the slds folder.
OmniScriptDocuSignReturnPage.html Optional This file is required if there is a DocuSign Action in the
OmniScript.
OmniScriptLwcDocuSignViewPdf.html Optional This file is required if there is a DocuSign Action in the
OmniScript.
3. In the index.html file, select and copy the script tags that reference app.js files into your app's
index.html file.
4. In the index.html file, select and copy your OmniScript component tag into your app's index.html file.
<vlocityomniscript-doc-example-english run-mode="localScriptDef"></
vlocityomniscript-doc-example-english>
What's Next
Connect Your OmniOut App
See Also

• Add Custom Stylesheets to Your OmniOut Application

company 418
OmniStudio
Add OmniScripts to Adobe Experience Manager

Add OmniScripts to Adobe Experience Manager using LWC OmniOut. OmniScripts hosted in AEM require
a Salesforce connection to send data between servers.
Before You Begin

1. Learn about LWC OmniOut. See Run LWC OmniScripts Outside of Salesforce with LWC OmniOut.
2. Test your OmniScripts in LWC OmniOut's development mode. See Run OmniOut in Development Mode.
1. Create a Salesforce connection in AEM. See Integrate Salesforce Cloud Services into Adobe
Experience Manager.
2. Set resource paths in LWC OmniOut to load Lightning and Newport styles into your app. See Set the
LWC OmniOut Resource Path.
3. Deploy LWC OmniOut to AEM. See Deploy LWC OmniOut to Adobe Experience Manager.
4. Add the LWC OmniOut component to an AEM page. See Add the Vlocity LWC OmniOut Component to
Adobe Experience Manager.
Integrate Salesforce Cloud Services into Adobe Experience Manager

Create a Salesforce connection in AEM. The connection setup is not part of the Vlocity package.
Before You Begin

1. View AEM's Salesforce Cloud Connection documentation. See Configuring AEM to integrate with Salesforce (AEM documentation).
2. Create your Connected App. See Create a Connected App for OmniOut.
1. Open your AEM instance and click the main logo in the top left corner.
2. Click the Tools icon, and select Deployment.
3. Select the Cloud Services card and scroll down to the Salesforce section. Click Show Configurations.
4. Click the [+] link next to Available Configurations and enter the necessary information and click Create.
This opens a new page and modal for the Cloud Services Configuration.
5. To create consistency across platforms, enter the name of the Connected App that you created in
Salesforce into the Title and Name fields of the AEM Configuration modal. Leave the modal open.
6. Navigate back to the Connected App page in Salesforce.
7. In Callback URL, enter the AEM URL with Administrator Access: http://localhost:4502/etc/
cloudservices/salesforce/testsalesforceconnect.html where testsalesforceconnect is
the title of your Cloud Services connection.
8. Navigate back to the Connected App page and paste the URL into the Callback URL field.
9. Click Save.
10. From the Connected App record page, copy the Consumer Key.
11. Return to the AEM modal and paste the Consumer Key into the Customer Key field.
12. From the Connected App record page, copy the Consumer Secret.
13. Return to the AEM modal and paste the Consumer Secret into the Customer Secret field.
14. Click Connect to Salesforce. This brings you to a login screen for Salesforce. Log in to the
appropriate org and click Allow. A modal window will pop up indicating that the connection was
successful. If you receive an error, wait 10 minutes and attempt to connect again.
15. Click Ok to save the settings.

company 419
OmniStudio
What's Next
Deploy LWC OmniOut to Adobe Experience Manager
See Also
• Add the Vlocity LWC OmniOut Component to Adobe Experience Manager
Set the LWC OmniOut Resource Path

Load your custom styling resources into your Adobe Experience Manager application by setting the correct
resource paths.
Before You Begin

1. Ensure you have run OmniOut in development mode. See Run OmniOut in Development Mode.
2. Create a Salesforce connection in AEM. Integrate Salesforce Cloud Services into Adobe Experience Manager.
1. In VisualStudio, locate and open LWC OmniOut's ./src/index.js file.

2. In the ./src/index.js file, uncomment this line:
import { setSldsResourcesUrl, setNewportResourcesUrl } from 'c/

salesforceUtils'
3. In the same ./src/index.js file, locate the setSldsResourcesUrl function and the
setNewportResourcesUrl function and uncomment each function.
4. Save your file.
What's Next
See Also
• Add OmniScripts to Adobe Experience Manager

Add your AEM credentials to LWC OmniOut and deploy it to your AEM server. The deployment adds a
Vlocity LWC OmniOut component to AEM. The Vlocity LWC OmniOut component enables you to add your
OmniScripts to an AEM page.
Before You Begin

1. Create a Connected App. See Create a Connected App for OmniOut
2. Create a Salesforce Connection in AEM. See Integrate Salesforce Cloud Services into Adobe Experience Manager.
3. Set your CSS resources path. See Set the LWC OmniOut Resource Path.
4. Locate and copy your AEM server username, password, host, and port.
1. In VisualStudio, open the LWC OmniOut resource and locate the ./aem.ui.apps/pom.xml file.
2. In the ./aem.ui.apps/pom.xml file, enter your AEM server username, password, host, and port in
these tags:

company 420
OmniStudio
• <crx.host></crx.host>: Enter your AEM server host.

• <crx.port></crx.port>: Enter your AEM server port.
• <crx.username></crx.username>: Enter your AEM server username.
• <crx.password></crx.password>: Enter your AEM server password.
• <publish.crx.host></publish.crx.host>: Enter your AEM server host.
• <publsh.crx.port></publish.crx.port>: Enter your AEM server port.
• <publish.crx.username></publish.crx.username>: Enter your AEM server username.
• <publish.crx.password></publish.crx.password>: Enter your AEM server password.
Example Syntax: <crx.port>4502</crx.port>
3. Deploy the application by running this command:
npm run deploy:aem:clean:full
What's Next
Add the Vlocity LWC OmniOut Component to Adobe Experience Manager
See Also

• Integrate Salesforce Cloud Services into Adobe Experience Manager
Add the Vlocity LWC OmniOut Component to Adobe Experience Manager

Launch OmniScripts from an AEM page by adding the Vlocity LWC OmniOut Component. The Vlocity LWC
OmniOut component hosts the OmniScript and uses the Salesforce Cloud Services configuration to make
calls to Salesforce.
Before You Begin

1. Set the LWC OmniOut Resource Path.
2. Integrate Salesforce Cloud Services into Adobe Experience Manager.
3. Deploy LWC OmniOut to Adobe Experience Manager.
1. From an AEM page, click on the + symbol to add a component. This opens a modal with a list of
components.
2. Select the Vlocity LWC OmniOut component.
3. From the component, click the configure icon, a wrench symbol, to open the component's Edit Dialog.
4. From the Vlocity LWC OmniOut Edit Dialog, configure these Vlocity LWC OmniOut component
options:
a. In Configuration, select the Salesforce cloud connection that connects your Salesforce
Connected App.
b. In Namespace, enter the namespace of your Vlocity package. See Viewing the Namespace and
c. In LWC Element Name, enter the name of your OmniScript using the component tag name
without brackets.
For example, if your OmniScript had these properties:
• Type: doc

company 421
OmniStudio
• SubType: Test
• Language: English
The correct syntax to use is vlocityomniscript-doc-test-english.
d. In Layout, select the Lightning or Newport design system.
e. (Optional) In Prefill Attribute, enter serialized JSON data to prefill elements.
f. (Optional) In Google Maps API Key, enter a Google Maps API Key if one is used in your
OmniScript.
g. (Optional) Check Use Proxy if your application is using a proxy to connect to your Salesforce
instance.
h. (Optional) In Proxy URL, enter your proxy URL.
i. (Optional) Check Use Local Definition to use the local OmniScript definition. The component will
not verify if the OmniScript is active in your Salesforce org.
j. (Optional) Check Load SLDS Resources to load SLDS styles, images, and icons into your
OmniScript. This option is required if you use File or Image in your OmniScript.
k. (Optional) Check Load Newport Resources to load Newport styles into your OmniScript.
l. (Optional) Check Load PDF Resources if you are using a PDF Action in your OmniScript.
5. Save your component and publish your AEM application.
6. Test your AEM application and run the OmniScript.
See Also

Add Custom Stylesheets to Your OmniOut Application

Include custom styling in your OmniOut project by using custom LWCs and stylesheets.
Custom stylesheets are not included in the OmniScript off-platform download metadata. You must add them
to your application after building the dist folder. All custom styling done in a custom LWC is included in the
OmniScript's off-platform download by default.
Before You Begin

1. Create and add a custom style sheet to your OmniScript. See Apply Custom Styling to OmniScripts with Static Resources.
2. Build an OmniOut dist folder and move the folder's contents into your app. See Move OmniOut into Your App.
1. In Salesforce Setup's Quick Find box, enter Static Resources, and click Static Resources.
2. Locate and click the static resource that contains your CSS style sheet.
3. Click View File to download the static resource.
4. Copy the downloaded file into your app's /styles folder.
5. Add a reference to that file in your app's index.html file to load the custom style sheet.
Example
<link rel="stylesheet" type="text/css" href="/app/styles/my-custom-

styles.css">

company 422
OmniStudio
What's Next
See Also


OmniOut connects your CMS to Salesforce through a proxy or directly.
Configure a connection object to connect to the Salesforce Connected App. Connections are unique to your
app's requirements and must be configured outside the scope of OmniOut. View the connection object
template and sample apps in this section to see examples of how to configure a connection.
Before You Begin

1. Add an OmniScript Lightning Web Component to OmniOut
2. Create a Connected App for OmniOut
1. (Optional) Download, run, and modify sample OmniOut apps. See Sample OmniOut Apps.
2. Create a Connection Object in OmniOut
Sample OmniOut Apps

Download, configure, and run OmniOut sample apps to view OmniOut app connection examples.
After running the sample app, modify it to host your LWC OmniScripts.
Before You Begin

Add http://localhost:3000 to the Salesforce CORS allowlist. See Perform Cross-Origin Requests.
1. Select a sample app from the table on this page to download and run the connection example.
Sample App Description Example

React, jsForce, and A react app that demonstrates login functionality using Download and Run the OmniOut React-
OAuth2 OAuth2 and jsForce. jsForce-OAuth2 Sample App
LWC A single page app that's built using only Lightning web Download and Run the OmniOut LWC
components. Sample App
React, Express A react app that demonstrates how to run an application Download and Run the React-Express
Proxy using a proxy. Proxy Sample App
2. Modify a Sample OmniOut React App.
What's Next
Create a Connection Object in OmniOut
Download and Run the React-Express Proxy Sample App

The React Express sample app demonstrates how to use an application as the backend to make requests
and forward them to Salesforce.

company 423
OmniStudio
The React app acts as the frontend of your website while the express app handles the backend calls. Each
sample application has separate dependencies you need to install to run them both together.
Before You Begin

Establish a Salesforce connection. See Create a Connected App for OmniOut.
Download, Configure, and Run the Express App (1)

Download the sample app, install the dependencies, and run the express app.
1. Download both the Express and React apps by clicking here.

2. Open the folder in Visual Studio Code.
3. In the Visual Studio Code terminal, cd into the express-proxy folder, and run this command to install
the npm dependencies:
npm install
4. Open the ./app.js file, locate these keys, and set them equal to the appropriate values:
Key Value
namespace The namespace of your Vlocity managed package. See Viewing the Namespace and Version of the Vlocity
Package.
instanceUrl The instanceUrl retrieved from your Connected App. See Create a Connected App for OmniOut.
accessToken The accessToken retrieved from your Connected App. See Create a Connected App for OmniOut.

company 424
OmniStudio
5. In the Visual Studio Code terminal, run this command to start the application:
npm start
6. In a browser, go to localhost:3001 to view the application.
Configure and Run the React App (2)

Install the dependencies for the react app, configure the connection.js file, and run the application.
1. Open a new terminal window in the Visual Studio Code terminal.

2. In the new terminal window, cd into the react-express-proxy-sample folder, and run this command to
install the npm dependencies:
npm install

company 425
OmniStudio
3. Open the ./src/connection.js file, locate these keys, and set them equal to the appropriate values:
Key Value
_proxyUrl http://localhost:3001/api. This is the URL where your express backend is located.
instanceUrl The instanceUrl retrieved from your Connected App. See Create a Connected App for OmniOut.
namespace The namespace of your Vlocity managed package. See Viewing the Namespace and Version of the Vlocity
Package.
4. In the Visual Studio Code terminal, run this command to start the application:
npm start
5. In a browser, go to localhost:3000 to view the application.
6. From the navigation bar, click the Quote link to view an example OmniScript.
7. From the navigation bar, click the Contact link to view an inline OmniScript example.
What's Next
Modify a Sample OmniOut React App
See Also

Download and Run the OmniOut React-jsForce-OAuth2 Sample App

The OAuth2 sample is a react app that demonstrates an OmniScript with login authentication using OAuth2
and jsForce.
Before You Begin


company 426
OmniStudio
1. Download the sample app by clicking here.

2. Open the file in Visual Studio Code.
3. In the Visual Studio Code terminal, run this command to install the npm dependencies:
npm install
4. Open ./src/App.js, and in the jsforce.browser.init object, locate these keys and set them equal
to the appropriate values:
Key Value
clientId The Connected App's Consumer Key. See Create a Connected App for OmniOut.
redirectUri The Connected App's redirect URL. See Create a Connected App for OmniOut.
5. Open ./src/connection.js, locate the namespace key, and enter your package namespace as the
value. For information on finding your namespace, see Viewing the Namespace and Version of the
Vlocity Package.
6. In the Visual Studio Code terminal, run this command to run the sample application at localhost:3000:
npm start
7. From the navigation bar, click the Login button, enter your credentials, and click Allow to log in to the
org.

company 427
OmniStudio
8. After logging in, from the navigation bar, click the Quote link to view an example OmniScript.
9. From the navigation bar, click the Contact link to view an inline OmniScript example.
What's Next
See Also


Host LWC OmniScripts in your sample app by moving files from a compiled OmniOut project into your
sample app.
NOTE
The instructions on this page do not apply to the LWC Sample App because the LWC
Sample app is a standalone app. See Download and Run the OmniOut LWC Sample App.
Before You Begin

1. Download one of the react sample apps. See Sample OmniOut Apps.
2. Download the OmniOut static resource from Salesforce and open it in Visual Studio Code. See Download the LWC OmniOut Static
Resource.
3. Install dependencies for the OmniOut project. See Install LWC OmniOut Dependencies.
4. (Optional) Add any nested custom LWCs that exist in your OmniScript before adding an OmniScript to OmniOut. See Include Nested
Custom LWCs in Your OmniOut OmniScript.
5. Download and add your OmniScript to the OmniOut project. See Add an OmniScript Lightning Web Component to OmniOut.
6. (Optional) Configure OmniOut to use multi-language OmniScripts. See Configure Multi-Language in OmniOut
1. In your OmniOut project, run the command npm run build in your Visual Studio Code terminal. The
command compiles OmniOut into a dist folder.
npm run build

company 428
OmniStudio

company 429
OmniStudio
2. In the dist folder, copy the files your OmniScript requires to run from the OmniOut project to the
sample app's ./public folder.
File/Folder Required? Description

app.js files, including numbered app.js files, Yes The JavaScript files required for OmniScript
such as 0.app.js
vlocityresources Yes The static resources required for OmniScript.
index.html Optional A sample index.html file that shows how to run the
OmniOut LWC project.
newport Optional This file is required if you are using the default Newport
theme. If your OmniScript contains an Image or File
element, you must also copy over the slds folder.
slds Optional This file is required if you are using the Lightning theme. If
your OmniScript contains an Image or File element, you
must copy over the slds folder.
OmniScriptDocuSignReturnPage.html Optional This file is required if there is a DocuSign Action in the
OmniScript.
OmniScriptLwcDocuSignViewPdf.html Optional This file is required if there is a DocuSign Action in the
OmniScript.
3. In the dist folder's index.html file, select and copy the script tags that reference app.js files into the
sample app's ./public/index.html file.
4. In the dist folder's index.html file, copy your OmniScript component tag.
<vlocityomniscript-doc-example-english run-mode="localScriptDef"></
vlocityomniscript-doc-example-english>
5. In the sample app's ./src/pages/Quote.js or ./src/pages/Contact.js files, replace the existing sample
component tag with your OmniScript component tag.

company 430
OmniStudio
6. In the terminal, enter this command to run the app on localhost:3000:
npm start
See Also
• Create a Connection Object in OmniOut
Download and Run the OmniOut LWC Sample App

View a sample OmniOut that uses only Lightning web components to run a single page app off-platform.
Before You Begin

1. From Salesforce Setup, enter Static Resources into the Quick Find box, and click Static
Resources.
2. From Static Resources, click vlocityomnioutlwcsample.
3. Click View File to download the sample app.
4. Uncompress the downloaded file and open it in Visual Studio Code.
5. Locate the README.MD file, click it, and follow the README's instructions.
Create a Connection Object in OmniOut

Send and receive data to and from Salesforce by creating a connection object.
A connection object must be present for every type of connection, including when a proxy is present. The
connection object exposes the instance URL, namespace, and request function. You must create an event
handler to pass the connection object after receiving OmniOut's omnioutcomponentready event. The
templates on this page are examples that developers can use for reference material when building a
connection.
NOTE
The connection process is unique to each application and must be done outside the scope
of OmniOut.

company 431
OmniStudio
Before You Begin

Add the OmniOut project to your application. See Move OmniOut into Your App.
1. Create an event handler.

Example Event Handler
/**
* Once the component is ready, an event is dispatched to let the DOM
knows that a connection is expected.
**/
document.addEventListener('omnioutcomponentready', evt => {
if (evt.detail && evt.detail.omnioutcomponent) {
evt.srcElement.connection = new YourOmniOutConnection();
}
});
2. Create a connection object.
Example Connection Object
function BaseConnectionExample() {
/**
* Expose the request method
**/
this.request = request;
/**
* @type {string} The namespace of the package
**/
this.namespace = '';
/**
* @type {string} The instance URL of your org
**/
this.instanceUrl = '';
/**
* A function that executes the HTTP requests.
* @type {string} The target URL.
* @type {Object} The data that will be sent to the target URL.
* @returns {Promise} A promise with the
**/
function request(url, data) {
return connection.requestPost(url, data);
}
}
3. Configure additional connection options outside of OmniOut.

company 432
OmniStudio
See Also

Enable and Configure Cancel Functionality in an LWC OmniScript

Navigate users to different Salesforce experiences after canceling an OmniScript by configuring cancel
options.
OmniScript's cancel functionality enables users to cancel out of an OmniScript from a Step by clicking a
cancel link. The cancel option directs the user to a Salesforce experience set in the cancel options or a
Navigate Action.
1. From OmniScript's Setup, expand Cancel Options, and click Enable Cancel.
2. In Field Label, enter the Cancel option's display text. The text displays as a clickable link in every
Step.
3. (Optional) Check Show prompt before cancel? and enter text into Cancel Message to display a
prompt message. The prompt enables users to return to the OmniScript when a user clicks cancel.
4. (Optional) Replace the existing entry in the browser history by setting the Replace? property to Yes. If
Replace? is set to Yes, users cannot navigate back to the OmniScript.
5. Determine the Salesforce experience that the cancel link will direct to by clicking and selecting a
PageReference type. This page contains further instructions for each PageReference Type that
Cancel Options support. For information on PageReference Types, see PageReference Types.
PageReference Type Description

App Launch a standard or custom app that is available from the app launcher. Connected apps are not
supported.
Community Named Page Direct users to a Named Page in a Community.
Component Navigate to Aura components and Lightning web components.
Current Page Trigger a page update on the current page once a user completes the OmniScript.
Knowledge Article Display knowledge articles in the OmniScript.
Login Open a Community login page.
LWC OmniScript Launch another LWC OmniScript.
Named Page Open a standard Named page.
Navigation Item A page displaying mapped content on a CustomTab.
Object Direct users to a standard, or custom, object page.
Record Open a page that interacts with a Salesforce record.
Record Relationship Open a record relationship page.
Web Page Open an external URL.
6. In Target Parameters, enter additional parameters to pass to the selected experience.
Add Cancel Options to a Navigate Action

Prior to Vlocity Insurance and Health Summer '20, add cancel functionality to an LWC OmniScript with the
Navigate Action.

company 433
OmniStudio
1. Add a Navigate Action before the first Step in the OmniScript.

2. In the Navigate Action's Element Name field, enter CANCEL in all uppercase letters. Ensure that the
CANCEL OPTIONS property section is present in the Navigate Action after setting the Element Name.
3. In the Label field, enter the Cancel option's display text. The text displays as a clickable link in every
Step.
NOTE
Cancel cannot be activated or deactivated for individual steps.

company 434
OmniStudio
4. (Optional) Disable confirmation prompts from displaying to users by unchecking Prompt before
cancel?.
5. (Optional) In the Cancel Message field, enter a custom message to display to users in the
confirmation prompt.
6. (Optional) To collapse the script and view the current page, set the Navigate Action's PageReference
type to Current Page with no additional configuration.
7. (Optional) Determine where the cancel option directs users by configuring the Navigate Action. For
more information, see Navigate Action.
What's Next
Deploy the OmniScript and add it to a page to test the cancel functionality. See Activate and Deploy an
LWC OmniScript.
See Also

• Navigate Action
Enable SEO for LWC OmniScripts

Beginning with Vlocity Insurance and Health Spring '20, make OmniScripts in Communities appear in online
searches by enabling SEO.
SEO OmniScripts store the state of an OmniScript in the URL by setting the c__step parameter to the name
of an active Step automatically. Direct users to a specific step in the OmniScript by setting the c__step
parameter in SEO URLs to a Step name in the OmniScript. Refreshing the page does not cause the
OmniScript to begin at the first Step because the Step is stored in the c__step parameter. Include additional
parameters to store the state of elements, insert data into the OmniScript's data JSON, prefill elements, or
conditionally fire OmniScript Actions. Beginning with Vlocity Insurance and Health and Vlocity CME
Summer '20, storing the state enables a user to navigate to previous or next steps using their browser's
back and forward buttons.
NOTE
SEO is automatically disabled when running Inline OmniScripts. See Display Inline
OmniScripts on Lightning and Community Pages.
NOTE
It is possible to create OmniScripts that store the state in the c__step parameter without
using the OmniScript for SEO purposes. See Create Stateful LWC OmniScripts.

company 435
OmniStudio
Before You Begin

1. Set Up SEO for Your Community (Salesforce Documentation).
2. Review SEO Best Practices and Considerations for Guest Users (Salesforce Documentation).
1. In the OmniScript's Setup section, check Enable SEO. The OmniScript automatically adds the c__step
parameter to store the state of a Step.
2. (Optional) Store the state of elements in your OmniScript, prefill elements, or pass data into the
OmniScript's data JSON using Additional SEO URL Parameters.
a. In the Additional SEO URL Parameters field, enter a parameter with the prefix c__. When
storing an element's state or prefilling an element, use the name of the element as your
parameter. For example, the parameter for an element named Text1 is c__Text1.
b. Set the parameter equal to an element in the OmniScript using merge field syntax or a static
value. If there is more than one parameter present, separate the parameters with an & symbol.
See Access OmniScript Data JSON with Merge Fields. For example, to store the state of the Text1
element, set the c__Text1 parameter equal to %Text1%.

company 436
OmniStudio
3. Activate the OmniScript, and add it to a Community. See Add an LWC OmniScript to a Community or
Lightning Page.
4. Grant guest user access in your Community.
5. Add the OmniScript URL to the Community's sitemap.xml file. See Set Up SEO for Your Community.
6. Use a search engine, such as Google, to test the SEO functionality.
7. (Optional) Beginning with Vlocity Insurance and Health and Vlocity CME Summer '20, test the
OmniScript's forward and backward navigation using a browser's forward and back buttons.
See Also

• Create Stateful LWC OmniScripts
Create Stateful LWC OmniScripts

Beginning with Vlocity Insurance and Health Spring '20, enable LWC OmniScripts to store the state of an
OmniScript in the URL.
OmniScripts store the state of an OmniScript in the URL by setting the c__step parameter to the name of
an active Step automatically. Direct users to a specific step in the OmniScript by setting the c__Step
parameter in the URL to a Step name in the OmniScript. Refreshing the page does not cause the
OmniScript to begin at the first step because the Step is stored in the c__step parameter. Include additional
parameters to store the state of elements, insert data into the OmniScript's data JSON, prefill elements, or
conditionally fire OmniScript Actions. Beginning with Vlocity Insurance and Health and Vlocity CME
Summer '20, storing the state enables a user to navigate to previous or next steps using their browser's
back and forward buttons.
NOTE
To make a stateful LWC appear in online searches, see Enable SEO for LWC OmniScripts.
1. In the OmniScript's Setup section, check Enable SEO. The OmniScript automatically adds the c__step
parameter to store the state of a Step.

company 437
OmniStudio
2. (Optional) Store the state of elements in your OmniScript, prefill elements, or pass data into the
OmniScript's data JSON using Additional SEO URL Parameters.
a. In the Additional SEO URL Parameters field, enter a parameter with the prefix c__. When
storing an element's state or prefilling an element, use the name of the element as your
parameter. For example, the parameter for an element named Text1 is c__Text1.
b. Set the parameter equal to an element in the OmniScript using merge field syntax or a static
value. If there is more than one parameter present, separate the parameters with an & symbol.
See Access OmniScript Data JSON with Merge Fields. For example, to store the state of the Text1
element, set the c__Text1 parameter equal to %Text1%.
3. Activate the OmniScript, and add it to a Lightning or Community Page. See Add an LWC OmniScript to
a Community or Lightning Page.
4. (Optional) Beginning with Vlocity Insurance and Health and Vlocity CME Summer '20, test the
OmniScript's forward and backward navigation using a browser's forward and back buttons.

company 438
OmniStudio
See Also

• Save and Resume an OmniScript
Embed FlexCards in an LWC OmniScript

Embed a FlexCard Lightning Web Component in an OmniScript by using the Custom LWC Element.
FlexCards can receive data from the LWC OmniScript and perform any action available in the FlexCard.
Before You Begin

1. Ensure your FlexCard includes OmniScript support. See Enable OmniScript Support on a FlexCard.
2. (Optional) Configure a FlexCard to receive data from OmniScript. See Pass Data from an LWC OmniScript to an Embedded
FlexCard.
1. In an LWC enabled OmniScript, drag the Custom LWC element into a Step. For information on creating
an LWC OmniScript, see Create an LWC OmniScript.
2.
3. In the Custom LWC's Lightning Web Component Name property, enter the FlexCard component's
name and prepend cf to the beginning of the name. For example, a FlexCard named Account Card
must be entered as cfAccountCard.
4. In Property Name, enter a property that the FlexCard expects to receive by converting the property to
an HTML attribute format. Three options enable you to pass data into the FlexCard from your
OmniScript. Each data option requires you to pass data as an HTML attribute. For example, if a

company 439
OmniStudio
FlexCard receives the property recordId, you must enter record-id in the property name field to
pass the property correctly.
Property Description Example FlexCard Configuration

Name Option
record-id Pass a record id into a FlexCard using the record- See Pass the RecordId from an
id property. FlexCards use record ids to perform OmniScript to Run a Query on a
data queries. FlexCard
parent- Pass a parent object containing parent attributes See Pass a Parent Object from an
attribute such as Parent.id into the FlexCard. Use merge LWC OmniScript to Run a Query on
fields in FlexCard queries and fields. a FlexCard
parent-data Map data to FlexCard fields directly without See Map Data from an LWC
running a query. The parent-data property is a OmniScript to an Embedded
AND boolean that FlexCards uses to determine FlexCard
whether to run a query or parse over a set of
records records.
5. In Property Source, using merge field syntax, enter one of these options based on your property
name:
Property Name Property Source

record-id Enter a JSON node that contains. For example, to pass a record id stored in the ContextId node, enter
%ContextId%.
parent-attribute Enter a JSON node containing an object.
parent-data Set parent-data's property source to true.
AND Set records equal to an object containing a record or an array of records. FlexCards parses over these
records and maps the nodes to FlexCard fields.
records
6. (Optional) Rerender and refresh the FlexCards save state whenever a user navigates to the step by
taking these actions:
a. In the FlexCards Designer, disable OmniScript support.
b. In the OmniScript Designer, open the Custom LWC element and check Standalone Mode. For
information on Standalone Custom LWCs, see Create a Standalone Custom Lightning Web
Component.
7. Save and Activate the Script.
8. Preview the OmniScript.
NOTE
LWC OmniScripts using custom Lightning web components must be active to preview
the OmniScript.
See Also
• Pass Data from an LWC OmniScript to an Embedded FlexCard

• Pass the RecordId from an OmniScript to Run a Query on a FlexCard

company 440
OmniStudio
Launch Vlocity Cards within an LWC OmniScript

Render a Vlocity Card Lightning Web Component in an OmniScript by using the Custom LWC Element.
To add a Vlocity Card to an LWC OmniScript:
1. Ensure your Vlocity Card is LWC enabled and includes OmniScript support. For more information on
including OmniScript support, see Creating an LWC Card Layout.
2. In an LWC enabled OmniScript, drag the Custom LWC element into a Step. For information on creating
an LWC OmniScript, see Create an LWC OmniScript.
3. In the Custom LWC's Lightning Web Component Name property, enter the name of the Vlocity Card
Component.
4. Save and Activate the Script.
NOTE
LWC OmniScripts using custom Lightning web components must be active to preview
the OmniScript.
Integrate Salesforce Knowledge with OmniScript

Enable users to search and view Salesforce Knowledge Articles when using an OmniScript. Configure
OmniScript Knowledge Options to search for articles based on static values and dynamic inputs from
OmniScript fields, or a query from a simple search bar.
IMPORTANT
Your organization must have Salesforce Knowledge enabled to use this feature.

company 441
OmniStudio
Figure 2. Simple Search Bar
From the OmniScript Designer Preview, you can open the article in a new console or browser tab. Or you
can view the article inside the OmniScript Step or in a modal window.
Figure 3. Article Open in the OmniScript as a Collapsible Block

company 442
OmniStudio
Figure 4. Article Open in a Modal Window
Setup OmniScript to Work with Salesforce Knowledge

Integrate Salesforce Knowledge into your OmniScript to enable users to search and view Salesforce
Knowledge articles in the OmniScript. OmniScript also supports querying Lightning Knowledge.
Before You Begin

1. Enable Salesforce Knowledge. See Enable Salesforce Knowledge.
2. (Optional) Enable Lightning Knowledge. SeeEnable Lighting Knowledge.
IMPORTANT
Before enabling Lightning Knowledge, see Lightning Knowledge Limitations.
1. From the Setup panel, expand the Knowledge Options section and check Enable Knowledge.
2. (Optional) To integrate Lightning Knowledge with OmniScript check Use Lightning Knowledge.
Lightning Knowledge must be enabled in your org.
3. (Optional) Select Display Outside OmniScript to launch Knowledge base articles outside of an
OmniScript using the Vlocity OmniScript Knowledge Base component in a Community or Lightning
page. For information on configuring this option, see Open Knowledge Base Articles Outside an
OmniScript.
4. In the Knowledge Article Type Query Fields Map section:
a. In Article/Record Type API Name, enter the Article Type API name for Classic Knowledge or
enter the Record Type API name when Use Lightning Knowledge is enabled.

company 443
OmniStudio
Lightning Knowledge Record Type API name

b. In Field API Name, enter the API name of the field to search in, such as Title. For multiple
fields, enter a comma-separated list with no spaces, such as Title,
namespace__richText__c,Summary.
Lightning Knowledge Field API Name

company 444
OmniStudio
5. To query additional Article or Record types, click + Add New Knowledge Type Field Map and repeat
Step 4.
6. If Use Lightning Knowledge is enabled, enter the Lightning Knowledge object's API name into
the Lightning Knowledge Object API Name field, such as namespace__Knowledge__kav.
7. (Optional) In Label, enter the text displayed above the Knowledge component, such as Suggested
Articles.
See Also
• Configure Knowledge for Individual Steps in the OmniScript
Configure Knowledge for Individual Steps in the OmniScript

After the initial configuration to set up your OmniScript to work with Salesforce Knowledge, integrate
Knowledge in your OmniScript Steps. Configure options on each step to enable Knowledge and filter
results.
Before You Begin

Setup your OmniScript to work with Salesforce Knowledge, see Setup OmniScript to Work with Salesforce Knowledge.
1. From the OmniScripts Designer, click the Step you want to display the Knowledge component.
2. In the Properties panel, expand the Knowledge Options section, and click Enable Knowledge.
3. Update Language from the default English to your preferred language.
4. Update Public Status from the default is Online to Archive or Draft.
5. In the Keyword field, enter the text to search for. This can be literal text, such as Service
Disconnect. Or, you can use merge fields for variable data. For example, enter %RouterType% to
enable your users to enter keywords to search for in a Text element whose Name is RouterType. For
information on merge fields see, Access OmniScript Data JSON with Merge Fields.
6. To filter articles by their Data Category, enter a SOQL query in the Data Category Criteria field. For
example, enter Troubleshooting__c AT (Router__c) to show articles from the sub-category
Router under the parent category Troubleshooting. For more information on building queries for
Data Categories, see With Data Category filtering Expression
NOTE
You do not need to enter WITH DATA CATEGORY in your query.
7. (Optional) When Lightning Knowledge is enabled, to filter the record types queried by the Step, enter
the Record Type's API name into the Record Type Filter field. For multiple Record Types, enter a
comma-separated list with no spaces, such as FAQ,INFO.
See Also
• Open Knowledge Base Articles Outside an OmniScript

company 445
OmniStudio
Open Knowledge Base Articles Outside an OmniScript

Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, launch Knowledge
base articles outside of an OmniScript using the Vlocity OmniScript Knowledge Base component in a
Community or Lightning page.
The Vlocity OmniScript Knowledge Base component renders Knowledge base articles side-by-side with an
OmniScript or as a standalone component. When opening Knowledge Base articles from an OmniScript,
OmniScript passes specific information into the component to search the Knowledge base and render
articles.
Before You Begin

1. Configure the fields that query the Knowledge base. See Setup OmniScript to Work with Salesforce Knowledge.
2. (Optional) Define Knowledge base queries at the step level. See Configure Knowledge for Individual Steps in the OmniScript.
1. In your OmniScript's Setup panel, expand Knowledge options, and select Enable Knowledge.
2. Select Lightning Knowledge, and configure the remaining fields using the instructions in Setup
OmniScript to Work with Salesforce Knowledge.
3. Confirm Display Outside OmniScript is enabled.
4. (Optional) Configure Knowledge Options on the Step level. See Configure Knowledge for Individual
Steps in the OmniScript.
5. Deploy the OmniScript by clicking the Activate Version.
6. Open the Lightning App Builder and create a new page with a layout containing at least two regions.
See Lightning App Builder.
7. From the Lightning page, drag the deployed LWC OmniScript component into the page. See Add an
LWC OmniScript to a Community or Lightning Page.
8. From the Components section, drag the Vlocity OmniScript Knowledge Base component to where
you want it displayed.
9. In the omniscriptKey field, enter the name of the LWC OmniScript component using the syntax
type_SubType_Language.
10. (Optional) In the layout field, enter newport to render the Knowledge base article with the Newport
Design System styling.
11. Save the Lightning page and test the OmniScript on the Lightning page to preview the behavior.
See Also
• Setup OmniScript to Work with Salesforce Knowledge

Knowledge Options Properties Reference

Knowledge Options properties are configurable from the Setup and Properties panels in the OmniScript
Designer. Enable Knowledge in your OmniScript to allow users to view and search for articles from your
Salesforce Knowledge articles. See Integrate Salesforce Knowledge with OmniScript.

company 446
OmniStudio
Property Definition
Enable Knowledge Integrate Salescorce Knowledge with OmniScript. You must enable this property in the Properties panel for
each Step that displays the Knowledge component and in the Setup panel.
Setup panel
These properties are unique to the Knowledge Options section in the Setup panel.
Display Outside OmniScript Enables launching Knowledge base articles outside of an OmniScript using the Vlocity
OmniScript Knowledge Base component in a Community or Lightning page.
Use Lightning Knowledge Integrates Lightning Knowledge with OmniScript. Lightning Knowledge must be enabled in
your org.
Article/Record Type API Name The Article Type API name for Classic Knowledge or the Record Type API name when Use
Lightning Knowledge is enabled.
Field API Name The API name of the field to search in, such as Title. For multiple fields, enter a comma-
separated list with no spaces, such as Title, namespace__richText__c,Summary.
Lightning Knowledge Object API If Use Lightning Knowledge is enabled, enter the Lightning Knowledge object's API name,
Name such as namespace__Knowledge__kav.
Label The text displayed above the Knowledge component, such as Suggested Articles.
Properties panel
These properties are unique to the Knowledge Options section in the Properties panel when you select a
Step.
Language Select the language to display the articles.
Public Status The type of article to display. Enter Online, Archived or Draft.
Keyword The text to search for. This can be literal text, such as Service Disconnect. Or enter
merge fields for variable data. For example, enter %RouterType% to use the input value of a
Text element whose Name is RouterType.
Data Category Criteria Filter Knowledge articles by their data category in a SOQL query. For example, enter
Troubleshooting__c AT (Router__c) to show articles from the sub-category Router
under the parent category Troubleshooting. The WITH DATA CATEGORY clause is not
required in the query.
Record Type Filter If Use Lightning Knowledge is enabled, enter the Record Type's API name to filter the
record types queried by the Step. For multiple Record Types, enter a comma-separated list
with no spaces, such as FAQ,INFO.
See Also
• Setup OmniScript to Work with Salesforce Knowledge

• Open Knowledge Base Articles Outside an OmniScript
LWC OmniScript ReadMe Reference

This page lists the Lightning web components ReadMes available for LWC OmniScripts. Extend Lightning
web components to add custom behavior and styling. For information on customizing OmniScript LWCs see

company 447
OmniStudio
Create a Custom Lightning Web Component for OmniScript. For information on configuring OmniScript
elements, see OmniScript Element Reference.

Vlocity Health and Insurance Spring '21 Download
Action Element ReadMes

These are the LWC ReadMes for OmniScript Action elements:
• DataRaptor Extract Action

• DataRaptor Post Action
• DataRaptor Transform Action
• DocuSign Envelope Action
• DocuSign Signature Action
• Email Action
• HTTP Action
• Integration Procedure Action
• Navigate Action
• Remote Action
• Set Values Action
Base Component ReadMes

LWC OmniScript elements extend the base components in this table.
LWC Description
OmniScript Atomic Element The base component for OmniScript Input elements.
OmniScript Base Action The base component for OmniScript Action elements.
OmniScript Base Element The base component for LWC OmniScript.
OmniScript Group Element The base component for OmniScript Group elements.
Display Element ReadMes

These are the LWC ReadMes for OmniScript Display elements:
• Line Break
• Text Block
Function Element ReadMes

These are the LWC ReadMes for OmniScript Function elements:

company 448
OmniStudio
• Formula
• Messaging
General ReadMes
LWC Description
OmniScript Knowledge Base LWC for the OmniScript Knowledge component. The knowledge component enables users to
ReadMe search for Lightning Knowledge articles.
OmniScript Modal LWC for the modal that displays in OmniScript.
OmniScript Step Chart LWC for the OmniScript Step Chart. See Customize the Step Chart Component.
OmniScript Step Chart Items LWC for the OmniScript Step Chart Items. The Step Chart Items component controls the
functionality of the OmniScript Step Chart.
Group Element Readmes

These are the LWC ReadMes for OmniScript Group elements:
• Block
• Edit Block
• Radio Group
• Step
• Type Ahead Block
• Places Type Ahead
• Type Ahead Action
Input Element ReadMes

These are the LWC ReadMes for OmniScript Input Elements:
• Checkbox
• Currency
• Custom LWC
• Date
• Date/Time
• Email
• File
• Image
• Lookup
• Multi-select
• Number
• Password
• Radio
• Range
• Select
• Telephone

company 449
OmniStudio
• Text
• Text Area
• Time
• URL
Mixin ReadMes
LWC Description
OmniScript Base Mixin Enables custom LWCs that do not override an OmniScript element's LWC to interact with OmniScript
through the Custom LWC element. See Extend the OmniScriptBaseMixin Component.
OmniScript Options Mixin Provides options logic for any LWC in OmniScript.
OmniScript Validation Provides validation options to any LWC in OmniScript.
OmniScript Action Block ReadMe

This page contains an OmniScript Action Block LWC ReadMe for each release.

Vlocity Insurance and Health Spring '20 and Vlocity CME Fall '20 Download
Vlocity Insurance and Health and Vlocity CME Summer '20
ns/omniscriptActionBlock ⇐ OmniscriptBaseAction
Extends: OmniscriptBaseAction
• ns/omniscriptActionBlock ⇐ OmniscriptBaseAction
• .processAction(element) ⇒ Promise
• .handleResponseError(resp, element) ⇒ Object ⎮ Void
• .handleError(element, error) ⇒ Promise
• .sendDataToDebugConsole(params, resp, label, [element]) ⇒ void
omniscriptActionBlock.processAction(element) ⇒ Promise
Overwrites inherited processAction. Handles asynchronous processing for the Action Block. Requests are
independent of each other.
Kind: instance method of ns/omniscriptActionBlockScope: private
Param Type
element Object
omniscriptActionBlock.handleResponseError(resp, element) ⇒ Object ⎮ Void

Overwrites inherited handleResponseError. Determines if Action Block is to apply successful responses
despite having errored responses present.

company 450
OmniStudio
Param Type
resp Object
element Object
omniscriptActionBlock.handleError(element, error) ⇒ Promise

Handles common errors present in the Action Block.
Param Type
element Object
error Object
omniscriptActionBlock.sendDataToDebugConsole(params, resp, label, [element]) ⇒ void

Overwrites inherited sendDataToDebugConsole. Sends data to the Debug Console event handler.
Param Type
params Object
resp Object
label String
[element] Object
ns/omniscriptActionBlock ⇐ OmniscriptBaseAction
• ns/omniscriptActionBlock ⇐ OmniscriptBaseAction
• .processAction(element) ⇒ Promise
• .handleResponseError(resp, element) ⇒ Object ⎮ Void
• .handleError(element, error) ⇒ Promise
omniscriptActionBlock.processAction(element) ⇒ Promise
Overwrites inherited processAction. Handles asynchronous processing for the Action Block. Requests are
independent of each other.
Param Type
element Object

company 451
OmniStudio
omniscriptActionBlock.handleResponseError(resp, element) ⇒ Object ⎮ Void

Overwrites inherited handleResponseError. Determines if Action Block is to apply successful responses
despite having errored responses present.
Param Type
resp Object
element Object
omniscriptActionBlock.handleError(element, error) ⇒ Promise

Handles common errors present in the Action Block.
Param Type
element Object
error Object
OmniScript Atomic Element (omniscriptAtomicElement) ReadMe

This page contains an OmniScript Atomic Element LWC ReadMe for each Vlocity release.

Vlocity Insurance and Health Spring '20 and Summer '20

This is the base component for LWC OmniScript input elements, for example, Text, Checkbox, etc. It
derives from omniscriptBaseComponent and implements hasValidation mixin.
Table 3. Properties
get defaultValue private Overwrite the one omniscriptBaseElement to support merge fields for Default Values
Table 4. Methods
Signature Scope Return Description
Value
prepareIMaskProperties(mask) private void Method to process mask property to be compatible with third party
javascript library iMask format (we use iMask in LWC)
findThousandsSeparator(mask) private String Helper method for mask handling

company 452
OmniStudio

Value
initCompVariables() private void Overwrite the one in omniscriptBaseComponent
applyRepeatableStyles() private void Applies class styles to support repeat / repeat clone features for all
atomic inputs.
validateData(data) private Object Method to programmatically validate the data from API responses
before applying it to the OmniScript (for example, Text element only
accepts string or null)
validityHook(newShow) private void Overwrite the one in omniscriptBaseComponent to handle client
side validation of OmniScript input elements
getImaskCurrencyAttributes() private Object Helper method for mask handling
(iMask)
getImaskNumberAttributes() private Object Helper method for mask handling
(iMask)
getCurrencySymbol(format) private String Helper method for currency handling
setElementFormattedValue() private void Helper method for retrieving the masked/formatted value from
iMask lib
stateRefresh private void Overwrite the one in omniscriptBaseElement to handle repeat
delete
Usage
This component derives from omniscriptBaseElement and implements hasValidation mixin. It serves as the
base component for all OmniScript input LWCs.
Methods

Value
(iMask)
(iMask)
iMask lib

company 453
OmniStudio

Value
stateRefresh private void Overwrite the one in omniscriptBaseElement to handle repeat
delete
get defaultValue() private void Overwrite the one omniscriptBaseElement to support merge fields
for Default Values
Usage
Methods

Value
(iMask)
(iMask)
iMask
Usage
OmniScript Base Action (omniscriptBaseAction) ReadMe

This page contains an OmniScript Base Action LWC ReadMe for each Vlocity release.

company 454
OmniStudio


The OmniScript Base Action component is the base component for all OmniScript Action components. The
OmniScript Base Action provides common functionality that is shared amongst all actions in the OmniScript
actions framework.
Properties
The following are a list of properties that are declared inside of the OmniScript Base Action.

_isBtn private Identifies if the action is a button.
_actionUtilClass private Stores action utility class instance
Methods
The following are a list of methods that are declared inside of the OmniScript Base Action.

execute() api (public) Promise API method that starts the action execution flow.
handleResponse(resp, element) private Object Handles the response from the action framework and
interacts with the UI.
initCompVariables() private Void Overwrites inherited initCompVariables.
checkActionValidity(element) private boolean Checks validity for executing an action.
runAction(element) private * Full action flow for action execution.
handleToastCompletion(title, message) private Void Displays toasts upon action completion. Utilized in the
Action Framework.
applyCallResp(json, bApi = false, api (public) void Overwrites inherited applyCallResp.
bValidation = false)
skipValidation() private Boolean Defines if validation is to be skipped for a specific
action.
HTML Markup
Newport and Lightning HTML markups are provided for this component.
Usage
This component derives from the OmniscriptGroupElement. It serves as a base component for all
OmniScript Action LWCs.
The OmniScript Base Action component is the base component for all OmniScript Action components. The
actions framework.

company 455
OmniStudio
Properties

_isBtn private Identifies if the action is a button.
_actionUtilClass private Stores action utility class instance
Methods

execute() api (public) Promise API method that starts the action execution flow.
handleResponse(resp, element) private Object Handles the response from the action framework and
interacts with the UI.
initCompVariables() private Void Overwrites inherited initCompVariables.
checkActionValidity(element) private boolean Checks validity for executing an action.
runAction(element) private * Full action flow for action execution.
handleToastCompletion(title, message) private Void Displays toasts upon action completion. Utilized in the
Action Framework.
applyCallResp(json, bApi = false, api (public) void Overwrites inherited applyCallResp.
skipValidation() private Boolean Defines if validation is to be skipped for a specific
action.
HTML Markup
Usage
The OmniScript Base Action component is the base component for all OmniScript actions components. The
actions framework.
Properties

isPageLoading track (private) Triggers a spinner that fills up the entire component.
isBtnLoading track (private) Triggers a spinner for buttons that is scoped specifically to fill up the button only.
Methods

company 456
OmniStudio

Value
execute() public Promise API method that provides a fork decision which determines
if the action should be executed as an action button or an
action in between steps.
handleResponse(resp, firstStepIndex) public Object API method that handles the response once the action has
been executed and the response has been received.
invokeAction(params, data) private Promise Invokes the server utilizing the Vlocity Generic Invoke
framework. If a server call is not needed, it will receive data
and return it as a resolved promise. If server call is not
needed, params should be undefined and data to return as
a resolved promise should be passed in utilizing the data
argument.
evaluateSpinner(value) private void Toggles the respective spinners.
preProcessCommonReq(element, private Object Performs preprocessing of an action's request.
params, input, vlcParams)
handleToastCompletion(element) private void Handles toast completions.
handleActionResp(element, resp) private Object Performs additional handing of action responses.
runAction(element, vlcParams) private Promise Performs the full execution flow of an action. This method
is primarily used for when the action has a button markup.
handleExtraPayload(extraPayload, private Object Handles the payload.
input)
handleQueueableResp(resp) private Object Handles queueable apex support.
postProcess(resp) private Object Performs a post processing of the executed action's
response.
applyCallResp(json, bApi = false, public void API method that applies the response to the data JSON.
bValidation = false) Overwrites inherited applyCallResp to not perform any
action. Response application is performed in the
OmniscriptHeader component.
skipValidation() private Boolean Defines if validation is to be skipped for a specific action.
connectedCallback() private void Overwrites native LWC connectedCallback. Initializes
OmniScript component.
renderedCallback() private void Overwrites native LWC renderedCallback. Initializes
OmniScript component.
render() private template Overwrites native LWC render. Renders newport or
lightning templates for OmniScript component.
handleActionError(err, element, public void Handles errors and dispatches error modal.
firstIndex)
HTML Markup
Usage
The OmniScript Base Action provides the OmniScript Actions framework a skeleton of the primary
functionality that are common amongst all actions. All OmniScript Action LWCs derive from this component,
for example, OmniScript HTTP Action, due to the LWC inheritance model, knowledge of this component will
help better customize custom LWCs that are derived from OmniScript OOTB Action LWCs.

company 457
OmniStudio
OmniScript Base Element (omniscriptBaseElement) ReadMe

This page contains an OmniScript Base Element LWC ReadMe for each Vlocity release.


This is the base component for LWC OmniScript. Majority of OmniScript LWCs derive from this component.
It contains all common properties and methods that can be overridable.
Table 5. Properties
elementValue track (private) Reactive private property. The component rerenders when it changes. This is the key property
to display the data entered by the user or coming from the API responses in the input elements
or store the aggregated JSON data for the group elements.
jsonDef api (public) Reactive public property. Set it with JSON Definition of an OmniScript or an OmniScript
element (one OmniScript forms is a component tree).
seedJson api (public) Reactive public property. It is a collection of URL prefill, seed data set up in the designer and
cached JSON from API calls.
layout api (public) Reactive public property. Determines which LWC player to use - lightning or newport.
resume api (public) Reactive public property. Whether the OmniScript is run in new-launch or resume mode.
scriptHeaderDef api (public) Reactive public property. It is used to pass down the script header property to the OmniScript
child components.
jsonData api (public) Reactive public property. It is used to pass down data JSON of the OmniScript to all
OmniScript child components.
jsonDataStr api (public) Reactive public property. It is the stringified data JSON to overcome the LWC performance
issue of JSON.stringify the proxy Object.
runMode api (public) Flag to determine whether the OmniScript (active or inactive) is being run inside the designer
or not.
defaultValue private get defaultValue() - Getter to get default value of the OmniScript element
nullVal private get nullVal() - Getter to overwrite the definition of null value
_jsonPath private get _jsonPath() - Getter to find the JSON path of the Element
Table 6. Methods
Value
applyCallResp(json, bApi = false, public void API method to apply API responses back to OmniScript
combinedWatch() private void Watch method - gets called initially in renderedCallback and later
when data JSON changes
initCompVariables() private void Method to initialize private component variables

company 458
OmniStudio

Value
stateRefresh() private void Gets called in combinedWatch to allow real-time refresh of Text
Block, Formula, etc.
omniShow() private Boolean Method to handle show/hide of OmniScript elements, gets called in
combinedWatch
validityHook() private void Method to take care of the client side validation check, gets called
in omniShow()
applyCtrlWidth() private void Method to handle grid width of OmniScript elements
renderedCallback() private void Overwrite of native LWC renderedCallback. It takes care of
applying default value, URL prefill , seed data set up in the
designer, cached JSON from api responses to the OmniScript. It
also initializes the watch for show/hide, client side validation etc.
initialRenderCallBack private void Custom lifecycle hook, being called during first render cycle
connectedCallback() private void Overwrite of native LWC connectedCallback. Initialize the
OmniScript component
constructor() private void Initialization
createAggregateNode() private Object Method to create the JSON data for omniaggregate event
(aggregation event to build up data JSON of the OmniScript)
shouldNullify(json) private Boolean Method to determine whether to overwrite the defintion of null
value
treatResp(json) private Object Method to pre-process the JSON
setElementValue(json, bApi, private void Method to set elementValue, it also calls
bValidation) setElementFormattedValue()
setElementFormattedValue() private void Method to make formatted data of the input elements to be
avaiable for display in Text Block, etc.
canRepeat private Boolean Method to determine whether the element can repeat
canRemove private Boolean Method to determine whether the repeated element can be deleted
handleAdd public void Method to repeat element
handleRemove private void Method to delete repeated element
handleRepeat private void Auxiliary method for both handleAdd or handleRemove
sendDataToDebugConsole private void Method to send remote call debug logs to the designer debug
widget
Usage
Majority of the OmniScript LWCs derive from this component, for example, omniscriptText, due to LWC
inheritance model, knowledge of this component will help you better customize your custom LWC derived
from OmniScript OOTB LWCs.
This is the base component for LWC OmniScript. Majority of OmniScript LWCs derive from this component.
It contains all common properties and methods that can be overridable.

company 459
OmniStudio
Properties

jsonDef api (public) Reactive public property. Set it with JSON Definition of an OmniScript or an OmniScript
seedJson api (public) Reactive public property. It is a collection of URL prefill, seed data set up in the designer and
resume api (public) Reactive public property. Whether the OmniScript is run in new-launch or resume mode.
scriptHeaderDef api (public) Reactive public property. It is used to pass down the script header property to the OmniScript
child components.
jsonData api (public) Reactive public property. It is used to pass down data JSON of the OmniScript to all
jsonDataStr api (public) Reactive public property. It is the stringified data JSON to overcome the LWC performance
issue of JSON.stringify the proxy Object.
runMode api (public) Flag to determine whether the OmniScript (active or inactive) is being run inside the designer
or not.
_jsonPath private get _jsonPath() - Getter to find the JSON path of the Element
Methods

Value
combinedWatch
in omniShow()
initialRenderCallBack private void Custom lifecycle hook, being called during first render cycle

company 460
OmniStudio

Value
value
canRepeat private Boolean Method to determine whether the element can repeat
canRemove private Boolean Method to determine whether the repeated element can be deleted
handleAdd public void Method to repeat element
hanldeRemove private void Method to delete repeated element
handleRepeat private void Auxiliary method for both handleAdd or handleRemove
sendDataToDebugConsole private void Method to send remote call debug logs to the designer debug
widget
Usage
Majority of the OmniScript LWCs derive from this component, for example, omniscriptText, due to LWC
This is the base component for LWC OmniScript. The majority of OmniScript LWCs derive from this
component. It contains all common properties and methods that can be overridable.
Properties

jsonDef api (public ) Reactive public property. Set it with JSON Definition of an OmniScript or an OmniScript
seedJson api (public ) Reactive public property. It is a collection of URL prefill, seed data set up in the designer and
layout api (public ) Reactive public property. Determines which LWC player to use - lightning or newport.
resume api (public ) Reactive public property. Whether the OmniScript is run in new-launch or resume mode.
scriptHeaderDef api (public ) Reactive public property. It is used to pass down the script header property to the OmniScript
child components.
jsonData api (public ) Reactive public property. It is used to pass down data JSON of the OmniScript to all

company 461
OmniStudio
Methods

Value
combinedWatch
in omniShow()
value
Usage
The majority of OmniScript LWCs derive from this component, for example, omniscriptText, due to LWC
OmniScript Base Mixin (omniscriptBaseMixin) ReadMe

This page contains an OmniScript Base Mixin LWC ReadMe for each Vlocity release.


company 462
OmniStudio

This is the base mixin for LWC OmniScript.
Table 7. Properties
omniJsonDef api (public ) Reactive public property. Set it with JSON definition of an OmniScript or an OmniScript
omniSeedJson api (public ) Reactive public property. It is a collection of URL prefill, seed data set up in the designer
and cached JSON from API calls.
omniResume api (public ) Reactive public property. Whether the OmniScript is run in new-launch or resume mode.
omniScriptHeaderDef api (public ) Reactive public property. It is used to pass down the script header property to the
omniJsonData api (public ) Reactive public property. It is used to pass down data JSON of the OmniScript to all
omniJsonDataStr api (public ) Reactive public property. It is used to pass down a stringified data JSON of the
OmniScript to all OmniScript child components.
omniCustomState api (public ) Reactive public property. It is used to save data from the custom component. It is
separate from the data JSON.
dataLayout public Determines which LWC player to use - lightning or newport.
showValidation track (private) Flag that determines whether the component passes validation.
Table 8. Methods
Value
omniUpdateDataJson(input, private void Updates Custom LWC's node inside of Data JSON
aggregateOverride = false) with the passed in object
omniApplyCallResp(response, usePubsub private void Updates OmniScript's Data JSON with the passed in
= false) object.
omniSaveState(input, key, usePubsub = private void Saves data in OmniScript mapped to a specified key
false) or defaults to the id of the custom lwc.
omniSaveForLater(auto = false) private void Notifies the OmniscriptHeader that the current
instance needs to be saved.
omniGetSaveState(key) private Object Retrieves data in OmniScript for a specific custom
LWC.
omniGetMergeField(mergeFieldString) private Any Replaces all valid merge field strings with values from
OmniScript's Data JSON
omniNextStep() private void Navigates OmniScript to the next step
omniPrevStep() private void Navigates OmniScript to the previous step
omniNavigateTo(element) private void Given the step name or step index, navigate the
OmniScript to any step before the current step or to
the immediate next step
omniValidate(showMessage = true) private void Triggers validation for component. Calls parent's
reportValidity and calls omniscriptBaseMixin's
reportValidity. By default, showValidation will be set
causing error messages to be displayed. Setting to
false will prevent error messages from getting
displayed when calling omniValidate

company 463
OmniStudio

Value
omniRemoteCall(params, enableSpinner = private Promise Triggers a remote call. Invokes apex classes that
false) extend from Vlocity Open Interface. Remote calls are
called using Generic Invoke.
checkValidity() api Boolean Default is true. Returning false prevents navigating to
(public) the next step. Overriding this function allows control
over navigating to the next step.
reportValidity() api Boolean Sets showValidation to true when checkValidity returns
(public) false
Usage
Below is an example showing how to include omniscriptBaseMixin in a customLWC
import { OmniscriptBaseMixin } from 'vlocity_ins/omniscriptBaseMixin'; //

outside Vlocity package, if you are developing an OOTB Vlocity LWC, change it
to 'c/omniscriptBaseMixin'

{}
Validation
Define your logic in checkValidity, and assign the result to this.isValid.

To integrate with the OmniScript Validation Framework, define an override method for checkValidity()
on your component.
...
return (this.selection.length < 3);
}
selectItem(item) {
this.selection = [...this.selection, item];
// When properties change that affect validity, update the
// validity state by calling
this.omniValidate();
}
...
The definition for checkValidity should return true if the component is valid, and false if invalid.
Validation will be performed when your component first renders, otherwise call omniValidate when
properties change that affect your components validity.
selectItem(item) {
// error messages will be hidden until next button is pressed or other
omniValidate() is called

company 464
OmniStudio
this.omniValidate(false);
}
Displaying validation messages:

It's best practice to display a detailed validation message so the user knows how to correct mistakes.
Validation messages should:
1. Appear when the user tries to progress to the next step.

2. Appear when the user enters invalid data and the element loses focus. (May not be applicable for all
components.)
3. Be removed as soon as validation requirements are met.
As a general rule of thumb, try not to display validation messages before the user is finished entering data.
The value of showValidation will update whenever omniValidate is called.
<p class="validation-message"
if:true={showValidation}>Please select at least 3 items.</p>
Properties

omniJsonDataStr api (public ) Reactive public property. It is used to pass down a stringified data JSON of the
OmniScript to all OmniScript child components.
Methods

Value
omniUpdateDataJson(input, private void Updates Custom LWC's node inside of Data JSON with
aggregateOverride = false) the passed in object

company 465
OmniStudio

Value
omniApplyCallResp(response) private void Updates OmniScript's Data JSON with the passed in
object
omniSaveState(input, key) private void Saves data in OmniScript mapped to a specified key or
defaults to the id of the custom lwc. It is separate from
the data JSON.
omniSaveForLater(auto=false private void Notifies the OmniscriptHeader that the current instance
needs to be saved.
omniGetSaveState(key) private Object Retrieves data in OmniScript for a specific custom LWC.
(public) false
omniValidate(showMessage=true) private void Triggers validation for component. Calls parent's
causing error messages to be displayed. Setting to false
will prevent error messages from getting displayed
when calling omniValidate
Usage


{}
Validation

on your component.
...
}
selectItem(item) {

company 466
OmniStudio
}
...
selectItem(item) {
}


components.)
Properties


company 467
OmniStudio

Methods
Value
omniUpdateDataJson(input, private void Updates OmniScript's Data JSON with the passed in
aggregateOverride = false) object
omniSaveState(input, key) private void Saves data in OmniScript mapped to a specified key or
defaults to the id of the custom lwc. It is separate from
the data JSON.
omniGetSaveState(key) private Object Retrieves data in OmniScript for a specific custom LWC.
(public) false
omniValidate(showMessage=true) private void Triggers validation for component. Calls parent's
causing error messages to be displayed. Setting to false
will prevent error messages from getting displayed
when calling omniValidate
Usage


{}
Validation
on your component.
...
}

company 468
OmniStudio
selectItem(item) {
}
...
selectItem(item) {
}


components.)
OmniScript Block ReadMe

This page contains an OmniScript Block LWC ReadMe for each Vlocity release.


company 469
OmniStudio
ns/omniscriptBlock ⇐ OmniscriptGroupElement
Extends: OmniscriptGroupElement
• ns/omniscriptBlock ⇐ OmniscriptGroupElement
• .expandContent : Boolean
• .blockClasses : String
• .activeSections : String
• .sldsBlockClasses : String
• .showErrorMessage : Boolean
• .blockLabel : String
• .toggleContent() ⇒ Void
• .initCompVariables() ⇒ Void
• .updateBlockClasses() ⇒ Void
• .render() ⇒ Template
omniscriptBlock.expandContent : Boolean
Flag that identifies if the block is expanded.
Kind: instance property of ns/omniscriptBlockScope: private (track)
omniscriptBlock.blockClasses : String
Classes applied to the block.
omniscriptBlock.activeSections : String
Indicates active block.
omniscriptBlock.sldsBlockClasses : String
Lightning classes applied to the block.
omniscriptBlock.showErrorMessage : Boolean
Flag to show error message.
Kind: instance property of ns/omniscriptBlockScope: private
omniscriptBlock.blockLabel : String
Gets block label.
Kind: instance property of ns/omniscriptBlockScope: private

company 470
OmniStudio
omniscriptBlock.toggleContent() ⇒ Void
Handles when block is toggled.
Kind: instance method of ns/omniscriptBlockScope: private
omniscriptBlock.initCompVariables() ⇒ Void
Overwrites inherited initCompVariables.
omniscriptBlock.updateBlockClasses() ⇒ Void
Updates block classes.
omniscriptBlock.render() ⇒ Template
Overwrites native render.
ns/omniscriptBlock ⇐ OmniscriptGroupElement
Extends: OmniscriptGroupElement
• ns/omniscriptBlock ⇐ OmniscriptGroupElement
• .expandContent : Boolean
• .blockClasses : String
• .activeSections : String
• .sldsBlockClasses : String
• .showErrorMessage : Boolean
• .blockLabel : String
• .toggleContent() ⇒ Void
• .initCompVariables() ⇒ Void
• .updateBlockClasses() ⇒ Void
omniscriptBlock.expandContent : Boolean
Flag that identifies if the block is expanded.
Kind: instance property of ns/omniscriptBlock
Scope: private (track)
omniscriptBlock.blockClasses : String
Classes applied to the block.

company 471
OmniStudio
omniscriptBlock.activeSections : String
Indicates active block.
omniscriptBlock.sldsBlockClasses : String
Lightning classes applied to the block.
omniscriptBlock.showErrorMessage : Boolean
Flag to show error message.
Scope: private
omniscriptBlock.blockLabel : String
Gets block label.
Scope: private
omniscriptBlock.toggleContent() ⇒ Void
Handles when block is toggled.
Kind: instance method of ns/omniscriptBlock
Scope: private
omniscriptBlock.initCompVariables() ⇒ Void
Overwrites inherited initCompVariables.
Scope: private
omniscriptBlock.updateBlockClasses() ⇒ Void
Updates block classes.

company 472
OmniStudio
Scope: private
omniscriptBlock.render() ⇒ Template
Scope: private
OmniScript Calculation Action ReadMe

This page contains an OmniScript Calculation Action LWC ReadMe for each Vlocity release.

ns/omniscriptCalculationAction
This component is used to perform Calculation Action.
module.exports ⇐ OmniscriptRemoteAction ⏏
Default exported class OmniscriptCalculationAction.
Kind: Exported classExtends: OmniscriptRemoteAction
OmniScript Cancel Action ReadMe

This page contains an OmniScript Cancel Action LWC ReadMe for each Vlocity release.

c/omniscriptCancelAction ⇐ OmniscriptNavigateAction
Element that extends the OmniscriptNavigateAction and performs navigation away from the omniscript. In
the designer a cancel action is defined by adding a Navigate Action element to the root level of the
script, and giving it the name 'CANCEL'.

company 473
OmniStudio
Extends: OmniscriptNavigateAction
• c/omniscriptCancelAction ⇐ OmniscriptNavigateAction
• instance
• .CANCEL_RESOLVED : string
• .DEFAULT_CANCEL_RESOLVED : string
• .CANCEL_ABORTED : string
• .CANCEL_DISABLED : string
• .cancel() ⇒ Promise.<any>
• .execute()
• static
• [.cancelPrompt(comp, [message], [header])](#markdown-header-
omniscriptcancelactioncancelpromptcomp-message-header-promiseany) ⇒ Promise.<any>
omniscriptCancelAction.CANCEL_RESOLVED : string
Constant value returned when cancel succeeds.
Kind: instance property of c/omniscriptCancelActionScope: static
omniscriptCancelAction.DEFAULT_CANCEL_RESOLVED : string
Constant value returned when cancel default (inline) succeeds.
omniscriptCancelAction.CANCEL_ABORTED : string
Constant value thrown when cancel is aborted.
omniscriptCancelAction.CANCEL_DISABLED : string
Constant value thrown when cancel is disabled.
omniscriptCancelAction.cancel() ⇒ Promise.<any>
Execute the configured navigate action. Fired by omniscriptHeader.
Kind: instance method of c/omniscriptCancelActionScope: api (public)
omniscriptCancelAction.execute()
Override default execute so the cancel action isn't immediately fired.
OmniscriptCancelAction.cancelPrompt(comp, [message], [header]) ⇒ Promise.<any>

Show the cancel modal confirm

company 474
OmniStudio
Kind: static method of c/omniscriptCancelActionScope: static

comp LightningElement Component used to fire the omni modal event. Should be a omniscript-cancel-action, or navigate-
action. Must be a child of the omni header in order for the header to recieve the event.
[message] string Message to display in the modal confirm.
[header] string Title of the modal confirm.
c/omniscriptCancelAction ⇐ OmniscriptNavigateAction
Element that extends the OmniscriptNavigateAction and performs navigation away from the omniscript. In
the designer a cancel action is defined by adding a Navigate Action element to the root level of the
script, and giving it the name 'CANCEL'.
Extends: OmniscriptNavigateAction
• c/omniscriptCancelAction ⇐ OmniscriptNavigateAction
• instance
• .CANCEL_RESOLVED : string
• .CANCEL_ABORTED : string
• .CANCEL_DISABLED : string
• .cancel() ⇒ Promise.<any>
• .execute()
• static
• [.cancelPrompt(comp, [message], [header])](#markdown-header-
omniscriptcancelactioncancelpromptcomp-message-header-promiseany) ⇒ Promise.<any>
omniscriptCancelAction.CANCEL_RESOLVED : string
Constant value returned when cancel succeeds.
omniscriptCancelAction.CANCEL_ABORTED : string
Constant value thrown when cancel is aborted.
omniscriptCancelAction.CANCEL_DISABLED : string
Constant value thrown when cancel is disabled.
omniscriptCancelAction.cancel() ⇒ Promise.<any>
Execute the configured navigate action. Fired by omniscriptHeader.

company 475
OmniStudio
omniscriptCancelAction.execute()
Override default execute so the cancel action isn't immediately fired.
OmniscriptCancelAction.cancelPrompt(comp, [message], [header]) ⇒ Promise.<any>

Show the cancel modal confirm
Kind: static method of c/omniscriptCancelActionScope: static

comp LightningElement Component used to fire the omni modal event. Should be a omniscript-cancel-action, or navigate-
action. Must be a child of the omni header in order for the header to recieve the event.
[message] string Message to display in the modal confirm.
[header] string Title of the modal confirm.
OmniScript Checkbox (omniscriptCheckbox) ReadMe

This page contains an OmniScript Checkbox LWC ReadMe for each Vlocity release.


This component is used to render a checkbox element, This is extends from
OmniscriptAtomicElement.
Table 9. Properties
_needMoreValidation private Bypass second validation for checkbox
Table 10. Methods

handleChange(evt) private void Change handle
connectedCallback() private void Overwrites native LWC connectedCallback
validateData(data) private Object validate checkbox value
render() private template Overwrites native LWC render
initCompVariables() private Void Overwrites inherited initCompVariables

company 476
OmniStudio
HTML Markup
This component has a single template that supports both lightning and newport themes depending on the
layout.
Usage
<c-omniscript-checkbox
json-def={jsonDef}
data-omni-key={jsonDef.name}
json-data={jsonData}
layout={layout}
resume={resume}
script-header-def={scriptHeaderDef}
seed-json={seedDataJSON}>
</c-omniscript-checkbox>
Attributes
jsonDef -- json definition of the OmniScript Element
Example ---
{
"type": "Checkbox",
"rootIndex": 0,
"response": false,
"propSetMap": {
"label": "Checkbox1",
"disOnTplt": false,
"hide": false,
"HTMLTemplateId": "",
"accessibleInFutureSteps": false,
"conditionType": "Hide if False",
"show": null,
"checkLabel": "Checkbox1",
"helpText": "",
"help": false,
"defaultValue": false,
"readOnly": false,
"repeatLimit": null,
"repeatClone": false,
"repeat": false,
"controlWidth": 12
},
"name": "Checkbox1",
"level": 1,
"JSONPath": "Step1:Checkbox1",
"indexInParent": 0,

company 477
OmniStudio
"index": 0,
"children": [],
"bHasAttachment": false,
"bCheckbox": true,
"lwcId": "lwc000",
"bInit": true
}
jsonData --- the data JSON of the OmniScript
scriptHeaderDef --- OmniScript header configuration
Example ---
{
"labelMap": { "Checkbox1": "Step1:Checkbox1", "Step1": "Step1" },
"propSetMap": {
"stepChartPlacement": "right",
"disableUnloadWarn": true,
"errorMessage": { "custom": [] },
"consoleTabIcon": "custom:custom18",
"consoleTabTitle": null,
"rtpSeed": false,
"showInputWidth": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"consoleTabLabel": "New",
"cancelRedirectTemplateUrl": "vlcCancelled.html",
"cancelRedirectPageName": "OmniScriptCancelled",
"cancelSource": "%ContextId%",
"allowCancel": true,
"cancelType": "SObject",
"visualforcePagesAvailableInPreview": {},
"hideStepChart": false,
"timeTracking": false,
"knowledgeArticleTypeQueryFieldsMap": {},
"lkObjName": null,
"bLK": false,
"enableKnowledge": false,
"trackingCustomData": {},
"seedDataJSON": {},
"elementTypeToHTMLTemplateMapping": {},
"autoSaveOnStepNext": false,
"saveURLPatterns": {},

company 478
OmniStudio
"saveObjectId": "%ContextId%",
"saveContentEncoded": false,
"saveForLaterRedirectTemplateUrl": "vlcSaveForLaterAcknowledge.html",
"saveForLaterRedirectPageName": "sflRedirect",
"saveExpireInDays": null,
"saveNameTemplate": null,
"allowSaveForLater": true,
"persistentComponent": [
{
"modalConfigurationSetting": {
"modalSize": "lg",
"modalController": "ModalProductCtrl",
"modalHTMLTemplateId": "vlcProductConfig.html"
},
"itemsKey": "cartItems",
"id": "vlcCart",
"responseJSONNode": "",
"responseJSONPath": "",
"sendJSONNode": "",
"sendJSONPath": "",
"postTransformBundle": "",
"preTransformBundle": "",
"remoteOptions": {
"preTransformBundle": ""
},
"remoteTimeout": 30000,
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",
"modalController": "",
"modalHTMLTemplateId": ""
},
"itemsKey": "knowledgeItems",
"id": "vlcKnowledge",
"remoteOptions": {
},

company 479
OmniStudio
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}
]
},
"hasInvalidElements": false,
"acUiElements": { "Step1": "", "Checkbox1": "" }
}
layout --- newport or lightning
resume --- true or false
seedJson --- designer seed JSON + checkbox parameters + cached API responses
This component is used to render a checkbox element. This component extends from
Properties

_needMoreValidation private Bypass second validation for checkbox
Methods

initCompVariables() private Void Overwrites inherited initCompVariables
HTML Markup
layout.
Usage
json-def={jsonDef}

company 480
OmniStudio
layout={layout}
resume={resume}
Attributes
Example ---
{
"type": "Checkbox",
"rootIndex": 0,
"response": false,
"propSetMap": {
"disOnTplt": false,
"hide": false,
"show": null,
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bCheckbox": true,
"lwcId": "lwc000",
"bInit": true
}

company 481
OmniStudio
Example ---
{
"propSetMap": {
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
{
"modalSize": "lg",

company 482
OmniStudio
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}
]
},
}

company 483
OmniStudio
This component is used to render a checkbox element, This component extends from
Methods

HTML Markup
layout.
Usage
json-def={jsonDef}
layout={layout}
resume={resume}
Attributes
Example ---
{
"type": "Checkbox",
"rootIndex": 0,
"response": false,
"propSetMap": {
"disOnTplt": false,
"hide": false,

company 484
OmniStudio
"show": null,
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bCheckbox": true,
"lwcId": "lwc000",
"bInit": true
}
Example ---
{
"propSetMap": {
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,

company 485
OmniStudio
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
{
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",

company 486
OmniStudio
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}
]
},
}
OmniScript Currency (omniscriptCurrency) ReadMe

This page contains an OmniScript Currency LWC ReadMe for each Vlocity release.


company 487
OmniStudio

This component is used to render a Currency Element. OmniscriptCurrency is extended from
OmniscriptAtomicElement. This component supports all salesforce supported currency formats.
Table 11. Properties

_imaskCurrencyAttributes private Hold an object from Helper method for mask handling
_commitOnChange private Checks whether value is committed or not
Table 12. Methods

initCompVariables() private void Overwrites inherited initCompVariables.
handleBlur(evt) private void Sets the element value and triggers aggregation
validateData(data) private Object Evaluates if currency is valid.
Usage
<c-omniscript-currency json-def={jsonDef}
layout={layout}
resume={resume}
</c-omniscript-currency>
Attributes
jsonDef --- JSON definition of the OmniScript Element
Example ---
{
"type": "Currency",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "Currency1",
"disOnTplt": false,
"hide": false,
"debounceValue": 0,

company 488
OmniStudio
"show": null,
"hideGroupSep": false,
"allowNegative": false,
"max": null,
"min": null,
"mask": null,
"helpText": "",
"help": false,
"defaultValue": null,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Currency1",
"level": 1,
"JSONPath": "Step1:Currency1",
"indexInParent": 0,
"index": 0,
"children": [],
"bCurrency": true,
"lwcId": "lwc000"
}
dataOmniKey --- element unique identifier = name value in element's JSON definition
Example ---
{
"labelMap": {
"Currency1": "Step1:Currency1",
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []

company 489
OmniStudio
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"persistentComponent": [{
"modalSize": "lg",
},
"id": "vlcCart",

company 490
OmniStudio
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"hasInvalidElements": true,
"acUiElements": {
"Step1": "",
"Currency1": ""
}
}
seedJson --- designer seed JSON + url parameters + cached API responses

company 491
OmniStudio
This component is used to render a Currency Element. OmniscriptCurrency extends from
Properties

_imaskCurrencyAttributes private Hold an object from Helper method for mask handling
Methods

Usage
layout={layout}
resume={resume}
Attributes
Example ---
{
"type": "Currency",
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"hide": false,
"debounceValue": 0,

company 492
OmniStudio

"show": null,
"max": null,
"min": null,
"mask": null,
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bCurrency": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {

company 493
OmniStudio
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",

company 494
OmniStudio
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"Currency1": ""
}
}

company 495
OmniStudio
This component is used to render a Currency Element. OmniscriptCurrency is extended from
Methods
handleBlur(evt) private void Event handler for blur events.
Usage
layout={layout}
resume={resume}
Attributes
Example ---
{
"type": "Currency",
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"hide": false,
"debounceValue": 0,
"show": null,
"max": null,
"min": null,
"mask": null,

company 496
OmniStudio
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bCurrency": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",

company 497
OmniStudio
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {

company 498
OmniStudio
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"Currency1": ""
}
}
Omniscript Custom LWC (omniscriptCustomLwc) ReadMe

This page contains an OmniScript Custom LWC element ReadMe for each Vlocity release.

company 499
OmniStudio


This component is used to wrap a Custom LWC, It derives from omniscriptBaseComponent and
implements hasValidation mixin.
Table 13. Methods

applyCallResp(json, bApi = false, api (public) void Overwrite to prevent default behavior
validityHook(newShow) private void Set masking attributes
handleValidation(evt) private void Event handler for validation events from custom LWC
constructor() private void Initializes event handler listener
handleOmniAggregate private void Overwrite to handle data JSON aggregation when there
is show/hide rule on Custom LWCs
HTML Markup
layout.
Usage
<c-omniscript-custom-lwc
json-def={jsonDef}
layout={layout}
resume={resume}
</c-omniscript-custom-lwc>
Attributes
seedJson --- designer seed JSON + text parameters + cached API responses

company 500
OmniStudio
Methods

handleValidation(evt) private void Event handler for validation events from custom LWC
handleOmniAggregate private void Overwrite to handle data JSON aggregation when there
is show/hide rule on Custom LWCs
HTML Markup
layout.
Usage
json-def={jsonDef}
layout={layout}
resume={resume}
Attributes

company 501
OmniStudio
Methods

handleValidation(evt) private void Event handler for validation events from custom
LWC
HTML Markup
layout.
Usage
json-def={jsonDef}
layout={layout}
resume={resume}
Attributes
Omniscript DataRaptor Extract Action (omniscriptDrExtractAction) ReadMe

This page contains an OmniScript DataRaptor Extract Action LWC ReadMe for each Vlocity release.


company 502
OmniStudio


The Omniscript Data Raptor Extract Action component provides functionality for data raptor extract
integration. This README will provide high-level information regarding the different properties and methods
utilized by the Omniscript Data Raptor Extract Action LWC component.
Methods
The following are a list of methods that are declared inside of the Omniscript Data Raptor Extract Action.
Data Raptor Extract Action is inherited from Omniscript Base Action for additional support regarding action
invocation and processing. Reference the Omniscript Base Action README for additional information
regarding the inherited class.

connectedCallback private Void Overwrites inherited connectedCallback. Instantiates DR Extract Action Utility
Class from the Action Framework.
HTML Markup
HTML markup is inherited from the Omniscript Base Action. The templates support both lightning and
newport themes.
Usage
<c-omniscript-dr-extract-action json-def={jsonDef}
layout={layout}
resume={resume}
json-data-str={jsonDataStr}
run-mode={runMode}
script-header-def={scriptHeaderDef}>
</c-omniscript-dr-extract-action>
Attributes
Example ---
{
"type": "DataRaptor Extract Action",
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"enableDefaultAbort": false,

company 503
OmniStudio
"errorMessage": {
"default": null,
"custom": []
},
"label": "DataRaptorExtractAction1",
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"show": null,
"showPersistentComponent": [null, null],
"redirectPreviousWidth": 3,
"redirectPreviousLabel": "Previous",
"redirectNextWidth": 3,
"redirectNextLabel": "Next",
"redirectTemplateUrl": "vlcAcknowledge.html",
"redirectPageName": "",
"validationRequired": "Step",
"failureAbortMessage": "Are you sure?",
"failureGoBackLabel": "Go Back",
"failureAbortLabel": "Abort",
"failureNextLabel": "Continue",
"postMessage": "Done",
"inProgressMessage": "In Progress",
"dataRaptor Input Parameters": [],
"bundle": "",
"controlWidth": 12
},
"name": "DataRaptorExtractAction1",
"level": 1,
"JSONPath": "Step1:DataRaptorExtractAction1",
"indexInParent": 0,
"index": 0,
"children": [],
"bDataRaptorExtractAction": true,
"lwcId": "lwc000"
}

company 504
OmniStudio
jsonDataStr --- stringified data JSON of the OmniScript
runMode --- flag to determine the location of where the OmniScript is run
Example ---
{
"labelMap": {
"DataRaptorExtractAction1": "Step1:DataRaptorExtractAction1",
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},

company 505
OmniStudio
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",

company 506
OmniStudio
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"DataRaptorExtractAction1": ""
}
}
The OmniScript DataRaptor Extract Action component provides functionality for DataRaptor extract
utilized by the OmniScript DataRaptor Extract Action LWC component.
Methods
The following are a list of methods that are declared inside of the Omniscript Data Raptor Extract Action.
Data Raptor Extract Action is inherited from Omniscript Base Action for additional support regarding action

connectedCallback private Void Overwrites inherited connectedCallback. Instantiates DR Extract Action Utility
HTML Markup
newport themes.
Usage
layout={layout}
resume={resume}
run-mode={runMode}

company 507
OmniStudio
Attributes
Example ---
{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"errorMessage": {
"default": null,
"custom": []
},
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"show": null,
"bundle": "",
"controlWidth": 12
},
"level": 1,

company 508
OmniStudio
"indexInParent": 0,
"index": 0,
"children": [],
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,

company 509
OmniStudio
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",

company 510
OmniStudio
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
}
}
The Omniscript DataRaptor Extract Action component provides functionality for DataRaptor extract
utilized by the Omniscript DataRaptor Extract Action LWC component.
Methods
The following are a list of methods that are declared inside of the Omniscript DataRaptor Extract Action.
DataRaptor Extract Action is inherited from Omniscript Base Action for additional support regarding action

Value
executeAction(element, private Promise Handles the action request. queueableRespId is used for
queueableRespId) apex remote options queueable support.
postProcess(resp) private Object Performs a post process of the executed action's
response.

company 511
OmniStudio

Value
preProcessCommonReq(element, private Object Overwrites inherited preProcessCommonReq. Performs
params) preprocessing of the DR Extract Action's request.
HTML Markup
newport themes.
Usage
layout={layout}
resume={resume}
Attributes
Example ---
{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"errorMessage": {
"default": null,
"custom": []
},
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"show": null,

company 512
OmniStudio
"bundle": "",
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},

company 513
OmniStudio
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",

company 514
OmniStudio
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
}
}
OmniScript DataRaptor Post Action (omniscriptDrPostAction) ReadMe

This page contains an OmniScript DataRaptor Post Action LWC ReadMe for each Vlocity release.

company 515
OmniStudio


The Omniscript Data Raptor Post Action component provides functionality for data raptor post integration.
This README will provide high-level information regarding the different properties and methods utilized by
the Omniscript Data Raptor Post Action LWC component.
Methods
The following are a list of methods that are declared inside of the Omniscript Data Raptor Post Action. Data
Raptor Post Action is inherited from Omniscript Base Action for additional support regarding action

connectedCallback private Void Overwrites inherited connectedCallback. Instantiates DR Post Action Utility
HTML Markup
newport themes.
Usage
<c-omniscript-dr-post-action json-def={jsonDef}
layout={layout}
resume={resume}
run-mode={runMode}
</c-omniscript-dr-post-action>
Attributes
Example ---
{
"type": "DataRaptor Post Action",
"rootIndex": 0,

company 516
OmniStudio
"response": null,
"propSetMap": {
"disOnTplt": false,
"errorMessage": {
"default": null,
"custom": []
},
"label": "DataRaptorPostAction1",
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"show": null,
"validationRequired": "Submit",
"sendJSONNode": "",
"sendJSONPath": "",
"bundle": "",
"controlWidth": 12
},
"name": "DataRaptorPostAction1",
"level": 1,
"JSONPath": "Step1:DataRaptorPostAction1",
"indexInParent": 0,
"index": 0,
"children": [],
"bDataRaptorPostAction": true,
"lwcId": "lwc000"
}

company 517
OmniStudio
Example ---
{
"labelMap": {
"DataRaptorPostAction1": "Step1:DataRaptorPostAction1",
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,

company 518
OmniStudio
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {

company 519
OmniStudio
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"DataRaptorPostAction1": ""
}
}
The OmniScript DataRaptor Post Action component provides functionality for DataRaptor post integration.
the OmniScript DataRaptor Post Action LWC component.
Methods
The following are a list of methods that are declared inside of the OmniScript DataRaptor Post Action. Data
Raptor Post Action is inherited from Omniscript Base Action for additional support regarding action

connectedCallback private Void Overwrites inherited connectedCallback. Instantiates DR Post Action Utility
HTML Markup
newport themes.
Usage
layout={layout}
resume={resume}

company 520
OmniStudio
run-mode={runMode}
Attributes
Example ---
{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"errorMessage": {
"default": null,
"custom": []
},
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"show": null,
"sendJSONNode": "",
"sendJSONPath": "",
"bundle": "",

company 521
OmniStudio
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,

company 522
OmniStudio
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",

company 523
OmniStudio
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
}
}
The Omniscript DataRaptor Post Action component provides functionality for DataRaptor post integration.
the Omniscript DataRaptor Post Action LWC component.
Methods
The following are a list of methods that are declared inside of the Omniscript DataRaptor Post Action.
DataRaptor Post Action is inherited from Omniscript Base Action for additional support regarding action

company 524
OmniStudio

Value
response.
params) preprocessing of the DR Post Action's request.
HTML Markup
newport themes.
Usage
layout={layout}
resume={resume}
Attributes
Example ---
{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"errorMessage": {
"default": null,
"custom": []
},
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"show": null,

company 525
OmniStudio
"sendJSONNode": "",
"sendJSONPath": "",
"bundle": "",
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {

company 526
OmniStudio
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",

company 527
OmniStudio
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
}
}

company 528
OmniStudio
OmniScript DataRaptor Transform Action (omniscriptDrTransformAction) ReadMe

This page contains an OmniScript DataRaptor Transform Action LWC ReadMe for each Vlocity release.


The Omniscript Data Raptor Transform Action component provides functionality for data raptor transform
utilized by the Omniscript Data Raptor Transform Action LWC component.
Methods
The following are a list of methods that are declared inside of the Omniscript Data Raptor Transform Action.
Data Raptor Transform Action is inherited from Omniscript Base Action for additional support regarding
action invocation and processing. Reference the Omniscript Base Action README for additional
information regarding the inherited class.

connectedCallback private Void Overwrites inherited connectedCallback. Instantiates DR Transform Action
Utility Class from the Action Framework.
HTML Markup
newport themes.
Usage
<c-omniscript-dr-transform-action json-def={jsonDef}
layout={layout}
run-mode={runMode}
resume={resume}
</c-omniscript-dr-transform-action>
Attributes
Example ---

company 529
OmniStudio
{
"response": null,
"level": 1,
"indexInParent": 0,
"eleArray": [{
"type": "DataRaptor Transform Action",
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"errorMessage": {
"default": null,
"custom": []
},
"label": "DataRaptorTransformAction1",
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"show": null,
"sendJSONNode": "",
"sendJSONPath": "",
"bundle": "",
"controlWidth": 12
},
"name": "DataRaptorTransformAction1",
"level": 1,

company 530
OmniStudio
"JSONPath": "Step1:DataRaptorTransformAction1",
"indexInParent": 0,
"index": 0,
"children": [],
"bDataRaptorTransformAction": true,
"lwcId": "lwc000"
}],
"bHasAttachment": false
}
Example ---
{
"labelMap": {
"DataRaptorTransformAction1": "Step1:DataRaptorTransformAction1",
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,

company 531
OmniStudio
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {

company 532
OmniStudio
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"DataRaptorTransformAction1": ""
}
}
The OmniScript DataRaptor Transform Action component provides functionality for DataRaptor transform
utilized by the OmniScript DataRaptor Transform Action LWC component.
Methods
The following are a list of methods that are declared inside of the Omniscript Data Raptor Transform Action.
Data Raptor Transform Action is inherited from Omniscript Base Action for additional support regarding

connectedCallback private Void Overwrites inherited connectedCallback. Instantiates DR Transform Action

company 533
OmniStudio
HTML Markup
newport themes.
Usage
layout={layout}
run-mode={runMode}
resume={resume}
Attributes
Example ---
{
"response": null,
"level": 1,
"indexInParent": 0,
"eleArray": [{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"errorMessage": {
"default": null,
"custom": []
},
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"show": null,

company 534
OmniStudio
"sendJSONNode": "",
"sendJSONPath": "",
"bundle": "",
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"lwcId": "lwc000"
}],
}
Example ---
{
"labelMap": {

company 535
OmniStudio
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",

company 536
OmniStudio
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",

company 537
OmniStudio
}
}
The Omniscript DataRaptor Transform Action component provides functionality for DataRaptor transform
integration. This README provides high-level information regarding the different properties and methods
utilized by the Omniscript DataRaptor Transform Action LWC component.
Methods
The following are a list of methods that are declared inside of the Omniscript DataRaptor Transform Action.
DataRaptor Transform Action is inherited from Omniscript Base Action for additional support regarding

Value
response.
params) preprocessing of the DR Transform Action's request.
HTML Markup
newport themes.
Usage
layout={layout}
resume={resume}
Attributes
Example ---

company 538
OmniStudio
"response": null,
"level": 1,
"indexInParent": 0,
"eleArray": [{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"errorMessage": {
"default": null,
"custom": []
},
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"show": null,
"sendJSONNode": "",
"sendJSONPath": "",
"bundle": "",
"controlWidth": 12
},
"level": 1,

company 539
OmniStudio
"indexInParent": 0,
"index": 0,
"children": [],
"lwcId": "lwc000"
}],
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,

company 540
OmniStudio
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},

company 541
OmniStudio
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
}
}
OmniScript DataRaptor Turbo Extract Action ReadMe

This page contains an OmniScript DataRaptor Turbo Extract Action LWC ReadMe for each Vlocity release.

ns/omniscriptDrTurboAction
This component is used to perform DataRaptor Turbo Action.
module.exports ⏏
DataRaptor Turbo Action for Omniscript
Kind: Exported class

company 542
OmniStudio
OmniScript Date (omniscriptDate) ReadMe

This page contains an OmniScript Date LWC ReadMe for each Vlocity release.


This component is used to render a Date element. It extends from OmniscriptAtomicElement.
The default date format is yyyy-MM-dd.
Table 14. Methods

handleBlur() private void Overwrites inherited handleBlur blur handler from
handleChange(evt) private void Handles changes made within the Date component.
validateData(data) private Object Evaluates if date data is valid.
initCompVariables() private void Overwrites inherited initCompVariables. This method is executed
once during connectedCallback.
setElementFormattedValue() private void Overwrites inherited setElementFormattedValue. This method is
executed during renderedCallback and setElementValue.
HTML Markup
layout.
Usage
<c-omniscript-date
json-def={jsonDef}
layout={layout}
resume={resume}
seed-json={jsonDef.propSetMap.seedDataJSON}
>
</c-omniscript-date>
Attributes

company 543
OmniStudio
Example ---
{
"type": "Date",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "Date1",
"maxDate": "",
"minDate": "",
"disOnTplt": false,
"hide": false,
"show": null,
"dateFormat": "MM-dd-yyyy",
"modelDateFormat": "yyyy-MM-dd",
"dateType": "string",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Date1",
"level": 1,
"JSONPath": "Step1:Date1",
"indexInParent": 0,
"index": 0,
"children": [],
"bDate": true,
"lwcId": "lwc000"
}

company 544
OmniStudio
Example ---
{
"labelMap": {
"Date1": "Step1:Date1",
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},

company 545
OmniStudio
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},

company 546
OmniStudio
"acUiElements": {
"Step1": "",
"Date1": ""
}
}
Methods

HTML Markup
layout.
Usage
<c-omniscript-date
json-def={jsonDef}
layout={layout}
resume={resume}
>

company 547
OmniStudio
Attributes
Example ---
{
"type": "Date",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "Date1",
"maxDate": "",
"minDate": "",
"disOnTplt": false,
"hide": false,
"show": null,
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Date1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bDate": true,
"lwcId": "lwc000"
}

company 548
OmniStudio
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},

company 549
OmniStudio
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",

company 550
OmniStudio
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"Date1": ""
}
}
Methods

handleBlur() private void Overwrites inherited handleBlur blur handler from OmniscriptAtomicElement.
initCompVariables() private void Overwrites inherited initCompVariables. This method is executed once during
connectedCallback.
HTML Markup
layout.
Usage
<c-omniscript-date
json-def={jsonDef}
layout={layout}
resume={resume}

company 551
OmniStudio
>
Attributes
Example ---
{
"type": "Date",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "Date1",
"maxDate": "",
"minDate": "",
"disOnTplt": false,
"hide": false,
"show": null,
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Date1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bDate": true,

company 552
OmniStudio
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},

company 553
OmniStudio
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {

company 554
OmniStudio
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"Date1": ""
}
}
OmniScript Date/Time (omniscriptDateTime) ReadMe

This page contains an OmniScriptDate/Time LWC ReadMe for each Vlocity release.


This component is used to render a Date/Time element. It extends from OmniscriptAtomicElement.
When the Time input is blank and a user enters a Date input, the default time populated in the Time input
will be 12:00 PM.
Once a Time input is entered, the previously stored Time input value will persist even when the Date input
is modified.
Selecting the Today button will populate the current date and time.
Table 15. Methods


company 555
OmniStudio

handleChange() private void Handles changes made within the Date/Time component.
validateData(data) private Object Evaluates if date/time data is valid.
HTML Markup
layout.
Usage
<c-omniscript-date-time
json-def={jsonDef}
layout={layout}
resume={resume}
seed-json={seedDataJSON}
>
</c-omniscript-date-time>
Attributes
Example ---
{
"type": "Date/Time (Local)",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "Date/Time1",
"maxDate": "",
"minDate": "",
"timezone": "Local",
"disOnTplt": false,
"hide": false,
"show": null,

company 556
OmniStudio
"timeFormat": "hh:mm a",

"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Date/Time1",
"level": 1,
"JSONPath": "Step1:Date/Time1",
"indexInParent": 0,
"index": 0,
"children": [],
"bDateTime": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Date/Time1": "Step1:Date/Time1",
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,

company 557
OmniStudio
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",

company 558
OmniStudio
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"Date/Time1": ""
}
}

company 559
OmniStudio
will be 12:00 PM.
is modified.
Methods

HTML Markup
layout.
Usage
json-def={jsonDef}
layout={layout}
resume={resume}
>
Attributes
Example ---
{
"rootIndex": 0,
"response": null,

company 560
OmniStudio
"propSetMap": {
"maxDate": "",
"minDate": "",
"disOnTplt": false,
"hide": false,
"show": null,
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bDateTime": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {

company 561
OmniStudio
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",

company 562
OmniStudio
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"Date/Time1": ""

company 563
OmniStudio
}
}
will be 12:00 PM.
is modified.
Methods

connectedCallback.
HTML Markup
layout.
Usage
json-def={jsonDef}
layout={layout}
resume={resume}
>

company 564
OmniStudio
Attributes
Example ---
{
"rootIndex": 0,
"response": null,
"propSetMap": {
"maxDate": "",
"minDate": "",
"disOnTplt": false,
"hide": false,
"show": null,
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bDateTime": true,
"lwcId": "lwc000"
}

company 565
OmniStudio
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},

company 566
OmniStudio
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",

company 567
OmniStudio
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"Date/Time1": ""
}
}
OmniScript Delete Action ReadMe

This page contains an OmniScript Delete Action LWC ReadMe for each Vlocity release.

ns/omniscriptDeleteAction
This component is used to perform Delete Action in omniscript.
• ns/omniscriptDeleteAction
• module.exports ⇐ OmniscriptBaseAction ⏏
• .connectedCallback() ⇒ Void
• .execute()
module.exports ⇐ OmniscriptBaseAction ⏏
Default exported class OmniscriptDeleteAction.
Kind: Exported classExtends: OmniscriptBaseAction
omniscriptDeleteAction.connectedCallback() ⇒ Void
Overwrites inherited connectedCallback. Instantiates specific action utility class from action framework.
Kind: instance method of module.exportsScope: private

company 568
OmniStudio
omniscriptDeleteAction.execute()
Processes the logic for executing an action. This method is called from onclick attribute in component's
HTML markup and in Header component.
Kind: instance method of module.exportsScope: public
OmniScript Disclosure Element ReadMe

This page contains an OmniScript Disclosure LWC ReadMe for each Vlocity release.

ns/omniscriptDisclosure
This component is used to render a Disclosure Element, it extends OmniscriptCheckbox.
• ns/omniscriptDisclosure
• module.exports ⇐ OmniscriptCheckbox ⏏
module.exports ⇐ OmniscriptCheckbox ⏏
Default exported class OmniscriptDisclosure
Kind: Exported classExtends: OmniscriptCheckbox
omniscriptDisclosure.render() ⇒ Template
OmniScript DocuSign Envelope Action ReadMe

This page contains an OmniScript DocuSign Envelope Action LWC ReadMe for each Vlocity release.


company 569
OmniStudio
ns/omniscriptDocusignEnvelopeAction
This component is used to send the Docusign Envelope docs on mail.
• ns/omniscriptDocusignEnvelopeAction
• https://bitbucket.org/vloc/via_oui/src/oui_sprint_ins108/lwcprojects/player/
omniscriptDocusignEnvelopeAction/#markdown-header-moduleexports-omniscriptbaseaction ⇐
OmniscriptBaseAction ⏏
• https://bitbucket.org/vloc/via_oui/src/oui_sprint_ins108/lwcprojects/player/
omniscriptDocusignEnvelopeAction/#markdown-header-
omniscriptdocusignenvelopeactionconnectedcallback-void ⇒ Void
Default exported class OmniscriptDocusignEnvelopeAction.
omniscriptDocusignEnvelopeAction.connectedCallback() ⇒ Void
ns/omniscriptDocusignEnvelopeAction
This component is used to send the Docusign Envelope docs on mail.
• ns/omniscriptDocusignEnvelopeAction
Default exported class OmniscriptDocusignEnvelopeAction.
omniscriptDocusignEnvelopeAction.connectedCallback() ⇒ Void
Kind: instance method of module.exports
Scope: private
OmniScript DocuSign Signature Action ReadMe

This page contains an OmniScript DocuSign Signature Action LWC ReadMe for each Vlocity release.

company 570
OmniStudio


ns/omniscriptDocusignSignatureAction
• ns/omniscriptDocusignSignatureAction
• ._docusignModal : Boolean
• ._headerClasses : String
• ._footerClasses : String
• ._modalContainerClass : String
• ._envelopeId : String
• ._envelopeIdArray : Array.<Object>
• ._pdfData : String
• .showViewPdfBtn : Boolean
• .disableViewPdfBtn : Boolean
• .viewPDF() ⇒ Void
• .closeModal() ⇒ Void
ns/omniscriptDocusignSignatureAction._docusignModal : Boolean
• Opens DocuSign Signing Ceremony in modal.
Kind: instance property of ns/omniscriptDocusignSignatureActionScope: private
ns/omniscriptDocusignSignatureAction._headerClasses : String
• Default header css classes for modal.
ns/omniscriptDocusignSignatureAction._footerClasses : String
• Default footer css classes for modal.
ns/omniscriptDocusignSignatureAction._modalContainerClass : String
• Default css classes for modal container.

company 571
OmniStudio
ns/omniscriptDocusignSignatureAction._envelopeId : String
• Envelope Id of DocuSign for which signature is in progress.
ns/omniscriptDocusignSignatureAction._envelopeIdArray : Array.<Object>
• Envelope Id Array of DocuSign for multiple signatures.
ns/omniscriptDocusignSignatureAction._pdfData : String
• PDF blob data which we get from DocuSign after successful signature completion.
ns/omniscriptDocusignSignatureAction.showViewPdfBtn : Boolean
• Display View PDF button on modal after signature is completed successfully.
Kind: instance property of ns/omniscriptDocusignSignatureActionScope: track (private)
ns/omniscriptDocusignSignatureAction.disableViewPdfBtn : Boolean
• Disable View PDF button on modal after clicking on View PDF button and PDF is displayed.
Kind: instance property of ns/omniscriptDocusignSignatureActionScope: track (private)
ns/omniscriptDocusignSignatureAction.viewPDF() ⇒ Void
View the pdf after successful signature completion in DocuSign Signing Ceremony.
Kind: instance method of ns/omniscriptDocusignSignatureActionScope: private
ns/omniscriptDocusignSignatureAction.closeModal() ⇒ Void
Close the DocuSign Signing Ceremony modal.
Kind: instance method of https://bitbucket.org/vloc/via_oui/src/oui_sprint_ins108/lwcprojects/player/

omniscriptDocusignSignatureAction/#markdown-header-nsomniscriptdocusignsignatureactionScope:
private
Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20
ns/omniscriptDocusignSignatureAction
• ns/omniscriptDocusignSignatureAction
• ._docusignModal : Boolean
• ._headerClasses : String

company 572
OmniStudio
• ._envelopeId : String
• ._envelopeIdArray : Array
• ._pdfData : String
• ._omniDocuSignModalTitle : String
• ._omniDocuSignModalViewPdf : String
• ._omniDocuSignModalClose : String
• .showViewPdfBtn : Boolean
• .disableViewPdfBtn : Boolean
• .viewPDF() ⇒ void
• .closeModal() ⇒ void
ns/omniscriptDocusignSignatureAction._docusignModal : Boolean
• Opens DocuSign Signing Ceremony in modal.
Kind: instance property of ns/omniscriptDocusignSignatureAction
Scope: private
ns/omniscriptDocusignSignatureAction._headerClasses : String
• Default header css classes for modal.
Scope: private
ns/omniscriptDocusignSignatureAction._footerClasses : String
• Default footer css classes for modal.
Scope: private
ns/omniscriptDocusignSignatureAction._modalContainerClass : String
• Default css classes for modal container.
Scope: private
ns/omniscriptDocusignSignatureAction._envelopeId : String
• Envelope Id of DocuSign for which signature is in progress.

company 573
OmniStudio
Scope: private
ns/omniscriptDocusignSignatureAction._envelopeIdArray : Array
• Envelope Id Array of DocuSign for multiple signatures.
Scope: private
ns/omniscriptDocusignSignatureAction._pdfData : String
• PDF blob data which we get from DocuSign after successful signature completion.
Scope: private
ns/omniscriptDocusignSignatureAction._omniDocuSignModalTitle : String
• DocuSign Signing Ceremony modal title.
Scope: private
ns/omniscriptDocusignSignatureAction._omniDocuSignModalViewPdf : String
• DocuSign Signing Ceremony modal view pdf button title.
Scope: private
ns/omniscriptDocusignSignatureAction._omniDocuSignModalClose : String
• DocuSign Signing Ceremony modal close button title.
Scope: private
ns/omniscriptDocusignSignatureAction.showViewPdfBtn : Boolean
• Display View PDF button on modal after signature is completed successfully.

company 574
OmniStudio
ns/omniscriptDocusignSignatureAction.disableViewPdfBtn : Boolean
• Disable View PDF button on modal after clicking on View PDF button and PDF is displayed.
ns/omniscriptDocusignSignatureAction.viewPDF() ⇒ void
View the pdf after successful signature completion in DocuSign Signing Ceremony.
Kind: instance method of ns/omniscriptDocusignSignatureAction
Scope: private
ns/omniscriptDocusignSignatureAction.closeModal() ⇒ void
Close the DocuSign Signing Ceremony modal.
Kind: instance method of ns/omniscriptDocusignSignatureAction
Scope: private
OmniScript Edit Block ReadMe

This page contains an OmniScript Edit Block LWC ReadMe for each Vlocity release.


ns/omniscriptEditBlock
• ns/omniscriptEditBlock
• .mode : String
• ._isEditing : Boolean
• ._bShowActionMenu : Boolean
• ._showCheckbox : Boolean
• ._maxDisplayCount : Number
• .canRemove ⇒ Boolean
• .isEditing ⇒ Boolean
• .isEditing ⇒ void
• .sumElement ⇒ String
• .canRepeat ⇒ Boolean

company 575
OmniStudio
• .showAdd ⇒ Boolean
• .showAsterisk ⇒ Boolean
• .svgMapIcon ⇒ String
• .visualClass ⇒ String
• .editClass ⇒ String
• .handleAdd(evt, seed) ⇒ void
• .handleRemoveDom() ⇒ void
• .handleRemove() ⇒ void
• .remove(evt) ⇒ void
• .cancel() ⇒ void
• .handleCheckbox(evt) ⇒ void
• .updateSiblings(data) ⇒ void
• .updateCheckbox(sending) ⇒ void
• .edit() ⇒ void
• .save() ⇒ void
• .editModeNotify() ⇒ void
• .toggleActionMenu(evt) ⇒ void
• .hideActionMenu(evt) ⇒ void
• .createActionMenu() ⇒ void
• .propToMultiLang(properties) ⇒ void
• .stateRefresh() ⇒ void
• .createDisplayColumns() ⇒ void
• .updateDisplayColumns() ⇒ void
• .createTableLabelColumns() ⇒ void
• .isEmpty() ⇒ Boolean
ns/omniscriptEditBlock.mode : String
• Controls which template to load (Table, FS, Inline, Cards, LongCards). Empty string results in Table
Kind: instance property of ns/omniscriptEditBlockScope: api (public)
ns/omniscriptEditBlock._isEditing : Boolean
• Indicates if Edit Block is in edit mode (input fields are editable)
Kind: instance property of ns/omniscriptEditBlockScope: track (private)
ns/omniscriptEditBlock._bShowActionMenu : Boolean
• Indicates if the action menu is visible (Available in Table, Cards, LongCards)

company 576
OmniStudio
ns/omniscriptEditBlock._showCheckbox : Boolean
• Indicates if the checkbox on the top-right corner is visible
ns/omniscriptEditBlock._maxDisplayCount : Number
• Controls the maximum number of element values to display
Kind: instance property of ns/omniscriptEditBlockScope: private
ns/omniscriptEditBlock.canRemove ⇒ Boolean
Indicates if deleting an Edit Block is allowed
ns/omniscriptEditBlock.isEditing ⇒ Boolean
Indicates if edit mode is enabled
ns/omniscriptEditBlock.isEditing ⇒ void
Sets the value for edit mode

value Boolean new Boolean value to enable or disable edit mode
ns/omniscriptEditBlock.sumElement ⇒ String
Returns the value for the sumElement
ns/omniscriptEditBlock.canRepeat ⇒ Boolean
Indicates if adding new Edit Blocks is enabled
ns/omniscriptEditBlock.showAdd ⇒ Boolean
Indicates if the add button is visible
ns/omniscriptEditBlock.showAsterisk ⇒ Boolean
Indicates if there are any invalid elements in the Edit Block

company 577
OmniStudio
ns/omniscriptEditBlock.svgMapIcon ⇒ String
Returns a string containing the sprite and icon for an svg icon
ns/omniscriptEditBlock.visualClass ⇒ String
Returns the class string for elements displaying non-editable text.
ns/omniscriptEditBlock.editClass ⇒ String
Returns the class string for elements displaying the input fields
ns/omniscriptEditBlock.handleAdd(evt, seed) ⇒ void

Creates a new Edit Block.
Kind: instance method of ns/omniscriptEditBlockScope: public

evt Object Event object when attached to an event listener, String when executed programatically
seed Object
ns/omniscriptEditBlock.handleRemoveDom() ⇒ void
Deletes current Edit Block.
Kind: instance method of ns/omniscriptEditBlockScope: private
ns/omniscriptEditBlock.handleRemove() ⇒ void
Call any action overriding delete; otherwise handleRemoveDom will be called.
ns/omniscriptEditBlock.remove(evt) ⇒ void
Displays remove confirmation modal and then calls handleRemove.

evt Object Event Object
ns/omniscriptEditBlock.cancel() ⇒ void
Disables edit mode, ignores new data, and restores the previous data.

company 578
OmniStudio
ns/omniscriptEditBlock.handleCheckbox(evt) ⇒ void
Updates all Edit Blocks' checkbox if select mode is enabled

ns/omniscriptEditBlock.updateSiblings(data) ⇒ void
Notifies other siblings in current Edit Block that something has been updated
Param Type
data Object
ns/omniscriptEditBlock.updateCheckbox(sending) ⇒ void
Controls the selection of the Edit Block given a checkbox element specified inside of the Edit Block The
selection controls either : 1. affects the background color (table) 2. toggles the visibility of the checkbox
(cards, longcards)

sending Boolean false Indicates if current Edit Block child is the sender or receiver of the update.
ns/omniscriptEditBlock.edit() ⇒ void
Sets the editing mode to true
ns/omniscriptEditBlock.save() ⇒ void
Saves any changes to Edit Block, calls overridden actions for (new, edit and delete)
ns/omniscriptEditBlock.editModeNotify() ⇒ void
Sends an event to the header to prevent omniscript from navigating to prev/next steps
ns/omniscriptEditBlock.toggleActionMenu(evt) ⇒ void
Toggles the visibility the action menu

company 579
OmniStudio

ns/omniscriptEditBlock.hideActionMenu(evt) ⇒ void
Hides the action menu

ns/omniscriptEditBlock.createActionMenu() ⇒ void
Creates and configures the data for the action menu
ns/omniscriptEditBlock.propToMultiLang(properties) ⇒ void
Overriding omniscriptBaseElement's propToMultiLang to include translations of custom labels inside of
global actions, and actions for edit block's new, edit and delete
Kind: instance method of ns/omniscriptEditBlock
Param Type
properties Object
ns/omniscriptEditBlock.stateRefresh() ⇒ void
Indicates if data json has been updated
ns/omniscriptEditBlock.createDisplayColumns() ⇒ void
Creates and configures the data to be displayed for every template
ns/omniscriptEditBlock.updateDisplayColumns() ⇒ void
Updates the display values for all of the elements
ns/omniscriptEditBlock.createTableLabelColumns() ⇒ void
Creates and configures the labels for the columns in FS and Table
ns/omniscriptEditBlock.isEmpty() ⇒ Boolean
Indicates if there any Edit Blocks created

company 580
OmniStudio
Kind: instance method of ns/omniscriptEditBlockScope: public
ns/omniscriptEditBlock
• ns/omniscriptEditBlock
• .mode : String
• ._isEditing : Boolean
• ._bShowActionMenu : Boolean
• ._showCheckbox : Boolean
• ._maxDisplayCount : Number
• .canRemove ⇒ Boolean
• .isEditing ⇒ Boolean
• .isEditing ⇒ void
• .sumElement ⇒ String
• .canRepeat ⇒ Boolean
• .showAdd ⇒ Boolean
• .showAsterisk ⇒ Boolean
• .svgMapIcon ⇒ String
• .visualClass ⇒ String
• .editClass ⇒ String
• .handleAdd(evt, seed) ⇒ void
• .handleRemoveDom() ⇒ void
• .handleRemove() ⇒ void
• .remove(evt) ⇒ void
• .cancel() ⇒ void
• .handleCheckbox(evt) ⇒ void
• .updateSiblings(data) ⇒ void
• .updateCheckbox(sending) ⇒ void
• .runAction(action, bGlobal) ⇒ Promise
• .displayErrorModal(msg) ⇒ void
• .edit() ⇒ void
• .save() ⇒ void
• .editModeNotify() ⇒ void
• .toggleActionMenu(evt) ⇒ void
• .hideActionMenu(evt) ⇒ void
• .createActionMenu() ⇒ void
• .createGlobalActionList() ⇒ void
• .createDisplayColumns() ⇒ void
• .updateDisplayColumns() ⇒ void
• .createTableLabelColumns() ⇒ void

company 581
OmniStudio
• .isEmpty() ⇒ Boolean
ns/omniscriptEditBlock.mode : String
• Controls which template to load (Table, FS, Inline, Cards, LongCards). Empty string results in Table
Kind: instance property of ns/omniscriptEditBlock
Scope: api (public)
ns/omniscriptEditBlock._isEditing : Boolean
• Indicates if Edit Block is in edit mode (input fields are editable)
ns/omniscriptEditBlock._bShowActionMenu : Boolean
• Indicates if the action menu is visible (Available in Table, Cards, LongCards)
ns/omniscriptEditBlock._showCheckbox : Boolean
• Indicates if the checkbox on the top-right corner is visible
ns/omniscriptEditBlock._maxDisplayCount : Number
• Controls the maximum number of element values to display
Scope: private
ns/omniscriptEditBlock.canRemove ⇒ Boolean
Indicates if deleting an Edit Block is allowed
Scope: private
ns/omniscriptEditBlock.isEditing ⇒ Boolean
Indicates if edit mode is enabled

company 582
OmniStudio
Scope: private
ns/omniscriptEditBlock.isEditing ⇒ void
Sets the value for edit mode
Scope: private

value Boolean new Boolean value to enable or disable edit mode
ns/omniscriptEditBlock.sumElement ⇒ String
Returns the value for the sumElement
Scope: private
ns/omniscriptEditBlock.canRepeat ⇒ Boolean
Indicates if adding new Edit Blocks is enabled
Scope: private
ns/omniscriptEditBlock.showAdd ⇒ Boolean
Indicates if the add button is visible
Scope: private
ns/omniscriptEditBlock.showAsterisk ⇒ Boolean
Indicates if there are any invalid elements in the Edit Block
Scope: private
ns/omniscriptEditBlock.svgMapIcon ⇒ String
Returns a string containing the sprite and icon for an svg icon
Scope: private

company 583
OmniStudio
ns/omniscriptEditBlock.visualClass ⇒ String
Returns the class string for elements displaying non-editable text.
Scope: private
ns/omniscriptEditBlock.editClass ⇒ String
Returns the class string for elements displaying the input fields
Scope: private
ns/omniscriptEditBlock.handleAdd(evt, seed) ⇒ void

Creates a new Edit Block.
Scope: public

evt Object Event object when attached to an event listener, String when executed programatically
seed Object
ns/omniscriptEditBlock.handleRemoveDom() ⇒ void
Deletes current Edit Block.
Scope: private
ns/omniscriptEditBlock.handleRemove() ⇒ void
Call any action overriding delete; otherwise handleRemoveDom will be called.
Scope: private
ns/omniscriptEditBlock.remove(evt) ⇒ void
Displays remove confirmation modal and then calls handleRemove.
Scope: private

company 584
OmniStudio

ns/omniscriptEditBlock.cancel() ⇒ void
Disables edit mode, ignores new data, and restores the previous data.
Scope: private
ns/omniscriptEditBlock.handleCheckbox(evt) ⇒ void
Updates all Edit Blocks' checkbox if select mode is enabled
Scope: private

ns/omniscriptEditBlock.updateSiblings(data) ⇒ void
Notifies other siblings in current Edit Block that something has been updated
Scope: private
Param Type
data Object
ns/omniscriptEditBlock.updateCheckbox(sending) ⇒ void
Controls the selection of the Edit Block given a checkbox element specified inside of the Edit Block The
selection controls either : 1. affects the background color (table) 2. toggles the visibility of the checkbox
(cards, longcards)
Scope: private

sending Boolean false Indicates if current Edit Block child is the sender or receiver of the update.
ns/omniscriptEditBlock.runAction(action, bGlobal) ⇒ Promise

Calls the action defined in the action object (Remote Action, Rest Action, and Integration Procedure Action)

company 585
OmniStudio
Scope: private

action Object Contains the information about which action to call
bGlobal Boolean Indicates if the action is global or local
ns/omniscriptEditBlock.displayErrorModal(msg) ⇒ void
Opens up a modal to display the error message
Scope: private

msg String Error message string to display
ns/omniscriptEditBlock.edit() ⇒ void
Sets the editing mode to true
Scope: private
ns/omniscriptEditBlock.save() ⇒ void
Saves any changes to Edit Block, calls overridden actions for (new, edit and delete)
Scope: private
ns/omniscriptEditBlock.editModeNotify() ⇒ void
Sends an event to the header to prevent omniscript from navigating to prev/next steps
Scope: private
ns/omniscriptEditBlock.toggleActionMenu(evt) ⇒ void
Toggles the visibility the action menu
Scope: private


company 586
OmniStudio
ns/omniscriptEditBlock.hideActionMenu(evt) ⇒ void
Hides the action menu
Scope: private

ns/omniscriptEditBlock.createActionMenu() ⇒ void
Creates and configures the data for the action menu
Scope: private
ns/omniscriptEditBlock.createGlobalActionList() ⇒ void
Creates and configures the data for global actions
Scope: private
ns/omniscriptEditBlock.stateRefresh() ⇒ void
Indicates if data json has been updated
Scope: private
ns/omniscriptEditBlock.createDisplayColumns() ⇒ void
Creates and configures the data to be displayed for every template
Scope: private
ns/omniscriptEditBlock.updateDisplayColumns() ⇒ void
Updates the display values for all of the elements
Scope: private
ns/omniscriptEditBlock.createTableLabelColumns() ⇒ void
Creates and configures the labels for the columns in FS and Table

company 587
OmniStudio
Scope: private
ns/omniscriptEditBlock.isEmpty() ⇒ Boolean
Indicates if there any Edit Blocks created
Scope: public
OmniScript Edit Block Label ReadMe

This page contains an OmniScript Edit Block Label LWC ReadMe for each Vlocity release.


ns/omniscriptEditBlockLabel
• ns/omniscriptEditBlockLabel
• ._gActions : Object
• .isBtnLoading : Boolean
• .initCompVariables()
ns/omniscriptEditBlockLabel._gActions : Object
Contains the global actions for edit block
Kind: instance property of ns/omniscriptEditBlockLabel Scope: private
ns/omniscriptEditBlockLabel.isBtnLoading : Boolean
Button spinner flag.
Kind: instance property of ns/omniscriptEditBlockLabel Scope: private
ns/omniscriptEditBlockLabel.initCompVariables()
Initializes private component variables
Kind: instance method of ns/omniscriptEditBlockLabel
OmniScript Edit Block New ReadMe

This page contains an OmniScript Edit Block New LWC ReadMe for each Vlocity release.

company 588
OmniStudio

ns/OmniscriptEditBlockNew
This component is used to render a OmniscriptEditBlockNew
• ns/OmniscriptEditBlockNew
• module.exports ⇐ LightningElement ⏏
• .handleAdd()
• .initCompVariables()
module.exports ⇐ LightningElement ⏏
Default exported class OmniscriptEditBlockNew
Kind: Exported classExtends: LightningElement
omniscriptEditBlockNew.handleAdd()
Triggers adding a new edit block for Cards and LongCards
omniscriptEditBlockNew.initCompVariables()
Initializes private component variables
OmniScript Email (omniscriptEmail) ReadMe

This page contains an OmniScript Email LWC ReadMe for each Vlocity release.


This component is used to render a Email element, This is extends from OmniscriptAtomicElement.

_emailPattern private regex pattern for email

company 589
OmniStudio

_messageWhenPatternMismatch private Custom pattern missmatch error text
Table 17. Methods

initCompVariables() private void Overwrite
HTML Markup
layout.
Usage
<c-omniscript-email
json-def={jsonDef}
layout={layout}
resume={resume}
</c-omniscript-email>
Attributes
jsonDef --- json definition of the OmniScript Element
Example ---
{
"type": "Email",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "Email1",
"disOnTplt": false,
"hide": false,
"debounceValue": 0,
"show": null,
"ptrnErrText": "",

company 590
OmniStudio
"pattern": "",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Email1",
"level": 1,
"JSONPath": "Step1:Email1",
"indexInParent": 0,
"index": 0,
"children": [],
"bEmail": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Email1": "Step1:Email1",
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,

company 591
OmniStudio
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {

company 592
OmniStudio
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"Email1": ""
}
}
seedJson --- designer seed JSON + email parameters + cached API responses
This component is used to render an Email element. This component extends from

company 593
OmniStudio
Properties

_emailPattern private regex pattern for email
_messageWhenPatternMismatch private Custom pattern missmatch error text
Methods

HTML Markup
layout.
Usage
<c-omniscript-email
json-def={jsonDef}
layout={layout}
resume={resume}
Attributes
Example ---
{
"type": "Email",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "Email1",
"disOnTplt": false,
"hide": false,
"debounceValue": 0,

company 594
OmniStudio
"show": null,
"ptrnErrText": "",
"pattern": "",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Email1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bEmail": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},

company 595
OmniStudio
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",

company 596
OmniStudio
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"Email1": ""
}
}
This component is used to render an Email element, This component extends from

company 597
OmniStudio
Methods

handleBlur(evt) private void Blur handler
HTML Markup
layout.
Usage
<c-omniscript-email
json-def={jsonDef}
layout={layout}
resume={resume}
Attributes
Example ---
{
"type": "Email",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "Email1",
"disOnTplt": false,
"hide": false,
"debounceValue": 0,
"show": null,
"ptrnErrText": "",
"pattern": "",
"helpText": "",
"help": false,

company 598
OmniStudio
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Email1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bEmail": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,

company 599
OmniStudio
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",

company 600
OmniStudio
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"Email1": ""
}
}
OmniScript Email Action ReadMe

This page contains an OmniScript Email Action LWC ReadMe for each Vlocity release.


company 601
OmniStudio
ns/OmniscriptEmailAction
This component is used to perform the email action in omniscript.
• ns/OmniscriptEmailAction
• https://bitbucket.org/vloc/via_oui/src/oui_sprint_ins108/lwcprojects/player/omniscriptEmailAction/
#markdown-header-moduleexports-omniscriptbaseaction ⇐ OmniscriptBaseAction ⏏
• https://bitbucket.org/vloc/via_oui/src/oui_sprint_ins108/lwcprojects/player/omniscriptEmailAction/
#markdown-header-omniscriptemailactionconnectedcallback-void ⇒ Void
Default exported class OmniscriptEmailAction.
omniscriptEmailAction.connectedCallback() ⇒ Void
ns/OmniscriptEmailAction
This component is used to perform the email action in omniscript.
• ns/OmniscriptEmailAction
Default exported class OmniscriptEmailAction.
omniscriptEmailAction.connectedCallback() ⇒ Void
Scope: private
OmniScript File ReadMe

This page contains an OmniScript File LWC ReadMe for each Vlocity release.

company 602
OmniStudio

ns/omniscriptFile ⇐ OmniscriptAtomicElement
Extends: OmniscriptAtomicElement
• ns/omniscriptFile ⇐ OmniscriptAtomicElement
• ._value : Array
• .isPageLoading : Boolean
• ._showValidation : Boolean
• ._containerClasses : String
• ._theme : String
• .connectedCallback() ⇒ void
• .initCompVariables() ⇒ void
• .handleUploadFinished(event) ⇒ void
• .deleteFile(evt) ⇒ void
• .notifyUploadChange([removedId]) ⇒ void
• .setContainerClasses() ⇒ void
• .notifyError(error) ⇒ void
• .checkValidity() ⇒ Boolean
• .reportValidity() ⇒ Boolean
omniscriptFile._value : Array
• A list of current uploaded files
Kind: instance property of ns/omniscriptFileScope: track (private)
omniscriptFile.isPageLoading : Boolean
• Keeps track if the spinner is shown
omniscriptFile._showValidation : Boolean
• Keeps track if the validation message is shown

company 603
OmniStudio
omniscriptFile._containerClasses : String
• The CSS classes to be applied to the component
Kind: instance property of ns/omniscriptFileScope: private
omniscriptFile._theme : String
• The current styling theme
Kind: instance property of ns/omniscriptFileScope: private
omniscriptFile.connectedCallback() ⇒ void
Overwrites inherited connectedCallback.
Kind: instance method of ns/omniscriptFileScope: private
omniscriptFile.initCompVariables() ⇒ void
Overwrites inherited initCompVariables. This method is executed once during connectedCallback.
omniscriptFile.handleUploadFinished(event) ⇒ void
An event listener that is triggered after file have been uploaded.
Param Type
event Event
omniscriptFile.deleteFile(evt) ⇒ void
Deletes a file from the values and notify the change. Also, tries to delete to remove the file from content
document
Param Type
evt Event
omniscriptFile.notifyUploadChange([removedId]) ⇒ void
Notifies the component that a file was uploaded or removed

[removedId] string Optional. If a file is removed, the documentId

company 604
OmniStudio
omniscriptFile.setContainerClasses() ⇒ void
Sets the container CSS styling
omniscriptFile.notifyError(error) ⇒ void
Dispatches an error modal.
Param Type
error string
omniscriptFile.checkValidity() ⇒ Boolean
Interface for native DOM checkValidity(). Performs custom validation as well as native Constraint Validation
API calls. Returns a boolean, but doesn't trigger display of validation messages.
omniscriptFile.reportValidity() ⇒ Boolean
Interface for native DOM reportValidity(). Performs custom validation as well as native Constraint Validation
API calls. Returns a boolean, and triggers the display of validation messages.
omniscriptFile.render() ⇒ Template
Overwrites native LWC render
ns/omniscriptFile ⇐ OmniscriptAtomicElement
• ns/omniscriptFile ⇐ OmniscriptAtomicElement
• ._value : Array
• ._isPageLoading : Boolean
• ._showValidation : Boolean
• ._containerClasses : String
• ._actionUtil : String
• ._theme : String
• .connectedCallback() ⇒ void
• .handleUploadFinished(event) ⇒ void

company 605
OmniStudio
• .deleteFile(evt) ⇒ void
• .notifyUploadChange([removedId]) ⇒ void
• .setContainerClasses() ⇒ void
• .notifyError(error) ⇒ void
• .render() ⇒ void
omniscriptFile._value : Array
• A list of current uploaded files
Kind: instance property of ns/omniscriptFile
omniscriptFile._isPageLoading : Boolean
• Keeps track if the spinner is shown
omniscriptFile._showValidation : Boolean
• Keeps track if the validation message is shown
omniscriptFile._containerClasses : String
• The CSS classes to be applied to the component
omniscriptFile._actionUtil : String
• Utility class for HTTP Actions
Scope: private

company 606
OmniStudio
omniscriptFile._theme : String
• The current styling theme
Scope: private
omniscriptFile.connectedCallback() ⇒ void
Overwrites inherited connectedCallback.
Kind: instance method of ns/omniscriptFile
Scope: private
omniscriptFile.initCompVariables() ⇒ void
Scope: private
omniscriptFile.handleUploadFinished(event) ⇒ void
An event listener that is triggered after file have been uploaded.
Scope: private
Param Type
event Event
omniscriptFile.deleteFile(evt) ⇒ void
Deletes a file from the values and notify the change. Also, tries to delete to remove the file from content
document
Scope: private
Param Type
evt Event
omniscriptFile.notifyUploadChange([removedId]) ⇒ void
Notifies the component that a file was uploaded or removed

company 607
OmniStudio
Scope: private

[removedId] string Optional. If a file is removed, the documentId
omniscriptFile.setContainerClasses() ⇒ void
Sets the container CSS styling
Scope: private
omniscriptFile.notifyError(error) ⇒ void
Dispatches an error modal.
Scope: private
Param Type
error string
omniscriptFile.checkValidity() ⇒ Boolean
Interface for native DOM checkValidity(). Performs custom validation as well as native Constraint Validation
API calls. Returns a boolean, but doesn't trigger display of validation messages.
Scope: private
omniscriptFile.reportValidity() ⇒ Boolean
Interface for native DOM reportValidity(). Performs custom validation as well as native Constraint Validation
API calls. Returns a boolean, and triggers the display of validation messages.
Scope: private
omniscriptFile.render() ⇒ void
Scope: private
OmniScript Formula (omniscriptFormula) ReadMe

This page contains an OmniScript Formula LWC ReadMe for each Vlocity release.

company 608
OmniStudio


Renders an Omniscript formula element.
For support formula's please see the Expression Engine README.md in via_core.

renderedValue track (private) Rendered formula value.
Table 19. Methods

initCompVariables() private void Overwrite inherited method that gets called during component creation.
stateRefresh() private void Overwrites inherited method that gets triggered when data json changes.
validateData(data) private Object Overwrites inherited method that prevents Formula from being set.
connectedCallback() private void Overwrites native LWC lifecycle method.
render() private template Overwrites native LWC lifecycle method.
setRenderedValue private void Set renderedValue (formatted) to refresh the UI.
HTML Markup
layout.
Usage
<c-omniscript-formula json-def={jsonDef}
layout={layout}
resume={resume}
</c-omniscript-formula>
Attributes
Example ---

company 609
OmniStudio
{
"type": "Formula",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "Formula1",
"disOnTplt": false,
"dataType": null,
"mask": null,
"show": null,
"hide": false,
"expression": "",
"inputWidth": 12,
"controlWidth": 12
},
"name": "Formula1",
"level": 1,
"JSONPath": "Step1:Formula1",
"indexInParent": 0,
"index": 0,
"children": [],
"bFormula": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"URL1": "Step1:Formula1",
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {

company 610
OmniStudio
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",

company 611
OmniStudio
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"Formula1": ""
}
}

company 612
OmniStudio
For support formula's please see the Expression Engine README.md in via_core.
Properties
Methods
HTML Markup
layout.
Usage
layout={layout}
resume={resume}
Attributes
Example ---
{
"type": "Formula",
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,

company 613
OmniStudio
"dataType": null,
"mask": null,
"show": null,
"hide": false,
"expression": "",
"inputWidth": 12,
"controlWidth": 12
},
"name": "Formula1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bFormula": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",

company 614
OmniStudio
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {

company 615
OmniStudio
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"Formula1": ""
}
}
For support formula's please see the Expression Engine ReadMe.

company 616
OmniStudio
Properties

Methods

HTML Markup
layout.
Usage
layout={layout}
resume={resume}
Attributes
Example ---
{
"type": "Formula",
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"dataType": null,

company 617
OmniStudio
"mask": null,
"show": null,
"hide": false,
"expression": "",
"inputWidth": 12,
"controlWidth": 12
},
"name": "Formula1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bFormula": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,

company 618
OmniStudio
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",

company 619
OmniStudio
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"Formula1": ""
}
}
OmniScript Group Element (omniscriptGroupElement) ReadMe

This page contains an OmniScript Group Element LWC ReadMe for each Vlocity release.


company 620
OmniStudio

The group element is an abstract component containing common functionality for the group elements. Step,
Block, Edit Block, and Typeahead Block.

updateJsonDefUtil private Local reference to imported updateJsonDef.
updateJsonUtil private Local reference to imported updateJson
sendErrorModalUtil private Local reference to imported sendErrorModal.
sendOmniPubsubEventUtil private Local reference to imported sendOmniPubsubEvent.
handleMessagingUtil private Utility method that handles messaging events for wpm and ssm.
evaluateMessagingUtil private Utility method that evaluates if messaging is permitted.
isPageLoading private Global spinner flag.
isBtnLoading track (private) Button spinner flag.
spinnerActionMessage track (private) Message to be displayed accompanying the loading spinner.
Table 21. Methods

applyCallResp(data, [bApi], void api (public) Sets the element value and triggers aggregation.
[bValidation]) Overridable.
runServerCheck() boolean private This function will determine if we need to run server check
for this OmniScript being active. This can be overriden by
any component to skip validation.
handleArray(array) private Array.<any>
handleOmniAggregate(evt) private void Aggregate event handler at the parent component level, to
be modified.
handleOmniSeedDataRefresh(evt) private void Update header seedDataJSON to only keep the nodes that
are not applied yet.
handleOmniUpdateJsonDef(evt) private void Update full jsonDef of the script.
handleOmniSetShow(evt) private void Event listener that updates bShow for all elements.
createAggregateNode(bFixProxy, private Object Override OmniscriptBaseElement.createAggregateNode to
operation) handle Proxies that have ReadOnlyHandler.
evaluateSpinner(value, element) private void Evaluates spinner according to conditions.
validityHook(newShow) private void Called when a group element has it's visibility toggled
'conditional render'.
markInputAsValid(evt) private void Event listener fired when an input element becomes valid.
Fired from hasValidation mixin.
markInputAsInvalid(evt) private void Event listener fired when an input element becomes invalid.
The group element is an abstract component containing common functionality for the group elements. Step,
Block, Edit Block, and Typeahead Block.

company 621
OmniStudio
Properties

updateJsonDefUtil private Local reference to imported updateJsonDef.
updateJsonUtil private Local reference to imported updateJson
GenericInvoke2Util private Local reference to imported GenericInvoke2
invokeApexMethodUtil private Local reference to imported invokeApexMethod.
sendErrorModalUtil private Local reference to imported sendErrorModal.
sendOmniPubsubEventUtil private Local reference to imported sendOmniPubsubEvent.
isPageLoading private Global spinner flag.
isBtnLoading track (private) Button spinner flag.
spinnerActionMessage track (private) Message to be displayed accompanying the loading spinner.
Methods

Value
applyCallResp(data, [bApi], void api Sets the element value and triggers aggregation. Overridable.
[bValidation]) (public)
runServerCheck() boolean private This function will determine if we need to run server check for
this OmniScript being active. This can be overriden by any
component to skip validation.
handleArray(array) private Array.
handleOmniAggregate(evt) private void Aggregate event handler at the parent component level, to be
modified.
handleOmniSeedDataRefresh(evt) private void Update header seedDataJSON to only keep the nodes that are
not applied yet.
handleOmniUpdateJsonDef(evt) private void Update full jsonDef of the script.
handleOmniSetShow(evt) private void Event listener that updates bShow for all elements.
createAggregateNode(bFixProxy, private Object Override OmniscriptBaseElement.createAggregateNode to
operation) handle Proxies that have ReadOnlyHandler.
evaluateSpinner(value, element) private void Evaluates spinner according to conditions.
validityHook(newShow) private void Called when a group element has it's visibility toggled
'conditional render'.
markInputAsValid(evt) private void Event listener fired when an input element becomes valid. Fired
from hasValidation mixin.
markInputAsInvalid(evt) private void Event listener fired when an input element becomes invalid.
This is the base component for LWC OmniScript group elements, for example, Header, Step, Block, etc. It
derives from omniscriptBaseComponent.

company 622
OmniStudio
Methods

Value
applyCallResp(json, bApi = false, api void API method to apply API responses back to OmniScript
bValidation = false) (public)
constructor() private void Initialization. Register a list of event listeners
handleOmniAggregate(evt) private void Event handler to handle aggregation of data JSON of
the OmniScript
handleOmniSeedDataRefresh(evt) private void Event handler to handle removing the JSON node in the
seedJson that has already been applied to the
OmniScript
handleOmniSetInit(evt) private void Event handler to handle setting bInit for already
initialized element
handleOmniSetShow(evt) private void Event handler to handle setting show/hide for
OmniScript element
handleOmniLookupOptions(evt) private void Event handler to handle storing the options for Lookup
element
handleOmniSetOptions(evt) private void Event handler to handle storing the options of Multi-
select element
runServerCheck() private Boolean Whethere server check is needed when launching an
OmniScript
createAggregateNode(bFixProxy) private Object Overwrite the one in OmniscriptBaseElement to fix
Object that has ReadOnlyHandler
Usage
This component derives from omniscriptBaseElement. It serves as the base component for all OmniScript
group LWCs.
OmniScript Header (omniscriptHeader) ReadMe

This page contains an OmniScript Header LWC ReadMe for each Vlocity release.


This component provides OmniScript functionality. It extends from
AggregatesValidation(OmniscriptGroupElement).

prefill api (public) Omniscript prefill to be applied to the Data JSON

company 623
OmniStudio

firstRender track (private) Flag that identifies when omniscript first renders
jsonDef track (private) Omniscript JSON Definition
jsonData track (private) Omniscript Data JSON
scriptHeaderDef track (private) Omniscript script header definition
hasPrev track (private) Flag that identifies if a previous step exists relative to the current step
hasNext track (private) Flag that identifies if a next step exists relative to the current step
compLoaded track (private) Flag that identifies if all omniscript components are loaded
modalEvents track (private) Array which stories an array of data to be displayed in the omniscript modal
stepChartProps track (private) Omniscript step chart properties
navButton track (private) Omniscript navigation button properties
contentSldsClass track (private) Classes to be applied to the Lightning omniscript player. Support lightning step chart
positioning.
spinnerMessage track (private) Spinner message
knowledgeLabel private knowledge component Label
_dispOutsideOmni private whether KB will display outside OmniScript OR not.
_isKbEnabledOnScript private whether KB is enabled OmniScript side OR not.
Table 23. Methods

Value
initCompVariables private Void Overwrites inherited initCompVariables.
connectedCallback() private Void Overwrites native LWC connectedCallback.
handleStepChartLayout(evt) private Void Handles stepchart responsive layouts. Only applicable in
the Lightning LWC player.
setStepChartResponsiveHandlers() private Void Adds event listeners for step chart responsiveness. Only
applicable in the Lightning LWC player.
disconnectedCallback() private Void Overwrites native LWC disconnectedCallback.
renderedCallback() private Void Overwrites inherited renderedCallback.
applyContentWidth() private Void Applies content width for the omniscript step container.
Supports Lightning step chart placement.
updateButtons(newIndex, currentIndex = private Void Updates the previous and next button labels and classes
0) based on the current step.
getPrevStepIndex(index) private Number Gets the immediate previous steps index.
hasPrevStep(index) private Boolean Determines if a previous step is available.
hasNextStep(index) private Boolean Determines if a next step is available.
prevStep(evt) private Void Event click handler for the previous step navigation.
nextStep(evt) private Void Event click handler for the next step navigation.
navigateToPrev() private Void Handles the previous step navigation.
handleErrorModal(index) private Void Handles the functionality for the error modals.
navigateTo(nextIndex, currentIndex = 0) private Void Main logic that controls navigation in an omniscript.
handleActionExecution(comp, index) private Void Handles the logic for action execution.
handleActionResp(bSystemFailure, resp, private Void Handles logic after action execution.
index)

company 624
OmniStudio

Value
handleSavedForLater(evt) private Void Event handler for Save for Later that is triggered by
custom components.
updateStep(nextIndex, currentIndex) private Void Updates the step content for both the previous and next
steps, as needed.
setStepVisibility(index, isVisible) private Void Sets the step visibility. Updates JSON definition step
visibility flag.
handleStepChartEvent(evt) private Void Event handler for step chart events.
handleModalEvent(evt) private Void Handles all modal events.
handleActionBtnEvent(evt) private Void Handles action events.
handleAutoAdv(evt) private Void Handles auto advancing navigation.
handleIndexByValue(value) private Number Calculates the index depending on the value.
handleOmniSetShow(evt) private Void Event listener that updates the bShow for root elements.
handleCustomSaveState(evt) private Void Event listener that handles custom LWC save state.
checkNav(nextIndex, currIndex, private Boolean Provides a check between the current step index and
showModal = true) incoming step index to ensure navigation is permitted.
saveForLater() private Void Handles save for later.
performSaveForLater(auto) private Void Performs save for later.
notifySaveForLaterError(error) private Void Displays a modal with an error from the save for later.
handleContinueInvalidSfl() private Void Handles invalid Safe for Later.
handleSaveForLater(evt) private Void Handles a save for later request.
handleSaveForLaterComplete(evt) private Void Event handler that is triggered when the save for later is
complete.
handleFileUploaded(evt) private Void Handles the filesMap array when a file is uploaded.
_reloadDef() private Void Reloads JSON definition.
isKnowledgeEnabled() private Boolean Determines if knowledge is enabled.
handleError(error) private Void Handles errors.
handlePendingUpdates(evt) private Void Handles all events for 'omnipendingupdates'.
displayModal(config) private Void Displays a modal (default: error modal) based on the
config object passed in.
handleFormattedData(evt) private Void Event handler for formatting data.
modifyModalButton(oldButtons) private Object[] Modifies the handleClick for each button to close the
modal after click.
markInputAsValid(evt) private Void Event handler that marks inputs as valid.
markInputAsInvalid(evt) private Void Event handler that marks inputs as invalid.
initScriptHeaderDef() private Void Initializes scriptHeaderDef.
resetFirstStepAccordionActive() private Void Resets the first step accordion active in JSON definition.
handleResumeBpDef(bpDef) private Void Handles JSON definition when resume.
handleUserInfo(userInfo) private Void Handles user information.

company 625
OmniStudio
Properties

pageLoading track (private) Page loading spinner flag
positioning.
spinnerMessage track (private) Spinner message
knowledgeLabel private knowledge component Label
_dispOutsideOmni private whether KB will display outside OmniScript OR not.
_isKbEnabledOnScript private whether KB is enabled OmniScript side OR not.
Methods

Value
initCompVariables private Void Overwrites inherited initCompVariables.
connectedCallback() private Void Overwrites native LWC connectedCallback.
handleStepChartLayout(evt) private Void Handles stepchart responsive layouts. Only applicable in
the Lightning LWC player.
setStepChartResponsiveHandlers() private Void Adds event listeners for step chart responsiveness. Only
disconnectedCallback() private Void Overwrites native LWC disconnectedCallback.
renderedCallback() private Void Overwrites inherited renderedCallback.
applyContentWidth() private Void Applies content width for the omniscript step container.
Supports Lightning step chart placement.
updateButtons(newIndex, currentIndex = private Void Updates the previous and next button labels and classes
0) based on the current step.
prevStep(evt) private Void Event click handler for the previous step navigation.
nextStep(evt) private Void Event click handler for the next step navigation.
navigateToPrev() private Void Handles the previous step navigation.
handleErrorModal(index) private Void Handles the functionality for the error modals.

company 626
OmniStudio

Value
navigateTo(nextIndex, currentIndex = 0) private Void Main logic that controls navigation in an omniscript.
handleActionResp(bSystemFailure, resp, private Void Handles logic after action execution.
index)
handleSavedForLater(evt) private Void Event handler for Save for Later that is triggered by
custom components.
updateStep(nextIndex, currentIndex) private Void Updates the step content for both the previous and next
steps, as needed.
setStepVisibility(index, isVisible) private Void Sets the step visibility. Updates JSON definition step
visibility flag.
handleStepChartEvent(evt) private Void Event handler for step chart events.
handleModalEvent(evt) private Void Handles all modal events.
handleActionBtnEvent(evt) private Void Handles action events.
handleAutoAdv(evt) private Void Handles auto advancing navigation.
handleOmniSetShow(evt) private Void Event listener that updates the bShow for root elements.
handleCustomSaveState(evt) private Void Event listener that handles custom LWC save state.
checkNav(nextIndex, currIndex) private Boolean Provides a check between the current step index and
incoming step index to ensure navigation is permitted.
saveForLater() private Void Handles save for later.
performSaveForLater(auto) private Void Performs save for later.
notifySaveForLaterError(error) private Void Displays a modal with an error from the save for later.
handleContinueInvalidSfl() private Void Handles invalid Safe for Later.
handleSaveForLater(evt) private Void Handles a save for later request.
handleSaveForLaterComplete(evt) private Void Event handler that is triggered when the save for later is
complete.
handleFileUploaded(evt) private Void Handles the filesMap array when a file is uploaded.
_reloadDef() private Void Reloads JSON definition.
isKnowledgeEnabled() private Void Determines if knowledge is enabled.
handleError(error) private Void Handles errors.
handlePendingUpdates(evt) private Void Handles all events for 'omnipendingupdates'.
displayModal(config) private Void Displays a modal (default: error modal) based on the
config object passed in.
handleFormattedData(evt) private Void Event handler for formatting data.
modifyModalButton(oldButtons) private Object[] Modifies the handleClick for each button to close the
modal after click.
markInputAsValid(evt) private Void Event handler that marks inputs as valid.
markInputAsInvalid(evt) private Void Event handler that marks inputs as invalid.
initScriptHeaderDef() private Void Initializes scriptHeaderDef.
resetFirstStepAccordionActive() private Void Resets the first step accordion active in JSON definition.
handleResumeBpDef(bpDef) private Void Handles JSON definition when resume.
handleUserInfo(userInfo) private Void Handles user information.

company 627
OmniStudio
Properties

pageLoading track (private) Page loading spinner flag
positioning.
Methods

Value
constructor() private void Overwrites native LWC constructor.
connectedCallback() private void Overwrites native LWC connectedCallback.
handleStepChartLayout(evt) private void Handles stepchart responsive layouts. Only
setStepChartResponsiveHandlers() private void Adds event listeners for step chart responsiveness.
Only applicable in the Lightning LWC player.
disconnectedCallback() private void Overwrites native LWC disconnectedCallback.
renderedCallback() private void Overwrites native LWC renderedCallback.
applyContentWidth() private void Applies content width for the omniscript step
container. Supports Lightning step chart placement.
updateButtons(newIndex, currentIndex = 0) private void Updates the previous and next button labels and
classes based on the current step.
prevStep(evt) private void Event click handler for the previous step navigation.
nextStep(evt) private void Event click handler for the next step navigation.
navigateToPrev() private void Handles the previous step navigation.
handleErrorModal(index) private void Handles the functionality for the error modals.

company 628
OmniStudio

Value
navigateTo(nextIndex, currentIndex = 0) private void Main logic that controls navigation in an omniscript.
handleActionExecution(executedPromise, private void Handles promise execution for action components.
actionComp, nextIndex, currentIndex)
handleActionResp(response, actionComp, private void Handles applying action responses.
nextIndex, currentIndex)
updateStepChart(nextIndex, currentIndex) private void Updates step chart indexes.
updateStep(nextIndex, currentIndex) private void Updates the step content for both the previous and
next steps, as needed.
setStepVisibility(index, isVisible) private void Sets the step visibility. Updates JSON definition
step visibility flag.
handleStepChartEvent(evt) private void Event handler for step chart events.
handleModalEvent(evt) private void Handles all modal events.
handleActionBtnEvent(evt) private void Handles action events.
handleAutoAdv(evt) private void Handles auto advancing navigation.
handleOmniSetShow(evt) private void Event listener that updates the bShow for root
elements.
handleCustomSaveState(evt) private void Event listener that handles custom LWC save state.
checkNav(nextIndex, currIndex) private Boolean Provides a check between the current step index
and incoming step index to ensure navigation is
permitted.
Omniscript HTTP Action (omniscriptHttpAction) ReadMe

This page contains an OmniScript HTTP Action LWC ReadMe for each Vlocity release.


The Omniscript HTTP Action component provides functionality for REST calls. This README will provide
high-level information regarding the different properties and methods utilized by the Omniscript HTTP
Action LWC component.
Methods
The following are a list of methods that are declared inside of the Omniscript HTTP Action. HTTP Action is
inherited from Omniscript Base Action for additional support regarding action invocation and processing.
Reference the Omniscript Base Action README for additional information regarding the inherited class.

company 629
OmniStudio

connectedCallback private Void Overwrites inherited connectedCallback. Instantiates HTTP Action
sendDataToDebugConsole private Void Overwrites inherited sendDataToDebugConsole. Sends data to the
Debug Console event handler.
HTML Markup
newport themes.
Usage
<c-omniscript-http-action json-def={jsonDef}
layout={layout}
resume={resume}
run-mode={runMode}
</c-omniscript-http-action>
Attributes
Example ---
{
"type": "Rest Action",
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"errorMessage": {
"default": null,
"custom": []
},
"label": "HTTPAction1",
"svgIcon": "",
"svgSprite": "",
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,

company 630
OmniStudio
"namedCredential": "",
"restOptions": {
"URIEncode": false,
"sendBody": true,
"withCredentials": false,
"timeout": 0,
"cache": false,
"params": {},
"headers": {}
},
"sendJSONNode": "",
"sendJSONPath": "",
"type": "Apex",
"show": null,
"extraPayload": {},
"xmlPostTransformBundle": "",
"xmlPreTransformBundle": "",
"restMethod": "",
"restPath": "",
"controlWidth": 12
},
"name": "HTTPAction1",
"level": 1,
"JSONPath": "Step1:HTTPAction1",
"indexInParent": 0,
"index": 0,
"children": [],

company 631
OmniStudio
"bHttpAction": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"HTTPAction1": "Step1:HTTPAction1",
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,

company 632
OmniStudio
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},

company 633
OmniStudio
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"HTTPAction1": ""
}
}
Methods

connectedCallback private Void Overwrites inherited connectedCallback. Instantiates HTTP Action
sendDataToDebugConsole private Void Overwrites inherited sendDataToDebugConsole. Sends data to the
Debug Console event handler.
HTML Markup
newport themes.
Usage

company 634
OmniStudio
layout={layout}
resume={resume}
run-mode={runMode}
Attributes
Example ---
{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"errorMessage": {
"default": null,
"custom": []
},
"svgIcon": "",
"svgSprite": "",
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"restOptions": {
"URIEncode": false,
"sendBody": true,
"timeout": 0,
"cache": false,
"params": {},
"headers": {}
},
"sendJSONNode": "",
"sendJSONPath": "",

company 635
OmniStudio
"type": "Apex",
"show": null,
"extraPayload": {},
"restMethod": "",
"restPath": "",
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"lwcId": "lwc000"
}
Example ---

company 636
OmniStudio
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},

company 637
OmniStudio
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {

company 638
OmniStudio
"Step1": "",
"HTTPAction1": ""
}
}
Methods

Value
executeAction(element, private Promise Handles the action request including parameters that are to
queueableRespId) be fed into the Apex class. This method should be called
when the HTTP action needs to call the server and/or third
party API.
preProcessCommonReq(element, private Object Performs preprocessing of an action's request. Queueable/
params) Continuation/Chainable support is configured in this method,
in addition to, payload handling.
postProcess(resp) private Object Performs a post process of the executed action's response.
handleWebRequest(element, private Promise Handles web REST requests.
remoteOptions)
HTML Markup
newport themes.
Usage
layout={layout}
resume={resume}
Attributes

company 639
OmniStudio
Example ---
{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"errorMessage": {
"default": null,
"custom": []
},
"svgIcon": "",
"svgSprite": "",
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"restOptions": {
"URIEncode": false,
"sendBody": true,
"timeout": 0,
"cache": false,
"params": {},
"headers": {}
},
"sendJSONNode": "",
"sendJSONPath": "",
"type": "Apex",
"show": null,

company 640
OmniStudio

"extraPayload": {},
"restMethod": "",
"restPath": "",
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,

company 641
OmniStudio
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",

company 642
OmniStudio
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"HTTPAction1": ""
}
}
OmniScript Image ReadMe

This page contains an OmniScript Image LWC ReadMe for each Vlocity release.

company 643
OmniStudio

ns/omniscriptImage ⇐ OmniscriptFile
Extends: OmniscriptFile
• ns/omniscriptImage ⇐ OmniscriptFile
• .multiple : Boolean
• .accepts : String
• ._parentContainerClasses : String
• ._baseUrl : String
• .disabled : Boolean
• .images : Array
omniscriptImage.multiple : Boolean
Flag used to track if multiple files can be uploaded
Kind: instance property of ns/omniscriptImageScope: track (private)
omniscriptImage.accepts : String
A list of file extensions that can be uploaded
omniscriptImage._parentContainerClasses : String
The class of the parent container
omniscriptImage._baseUrl : String
The base URL used to load image preview
omniscriptImage.disabled : Boolean
Property that keeps track if the component is disabled
Kind: instance property of ns/omniscriptImage
omniscriptImage.images : Array
A list of uploaded images

company 644
OmniStudio
Kind: instance property of ns/omniscriptImage
omniscriptImage.initCompVariables() ⇒ void
Kind: instance method of ns/omniscriptImageScope: private
omniscriptImage.render() ⇒ Template
Overwrites native LWC renderedCallback
Kind: instance method of ns/omniscriptImageScope: private
ns/omniscriptImage ⇐ OmniscriptFile
Extends: OmniscriptFile
• ns/omniscriptImage ⇐ OmniscriptFile
• module.exports ⏏
•
• .multiple : Boolean
• .accepts : String
• ._parentContainerClasses : String
• ._baseUrl : String
• .disabled : Boolean
• .images : Array
module.exports ⏏
Scope: private
new module.exports()
Overwrites inherited constructor.
module.exports.multiple : Boolean
Flag used to track if multiple files can be uploaded
Kind: instance property of module.exports
module.exports.accepts : String
A list of file extensions that can be uploaded

company 645
OmniStudio
module.exports._parentContainerClasses : String
The class of the parent container
module.exports._baseUrl : String
The base URL used to load image preview
module.exports.disabled : Boolean
Property that keeps track if the component is disabled
module.exports.images : Array
A list of uploaded images
module.exports.initCompVariables() ⇒ void
Scope: private
module.exports.render() ⇒ void
Scope: private
OmniScript Integration Procedure Action (omniscriptIpAction) ReadMe

This page contains an OmniScript Integration Procedure Action LWC ReadMe for each Vlocity release.

company 646
OmniStudio


The Omniscript Integration Procedure Action component provides functionality for integration procedure
utilized by the Omniscript Integration Procedure Action LWC component.
Methods
The following are a list of methods that are declared inside of the Omniscript Integration Procedure Action.
Integration Procedure Action is inherited from Omniscript Base Action for additional support regarding

connectedCallback private Void Overwrites inherited connectedCallback. Instantiates IP Action Utility Class
from the Action Framework.
HTML Markup
newport themes.
Usage
<c-omniscript-ip-action json-def={jsonDef}
layout={layout}
resume={resume}
run-mode={runMode}
</c-omniscript-ip-action>
Attributes
Example ---
{
"type": "Integration Procedure Action",
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,

company 647
OmniStudio
"errorMessage": {
"default": null,
"custom": []
},
"label": "IntegrationProcedureAction1",
"svgIcon": "",
"svgSprite": "",
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"show": null,
"extraPayload": {},
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
"chainable": false,
"useFuture": false,
},
"useContinuation": false,
"integrationProcedureKey": "test_Chainable",
"controlWidth": 12
},

company 648
OmniStudio
"name": "IntegrationProcedureAction1",
"level": 1,
"JSONPath": "Step1:IntegrationProcedureAction1",
"indexInParent": 0,
"index": 0,
"children": [],
"bIntegrationProcedureAction": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"IntegrationProcedureAction1": "Step1:IntegrationProcedureAction1",
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,

company 649
OmniStudio
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {

company 650
OmniStudio
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"IntegrationProcedureAction1": ""
}
}
The Omniscript Integration Procedure Action component provides functionality for integration procedure
utilized by the Omniscript Integration Procedure Action LWC component.
Methods
The following are a list of methods that are declared inside of the Omniscript Integration Procedure Action.
Integration Procedure Action is inherited from Omniscript Base Action for additional support regarding

executeAction(element, vlcParams) private Promise Preprocesses action requests and invokes action.
postProcess(resp) private Object Overwrites inherited postProcess from Omniscript Base
Action.

company 651
OmniStudio

evaluateResp(element, response, private Object Overwrites inherited evaluateResp from Omniscript Base
bSendToDebugConsole) Action.
HTML Markup
newport themes.
Usage
layout={layout}
resume={resume}
run-mode={runMode}
Attributes
Example ---
{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"errorMessage": {
"default": null,
"custom": []
},
"svgIcon": "",
"svgSprite": "",
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"show": null,

company 652
OmniStudio
"extraPayload": {},
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
"chainable": false,
"useFuture": false,
},
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"lwcId": "lwc000"
}

company 653
OmniStudio
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},

company 654
OmniStudio
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",

company 655
OmniStudio
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
}
}
The OmniScript Integration Procedure Action component provides functionality for integration procedure
utilized by the OmniScript Integration Procedure Action LWC component.
Methods
The following are a list of methods that are declared inside of the OmniScript Integration Procedure Action.
Integration Procedure Action is inherited from OmniScript Base Action for additional support regarding

executeAction(element, private Promise Handles the action request. vlcParams are used for predefined
vlcParams) parameters (i.e. for Integration Procedure chainable support)
HTML Markup
HTML markup is inherited from the OmniScript Base Action. The templates support both lightning and
newport themes.
Usage
layout={layout}
resume={resume}
Attributes

company 656
OmniStudio
Example ---
{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"errorMessage": {
"default": null,
"custom": []
},
"svgIcon": "",
"svgSprite": "",
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"show": null,
"extraPayload": {},
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
"chainable": false,

company 657
OmniStudio
"useFuture": false,
},
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,

company 658
OmniStudio
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",

company 659
OmniStudio
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
}
}
OmniScript Knowledge Base ReadMe

This page contains an OmniScript Knowledge Base LWC ReadMe for each Vlocity release.


company 660
OmniStudio

ns/omniscriptKnowledgeBase
• ns/omniscriptKnowledgeBase
• .layout : String
• .runMode : String
• .knowledgeOptions : Object
• .inputSearchKeyword : String
• .kbLabel : String
• .articlesResults : Array.<Object>
• .articleBodyResults : Object
• .canShowKbOnStep : Boolean
• .isToggled : Boolean
• ._kbModal : Boolean
• ._article : Object
• ._isOpenOmniScript : Boolean
• ._isConfiguredOnOmniScript : Boolean
• .displayLabel : String
• ._omniNewportClass : String
• ._isStepChartTop : Boolean
• ._themeKB : String
• .omniKey : String
• .omniscriptKey : String
• .renderTemplate : Boolean
• ._actionUtilClass : OmniscriptActionCommonUtil
• ._debugLabel : String
• ._articleParams : Object
• ._knowledgeBaseOptions : Object
• ._openInOmniEnable : Boolean
• ._customLabelsUtil : Object
• .classToggleWidth ⇒ String
• .handleKnowledgeOptions(data) ⇒ Void
• .searchKnowledgeArticle(event) ⇒ Void
• .kbInvokeAction(params) ⇒ Promise
• .toggleKb(evt, isToggled) ⇒ Void
• .openModal(evt) ⇒ Void
• .openInOmniscript(evt) ⇒ Void

company 661
OmniStudio
• .getArticleBody() ⇒ Void
• .handleKbArticleOptions(data) ⇒ Void
• .kbArticleInvokeAction(params) ⇒ Promise
• .redirectToArticleUrl(evt) ⇒ Void
• .sendDataToDebugConsole(params, resp, label) ⇒ Void
ns/omniscriptKnowledgeBase.layout : String
Stores theme layout.
Kind: instance property of ns/omniscriptKnowledgeBaseScope: public (api)
ns/omniscriptKnowledgeBase.runMode : String
Flag to determine where component is run.
ns/omniscriptKnowledgeBase.knowledgeOptions : Object
Contains detailed options which used to make remote call and setting up label of KB.
ns/omniscriptKnowledgeBase.inputSearchKeyword : String
Set user input value for getting related articles of KB.
Kind: instance property of ns/omniscriptKnowledgeBaseScope: private (track)
ns/omniscriptKnowledgeBase.kbLabel : String
Set KB Label of KB.
Kind: instance property of ns/omniscriptKnowledgeBaseScope: public
ns/omniscriptKnowledgeBase.articlesResults : Array.<Object>
Holding set of articles based on specific user keyword.
ns/omniscriptKnowledgeBase.articleBodyResults : Object
Contains details of an article ie: article body, title and link.
ns/omniscriptKnowledgeBase.canShowKbOnStep : Boolean
Setting up true/false: whether can show on step or not.

company 662
OmniStudio
ns/omniscriptKnowledgeBase.isToggled : Boolean
Toggled KB container for Newport(hide/show container based on user convenience), Default is always
false.
ns/omniscriptKnowledgeBase._kbModal : Boolean
Open Modal of an article via template(hide/show modal using this property), Default is always false.
ns/omniscriptKnowledgeBase._article : Object
Contains an article details.
ns/omniscriptKnowledgeBase._modalContainerClass : String
• Setting up class for modal container.
Kind: instance property of ns/omniscriptKnowledgeBaseScope: private
ns/omniscriptKnowledgeBase._footerClasses : String
• Setting up class for footer of modal.
ns/omniscriptKnowledgeBase._isOpenOmniScript : Boolean
• setting up true if article detailed view should open inside Omniscript.
ns/omniscriptKnowledgeBase._isConfiguredOnOmniScript : Boolean
ns/omniscriptKnowledgeBase.displayLabel : String
Setting KB Label from options of KB if doesn't exist.
ns/omniscriptKnowledgeBase._omniNewportClass : String
Setting newport root block class: 'via-nds' if configured on omniscript.

company 663
OmniStudio
ns/omniscriptKnowledgeBase._isStepChartTop : Boolean
• setting up true if stepchart placement is on top.
ns/omniscriptKnowledgeBase._themeKB : String
• Setting up theme.
ns/omniscriptKnowledgeBase.omniKey : String
• Setting up omniscript key.
ns/omniscriptKnowledgeBase.omniscriptKey : String
Setting up OmniScript key.
ns/omniscriptKnowledgeBase.renderTemplate : Boolean
Checks whether template needs to render or not.
ns/omniscriptKnowledgeBase._actionUtilClass : OmniscriptActionCommonUtil
• stores instance of the OmniscriptActionCommonUtil class.
ns/omniscriptKnowledgeBase._debugLabel : String
• Stores debug label.
ns/omniscriptKnowledgeBase._articleParams : Object
• contains an article params.
ns/omniscriptKnowledgeBase._knowledgeBaseOptions : Object
• contains an knowledgeBase options.

company 664
OmniStudio
ns/omniscriptKnowledgeBase._openInOmniEnable : Boolean
• checking whether its enabled inside omniscript or not.
ns/omniscriptKnowledgeBase._customLabelsUtil : Object
• Custom labels for Knowledge base.
ns/omniscriptKnowledgeBase.classToggleWidth ⇒ String
Toggles class for newport
Kind: instance property of ns/omniscriptKnowledgeBaseReturns: String - - Will return classesScope:

private

params Object an object having options to make a remote call.
ns/omniscriptKnowledgeBase.connectedCallback() ⇒ Void
Overwrites native connectedCallback.
Kind: instance method of ns/omniscriptKnowledgeBaseScope: private
ns/omniscriptKnowledgeBase.handleKnowledgeOptions(data) ⇒ Void
handleKnowledgeOptions - for setting up KB Label, kbOptions, inputsearchkeyword, articles and making
remote call based on options

data Object an object having options to make a remote call.
ns/omniscriptKnowledgeBase.searchKnowledgeArticle(event) ⇒ Void
Gets updated articles based on input keyword via template.

event Event
event.target.value Object getting user input value
event.keyCode Object getting input value when user hits enter
ns/omniscriptKnowledgeBase.kbInvokeAction(params) ⇒ Promise
Makes remote call based on options

company 665
OmniStudio

ns/omniscriptKnowledgeBase.render() ⇒ Template
ns/omniscriptKnowledgeBase.toggleKb(evt, isToggled) ⇒ Void

Toggles kb container for newport via template.

evt Event
isToggled Boolean true/false open/close container
ns/omniscriptKnowledgeBase.openModal(evt) ⇒ Void
Opens modal for an article detail view via template
Param Type
evt Event
ns/omniscriptKnowledgeBase.closeModal() ⇒ Void
Closes the modal of an opened article detail view via template.
ns/omniscriptKnowledgeBase.openInOmniscript(evt) ⇒ Void
Opens an article detail view inside omniscript via template
Param Type
evt Event
ns/omniscriptKnowledgeBase.getArticleBody() ⇒ Void
Gets detailed info object of an article.

company 666
OmniStudio
ns/omniscriptKnowledgeBase.handleKbArticleOptions(data) ⇒ Void
Callback function of pubsub event for getting article body options

data Object an object having options to make a remote call for an article.
ns/omniscriptKnowledgeBase.kbArticleInvokeAction(params) ⇒ Promise
Makes remote call based on article options

ns/omniscriptKnowledgeBase.redirectToArticleUrl(evt) ⇒ Void
For redirecting article on new tab with detailed view via template
Param Type
evt Event
ns/omniscriptKnowledgeBase.sendDataToDebugConsole(params, resp, label) ⇒ Void

Param Type
params Object
resp Object
label String
ns/omniscriptKnowledgeBase
• ns/omniscriptKnowledgeBase
• .runMode : String
• .knowledgeOptions : Object
• .inputSearchKeyword : String
• .kbLabel : String
• .articlesResults : Array

company 667
OmniStudio
• .articleBodyResults : Object
• .canShowKbOnStep : Boolean
• .isToggled : Boolean
• ._kbModal : Boolean
• ._article : Object
• ._omnipostMessage : String
• ._isOpenOmniScript : Boolean
• ._isConfiguredOnOmniScript : Boolean
• .displayLabel : String
• ._omniNewportClass : String
• ._isStepChartTop : Boolean
• ._themeKB : String
• .omniKey : String
• .omniscriptKey : String
• .renderTemplate : Boolean
• ._articleParams : Object
• ._knowledgeBaseOptions : Object
• ._openInOmniEnable : Boolean
• ._customLabelsUtil : Object
• .classToggleWidth ⇒ String
• .handleKnowledgeOptions(data) ⇒ Void
• .searchKnowledgeArticle(event) ⇒ Void
• .kbInvokeAction(params) ⇒ Promise
• .toggleKb(evt, isToggled) ⇒ Void
• .openModal(evt) ⇒ Void
• .openInOmniscript(evt) ⇒ Void
• .getArticleBody() ⇒ Void
• .handleKbArticleOptions(data) ⇒ Void
• .kbArticleInvokeAction(params) ⇒ Promise
• .redirectToArticleUrl(evt) ⇒ Void
ns/omniscriptKnowledgeBase.layout : String
Kind: instance property of ns/omniscriptKnowledgeBase
Scope: public (api)

company 668
OmniStudio
ns/omniscriptKnowledgeBase.runMode : String
Flag to determine where component is run.
Scope: public (api)
ns/omniscriptKnowledgeBase.knowledgeOptions : Object
Contains detailed options which used to make remote call and setting up label of KB.
Scope: public (api)
ns/omniscriptKnowledgeBase.inputSearchKeyword : String
Set user input value for getting related articles of KB.
ns/omniscriptKnowledgeBase.kbLabel : String
Set KB Label of KB.
Scope: public
ns/omniscriptKnowledgeBase.articlesResults : Array
Holding set of articles based on specific user keyword.
ns/omniscriptKnowledgeBase.articleBodyResults : Object
Contains details of an article ie: article body, title and link.
ns/omniscriptKnowledgeBase.canShowKbOnStep : Boolean
Setting up true/false: whether can show on step or not.

company 669
OmniStudio
ns/omniscriptKnowledgeBase.isToggled : Boolean
Toggled KB container for Newport(hide/show container based on user convenience), Default is always
false.
ns/omniscriptKnowledgeBase._kbModal : Boolean
Open Modal of an article via template(hide/show modal using this property), Default is always false.
ns/omniscriptKnowledgeBase._article : Object
Contains an article details.
ns/omniscriptKnowledgeBase._modalContainerClass : String
• Setting up class for modal container.
Scope: private
ns/omniscriptKnowledgeBase._footerClasses : String
• Setting up class for footer of modal.
Scope: private
ns/omniscriptKnowledgeBase._omnipostMessage : String
• Custom label for closing Modal.
Scope: private
ns/omniscriptKnowledgeBase._isOpenOmniScript : Boolean

company 670
OmniStudio
Scope: private
ns/omniscriptKnowledgeBase._isConfiguredOnOmniScript : Boolean
Scope: private
ns/omniscriptKnowledgeBase.displayLabel : String
Setting KB Label from options of KB if doesn't exist.
ns/omniscriptKnowledgeBase._omniNewportClass : String
Setting newport root block class: 'via-nds' if configured on omniscript.
ns/omniscriptKnowledgeBase._isStepChartTop : Boolean
• setting up true if stepchart placement is on top.
Scope: private
ns/omniscriptKnowledgeBase._themeKB : String
• Setting up theme.
Scope: private
ns/omniscriptKnowledgeBase.omniKey : String
• Setting up omniscript key.
Scope: private

company 671
OmniStudio
ns/omniscriptKnowledgeBase.omniscriptKey : String
Setting up OmniScript key.
Scope: public (api)
ns/omniscriptKnowledgeBase.renderTemplate : Boolean
Checks whether template needs to render or not.
ns/omniscriptKnowledgeBase._articleParams : Object
• contains an article params.
Scope: private
ns/omniscriptKnowledgeBase._knowledgeBaseOptions : Object
• contains an knowledgeBase options.
Scope: private
ns/omniscriptKnowledgeBase._openInOmniEnable : Boolean
• checking whether its enabled inside omniscript or not.
Scope: private
ns/omniscriptKnowledgeBase._customLabelsUtil : Object
• Custom labels for Knowledge base.
Scope: private
ns/omniscriptKnowledgeBase.classToggleWidth ⇒ String
Toggles class for newport

company 672
OmniStudio
Returns: String - - Will return classes
Scope: private

ns/omniscriptKnowledgeBase.connectedCallback() ⇒ Void
Overwrites native connectedCallback.
Kind: instance method of ns/omniscriptKnowledgeBase
Scope: private
ns/omniscriptKnowledgeBase.handleKnowledgeOptions(data) ⇒ Void
handleKnowledgeOptions - for setting up KB Label, kbOptions, inputsearchkeyword, articles and making
remote call based on options
Scope: private

data Object an object having options to make a remote call.
ns/omniscriptKnowledgeBase.searchKnowledgeArticle(event) ⇒ Void
Gets updated articles based on input keyword via template.
Scope: private

event Event
event.target.value Object getting user input value
event.keyCode Object getting input value when user hits enter
ns/omniscriptKnowledgeBase.kbInvokeAction(params) ⇒ Promise
Makes remote call based on options
Scope: private


company 673
OmniStudio
ns/omniscriptKnowledgeBase.render() ⇒ Template
Scope: private
ns/omniscriptKnowledgeBase.toggleKb(evt, isToggled) ⇒ Void

Toggles kb container for newport via template.
Scope: private

evt Event
isToggled Boolean true/false open/close container
ns/omniscriptKnowledgeBase.openModal(evt) ⇒ Void
Opens modal for an article detail view via template
Scope: private
Param Type
evt Event
ns/omniscriptKnowledgeBase.closeModal() ⇒ Void
Closes the modal of an opened article detail view via template.
Scope: private
ns/omniscriptKnowledgeBase.openInOmniscript(evt) ⇒ Void
Opens an article detail view inside omniscript via template
Scope: private
Param Type
evt Event
ns/omniscriptKnowledgeBase.getArticleBody() ⇒ Void
Gets detailed info object of an article.

company 674
OmniStudio
Scope: private
ns/omniscriptKnowledgeBase.handleKbArticleOptions(data) ⇒ Void
Callback function of pubsub event for getting article body options
Scope: private

data Object an object having options to make a remote call for an article.
ns/omniscriptKnowledgeBase.kbArticleInvokeAction(params) ⇒ Promise
Makes remote call based on article options
Scope: private

ns/omniscriptKnowledgeBase.redirectToArticleUrl(evt) ⇒ Void
For redirecting article on new tab with detailed view via template
Scope: private
Param Type
evt Event
Omniscript Line Break (omniscriptLineBreak) ReadMe

This page contains an OmniScript Line Break LWC ReadMe for each Vlocity release.


This component is used to render a Line Break, OmniscriptLineBreak is extended from
OmniscriptAtomicElement hence contain all method from OmniscriptAtomicElement

company 675
OmniStudio

_themeClass private Returns the valid classes according to theme.
_ctrlPropertyPadding private Returns style tag with padding property defined in control property
Table 25. Methods

render() private template Overwrites native LWC render.
applyCtrlWidth() private void Overwrites inherited applyCtrlWidth.
applyCallResp(json, bApi = false, bValidation = false) api (public) void Overwrites inherited applyCallResp.
HTML Markup
layout.
Usage
<c-omniscript-line-break json-def={jsonDef}
layout={layout}
resume={resume}
</c-omniscript-line-break>
Attributes
Example ---
{
"type": "Line Break",
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"label": "LineBreak1",
"show": null,
"padding": 0
},
"name": "LineBreak1",
"level": 1,
"JSONPath": "Step1:LineBreak1",

company 676
OmniStudio
"indexInParent": 0,
"index": 0,
"children": [],
"bLineBreak": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"LineBreak1": "Step1:LineBreak1",
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,

company 677
OmniStudio
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},

company 678
OmniStudio
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"LineBreak1": ""
}
}
Properties

Methods

HTML Markup
layout.

company 679
OmniStudio
Usage
layout={layout}
resume={resume}
Attributes
Example ---
{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"show": null,
"padding": 0
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bLineBreak": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},

company 680
OmniStudio
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",

company 681
OmniStudio
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"LineBreak1": ""
}
}

company 682
OmniStudio
Properties

Methods

HTML Markup
layout.
Usage
layout={layout}
resume={resume}
Attributes
Example ---
{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,

company 683
OmniStudio
"show": null,
"padding": 0
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bLineBreak": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,

company 684
OmniStudio
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {

company 685
OmniStudio
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"LineBreak1": ""
}
}
OmniScript Lookup (omniscriptLookup) ReadMe

This page contains an OmniScript Lookup LWC ReadMe for each Vlocity release.


This component is used to render a Lookup element, it extends from OmniscriptAtomicElement.

company 686
OmniStudio

options track (private) Internal list of options to display
lookupDisplay track (private) Currently selected and displayed text
hasError track (private) Controls displaying error message
isPageLoading track (private) Controls displaying the spinner
Table 27. Methods

Value
showLookup() private void Shows dropdown list
getOptions() private void Remote call to retrieve the list of options to display
setSelected(selectedIndex) private Promise Sets internal value and display text, then updates data
json
showOptions() private void Add css class to unhide the list of options
hideOptions() private void Remove css class to hide the list of options
saveOptions(options) private void Store options in OmniScript Header for persistent storage
getRecordTypeId(recordType) private Object Returns the Id of a specified record type
selectOption(event) private void Calls setSelected and then hides list of options
mouseOverFocus(event) private void Adds focus and highlights the moused-over option
ariaFocus(newIndex) private void Adds focus to new option when mouse-over or keyboard
usage
ariaKeyDown(evt) private void Detects keyboard events that will interact with lookup and
its dropdown
setElementValue(json, bApi, private void Overriding Base Element's setElementValue
bValidation)
generateUniqueKeys() private void Generates unique keys for each option for LWC for:each
ndsUpdateLabel() private void In newport, adds a css class to input element when there
is an input to shrink the label to prevent overlap
prefill(lookupValue) private void Prefills lookup
validateLookup(showError) private Boolean Validates lookup and controls the flag to display errors
checkValidity() public (api) Boolean Checks validity of the lookup
reportValidity() public (api) Boolean Checks validity of the lookup, if there are errors, allow
errors to be displayed
setChildInputValue(input) private void Override hasValidation's setChildInputValue to directly set
displayValue to properly trigger validation
validateData(data) private Object Checks if prefill data is valid
initCompVariables() private void Overrides hasValidation's initCompVariables
updateOptions({error, ...data}) private void Callback function for an executed wire call which
(wire) populates the list of options with picklist values.

company 687
OmniStudio
HTML Markup
layout.
Usage
<c-omniscript-lookup
json-def={jsonDef}
layout={layout}
resume={resume}
</c-omniscript-lookup>
Attributes
Example ---
{
"type": "Lookup",
"rootIndex": 0,
"response": null,
"propSetMap": {
"errorMessage": {
"default": null,
"custom": []
},
"label": "Lookup1 - sObject",
"clearValue": false,
"disOnTplt": false,
"hide": false,
"show": null,
"placeholder": "",
"dataSource": {
"mapItems": {
"phase2MapItems": [
{
"DomainObjectCreationOrder__c": 1,
"DomainObjectAPIName__c": "JSON",
"InterfaceFieldAPIName__c": "lwc:Id",
"DomainObjectFieldAPIName__c": "name"

company 688
OmniStudio
},
{
"InterfaceFieldAPIName__c": "lwc:insNameSpace__SubType__c",
"DomainObjectFieldAPIName__c": "value"
}
],
"phase1MapItems": [
{
"FilterOperator__c": "LIKE",
"InterfaceFieldAPIName__c": "insNameSpace__Type__c",
"FilterValue__c": "'lwc'",
"DomainObjectFieldAPIName__c": "lwc",
"InterfaceObjectName__c": "insNameSpace__OmniScript__c",
"InterfaceObjectLookupOrder__c": 1
}
],
"inputParameters": []
},
"type": "SObject"
},
"helpText": "asdf",
"help": true,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Lookup1",
"level": 1,
"JSONPath": "Step1:Lookup1",
"indexInParent": 1,
"index": 0,
"children": [],
"bLookup": true,
"lwcId": "lwc010"
}

company 689
OmniStudio
Properties

Methods

Value
json
usage
its dropdown
bValidation)

company 690
OmniStudio

Value
HTML Markup
layout.
Usage
json-def={jsonDef}
layout={layout}
resume={resume}
Attributes
Example ---
{
"type": "Lookup",
"rootIndex": 0,
"response": null,
"propSetMap": {
"errorMessage": {
"default": null,
"custom": []
},
"disOnTplt": false,

company 691
OmniStudio
"hide": false,
"show": null,
"placeholder": "",
"dataSource": {
"mapItems": {
"phase2MapItems": [
{
},
{
}
],
"phase1MapItems": [
{
}
],
},
"type": "SObject"
},
"helpText": "asdf",
"help": true,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,

company 692
OmniStudio
"controlWidth": 12
},
"name": "Lookup1",
"level": 1,
"indexInParent": 1,
"index": 0,
"children": [],
"bLookup": true,
"lwcId": "lwc010"
}
Properties

Methods

Value
json

company 693
OmniStudio

Value
usage
its dropdown
bValidation)
HTML Markup
layout.
Usage
json-def={jsonDef}
layout={layout}
resume={resume}
Attributes

company 694
OmniStudio
Example ---
{
"type": "Lookup",
"rootIndex": 0,
"response": null,
"propSetMap": {
"errorMessage": {
"default": null,
"custom": []
},
"disOnTplt": false,
"hide": false,
"show": null,
"placeholder": "",
"dataSource": {
"mapItems": {
"phase2MapItems": [
{
},
{
}
],
"phase1MapItems": [
{
}
],

company 695
OmniStudio
},
"type": "SObject"
},
"helpText": "asdf",
"help": true,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Lookup1",
"level": 1,
"indexInParent": 1,
"index": 0,
"children": [],
"bLookup": true,
"lwcId": "lwc010"
}
OmniScript Matrix Action ReadMe

This page contains an OmniScript Matrix Action LWC ReadMe for each Vlocity release.


company 696
OmniStudio
ns/omniscriptMatrixAction
This component is used to perform Matrix Action.
• ns/omniscriptMatrixAction
Default exported class OmniscriptMatrixAction.
omniscriptMatrixAction.connectedCallback() ⇒ Void
OmniScript Messaging ReadMe

This page contains an OmniScript Messaging LWC ReadMe for each Vlocity release.

ns/omniscriptMessaging ⇐ OmniscriptAtomicElement
• https://bitbucket.org/vloc/via_oui/src/oui_sprint_ins108/lwcprojects/player/omniscriptMessaging/
#markdown-header-nsomniscriptmessaging-omniscriptatomicelement ⇐ OmniscriptAtomicElement
#markdown-header-omniscriptmessagingmessagetext-string : String
#markdown-header-omniscriptmessagingmessagetype-string : String
#markdown-header-omniscriptmessaginginitcompvariables-void ⇒ void
#markdown-header-omniscriptmessagingevaluatevalidity-boolean ⇒ Boolean
#markdown-header-omniscriptmessagingremovetabindexevent-void ⇒ void

company 697
OmniStudio
#markdown-header-omniscriptmessagingcheckvalidity-boolean ⇒ Boolean
#markdown-header-omniscriptmessagingreportvalidity-boolean ⇒ Boolean
#markdown-header-omniscriptmessagingfocus-void ⇒ void
#markdown-header-omniscriptmessagingstaterefresh-void ⇒ void
#markdown-header-omniscriptmessagingrender-void ⇒ void
#markdown-header-omniscriptmessagingrenderedcallback-void ⇒ void
omniscriptMessaging.messageText : String
Data store for text of message.
Kind: instance property of https://bitbucket.org/vloc/via_oui/src/oui_sprint_ins108/lwcprojects/player/

omniscriptMessaging/#markdown-header-nsomniscriptmessaging-omniscriptatomicelementScope: track
(private)
omniscriptMessaging.messageType : String
Data store for type of message.

omniscriptMessaging/#markdown-header-nsomniscriptmessaging-omniscriptatomicelementScope: track
(private)
omniscriptMessaging.initCompVariables() ⇒ void

omniscriptMessaging/#markdown-header-nsomniscriptmessaging-omniscriptatomicelementScope: private
omniscriptMessaging.evaluateValidity() ⇒ Boolean
Special function to determine if component is valid.

omniscriptMessaging.removeTabIndex(event) ⇒ void
removes the tabindex element from the event target


company 698
OmniStudio

event Event the spawning element.
omniscriptMessaging.checkValidity() ⇒ Boolean
checkValidity should return a Boolean value true, if the input is valid, false if invalid.

omniscriptMessaging/#markdown-header-nsomniscriptmessaging-omniscriptatomicelementScope: public
omniscriptMessaging.reportValidity() ⇒ Boolean
reportValidity should return the value of checkValidity, and trigger the display of any validation messages as
well.

omniscriptMessaging.focus() ⇒ void
focuses the input. Overrides from htmlElement. Focuses if from requirement, but only temporarily.

omniscriptMessaging.stateRefresh() ⇒ void
Overwrites inherited method that gets triggered when data json changes.

omniscriptMessaging.render() ⇒ void

omniscriptMessaging.renderedCallback() ⇒ void

ns/omniscriptMessaging ⇐ OmniscriptAtomicElement
• ns/omniscriptMessaging ⇐ OmniscriptAtomicElement

company 699
OmniStudio
• .messageText : String
• .messageType : String
• .evaluateValidity() ⇒ Boolean
• .removeTabIndex(event) ⇒ void
• .focus() ⇒ void
• .renderedCallback() ⇒ void
omniscriptMessaging.messageText : String
Data store for text of message.
Kind: instance property of ns/omniscriptMessaging
omniscriptMessaging.messageType : String
Data store for type of message.
Kind: instance property of ns/omniscriptMessaging
omniscriptMessaging.initCompVariables() ⇒ void
Kind: instance method of ns/omniscriptMessaging
Scope: private
omniscriptMessaging.evaluateValidity() ⇒ Boolean
Special function to determine if component is valid.
Scope: private
omniscriptMessaging.removeTabIndex(event) ⇒ void
removes the tabindex element from the event target
Scope: private

company 700
OmniStudio

event Event the spawning element.
omniscriptMessaging.checkValidity() ⇒ Boolean
checkValidity should return a Boolean value true, if the input is valid, false if invalid.
Scope: public
omniscriptMessaging.reportValidity() ⇒ Boolean
reportValidity should return the value of checkValidity, and trigger the display of any validation messages as
well.
Scope: public
omniscriptMessaging.focus() ⇒ void
focuses the input. Overrides from htmlElement. Focuses if from requirement, but only temporarily.
Scope: public
omniscriptMessaging.stateRefresh() ⇒ void
Overwrites inherited method that gets triggered when data json changes.
Scope: private
omniscriptMessaging.render() ⇒ void
Scope: private
omniscriptMessaging.renderedCallback() ⇒ void
Scope: private
Omniscript Modal (omniscriptModal) ReadMe

This page contains an OmniScript Modal LWC ReadMe for each Vlocity release.

company 701
OmniStudio


The Omniscript Modal component provides functionality for the modal displayed for Omniscript. This
README will provide high-level information regarding the different properties and methods utilized by the
Omniscript Modal LWC component.
Properties
The following are a list of properties that are declared inside of the Omniscript Modal.

type public (api) Reactive public property. Identifies if the modal is a success or an error.
hideHeader public (api) Reactive public property. Identifies if the header of the modal is to be hidden.
HideFooter public (api) Reactive public property. Identifies if the footer of the modal is to be hidden.
layout public (api) Reactive public property. Determines which LWC player to use - lightning or newport.
triggeredOnStep public (api) Reactive public property. Indicator if modal is triggered on step or in between steps.
Methods
The following are a list of methods that are declared inside of the Omniscript Modal.

closeModal() api (public) void Closes the modal.
openModal() api (public) void Opens the modal.
connectedCallback() private void Overwrite of the native LWC connectedCallback. Applies modal styles
depending on theme.
HTML Markup
The Omniscript Modal has a single template that supports both lightning and newport themes depending on
the layout.
Usage
<c-omniscript-modal data-omni-key='omnimodal'
type={type}
layout={layout}
triggered-on-step={triggeredOnStep}
hide-footer={hideFooter}
hide-header={hideHeader}>
</c-omniscript-modal>

company 702
OmniStudio
Attributes
type --- string attribute which identifies the type of modal: success or error
dataOmniKey --- element unique identifier
triggeredOnStep --- boolean attribute which identifies if the modal is triggered on step (true) or in between
steps (false).
hideFooter --- boolean attribute which identifies if the modal footer is to be be hidden
hideFooter --- boolean attribute which identifies if the modal header is to be be hidden
Properties

type public (api) Reactive public property. Identifies if the modal is a success or an error.
hideHeader public (api) Reactive public property. Identifies if the header of the modal is to be hidden.
HideFooter public (api) Reactive public property. Identifies if the footer of the modal is to be hidden.
layout public (api) Reactive public property. Determines which LWC player to use - lightning or newport.
triggeredOnStep public (api) Reactive public property. Indicator if modal is triggered on step or in between steps.
Methods

depending on theme.
HTML Markup
the layout.
Usage
type={type}

company 703
OmniStudio
layout={layout}
Attributes
Properties

type api (public) Reactive public property. Identifies if the modal is a success or an error.
hideHeader api (public) Reactive public property. Identifies if the header of the modal is to be hidden.
hideFooter api (public) Reactive public property. Identifies if the footer of the modal is to be hidden.
Methods

depending on theme.
HTML Markup
the layout.
Usage
type={type}

company 704
OmniStudio
layout={layout}
Attributes
OmniScript MultiSelect (omniscriptMultiselect) ReadMe

This page contains an OmniScript MultiSelect LWC ReadMe for each Vlocity release.


This component is used to render a multiselect element, This is extends from mixins class
OmniscriptOptionsMixin, OmniscriptAtomicElement.
OmniscriptOptionsMixin mixin class is used for validating prefil data for multiselect options.
We support the following format of Multiselect:
• horizontal view of multiselect

• vertical view of multiselect
• image view of multiselect with image count in a row
• image view of multiselect with fix width(without image count in a row)
• image view of multiselect with caption
• image view of multiselect without caption

_isImage private Checks whether horizontalMode is image or not
_isImageDisplay private checks whether image needs to display or not

company 705
OmniStudio
Table 29. Methods

checkOptions(options, data) private Object Overwrite
updatePropOptions(newOptions) private void Update options
seedOptions() private Boolean Determines if seed data is to be returned.
HTML Markup
layout.
Usage
<c-omniscript-multiselect
json-def={jsonDef}
layout={layout}
resume={resume}
</c-omniscript-multiselect>
Attributes
Example ---
{
"type": "Multi-select",
"rootIndex": 0,
"response": "omniscript",
"propSetMap": {
"controlWidth": 12,
"required": false,
"repeat": false,
"readOnly": false,
"horizontalMode": "image",
"help": false,
"helpText": "",
"options": [

company 706
OmniStudio
{
"imgId": "../servlet/servlet.ImageServer?
id=0151U000001dB1GQAU&&docName=VlocityLogo&&oid=00D1U0000010hNLUAY",
"value": "Omniscript Team",
"name": "omniscript"
},
{
id=0151U000001dB1IQAU&&docName=VlocityLogoIns&&oid=00D1U0000010hNLUAY",
"value": "Oards Team",
"name": "cards"
},
{
id=0151U000001dB1JQAU&&docName=VlocityLogoTagline&&oid=00D1U0000010hNLUAY",
"value": "Cpq Team",
"name": "cpq"
}
],
"optionSource": { "source": "", "type": "image" },
"controllingField": { "source": "", "type": "", "element": "" },
"show": null,
"hide": false,
"optionWidth": 100,
"optionHeight": 100,
"imageCountInRow": 3,
"enableCaption": true,
"disOnTplt": false,
"label": "Multi-select1",
"documentNames": ["VlocityLogo", "VlocityLogoIns", "VlocityLogoTagline"]
},
"name": "Multi-select1",
"level": 1,
"JSONPath": "Step1:Multi-select1",
"indexInParent": 0,
"index": 0,
"children": [],
"bMultiselect": true,
"lwcId": "lwc000",
"bInit": true
}

company 707
OmniStudio
Example ---
{
"labelMap": { "Multi-select1": "Step1:Multi-select1", "Step1": "Step1" },
"propSetMap": {
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},

company 708
OmniStudio
{
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}
]

company 709
OmniStudio
},
"acUiElements": { "Step1": "", "Multi-select1": "" }
}
seedJson --- designer seed JSON + multiselect parameters + cached API responses
This component is used to render a multiselect element, This is extends from mixins class
OmniscriptOptionsMixin mixin class is used for validating prefill data for multiselect options.
We support the following format of Multiselect:

Properties

_isImage private Checks whether horizontalMode is image or not
_isImageDisplay private checks whether image needs to display or not
Methods

HTML Markup
layout.

company 710
OmniStudio
Usage
json-def={jsonDef}
layout={layout}
resume={resume}
Attributes
Example ---
{
"rootIndex": 0,
"propSetMap": {
"controlWidth": 12,
"required": false,
"repeat": false,
"readOnly": false,
"help": false,
"helpText": "",
"options": [
{
},
{
"name": "cards"
},
{

company 711
OmniStudio
"name": "cpq"
}
],
"show": null,
"hide": false,
"optionWidth": 100,
"disOnTplt": false,
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"lwcId": "lwc000",
"bInit": true
}
Example ---
{
"propSetMap": {
"rtpSeed": false,

company 712
OmniStudio
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
{
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",

company 713
OmniStudio
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}
]
},
}
This component is used to render a MultiSelect element. This component extends from the mixin classes
OmniscriptOptionsMixin mixin class is used for validating prefill data for multiselect options.

company 714
OmniStudio
We support the following format of MultiSelect:

Methods
HTML Markup
layout.
Usage
json-def={jsonDef}
layout={layout}
resume={resume}
Attributes
Example ---
{
"rootIndex": 0,
"propSetMap": {
"controlWidth": 12,
"required": false,

company 715
OmniStudio
"repeat": false,
"readOnly": false,
"help": false,
"helpText": "",
"options": [
{
},
{
"name": "cards"
},
{
"name": "cpq"
}
],
"show": null,
"hide": false,
"optionWidth": 100,
"disOnTplt": false,
},
"level": 1,

company 716
OmniStudio
"indexInParent": 0,
"index": 0,
"children": [],
"lwcId": "lwc000",
"bInit": true
}
Example ---
{
"propSetMap": {
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},

company 717
OmniStudio
{
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",
},
"remoteOptions": {

company 718
OmniStudio
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}
]
},
}
OmniScript Navigate Action (omniscriptNavigateAction) ReadMe

This page contains an OmniScript Navigate Action LWC ReadMe for each Vlocity release.


The OmniScript Navigate Action exposes the functionality found in via_component's navigate-action
and can be used to navigate to various Salesforce experiences including: components, knowledge articles,
records, record-relationships, objects, named pages, navigation items (tabs, flexipages) as well as opening
links external to Salesforce. OmniScript Navigate Action extends OmniscriptBaseAction
User Guide

targetType private The PageReference type to be navigated to. One of One of 'App', 'Current Page', 'Component',
get 'Knowledge Article', 'Login', 'Object', 'Record', 'Record Relationship', 'Named Page', 'Community
Named Page' , 'Navigation Item', or 'Web Page'. Supports merge fields.
targetId private The 16 character salesforce record id. Used by Record, and Record Relationship type
get PageReferences. Supports merge fields.
targetName private The name of the 'App', 'Component', 'Object', 'Record', 'Page' or 'Tab'. In the case of a 'Web Page'
get type PageReference, this would be the URL. Supports merge fields.

company 719
OmniStudio

targetParams private Additional parameters to be sent to the view in the format of URL search params:
get 'nskey=value&nskey2=value'. Note: as of Summer '19, all parameter names must have a
namespace prefix. Supports merge fields.
_isLink private Boolean that determines weather or not the component will render as an <a></a> tag.
_navigateAction private A cached reference to the embedded c-navigate-action component.
_nsPrefix private A stored reference to the return value of omniscriptInternalUtils.getNameSpacePrefix.
_targetAction private Action property to be set on the embedded c-navigate-action. Used by Object and Record
PageReference types.
Methods
The following are a list of methods that are declared inside of the Omniscript Navigate Action. Navigate
Action is inherited from Omniscript Base Action for additional support regarding action invocation and
processing. Reference the Omniscript Base Action README for additional information regarding the
inherited class.

execute() public Promise Called by the omniscript header when the navigate action is placed outside of
a step. Otherwise the click event is handled by the base component.
handleResponse() public Object A no-op override, to prevent errors when called by the omniScript header.
getTargetAction() private String Gets the corresponding value for the class property _targetActionfrom
propSetMap.
initCompVariables() private void Overrides inherited initCompVariables. Sets the static class properties
_isLink and _targetAction.
renderedCallback() private void Overwrites native LWC renderedCallback lifecycle method. Queries for the
navigate-actionelement and stores a reference in _navigateAction.
render() private template Overwrites native LWC render lifecycle method.
Markup
The OmniScript Navigate Action contains a single template that supports both lightning and newport
players.
Usage
<c-omniscript-navigate-action json-def={jsonDef}
layout={layout}
resume={resume}
</c-omniscript-navigate-action>
Attributes

company 720
OmniStudio
Properties

targetType private The PageReference type to be navigated to. One of One of 'Component', 'Knowledge Article',
get 'Object', 'Record', 'Record Relationship', 'Named Page' , 'Navigation Item', or 'Web Page'.
Supports merge fields.
targetName private The name of the 'Component', 'Object', 'Record', or 'Tab'. In the case of a 'Web Page' type
get PageReference, this would be the URL. Supports merge fields.
_isLink private Boolean that determines weather or not the component will render as an href.
Methods
inherited class.

propSetMap.

company 721
OmniStudio

Markup
players.
Usage
layout={layout}
resume={resume}
Attributes
Properties

targetType private The PageReference type to be navigated to. One of One of 'Component', 'Knowledge Article',
get 'Object', 'Record', 'Record Relationship', 'Named Page' , 'Navigation Item', or 'Web Page'.

company 722
OmniStudio

targetName private The name of the 'Component', 'Object', 'Record', or 'Tab'. In the case of a 'Web Page' type
get PageReference, this would be the URL. Supports merge fields.
_isLink private Boolean that determines weather or not the component will render as an href.
Methods
inherited class.

propSetMap.
Markup
players.
Usage
layout={layout}
resume={resume}
Attributes

company 723
OmniStudio
Omniscript Number (omniscriptNumber) ReadMe

This page contains an OmniScript Number LWC ReadMe for each Vlocity release.


This component is used to render a Number Element, OmniscriptNumber is extended from
OmniscriptAtomicElement. Supported masking format example ##,##.##

_imaskNumberAttributes private Hold an object from Helper method for mask handling
Table 32. Methods

validateData(data) private Object Evaluates if number is valid.
HTML Markup
layout.
Usage
<c-omniscript-number
json-def={jsonDef}

company 724
OmniStudio
layout={layout}
resume={resume}
</c-omniscript-number>
Attributes
Example ---
{
"type": "Number",
"rootIndex": 0,
"response": 12345,
"propSetMap": {
"label": "Number1",
"disOnTplt": false,
"hide": false,
"debounceValue": 0,
"show": null,
"mask": "##,##.##",
"ptrnErrText": "",
"pattern": "",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Number1",
"level": 1,
"JSONPath": "Step1:Number1",
"indexInParent": 0,
"index": 0,
"children": [],

company 725
OmniStudio
"bNumber": true,
"lwcId": "lwc000",
"bInit": true
}
Example ---
{
"labelMap": { "Number1": "Step1:Number1", "Step1": "Step1" },
"propSetMap": {
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},

company 726
OmniStudio
{
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",

company 727
OmniStudio
"label": "",
"render": false
}
]
},
"acUiElements": { "Step1": "", "Number1": "" }
}
seedJson --- designer seed JSON + number parameters + cached API responses
Properties

_imaskNumberAttributes private Hold an object from Helper method for mask handling
Methods

HTML Markup
layout.
Usage
json-def={jsonDef}
layout={layout}
resume={resume}

company 728
OmniStudio
Attributes
Example ---
{
"type": "Number",
"rootIndex": 0,
"response": 12345,
"propSetMap": {
"label": "Number1",
"disOnTplt": false,
"hide": false,
"debounceValue": 0,
"show": null,
"mask": "##,##.##",
"ptrnErrText": "",
"pattern": "",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Number1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bNumber": true,
"lwcId": "lwc000",
"bInit": true
}

company 729
OmniStudio
Example ---
{
"propSetMap": {
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},

company 730
OmniStudio
{
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}
]

company 731
OmniStudio
},
}
Methods
HTML Markup
layout.
Usage
json-def={jsonDef}
layout={layout}
resume={resume}
Attributes
Example ---
{
"type": "Number",
"rootIndex": 0,
"response": 12345,

company 732
OmniStudio
"propSetMap": {
"label": "Number1",
"disOnTplt": false,
"hide": false,
"debounceValue": 0,
"show": null,
"mask": "##,##.##",
"ptrnErrText": "",
"pattern": "",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Number1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bNumber": true,
"lwcId": "lwc000",
"bInit": true
}
Example ---
{
"propSetMap": {

company 733
OmniStudio
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
{
"modalSize": "lg",
},
"id": "vlcCart",

company 734
OmniStudio
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}
]
},
}

company 735
OmniStudio
OmniScript Options Mixin (OmniscriptOptionMixin) ReadMe

This page contains an OmniScript Options Mixin LWC ReadMe for each Vlocity release.


This Mixin provides options logic integration for any component that is wrapped with this mixin component.

refresh track (private) Flag used to force a refresh of the UI.
Table 34. Methods

initCompVariables() private void Overwrites a Lower Order component inherited
initCompVariables. This method is executed once during
connectedCallback.
seedOption() private Boolean Options are seeded.
combinedWatch() private void Overwrites a Lower Order component inherited
combinedWatch. This method executes when the Data
JSON has changed.
getOptions(initialOptions) private void Gets the options for the element.
checkOptions(options, data) private Object Checks options to see if the Data JSON needs to be
cleared.
prependOptions(initialOptions, private Object Prepends options.
options)
updatePropOptions() private void Updates options property.
validateData(data) private Boolean Determines if data is valid.
HTML Markup
The Omniscript Options Mixin does not have a dedicated template. It will utilize the Lower Order component
that the Mixin is wrapped.
Usage
In order to utilize this Omniscript Options Mixin, import the Mixin and wrap the extended component with
this Mixin.
The following code below is an example of its usage.
import { OmniscriptOptionsMixin } from 'c/omniscriptOptionsMixin';

company 736
OmniStudio
export default class OmniscriptRadio extends

OmniscriptOptionsMixin(OmniscriptAtomicElement) {
/** additional component specific logic **/
}
Properties

Methods

connectedCallback.
JSON has changed.
cleared.
options)
validateData(data) private Object Determines if data is valid.
HTML Markup
Usage
this Mixin.

}

company 737
OmniStudio
Properties

Methods

connectedCallback.
JSON has changed.
cleared.
options)
validateData(data) private Object Determines if data is valid.
HTML Markup
Usage
this Mixin.

}
OmniScript Password ReadMe

This page contains an OmniScript Password LWC ReadMe for each Vlocity release.

company 738
OmniStudio

ns/omniscriptPassword ⇐ OmniscriptText
This component is used to render a Password Element.
Extends: OmniscriptText
omniscriptPassword.setElementFormattedValue() ⇒ void
Sets the formatted value parameter for inter-component communication of the display value. Overrides
from OmiscriptAtomicElement
Kind: instance method of ns/omniscriptPasswordScope: private
ns/omniscriptPassword ⇐ OmniscriptText
Extends: OmniscriptText
omniscriptPassword.setElementFormattedValue() ⇒ void
Sets the formatted value parameter for inter-component communication of the display value. Overrides
from OmiscriptAtomicElement
Kind: instance method of ns/omniscriptPassword
Scope: private
OmniScript Places Type Ahead ReadMe

This page contains an OmniScript Places Type Ahead LWC ReadMe for each Vlocity release.


company 739
OmniStudio
ns/omniscriptPlacesTypeahead ⇐ OmniscriptTypeahead
The omniscriptPlacesTypeahead component extends the functionality of the omniscriptTypeahead, and
utilizes the google places api autocomplete endpoint as it's options source.
Extends: OmniscriptTypeahead
• ns/omniscriptPlacesTypeahead ⇐ OmniscriptTypeahead
• .mapClasses : string
• .selectedPlace : Array.<Place>
• .zoomLevel : number
• ._placesService : GooglePlacesService
• ._sessionToken : string
• ._googleAttribution : string
• ._mapComp : LightningElement
• ._renderMap : boolean
• .getCoordinates() ⇒ Promise.<any>
• .handleTypeahead(evt) ⇒ void
• .getOptions() ⇒ Promise.<any>
• .handleResponse(data) ⇒ Promise.<any>
• .setOptions(data) ⇒ void
• .handleSelect(evt) ⇒ Promise.<any>
• .applySelection(placeDetailsResult) ⇒ Promise.<any>
• .transformResult(placeDetailsResult) ⇒ Promise.<any>
• .hideMap() ⇒ void
• .showMap() ⇒ void
• .sendDataToDebugConsole(params, resp, label) ⇒ void
omniscriptPlacesTypeahead.mapClasses : string
Css classes applied to the lightning-map element. Used to toggle visibility.
Kind: instance property of ns/omniscriptPlacesTypeaheadScope: track (private)
omniscriptPlacesTypeahead.selectedPlace : Array.<Place>
An array containing the selected place. This is an array because the lightning-map is expecting an array of
items for it's map-markers attribute.
omniscriptPlacesTypeahead.zoomLevel : number
Passed in to the lightning-map element's zoom-level attribute.

company 740
OmniStudio
omniscriptPlacesTypeahead._placesService : GooglePlacesService
A reference to to a GooglePlacesService instance. Instantiated in this.initCompVariables.
Kind: instance property of ns/omniscriptPlacesTypeaheadScope: private
omniscriptPlacesTypeahead._sessionToken : string
This is a hash generated by the google places service, and is used to track billing information on the
Google API side.
omniscriptPlacesTypeahead._googleAttribution : string
A reference to the required attribution image.
omniscriptPlacesTypeahead._mapComp : LightningElement
A reference to the lightning-map lwc. Cached in the initial renderedCallback.
omniscriptPlacesTypeahead._renderMap : boolean
Whether or not to render the dom containing the lightning-map element.
Kind: instance property of ns/omniscriptPlacesTypeahead
omniscriptPlacesTypeahead.getCoordinates() ⇒ Promise.<any>
If the coordinates have not yet been set, returns the pending promise, otherwise will resolve the cached
value.
Kind: instance method of ns/omniscriptPlacesTypeaheadScope: private
omniscriptPlacesTypeahead.handleTypeahead(evt) ⇒ void
A throttled callback bound from OmniscriptTypeahead.initCompVariables.
Param Type
evt KeyboardEvent
omniscriptPlacesTypeahead.getOptions() ⇒ Promise.<any>
Defines the promise chain used to get/set typeahead options.
omniscriptPlacesTypeahead.handleResponse(data) ⇒ Promise.<any>
Link in the promise storing _sessionToken and trimming back the result.

company 741
OmniStudio

data * Data returned from GooglePlacesService.placeAutocomplete.
omniscriptPlacesTypeahead.setOptions(data) ⇒ void
Link in the promise chain that sets results from GooglePlaces.placeAutocomplete.predictions, and formats
them for use in the c-typeahead component.

data * GooglePlaces.placeAutocomplete.predictions
omniscriptPlacesTypeahead.handleSelect(evt) ⇒ Promise.<any>
Called when a selection is made from the base typeahead component. Bound in template.
Param Type
evt CustomEvent
omniscriptPlacesTypeahead.applySelection(placeDetailsResult) ⇒ Promise.<any>
Takes the selected place from the 'select' event, stores the details in this.selected place, then shows the
map, and calculates the correct zoom.
Kind: instance method of ns/omniscriptPlacesTypeahead
Param Type
placeDetailsResult *
omniscriptPlacesTypeahead.transformResult(placeDetailsResult) ⇒ Promise.<any>
This step in the promise chain takes the placeDetailsResult and maps the address component to the
structure specified in the os designer.
Param Type
omniscriptPlacesTypeahead.hideMap() ⇒ void
Hides the lightning-map component by adding the theme-appropriate 'hide' class.

company 742
OmniStudio
omniscriptPlacesTypeahead.showMap() ⇒ void
Shows the lightning-map component by removing the theme-appropriate 'hide' class.
omniscriptPlacesTypeahead.sendDataToDebugConsole(params, resp, label) ⇒ void

Param Type
params Object
resp Object
label string
PLACE_DETAIL_FIELDS : string
Comma separated list of fields to be returned by the googlePlacesApi place details endpoint. For a
complete list of fields see: {@link:https://developers.google.com/places/web-service/details#fields}
Kind: global constant
• .selectedPlace : Array.<Place>
• ._googleAttribution : URL
• .getCoordinates() ⇒ Promise.<any>
• .getOptions() ⇒ Promise.<any>
• .handleSelect(evt) ⇒ Promise.<any>
• .applySelection(placeDetailsResult) ⇒ Promise.<any>
• .transformResult(placeDetailsResult) ⇒ Promise.<any>

company 743
OmniStudio
omniscriptPlacesTypeahead.mapClasses : string
Css classes applied to the lightning-map element. Used to toggle visibility.
omniscriptPlacesTypeahead.selectedPlace : Array.<Place>
An array containing the selected place. This is an array because the lightning-map is expecting an array of
items for it's map-markers attribute.
omniscriptPlacesTypeahead.zoomLevel : number
Passed in to the lightning-map element's zoom-level attribute.
omniscriptPlacesTypeahead._placesService : GooglePlacesService
A reference to to a GooglePlacesService instance. Instantiated in this.initCompVariables.
omniscriptPlacesTypeahead._sessionToken : string
This is a hash generated by the google places service, and is used to track billing information on the
Google API side.
omniscriptPlacesTypeahead._googleAttribution : URL
A reference to the required attribution image.
omniscriptPlacesTypeahead._mapComp : LightningElement
A reference to the lightning-map lwc. Cached in the initial renderedCallback.
omniscriptPlacesTypeahead.getCoordinates() ⇒ Promise.<any>
value.
omniscriptPlacesTypeahead.handleTypeahead(evt) ⇒ void
A throttled callback bound from OmniscriptTypeahead.initCompVariables.

company 744
OmniStudio
Param Type
evt KeyboardEvent
omniscriptPlacesTypeahead.getOptions() ⇒ Promise.<any>
omniscriptPlacesTypeahead.handleResponse(data) ⇒ Promise.<any>

omniscriptPlacesTypeahead.setOptions(data) ⇒ void

omniscriptPlacesTypeahead.handleSelect(evt) ⇒ Promise.<any>
Param Type
evt CustomEvent
omniscriptPlacesTypeahead.applySelection(placeDetailsResult) ⇒ Promise.<any>
Param Type

company 745
OmniStudio
omniscriptPlacesTypeahead.transformResult(placeDetailsResult) ⇒ Promise.<any>
Param Type
omniscriptPlacesTypeahead.hideMap() ⇒ void
omniscriptPlacesTypeahead.showMap() ⇒ void
• .selectedPlace : Array.
• ._googleAttribution : URL
• .handleFocus() ⇒ void
• .getCoordinates() ⇒ Promise.
• .getOptions() ⇒ Promise.
• .handleResponse(data) ⇒ Promise.
• .handleSelect(evt) ⇒ Promise.
• .applySelection(placeDetailsResult) ⇒ Promise.
• .transformResult(placeDetailsResult) ⇒ Promise.

company 746
OmniStudio
ns/omniscriptPlacesTypeahead.mapClasses : string
• Css classes applied to the lightning-map element. Used to toggle visibility.
ns/omniscriptPlacesTypeahead.selectedPlace : Array.
• An array containing the selected place. This is an array because the lightning-map is expecting an array
of items for it's map-markers attribute.
ns/omniscriptPlacesTypeahead.zoomLevel : number
• Passed in to the lightning-map element's zoom-level attribute.
ns/omniscriptPlacesTypeahead._placesService : GooglePlacesService
• A reference to to a GooglePlacesService instance. Instantiated in this.initCompVariables.
Scope: private
ns/omniscriptPlacesTypeahead._sessionToken : string
• This is a hash generated by the google places service, and is used to track billing information on the
Google API side.
Scope: private
ns/omniscriptPlacesTypeahead._googleAttribution : URL
• A reference to the required attribution image.
Scope: private

company 747
OmniStudio
ns/omniscriptPlacesTypeahead._mapComp : LightningElement
• A reference to the lightning-map lwc. Cached in the initial renderedCallback.
Scope: private
ns/omniscriptPlacesTypeahead.handleFocus() ⇒ void
A handler for the focus event, bound in initCompVariables lifecycle hook.
ns/omniscriptPlacesTypeahead.getCoordinates() ⇒ Promise.
value.
Scope: private
ns/omniscriptPlacesTypeahead.handleTypeahead(evt) ⇒ void
A throttled callback bound from
Scope: private
Param Type
evt KeyboardEvent
ns/omniscriptPlacesTypeahead.getOptions() ⇒ Promise.
Scope: private
ns/omniscriptPlacesTypeahead.handleResponse(data) ⇒ Promise.
Scope: private


company 748
OmniStudio
ns/omniscriptPlacesTypeahead.setOptions(data) ⇒ void
Scope: private

ns/omniscriptPlacesTypeahead.handleSelect(evt) ⇒ Promise.
Scope: private
Param Type
evt CustomEvent
ns/omniscriptPlacesTypeahead.applySelection(placeDetailsResult) ⇒ Promise.
Param Type
ns/omniscriptPlacesTypeahead.transformResult(placeDetailsResult) ⇒ Promise.
Scope: private
Param Type
ns/omniscriptPlacesTypeahead.hideMap() ⇒ void
Scope: private

company 749
OmniStudio
ns/omniscriptPlacesTypeahead.showMap() ⇒ void
Scope: private
OmniScript Radio (omniscriptRadio) ReadMe

This page contains an OmniScript Radio LWC ReadMe for each Vlocity release.


This component is used to render a Radio element, This is extends from mixins class
OmniscriptOptionsMixin and OmniscriptAtomicElement.
OmniscriptOptionsMixin mixin class is used for validating prefill data for radio.
We support the following format of Radio:
• horizontal view of radio

• vertical view of radio
• image view of radio with image count in a row
• image view of radio with fix width(without image count in a row)
• image view of radio with caption
• image view of radio without caption

_isImageMode private Hold an object from Helper method for mask handling
_isVerticalMode private Checks whether value is committed or not
_isDisplayWide private Checks whether mode is Display Wide or not
_horizontalMode private holds mode as 'horizontal'/'vertical'
_isImageDisplay private Checks whether image will display or not
Table 36. Methods

handleChange(evt) private void Change handler

company 750
OmniStudio

HTML Markup
layout.
Usage
<c-omniscript-radio
json-def={jsonDef}
layout={layout}
resume={resume}
</c-omniscript-radio>
Usage
jsonDef** -- json definition of the OmniScript Element
Example ---
{
"type": "Radio",
"rootIndex": 0,
"response": "Omniscript",
"propSetMap": {
"controlWidth": 12,
"required": false,
"repeat": false,
"readOnly": false,
"help": false,
"helpText": "",
"options": [
{
"name": "Omniscript",
id=0151H000006K9XJQA0&&docName=VlocityCommunicationsLogo&&oid=00D1H000000Mk0NUA
S"

company 751
OmniStudio
},
{
"name": "Cards",
"value": "Cards Team",
id=0151H000006K9XRQA0&&docName=VlocityPublicSectorLogo&&oid=00D1H000000Mk0NUAS"
},
{
"name": "Cpq",
id=0151H000006K9XNQA0&&docName=VlocityLogo&&oid=00D1H000000Mk0NUAS"
}
],
"optionSource": { "type": "image", "source": "" },
"controllingField": { "element": "", "type": "", "source": "" },
"show": null,
"hide": false,
"optionWidth": 100,
"disOnTplt": false,
"label": "Radio1",
"documentNames": [
"VlocityCommunicationsLogo",
"VlocityPublicSectorLogo",
"VlocityLogo"
]
},
"name": "Radio1",
"level": 1,
"JSONPath": "Step1:Radio1",
"indexInParent": 0,
"index": 0,
"children": [],
"bRadio": true,
"lwcId": "lwc000",
}

company 752
OmniStudio
Example ---
{
"labelMap": { "Radio1": "Step1:Radio1", "Step1": "Step1" },
"propSetMap": {
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},

company 753
OmniStudio
{
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}
]
},

company 754
OmniStudio
"acUiElements": { "Step1": "", "Radio1": "" }
}
seedJson --- designer seed JSON + radio parameters + cached API responses
This component is used to render a Radio element. This component extends from the mixin class

Properties

_isImageMode private Hold an object from Helper method for mask handling
_isVerticalMode private Checks whether value is committed or not
_isDisplayWide private Checks whether mode is Display Wide or not
_horizontalMode private holds mode as 'horizontal'/'vertical'
_isImageDisplay private Checks whether image will display or not
Methods

HTML Markup
layout.

company 755
OmniStudio
Usage
<c-omniscript-radio
json-def={jsonDef}
layout={layout}
resume={resume}
Usage
jsonDef** -- json definition of the OmniScript Element
Example ---
{
"type": "Radio",
"rootIndex": 0,
"propSetMap": {
"controlWidth": 12,
"required": false,
"repeat": false,
"readOnly": false,
"help": false,
"helpText": "",
"options": [
{
S"
},
{
"name": "Cards",
},

company 756
OmniStudio
{
"name": "Cpq",
}
],
"show": null,
"hide": false,
"optionWidth": 100,
"disOnTplt": false,
"label": "Radio1",
"documentNames": [
"VlocityLogo"
]
},
"name": "Radio1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bRadio": true,
"lwcId": "lwc000",
}
Example ---
{
"propSetMap": {

company 757
OmniStudio
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
{
"modalSize": "lg",
},
"id": "vlcCart",

company 758
OmniStudio
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}
]
},
}

company 759
OmniStudio
This component is used to render a Radio element, This component extends from mixin classes

Methods

HTML Markup
layout.
Usage
<c-omniscript-radio
json-def={jsonDef}
layout={layout}
resume={resume}
Usage
Example ---
{
"type": "Radio",
"rootIndex": 0,

company 760
OmniStudio
"propSetMap": {
"controlWidth": 12,
"required": false,
"repeat": false,
"readOnly": false,
"help": false,
"helpText": "",
"options": [
{
S"
},
{
"name": "Cards",
},
{
"name": "Cpq",
}
],
"show": null,
"hide": false,
"optionWidth": 100,
"disOnTplt": false,
"label": "Radio1",

company 761
OmniStudio
"documentNames": [
"VlocityLogo"
]
},
"name": "Radio1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bRadio": true,
"lwcId": "lwc000",
}
Example ---
{
"propSetMap": {
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,

company 762
OmniStudio
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
{
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",

company 763
OmniStudio
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}
]
},
}
OmniScript RadioGroup (omniscriptRadioGroup) ReadMe

This page contains an OmniScript RadioGroup LWC ReadMe for each Vlocity release.


This component is used to render a RadioGroup element, it extends from OmniscriptAtomicElement.

_selectedValues track (private) Internal object for radioGroup-option pairs

company 764
OmniStudio
Table 38. Methods

setAll(evt) private void Selects all radio inputs in corresponding column
setWidths() private void Applies styling to the width of options after first render
selectRadio(labelIndex, optionIndex) private Boolean Updates internal state with specified option for a specific
radioGroup value
jsonDef(json) private void Override BaseElement's set jsonDef, also calls
generateUniqueIds
jsonDef() private void Override BaseElement's get jsonDef, LWC requirement
handleChange(evt) private void Updates json data when radio gets selected or set all is
clicked
bValidation)
prefill(json) private void Prefill RadioGroup
removeInvalid(json) private Object Removes invalid options from prefill or input sources
validateRadioGroup(showError) private Boolean Validates radiogroup and controls the flag to display
errors
checkValidity() api (public) Boolean Checks validity of the radiogroup
reportValidity() api (public) Boolean Checks validity of the radiogroup, if there are errors,
allow errors to be displayed
setChildInputValue(input) private void Override hasValidation's setChildInputValue to directly
set displayValue to properly trigger validation
generateUniqueIds(labels) private void Add unique ids to the rlabels for the input radio buttons.
renderedCallback() private void Overwrites native LWC lifecycle method.
HTML Markup
layout.
Usage
<c-omniscript-radio-group
json-def={jsonDef}
layout={layout}
resume={resume}
</c-omniscript-radio-group>

company 765
OmniStudio
Attributes
Example ---
{
"type": "Radio Group",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "RadioGroup1",
"disOnTplt": false,
"hide": false,
"show": null,
"controllingField": {
"source": "",
"type": "",
"element": ""
},
"optionSource": {
"source": "",
"type": ""
},
"options": [
{
"setAll": true,
"value": "rlabl1",
"name": "rval1"
},
{
"value": "rlabl2",
"name": "rval2"
},
{
"setAll": true,
"value": "rlabl3",
"name": "rval3"
}
],
"radioLabels": [
{
"value": "rdisplaylabel1",
"name": "rdisplay1",
"id": "RadioGroup1-0"

company 766
OmniStudio
},
{
}
],
"radioLabelsWidth": 6,
"helpText": "",
"help": false,
"readOnly": false,
"required": true,
"controlWidth": 12
},
"name": "RadioGroup1",
"level": 1,
"JSONPath": "Step2:RadioGroup1",
"indexInParent": 0,
"index": 0,
"children": [],
"bRadioGroup": true,
"lwcId": "lwc000"
}
Properties


company 767
OmniStudio
Methods

radioGroup value
generateUniqueIds
clicked
bValidation)
errors
HTML Markup
layout.
Usage
json-def={jsonDef}
layout={layout}
resume={resume}

company 768
OmniStudio
Attributes
Example ---
{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"hide": false,
"show": null,
"source": "",
"type": "",
"element": ""
},
"optionSource": {
"source": "",
"type": ""
},
"options": [
{
"setAll": true,
"value": "rlabl1",
"name": "rval1"
},
{
"value": "rlabl2",
"name": "rval2"
},
{
"setAll": true,
"value": "rlabl3",
"name": "rval3"
}
],
"radioLabels": [
{

company 769
OmniStudio
},
{
}
],
"helpText": "",
"help": false,
"readOnly": false,
"required": true,
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"lwcId": "lwc000"
}
Properties


company 770
OmniStudio
Methods

radioGroup value
generateUniqueIds
clicked
bValidation)
errors
HTML Markup
layout.
Usage
json-def={jsonDef}
layout={layout}
resume={resume}

company 771
OmniStudio
Attributes
Example ---
{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"hide": false,
"show": null,
"source": "",
"type": "",
"element": ""
},
"optionSource": {
"source": "",
"type": ""
},
"options": [
{
"setAll": true,
"value": "rlabl1",
"name": "rval1"
},
{
"value": "rlabl2",
"name": "rval2"
},
{
"setAll": true,
"value": "rlabl3",
"name": "rval3"
}
],
"radioLabels": [
{

company 772
OmniStudio
},
{
}
],
"helpText": "",
"help": false,
"readOnly": false,
"required": true,
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"lwcId": "lwc000"
}
OmniScript Range (omniscriptRange) ReadMe

This page contains an OmniScript Range LWC ReadMe for each Vlocity release.


company 773
OmniStudio

This component is used to render a Range element. It extends from OmniscriptAtomicElement.
Table 39. Methods

shouldNullify(val) private Boolean Determines if range value should be nullified.
handleChange() private void Handles changes made within the Time component.
validateData(data) private Object Evaluates if range data is valid.
connectedCallback.
HTML Markup
layout.
Usage
<c-omniscript-range
json-def={jsonDef}
layout={layout}
resume={resume}
</c-omniscript-range>
Attributes
Example ---
{
"type": "Range",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "Range1",
"disOnTplt": false,
"hide": false,
"show": null,

company 774
OmniStudio
"mask": null,
"step": 1,
"rangeHigh": 10,
"rangeLow": 5,
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"controlWidth": 12
},
"name": "Range1",
"level": 1,
"JSONPath": "Step1:Range1",
"indexInParent": 0,
"index": 0,
"children": [],
"bRange": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Range1": "Step1:Range1",
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,

company 775
OmniStudio
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",

company 776
OmniStudio
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"Range1": ""
}
}

company 777
OmniStudio
Methods

connectedCallback.
HTML Markup
layout.
Usage
<c-omniscript-range
json-def={jsonDef}
layout={layout}
resume={resume}
Attributes
Example ---
{
"type": "Range",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "Range1",
"disOnTplt": false,
"hide": false,
"show": null,
"mask": null,
"step": 1,
"rangeHigh": 10,

company 778
OmniStudio
"rangeLow": 5,
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"controlWidth": 12
},
"name": "Range1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bRange": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,

company 779
OmniStudio
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {

company 780
OmniStudio
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"Range1": ""
}
}

company 781
OmniStudio
Methods

connectedCallback.
HTML Markup
layout.
Usage
<c-omniscript-range
json-def={jsonDef}
layout={layout}
resume={resume}
Attributes
Example ---
{
"type": "Range",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "Range1",
"disOnTplt": false,
"hide": false,
"show": null,
"mask": null,
"step": 1,
"rangeHigh": 10,

company 782
OmniStudio
"rangeLow": 5,
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"controlWidth": 12
},
"name": "Range1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bRange": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,

company 783
OmniStudio
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {

company 784
OmniStudio
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"Range1": ""
}
}
Omniscript Remote Action (omniscriptRemoteAction)ReadMe

This page contains an OmniScript Remote Action LWC ReadMe for each Vlocity release.
The Omniscript Remote Action component provides functionality for invoking Apex classes. This README
will provide high-level information regarding the different properties and methods utilized by the Omniscript
Remote Action LWC component.

company 785
OmniStudio

Methods
The following are a list of methods that are declared inside of the Omniscript Remote Action. Remote
inherited class.

connectedCallback private Void Overwrites inherited connectedCallback. Instantiates Remote Action Utility
HTML Markup
newport themes.
Usage
<c-omniscript-remote-action json-def={jsonDef}
layout={layout}
run-mode={runMode}
resume={resume}
</c-omniscript-remote-action>
Attributes
Example ---
{
"type": "Remote Action",
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,

company 786
OmniStudio
"errorMessage": { "default": null, "custom": [] },
"label": "RemoteAction1",
"svgIcon": "",
"svgSprite": "",
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"show": null,
"extraPayload": {},
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "SampleMethod",
"remoteClass": "SampleClass",
"controlWidth": 12
},
"name": "RemoteAction1",
"level": 1,
"JSONPath": "Step1:RemoteAction1",
"indexInParent": 0,
"index": 0,

company 787
OmniStudio
"children": [],
"bRemoteAction": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"RemoteAction1": "Step1:RemoteAction1",
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,

company 788
OmniStudio
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},

company 789
OmniStudio
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"RemoteAction1": ""
}
}
The Omniscript Remote Action component provides functionality for invoking Apex classes. This README
will provide high-level information regarding the different properties and methods utilized by the Omniscript
Methods
The following are a list of methods that are declared inside of the Omniscript Remote Action. Remote
inherited class.

connectedCallback private Void Overwrites inherited connectedCallback. Instantiates Remote Action Utility
HTML Markup
newport themes.

company 790
OmniStudio
Usage
layout={layout}
run-mode={runMode}
resume={resume}
Attributes
Example ---
{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"svgIcon": "",
"svgSprite": "",
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"show": null,

company 791
OmniStudio
"extraPayload": {},
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {

company 792
OmniStudio
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},

company 793
OmniStudio
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"RemoteAction1": ""
}
}

company 794
OmniStudio
The Omniscript Remote Action component provides functionality for invoking Apex classes. This ReadMe
will provide high-level information regarding the different properties and methods utilized by the OmniScript
Methods
The following are a list of methods that are declared inside of the OmniScript Remote Action. Remote
Action is inherited from OmniScript Base Action for additional support regarding action invocation and
inherited class.

executeAction(element, private Promise Handles the action request. queueableRespId is used for apex
queueableRespId) remote options queueable support.
HTML Markup
HTML markup is inherited from the OmniScript Base Action. The templates support both lightning and
newport themes.
Usage
layout={layout}
resume={resume}
Attributes
Example ---
{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,

company 795
OmniStudio
"svgIcon": "",
"svgSprite": "",
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"show": null,
"extraPayload": {},
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],

company 796
OmniStudio
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},

company 797
OmniStudio
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {

company 798
OmniStudio
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"RemoteAction1": ""
}
}
OmniScript Rest API ReadMe

This page contains an OmniScript Rest API ReadMe for each Vlocity release.

lwcPrep(data, runMode)
A wrapper that calls the LWCPrep method
Kind: global function
Param Type
data any
runMode string
allCustomLabels
Object containing all Salesforce custom labels

company 799
OmniStudio
OmniScript Save for Later Acknowledgement ReadMe

This page contains an OmniScript Save for Later Acknowledgement LWC ReadMe for each Vlocity release.

ns/omniscriptSaveForLaterAcknowledge
This component is used to render Save For Later's acknowledge modal
• ns/omniscriptSaveForLaterAcknowledge
• instance
• ._result : Object
• ._bSflLabels : Object
• .result
• .resumeLink : String
• .emailLink : String
• .hasResult : Boolean
• .showCopyModal()
• inner
• ~OmniscriptSaveForLaterAcknowledge ⇐ LightningElement
ns/omniscriptSaveForLaterAcknowledge._result : Object
Contains the results for the save for later acknowledge
Kind: instance property of ns/omniscriptSaveForLaterAcknowledge Scope: private
ns/omniscriptSaveForLaterAcknowledge._bSflLabels : Object
Contains all of the custom labels
Kind: instance property of ns/omniscriptSaveForLaterAcknowledge Scope: private
ns/omniscriptSaveForLaterAcknowledge.result
Sets the result for the save for later acknowledge
Kind: instance property of ns/omniscriptSaveForLaterAcknowledge Scope: public (api)
ns/omniscriptSaveForLaterAcknowledge.layout : String

company 800
OmniStudio
Kind: instance property of ns/omniscriptSaveForLaterAcknowledge Scope: public (api)
ns/omniscriptSaveForLaterAcknowledge.resumeLink : String
Stores resume link.
Kind: instance property of ns/omniscriptSaveForLaterAcknowledge Scope: public (track)
ns/omniscriptSaveForLaterAcknowledge.emailLink : String
Stores email link.
ns/omniscriptSaveForLaterAcknowledge.hasResult : Boolean
Flag to determine if there is a result for the save for later acknowledge
ns/omniscriptSaveForLaterAcknowledge.showCopyModal()
Opens modal to display resume link for the save for later acknowledge
Kind: instance method of ns/omniscriptSaveForLaterAcknowledge
ns/omniscriptSaveForLaterAcknowledge~OmniscriptSaveForLaterAcknowledge ⇐
LightningElement
Kind: inner class of ns/omniscriptSaveForLaterAcknowledge Extends: LightningElement
OmniScript Select (omniscriptSelect) ReadMe

This page contains an OmniScript Select LWC ReadMe for each Vlocity release.


This component is used to render a Select element, This is extends from mixins class
OmniscriptOptionsMixin mixin class is used for validating prefill data for select.

_initialOptions private overwritten private variable

company 801
OmniStudio
Table 41. Methods

handleChange(evt) private void OnChange Event Handler. Applies the changed value directly to the response
HTML Markup
layout.
Usage
<c-omniscript-select
json-def={jsonDef}
layout={layout}
resume={resume}
</c-omniscript-select>
Attributes
Example ---
{
"type": "Select",
"rootIndex": 0,
"propSetMap": {
"label": "Select1",
"disOnTplt": false,
"hide": false,
"show": null,
"optionSource": { "source": "", "type": "" },
"options": [
{ "value": "Omniscript Team", "name": "Omniscript" },
{ "value": "Cards Team", "name": "Cards" },
{ "value": "Cpq Team", "name": "Cpq" }

company 802
OmniStudio
],
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Select1",
"level": 1,
"JSONPath": "Step1:Select1",
"indexInParent": 0,
"index": 0,
"children": [],
"bSelect": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": { "Select1": "Step1:Select1", "Step1": "Step1" },
"propSetMap": {
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,

company 803
OmniStudio
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
{
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",

company 804
OmniStudio
"label": "",
"render": false
},
{
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}
]
},
"acUiElements": { "Step1": "", "Select1": "" }
}
resume--- true or false
seedJson --- designer seed JSON + select parameters + cached API responses
This component is used to render a Select element, This component extends from the mixins class
Properties

_initialOptions private overwritten private variable

company 805
OmniStudio
Methods

handleChange(evt) private void OnChange Event Handler. Applies the changed value directly to the response
HTML Markup
layout.
Usage
json-def={jsonDef}
layout={layout}
resume={resume}
Attributes
Example ---
{
"type": "Select",
"rootIndex": 0,
"propSetMap": {
"label": "Select1",
"disOnTplt": false,
"hide": false,
"show": null,
"options": [
],

company 806
OmniStudio
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Select1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bSelect": true,
"lwcId": "lwc000"
}
Example ---
{
"propSetMap": {
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,

company 807
OmniStudio
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
{
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",

company 808
OmniStudio
"render": false
},
{
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}
]
},
}
This component is used to render a Select element, This component extends from mixin classes
Methods


company 809
OmniStudio
HTML Markup
layout.
Usage
json-def={jsonDef}
layout={layout}
resume={resume}
Attributes
Example ---
{
"type": "Select",
"rootIndex": 0,
"propSetMap": {
"label": "Select1",
"disOnTplt": false,
"hide": false,
"show": null,
"options": [
],
"helpText": "",
"help": false,
"readOnly": false,

company 810
OmniStudio
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Select1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bSelect": true,
"lwcId": "lwc000"
}
Example ---
{
"propSetMap": {
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,

company 811
OmniStudio
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
{
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",

company 812
OmniStudio
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}
]
},
}
OmniScript Set Errors Action ReadMe

This page contains an OmniScript Set Errors Action LWC ReadMe for each Vlocity release.

ns/omniscriptSetErrors
This component is used to perform Set Errors.
• ns/omniscriptSetErrors

company 813
OmniStudio
Default exported class OmniscriptSetErrors.
omniscriptSetErrors.connectedCallback() ⇒ Void
Omniscript Set Values (omniscriptSetValues) ReadMe

This page contains an OmniScript Set Values Action LWC ReadMe for each Vlocity release.


The Omniscript Set Values component provides functionality for setting values. This README will provide
high-level information regarding the different properties and methods utilized by the Omniscript Set Values
LWC component.
Methods
The following are a list of methods that are declared inside of the Omniscript Set Values. Set Values is

connectedCallback private Void Overwrites inherited connectedCallback. Instantiates Set Values Utility Class
skipValidation() private Boolean Overwrites inherited skipValidation. Bypasses validation by default.
HTML Markup
newport themes.
Usage
<c-omniscript-set-values json-def={jsonDef}

company 814
OmniStudio
resume={resume}
run-mode={runMode}
layout={layout}>
</c-omniscript-set-values>
Attributes
Example ---
{
"type": "Set Values",
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"label": "SetValues1",
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"show": null,
"elementValueMap": { "": "" },
"controlWidth": 12
},
"name": "SetValues1",
"level": 1,
"JSONPath": "Step1:SetValues1",
"indexInParent": 0,
"index": 0,
"children": [],
"bSetValues": true,
"lwcId": "lwc000"
}

company 815
OmniStudio
Example ---
{
"labelMap": {
"SetValues1": "Step1:SetValues1",
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},

company 816
OmniStudio
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},

company 817
OmniStudio
"acUiElements": {
"Step1": "",
"SetValues1": ""
}
}
LWC component.
Methods

connectedCallback private Void Overwrites inherited connectedCallback. Instantiates Set Values Utility Class
HTML Markup
newport themes.
Usage
resume={resume}
run-mode={runMode}
layout={layout}>
Attributes
Example ---

company 818
OmniStudio
{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"show": null,
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bSetValues": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {

company 819
OmniStudio
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},

company 820
OmniStudio
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"SetValues1": ""
}
}

company 821
OmniStudio
LWC component.
Methods

executeAction(element) private Promise Handles the action request.
processValueMap(valueMap) private Object Processes the value map property set and performs merge fields, as
needed.
HTML Markup
newport themes.
Usage
resume={resume}
layout={layout}>
Attributes
Example ---
{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"pubsub": false,

company 822
OmniStudio
"message": {},
"ssm": false,
"wpm": false,
"show": null,
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bSetValues": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},

company 823
OmniStudio
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},

company 824
OmniStudio
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"SetValues1": ""
}
}
OmniScript Step (omniscriptStep)

This page contains an OmniScript Step Element LWC ReadMe for each Vlocity release.


company 825
OmniStudio

This is the LWC for OmniScript Step element.

_savedKnowledgeOptions private Knowledge Options.
_kbInitializedObj private Object with callback method(handleKnowledgeInitialized) for pubsub.
_kbArticleBodyInitializedObj private Object with callback method(handleArticleBodyInitialized) for pubsub.
articleBodyResults track (private) Article detailed info object.
visible track (private) Whether article will display or not.
Table 43. Methods

renderedCallback() private Void Overwrite of native LWC renderedCallBack to show/hide of the
Step
render() private Template Overwrite of native LWC render to support lightning or newport
player
stateRefresh() private Void Overwrites inherited stateRefresh. Gets called in
combinedWatch.
handleKnowledgeInitialized() private Void callback method for initializing Knowledge component with
kbOptions and fire pubsub event to trigger changes in KB
knowledgeOptions() private Object Setting up knowledge otions from persistentComponent object.
knowledgeArticleOptions(article) private Object Setting up knowledge article otions of an article.
handleArticleBodyInitialized(data) private Void callback method for firing pubsub event to get article option.
closeArticle() private Void Hide article container from template and nullify
articleBodyResults object.
toggleArticle() private Void Toggle article container to expand/collapse.
HTML Markup
layout.
Usage
<c-omniscript-step json-def={jsonDef}
run-mode={runMode}
layout={layout}
resume={resume}
</c-omniscript-step>

company 826
OmniStudio
Attributes
Example ---
{
"type": "Step",
"propSetMap": {
"disOnTplt": false,
"label": "Step1",
"chartLabel": null,
"instructionKey": "",
"show": null,
"knowledgeOptions": {
"typeFilter": "",
"dataCategoryCriteria": "",
"keyword": "",
"publishStatus": "Online",
"language": "English"
},
"remoteOptions": {},
"remoteMethod": "",
"remoteClass": "",
"instruction": "",
"completeMessage": "Are you sure you want to complete the script?",
"completeLabel": "Complete",
"saveMessage": "Are you sure you want to save it for later?",
"saveLabel": "Save for later",
"cancelMessage": "Are you sure?",
"cancelLabel": "Cancel",
"nextWidth": 3,
"nextLabel": "Next",
"previousWidth": 3,
"previousLabel": "Previous",
"validationRequired": true,
"uiElements": { "Step1": "", "Text1": "" }
},
"offSet": 0,
"name": "Step1",

company 827
OmniStudio
"level": 0,
"indexInParent": 0,
"bEmbed": false,
"response": null,
"inheritShowProp": null,
"children": [
{
"response": null,
"level": 1,
"indexInParent": 0,
"eleArray": [
{
"type": "Text",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "Text1",
"disOnTplt": false,
"hide": false,
"debounceValue": 0,
"show": null,
"maxLength": 255,
"minLength": 0,
"ptrnErrText": "",
"pattern": "",
"mask": "",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Text1",
"level": 1,
"JSONPath": "Step1:Text1",
"indexInParent": 0,

company 828
OmniStudio
"index": 0,
"children": [],
"bText": true,
"lwcId": "lwc000"
}
],
}
],
"bAccordionOpen": true,
"bAccordionActive": true,
"bStep": true,
"JSONPath": "Step1",
"lwcId": "lwc0"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},

company 829
OmniStudio
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},

company 830
OmniStudio
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": ""
}
}
This is the LWC for the OmniScript Step element.
Properties

_savedKnowledgeOptions private Knowledge Options.
_kbInitializedObj private Object with callback method(handleKnowledgeInitialized) for pubsub.
_kbArticleBodyInitializedObj private Object with callback method(handleArticleBodyInitialized) for pubsub.

company 831
OmniStudio

articleBodyResults track (private) Article detailed info object.
visible track (private) Whether article will display or not.
Methods

renderedCallback() private Void Overwrite of native LWC renderedCallBack to show/hide of the Step
render() private Template Overwrite of native LWC render to support lightning or newport player
stateRefresh private Void Overwrites inherited stateRefresh. Gets called in combinedWatch.
initialRenderedCallback private Void Overwrites initialRenderCallback. Called on first render cycle.
handleKnowledgeInitialized private Void callback method for initializing Knowledge component with kbOptions
and fire pubsub event to trigger changes in KB
knowledgeOptions private Object Setting up knowledge otions from persistentComponent object.
knowledgeArticleOptions private Object Setting up knowledge article otions of an article.
handleArticleBodyInitialized private Void callback method for firing pubsub event to get article option.
kbArticleBodyResultObj private Void callback method for setting up article Body Results.
closeArticle private Void Hide article container from template and nullify articleBodyResults
object.
toggleArticle private Void Toggle article container to expand/collapse.
HTML Markup
layout.
Usage
<c-omniscript-step json-def={jsonDef}
run-mode={runMode}
layout={layout}
resume={resume}
Attributes
Example ---
{
"type": "Step",

company 832
OmniStudio
"propSetMap": {
"disOnTplt": false,
"label": "Step1",
"chartLabel": null,
"show": null,
"typeFilter": "",
"keyword": "",
},
"remoteMethod": "",
"remoteClass": "",
"instruction": "",
"nextWidth": 3,
"previousWidth": 3,
},
"offSet": 0,
"name": "Step1",
"level": 0,
"indexInParent": 0,
"bEmbed": false,
"response": null,
"children": [

company 833
OmniStudio
{
"response": null,
"level": 1,
"indexInParent": 0,
"eleArray": [
{
"type": "Text",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "Text1",
"disOnTplt": false,
"hide": false,
"debounceValue": 0,
"show": null,
"maxLength": 255,
"minLength": 0,
"ptrnErrText": "",
"pattern": "",
"mask": "",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Text1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bText": true,
"lwcId": "lwc000"
}
],

company 834
OmniStudio
}
],
"bStep": true,
"lwcId": "lwc0"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,

company 835
OmniStudio
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",

company 836
OmniStudio
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": ""
}
}
This is the LWC for the OmniScript Step element.
Methods
renderedCallback() private void Overwrite of native LWC renderedCallBack to show/hide of the Step
render() private template Overwrite of native LWC render to support lightning or newport player
HTML Markup
layout.
Usage
<c-omniscript-step
json-def={jsonDef}

company 837
OmniStudio
layout={layout}
resume={resume}
Attributes
Example ---
{
"type": "Step",
"propSetMap": {
"disOnTplt": false,
"label": "Step1",
"chartLabel": null,
"show": null,
"typeFilter": "",
"keyword": "",
},
"remoteMethod": "",
"remoteClass": "",
"instruction": "",
"nextWidth": 3,

company 838
OmniStudio
"previousWidth": 3,
},
"offSet": 0,
"name": "Step1",
"level": 0,
"indexInParent": 0,
"bEmbed": false,
"response": null,
"children": [
{
"response": null,
"level": 1,
"indexInParent": 0,
"eleArray": [
{
"type": "Text",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "Text1",
"disOnTplt": false,
"hide": false,
"debounceValue": 0,
"show": null,
"maxLength": 255,
"minLength": 0,
"ptrnErrText": "",
"pattern": "",
"mask": "",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,

company 839
OmniStudio
"inputWidth": 12,
"controlWidth": 12
},
"name": "Text1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bText": true,
"lwcId": "lwc000"
}
],
}
],
"bStep": true,
"lwcId": "lwc0"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,

company 840
OmniStudio
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {

company 841
OmniStudio
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": ""
}
}
Omniscript Step Chart (omniscriptStepChart) ReadMe

This page contains an OmniScript Step Chart LWC ReadMe for each Vlocity release.

company 842
OmniStudio


The Omniscript Step Chart component provides functionality for the step chart. This README will provide
high-level information regarding the different properties and methods utilized by the Omniscript Step Chart
LWC component.
Properties
The following are a list of properties that are declared inside of the Omniscript Step Chart.

stepInstruction track (private) Displays the step instructions for a specific step.
stepProgressValue track (private) Stores the progress bar value for the horizontal lightning step chart and newport step chart.
isVertical track (private) Identifies if the horizontal or vertical step chart is to be displayed. Only applicable for
Lightning.
get/set props api (public) Reactive public property. It is used to apply specific properties to the step chart that is
passed from the Omniscript Header component.
currentIndex track (private) Stores the value of the current index.
get/set jsonDef api (public) Reactive private property that gets and sets the omniscript json definition.
get/set jsonData api (public) Reactive private property that updates index when the data json is updated.
lastStepIndex track (private) Stores the value of the last step index.
Methods
The following are a list of methods that are declared inside of the Omniscript Step Chart.

connectedCallback() private Void Overwrites the native LWC connectedCallback.
applyPlacement() private Void Applies the placement (positioning) of the step chart. Only
applicable for Lightning.
renderedCallback() private Void Overwrite of native LWC renderedCallback.
render() private Template Overwrite of the native LWC render. Returns different templates
depending on layout.
calculateStepData(index) private Object Calculates the relevant step data for the step chart.
handleJsonData(index, jsonData) private Void Handles certain properties of the step chart that are reliant on the
data JSON.
calculateProgressBar(index) private Void Calculates the progress bar value and sets the styling for the
progress bar.
HTML Markup
The Omniscript Step Chart templates support both lightning and newport themes. Lightning has a horizontal
step chart (position = top) in addition to left and right positioned vertical step charts.

company 843
OmniStudio
Usage
Recommended usage of the OmniScript Step Chart is through component extension. Extend the
omniscriptStepChart. OmniScript Step Chart also utilizes a child component called
omniscriptStepChartItems. The Step Chart Items component will also need to be called inside the
extended omniscriptStepChart component. If additional modification are needed to the Step Chart Items, it
is recommended to extend the Step Chart Items component in order to leverage pre-existing functionality.
<c-omniscript-step-chart json-def={jsonDef}
json-data={jsonDef.response}
if:false={jsonDef.propSetMap.hideStepChart}
data-omni-key='omniscriptStepChart'
props={stepChartProps}
layout={layout}>
</c-omniscript-step-chart>
Attributes
jsonDef --- JSON definition of the OmniScript
props --- Reactive public property. It is used to apply specific properties to the step chart that is passed
from the Omniscript Header component. Refer to Properties section for additional information.
Example ---
{
"layout": "",
"position": "",
}
LWC component.
Properties

Lightning.

company 844
OmniStudio

currentIndex track (private) Stores the value of the current index.
get/set jsonDef private Reactive private property that gets and sets the omniscript json definition.
get/set jsonData private Reactive private property that updates index when the data json is updated.
lastStepIndex track (private) Stores the value of the last step index.
Methods
The following are a list of methods that are declared inside of the Omniscript Step Chart.

Value
calculateLastStepIndex private Void Calculates the last step index for the vertical step chart to ensure
that css applied psuedo-classes for the progress bar are synced.
connectedCallback() private Void Overwrites the native LWC connectedCallback.
applyPlacement() private Void Applies the placement (positioning) of the step chart. Only
applicable for Lightning.
evaluateLayout() private Void Evaluates the step chart layout to determine if progress bar
calculation is required and calculates progress bar for the
horizontal step chart position.
renderedCallback() private Void Overwrite of native LWC renderedCallback.
render() private Template Overwrite of the native LWC render. Returns different templates
depending on layout.
calculateStepData(index) private Void Calculates the relevant step data for the step chart.
handleJsonData(index, private Void Handles certain properties of the step chart that are reliant on the
jsonData) data JSON.
calculateProgressBar(index) private Void Calculates the progress bar value and sets the styling for the
progress bar.
HTML Markup
Usage
omniscriptStepChart. OmniScript Step Chart also utilizes a child component called
omniscriptStepChartItems. The Step Chart Items component will also need to be called inside the
extended omniscriptStepChart component. If additional modification are needed to the Step Chart Items, it
is recommended to extend the Step Chart Items component in order to leverage pre-existing functionality.

company 845
OmniStudio
layout={layout}>
Attributes
Example ---
{
"layout": "",
"position": "",
}
LWC component.
Properties

stepsArr track (private) Stores step JSON definitions that is utilized by the step chart as an array.
Lightning.
progressBarClass track (private) Sets class specific for the horizontal lightning or newport step chart for displaying the
progress bar.
get/set jsonDef private Reactive private property that gets and sets the omniscript json definition.
set jsonData private Reactive private property that updates index when the data json is updated.
Methods
The following are a list of methods that are declared inside of the Omniscript Step Chart. The Omniscript
Step Chart is inherited from OmniScript Base Element. Reference the Omniscript Base Element README
for additional information regarding the inherited class.

company 846
OmniStudio

Value
updateIndex(nextIndex, currentIndex) api (public) void Updates the step chart index.
connectedCallback() private void Overwrites the native LWC connectedCallback. Initialize
the Omniscript component.
applyPlacement() private void Applies the placement (positioning) of the step chart.
Only applicable for Lightning.
evaluateLayout() private void Evaluates the step chart layout to determine if progress
bar calculation is required and calculates progress bar for
the horizontal step chart position.
renderedCallback() private void Overwrite of native LWC renderedCallback. Evaluates the
layout.
render() private template Overwrite of the native LWC render. Returns different
templates depending on layout.
calculateStepData(jsonDefs, private void Calculates the step data and updates the stepsArr as
stepsArr) needed.
calculateStepIndex(nextIndex, private Object Calculates the current and previous step indexes.
currentIndex)
handleStepClick(evt) private void Handles events when steps are selected on the step
chart.
handleJsonData(index, jsonData) private void Handles certain properties of the step chart that are
reliant on the data JSON.
calculateProgressBar(stepIndex) private void Calculates the progress bar value and sets the styling for
the progress bar.
HTML Markup
Usage
omniscriptStepChart. Methods listed above in the Methods section can be overwritten. This
component extends from the Omniscript Base Element component. Please refer to the Omniscript Base
Element README for additional information regarding inherited methods.
class="slds-col slds-m-top_x-small slds-p-left_large
slds-size_1-of-1"
layout={layout}>
Attributes

company 847
OmniStudio
Example ---
{
"layout": "",
"position": "",
}
OmniScript Step Chart Items Readme

This page contains an OmniScript Step Chart Items LWC ReadMe for each Vlocity release.

ns/omniscriptStepChartItems ⇐ LightningElement
Extends: LightningElement
• https://bitbucket.org/vloc/via_oui/src/oui_sprint_ins108/lwcprojects/player/omniscriptStepChartItems/
#markdown-header-nsomniscriptstepchartitems-lightningelement ⇐ LightningElement
#markdown-header-omniscriptstepchartitemsjsondef-object : Object
#markdown-header-omniscriptstepchartitemsjsondata-object : Object
• .scriptHeaderDef : Object
#markdown-header-omniscriptstepchartitemsisvertical-boolean : Boolean
#markdown-header-omniscriptstepchartitemscurrentindex-integer : Integer
#markdown-header-omniscriptstepchartitemstheme-string : String
#markdown-header-omniscriptstepchartitemslastexecutedstepindex-integer : Integer
• .stepChartIconUrl : String
#markdown-header-omniscriptstepchartitemslaststepindex-integer : Integer

company 848
OmniStudio
#markdown-header-omniscriptstepchartitemscompleted-boolean : Boolean
#markdown-header-omniscriptstepchartitemsinprogress-boolean : Boolean
#markdown-header-omniscriptstepchartitemspristine-boolean : Boolean
#markdown-header-omniscriptstepchartitemsnonpristine-boolean : Boolean
#markdown-header-omniscriptstepchartitemssteplabel-string : String
#markdown-header-omniscriptstepchartitemsrender-void ⇒ Void
#markdown-header-omniscriptstepchartitemshandlestepclickevent-void ⇒ Void
#markdown-header-omniscriptstepchartitemsapplylightningstyles-void ⇒ Void
#markdown-header-omniscriptstepchartitemsrenderedcallback-void ⇒ Void
omniscriptStepChartItems.jsonDef : Object
Gets and sets Omniscript JSON definition.

omniscriptStepChartItems/#markdown-header-nsomniscriptstepchartitems-lightningelementScope: public
(api)
omniscriptStepChartItems.jsonData : Object
Gets and sets Omniscript data JSON.

(api)
omniscriptStepChartItems.scriptHeaderDef : Object
Script header definitions and globally shared variables.
Kind: instance property of ns/omniscriptStepChartItemsScope: public (api)
omniscriptStepChartItems.isVertical : Boolean
Identifies step chart is horizontal or vertical.

(api)
omniscriptStepChartItems.currentIndex : Integer
Stores current index

company 849
OmniStudio

(api)
omniscriptStepChartItems.theme : String
Stores theme layout. Default = 'slds'.

(api)
omniscriptStepChartItems.lastExecutedStepIndex : Integer
Stores last executed step index.

(api)
omniscriptStepChartItems.stepChartIconUrl : String
The URL for the icon used on the stepchart items
Kind: instance property of ns/omniscriptStepChartItemsScope: private
omniscriptStepChartItems.lastStepIndex : Integer
Stores last step index.

(api)
omniscriptStepChartItems.completed : Boolean
Flag for Completed indicator.

omniscriptStepChartItems/#markdown-header-nsomniscriptstepchartitems-lightningelementScope: private
omniscriptStepChartItems.inProgress : Boolean
Flag for In Progress indicator.

omniscriptStepChartItems.pristine : Boolean
Flag for Pristine indicator.


company 850
OmniStudio
omniscriptStepChartItems.nonpristine : Boolean
Flag for Nonpristine indicator.

omniscriptStepChartItems.stepLabel : String
Step label.

omniscriptStepChartItems.render() ⇒ Void

omniscriptStepChartItems.handleStepClick(event) ⇒ Void
Event handler when steps are selected on the step chart.

Param Type
event Event
omniscriptStepChartItems.applyLightningStyles() ⇒ Void
Applies progress indicator styles to the parent template for lightning when stepchart is in Vertical mode.

omniscriptStepChartItems.renderedCallback() ⇒ Void
Overwrites native renderedCallback.

ns/omniscriptStepChartItems ⇐ LightningElement
Extends: LightningElement
• ns/omniscriptStepChartItems ⇐ LightningElement
• .jsonDef : Object

company 851
OmniStudio
• .jsonData : Object
• .isVertical : Boolean
• .currentIndex : Integer
• .theme : String
• .lastExecutedStepIndex : Integer
• .lastStepIndex : Integer
• .completed : Boolean
• .inProgress : Boolean
• .pristine : Boolean
• .nonpristine : Boolean
• .stepLabel : String
• .render() ⇒ Void
• .handleStepClick(event) ⇒ Void
• .applyLightningStyles() ⇒ Void
• .renderedCallback() ⇒ Void
omniscriptStepChartItems.jsonDef : Object
Gets and sets Omniscript JSON definition.
Kind: instance property of ns/omniscriptStepChartItems
Scope: public (api)
omniscriptStepChartItems.jsonData : Object
Gets and sets Omniscript data JSON.
Scope: public (api)
omniscriptStepChartItems.isVertical : Boolean
Identifies step chart is horizontal or vertical.
Scope: public (api)
omniscriptStepChartItems.currentIndex : Integer
Stores current index
Scope: public (api)
omniscriptStepChartItems.theme : String
Stores theme layout. Default = 'slds'.

company 852
OmniStudio
Scope: public (api)
omniscriptStepChartItems.lastExecutedStepIndex : Integer
Stores last executed step index.
Scope: public (api)
omniscriptStepChartItems.lastStepIndex : Integer
Stores last step index.
Scope: public (api)
omniscriptStepChartItems.completed : Boolean
Flag for Completed indicator.
Scope: private
omniscriptStepChartItems.inProgress : Boolean
Flag for In Progress indicator.
Scope: private
omniscriptStepChartItems.pristine : Boolean
Flag for Pristine indicator.
Scope: private
omniscriptStepChartItems.nonpristine : Boolean
Flag for Nonpristine indicator.
Scope: private
omniscriptStepChartItems.stepLabel : String
Step label.

company 853
OmniStudio
Scope: private
omniscriptStepChartItems.render() ⇒ Void
Kind: instance method of ns/omniscriptStepChartItems
Scope: private
omniscriptStepChartItems.handleStepClick(event) ⇒ Void
Event handler when steps are selected on the step chart.
Scope: private
Param Type
event Event
omniscriptStepChartItems.applyLightningStyles() ⇒ Void
Applies progress indicator styles to the parent template for lightning.
Scope: private
omniscriptStepChartItems.renderedCallback() ⇒ Void
Overwrites native renderedCallback.
Scope: private
Omniscript Telephone (omniscriptTelephone) ReadMe

This page contains an OmniScript Telephone LWC ReadMe for each Vlocity release.


This component is used to render a Telephone Element, OmniscriptTelephone is extended from
OmniscriptText.

company 854
OmniStudio
HTML Markup
layout.
Usage
<c-omniscript-telephone
json-def={jsonDef}
layout={layout}
resume={resume}
</c-omniscript-telephone>
Attributes
Example ---
{
"type": "Telephone",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "Telephone1",
"disOnTplt": false,
"hide": false,
"debounceValue": 0,
"show": null,
"maxLength": 255,
"minLength": 0,
"ptrnErrText": "",
"pattern": "",
"mask": "(999) 999-9999",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,

company 855
OmniStudio
"inputWidth": 12,
"controlWidth": 12
},
"name": "Telephone1",
"level": 1,
"JSONPath": "Step1:Telephone1",
"indexInParent": 0,
"index": 0,
"children": [],
"bTelephone": true,
"lwcId": "lwc000",
"bInit": true
}
Example ---
{
"labelMap": { "Telephone1": "Step1:Telephone1", "Step1": "Step1" },
"propSetMap": {
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,

company 856
OmniStudio
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
{
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",
},

company 857
OmniStudio
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}
]
},
"acUiElements": { "Step1": "", "Telephone1": "" }
}
seedJson --- designer seed JSON + telephone parameters + cached API responses
OmniscriptText.
HTML Markup
layout.
Usage
json-def={jsonDef}
layout={layout}
resume={resume}

company 858
OmniStudio
Attributes
Example ---
{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"hide": false,
"debounceValue": 0,
"show": null,
"maxLength": 255,
"minLength": 0,
"ptrnErrText": "",
"pattern": "",
"mask": "(999) 999-9999",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bTelephone": true,
"lwcId": "lwc000",
"bInit": true
}

company 859
OmniStudio
Example ---
{
"propSetMap": {
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},

company 860
OmniStudio
{
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}
]

company 861
OmniStudio
},
}
OmniscriptText.
HTML Markup
layout.
Usage
json-def={jsonDef}
layout={layout}
resume={resume}
Attributes
Example ---
{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"hide": false,
"debounceValue": 0,

company 862
OmniStudio
"show": null,
"maxLength": 255,
"minLength": 0,
"ptrnErrText": "",
"pattern": "",
"mask": "(999) 999-9999",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bTelephone": true,
"lwcId": "lwc000",
"bInit": true
}
Example ---
{
"propSetMap": {
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,

company 863
OmniStudio
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
{
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {

company 864
OmniStudio
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}
]
},
}
Omniscript Text (omniscriptText) ReadMe

This page contains an OmniScript Text LWC ReadMe for each Vlocity release.

company 865
OmniStudio


This component is used to render a Text Element, OmniscriptText is extended from
Text element support masking, Supported masking formats are "(999) 999-9999" and "(AAA) AAA-AAAA".
"9" stands Number and "A" stands for Character.
Text element also support regex pattern.

_placeholder private Use to show placeholder in Text element
_inputType private Use to set type of the input
_commitOnChange private
Table 45. Methods

initCompVariables() private void Overwrites inherited initCompVariables
getImaskTextAttributes() private Object This function will determine if we need to set masking on element that
comes from Omniscript script
render() private template Overwrites the native LWC render
HTML Markup
layout.
Usage
<c-omniscript-text
json-def={jsonDef}
layout={layout}
resume={resume}
</c-omniscript-text>

company 866
OmniStudio
Attributes
Example ---
{
"type": "Text",
"rootIndex": 0,
"response": "Hello There!",
"propSetMap": {
"label": "Text1",
"disOnTplt": false,
"hide": false,
"debounceValue": 0,
"show": null,
"maxLength": 255,
"minLength": 0,
"ptrnErrText": "",
"pattern": "",
"mask": "",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Text1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bText": true,
"lwcId": "lwc000",
"bInit": true
}

company 867
OmniStudio
Example ---
{
"labelMap": { "Text1": "Step1:Text1", "Step1": "Step1" },
"propSetMap": {
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},

company 868
OmniStudio
{
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}

company 869
OmniStudio
]
},
"acUiElements": { "Step1": "", "Text1": "" }
}
Text element also supports regex patterns.
Properties
_placeholder private Use to show placeholder in Text element
_inputType private Use to set type of the input
Methods
getImaskTextAttributes() private Object This function will determine if we need to set masking on element that
comes from Omniscript script
HTML Markup
layout.
Usage
<c-omniscript-text
json-def={jsonDef}

company 870
OmniStudio
layout={layout}
resume={resume}
Attributes
Example ---
{
"type": "Text",
"rootIndex": 0,
"propSetMap": {
"label": "Text1",
"disOnTplt": false,
"hide": false,
"debounceValue": 0,
"show": null,
"maxLength": 255,
"minLength": 0,
"ptrnErrText": "",
"pattern": "",
"mask": "",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Text1",
"level": 1,
"indexInParent": 0,
"index": 0,

company 871
OmniStudio
"children": [],
"bText": true,
"lwcId": "lwc000",
"bInit": true
}
Example ---
{
"propSetMap": {
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},

company 872
OmniStudio
{
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",
},
"remoteOptions": {
},

company 873
OmniStudio
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}
]
},
}
Text element also supports regex patterns.
Methods

getImaskTextAttributes() private Object Set masking attributes
render() private template Overwrites inherited LWC render.
HTML Markup
layout.
Usage
<c-omniscript-text
json-def={jsonDef}
layout={layout}
resume={resume}

company 874
OmniStudio
Attributes
Example ---
{
"type": "Text",
"rootIndex": 0,
"propSetMap": {
"label": "Text1",
"disOnTplt": false,
"hide": false,
"debounceValue": 0,
"show": null,
"maxLength": 255,
"minLength": 0,
"ptrnErrText": "",
"pattern": "",
"mask": "",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Text1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],

company 875
OmniStudio
"bText": true,
"lwcId": "lwc000",
"bInit": true
}
Example ---
{
"propSetMap": {
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},

company 876
OmniStudio
{
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",

company 877
OmniStudio
"remoteClass": "",
"label": "",
"render": false
}
]
},
}
Omniscript Textarea (omniscriptTextarea) ReadMe

This page contains an OmniScript Text Area LWC ReadMe for each Vlocity release.


This component is used to render a Textarea Element, OmniscriptTextarea is extended from

Table 47. Methods

HTML Markup
layout.

company 878
OmniStudio
Usage
<c-omniscript-textarea
json-def={jsonDef}
layout={layout}
resume={resume}
</c-omniscript-textarea>
Attributes
jsonDef-- json definition of the OmniScript Element
Example ---
{
"type": "Text Area",
"rootIndex": 0,
"propSetMap": {
"label": "TextArea1",
"disOnTplt": false,
"hide": false,
"debounceValue": 0,
"show": null,
"maxLength": 255,
"minLength": 0,
"ptrnErrText": "",
"pattern": "",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "TextArea1",

company 879
OmniStudio
"level": 1,
"JSONPath": "Step1:TextArea1",
"indexInParent": 0,
"index": 0,
"children": [],
"bTextarea": true,
"lwcId": "lwc000",
"bInit": true
}
Example ---
{
"labelMap": { "TextArea1": "Step1:TextArea1", "Step1": "Step1" },
"propSetMap": {
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},

company 880
OmniStudio
{
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",
},
"remoteOptions": {

company 881
OmniStudio
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}
]
},
"acUiElements": { "Step1": "", "TextArea1": "" }
}
seedJson --- designer seed JSON + text area parameters + cached API responses
Properties

Methods

HTML Markup
layout.
Usage
json-def={jsonDef}

company 882
OmniStudio
layout={layout}
resume={resume}
Attributes
Example ---
{
"rootIndex": 0,
"propSetMap": {
"disOnTplt": false,
"hide": false,
"debounceValue": 0,
"show": null,
"maxLength": 255,
"minLength": 0,
"ptrnErrText": "",
"pattern": "",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],

company 883
OmniStudio
"bTextarea": true,
"lwcId": "lwc000",
"bInit": true
}
Example ---
{
"propSetMap": {
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},

company 884
OmniStudio
{
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",

company 885
OmniStudio
"remoteClass": "",
"label": "",
"render": false
}
]
},
}
Methods
HTML Markup
layout.
Usage
json-def={jsonDef}
layout={layout}
resume={resume}
Attributes
Example ---
{

company 886
OmniStudio

"rootIndex": 0,
"propSetMap": {
"disOnTplt": false,
"hide": false,
"debounceValue": 0,
"show": null,
"maxLength": 255,
"minLength": 0,
"ptrnErrText": "",
"pattern": "",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bTextarea": true,
"lwcId": "lwc000",
"bInit": true
}
Example ---
{

company 887
OmniStudio
"propSetMap": {
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
{
"modalSize": "lg",
},

company 888
OmniStudio
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
},
{
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}
]
},
}

company 889
OmniStudio
Omniscript Text Block (omniscriptTextBlock) ReadMe

This page contains an OmniScript Text Block LWC ReadMe for each Vlocity release.


This component is used to render a Text Block element. Text Block supports Merge fields (e.g. %Text1%).
OmniscriptTextBlock is extended from omniscriptBaseElement.

mergeVal track (private) Reactive private property. Realtime refresh of text displayed for a Text Block element.
_themeClass private Use to set the class name
_tbText private Get the value from the omniscript
Table 49. Methods

stateRefresh() private void Overwrite, watch to refresh the text displayed for a Text
Block element (with merge fields)
applyCallResp(json, bApi = false, api (public) void Overwrite, Text Block elements do not accept API
bValidation = false) responses
HTML Markup
layout.
Usage
<c-omniscript-text-block
json-def={jsonDef}
layout={layout}

company 890
OmniStudio
resume={resume}
</c-omniscript-text-block>
Attributes
Example ---
{
"type": "Text Block",
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"label": "TextBlock1",
"textKey": "",
"dataJSON": false,
"show": null,
"text": "",
"controlWidth": 12
},
"name": "TextBlock1",
"level": 1,
"JSONPath": "Step1:TextBlock1",
"indexInParent": 0,
"index": 0,
"children": [],
"bTextBlock": true,
"lwcId": "lwc000",
}
Example ---
{
"labelMap": {
"TextBlock1": "Step1:TextBlock1",
"Step1": "Step1"
},

company 891
OmniStudio
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",

company 892
OmniStudio
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"TextBlock1": ""
}
}

company 893
OmniStudio
Properties

_themeClass private Use to set the class name
_tbText private Get the value from the omniscript
Methods

HTML Markup
layout.
Usage
json-def={jsonDef}
layout={layout}
resume={resume}
Attributes
Example ---

company 894
OmniStudio

"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"textKey": "",
"dataJSON": false,
"show": null,
"text": "",
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bTextBlock": true,
"lwcId": "lwc000",
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,

company 895
OmniStudio
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {

company 896
OmniStudio
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"TextBlock1": ""
}
}

company 897
OmniStudio
Properties

Methods

HTML Markup
layout.
Usage
json-def={jsonDef}
layout={layout}
resume={resume}
Attributes
Example ---
{
"rootIndex": 0,
"response": null,
"propSetMap": {
"disOnTplt": false,
"textKey": "",
"dataJSON": false,
"show": null,

company 898
OmniStudio
"text": "",
"controlWidth": 12
},
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bTextBlock": true,
"lwcId": "lwc000",
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,

company 899
OmniStudio
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {

company 900
OmniStudio
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"TextBlock1": ""
}
}
OmniScript Time (omniscriptTime) ReadMe

This page contains an OmniScript Time LWC ReadMe for each Vlocity release.


This component is used to render a Time element. It extends from OmniscriptAtomicElement.

company 901
OmniStudio
Table 50. Methods

validateData(data) private Object Evaluates if time data is valid.
HTML Markup
layout.
Usage
<c-omniscript-time
json-def={jsonDef}
layout={layout}
resume={resume}
</c-omniscript-time>
Attributes
Example ---
{
"type": "Time",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "Time1",
"maxTime": "",
"minTime": "",
"modelTimeFormat": "HH:mm:ss.sss'Z'",
"timeType": "string",
"disOnTplt": false,
"hide": false,

company 902
OmniStudio
"show": null,
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Time1",
"level": 1,
"JSONPath": "Step1:Time1",
"indexInParent": 0,
"index": 0,
"children": [],
"bTime": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Time1": "Step1:Time1",
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},

company 903
OmniStudio
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",

company 904
OmniStudio
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"Time1": ""
}
}

company 905
OmniStudio
Methods

HTML Markup
layout.
Usage
<c-omniscript-time
json-def={jsonDef}
layout={layout}
resume={resume}
Attributes
Example ---
{
"type": "Time",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "Time1",
"maxTime": "",
"minTime": "",
"disOnTplt": false,
"hide": false,

company 906
OmniStudio
"show": null,
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Time1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bTime": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},

company 907
OmniStudio
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",

company 908
OmniStudio
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"Time1": ""
}
}

company 909
OmniStudio
Methods

connectedCallback.
HTML Markup
layout.
Usage
<c-omniscript-time
json-def={jsonDef}
layout={layout}
resume={resume}
Attributes
Example ---
{
"type": "Time",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "Time1",
"maxTime": "",
"minTime": "",
"disOnTplt": false,
"hide": false,

company 910
OmniStudio
"show": null,
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "Time1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bTime": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,

company 911
OmniStudio
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {

company 912
OmniStudio
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"Time1": ""
}
}
OmniScript Tracking Service Utils ReadMe

This page contains an OmniScript Tracking Service Utils ReadMe for each Vlocity release.

company 913
OmniStudio

Vlocity Insurance and Health Summer '20
trackedCommonTypeToJsonDefMap ⇒ Object
JSON Definition mergefield mappings in accordance with the element's type that are common amongst all
OmniScript elements.
trackedTypeToJsonDefMap ⇒ Object
JSON Definition mergefield mappings in accordance with the element's type. Each map should start from
the trackedCommonTypeToJsonDefMap unless there is a specific reason why the common mergefield map
values are not needed.
Kind: global constantReturns: Object - Returns an object with a nested value that contains the mergefield
syntax
trackedScriptHeaderMap : Object
Script Header mergefield mappings.
trackedDataJsonMap : Object
Data JSON mergefield mappings.
trackedStaticMap : Object
Static Property mergefield mappings.
getCommonTrackingData(comp, element, scriptHeaderDef, jsonData, additionalData) ⇒

Object
Gets common tracking data for the Messaging Framework and Time Tracking Services.
Param Type
comp *
element Object
scriptHeaderDef Object
jsonData Object

company 914
OmniStudio
Param Type
additionalData Object
getCommonTrackingData~targetJsonDef
This method is used for all events whether the event is fired from the OmniScript Header or from an
OmniScript element. - When fired from an OmniScript element, the element argument will be populated and
will be used as the targetJsonDef. - When fired from the OmniScript Header, the element will be null/
undefined and the targetJsonDef will be the component's jsonDef (root jsonDef).
Kind: inner constant of getCommonTrackingData
evaluateMessaging(propSetMap, [oaEnabled]) ⇒ Boolean

Evaluates if messaging is permitted.
Param Type
propSetMap Object
[oaEnabled] Object
OmniScript Type Ahead Action ReadMe

This page contains an OmniScript Type Ahead Action LWC ReadMe for each Vlocity release.

ns/omniscriptTypeahead ⇐ OmniscriptAtomicElement
A typeahead allows a user to select an option from a list, but that list can be affected by what the user types
into the input of the Combobox. This can be useful when the list of options is very large, as user input can
start to display options that only match the text they have entered.
• ns/omniscriptTypeahead ⇐ OmniscriptAtomicElement
• .options : Array
• ._isEditMode : Boolean
• ._disableFilter : Boolean
• ._useRemoteSource : Boolean
• ._actionDef : object

company 915
OmniStudio
• .errorMessage : string
• .typeaheadFn : function
• .handleBlur(evt) ⇒ void
• .handleClear() ⇒ void
• .handleLookup() ⇒ void
• .getOptionsDataJson() ⇒ Promise.<any>
• .getOptions(action) ⇒ Promise.<any>
• .hitEndPoint(action) ⇒ Promise.<any>
• .dataProcessorHook(data) ⇒ Promise.<any>
• .handleError([reason]) ⇒ void
• .handleSelect(evt) ⇒ void
• .toggleEditMode([isEditMode]) ⇒ void
omniscriptTypeahead.options : Array
Options passed to base element.
Kind: instance property of ns/omniscriptTypeaheadScope: track (private)
omniscriptTypeahead._isEditMode : Boolean
Controls weather the elements following the typeahead will be visible. Visibility is controlled by css classes
found in: OmniLwcUtils.scss.
Kind: instance property of ns/omniscriptTypeaheadScope: privateSee: {@link ./sass/OmniLwcUtils.scss}
omniscriptTypeahead._disableFilter : Boolean
When true the options will not be filtered by the underlying typeahead component. _disableFilter is
always true when lookup mode is enabled, and for places search.
Kind: instance property of ns/omniscriptTypeaheadScope: private
omniscriptTypeahead._useRemoteSource : Boolean
When true, a progress bar will be displayed while fetching options.
omniscriptTypeahead._actionDef : object
Local store of the remote source's JSON definition.

company 916
OmniStudio
omniscriptTypeahead.errorMessage : string
Set when an error message is returned from a remote response. Displayed on the template. Not a
validation error.
omniscriptTypeahead.typeaheadFn : function
Throttled handler to update jsonData, which source action will depend on. Bound in connected callback.
Kind: instance property of ns/omniscriptTypeaheadScope: private.
omniscriptTypeahead.handleBlur(evt) ⇒ void
When the input is blurred, Validation is run and jsonData is updated.
Kind: instance method of ns/omniscriptTypeaheadScope: private
Param Type
evt FocusEvent
omniscriptTypeahead.handleClear() ⇒ void
When the input is cleared, validation must be run.
omniscriptTypeahead.handleTypeahead(evt) ⇒ void
Creates a throttled callback if typeaheadFn is not defined, otherwise calls typeaheadFn. Bound to keyup
event in the this#initCompVariables lifecycle hook.
Kind: instance method of ns/omniscriptTypeahead
Param Type
evt KeyboardEvent
omniscriptTypeahead.handleLookup() ⇒ void
Bound to focus event in the this#initCompVariables lifecycle hook.
omniscriptTypeahead.getOptionsDataJson() ⇒ Promise.<any>
Defines the promise chain used to get/filter/set typeahead options when useDataJson is true.
omniscriptTypeahead.getOptions(action) ⇒ Promise.<any>
Defines the promise chain used to get/filter/set typeahead options when useDataJson is false.

company 917
OmniStudio

action * Action definition retrieved from jsonDef.
omniscriptTypeahead.hitEndPoint(action) ⇒ Promise.<any>
Link in the promise chain responsible for getting data from remote source.

omniscriptTypeahead.sendDataToDebugConsole(params, resp, label) ⇒ void

Sends data to the debug console event handler.
Param Type
params object
resp object
label string
omniscriptTypeahead.handleResponse(data) ⇒ Promise.<any>
Link in the getOptions promise chain responsible for ensuring proper format of the remote response.

data * Result from remote source.
omniscriptTypeahead.dataProcessorHook(data) ⇒ Promise.<any>
A hook in the getOptions promise chain to allow components that inherit from omniscriptTypeahead to
define a custom filter.

data Array.<Any> A list of items returned from handleResponse
Example
dataProcessor(data) {
// Matches items by name (case insensitive). **Default behavior**
return data.filter(item =>
item.name.toLowerCase().includes(this.elementValue.toLowerCase()));
// Matches items by name (case sensitive).

company 918
OmniStudio
return data.filter(item => item.name.includes(this.elementValue));

// Items names must start with input value.
return data.filter(item => new RegExp(`^${this.elementValue}`,
'i').test(item.name));
}
omniscriptTypeahead.setOptions(data) ⇒ void
Final link in the getOptions/getOptionsDataJson promise chain. Responsible for setting the options array,
and ensuring that the options items are in a format that is digestible by the base c-typeahead component.

data * Array of items returned from dataProcessorHook.
omniscriptTypeahead.handleError([reason]) ⇒ void
Error handler for the getOptions/getOptionsDataJson promise chain.

[reason] string ⎮ Object Message or Error object containing details of the error.
omniscriptTypeahead.handleSelect(evt) ⇒ void

evt CustomEvent Called when a selection is made from the base typeahead component. Bound in template.
omniscriptTypeahead.toggleEditMode([isEditMode]) ⇒ void
If a boolean is specifically sent, that value will be set. Otherwise _editMode will be toggled.

[isEditMode] * If passed, _editMode will set to passed value.
A typeahead allows a user to select an option from a list, but that list can be affected by what the user types
into the input of the Combobox. This can be useful when the list of options is very large, as user input can
start to display options that only match the text they have entered.

company 919
OmniStudio
• .getOptionsDataJson() ⇒ Promise.<any>
• .getOptions(action) ⇒ Promise.<any>
• .hitEndPoint(action) ⇒ Promise.<any>
• .dataProcessorHook(data) ⇒ Promise.<any>
omniscriptTypeahead.options : Array
Options passed to base element.
omniscriptTypeahead._isEditMode : Boolean
Controls weather the elements following the typeahead will be visible. Visibility is controlled by css classes
found in: OmniLwcUtils.scss.
Kind: instance property of ns/omniscriptTypeaheadScope: privateSee: {@link ./sass/OmniLwcUtils.scss}
omniscriptTypeahead._disableFilter : Boolean
When true the options will not be filtered by the underlying typeahead component. _disableFilter is
omniscriptTypeahead._useRemoteSource : Boolean
When true, a progress bar will be displayed while fetching options.
omniscriptTypeahead._actionDef : object
Local store of the remote source's JSON definition.

company 920
OmniStudio
omniscriptTypeahead.errorMessage : string
Set when an error message is returned from a remote response. Displayed on the template. Not a
validation error.
omniscriptTypeahead.typeaheadFn : function
Throttled handler to update jsonData, which source action will depend on. Bound in connected callback.
Kind: instance property of ns/omniscriptTypeaheadScope: private.
omniscriptTypeahead.handleBlur(evt) ⇒ void
Param Type
evt FocusEvent
omniscriptTypeahead.handleTypeahead(evt) ⇒ void
Param Type
evt KeyboardEvent
omniscriptTypeahead.handleLookup() ⇒ void
omniscriptTypeahead.getOptionsDataJson() ⇒ Promise.<any>
omniscriptTypeahead.getOptions(action) ⇒ Promise.<any>

company 921
OmniStudio

omniscriptTypeahead.hitEndPoint(action) ⇒ Promise.<any>

omniscriptTypeahead.sendDataToDebugConsole(params, resp, label) ⇒ void

Param Type
params object
resp object
label string
omniscriptTypeahead.handleResponse(data) ⇒ Promise.<any>

omniscriptTypeahead.dataProcessorHook(data) ⇒ Promise.<any>

data Array.<Any> A list of items returned from handleResponse
Example
dataProcessor(data) {
// Matches items by name (case insensitive). **Default behavior**
return data.filter(item =>
item.name.toLowerCase().includes(this.elementValue.toLowerCase()));
// Matches items by name (case sensitive).

company 922
OmniStudio
return data.filter(item => item.name.includes(this.elementValue));

// Items names must start with input value.
return data.filter(item => new RegExp(`^${this.elementValue}`,
'i').test(item.name));
}
omniscriptTypeahead.setOptions(data) ⇒ void

omniscriptTypeahead.handleError([reason]) ⇒ void

omniscriptTypeahead.handleSelect(evt) ⇒ void

omniscriptTypeahead.toggleEditMode([isEditMode]) ⇒ void


company 923
OmniStudio
• .getOptionsDataJson() ⇒ Promise.
• .getOptions(action) ⇒ Promise.
• .hitEndPoint(action) ⇒ Promise.
• .handleResponse(data) ⇒ Promise.
• .dataProcessorHook(data) ⇒ Promise.
ns/omniscriptTypeahead.options : Array
• Options passed to base element.
Kind: instance property of ns/omniscriptTypeahead
Scope: private
ns/omniscriptTypeahead._isEditMode : Boolean
• Controls weather the elements following the typeahead will be visible. Visibility is controlled by CSS
classes found in: OmniLwcUtils.scss.
Scope: private
ns/omniscriptTypeahead._disableFilter : Boolean
• When true the options will not be filtered by the underlying typeahead component._disableFilter is
Scope: private

company 924
OmniStudio
ns/omniscriptTypeahead._useRemoteSource : Boolean
• When true, a progress bar will be displayed while fetching options.
Scope: private
ns/omniscriptTypeahead._actionDef : object
• Local store of the remote source's JSON definition.
Scope: private
ns/omniscriptTypeahead.errorMessage : string
• Set when an error message is returned from a remote response.Displayed on the template. Not a
validation error.
ns/omniscriptTypeahead.typeaheadFn : function
• Throttled handler to update jsonData, which source action willdepend on. Bound in connected callback.
Scope: private.
ns/omniscriptTypeahead.handleBlur(evt) ⇒ void
Scope: private
Param Type
evt FocusEvent
ns/omniscriptTypeahead.handleTypeahead(evt) ⇒ void

company 925
OmniStudio
Param Type
evt KeyboardEvent
ns/omniscriptTypeahead.handleLookup() ⇒ void
Scope: private
ns/omniscriptTypeahead.getOptionsDataJson() ⇒ Promise.
Scope: private
ns/omniscriptTypeahead.getOptions(action) ⇒ Promise.
Scope: private

ns/omniscriptTypeahead.hitEndPoint(action) ⇒ Promise.
Scope: private

ns/omniscriptTypeahead.sendDataToDebugConsole(params, resp, label) ⇒ void

Scope: private
Param Type
params object

company 926
OmniStudio
Param Type
resp object
label string
ns/omniscriptTypeahead.handleResponse(data) ⇒ Promise.
Scope: private

ns/omniscriptTypeahead.dataProcessorHook(data) ⇒ Promise.
Scope: private

data Array. A list of items returned from handleResponse
Example js dataProcessor(data) { // Matches items by name (case insensitive).

**Default behavior** return data.filter(item =>
item.name.toLowerCase().includes(this.elementValue.toLowerCase())); // Matches
items by name (case sensitive). return data.filter(item =>
item.name.includes(this.elementValue)); // Items names must start with input
value. return data.filter(item => new RegExp(`^${this.elementValue}`,
'i').test(item.name)); }
ns/omniscriptTypeahead.setOptions(data) ⇒ void
Scope: private

ns/omniscriptTypeahead.handleError([reason]) ⇒ void

company 927
OmniStudio
Scope: private

ns/omniscriptTypeahead.handleSelect(evt) ⇒ void
Scope: private

ns/omniscriptTypeahead.toggleEditMode([isEditMode]) ⇒ void
Scope: private

OmniScript Type Ahead Block ReadMe

This page contains an OmniScript Type Ahead Block LWC ReadMe for each Vlocity release.

ns/omniscriptTypeaheadBlock ⇐ OmniscriptBlock
The typeahead block is a wrapper element which contains the typeahead element, and any other children
inputs.
Extends: OmniscriptBlock
• ns/omniscriptTypeaheadBlock ⇐ OmniscriptBlock
• ._typeaheadElement : LightningElement

company 928
OmniStudio
• .enterEditMode() ⇒ void
• .hideValidation(evt) ⇒ void
• .applyCtrlWidth() ⇒ void
• .reportValidity() ⇒ boolean
• .nullifyChildren(type) ⇒ void
omniscriptTypeaheadBlock._typeaheadElement : LightningElement
A cached reference to the underlying omniscriptTypeahead/omniscriptPlacesTypeahead.
Kind: instance property of ns/omniscriptTypeaheadBlockScope: private
omniscriptTypeaheadBlock.handleSelect(evt) ⇒ void
Event handler bound via template.
Kind: instance method of ns/omniscriptTypeaheadBlockScope: private

evt CustomEvent
evt.detail Object
evt.detail.item Object The object that was selected.
omniscriptTypeaheadBlock.enterEditMode() ⇒ void
Calls toggleEditMode(true), on the child omniscriptTypeahead/omnscriptPlacesTypeahead, and clears
block level validation messages.
omniscriptTypeaheadBlock.hideValidation(evt) ⇒ void
Hides block level validation messages.
Param Type
evt CustomEvent
omniscriptTypeaheadBlock.initCompVariables() ⇒ void
Override for the base lifecycle method initCompvariables. Binds event listeners for 'select' and
'hidevalidation' events.
omniscriptTypeaheadBlock.applyCtrlWidth() ⇒ void
Override for base implementation. Prevents display issues.

company 929
OmniStudio
omniscriptTypeaheadBlock.reportValidity() ⇒ boolean
Shows block level validation messaging when hidden child elements are invalid. Messaging is hidden when
the typeahead element itself or the typeahead is already in edit mode.
Kind: instance method of ns/omniscriptTypeaheadBlockScope: api (public)
omniscriptTypeaheadBlock.nullifyChildren(type) ⇒ void
Clears the values of any child inputs. Triggered from the OmniscriptTypeaheadBlock.handleSelect.
Param Type
type string
ns/omniscriptTypeaheadBlock ⇐ OmniscriptBlock
The typeahead block is a wrapper element that contains the typeahead element, and any other children
inputs.
Extends: OmniscriptBlock
• ns/omniscriptTypeaheadBlock ⇐ OmniscriptBlock
• ._errorMessage : string
• .showValidation : Boolean
• .applyCtrlWidth() ⇒ void
• .nullifyChildren(type) ⇒ void
ns/omniscriptTypeaheadBlock._errorMessage : string
• Custom label for group elements.
Kind: instance property of ns/omniscriptTypeaheadBlock
Scope: private
ns/omniscriptTypeaheadBlock.showValidation : Boolean
• Flag to show or hide _errorMessage. Updated in rendered callback.
Kind: instance property of ns/omniscriptTypeaheadBlock
Scope: private

company 930
OmniStudio
ns/omniscriptTypeaheadBlock.handleSelect(evt) ⇒ void
Event handler bound via template.
Kind: instance method of ns/omniscriptTypeaheadBlock
Scope: private

evt CustomEvent
evt.detail Object
evt.detail.item Object The object that was selected.
ns/omniscriptTypeaheadBlock.applyCtrlWidth() ⇒ void
Override for base implementation. Prevents display issues.
Scope: private
ns/omniscriptTypeaheadBlock.nullifyChildren(type) ⇒ void
Clears the values of any child inputs. Triggered from the OmniscriptTypeaheadBlock.handleSelect.
Scope: private
Param Type
type string
OmniScript Url (omniscriptUrl) ReadMe

This page contains an OmniScript URL LWC ReadMe for each Vlocity release.


This component is used to render a URL element, it extends from OmniscriptAtomicElement.
We support the following format of urls:http://www.xyz.comhttps://www.xyz.comwww.xyz.comtest.xyz.com

company 931
OmniStudio

Name Scope Description Description
_messageWhenPatternMismatch private void Use to set the custom error message
_commitOnChange private void
Table 52. Methods

HTML Markup
layout.
Usage
<c-omniscript-url
json-def={jsonDef}
layout={layout}
resume={resume}
</c-omniscript-url>
Attributes
Example ---
{
"type": "URL",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "URL1",
"disOnTplt": false,
"hide": false,
"debounceValue": 0,

company 932
OmniStudio
"show": null,
"ptrnErrText": "",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "URL1",
"level": 1,
"JSONPath": "Step1:URL1",
"indexInParent": 0,
"index": 0,
"children": [],
"bURL": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"URL1": "Step1:URL1",
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,

company 933
OmniStudio
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",

company 934
OmniStudio
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"URL1": ""
}
}
We support the following format of urls:

company 935
OmniStudio
• www.xyz.com
• test.xyz.com
Properties
Name Scope Description Description
_messageWhenPatternMismatch private void Use to set the custom error message
_commitOnChange private void
Methods
HTML Markup
layout.
Usage
<c-omniscript-url
json-def={jsonDef}
layout={layout}
resume={resume}
</c-omniscript-url>
Attributes
Example ---
{
"type": "URL",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "URL1",
"disOnTplt": false,

company 936
OmniStudio
"hide": false,
"debounceValue": 0,
"show": null,
"ptrnErrText": "",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "URL1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bURL": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {

company 937
OmniStudio
"custom": []
},
"rtpSeed": false,
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",

company 938
OmniStudio
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"URL1": ""
}
}

company 939
OmniStudio
We support the following format of URLs:http://www.xyz.comhttps://www.xyz.comwww.xyz.comtest.xyz.com
Methods

HTML Markup
layout.
Usage
<c-omniscript-url
json-def={jsonDef}
layout={layout}
resume={resume}
</c-omniscript-url>
Attributes
Example ---
{
"type": "URL",
"rootIndex": 0,
"response": null,
"propSetMap": {
"label": "URL1",
"disOnTplt": false,
"hide": false,
"debounceValue": 0,
"show": null,

company 940
OmniStudio
"ptrnErrText": "",
"helpText": "",
"help": false,
"readOnly": false,
"repeat": false,
"required": false,
"inputWidth": 12,
"controlWidth": 12
},
"name": "URL1",
"level": 1,
"indexInParent": 0,
"index": 0,
"children": [],
"bURL": true,
"lwcId": "lwc000"
}
Example ---
{
"labelMap": {
"Step1": "Step1"
},
"propSetMap": {
"errorMessage": {
"custom": []
},
"rtpSeed": false,

company 941
OmniStudio
"currencyCode": "",
"autoFocus": false,
"pubsub": false,
"message": {},
"ssm": false,
"wpm": false,
"lkObjName": null,
"bLK": false,
"seedDataJSON": {},
"modalSize": "lg",
},
"id": "vlcCart",
"sendJSONNode": "",
"sendJSONPath": "",
"remoteOptions": {

company 942
OmniStudio
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}, {
"modalSize": "lg",
},
"remoteOptions": {
},
"remoteMethod": "",
"remoteClass": "",
"label": "",
"render": false
}]
},
"acUiElements": {
"Step1": "",
"URL1": ""
}
}
OmniScript Validation (omniscriptValidation) ReadMe

This page contains an OmniScript Validation LWC ReadMe for each Vlocity release.

company 943
OmniStudio


This library component consists of two mixin classes that can be used to integrate any component into the
omniscript step validation framework. The first and most important is the HasValidation mixin class, the
second is the AggregatesValidation mixin class which can be used on any container element to
manipulate the results of the child inputs.
HasValidation
The HasValidation mixin class integrates an input element via an override to the extended elements
applyCallResp method. It's here that the child input's validation status is read via checkValidity, and
reportValidity methods of the constraints API.

childInput api (public) Returns the queried element targeted by _inputSelector. After the query is returned the
first time, the value is cached.
label api (public) getter that returns the value of the child input's label.
validationMessage api (public) getter that returns the value of the child input's validationMessage
validity api (public) returns the ValidityState object belonging to the child input.
tabIndex track (private) Set via setReadOnly to -1 when _readOnlyis true preventing child inputs from receiving
focus.
isValid private getter/setter to track the state of validation. When the input becomes invalid, the
VALIDATIONEVENTS.INVALID event is fired, and VALIDATIONEVENTS.VALID when
becoming valid.
Table 54. Methods

Value
applyCallResp(json, bApi = false, api (public) void Override for applyCallResp, adds check for UI validity.
checkValidity() api (public) Boolean Performs custom validation as well as native Constraint
Validation API calls, but doesn't trigger display of
validation messages.
reportValidity() api (public) Boolean Performs custom validation as well as native Constraint
Validation API calls, and triggers the display of validation
messages.
focus() api (public) void Calls focus on child input. [TODO] Determine if we can
leverage delegatesFocus.
setReadOnly(value) private Boolean Sets the readonly state of the input, since omniscript
inputs must still be valid when readonly, this functionality
is custom.
storing labels in memory and adds event listeners.

company 944
OmniStudio

Value
setChildInputValue(value) private void Sets child input value.
handleValueSetApi(jsonToApply, bApi, private void Handles allowing the input to handle data validation,
bValidation, preVal, postValA) filtering, and parsing before applying it to the data json.
Usage
When integrating a new input in to the OmniScript validation framework, the first step is to extend the
HasValidation mixin class.
A straightforward example omniscriptText:

Below is an example that shows how HasValidation was integrated with elements that derive from the
OmniscriptAtomicElement class.
First import and extend the HasValidation mixin.
omniscriptAtomicElement.js
import OmniscriptBaseElement from 'c/omniscriptBaseElement';

// Import the HasValidation mixin.
+import { HasValidation } from 'c/omniscriptValidation';
// Extend the mixin and the base class!

-export default class OmniscriptAtomicElement extends OmniscriptBaseElement {
+export default class OmniscriptAtomicElement extends
HasValidation(OmniscriptBaseElement) {
_maskProperties = {};
prepareIMaskProperties(mask) {
Then add the default selector attribute data-omni-input to the actual child input so that
HasValidation can reference it.
Remove the disabled attribute to allow the validation framework to take control of the read only state.
And pass tabIndex to the child input. This will prevent the input from gaining focus when the component is
in a read only state.
omniscriptText.html
<template>
<slot>
<c-masked-input type="text"
label={jsonDef.propSetMap.label}
onblur={handleBlur}
value={elementValue}

company 945
OmniStudio
required={jsonDef.propSetMap.required}
- disabled={jsonDef.propSetMap.readOnly}
maxlength={jsonDef.propSetMap.maxLength}
minlength={jsonDef.propSetMap.minLength}
pattern={_patternVal}
imask={imaskTextAttributes}
theme={_theme}
+ tab-index={tabIndex}
field-level-help={_handleHelpText}
placeholder={_placeholder}
+ data-omni-input>
</c-masked-input>
</slot>
</template>
And that's all that was required to integrate the omniscriptText component. As you can see, the actual
integration is very straightforward! Next let's take a look at slightly more complex example.
Another example, the multi-select.

Since the omniscriptMultiSelect already extends omniscriptAtomicElement all that had to be done was
update the template.
<template>
<slot>
<c-checkbox-image-group if:true={checkImageMode}
type="checkbox"
name={jsonDef.name}
is-image="true"
options={jsonDef.propSetMap.options}
enabled-caption={jsonDef.propSetMap.enableCaption}
control-width={jsonDef.propSetMap.optionWidth}
control-height={jsonDef.propSetMap.optionHeight}
image-count-in-
row={jsonDef.propSetMap.imageCountInRow}
onchange={handleChange}
disabled={jsonDef.propSetMap.readOnly}
theme={_theme}
+ data-omni-input>
<c-checkbox-group if:false={checkImageMode}
name={jsonDef.name}
options={checkedValue}

company 946
OmniStudio
theme={_theme}
+ data-omni-input>
</c-checkbox-group>
</slot>
</template>
An important part of integrating with the omniscript validation framework is ensuring that
the underlying input component exposes the checkValidity, reportValidity, and
setCustomValidity methods of the constraints validation API.
AggregatesValidation
The AggregatesValidation mixin class adds functionality to aggregate the validation status of all child
inputs that extend the HasValidation mixin, by listening to theVALIDATION_EVENTS.VALID, and
VALIDATION_EVENTS.INVALID events. A list of the current invalid children are kept track on fin
this.invalidElements.
Currently the the AggregatesValidation mixin is only implemented by OmniscriptHeader, but could be
implemented by any container element. A possible use could be something like an edit-block modal, where
inputs should be valid before closing.

invalidElements private A map of invalid elements with the key being the element's jsonPath. Each item in the map should
have access to the public members of the input. Notable entries include label, and
validationMessage.
errorsJson private Getter returning a stringified json of the invalid elements map. Not used in element, but can be used
for debugging.
Table 56. Methods

Value
markInputAsInvalid(evt) private void Event handler attached to VALIDATION_EVENTS.INVALID.
markInputAsValid(evt) private void Event handler attached to VALIDATION_EVENTS.VALID.
focusInvalidInput(index) private void Scrolls the invalid input at the specified index into view, and then set's
focus on it.
handleInvalid() private void A default method to be called to handle invalid state. Default functionality
simply calls focusInvalidInput(0)
checkValidity() private Boolean Returns false if invalidElements contains any elements.
reportValidity() private Boolean Calls reportValidity() on each element in the invalidElements
map.
connectedCallback() private void Overwrites native LWC connectedCallback. Adds event listeners that are
required for validation.

company 947
OmniStudio
HasValidation
Properties

tabIndex track (private) Set via setReadOnly to -1 when _readOnlyis true preventing child inputs from receiving
focus.
becoming valid.
Methods

Value
messages.
is custom.
getCustomLabel(key) private String Returns custom label in accordance with the key
argument.

company 948
OmniStudio

Value
Usage
When integrating a new input in to the OmniScript validation framework, the first step is to extend the

First import and extend the HasValidation mixin.


omniscriptText.html
<template>
<slot>
onblur={handleBlur}

company 949
OmniStudio
theme={_theme}
+ data-omni-input>
</c-masked-input>
</slot>
</template>

<template>
<slot>
type="checkbox"
name={jsonDef.name}
is-image="true"
image-count-in-
theme={_theme}
+ data-omni-input>
name={jsonDef.name}

company 950
OmniStudio
theme={_theme}
+ data-omni-input>
</c-checkbox-group>
</slot>
</template>
inputs that extend the HasValidation mixin, by listening to theVALIDATION_EVENTS.VALID, and
Properties

invalidElements private A map of invalid elements with the key being the element's jsonPath. Each item in the map should
have access to the public members of the input. Notable entries include label, and
validationMessage.
errorsJson private Getter returning a stringified json of the invalid elements map. Not used in element, but can be used
for debugging.
Methods

Value
focus on it.
checkValidity() private Boolean Returns false if invalidElements contains any elements.
map.

company 951
OmniStudio
HasValidation
Properties

tabIndex track (private) Set via setReadOnly to -1 when _readOnly is true preventing child inputs from receiving
focus.
becoming valid.
Methods

Value
messages.
is custom.
getCustomLabel(key) private String Returns custom label in accordance with the key
argument.

company 952
OmniStudio

Value
Usage
When integrating a new input into the OmniScript validation framework, the first step is to extend the

First, import and extend the HasValidation mixin.


omniscriptText.html
<template>
<slot>
onblur={handleBlur}

company 953
OmniStudio
theme={_theme}
+ data-omni-input>
</c-masked-input>
</slot>
</template>

<template>
<slot>
type="checkbox"
name={jsonDef.name}
is-image="true"
image-count-in-
theme={_theme}
+ data-omni-input>
name={jsonDef.name}

company 954
OmniStudio
theme={_theme}
+ data-omni-input>
</c-checkbox-group>
</slot>
</template>
inputs that extend the HasValidation mixin, by listening to the VALIDATION_EVENTS.VALID, and
Properties

invalidElements private An array of invalid elements. Each item in the array should have access to the public members of the
input. Notable entries include label, and validationMessage.
errorsJson private Getter returning a stringified json of the invalid elements array. Not used in element, but can be used
for debugging.
Methods

Value
focus on it.
checkValidity() private Boolean Returns false in invalidElements contains any elements.
array.

company 955
OmniStudio
Classic OmniScript Designer

Create OmniScripts in the classic designer when an element, property, or functionality solves a project
requirement that you cannot resolve in the LWC OmniScript Designer.
It is possible to switch between the classic and LWC OmniScript designers. The classic OmniScript
designer is built in Angular and provides a limited view of the OmniScript during configuration. The LWC
OmniScript Designer provides in-product help and a user-friendly canvas that enables users to preview the
appearance of an OmniScript while configuring elements. To learn more about the LWC OmniScript
Designer, see LWC OmniScript Designer Overview.
What's Next
Learn how to use the classic designer. See Creating the OmniScript.
See Also
Getting Started with OmniScript

Vlocity OmniScript is an omnichannel customer engagement and a business tool built on the Salesforce
platform. Administrators can define a script once and then deploy the script within a Salesforce application
or on a web page. OmniScript can be used to collect data from both Salesforce.com users and anonymous
users via a wide variety of HTML controls.
The data is captured in the standard JavaScript Object Notation (JSON) format. OmniScript could be used
for any guided interaction. For example, it could be used to:
• Capture application forms for different services, including government benefits, insurance policies, and
healthcare coverage.
• Capture details for a customer issue, such as troubleshooting a service outage.
• Capture details for service implementation, such as network configuration requirements.
• Guide a customer through a selling process, such as choosing a new insurance plan.
Data collected in OmniScript can be inserted into Salesforce.com object fields via Vlocity DataRaptor,
posted through an external REST API, or stored as an application in the Vlocity Application object.
Creating the OmniScript

To create an OmniScript, go to the Vlocity OmniScript Designer tab and perform the following steps:
NOTE
Beginning with Vlocity Insurance and Health Summer '19, OmniScripts enable the use of
Lightning Web Components. For more information, see LWC OmniScripts.

company 956
OmniStudio
1. From the Vlocity OmniScript Designer tab, click New.

2. In the Script Configuration section, specify a Name, a Type that begins with a lowercase letter, a
SubType, and a Language for the new script.
NOTE
There can be only one active OmniScript or Integration Procedure per Type, SubType,
and Language. Make sure each active OmniScript has a unique SubType. For more
information, see Creating an OmniScript Type and SubType.
3. To make this OmniScript available for use in other OmniScripts, click Reusable?.
4. Click Save.
After saving the script, see Creating the Script Structure.
OmniScript Script Structure Definitions

Vlocity OmniScripts are defined by Administrators directly within the Vlocity application.
A script is defined through the following declarative, hierarchical structure:

company 957
OmniStudio
• Script: The script is the master container for all the controls. Scripts can be versioned, ported to different
languages, embedded into parent scripts, exported to other orgs, and activated into production.
• Step: A script can contain one or more Steps. The user navigates through the Steps using Next and
Previous buttons. Logic to enforce field validation or required fields can be optionally enforced for each
Step.
• Inputs: Inputs are HTML controls that form the input content of the script.
• Functions: Functions enable you to evaluate data, provide messaging, and obtain a User's location.
• Groups: Elements can be combined into Groups. For example, street, city, state and postal code input
elements may be combined into an address block. Groups are contained within Steps, and may be
repeated to capture an array of data.

company 958
OmniStudio
• Actions: Action Elements trigger a variety of user-defined actions including remote or REST to
communicate with external sources and Integration Procedure, DataRaptor Extract, or DataRaptor Post
to move data between the script and Salesforce objects. Action Elements can be launched as a button on
the script or run remotely in between Steps.
• Display: Display elements present information to the user.
• OmniScripts: An entire OmniScript can be embedded into another script, allowing you to reuse smaller
scripts across multiple larger scripts.
Creating the Script Structure

Create the logic that executes when the script runs, by building a hierarchical structure of Actions and
Steps.
Actions outside steps perform actions for the entire script, such as getting, posting, evaluating, and
transforming data. Steps typically include Block, Input, and Display elements, but can also include Actions
as buttons and Functions specific to the step. Learn more about OmniScript Script Structure Definitions.
Each page of an OmniScript is called a Step and can contain Group elements, such as Blocks, Input
elements, such as Checkboxes, Actions, such as Email Actions, and Functions, such as Formulas.

company 959
OmniStudio
Creating Steps in an OmniScript

When Creating the Script Structure for an OmniScript, Steps should be used to create each "page" of the
form. Users can navigate through Steps using Next and Previous buttons. You can enable field validation
for a Step, which means that all required fields on the Step must be completed in order to move forward.
Conditionally Display Elements Using the Conditional View Property can be done by applying conditional
views to steps. This enables you to create one OmniScript that offers different experiences based on the
user's responses.
To create a Step:
1. From the Visual Designer, expand the Group section located under the Available Components.

company 960
OmniStudio
2. Drag a Step element into the Structure.

3. Enter a name for the Element.
NOTE
The Element Name must be unique and cannot contain the following characters:
• single quotes (')

• double quotes (")
• pipe (|)
• colon (:)
• percent sign (%)
• spaces
4. In the Label field, enter a display name for the Step.

5. Check Validation Required if all required fields contained in the step must be entered before the user
is permitted to go to the next step. Refer to Common OmniScript Element Properties Definitions for
information on additional fields.
6. To add elements inside the step, see Adding Elements to a Step.
Adding Elements to a Step

After Creating the Script Structure, drag the desired elements into the structure.
You must nest input elements in Steps or Blocks. Action elements render as a button when placed in a Step
or Block, and run remotely if placed between steps. For more details on action elements, see OmniScript
Action Elements Reference. To avoid performance issues, limit the number of elements in each block or
step to less than 50.
To add an element to an OmniScript:
1. Drag an element from the Available Components section to the script structure.
2. Edit the element properties. Properties vary depending on the element type. Refer to Common
OmniScript Element Properties Definitions for a list of the most common properties.

company 961
OmniStudio
NOTE
Each row on an OmniScript can have a total Control Width of 12. For example, three
elements that reside on the same row can each have a Control Width of 4, or two
elements can have a Control Width of 3 and one a Control Width of 6.
Previewing OmniScripts
Preview your OmniScript by clicking Preview to launch your script. When using an LWC OmniScript, click
LWC Preview. From the Preview panel, you can navigate through the steps of the OmniScript, use the
Debug console to view an action's request and response data, change the preview layout, or view the
JSON data. The Preview view defaults to Lightning Universal Page. To change the layout, click the drop-
down menu and select your desired layout from the available list.
NOTE
Supported Player Layouts:
• Lightning Universal Page

• Lightning
• Newport
• Lightning Mobile (iPad)
• Lightning Mobile (iPhone)
• Newport Mobile (iPad)
• Newport Mobile (iPhone)
For information on how to test data in an OmniScript, see Test Angular OmniScript Data in the OmniScript
Data Panel.
Test Angular OmniScript Data in the OmniScript Data Panel

Test data while previewing an Angular OmniScript by using the OmniScript Data panel. For information on
loading larger data sets into OmniScript, see Load Data into OmniScript Elements.
Test an Angular OmniScript's ContextId functionality by entering a Record ID into the Data panel's
ContextId field. OmniScript automatically generates the ContextId when the OmniScript is on a Record
page. The ContextId can also be set manually using Set Values or dynamically by accessing the Id of the
current user in DataRaptor.

company 962
OmniStudio
1. Preview the OmniScript, and click Data.
2. In the ContextId field, enter a Record ID.
3. Pass the Record ID into the ContextId JSON node by clicking Fetch.
4. (Optional) Clear the data JSON when Fetch is clicked by checking Clear Data on Fetch.
Test LWC OmniScript Data in the OmniScript Data Panel

Test data while previewing an LWC OmniScript by using the OmniScript Data panel. For information on
loading larger data sets into OmniScript, see Load Data into OmniScript Elements.
Test an LWC OmniScript's ContextId functionality by entering a recordId into the Data panel's ContextId
field. OmniScript automatically generates the ContextId when the OmniScript is on a Record page. The
ContextId can also be set manually using Set Values or dynamically by accessing the Id of the current user
in DataRaptor. Test additional data in OmniScripts by entering key-pair values into the data JSON.

company 963
OmniStudio
2. In the ContextId field, enter a Record ID.
3. Pass the Record ID into the ContextId JSON node by clicking Update.
To test additional data:

2. Click Add New Key/Value Pair, and enter a Key and a Value to pass into the data JSON.
3. Click Update to preview the data.
Ending the Execution of an OmniScript
NOTE
LWC OmniScripts do not support the Done Action. For information on how to navigate from
an LWC OmniScript, see Navigate Action.
The Done action ends an OmniScript and returns the user to the page from which the script was launched,
or to a specified URL.

company 964
OmniStudio
The following video demonstrates how to redirect to a Salesforce object created in an OmniScript:
The Update Case form pictured below returns the user to the Case after the script is complete. The
ContextId node is merged into the Source field, which tells the Script which Case record to return to:
For more information about how to configure additional properties for the Done Action, refer to the Common
Action Element Properties.
For instructions on how to process user cancellations during an OmniScript, see Configuring the Cancel
Link in an OmniScript.
For details about tracking Done events, see Vlocity Tracking Service.
Activating OmniScripts
To activate a script for production deployment, edit the script and, in the Script Configuration section, click
Activate Version.
You can activate an OmniScript from the OmniScript Designer page. After expanding the desired
OmniScript Type to view the OmniScript, click on the drop-down arrow visible to the right of the active
column, and select Activate.
There can be only one active OmniScript per Type, SubType, and Language. Each active OmniScript must
be assigned a unique SubType.
Inactive scripts can be run only in preview mode. After a script is activated, you cannot change it unless you
deactivate it. To deactivate an OmniScript, click Deactivate Version in the Script Configuration section.

company 965
OmniStudio
See Also
Version OmniScripts
OmniScript Best Practices

Enhance the performance and usability of OmniScript by following the OmniScript best practices whenever
possible.
Business Process and Logic

Business Process and Logic best practices include:
• Use one owner for each OmniScript.

• Identify reusable elements by building a skeleton of the entire OmniScript.
• Document the purpose of an element in the element's Internal Notes property.
• Maintain DataRaptors and Apex classes by avoiding element name changes. If the element name must
be updated, apply the name changes to the DataRaptor or Apex class.
• Avoid assigning a ContextId within the OmniScript. OmniScript's ContextId is a reserved key that assigns
a Record Id from the URL.
• When processes are repeatable across multiple OmniScripts, create a reusable OmniScript, and add it to
the appropriate parent OmniScripts. See Embed an OmniScript in Another OmniScript.
User Interface
LWC OmniScripts use Lightning Web Components to define the styling for both individual elements and the
OmniScript itself. Angular OmniScripts use templates to determine the look of the OmniScript.
Angular OmniScript UI best practices include:
• Customize an Angular UI element by editing the template's CSS. Avoid changing the JavaScript and
HTML whenever possible.
• Store custom templates in a single location such as a static resource or in Vlocity Templates.
• Apply global branding by using the Newport Design System. For more information, see Branding
OmniScripts and Cards Using Vlocity Newport Design System.
LWC OmniScript UI best practices include:
• Create custom Lightning web components that extend an OmniScript element's component to apply
styling changes. For more information, see Extend an OmniScript Element's Lightning Web Component
• Apply global branding by using the Newport Design System. For more information, see Branding
User Experience Design Principles

UX design principles include:
• Reduce the number of fields the user must input information into by prefilling the fields using contextual
data. For more information, see Prefill OmniScript Elements using DataRaptor.
• Avoid confusing the user by breaking processes up into shorter steps that contain a minimal amount of
elements.

company 966
OmniStudio
• Guide the user by creating contextual help text and logically ordering input fields.
Performance Factors
A set of best practices exists for both Client-side performance and Server-side performance.
Client-side best practices include:
• Reduce Conditional Views, Merge Fields, Formulas where possible.

• Speed up the application of responses by trimming the Response JSON. For more information, see
Manipulate JSON with the Send/Response Transformations Properties.
• Remove spaces from element names to improve the OmniScript's load time.
• Reduce the number of elements in the script. A single OmniScript should not exceed 200 elements.
• Run logic on the server where possible, including conditional logic in Integration Procedures and
formulas in DataRaptors.
• Test performance by enabling time tracking. If time tracking is not used in production, disable the feature
before deploying to production. For more information, see Vlocity Tracking Service.
Server-side best practices include:
• Cut down the payload size of a request by trimming the JSON request. For more information, see
• Reduce server roundtrips by using Integration Procedures whenever multiple actions run between steps.
Run Integration Procedures asynchronously by enabling the fire and forget property.
• Remove unnecessary data by trimming the DataRaptor extract output.
Create Multi-Language OmniScripts

Enable a single OmniScript to run in multiple languages using Salesforce custom labels.
Beginning with Vlocity Insurance and Health Summer '20, multi-language OmniScripts provide beta support
for right-to-left languages. When using RTL languages, some styling may result in functional limitations.
NOTE
Due to a known Salesforce issue, multi-language OmniScripts do not display correctly in
Community Builder.
1. Enable multi-language support for OmniScripts. See Enable Multi-Language OmniScript Support
2. Define custom labels and translations. See Define Custom Label Translations in Multi-Language
OmniScripts.
3. Test your OmniScript translations. See Test a Multi-Language OmniScript.
4. Launch the multi-language OmniScript. See Launch a Multi-Language LWC OmniScript.
5. Deploy multi-language OmniScripts to other orgs using DataPacks. DataPacks do not include custom
labels. You must deploy custom labels manually from your org.

company 967
OmniStudio
See Also
• Access Custom Labels in an OmniScript Custom Lightning Web Component
• OmniScript Custom Label Reference
Enable Multi-Language OmniScript Support

Enable multi-language OmniScript support by modifying the Vlocity OmniScript object in Salesforce's
Setup.
Before You Begin

View the steps necessary to create a multi-language OmniScript. See Create Multi-Language OmniScripts.
NOTE
Beginning with Vlocity Insurance and Health Summer '20, the LWC OmniScript Designer
supports multi-language OmniScripts.
To enable multi-language support for OmniScripts:
1. From Salesforce's Setup, under Create, choose Objects.

2. Click the Vlocity OmniScript object link. The custom object definition is displayed.
3. In the Custom Fields and Relationships section, edit the Language picklist, and add Multi-
Language to the list of values. Click Save.
4. Exclusive to the LWC OmniScript Designer, in an OmniScript, click Edit, and set Language to Multi-
Language.
5. Exclusive to the Classic Designer, in an OmniScript's Script Configuration section, set Language to
Multi-Language.
What's Next
Define Custom Label Translations in Multi-Language OmniScripts
See Also

• OmniScript Custom Label Reference
Define Custom Label Translations in Multi-Language OmniScripts

Define translations for custom labels in multi-language OmniScripts using OmniScript's translation modal.
OmniScript provides default custom labels that require translations in addition to Salesforce custom labels.
Before You Begin

Enable multi-language OmniScripts. See Enable Multi-Language OmniScript Support.

company 968
OmniStudio
1. In an OmniScript's Script Configuration section, set Language to Multi-Language.

2. Next to the Language field, click Edit.
3. In the Edit Your OmniScript Translations modal, click the Settings gear icon and select a language.
4. Choose a custom label or create a new custom label. For information on creating custom labels in
Salesforce, see Creating and Editing Custom Labels.
NOTE
Use naming conventions when creating custom labels in an org with multiple
developers to avoid duplications and improve querying. Example syntax:
jSmithCustomTextLabel.
5. In the Custom Label Value field, enter a translation.

company 969
OmniStudio
NOTE
• Custom labels must have values. If the value for a custom label does not exist, the
following error message displays when previewing an OmniScript:
Error: Field $Label.<stepName> does not exist. Check spelling
• For elements that support rich text (text blocks, step instructions, and headline
labels), you can include HTML markup in the text and translations.
6. Click Save.
7. Repeat the translation process for each language that requires translations.
What's Next
View required OmniScript custom label translations and apply translations for each label. See OmniScript
Custom Label Reference.
See Also
• Translate Custom Labels for Date and Time Components

Access Custom Labels in an OmniScript Custom Lightning Web Component

Provide custom Lightning web components access to Salesforce custom labels in your OmniScript.
Custom Lightning web components that extend the OmniScript Base Mixin component or an OmniScript
element's Lightning web component can access both OmniScript custom labels and Salesforce custom
labels. For information on custom LWCs in OmniScript, see Create a Custom Lightning Web Component for
OmniScript.
Before You Begin

View the OmniScript's default custom labels or create custom labels in Salesforce. See OmniScript Custom Label Reference and Create
and Edit Custom Labels.

company 970
OmniStudio
1. In the OmniScript's Script Configuration, click Edit as JSON.

2. In the JSON, add the node "moreCustomLabels": and set the node's value equal to an array of the
custom labels that do not exist in the OS.
"moreCustomLabels" : ["myCustomLabel1","orgCustomLabel2"]
3. In your custom LWC's code, add a line of code to access a map of all the custom labels using the
allCustomLabels attribute. Each component type requires a different attribute name to access the
allCustomLabels attribute.
Component Type Syntax

Component extending the OmniScript Base Mixin component this.omniScriptHeaderDef.allCustomLabels
Component extending an OmniScript element's LWC this.scriptHeaderDef.allCustomLabels
4. Using dot notation, append the name of the attribute the custom LWC requires to access the label.
Component Type Syntax

Component extending the OmniScript Base Mixin this.omniScriptHeaderDef.allCustomLabels.myCustomLabel
component
Component extending an OmniScript element's this.scriptHeaderDef.allCustomLabels.myCustomLabel
LWC
5. Deploy the custom Lightning components to a Salesforce org. See Deploy Lightning Web
Components.
6. Activate and preview the OmniScript to ensure the label displays correctly.
See Also
• Define Custom Label Translations in Multi-Language OmniScripts

Translate Tooltip Help Text in OmniScripts

Display tooltip help text with multiple translations in multi-language LWC OmniScripts.
You must use custom labels to add help text in both LWC and Angular multi-language OmniScripts. If a
custom label is not defined for a help text tooltip, an error renders.
Required Versions
Before You Begin

Define custom labels for your help text. See Define Custom Label Translations in Multi-Language OmniScripts.
1. In your OmniScript, select an element that requires help text translation.

2. In the element's properties, click Help Options.
3. Check Activate Help Text.
4. In the Help Text field, enter the custom label.

company 971
OmniStudio
5. Preview the OmniScript to render the custom labels.
NOTE
Custom labels do not render in design mode. You must preview the OmniScript to
render the custom labels correctly.
See Also
• Test a Multi-Language OmniScript

Translate Custom Labels for Date and Time Components

Define custom label translations for date and time components using JSON strings and OmniScript custom
labels.
Before You Begin

Learn how to translate custom labels in Salesforce. See Translating Custom Labels.
1. Go to Day.js, click List of supported locales, and choose a language file.

2. In the language's JavaScript file, copy the locale object.

company 972
OmniStudio
3. Open a window console or JavaScript editor and paste in the locale object.

company 973
OmniStudio
4. Execute the JavaScript, and run JSON.stringify(locale) in the console.
NOTE
Custom labels accept valid JSON strings only.
5. Copy the resulting JSON string.

company 974
OmniStudio
6. Choose a custom label that meets your requirements and open it in Salesforce.
Custom Label Description Release

cmpDayJsLocaleFormats Applies translations to Vlocity LWC date components and Available beginning with
OmniScript date elements. The cmpDayJsLocaleFormats label Vlocity Health and
does not apply translations to OmniScript if the Insurance Spring '20
OmniDayJSLocaleFormats label has translations defined.
OmniDayJsLocaleFormats Applies translations to OmniScript date and time elements only. Available beginning with
Overrides the cmpDayJsLocaleFormats label in OmniScript if Vlocity Health and
both custom labels have translations defined. Insurance Spring '20
SldsDatetimeFormats Applies translations to OmniScript date and time elements. Available before Vlocity
Health and Insurance
Spring '20
7. In the custom label, click New to add a new translation.
8. In the Translation field, paste in the JSON and remove the quotations surrounding the object.

company 975
OmniStudio
9. (Optional) Use the JSON as an example and create custom translations in a JSON string format.
10. Save the custom label and preview your component.
See Also
• Extend Vlocity Lightning Web Components

Create Multi-Language Select Elements

To populate Select, Multi-select, and Radio elements for a multi-language OmniScript, you have the
following options:
• Configure options manually: In Salesforce, define a set of custom labels and configure translations for
them. In OmniScript Designer, use the custom labels to specify the options for the Select elements.
• Use a translated Salesforce picklist: In Salesforce, create a picklist and use Translation Workbench to
define translations for it. In OmniScript Designer, define a Select element that is bound to the Salesforce
picklist.
• Use Apex: Create an Apex method that returns a set of options that are translated according to the
language code in effect when the method is called.
The following sections describe these approaches in detail, using the Select element. Use the same
approach to create multi-language Radio and Multi-select elements.
Configure Options Manually

To manually compose a multi-language Select element:
1. In SalesForce, define a set of custom labels and specify the translations for each one.
2. In OmniScript designer, add a Select element configured as follows:
• Option Source: Manual

company 976
OmniStudio
• Options:
• Value: The value to be written to the data JSON if this option is selected
• Label: The name of the Salesforce custom label from which the text for the option is read.
For example, for a list of animals, you might define three custom labels with translations in Salesforce:
Custom Label Default Value Spanish Translation

Animal_Bear Bear Oso
Animal_Dog Dog Perro
Animal_Cat Cat Gato
In OmniScript Designer, specify the Options for the Select element, for example:
Value Label
1 Animal_Bear
2 Animal_Dog
3 Animal_Cat
Populate the Options Programmatically

To populate options for a Select element using Apex:
1. Create a class and method that returns a map of options translated according to the language code in
effect when the method is called. See the sample code below.
2. Add a Select element to your OmniScript, configured as follows:
• Option Source: Custom

• Source: The class and method that return options
NOTE
For dependent Select elements that are populated programmatically (custom), configure a
controlling field by specifying the name of an OmniScript element that contains the value
that determines the options in the dependent Select element. (For example, a list of cities
might depend on a state specified in another element.) For the dependent element, specify
its CONTROLLING FIELD settings as follows:
• Option Source: Custom

• Source: Omit
• Element: The OmniScript element containing the value that determines how this
dependent element is populated.
The Apex method that returns the values that populate the Select element must contain
logic that uses the value of the controlling element and the language code to determine
what values to return to populate the dependent element.

company 977
OmniStudio
Example Method
global class PicklistPopulation implements VlocityOpenInterface { public

Boolean invokeMethod(String methodName, Map<String, Object> input, Map<String,
Object> outMap, Map<String, Object> options) { try { if
(methodName.equals('PopulatePicklist')) { PopulatePicklist(input, outMap,
options); } else if (methodName.equals('PopulateDependentPicklist'))
{ PopulateDependentPicklist(input, outMap, options); } } catch (Exception e)
{ System.debug(LoggingLevel.ERROR, 'Exception: ' + e.getMessage() + ' ' +
e.getStackTraceString()); } return true; } // Get All Contacts Associated with
the ContextId Account where the Omniscript is Launched public void
PopulatePicklist(Map<String, Object> input, Map<String, Object> outMap,
Map<String, Object> options) { List<Map<String,String>> plOptions = new
List<Map<String, String>>(); String lang = (String)input.get('LanguageCode');
for(Integer i=0; i<2; i++) { Map<String, String> tempMap = new Map<String,
String>(); tempMap.put('name', 'test'+ String.valueOf(i)); // Language
Independent tempMap.put('value', 'testV'+ String.valueOf(i)); // Displayed in
Picklist UI if(lang == 'zh_CN') tempMap.put('value', 'testV' +
String.valueOf(i) + ' 中'); plOptions.add(tempMap); }
outMap.put('options',plOptions); } // Populate a Dependent Picklist based on
the Contacts ReportsToId Field Selected in the Other Field this field depends
on public void PopulateDependentPicklist(Map<String, Object> input,
Map<String, Object> outMap, Map<String, Object> options) { // Map of List
where the Key is the Potential Values in the Other Picklist Map<String,
List<Map<String, String>>> dependency = new Map<String, List<Map<String,
String>>>(); String lang = (String)input.get('LanguageCode'); String
elementName = (String)input.get('controllingElement'); // itself
Logger.debug('hello1 ' + lang); Logger.debug('hello2 ' + elementName);
List<String> controlValList = new List<String>();
controlValList.add('Licensing & Permitting'); controlValList.add('Contract');
for(Integer i=0; i<2; i++) { List<Map<String, String>> optionList = new
List<Map<String, String>>(); for(Integer j=0; j<2; j++) { Map<String, String>
tempMap = new Map<String, String>(); tempMap.put('name', controlValList[i] +
'Child' + String.valueOf(j)); // Language Independent tempMap.put('value',
controlValList[i] + 'ChildV' + String.valueOf(j)); // Displayed in Picklist UI
if(lang == 'zh_CN') tempMap.put('value', controlValList[i] + 'ChildV' +
String.valueOf(j) + ' 中' ); optionList.add(tempMap); }
dependency.put(controlValList[i], optionList); }
outMap.put('dependency',dependency); } }
Use a Translated SalesForce Picklist

In OmniScript Designer, add a Select element and configure it as follows:
• Options Source: sObject

• Source: <sObjectName>.<fieldName>

company 978
OmniStudio
For example, if you define a custom object named "Multi_Language_Picklist" and define a picklist field
named "Animal_Type", specify source as follows:
Multi_Language_Picklist__c.Animal_Type__c
To translate the picklist options in Salesforce:
1. In Setup, under Administration Setup, choose Translation Workbench.

2. On the Translate screen, choose the target language.
3. From the Setup Component list, choose Picklist Value.
4. From the Object list, choose the object where the picklist field is defined. The picklist and its values are
displayed as a tree.
5. For each option. specify the translated value, then save your changes.
Test a Multi-Language OmniScript

View custom translations using the OmniScript Designer preview.
Before You Begin

Enable multi-language OmniScripts and define custom labels translations. See Define Custom Label Translations in Multi-Language
OmniScripts.
To test your multi-language OmniScript from OmniScript Designer:
1. Click Preview. If the OmniScript contains custom Lightning web components, activate the OmniScript
before previewing.
2. From preview, select a language.
3. View the custom label translations for every OmniScript element to ensure they display correctly.
4. Repeat the testing process for every translated language.
What's Next
Launch a Multi-Language LWC OmniScript
See Also

• Deploy, Launch, and Embed LWC OmniScripts
• Launching Multi-Language Angular OmniScripts
Launch a Multi-Language LWC OmniScript

Set the language a multi-language LWC OmniScript renders in by using a language code parameter in a
URL.

company 979
OmniStudio
LWC and Angular OmniScripts use different URL patterns to render multi-language OmniScripts. For
information on launching multi-language angular OmniScripts, see Launching Multi-Language Angular
OmniScripts.
Before You Begin

Define translations for custom labels and enable multi-language OmniScript. See Enable Multi-Language OmniScript Support.
1. From the OmniScript, click How to launch activated script. The HOW TO LAUNCH modal displays.
2. Copy the URL you want to use to launch your script. For information on LWC OmniScript URLs, see
Launch an LWC OmniScript with LWC OmniScript Wrapper.
3. Determine which language code to use in Salesforce. See Supported Languages
4. Edit the URL to add the c__LanguageCode parameter and set the parameter equal to the Salesforce
language code.
c__target=c:docLWCTestEnglish&c__layout=lightning&c__LanguageCode=es
NOTE
Resume saved OmniScripts in other languages by using a different language code
parameter.
See Also
• Test a Multi-Language OmniScript
Launching Multi-Language Angular OmniScripts

By default, a multi-language Angular OmniScript uses the language configured for the user who is running
the script. To specify the language in which a script is run, use a Salesforce-supported language code. For
information on launching LWC OmniScripts, see Launch a Multi-Language LWC OmniScript.
When launching an OmniScript using a URL, you can specify the language setting in the LanguageCode
parameter. For example:
https://myorg.na78.visual.force.com/apex/myorg__OmniScriptUniversalPage?
LanguageCode=zh_CN&OmniScriptLang=Multi-Language...
To launch a multi-language OmniScript from a VisualForce page, include the following line in the header:
language="{!$CurrentPage.parameters.LanguageCode}"
If the OmniScript includes elements that use custom templates that use custom labels, you can enable the
translation of the custom labels by declaring them in the Visualforce page that launches the OmniScript and
using specific syntax in the custom templates. To declare the labels on the VisualForce page, map them in
the script section as shown in the following example:

company 980
OmniStudio
<apex:page standardStylesheets="false" showHeader="false" sidebar="false"

docType="html-5.0" language="{
!$CurrentPage.parameters.LanguageCode}">
<div class="vlocity via-slds via-omni" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" ng-app="NewOmniScript">
<c:BusinessProcessComponent strOmniScriptType="Jun"
strOmniScriptSubType="Multi-lang"
strOmniScriptLang="Multi-Language"
previewMode="{!$CurrentPage.parameters.previewEmbedded}"
verticalMode="{!$CurrentPage.parameters.verticalMode}"
strOmniScriptId="{!$CurrentPage.parameters.designerPreviewId}"
scriptLayout="lightning"/>
<script type="text/javascript">
var modules = ['vlocity-business-process'];
var myModule = angular.module('NewOmniScript', modules);
customLabels.custom1 = "customLabel1}";
[...]
</script>
</div>
<c:VFActionFunction />
</apex:page>
In the custom templates that display the custom labels, use the following syntax to refer to them:
{{::customLabels.custom1}}
To launch a multi-language OmniForm from an Integration Procedure and specify the language
dynamically, create a key/value pair in the OmniForm action's Remote Options settings list as follows:
• Key: LanguageCode
• Value: %LanguageCode%
OmniScript Custom Label Reference

This page contains tables listing the OmniScript element properties for which you must define custom
labels and translations for multi-language OmniScripts. To use a default translation, clear the property.
NOTE
If you are converting an OmniScript from single- to multi-language, specify valid custom
label names or clear all translatable properties. If there is literal text in the property and no
custom label exists, a Missing label error is displayed when you attempt to preview the
script.

company 981
OmniStudio
Required Translations for LWC OmniScripts
Element Properties
All elements label
Calculation Action errorMessage.custom[n].message, errorMessage.default, failureNextLabel, failureGoBackLabel,
inProgressMessage
Checkbox checkLabel
DataRaptor Extract Action errorMessage.custom[n].message, errorMessage.default, failureNextLabel, failureGoBackLabel,
inProgressMessage
DataRaptor Post Action errorMessage.custom[n].message, errorMessage.default, failureNextLabel, failureGoBackLabel,
inProgressMessage
DataRaptor Transform Action errorMessage.custom[n].message, errorMessage.default, failureNextLabel, failureGoBackLabel,
inProgressMessage
Disclosure checkLabel
DocuSign Envelope Action errorMessage.custom[n].message, errorMessage.default, failureNextLabel, failureGoBackLabel,
inProgressMessage
DocuSign Signature Action errorMessage.custom[n].message, errorMessage.default, failureNextLabel, failureGoBackLabel,
inProgressMessage
Edit Block newLabel, editLabel, deleteLabel
Email Action errorMessage.custom[n].message, errorMessage.default, failureNextLabel, failureGoBackLabel,
inProgressMessage
Integration Procedure Action errorMessage.custom[n].message, errorMessage.default, failureNextLabel, failureGoBackLabel,
inProgressMessage
Matrix Action errorMessage.custom[n].message, errorMessage.default, failureNextLabel, failureGoBackLabel,
inProgressMessage
Multi-Select options[i].value
PDF Action errorMessage.custom[n].message, errorMessage.default, failureNextLabel, failureGoBackLabel,
inProgressMessage
Radio options[i].value
Remote Action errorMessage.custom[n].message, errorMessage.default, failureNextLabel, failureGoBackLabel,
inProgressMessage
Rest Action errorMessage.custom[n].message, errorMessage.default, failureNextLabel, failureGoBackLabel,
inProgressMessage
Script Header consoleTabLabel
Select options[i].value
Step cancelLabel, nextLabel, previousLabel, saveLabel, cancelMessage, saveMessage
Type Ahead Block newItemLabel
Validation messages[i].text
The following table lists the properties for which Vlocity provides custom labels with default translations.
Property Default Custom Label

cancelLabel OmnicancelLabel
cancelMessage OmnicancelMessage
consoleTabLabel OmniconsoleTabLabel
editLabel OmnieditLabel
failureGoBackLabel OmnifailureGoBackLabel

company 982
OmniStudio
failureNextLabel OmnifailureNextLabel
inProgressMessage OmniinProgressMessage
newItemLabel OmninewItemLabel
newLabel OmninewLabel
nextLabel OmninextLabel
postMessage OmnipostMessage
previousLabel OmnipreviousLabel
remoteConfirmMsg OmniremoteConfirmMsg
saveLabel OmnisaveLabel
saveMessage OmnisaveMessage
Required Translations for Angular OmniScripts
Element Properties
All elements label
Calculation Action failureNextLabel, failureAbortLabel, redirectNextLabel, redirectPreviousLabel,
inProgressMessage, failureAbortMessage, postMessage
Checkbox checkLabel
DataRaptor Extract Action failureNextLabel, failureAbortLabel, redirectNextLabel, redirectPreviousLabel,
DataRaptor Post Action failureNextLabel, failureAbortLabel, redirectNextLabel, redirectPreviousLabel,
DataRaptor Transform Action failureNextLabel, failureAbortLabel, redirectNextLabel, redirectPreviousLabel,
Delete Action failureNextLabel, failureAbortLabel, redirectNextLabel, redirectPreviousLabel,
Disclosure checkLabel
DocuSign Envelope Action failureNextLabel, failureAbortLabel, redirectNextLabel, redirectPreviousLabel,
DocuSign Signature Action failureNextLabel, failureAbortLabel, inProgressMessage, failureAbortMessage,
postMessage
Done Action consoleTabLabel
Edit Block newLabel, editLabel, deleteLabel, configProdModalCancel, configProdModalOk
Email Action failureNextLabel, failureAbortLabel, redirectNextLabel, redirectPreviousLabel,
Filter Block buttonLabel
Integration Procedure Action failureNextLabel, failureAbortLabel, redirectNextLabel, redirectPreviousLabel,
Matrix Action failureNextLabel, failureAbortLabel, redirectNextLabel, redirectPreviousLabel,
PDF Action failureNextLabel, failureAbortLabel, redirectNextLabel, redirectPreviousLabel,
Post to Object Action failureNextLabel, failureAbortLabel, redirectNextLabel, redirectPreviousLabel,
Remote Action failureNextLabel, failureAbortLabel, redirectNextLabel, redirectPreviousLabel,

company 983
OmniStudio
Rest Action failureNextLabel, failureAbortLabel, redirectNextLabel, redirectPreviousLabel,

Review Action nextLabel, previousLabel
Script header consoleTabLabel
Script header Array of persistent components. Set the label property:
persistentComponent[i].label
Step previousLabel, nextLabel, cancelLabel, saveLabel, completeLabel, cancelMessage,
saveMessage, completeMessage
Submit summaryLabel, submitLabel, reviseLabel
Type Ahead Block newItemLabel
Validation (array of objects that have a messages[i].text
text property)
The following table lists the properties for which Vlocity provides custom labels with default translations.
Property Default Custom Label

cancelLabel OmnicancelLabel
cancelMessage OmnicancelMessage
completeLabel OmnicompleteLabel
completeMessage OmnicompleteMessage
configProdModalCancel OmniconfigProdModalCancel
configProdModalOk OmniconfigProdModalOk
consoleTabLabel OmniconsoleTabLabel
editLabel OmnieditLabel
failureAbortLabel OmnifailureAbortLabel
failureAbortMessage OmnifailureAbortMessage
failureNextLabel OmnifailureNextLabel
inProgressMessage OmniinProgressMessage
newItemLabel OmninewItemLabel
newLabel OmninewLabel
nextLabel OmninextLabel
postMessage OmnipostMessage
previousLabel OmnipreviousLabel
redirectNextLabel OmniredirectNextLabel
redirectPreviousLabel OmniredirectPreviousLabel
reviseLabel OmnireviseLabel
saveLabel OmnisaveLabel
saveMessage OmnisaveMessage
submitLabel OmnisubmitLabel
summaryLabel OmnisummaryLabel
See Also

company 984
OmniStudio
Advanced Configuration for OmniScript Form Elements

This section tells you how to work with elements that enable users to input information, search for record
information, select options, create records, edit records, and delete records. For information on all
OmniScript elements, see OmniScript Element Reference.
Access OmniScript Data JSON with Merge Fields

Enable OmniScript elements and element properties to access data JSON using merge fields. Merge fields
access data JSON using syntax to indicate to an OmniScript Element that a merge field is present. The
syntax requires you to wrap a full JSON path with a percent sign on both ends.
NOTE
Only certain element properties support Merge fields.
Common Use Cases
• Setting Values to rename elements, JSON nodes, run formulas, and populate elements. For more
information, see Set Values in an OmniScript
• Access data stored in OmniScript elements in a formula or in a future step.
• Access data returned from an Action. For example, an HTTP Action or DataRaptor Action returns data
from Salesforce or an external source. For more information on Actions, see OmniScript Action
Elements.
• Access data passed in as a parameter from a page.
Access the Data JSON

Use existing data JSON in an element property by indicating the use of a merge field.
1. Locate the name of the JSON node in the OmniScript's data JSON.

company 985
OmniStudio
2. Enter the name of the JSON node and wrap the name in percentage signs to indicate it is a merge
field. For example, a merge field accessing a JSON node named firstName must use the syntax
%firstName%.
3. Preview the OmniScript to ensure the Merge field works correctly.

company 986
OmniStudio
Additional Syntax
This table provides additional syntax examples for nested JSON.
JSON Node Merge Field Syntax Example

"ContactInfo": { Use a colon symbol : to access a nested JSON node.
"FirstName": "John"
} %ContactInfo:FirstName%
"ParentObject": { Use a colon symbol : to access nested JSON nodes and a pipe symbol | and the index of the
"NumberMap": [ array that value.
1,
2, %ParentObject:NumberMap|3%
3
]
}
"ContactInfoStep": { When a formula exists within a repeatable block, use |n to access the node in which the
"ContactInfoBlock": [ formula exists. Depending upon which node the formula exists in, it will return the correlating
{ value. For more information, see Evaluating Elements in Repeatable Blocks.
"FirstName": "John"
}, %ContactInfoStep:ContactInfoBlock|n:FirstName%
{
"FirstName": "Adam"
},
{
"FirstName":
"Steve"
}
]
}
Add Options for Selects, Multi-Selects, and Radio Buttons

To add options for Select, Multi-Select, and Radio Buttons, go to the Option Source section of the element
and click +Add new option. If no values are defined for a Select element, an Undefined Value is returned.
Each option has a Value/Label pair. The Value is the language-independent data that gets passed in and
out of the OmniScript remotely, either through DataRaptor or Remote/Rest actions. It is also referenced
when setting up Conditional View.
The Label is displayed on the form. The Value and Label can be identical or different.
For example, the ethernetLink element shown in the image below has four options:

company 987
OmniStudio
The value of one of these options is "EN" and its label is "No Link To An Ethernet Device". If a user clicks
No Link To An Ethernet Device, the data returned is "EN".
For Multi-Select elements, if the user selects multiple options, a semicolon-delimited list of data is returned.
For example, selecting No Link To An Ethernet Device and Hardware Crashes returns EN;HW.
NOTE
If the values change frequently, enable the "Fetch Picklist Values at Script Load" to ensure
that the OmniScript elements contain the most up-to-date set of values. Salesforce
sources include picklists and custom classes.
Set Date and Time Ranges

The Date, Date/Time, and Time elements enable users to input dates and times into an OmniScript form.
Each element has different properties that enable you to present a selectable range of dates or times to the
User.
Date Range
To create a selectable Date range for the Date or Date/Time element, configure the following properties:
• minDate: Sets the earliest selectable date in the range.

• maxDate: Sets the latest selectable date in the range.

company 988
OmniStudio
The minDate and maxDate fields accept both dynamic and static values.
Examples of acceptable dynamic value syntax:
• today + 1 day
• today - 5 days
• today + 2 months
• today - 1 month
Examples of acceptable static value syntax:
• 2018/10/21
• 10-21-2018
NOTE
Prior to the Summer '19 release, mobile Date Range errors do not display specific dates if
an incorrect date is entered.
Time Range
NOTE
LWC OmniScripts do not allow the DateTime format to be included in the minTime or
maxTime fields. For more information on LWC OmniScripts, see LWC OmniScripts.
To create a selectable Time range for the Time element, configure the following properties:
• minTime: Sets the earliest selectable time in the range.

• maxTime: Sets the latest selectable time in the range.
The minTime and maxTime fields accept static values that must include four digits formatted as HH:mm in
the 12-hour clock or 24-hour clock syntax.
Examples of acceptable 12-hour clock values include:
• 01:00 AM
• 01:00 PM
• T07:30:00.000Z

company 989
OmniStudio
Examples of acceptable 24-hour clock values include:
• 01:00
• 13:00
• T19:30:00.000Z
Tying a Picklist to Salesforce

Using Vlocity OmniScript, you can dynamically populate a Select, Multi-Select, or Radio element with
values from a picklist in your Salesforce org, or using a custom Apex class.
For example, anUpdate Case OmniScript requires the Status element to dynamically populate based on
these values from the Status field on the Case object:
To do this, select SObject as the Option Source type and type Case.Status:

company 990
OmniStudio
Now the form will retrieve and dynamically populate the list with values from Case.Status:

company 991
OmniStudio
NOTE
If the object or field name are custom, they must be preceded with the NameSpace of the
package—for example, vlocity_cmt__Party__c.vlocity_cmt__Location__c or
Case.vlocity_cmt__Amount__c.
You can also use a custom class to populate lists in OmniScripts. See the sample code for instructions on
implementation.
If the values of the list are dependent on another field, add the information for that field in the Controlling
Field section. Follow the instructions above to define the controlling field and also enter the element name
for the field on the form.
Populating Picklist Values From Apex

You can populate Select, Multi-select, and Radio elements from a Vlocity Open Interface Custom
implementation. The values for the element are obtained during the OmniScript's activation. For information
on populating dependent picklists, see Populating Dependent Picklist Values with Apex.
To populate the options of an element, a List<Map<String, String>> is returned from the Custom
Implementation. The Map Options are 'Name' the Language Independent Option and 'Value' the UI Display
value.
Apex Code for Populating Picklist:
global class PicklistPopulation implements VlocityOpenInterface {

public Boolean invokeMethod(String methodName, Map < String, Object >
input, Map < String, Object > outMap, Map < String, Object > options) {

company 992
OmniStudio
if (methodName.equals('PopulatePicklist')) {
PopulatePicklist(input, outMap, options);
}
return true;
}
// Get All Relationship Types for Account when the Omniscript is compiled.
public void PopulatePicklist(Map < String, Object > input, Map < String,
Object > outMap, Map < String, Object > options) {
List < Map < String, String >> options = new List < Map < String,
String >> ();
for (vlocity_namespace__PartyRelationshipType__c rel: [Select
vlocity_namespace__TargetRole__c, Id FROM
vlocity_namespace__PartyRelationshipType__c where
vlocity_namespace__SourcePartyType__c = 'Account']) {
Map < String, String > tempMap = new Map < String, String > ();
tempMap.put('name', rel.Id);
// Language Independent
tempMap.put('value', rel.vlocity_namespace__TargetRole__c);
// Displayed in Picklist
UIoptions.add(tempMap);
}
outMap.put('options', options);
}
}
NOTE
Prior to Spring '17, there were two Source fields in the Designer when creating
Hierarchical Picklists (Controlling Field). Any OmniScripts setup prior to Spring '17 will still
work; the new OmniScripts will only have one Source field in the Options which will set the
dependency for Hierarchical Picklists as shown in the instructions above.
Populating Dependent Picklist Values with Apex

You can populate Select, Multi-select, and Radio elements from a Vlocity Open Interface Custom
implementation. The values for the element are obtained during the OmniScript's activation.
When populating a Dependent Picklist through Apex, the returned Picklist Options are a Map<String,
List<Map<String, String>>. The keys to the initial Map are the Language Independent ('name') options
from the Controlling field. The List<Map> Options are 'Name' the Language Independent Option and 'Value'
the UI Display value. For information on populating a picklist with no dependencies, see Populating Picklist
Values From Apex.

company 993
OmniStudio
Sample Apex Code:
global class PicklistPopulation implements VlocityOpenInterface {

public Boolean invokeMethod(String methodName, Map < String, Object >
input, Map < String, Object > outMap, Map < String, Object > options) {
if (methodName.equals('PopulateDependentPicklist')) {
PopulateDependentPicklist(input, outMap, options);
}
return true;
}
// Populate a Dependent Picklist based on the all Party Relationship type
valid for a "Source Party Type" Selected in another field
public void PopulateDependentPicklist(Map < String, Object > input, Map <
String, Object > outMap, Map < String, Object > options) {
// Map of List where the Key is the Potential Values in the Other
Picklist
Map < String, List < Map < String, String >>> dependency = new Map <
String, List < Map < String, String >>> ();
for (vlocity_namespace__PartyRelationshipType__c rel: [Select
vlocity_namespace__TargetRole__c, vlocity_namespace__SourcePartyType__c Id
FROM vlocity_namespace__PartyRelationshipType__c]) {
if (!
dependency.containsKey(rel.vlocity_namespace__SourcePartyType__c)) {
dependency.put(rel.vlocity_namespace__SourcePartyType__c, new
List < Map < String, String >> ());
}
Map < String, String > tempMap = new Map < String, String > ();
tempMap.put('name', rel.Id);
// Language Independent
tempMap.put('value', rel.vlocity_namespace__TargetRole__c);

company 994
OmniStudio
// Displayed in Picklist
UIdependency.get(rel.vlocity_namespace__SourcePartyType__c).add(tempMap);
}
outMap.put('dependency', dependency);
}
}
NOTE
OmniScript does not check to see if the dependent picklist value is valid when passed.
Invalid values are discarded when the controlling picklist is changed.
Lookup Element
Run a query using text input to retrieve Salesforce data using the Lookup element. The retrieved data is
returned in Value/Label pairs and becomes available for selection in a dropdown list.
The Lookup element calls the DataRaptor Output service to query SFDC tables based on the parameters
configured in the Properties section. To avoid performance issues, it is recommended to keep the number
of value results under 150. Select the Custom type to run a custom Apex class. Lookup elements display
values from Salesforce based on a standard SOQL query built using the parameters of the Lookup
elements.
SObject Type
To query for SObject data:
1. Set the Data Source Type to SObject.

2. Under Input Parameters, configure these fields:
• Data Source: Select an Element Name from the dropdown to send that element's JSON value in the
lookup request.
• Filter Value: Enter a name for the JSON value to use in the lookup query configuration.
This example image sets the path to the CompanyName JSON node from the first step and passes
Company Name as a filter value in the query.

company 995
OmniStudio
3. Configure the Lookup Query Configuration:

a. Click + Add New Lookup Configuration.
b. (Optional) In Lookup Priority, enter a number to set priority for the Lookup order if there are
multiple queries.
c. In Lookup Object, select an SObject.
d. In Lookup Object Field, select an SObject field to run the query against.
e. Click Filter Operator to select an operator. For example, to return an exact match, use the =
operator, or to select matches similar to the filter value, select the LIKE operator.
f. In Filter Value, enter the name of a Filter Value used in the Input Paramters section. In the
previous example, this value is Company Name.
g. Set the return path for the filtered values by adding the Element Name of the Lookup element
into the JSON path.

company 996
OmniStudio
4. In the Populate Lookup Element with Query Results section, set a label and a value for the Lookup
results by configuring these fields:
• Label: Set the label for a Lookup Element's dropdown list to a JSON Value returned by the query.
Because the query returns the values in the Lookup Element's JSON Path, you must set the full
path. For example, to display an Account Name as a label in a Lookup Element named Company,
the full path is Company:Name.
• Value: Set the Value to an Object field that populates the Lookup Element's JSON Node using the
full path. When a user selects a label, the value populates the Lookup element's JSON Node. For
example, to use an Account Id for a JSON value when a user selects an Account Name from the
Lookup element, the full path is Company:Id.

company 997
OmniStudio
5. Preview the OmniScript to ensure the query is working and the value is being set correctly.
The query is structured in this format:
SELECT Lookup Object WHERE Lookup Object.Field Name = Filter Value
Custom Type
Use the Custom type to call a custom Apex class which implements NS.VlocityOpenInterface, where NS is
the Name Space of the package. The source is NS.ClassName.MethodName.
For more details on query configurations, see Working with Lookup Query Configurations.
Picklist Filter by Record Type

Enables the filtering of picklist options by record type.
Before using the Record Type filter, set up a Remote Site to enable the options to load into the OmniScript
preview Visualforce page.
1. Navigate to the OmniScript Designer home page.

2. Copy the text in the URL bar immediately before /apex.
https://doc-demo-vlocity.visualforce.com/apex/OmniScriptHome?
sfdc.tabName=01rlu000001A3aC
3. From Setup, enter Remote Site into the quick find box, and click Remote Site Settings.
4. Click New Remote Site.
5. For the Remote Site Name, enter vlocity.
6. For the Remote Site URL, paste the URL from Step 2.

company 998
OmniStudio
7. Click Save.
To filter the options:
1. In the Picklist Object and Field property, enter the picklist in the following format:
ObjectAPIName.FieldAPIName.
2. Filter the picklist by Record Type by entering the Record Type into the Record Type property. This
property supports %MergeFields%.
Working with Lookup Query Configurations

To learn more about looking up values in an OmniScript, see Lookup Element.
When using the Lookup Element in OmniScript, the filtering of results is performed by the Lookup Query
Configuration properties section. There are three main types of queries that can be built using this the
Lookup Query Configuration properties section: AND join, OR join, and Deep query.
AND Join
To create AND Join and filter results on two or more fields set the sequence field value to the same value
as the fields you want to join together in the query.
Figure 5. Example AND Join
In this example, we search for Leads that have Country = "USA" AND City = "San Francisco". This is done
by selecting the same Lookup order and populating the JSON Path with the same value.
NOTE
The JSON path can be any text but a best practice is to name the JSON Path the object
being referenced.

company 999
OmniStudio
Deep Query
To create a Deep query, the Lookup Order is put in sequential order. OmniScript builds smaller query sets
at each order set.
Figure 6. Example Deep Query
In the example Deep query we are search for Leads that have Country = "USA" AND City = "San
Francisco".
The from that data set we also only display Leads that have Industry = "Government". Since we are
performing a Deep Query the JSON Path Field Name needs to be updated to populate Accordingly.
NOTE
The JSON path in the Field Population property section must match the text used in the
JSON Path. A best practice is to separate the JSON Path with a colon to indicate the
nested JSON Path.
OR Join
OR Joins are not currently supported from within the OmniScript editor so a workaround must be used to
accomplish this functionality. To perform an OR Join, a custom formula field on the object can be
implemented to accomplish the OR portion of the query such that the formula will return either a TRUE
value if the OR query is met and FALSE if not.

company 1000
OmniStudio
Figure 7. Example with an OR Join
The Vlocity_Industry__c formula field example uses this syntax:

IF(
OR(
ISPICKVAL(Industry, "Government"),
ISPICKVAL(Industry, "Insurance"),
ISPICKVAL(Industry, "Communications")
),
"TRUE",
"FALSE")
This effectively allows for an OR join even though the OmniScript element doesn't support this functionality
directly.
NOTE
In all instances, Filter Values must be text and wrapped in double quotations.
Create and Populate a Custom Template for a Selectable Item Using DataRaptor
The video below explains how to use DataRaptor to populate a selectable items template.

company 1001
OmniStudio
Controlling Field Property

The Controlling Field Property on a Select Element can display Select Field Values based on the selection
of another value from a Controlling Select field. Both the controlling and dependent fields must pull their
field values from a field in Salesforce using the sObject property and those fields must have a Field
Dependency setup between one another via Salesforce Field Dependency feature. For more information,
see Define Dependent Picklist in the Salesforce Help.
Figure 8. Example Controlling Field Setup
Figure 9. Controlling Field Configuration

company 1002
OmniStudio
Figure 10. Dependent Field Configuration
Figure 11. Defined Field Dependency in Salesforce
Using Option Source Custom

When using Custom as an option source, you can define an Apex class that will pull in the Picklist values
source. For more information, see Populate Picklist Values From Apex.

company 1003
OmniStudio
Evaluating Elements in Repeatable Blocks

If the Formula element is in a repeatable block and evaluates an element also in that block, use |n in the
expression builder to denote that the formula should only evaluate the element in the current block. For
example, the childAge formula element converts the childBirthday date element (in the same block) into a
number using the formula AGE(%childBirthday|n%) :
When the OmniScript runs, the childAge formula element evaluates only the childBirthday element in the
same block:
Using the Rich Text Editor in the Vlocity OmniScript Designer

The Text Block, Headline, Disclosure, and horizontal mode Instructions use a Rich Text Editor to display
HTML in an OmniScript. In addition to standard Rich Text Editor features, you can:
• Upload files and images to Salesforce Documents (up to 1 MB). Files upload to the public Vlocity
Document Uploads folder and are set to Externally Available.
• Link to files and images from Documents.

company 1004
OmniStudio
• Insert Smart Links to Salesforce Knowledge articles.

• Reference data JSON using merge fields.
The following Text Block example contains an Image, two merge fields, and a URL.
To use the Rich Text Editor, drag a Text Block or Headline element into the OmniScript structure.
Additionally, you can use it in the Step properties to edit the Instruction text in horizontal mode.
Configuring OmniScript Styling and UI Behavior

To control the style and behavior of OmniScript elements, you use Templates, Conditions, Display
Components, and options. Templates use JavaScript and CSS to alter the behavior and design of an
element. Conditions use OmniScript data to determine whether an element is active or hidden. Display

company 1005
OmniStudio
Elements include elements with built-in styling for static text. Options include customizable error messages,
show/hide settings, and the text directionality setting.
Designing and Styling OmniScript

This section explains how to edit the look and feel of your OmniScripts. Design and style your OmniScript
by overwriting an element's HTML template, customizing which steps in the form to display, or using images
for buttons.
Running an OmniScript in Horizontal Mode

Scripts run in Horizontal Mode display an interactive sidebar. The sidebar shows the status of each step
and allows users to navigate the script by clicking on the step in the sidebar:
Step status icons:
• Completed—step is complete with no validation errors.

• Error—the step has validation errors.
• Active—current step.
• Pristine—the user has not navigated to step yet.
Users can always navigate to a previous step. To enable users to navigate to a future step, ensure there
are no actions between steps. Users cannot navigate to a future step if the current step has validation
errors - they must resolve all validation errors to be able to continue.
Click How to launch an activated script to get the specific URL syntax for launching your OmniScript in
Horizontal Mode.
Use Images for Buttons in OmniScript

Use images as buttons for both radio and multi-select options in OmniScript.
1. In an element, scroll down to the Options section for the element.

company 1006
OmniStudio
2. Select Image from the dropdown menus located under the Display Mode and Option Source.
3. Click the + Add button to choose which image to display. When the user selects the image while filling
out the OmniScript, the option's value is added to the Data JSON.
Line Break
The Line Break element creates a line break in the OmniScript wherever it exists.
Elements placed after a line break start on the next line regardless of an other element's width. Place the
Line break element directly above the element that should begin on a new line.
To use the Line Break element:
1. Drag the element into the OmniScript canvas.

2. When editing the Line Break's element properties, you can add additional padding below the line break
by entering a value in Additional Padding (px).
Results
The Line Break ensures that a line separates the elements surrounding the Line Break element. For
example, this image displays a Line Break element that separates a person's First and Last Name from
their phone and email in the UI.
See Also
• Modify OmniScript UI Behavior

Controlling Field Property

The Controlling Field Property on a Select Element can display Select Field Values based on the selection
of another value from a Controlling Select field. Both the controlling and dependent fields must pull their
field values from a field in Salesforce using the sObject property and those fields must have a Field
Dependency setup between one another via Salesforce Field Dependency feature. For more information,
see Define Dependent Picklist in the Salesforce Help.

company 1007
OmniStudio
Figure 12. Example Controlling Field Setup
Figure 13. Controlling Field Configuration

company 1008
OmniStudio
Figure 14. Dependent Field Configuration
Figure 15. Defined Field Dependency in Salesforce
Using Option Source Custom

When using Custom as an option source, you can define an Apex class that will pull in the Picklist values
source. For more information, see Populate Picklist Values From Apex.

company 1009
OmniStudio
Using Right-To-Left Languages

Vlocity supports right-to-left languages using the Lightning Player and via_core implemented in a separate
".rtl.css" file.
If you would like to implement the right-to-left functionality in your pages, add the following method in your
Visualforce page Apex Controller:
global Boolean isLanguageRTL {get{return

ApplicationUtilities.isLanguageRTL();}set;}
Add the following in your Visualforce page to include the rtl sheet:
<apex:stylesheet value="{!IF(isLanguageRTL, URLFOR($Resource.slds, '/assets/

styles/salesforce-lightning-design-system-vf.rtl.min.css'),
URLFOR($Resource.slds, '/assets/styles/salesforce-lightning-design-system-
vf.min.css'))}"/>
If your page does not include the Salesforce header or footer, you'll need to wrap it in your own HTML tags
with the dir="rtl" set. Please see the example below:
<apex:page docType="html-5.0" applyHtmlTag="false" showHeader="false"

sidebar="false" standardStylesheets="false" controller="CardCanvasController"
><html xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink" dir="{!IF(isLanguageRTL, 'rtl',
'ltr')}">...</html></apex:page>
Branding OmniScripts and Cards Using Vlocity Newport Design System

Customize the appearance and behavior of OmniScript elements and Card layouts using the Vlocity
Newport Design System. Newport includes Storybook.js, a browser-based preview tool that enables you to
see your changes in action.
Before you begin

If you are unfamiliar with using command-line interfaces, see Command Line 101 (git-tower
documentation).
System Requirements:

To install Newport and brand OmniScripts and Cards:

using a command-line interface. To see what components are provided by Newport, look at the
contents of the UI/components directory.

company 1010
OmniStudio
5. Add customizations to your theme. See Customizing OmniScripts and Cards with Vlocity Newport
Design System.
6. Apply the OmniScript to individual OmniScripts or override the Newport theme for the entire org. See
Deploy and Apply Global Styling Changes using the Newport Design System.
See Also
• Apply Custom Styling to OmniScripts with Static Resources
Customizing OmniScripts and Cards with Vlocity Newport Design System

To customize the appearance of your OmniScripts or Cards, edit the CSS and HTML files in the UI
subdirectory of the directory where you cloned Newport.

Themes are stored in the design-tokens folder. To create a new theme for your OmniScripts or Cards,
copy the vlocity-newport-skin folder to a new folder and edit the files in it as required. To change the color
scheme of a theme, edit the skin's *color.yml files. Some colors are specified using hex RGB codes,
others are specified using tokens that resolve to hex RGB colors. These tokens are defined in the
aliases/color.yml file. To change colors for a specific component, examine its definition to find the
source of its color properties, and trace it to the definition.
When you change colors, the Newport components are recompiled, so there is a slight delay before your
changes are reflected in the Previewer.
Simple Example: Using the Previewer, look at the definition for the input element, noting the orange
underline. To change the color of the line, edit design-tokens/vlocity-newport-skin/
background-color.yml and change the setting for COLOR_BORDER_INPUT_ACTIVE to a different
color token defined in /aliases/color.yml . To verify your change, view the input component using the
Previewer.
For an optimal appearance on all viewing platforms, set control width to 6. Smaller widths might not render
well on every platform.
Previewing Your Changes

To view the effect of Newport styles on an OmniScript, edit its Script Configuration and paste the path to the
top-level CSS file (by default, xxx.css) into the CUSTOM HTML TEMPLATES field.

company 1011
OmniStudio
The Newport Previewer enables you to view the definition, appearance, and behavior of Newport
components and utilities. You can see how the component will render on desktops, tablets, and
smartphones.
To preview an element or utility, choose it from the lists in the left pane. To view the code behind it, click
</>.
The restriction tree displays the hierarchy of element definitions, from the base implementation through all
the derived ones. To view a specific definition, click the corresponding node in the restriction tree.
Deploy and Apply Global Styling Changes using the Newport Design System
Add any changes to the Newport Design System theme by uploading and applying the theme in a
Salesforce org.
Before You Begin

1. Download the Newport Design System. See Apply Global Branding to OmniScripts.
2. Create a distribution folder containing your changes by issuing the following command: npm run-script dist
3. In versions before Vlocity Spring '19, change (cd) to the dist folder and zip its contents. (Do not zip the top-level dist folder: cd into it
and zip its contents.)
4. In Salesforce, upload the zip file as a static resource.
Apply Theme Changes to Individual LWC OmniScripts

Beginning with Vlocity Insurance and Health Spring '20, Upload modified Newport and SLDS themes as
static resources and load them into individual OmniScripts. See Apply Custom Styling to OmniScripts with
Static Resources.
Apply Theme Changes to the Entire Org

Apply modifications to the Newport template by adding a Static Resource that overrides the Newport
preview wherever it is available. Once uploaded, the Newport changes will apply to any OmniScripts using
Newport.
1. In your Salesforce org, go to Setup and, in the Quick Find box, enter Custom Settings.
2. Find UISettings, click Manage, click New and configure the following settings:
• Name: You must name this newportZipUrl for the changes to be applied.
• Key: Enter any name.
• Value: The relative URL for the static resource. To obtain the relative URL, go to the Static Resource
(see 4 in the Before You Begin section), click View File, and copy the URL after the domain name,
removing the question mark at the end. For example, the bold text would be copied in this URL:
https://salesforce-org-test.na75.visual.force.com/resource/16679825000/vloc_customNewport?
3. Preview your OmniScript and select the Newport page from the drop-down in the upper right-hand
corner to preview your changes.
Applying the Theme to a Single OmniScript using Visualforce

Before Vlocity Spring '19, to make your style changes available in Preview mode for the OmniScript
Designer, perform the following steps.

company 1012
OmniStudio
1. In OmniScript Designer, create or edit an OmniScript containing the elements you restyled.
2. Click Preview, then click How to launch activated script. The HOW TO LAUNCH dialog is displayed.
3. In the EMBEDDED section, click Newport, then click Copy to Clipboard.
4. In Salesforce, create a new Visualforce page and paste the copied code into it.
5. Exit the code and set the strCSSFileList="[]" and import the CSS file by adding the following
line:
<apex:stylesheet value="{!URLFOR($Resource.custom_nds, '/assets/styles/

vlocity-newport-design-system.css')}"/>
6. Save your Visualforce page.
7. In OmniScript Designer, go to the Script Configuration section of your test OmniScript and, under
Visualforce Pages Available In Preview, click Add New Key/Value Pair.
8. Set the key to the text you want to display in the drop-down list of players at the Preview window's top
right. Set the value to the name of the Visualforce page that you created in the previous steps.
9. Verify that the page is listed in the drop-down list of players at the Preview window's top right.
See Also

Customizing OmniScript Components Using Templates

The Vlocity product suite includes items to develop customized HTML, CSS, and JavaScript templates. You
can use these templates to enhance and extend the style and functionality of the Vlocity product suite
within your organization.
NOTE
LWC OmniScripts do not support Templates. For information on customizing LWC
OmniScript elements, see Create a Custom Lightning Web Component for OmniScript.
NOTE
Support for the Classic Player templates ended in the Vlocity Spring '18 release.

company 1013
OmniStudio
Creating a Custom Vlocity Template
NOTE
LWC OmniScripts do not support Templates. For information on customizing LWC
OmniScript elements, see Create a Custom Lightning Web Component for OmniScript.
Modifying an OmniScript element template changes how elements are rendered in an OmniScript. Modify
templates to either apply changes to a single instance of the element or to all elements of that type in an
OmniScript.
You can create or modify templates in the OmniScript's HTML Template, custom Vlocity Templates, or in a
Visualforce page. This topic explains how to create custom HTML templates using Vlocity Templates. For
information on how to use the modified templates, see Overwrite OmniScript Element Template.
To create a custom HTML template:
1. Click on the Vlocity Templates tab.

2. Click on the New button.
3. Enter the Template Name and Origin. For Template Type, specify OmniScript.
4. Enter the template's code. To download the HTML templates, see OmniScript Component Definitions.
The templates support the use of JavaScript.
5. Activate the template before using it.
Modifying or deleting a template does not automatically update the OmniScripts that use the template. To
update the scripts, deactivate and activate them.
Using Custom Labels

To use Salesforce Custom Labels in a Custom Template, use the following syntax:
::$root.vlocity.getCustomLabel('MyCustomLabelName', 'My default value')
NOTE
The labels displayed in the OmniScript designer are implemented as Custom Labels,
which means that you can enable translation and translate them. However, the labels that
you add using the designer are not Custom Labels, which means that to support a script in
multiple languages, you must create a version of the script for each language.

company 1014
OmniStudio
Downloading OmniScript Vlocity Templates

Beginning with Vlocity Insurance and Vlocity Health Summer '18, OmniScript templates can be imported
into your Org. For more information on Importing Templates, see Importing Vlocity Templates.
The Lightning Player and Classic Player templates can be downloaded by clicking the links below:
• Winter 18 Lightning Player Templates

• Summer 17 Lightning Player Templates
• Summer 17 Classic Player Templates
• v15 Lightning Player Templates
• Classic Player Templates
Installing Vlocity Templates

Beginning with Vlocity Insurance and Vlocity Health Summer '18, OmniScript templates can be installed
directly from within your org.
To install the templates:
1. Navigate to the Vlocity Templates tab.

2. Click the drop-down arrow to the right of the New, Import, Activate, and Deactivate options.
3. Select OmniScriptLightning or OmniScriptNewport.

4. Choose the Templates to install, and click Next.
The templates will appear under the Vlocity Templates tab.
Using Custom Templates

The appearance and behavior of OmniScript elements are configured in the base templates that are
installed when you install Vlocity. To customize the look and behavior of OmniScript elements, you can
create custom templates, which are modular UI components that are coded using Angular JS. (More
information about Angular templates) To create custom templates, use the Vlocity Template Designer.

company 1015
OmniStudio
To use templates in a single OmniScript, go to its Script Configuration section and paste the template code
into the Custom HTML Templates property. To apply one of the templates to an element, type the name of
the template in the element's HTML Template Id property. Note that the templates listed in the dropdown list
do not include the templates defined in the Custom HTML Templates property: only templates on the Vlocity
Template tab are listed.
To apply a template to all instances of a particular type of element in an OmniScript, add the element and
corresponding template to the Element Type To HTML Template Mapping list in the Script Configuration.
To apply a custom template to a single instance of an element in an OmniScript, set its HTML Template Id
property to the name of the template.
When displaying OmniScripts, Classic player and Lightning Player use different templates. To download the
HTML templates, see OmniScript Element Reference.
Structuring the Template

This topic describes the code that forms the structure of the vlcSelectableItemv2.html template.
• This template does not handle pagination out of the box but can be customized to do so.
• The code does support iteration through control.vlcSI.
• buttonClick offers remote call capabilities, and configureItem includes item configuration
capabilities
<script type="text/ng-template" id="vlcSelectableItemV2.html">

<h2>{{::control.propSetMap.label}}</h2>

<br/>
><div class="selecteableItem" ng-repeat='p in
control.vlcSI[control.itemsKey]'>
<div class="row result-box">

<div class="img-container padding0">
<img ng-if="p.Image" src="/servlet/servlet.FileDownload?
file={{p.Image}}"/>
</div>
<div class="product-info padding0" >
<h3 class="title">{{p.Name}}</h3>
<p class="description">
{{p.Description}}
</p>

</div>
<div class="flex" id="vlocity-price">
<div style="flex: 1;">
<span class="col-xs-6 col-sm-6 padding0">
<h6>{!$Label.OmniOneTime}</h6>
<h2>{{p.OneTimeCost}}</h2>
</span>
<span class="col-xs-6 col-sm-6 padding0">
<h6>{!$Label.OmniMonthly}</h6>
<h2>{{p.MonthlyCost}}</h2>
</span>
</div>
<div class="item-actions" ng-init=" p.isConfigurable == true ?
operation = 'configureProd' : operation = 'Add' ">

click="configureItem(bpTree.response, control, this, p, operation,
baseCtrl.customHandleSelectedItem, baseCtrl.customIsConfigurable)">
{!$Label.AddToCart}
</button>
</div>
</div>
</div>
</div>
</script>
Vlocity Template Elements

The vlcSelectableItemsV2 includes a wide array of elements out of the box.
Angular Template
The syntax below defines an Angular template:
<script type="text/ng-template" id="vlcSelectableItemV2.html">
• All Angular templates must start with a <script type> tag and end with a closing </script> tag
• The actual ID can be anything, as long as the same id is then used in the HTML Template ID field on the
script . in this example, the ID is vlcSelectableItemV2.html.

company 1017
OmniStudio
• This ID is how the framework identifies the template to load during runtime.
Scope Variable
This is a scope variable.
• Control is an object.
• propSetMap is a lower level variable for control.
• label is one level further down.
{{::control.propSetMap.label}}
• The double set of colons (::) denotes a One-Time Binding

• One-Time Binding means that Angular will only bind it once because it's a constant value, which means
that it's not going to change when the script loads. For anything that needs to change, do not use the ::
notation, because otherwise it will not refresh.
• Anything in double curly brackets ({{}})will be evaluated by Angular during runtime. This is interpolation.
• This code means, “during runtime, go and get the value of the label and put it here. It is a label for the
SelectableItem.”
• {{::control.propSetMap.label}} is a property panel, where control is the selectable item itself.
propSetMap is a node that will contain anything you set up in the OmniScript Designer panel.
• For any property you set in the OmniScript Designer, you can use this notation to access it.
• Any label defined in the OmniScript Designer can use this code to reference it.
Angular Directive
This syntax is used to define an Angular directive.
• Anything with class means the content is a CSS class.

• When you access the .css file, you should find a role call, something like .selectableItem.
<div class="selecteableItem" ng-repeat='p in

control.vlcSI[control.itemsKey]'>
• itemsKey is not a literal. Rather, it is a variable that must match what it’s set to in the Items Key field in
the OmniScript Designer, as the framework looks for this. During runtime, whatever it’s set in this field will
be reflected here control.vlcSI[control.itemsKey].
• p is a variable used to do the looping through the control.vlcSI[control.itemsKey] set. This is

the piece of code that will perform the key match to determine the JSON routing. If a match is found, it

company 1018
OmniStudio
will assign the whole JSON array to the node control.vlcSI[control.itemsKey]. Then, in the
template, you can use the ng-repeat function to loop through all the items in the array. Note that if an
array exists at the root level, then the ng-repeat function is not required.
• The variable can be named anything, but the name used must be used consistently in the loop further
below in the code {{p.Name}}, {{p.Description}}.
• During runtime, control.vlcSI[control.itemsKey] will attempt to access all the attributes for the
p. variable. In this example, Name and Description.
• For instance, if the JSON for the Selectable Item is {"SIKey":{"node1":"xxx", "recSet":[]}},
then vlcSI = {"node1":"xxx", "recSet":[]} and vlcSI[control.itemsKey] = [].
<div class="product-info padding0" >

<h3 class="title">{{p.Name}}</h3>
<p class="description">
{{p.Description}}
</p>
ng-repeat
• ng-repeat is an Angular directive.

• control.vlcSI is set by the framework.
When attempting to iterate through the list of items, you must use the syntax below:
ng-repeat='p in control.vlcSI[control.itemsKey]'
itemsKey
When a remote JSON response comes back, the way the framework knows that portion of the JSON needs
to go to the SelectableItem is based on the key match.
itemsKey
• For instance, if you have a Selectable Item called addresslist, and a remote JSON response comes
back. It can be anything, from a REST call, a remote call, a calculation, and so on; it does not matter as
all response JSONs are handled the same way.
• The JSON response has a key also called addresslist. The value for addresslist is a JSON
object.
• The framework finds a key match, therefore the framework knows that this portion of JSON needs to go
to the Selectable Item.
• The value for addresslist is likely to be an array. In this case, the array will become available for the
Selectable Item.
• Later in the template, you can use the ng-repeat to loop through all the elements in the array.
Custom Label (!$Label.OmniOneTime)

Syntax only supported by Salesforce.
Indicates that there is a custom label defined in Salesforce.

company 1019
OmniStudio
The name of the label is OmniOneTime, with syntax to refer to it available in the Visualforce component.
The values for these labels are usually stored under Custom Labels
During runtime, the string {!$Label.OmniOneTime} will be replaced by the value of the label, based on the
language. For example, if you have multiple languages (English, German, and so on), the notation !
$Label.OmniOneTime will automatically insert the correct language.
{!$Label.OmniOneTime}
Button Class
ng-click="buttonClick(bpTree.response, control, this, p, 'Add',
baseCtrl.customHandleSelectedItem)"> is a framework function that users can include on a
template.

click="buttonClick(bpTree.response, control, this, p, 'Add',
{!$Label.AddToCart}
</button>
• bpTree.response is the payload.

• Control is the selectable item.
• this is the current scope that the selectable item is in.
• p is the item you are selecting.
• add is the method to call.
• base is a custom JavaScript callback. This script waits until the call comes back, then you can define the
behavior. If the call is successful, the button will change, likewise if it’s a failure scenario.
• Users can add their own callbacks when coding their custom templates.
• Whenever you make a buttonClick framework call, since we are passing control (the selectable item).
internally, the framework call will go through the configuration for control and get a hold of everything that
is needed—remote class, remote method, remote options, and so on. This setting makes a call to the
server to retrieve the data.
For example, if there is a CPQ record and a getProducts method, by using the buttonClick call, it
will go to the control configuration (propSetMap) and take whatever configuration is there, then make a
call to the particular remote class with the payload as the data JSON in the OmniScript.
ng-click
It will try to see whether the configuration needs to open the modal or not. If it does, it will open the modal
first, then the button click will go into a modal . If it does not it will call the button click directly.
ng-click="configureItem(bpTree.response, control, this, p, operation,

UI Select and Compare

While the template does not offer modal compare out of box, it can be customized to do so.

company 1020
OmniStudio
<button ng-if='control.vlcSI && control.vlcSI[control.itemsKey] &&

control.vlcSI[control.itemsKey].length > 0' ng-click='openModal(this,
control)'>Compare</button>
If you wish to add a custom modal controller, use this code:
bpModule.controller('CustomCtrl', function ($scope, $modalInstance,

content) // CustomCtrl should be used in the SI config in step (2)
{
// content is the record array selected for compare
// customized modal controller
});
To add a compare check box, use the following code:
<input class='vlc-compare-check' type="checkbox" ng-model='p.vlcCompSelected'

ng-change="onCompSelectItem(control)" ng-disabled="control.compDisable && !
p.vlcCompSelected"/
This code sets vlcCompSelected.
For UI select, use the following code:
ng-click='onSelectItem(control, p, $index, this, true)'
If it's true, it toggles vlcSelected, if it's false, then it does not toggle.
Server Calls
Additional code may be added to call the server when the user clicks an item. This example shows the
code to add or remove an item from the cart.
Example 1. Add an Item

ng-click="buttonClick(bpTree.response, control, this, p, 'Add',
• This is the code to call an Apex class that implements VlocityOpenInterface (or VlocityOpenInterface2, if
you want to use SFDC continuation object.
• The fifth parameter is interpreted in your Apex class, it becomes vlcOperation in options.
• The last parameter is a custom JavaScript call back to handle the UI refresh after the remote call, for
example, if the call is successful, then you can change the state of the item, which in turn triggers the
dynamic CSS.
Example 2. Remove an Item

ng-click="buttonClick(bpTree.response, control, this, p, 'Remove',
baseCtrl.prototype.customHandleSelectedItem = function(....)

company 1021
OmniStudio
Custom JavaScript for Selectable Items, define prototype methods
baseCtrl.prototype.XXX = function(....)
{
}
Vlocity Template Types

This topic describes the different template types:
• Selectable
• Modal
• Compare
Modal for the Item
Example 3. Code to Add a Modal Setting for the Item
ng-click="configureItem(bpTree.response, control, this, p, operation,

• This piece of code handles modal for an item. Configure the 'MODAL CONFIGURATION SETTING’.
• Parameter operation becomes vlcOperation in the remote Apex class (same as above).
• The sixth parameter is a custom JavaScript call back.
• The seventh parameter is a custom JavaScript to decide whether to pop up the modal or not.
• A modal can be included anywhere on the page. On initialization, a modal's current size will be cached,
and the element will be detached from the DOM and moved inside a dimmer.
Apex Class Overview for a Template

Apex is a strongly typed, object-oriented programming language that enables developers to execute flow
and transaction control statements on the Force.com platform server in conjunction with calls to the
Force.com API.
Using syntax that looks like Java and acts like database stored procedures, Apex enables developers to
add business logic to most system events, including button clicks, related record updates, and Visualforce
pages. Apex code can be initiated by Web service requests and from triggers on objects.
Store Apex on the platform in two different forms:
• A class is a template or blueprint from which Apex objects are created. Classes consist of other classes,
user-defined methods, variables, exception types, and static initialization code. From Setup, enter Apex
Classes in the Quick Find box, then select Apex Classes.
• A trigger is Apex code that executes before or after specific data manipulation language (DML) events
occur, such as before object records are inserted into the database, or after records have been deleted.
Triggers are stored as metadata in Salesforce. A list of all triggers in your organization is located on the
Apex Triggers page in Setup.

company 1022
OmniStudio
The following example is an Apex class with a Selectable Items element named checks, and a template
named customCheckList.html.
Example 4. Apex Class for Template

Class(CTMAddressPrefillTest.addressPrefill): global with sharing class
CTMAddressPrefillTest implements vlocity_ins.VlocityOpenInterface {
global CTMAddressPrefillTest() {}
global Boolean invokeMethod(String methodName, Map < String, Object >
inputMap, Map < String, Object > outMap, Map < String, Object > options) {
Boolean result = true;
if (methodName.equals('addressPrefill')) {
String jsonInput = '[{"suburb":"Forth","postcode":"7310","state":"TAS",
"vlcSelected":true}]';
outMap.put('SituationSuburbLookup', JSON.deserializeUntyped(jsonInput));
} else {
result = false;
}
return result;
}
}
SituationSuburbLookup is the Selectable Item
outMap.put('SituationSuburbLookup', JSON.deserializeUntyped(jsonInput));
In this case, the prefill JSON must be:
"SituationSuburbLookup": [{
"suburb": "Forth",
"postcode": "7310",
"state": "TAS",
"vlcSelected": true
}]
Choose the following items in the custom markup on the OmniScript Designer to make this class work:
• Mode: Multi
• Data JSON: True

company 1023
OmniStudio
In the custom markup for the Selectable Item, use control.vlcSI[control.itemsKey] for your ng-repeat .
<div ng-repeat='p in control.vlcSI[control.itemsKey]' ng-

init='onSelectItem(control, p, $index, this, false)'> <input type='text' ng-
model='p.suburb' ></input> <input type='text' ng-model='p.postcode' ></input>
<input type='text' ng-model='p.state' ></input> </div>
The first remote action invokes a test class to return the following:
{
"SituationSuburbLookup": [{
"suburb": "Forth",
"postcode": "7310",
"state": "TAS",
"vlcSelected": true
}]
}
NOTE
The Selectable Item will be prefilled with data JSON. If the user changes one of the
address fields, the data JSON will be updated accordingly.
Modify OmniScript UI Behavior

This section explains how to modify UI behaviors in an OmniScript.
Behavior options include:
• Hide or show elements and errors conditionally

• Hide Next and Previous buttons
• Trigger events
Configuring the Cancel Link in an OmniScript

The Cancel link appears on every Step in an OmniScript. From the OmniScript Designer, in the Cancel
Options section of the Script Configuration, you can specify the behavior for when a user hits the Cancel
link with the Cancel Type and Cancel Source.
• Allow Cancel: Remove the Cancel button option from the OmniScript by clearing the Allow Cancel box.
• Cancel Type:
• SObject redirects to an SFDC object. Enter the merge field of the record that you want to redirect to in
Source. Default is %ContextId%.
• URL redirects to a URL.

company 1024
OmniStudio
• Redirect directs to an HTML template, specified in the Source

• Dismiss closes the script and presents a blank page. This is the pre-Version 12 behavior of the Cancel
link.
• Cancel Source:
• If redirecting to an SObject, enter "%ContextId%" to redirect to the record that the script launched from.
• If redirecting to a URL, enter the page and parameters. For example, "MyTestPage?Id=%ContextId%"
would redirect to an internal page and "http://www.vlocity.com"; would redirect to an external page.
• If you selected Redirect as the Cancel Type, in the Cancel Redirect Page Name and Cancel Redirect
Template Url, enter the page name and template that the OmniScript should redirect.
Conditionally Display Elements Using the Conditional View Property

Every step, block, or element supports Conditional Viewing. Conditional Views allow you to hide the
element or the group of elements contained in a block or step based on certain conditions.
Elements contain up to three conditional view options depending on the Type of element. For example, an
Action outside of a Step does not have a Read Only option since the action is not visible.
To set up Conditional Views:
1. From the Properties section on the element, go to the Conditional View section.
2. Select a Condition Type from the drop-down menu.
LWC OmniScript Classic OmniScript Description

Designer Designer
Conditions Conditions
Show Element if Hide element if The element renders only if the conditional is true. If the conditional is false,
True false the element is hidden from the UI.
Disable Read Only Set element to read Disables Read Only on an element if the conditional is true. If the value is
if True only if false false, the element becomes Read Only.
NOTE
Beginning with Vlocity Insurance and Health Spring
'20, this Condition Type takes priority over the Read
Only property in the element.
Set Element to Set required The element becomes required if the condition is true.
Required if True element to optional
if false
NOTE
Beginning with Vlocity Insurance and Health Spring
'20, this Condition Type takes priority over the
Required property in the element.
3. Choose the logical operator for the group (AND or OR). The AND operator requires that both
conditions are met; the OR operator requires that one of the other condition is met.
4. Click Add Condition.
5. In the left operand, enter the name of the element in plain text.

company 1025
OmniStudio
NOTE
If the element is repeatable, enter the name of the element followed by |x, where x is
the xth repeated element. For example, if Age is repeated, Age|2 refers to the second
instance of the repeated element.
6. In the right operand enter one of these syntax types::

• If the element type is Text, enter the string in plain text.
• If the element type is Checkbox or Disclosure, enter true or false.

• If the element type is Number, enter a number.
• If the element type is Select or Radio, type in the name of the option in plain text—for example, Yes
or No.
• If the element type is Multi-Select, enter a semicolon-separated string—for example Ind;Small.
• If the element type is Date, Time, or Date/Time, the value should be in ISO format:
• Date—2014-10-01T07:00:00.000Z (Wed Oct 01 2014 00:00:00 GMT-0700 (PDT)
• Date/Time—1970-01-02T06:19:00.000Z (Tue Feb 17 2015 22:20:03 GMT-0800 (PST))
• Time—2015-02-21T00:09:40.270Z (Thu Jan 01 1970 22:19:00 GMT-0800 (PST))
• The right operand supports merge fields. For example Name = %contactLastName%
7. Beginning with Vlocity Insurance and Health Summer '20, in the canvas, click the Hide Conditional
Elements checkbox to hide all of the conditional elements in the OmniScript. The conditional elements
are marked with a yellow eye icon.

company 1026
OmniStudio
8. In the canvas, click the Hide Conditional Elements checkbox to hide all of the conditional elements in
the OmniScript. The conditional elements are marked with a yellow eye icon.
Running Validation with onChange

Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, LWC OmniScripts run
validation when a user clicks out of a field by using the onBlur function.

NOTE
See Also
• Hide OmniScript Elements

• Access OmniScript Data JSON with Merge Fields

company 1027
OmniStudio
Hide OmniScript Elements

Hide elements and child elements using the Hide property available on OmniScript Input Components,
Blocks, Steps, Groups, Formulas, and Aggregate elements.
1. From the element properties panel, click Edit as JSON.

2. Set the "hide" property's value to "true".
Exclusive to Angular OmniScripts, to enable a hidden element to be prefilled:
1. Click the element you want to prefill with data.

2. Check the box labeled Available for Prefill When Hidden.
See Also
• Creating Dynamic Forms Using the Conditional View Property

• Prefill OmniScript Elements using DataRaptor
Hide the Next and Previous Buttons

Hide a Step's Next and Previous buttons when using auto-advance options or when you do not want the
user to navigate steps.
To hide a Step's Next or Previous button:
1. In the Step's properties, expand the Button Properties section.

2. Drag the Previous or Next Width slider to 0.
3. Save your OmniScript and preview the new behavior.
Customize OmniScript Error Messages

The error message handler enables you to replace default error messages from remote apex calls with
more user-friendly error messages when errors occur in OmniScript. The Error Messages handler property
is available in File elements, Image elements, all Action elements, OmniScript Script Configuration, and
Setup.
NOTE
Error Messages set in the Setup or Script Configuration properties apply to any matching
error returned by an element, while Error Messages set in an Action’s properties only
render for that Action.
Error Message Description

Type
Default Error A default message that returns when no Custom Error Messages are matched or defined. The Default Error
Message Message property is not available in Script Configuration or Setup.

company 1028
OmniStudio
Error Message Description

Type
Custom Error Messages that are returned based on the defined path and value. Custom Error Messages are configured using
Messages the following fields:
• Path: A merge field path that locates the original default value inside an error object.
• Value: The original error message, including spaces, that will be replaced by the text defined in the Message
field. This value must match the original error exactly.
• Message: The custom message that will replace the error text defined in the Value field.
Set the Default Error Message on an OmniScript Element

Replace a Default Error Message with a user-friendly error message when a remote apex call error occurs
in your OmniScript. A default message returns when no Custom Error Messages are matched or defined.
Update the default error messages for Image, Action, and File elements.
Before You Begin

Before configuring Error Messages, preview the errors to determine their format.
1. Open the Error Messages property in the element that renders the error.
2. In the Default Error Message field, enter your custom message.
3. Preview the error to ensure the message renders.
See Also
• Set a Custom Error Message That Returns as an Object

• Set a Custom Error Message That Returns as a String
Set a Custom Error Message That Returns as an Object

Set a Custom Error Message for an error that returns as an object. A Custom Error Message returns based
on a defined path and value. Set custom error messages for File elements, Image elements, all Action
elements, OmniScript Script Configuration, and Setup.
Before You Begin

1. Run the OmniScript to encounter the error.

2. Determine the path to the error. For example, the path for errorCode in the following error
[{"errorCode":"NOT_FOUND","message":"The requested resource does not
exist"}] is 0 : errorCode .
3. Copy the error message text that follows the path. For example, the error message text for errorCode
in the following error: [{"errorCode":"NOT_FOUND","message":"The requested resource
does not exist"}] is NOT_FOUND .
4. Open the Error Messages property in the Action Element that is rendering the error.
5. In the Path field, enter the path determined by Step 2.
6. In the Value field, paste the original error.
7. In the Message field, enter your custom message.

company 1029
OmniStudio
8. Test to ensure the message is being replaced.
See Also
• Set a Custom Error Message That Returns as a String

• Set the Default Error Message on an OmniScript Element
Set a Custom Error Message That Returns as a String

Set a Custom Error Message for an error that returns as a string. A Custom Error Message returns based
on a defined path and value. Set custom error messages for File elements, Image elements, all Action
elements, OmniScript Script Configuration, and Setup.
Before You Begin

1. Run the OmniScript to encounter the error.

2. Copy the text following the colon after the word Error.
3. Open the Error Messages property in the Action Element that is rendering the error.
4. In the Value field, paste the original error.
5. In the Message field, enter your custom message.
6. Test to ensure the message is being replaced.
See Also
• Set the Default Error Message on an OmniScript Element

• Set a Custom Error Message That Returns as an Object
Display Messages in OmniScripts

Display comments, requirements, success, and warning messaging depending on whether the validate
expression returns true or false. Configure the Messaging element after Creating a Formula or Aggregate in
an OmniScript, or any other element, to display validation messages in the OmniScript. Merge fields are
supported in messages.
To add a Messaging element to an OmniScript:
1. From the OmniScript Designer, drag a Messaging element into the structure panel where the message
must appear.
2. For Validate Expression enter the expression that should be validated. You can evaluate any element
or elements, including Formula and Aggregate. For more information about formulas, see Create
Formula Fields in an OmniScript. For more information about setting up expressions, see Dynamic
Forms Using the Conditional View Property.
3. In the Messages section, select message types for when the expression evaluates as true or false and
then enter messages. True and False messaging can be deactivated and messaging is optional.
Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, LWC OmniScript
supports the Messaging element.

company 1030
OmniStudio
In LWC OmniScripts, validation runs when a user clicks out of a field by using the onBlur function. In

NOTE
Messaging Example
In this example, a Requirement message displays when a user is under the age of eighteen:
• The Messaging element's Validation Expression fails when the Birthdate field has a value, and the
AgeFormula element is less than eighteen:
• The Formula element uses the AGE function to return the age of the user based on the date entered into
the Birthdate element:
• The Requirement message displays when the validation fails:

company 1031
OmniStudio
Message Types
The LWC OmniScript messages have different styling than Angular OmniScript messages. The LWC
OmniScript messages use pure SLDS styling. This table provides examples of both LWC OmniScript and
Angular OmniScript messages.
NOTE
In LWC OmniScripts, messages will remain until a user enters a valid value.
Message LWC LWC Angular OmniScript Lightning Angular OmniScript Newport

Type OmniScript OmniScript Example Example
Lightning Newport
Example Example
Success
Requirement
Warning
Comment

company 1032
OmniStudio
Enabling Confirmation Prompts

You can enable confirmation prompts for the following OmniScript actions which, by default, do not prompt
the user to confirm before they are executed:
• Calculation
• DataRaptor Extract
• DataRaptor Post
• DataRaptor Transform
• DocuSign Envelope
• DocuSign Signature
• Done
• Email
• Integration Procedure
• Matrix
• PDF
• Post to Object
• Remote Action
• Rest Action
• Review
• Set Errors
• Set Values
To enable confirmation prompting for one of these elements in an OmniScript:
1. In the OmniScript Designer, select the element in the Structure pane. Its properties display in the
Properties pane.
2. Click Edit as JSON. The JSON definition for the element properties is displayed.
3. Add the following key/value entries to the top level of the JSON:
{ ..., "confirm": "true", "remoteConfirmMsg": "Text of the confirmation

prompt", "subLabel": "Text displayed on the Submit button" , "cancelLabel":
"Text displayed on the Cancel button", ... }
NOTE
Unlike the actions listed above, the Delete action properties pane includes settings for
confirmation prompting.
For multi-language OmniScripts, create Salesforce custom labels for the confirmation message, Submit
button text, and Cancel button text. In the properties JSON, specify the names of the custom labels rather
than the literal text to be displayed.

company 1033
OmniStudio
Fire Platform Events from OmniScripts

Fire Salesforce platform events from the context of an OmniScript.
1. Go to Setup and, under Develop, click Platform Events.

2. On the Platform Events page, click New Platform Event.
3. On the New Platform Event page, define the platform event, specifying the fields for the data that you
want to associate with the event.
4. To fire the event, create a DataRaptor Load that populates the platform event fields with event-specific
data.
5. In the OmniScript, compose the data JSON containing the data required by the DataRaptor Load.
6. Add a DataRaptor Load action to the OmniScript, specifying the DataRaptor that fires the platform
event.
To verify that your platform event was fired correctly, use one of the programmatic methods described in the
related Salesforce developer documentation.
Set Errors In an OmniScript

Put error or validation messaging on one or more elements in a previous step based on conditions from
future steps using the Set Errors action element. Using required fields and Formula/Messaging elements,
you can only set requirements and conditions on elements in the current step.
For example, on an application, an email address may not be required during the initial intake step, and in a
future step, the user states that they wish to be contacted by email.
The Set Errors element runs after the step and returns the user to the initial intake step with custom error
messaging:

company 1034
OmniStudio
The Set Errors element:

company 1035
OmniStudio
1. In OmniScript, drag the Set Errors element into the canvas.

2. Add a conditional to control when the Set Errors message displays. Without a conditional the error will
persist in the OmniScript. See Conditionally Display Elements Using the Conditional View Property.
3. In the Element Name field, enter the name of your element.
4. In the Value field, enter the error message that displays to the user.

company 1036
OmniStudio
NOTE
The Set Errors action does not support these elements: File, Image, Messaging, and
Formula.
Triggering Lightning Events in OmniScript

It is possible to trigger Lightning events from within an OmniScript. For example, you may wish to update an
item on a Layout when an OmniScript is completed.
This is accomplished by using JavaScript to perform the following call
if ('parentIFrame' in window) {
window.parentIFrame.sendMessage({
message: 'ltng:event',
event: 'e.force:refreshView'
})
The message in the code should always be 'ltng:event'.
The event in the code should be one of the following events:
• e.force:navigateToComponent
• e.force:navigateToList
• e.force:navigateToObjectHome
• e.force:navigateToRelatedList
• e.force:navigateToSObject
• e.force:navigateToURL
• e.force:refreshView
• e.force:showToast
• e.ltng:sendMessage
If the event has params, the JSON for the params should be specified on a params field like the example
below:
if ('parentIFrame' in window) {
window.parentIFrame.sendMessage({
message: 'ltng:event',

company 1037
OmniStudio
event: 'e.force:navigateToComponent',
params: {
componentDef : "c:myComponent", componentAttributes: { contactName : contact.Name
})
To fire a lightning event from a Done Action:
1. Download the following DataPack and review the code in the custom template that fires the
force:refreshView event from the datapack: Done Action with Lightning Refresh Example.
2. Replace the Done action's template with a custom template using the template provided in the
datapack as a reference.
3. Write a function to fire the force:refreshView event from the Done Action. For more information on the
force:refreshView event, see https://developer.salesforce.com/docs/component-library/bundle/
force:refreshView/documentation.
OmniScript Data and External Integrations

OmniScript handles data and external integrations through OmniScript Action Elements, OmniScript Group
Elements, and OmniScript Input Elements. Elements use DataRaptors, Integration Procedures, HTTP
Actions, and Apex to load, transform, and post data.
Load Data into OmniScript Elements

Populate OmniScript elements with data to prefill elements, create selectable options, dynamically display
elements, and test functionality. Load data into your OmniScript using DataRaptors, Integration Procedures,
HTTP Actions, URL parameters, or Apex.
Load Salesforce Data into OmniScript Using DataRaptor

Add Salesforce data into your OmniScript using a DataRaptor Extract Action.
To get data from Salesforce into OmniScript elements, create a DataRaptor Extract, as follows.
1. From the Vlocity DataRaptor page, click New.

2. Choose Extract and specify a Name, Type, and SubType.
On the Extract tab, map data from sObjects to an intermediate structure called the Extraction Step JSON.
For each sObject from which your OmniScript requires data, perform the following steps:
1. Click Add Extract Step and choose the source sObject.

2. In the Extract Output Path field, specify the name of the top-level node in the Extraction Step JSON
where you want the data to reside.

company 1038
OmniStudio
3. To filter the incoming data, specify filter settings. Typically you compare the context Id from the sObject
with a merge field containing the context Id from the OmniScript, for example, Id = %caseId%.
4. On the Formulas tab, you can define expressions that add data to the Extraction Step JSON. For
more information, see DataRaptor Operators and Functions.
5. On the Output tab, map data from the Extraction Step JSON to the Current JSON Output, which is
returned to the OmniScript. For each OmniScript element that you want to populate with data, click +
and specify the source - the Extract Step JSON node - and the output path for the data. The name of
the output JSON node must match the OmniScript element that you want to populate using the data in
the node.
To make mapping easier, edit the OmniScript using the OmniScript Designer and copy its Data JSON to the
Expected JSON Output pane of the DataRaptor Designer, which populates the Output Data Type field
with a list of valid output fields.
Prefill OmniScript Elements using DataRaptor

If you launch an OmniScript from a detail page, you can use DataRaptor to prefill any field from that record
into an OmniScript. For example, if an OmniScript is launched from a contact record, then DataRaptor can
automatically populate the name and address of the contact into the form.
Additionally, you can use DataRaptor to extract data from Salesforce based on data already entered in an
OmniScript. For example, if you enter the first and last name of a contact, DataRaptor can use this
information to retrieve and fill additional fields for that contact.
1. Create a DataRaptor Extract (JSON) Interface. For more information, see DataRaptor Extract
Overview.
2. Create one or more Extract Data Mappings to generate an Extraction Step JSON. For more
information, see Load Salesforce Data into OmniScript Using DataRaptor.
3. Create one or more Transform Data Mappings to map fields from the Extraction Step JSON into
elements on the script. For more information, see Create a DataRaptor Extract.
For example, you might want to create an OmniScript for troubleshooting common customer issues. For
this OmniScript, you will want to prefill six elements on the OmniScript: AccountName, AccountId,
CaseNumber, CaseDescription, CaseStatus, and CaseSubject. Since the form is being launched from a
Case record, the Id of the Case will get passed into the ContextId element of the OmniScript. Using that Id,
DataRaptor queries the Case and Account table to retrieve the requested rows.
Why Isn't My Conditional Element Prefilled?

OmniScript elements that have a conditional element are not prefilled by default, to maximize script
performance.
To prefill a conditional element, perform the following steps:
1. Click the element you want to prefill.

2. Check the box labeled Available for Prefill When Hidden.

company 1039
OmniStudio
If the Available for Prefill When Hidden checkbox does not exist on the element, set the element's
"accessibleInFutureSteps" property to true.
To set the element property "accessibleInFutureSteps": true
1. Load the OmniScript with the conditional element.

2. Click the Conditional element.
3. Click Edit as JSON.
4. Change the property "accessibleInFutureSteps": false to "accessibleInFutureSteps": true
The LookupText.json file is a sample conditional element and a DataRaptor Extract prefill with
"accessibleInFutureSteps": true on the Employees2 element.
Prefill Repeatable Blocks

Prefill repeatable blocks with data by passing data to the block in an array format.
The data's root node name must match the name of the block element. The fields within each array
instance of the data JSON node must match the name of an element within the block. Prefill data into
repeatable blocks with Actions by returning data that matches the block's element name and the element's
within the block using an array format.

company 1040
OmniStudio
support prefilling repeatable blocks.
Data JSON array format example:
"EditBlock1": [
{
"FirstName": "John",
"LastName": "Smith"
},
{
"FirstName": "Jane",
"LastName": "Smith"
}
]
To map Data JSON to a Repeatable Block with a Set Values action:
1. Add a Block or Edit Block to the OmniScript.

2. (Optional) When using a Block, check the Block's Repeat checkbox property.
NOTE
Edit Blocks are inherently repeatable because they store entry values in an array
format.
3. Add Input elements to the Block.

4. Add a Set Values Action to the OmniScript.
5. In the Set Values Action, click Add New Value.
6. In the Element Name field, enter the name of your block element.
7. Click Edit as JSON in the Set Values Action element to edit the JSON directly.
8. In the elementValueMap JSON node, locate the block element's JSON node, and enter an array of
data. For example, to prefill two Text input elements in an Edit Block element, add an array that maps
to the elements in the block.
Edit Block Element configuration:

company 1041
OmniStudio
JSON Array:
"EditBlock1": [
{
"LastName": "Smith"
},
{
"FirstName": "Jane",
"LastName": "Smith"
}
]
9. Click Edit in Property Editor to convert back to the default view of the Set Values Action.
10. Preview the OmniScript to view the nested data in the OmniScript's data JSON.

company 1042
OmniStudio
For more information on prefilling elements, see Prefill OmniScript Elements using DataRaptor.
Seed Data Into an OmniScript

Prefill OmniScript fields with data or add hidden nodes to the OmniScript Data JSON using the Seed Data
JSON property in the OmniScript's Setup section.
The Seed Data JSON property should be used with static values that seed during the initial load of the
OmniScript. In order to set values using formulas or with information entered into the OmniScript after the
initial load, see Set Values in an OmniScript.
1. In the OmniScript's Script Configuration, find Seed Data JSON section and click +Add New Key/
Value Pair.
2. Enter the name of the element to prefill in the left text field. Enter the desired value of the element in
the right text field. If the element has multiple responses, such as a multi-select, you can prefill more
than one value by separating the entries with a semicolon.
3. When the user launches the script, the elements specified in the Seed Data JSON section contain the
static values from the Script Configurations.
4. You can also use the Seed Data JSON property to add hidden nodes to the Data JSON of the
OmniScript. For example, an OmniScript used for troubleshooting may create a case. You could use
the default values from hidden nodes to prefill values. For example, you may want the OmniScript to
create a Case with Type, Status, and Origin defined in the Data JSON of the OmniScript. Using this
method, you can have multiple OmniScripts associated with one DataRaptor interface that creates the
Case.
See Also
• Set Values in an OmniScript

Set a Default Value for an Element

The Default Value property enables the JSON value of an element to be set to a static value by default and
exists on certain Elements. The Default Value will be overwritten if the Element is prefilled from a
DataRaptor or JSON response. For more information on dynamically prefilling values, see Prefill
OmniScript Elements using DataRaptor.

company 1043
OmniStudio
1. From the OmniScript’s Script Configuration panel, click the Element to open its properties panel.
2. From the Element’s properties panel, click the Default Value field, and enter a value.
3. Preview the OmniScript to view the default value in the Data JSON.
Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, Default Value fields in
LWC OmniScripts accept merge field syntax. For more information, see Access OmniScript Data JSON
with Merge Fields.
Manage OmniScript Data

This section contains information on how to transform, evaluate, and set data in OmniScript. The data is
maintained in an intermediate structure called the data JSON, which is visible to you, the developer, as you
define the OmniScript. Data JSON is not visible to users who run the OmniScript.
Set Values in an OmniScript

Set element values in future steps, rename JSON nodes, create dynamic values, and concatenate data by
using the Set Values Action. Action elements either render as a button when in a Step or run remotely when
between steps. Set Values relies on using merge fields to access the OmniScript's data JSON. For more
information on merge fields, see Access OmniScript Data JSON with Merge Fields
Use the Set Values Action to:
• Access and rename data JSON by using merge fields

• Populate Elements with values
• Concatenate Values
• Set values sent into the data JSON from a response or parameter
• Create values determined by OmniScript Functions and Supported Formula Operators
Download this datapack and test the behaviors the examples on this page provide.
Rename Data JSON Nodes

Simplify and rename JSON node names by accessing the values in an OmniScript's data JSON. Data sent
into the OmniScript's data JSON from a parameter, an action's response data, or an element is accessible
by using merge fields. For more information, see Access OmniScript Data JSON with Merge Fields.
To rename a node:
1. From OmniScript Designer, click Preview.

2. Enter in some information and view the OmniScript's data JSON.
3. Locate the JSON node in the OmniScript's data JSON.
6. In the Element Name field, enter the new JSON node name.
7. In the Value field, enter the name of the JSON node using merge field syntax to map it to the new
JSON node.

company 1044
OmniStudio
8. Preview the OmniScript and view the new JSON node name.
Populate Elements
Populate future elements with values from data JSON, formula operators, functions, concatenations, and
static values. Prefill an element directly from a DataRaptor or Action response whenever possible. See
Prefill OmniScript Elements using DataRaptor for more information.
NOTE
When populating an element using Set Values, data types must match. For example, you
cannot set a Text element with the value from a Number element.
To populate an element:
1. Locate the JSON node in the OmniScript's data JSON.

company 1045
OmniStudio

4. In the Element Name field, enter the name of an Element in a Step that renders after the Set Values
Action.
NOTE
When the Element Name maps to an existing element in the OmniScript, the
element's Type appears between the Element Name field and the Value field.
5. In the Value field, enter the name of the JSON node using merge syntax to map it to the new JSON
node.
6. Preview the OmniScript to ensure the fields populate correctly

company 1046
OmniStudio
Concatenate Values
Create dynamic values by concatenating JSON nodes.

3. In the Element Name field, enter a JSON node or element name.
4. In the Value field, click fx and enter multiple merge fields or a combination of merge fields and literal
values.
Element Name Example Value Syntax Example

FullName =%FirstName% + " " + %LastName%
FullName =%FirstName% + " " + "Smith"
WelcomeGreeting =("Welcome, %FirstName% %LastName%")
5. Preview the OmniScript to test the concatenation.
Set Data with Formulas and Functions

Generate dynamic values by evaluating data with Formulas and using functions to return specific values.
For more information, see OmniScript Functions and Supported Formula Operators.

4. In the Value field, click fx to open the formula editor.
5. In the functions panel, select a function and add any additional data to the formula editor.

company 1047
OmniStudio
6. Preview the OmniScript to test the function.
To use a formula operator:

4. In the Value field, click fx to open the formula editor.
5. Add static values, or dynamic values using merge fields, and add an operator.
NOTE
There must be a space on either side of an operator for the operation to run correctly.
Element Name Example Value Formula Syntax

MergeValues = %GrossIncome% - %NetIncome%
MergeAndLiteralValues = %GrossIncome% - 5000
LiteralValues =2-2
6. Preview the OmniScript to ensure the operation performs correctly.
Set and Access Nested Data

Set and access nested data by editing the Set Values JSON directly and using specific syntax.

3. In the Element Name field, enter a new JSON node name or element name.
4. Click Edit as JSON in the Set Values Action element to edit the JSON directly.
5. In the elementValueMap JSON node, add a valid JSON value to the node name created in the
Element Name field.

company 1048
OmniStudio
6. Click Edit in Property Editor to convert back to the default view of the Set Values Action.
7. Preview the OmniScript to view the nested data in the OmniScript's data JSON.
To access nested data and set it to an element name or JSON node:

3. In the Element Name field, enter a new JSON node name or element name.
4. In the Value field, apply merge field syntax to access the appropriate value. For more information, see
Access OmniScript Data JSON with Merge Fields.
5. Preview the OmniScript to ensure the value maps to the new JSON node correctly.
See Also
• Load Data into OmniScript Elements

• Test Angular OmniScript Data in the OmniScript Data Panel
Manipulate JSON with the Send/Response Transformations Properties

Specify and transform the input and output JSON of OmniScripts or Integration Procedures with the Send
and Response Transformation properties. The Send properties transform the input; the Response
properties transform the output.
The following table outlines the different transformation options:
Purpose Send/ Send/Response JSON Node Example Path Example

Response Result
JSON Path
Reparenting the node path node {path:{a:b}} {node: {a:b}}
Reparenting the node and adding a path node1:node2 {path:{a:b}} {node1:
nested node {node2:{a:b}}}
Reparenting the node dynamically path %nodename% {path:{a:b}} {node: {a:b}}
using merge field syntax
where the value of nodename
(In Summer '19 and later releases) is node
Removing the parent node of an path VlocityNoRootNode {path:{a:b}} {a:b}
object
(Not supported in Integration
Procedures)
Specifying the root node to drill path {path:{a:b}} {path:{a:b}}
down on instead of sending the
entire JSON
To reparent the node of a JSON object:
1. Set the Path to the node you are drilling down on.
2. Enter the new node name into the JSON Node field.
To reparent the node and add a nested node:

company 1049
OmniStudio
2. Enter the new node name into the JSON Node field, and enter a colon (:).
3. After the colon, without leaving a space, enter the second JSON node name.
To reparent the node using merge field syntax:
2. In the JSON Node field, enter a merge field that represents the new name, for example %NewNode%.
3. Use a SetValues action or an input parameter on the Preview tab to test the merge field.
For example, on the Preview tab, enter a Key of NewNode and a Value of MightyNode, click Execute
and then look for MightyNode in the output JSON.
To write to a list item using merge field syntax:
1. In the Response JSON Node field of a step, enter the path to the list node followed by a pipe
character (|) and a merge field that represents the list item number, for example, ListNode|%item%.
2. Use a SetValues action or an input parameter on the Preview tab to test the merge field.
For example, on the Preview tab, enter a Key of item and a Value of 2, click Execute, and watch the
step output appear as the second item in the list.
If the step output node and the existing list item node match, the list item value is replaced. If they don't
match, the step output node is added as a peer of the existing list item node.
To remove the parent node of an object:
1. Set your Path to the node you are drilling down on.
2. Set the Node to VlocityNoRootNode.
To specify the root node:
2. Leave the JSON Node field blank.
To test the result of your transformation, open the Debug console:
1. Preview the OmniScript in the OmniScript Designer and enter input that you need to transform.
2. After the action containing the JSON transformation has run, click Debug to open the Debug console.
3. In the Debug console, expand the action that is sending or receiving the transformed JSON.
4. Expand the Request to see JSON that has been transformed by the Send JSON Path and Send
JSON Node, or expand the Response to see JSON that has been transformed by the Response
JSON Path and Response JSON Node.
Calculation Action
Call a Vlocity Calculation Procedure directly from an OmniScript using the Calculation Action.
When the action executes, inputs from the form are sent to the Procedure—either directly or through a
DataRaptor pretransform service—and the output is returned to the OmniScript—either directly or through a
DataRaptor post-transform service.

company 1050
OmniStudio
Before you Begin

Create a Calculation Procedure. See Calculation Procedures and Matrices.
1. Add a Calculation Action to the OmniScript canvas, and add a Name.

2. In Remote Properties, in the Remote Class field, enter NS.PricingMatrixCalculationService,
and replace NS with the namespace of your Vlocity package. For information on the package
namespace, see Viewing the Namespace and Version of the Vlocity Package.

company 1051
OmniStudio
3. In the Remote Method field, enter calculate.

company 1052
OmniStudio
4. In the Configuration Name field, enter the name of a Calculation Procedure.

5. (Optional) In the Pre-Transform DataRaptor Interface field, enter a DataRaptor that transforms the
jSON node names being sent to the Calculation procedure. This step is not necessary if the existing
JSON matches the Calculation Procedure's Variable Ids.
6. (Optional) In the Post-Transform DataRaptor Interface field, enter a DataRaptor that transforms the
response from the Calculation Procedure to match elements in the OmniScript. This step is not
necessary if the response JSON matches elements in the OmniScript. For more information on
prefiling, see Prefill OmniScript Elements using DataRaptor.
7. (Optional) Check Include Inputs if the OmniScript elements sent to the calculation procedure are at
the Step level of the OmniScript.
8. (Optional) Check Match Input Variables to debug and ensure the input data being sent to the
Calculation Procedure matches the input variables in the procedure. If an input variable is missing an
exception is thrown.
Example
The example OmniScript below uses a Calculation Action (Call Calculation Procedure) to calculate the
discounted Base and Adjusted monthly rental charges that the applicant is eligible to receive. The name of
the Calculation Procedure is entered in the configurationName property.

company 1053
OmniStudio

company 1054
OmniStudio
Eligibility data from the form, such as income, program type, and number of family members is passed into
the HEPreTransform DataRaptor transform interface, where it is transformed into the Input JSON that the
Calculation procedure is expecting. Click the link icon next to HEPreTransform to view the DataRaptor
interface:
When the Calculation Action executes, the Procedure (Calculate Housing Benefit) runs and returns a JSON
that fills the results into the script. Any variable in the Procedure that is included in the Calculation Output
will be sent back to the OmniScript.
Here are the Calculation Steps in the Calculate Housing Benefit Procedure:
...and the returned JSON (this can be found by clicking Simulate on the Procedure. See the Matrices for
correct inputs):

company 1055
OmniStudio
If the elements on the OmniScript that are being sent to the Calculation Procedure exactly match the
Variable Ids in the procedure and are at the Step level of the OmniScript (not in a block), you don't need to
create a Pre-Transform interface. Otherwise, implement a Pre-Transform interface to format the JSON for
the calculation procedure.
If the elements that will be filled by the output of the script are located in a step or block called "output" with
a nested block called "calculationResults" with Variable Id's that match the OmniScript elements, you don't
need to create a Post-Transform interface. Otherwise, implement a Post-Transform interface to format the
JSON coming from the Calculation Procedure to match the JSON structure of the OmniScript.
To test this Calculation:
1. Run the script in Preview mode or launch it from a Contact record.

2. Answer the questions as follows:

company 1056
OmniStudio
3. Fill out the Eligibility step as follows:
See Also
• Calculation Action Properties

• Calculation Procedures and Matrices
Create Formula Fields in an OmniScript

Create expressions to set calculated values and evaluate data across multiple fields using a Formula or
Aggregate element . For example, if you are accepting information for a qualifying life event you may want
to create a formula that determines if the date entered for the qualifying life event is within thirty days of
today's date.
For a list of available functions, see OmniScript Functions.
Formula and Aggregate elements support the following constants and types:
• OmniScript elements and JSON nodes, passed in as merge fields—for example, %Element1% or
%JSONnode1%
• Numbers and integers—for example, 5 + 3.145
• String literals wrapped in quotes—for example, ' "ABC" + "DEF" '
• Booleans—for example, true || false
• Arrays—for example, "[1,2, 3, 4, 5]"
• Null

company 1057
OmniStudio
See Also
• OmniScript Functions
• Create a Formula or Aggregate in an OmniScript
Supported Formula Operators

Formula fields in OmniScript support the following operators:
Operator Meaning
+ Addition
- Subtraction
* Multiplication
/ Division
^ Power
= Equals
<> Not equals
> Greater than
< Less than
>= Greater than or equal to
<= Less than or equal to
&& And
|| Or
() Parentheses
For information on supported functions in OmniScript, see OmniScript Functions. For information on adding
a Formula field to an OmniScript, see Create a Formula or Aggregate in an OmniScript.
OmniScript Functions
You can add functions to the Aggregate and Formula elements. For information on adding Formula or
Aggregate elements to your OmniScript, see Create a Formula or Aggregate in an OmniScript. To view a
list of supported formula operators that can be used with the Formula element, see Supported Formula
Operators.
The tables below detail the different available functions and how they work.
Table 57. Conversion Functions

Function Name Example Details
ABS(number) ABS(%Friends%) == 6.52534 Returns the absolute value.
BOOLEAN(value) Returns true or false.
CURRENCY(value) Returns value formatted for currency. 12345 would display as
12,345.
INTEGER(value) INTEGER(%Friends%) == 6 Converts the number given into an integer with no decimal
places. Does not round the number up. Also accepts a string.
INTEGER("12.5") == 12
NULL Renders an object's value null.

company 1058
OmniStudio

NUMBER(value) NUMBER(%Friends%) == 128 Converts a string into a number.
POW(number, exponent) POW(%Friends%, 3) == 274.625 Returns exponent value.
RANDOM() RANDOM() Returns a random number between zero and one. This
function is commonly used in A/B testing. The RANDOM()
function does not accept parameters.
ROUND(number, ROUND(%Friends%, 3) == 6.525 Rounds number to certain defined number of decimal places.
decimalPlaces)
Table 58. Conditional Functions

AND(); IF((%reset%="Yes" AND( %reboot Logical operator that performs a function if all
%="Yes")), "Closed", "Escalated") conditions are both met.
COUNTIF(values, Returns a count of the number of repeated
expression_or_value) elements if a condition is met.
EQUALS( Field_Name, IF( The EQUALS function is used when comparing a
'Condition') field to a particular value or another field.
EQUALS(%Department%,'401(k)'),
"Then Result",
"Else Result"
)
IF(EXPRESSION,THEN, ELSE) IF((%reset%="Yes" || %reboot%="Yes"), If EXPRESSION evaluates to True, THEN is
"Closed", "Escalated") returned, otherwise ELSE is returned.
OR() IF((%reset%="Yes" OR( %reboot
%="Yes")), "Closed", "Escalated")
SUMIF(values, Returns the sum of all comma-separated elements
expression_or_value) and value if a condition is met.
Table 59. Text Functions

CASE(value, $CASE) CASE(%Name%, UPPER) == "TONY JONES" Changes case based on $CASE
type. $CASE must be LOWER,
CASE(%Name, LOWER) == "tony jones" UPPER, SENTENCE, or TITLE.
CASE(%Name%, SENTENCE) == "Tony jones"
CASE(%Name%, TITLE) == "Tony Jones"

CONCATENATE(value1, value2, ..., CONCATENATE(%FirstName%, " ", %LastName Concatenates the elements/
valueN) %) == "Tony Jones" strings together into a single
string.
CONTAINS(input_string,value) CONTAINS(%FirstName%, "Tony") == True Evaluates if a value is contained
within a string.
SPLIT(text, splitToken, limit); SPLIT("Tony Jones", " ", 2) == "Tony", "Jones"
STRING(value) STRING(%Friends%) == "6.5" Converts any value into a
String.

company 1059
OmniStudio

SUBSTRING(text, startIndex, SUBSTRING("Substring!", 3, 9) == "string" Extracts the characters from a
endIndex) string between two specified
indexes and returns the value.
Table 60. Date Functions

AGE(dateOfBirth) AGE(%Birthdate%) == 7 Returns an age (in years) with the given date of birth on
today's date. Use the Date element.
AGEON(dateOfBirth, AGEON(%Birthdate%,"07-09-2024") == The age of someone (in years) with the given date of
futureDate) 16 birth on a future date. Use the Date element.
DATE(value) DATE(%DOB%) == Wed Jul 19 1978 Use a Date element. Returns full JavaScript format.
16:00:00 GMT-0700 (PDT)
DATEDIFF(date1, date2) DATEDIFF(%DOB%,%TODAY%) == The difference between 2 dates in days. The value will
13559 always be a positive integer. Use the Date element.
DAYOFMONTH(date) DAYOFMONTH(%TODAY%) == 2 Returns the day of the month. Use the Date element.
DAYOFWEEK(date) DAYOFWEEK(%TODAY%) == 4 Returns the day of the week as an integer. Monday is 1,
Sunday is 7.
HOUR(date) Return the current hour according to local time.
MINUTE(date) Return the current minute according to local time.
MOMENT() MOMENT(%policyStartDate%).add(1, Returns the moment object of Moment.js
'year').subtract(1, 'day')
This can be used to perform complex date formatting,
calculations, manipulation, comparisons, etc. The
MOMENT() function must contain parameters, for
example, MOMENT(NOW()). Appending .calendar() to
this function is a recommended best practice.
MONTH(date) MONTH(%TODAY%) == 9 The month of the year as an integer. Use the Date
element.
NOW() NOW() == Thu Aug 27 2019 16:32:00 Returns current date and time in full JavaScript format.
GMT -0700 (PDT) Milliseconds are always set to 0.
TODAY() TODAY() == Thu Aug 27 2019 00:00:00 Returns today's date. The time is always set to midnight
GMT -0700 (PDT)
YEAR(date) YEAR(%TODAY%) == 2019 Returns the year of the date as an integer. Use the Date
element.
Table 61. Aggregate Functions

ARRAY(value1, value2, ..., ARRAY(%Child1%,%Child2%, Returns an array of the value of the elements.
valueN)
%Child3%,%Child4%) == [4,3,1,2]
AVERAGE(array) AVERAGE(%Age%) == 2.5 Aggregate: returns the average mean value of the
numbers provided. Use a repeating element.
AVERAGE(value1, value2, ..., AVERAGE(%Child1%,%Child2%, Returns the average mean value of the numbers
valueN) provided.
%Child3%,%Child4%) == 2.5
COUNT(array) COUNT(%Age%) == 4 Aggregate: Returns a count of the number of
repeated elements.

company 1060
OmniStudio

EXISTS(array_or_value, EXISTS([%FirstName%,%LastName Returns true if the given value exists in one or more
expression_or_value) %], "Tony") == true elements. For Aggregate, enter the name of a
repeating element—for example EXISTS(%FirstName
%,"Tony"), where FirstName is repeatable.
MAX(array) MAX(%AGE%) == 4 Aggregate: Returns the largest value in the numbers
provided. Use a repeating element.
MAX((value1, value2, ..., MAX(%Child1%,%Child2%, Returns the largest value in the group of elements
valueN) provided.
%Child3%,%Child4%) == 4
MIN(array) MIN(%AGE%) == 1 Aggregate: returns the smallest value in the numbers
provided. Use a repeating element.
MIN((value1, value2, ..., MIN(%Child1%,%Child2%, Returns the smallest value in the group of elements
valueN) provided.
SUM(array) SUM(%AGE%) == 10 Aggregate: returns the sum of all values in the
repeatable element.
SUM(value1, value2, ..., SUM(%Child1%,%Child2%, Returns the sum of all comma-separated elements
valueN) and values.
Create a Formula or Aggregate in an OmniScript

Run functions against element data with the Formula and Aggregate elements.
The elements behave similarly in an OmniScript. However, the Aggregate element should be used for
aggregation purposes, such as averaging or summing elements. Formula elements can use both
Supported Formula Operators and OmniScript Functions . For example, you may want to determine a
contract end date by adding 365 days to a date element. You could do this by using the example formula
below:
DATE(YEAR(%DateElement%), MONTH(%DateElement%), DAYOFMONTH(%DateElement%) +365)
If you would like to set a date one week from today's date, you could do so by using the example formula
below:
DATE(YEAR(TODAY()), MONTH(TODAY()), DAYOFMONTH(TODAY()) +7)
The instructions below explain how to add and configure Formula or Aggregate element to your OmniScript.
1. From the OmniScript Designer, drag a Formula or Aggregate element onto the script structure.
2. You can add OmniScript Functions by clicking on the function name; the function will pre-populate in
the Expression section. Add the OmniScript elements inside of the function using merge field notation
by enclosing the element in percentage (%) signs.

company 1061
OmniStudio
3. If you plan to use this element in a repeatable block, see Evaluate Elements in Repeatable Blocks.
4. If you are using a Formula element, you can continue to build the formula using Supported Formula
Operators in the Expression text box.
5. If the element should not appear on the script UI, Click Hide.
6. You can also create additional elements that depend on the results of the Formula. For example, the
step shown in the image below appears when the Total Income formula is less than 1,000. For more
information, see Create Dynamic Forms Using the Conditional View Property and Display Messaging
in OmniScripts.

company 1062
OmniStudio
7. You can test the Formula or Aggregate by clicking the Preview link.
See Also
• Create Formula Fields in an OmniScript

• OmniScript Functions
Create and Update Data from OmniScripts

OmniScripts post data to Salesforce and external databases using OmniScript Action Elements that
integrate DataRaptors, Integration Procedures, external calls, and Apex.
Post Salesforce Data from OmniScripts

Create and update sObjects and external objects from an OmniScript using the DataRaptor Post Action. If
multiple actions are needed, use an Integration Procedure to host the DataRaptor Post Action and handle
the requests.
The DataRaptor Post Action sends data from the script to a DataRaptor Load that performs the update or
upsert. (When multiple upsert keys are used, the record must match all keys to be considered a
match.)When you define the DataRaptor Load, you map data from the OmniScript's Output JSON to fields
in sObjects. For details, see Object Field Mapping.

company 1063
OmniStudio
Before You Begin

1. Learn about DataRaptor Loads. See DataRaptor Load Overview.
2. Create a DataRaptor Load. See Create a DataRaptor Load.
1. From OmniScript, click Preview.

2. Enter any data you plan to use into the OmniScript. You can prefill elements for testing using the Set
Values Action, Default Value element property, or the Seed Data JSON functionality.
3. Copy the OmniScript's Data JSON.
4. In your DataRaptor, paste your OmniScript's data JSON into the DataRaptor's Input JSON.
5. Map your data JSON nodes to Object fields.
See Also
• DataRaptor or Integration Procedure?

• Integration Procedures
Fill a PDF From OmniScript Using DataRaptor

You can fill a PDF using elements from an OmniScript.
Required Items:
• Adobe Acrobat Pro

• An existing fillable form (either unsecured or you have the password)
PDF Requirements:
• PDF must be a Linearized PDF, Version 1.5 or above. You can save a PDF as Linearized Version 1.7 by
clicking Save as Other, and then Reduced Size PDF, and then Acrobat 10.0 and later.
• Vlocity does not support the List Box PDF Form field type (Multi-Select fields) in the PDF.
• The PDF Form Field Values for Radio Buttons and Dropdowns must be logically mappable. For example,
a Radio Button on a PDF form may not have two options with the same name.

company 1064
OmniStudio
NOTE
Firefox and Safari browsers cannot fill some fields without taking additional steps. To use
Firefox and Safari, see Configuring your browser to use the Adobe PDF plug-in.
• The PDF can be launched in a Firefox, Safari, or Chrome browser.
1. Prepare your PDF.

2. Upload the PDF to Salesforce as a Document.
What's Next
Create a DataRaptor Interface to Map OmniScript Data to a PDF

After you create the OmniScript and upload your PDF, you must create a DataRaptor to map the
information from the OmniScript to the PDF. See DataRaptors.
1. From OmniScript, click Preview and fill in test data to populate the JSON of the OmniScript.
2. Copy the OmniScript's JSON data.
3. From the DataRaptor tab, click New.
4. For Interface Type, select Transform.
5. Enter an Interface name.
6. In the Input Type field, select JSON.
7. In the Output Type field, select PDF.
8. In the Target PDF field, select an existing PDF, and click Save.
What's Next
Map Fields From the OmniScript to the PDF
See Also
• Fill a PDF From OmniScript Using DataRaptor

• Add a PDF Action to the OmniScript
Map OmniScript Fields to a PDF

Populate a PDF with OmniScript data by mapping the OmniScript JSON data to the PDF.
Before You Begin

1. In your DataRaptor Interface, click Transforms.

2. Click Input JSON, and paste in your OmniScript's JSON.
3. Click Quick Match and map nodes in your Input JSON to PDF fields.
4. (Optional) Add mappings one at a time by clicking the + symbol, and mapping an Input JSON Path to
a PDF Output Field.

company 1065
OmniStudio
What's Next
Add a PDF Action to the OmniScript
See Also

• Create a DataRaptor Interface to Map OmniScript Data to a PDF
Add a PDF Action to the OmniScript

Populate a PDF with OmniScript data using the PDF Action.
NOTE
The PDF Action is not supported in IE 11 browsers.
Before You Begin

Map OmniScript Fields to a PDF
1. From the OmniScript Designer, drag the PDF Action to the OmniScript.
2. From the Properties pane, in Document, select your PDF document.
3. (Optional) Attach the PDF to a parent record by taking these steps:
a. Fill the Attachment Name field to name the attachment.
b. Fill the Attachment Parent Id field with the id of the attachment's parent record id.
4. In the Send Transformations section, from the PreTransform DataRaptor Interface picklist, select the
DataRaptor that you created in Create a DataRaptor Interface to Map an OmniScript to a PDF.
5. Check the Read Only checkbox to make the filled PDFs read-only.
6. If necessary, change the default date and time formats.
NOTE
Use moment.js formatting. If left blank, the defaults are Time Format: h:mma, Date
Format: MM/DD/YYYY, Date Time Format: MM/DD/YYYY h:mma.
7. Exclusive to the Classic Designer, if you bypass the redirect page, the filled PDF file will be open in a
separate tab. Specify a display height and width for the dimensions of the tab. If you do not see the
fields being filled until you click into them, you may need to disable the "Highlight Existing Fields"
option in the Adobe Acrobat preferences.
8. Launch the form in Preview mode and fill out each field that should map to the PDF.
9. Check the PDF to confirm the mappings are correct.

company 1066
OmniStudio
See Also

Upload Files and Images in OmniScripts

To upload files in an OmniScript, add a File input element. To upload an image, add an Image input
element. Details about uploads are added to the Files node of the OmniScript's Data JSON.
By default, files are uploaded to Salesforce Content Documents directly. To associate one or more
Salesforce objects with the uploaded file, specify a comma-separated list of object Ids in the Content
Parent Id field. In Salesforce, the uploaded files are listed in the sObject detail page's Content section.
NOTE
File and Image elements using the Upload to Content Document functionality cannot be
mapped in DataRaptor. If Upload to Content Document is checked and the file is mapped
in DataRaptor the file will be corrupted. For more information on mapping files with
DataRaptor, see Mapping File Attachments From an OmniScript to Salesforce.
To specify a Vlocity Open Interface to be run after the file or image is uploaded, set the Remote Action
section's Remote Class and Remote Method fields. As input, the specified method receives a Map<String,
Object> list containing the File data from the Data JSON. The options contain the remoteOptions and the
filesMap, which contains the Ids of any Content documents that were created.
support the File and Image elements. By default, the LWC File and LWC Image elements accept a file size
of up to 2GB.
NOTE
In Angular OmniScripts, the standard file size attachment limit is 4 MB per remote action.
For instructions on how to increase this limit, see File and Image Upload Size Limits in
OmniScript. Note that file uploads over 5 MB consume an API call.
Add a File or Image to OmniScript

Add and configure a File or Image element to enable the upload of files and images. Files and images
upload to Content Documents by default.

company 1067
OmniStudio
NOTE
Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, LWC
OmniScripts support the File and Image elements. The Image and File elements do not
work in preview because they use SFDC components. When Image and File elements are
required in a Step, the Preview cannot advance past the Step. Vlocity recommends
marking File and Image elements as Required only before activating the OmniScript.
1. From OmniScript, under Available Components, drag the File or Image element from the Inputs
section into a Step in the Structure panel.
2. Exclusive to the LWC OmniScript Designer, attach Content Documents to parent records. Configure
these properties if they appear in the element:
• Beginning with Vlocity Insurance and Health and CME Summer '20, in the Content Parent Id field,
enter an object Id, or comma-separated list of object ids, to attach the Content Document to a parent
record. When left blank, the Content Document does not attach to a parent record.
• Check Content Document to display the Content Parent ID field, and enter an object Id, or
comma-separated list of object ids, to attach the Content Document to a parent record. When left
blank, the Content Document does not attach to a parent record.
NOTE
In the LWC OmniScript Designer files and images upload to Content Documents by
default.
3. (Optional) Exclusive to the Classic Designer, check the box labeled Upload to Content Document to
upload files directly to a Content Document. For more information on Content Documents, see
Salesforce ContentDocument.
4. Exclusive to the Classic Designer, click Content Parent ID, and enter an object id for each parent
record.
5. (Optional) When configuring the Image element, allow uploads of multiple images by checking Allow
Multiple Images.
6. Exclusive to angular OmniScripts, click PREVIEW in the upper-middle of the page to enter preview
mode.
7. Exclusive to angular OmniScripts, attach a file or image in the OmniScript. Image uploads display a
preview of the image in the OmniScript.
NOTE
Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20,
LWC OmniScripts support the File and Image elements. By default, the LWC File and
LWC Image elements accept a file size of up to 2GB.

company 1068
OmniStudio
8. (Optional) Use one of the JSON node names from Image and File to apply a condition to another
element:
"yourFileElementName": [
{
"data": "0693g000000T1ZFAA0",
"filename": "isolated-on-png.png",
"vId": "0683g000000T11iAAC",
"size": 8234
}
]
9. (Optional) The standard file size attachment limit for Angular OmniScripts is 4 MB per remote action.
For instructions on how to increase this size to 25 MB, see File and Image Upload Size Limits in
OmniScript.
When a file is attached to a File element in OmniScript, it adds this JSON to the Data JSON of the form. To
map the file's JSON to a Salesforce record, see Mapping File Attachments From an OmniScript to
Salesforce.
Mapping File Attachments From an OmniScript to Salesforce

After Add a File or Image to OmniScript, you can map the file from the OmniScript to a parent record in
Salesforce. Follow the instructions below to accomplish this:
NOTE
File elements using the Upload to Content Document functionality cannot be mapped in
DataRaptor. If Upload to Content Document is checked and the file is mapped in
DataRaptor the file will be corrupted.
Before You Begin

LWC OmniScripts do not support file mapping in DataRaptor. See Add a File or Image to OmniScript.
1. From the DataRaptor Load (JSON) associated with the OmniScript, add the Attachment object to the
Creation Sequence.
2. Create the following mappings (where FileElement is the name of the File element on the
OmniScript):

company 1069
OmniStudio
• ContextId = Attachment.ParentId
• fileElement:filename = Attachment.Name
• fileElement:data = Attachment.Body
3. Map an Object Id, such as the ContextId, to the Attachment.ParentId. If an object is being created in
the same DataRaptor, create a Linked Mapping that maps the Id of the previously created or updated
parent object to Attachment.ParentId. For more information on Linked Mappings, see Multiple Related
Object Loads (Link Mappings).
4. (Optional) To ensure that files with the same name are not overwritten, check the Upsert Key box for
the Attachment:ParentId and Attachment:Name mappings.
File and Image Upload Size Limits in OmniScript

LWC OmniScripts support the File and Image elements. By default, the LWC File element accepts a file
size of up to 2GB.

company 1070
OmniStudio
OmniScript Type File Size Configuration Release

Limit
LWC OmniScript 2 GB Available by default Available beginning with Vlocity
Insurance and Health Winter '20
and Vlocity CME Winter '20.
LWC OmniOut 30 MB Available by default Available beginning with Vlocity
(Off-Platform) Insurance and Health and
Vlocity CME Summer '20.
Angular 25 To enable file uploads up to 25 MB, include the following n/a
line at the top of your OmniScript's Visual Force page:
<apex:includeScript
value="/soap/ajax/33.0/connection.js" />
NOTE
Attachments over 5 MB will consume an API call. OmniScript User profiles must have the
API Enabled permission enabled. For more information, see Salesforce User Permissions.
File Properties
This page contains information on File element Properties.
Content Parent Id Enter a comma-separated list of object ids to attach the Content Document to Parent Records. When left
blank, the Content Document does not attach to a parent record. Note: Image and File uploads do not
work in Preview.
Extra Payload Sends additional Key/Value pairs. Supports merge field syntax.
Remote Class Specify a Vlocity Open Interface Class.
Remote Method Specify a Vlocity Open Interface Method.
Remote Options Key/value pairs that specify additional class invocation options.
Upload To Content In LWC OmniScript, files upload to a Salesforce Content Document by default. Check this box to display
Document the Content Parent ID field and attach a Parent Record.
See Also
• Upload Files and Images in OmniScripts

• Common OmniScript Element Properties Definitions
Image Properties
This page contains information on Image element Properties.
Allow Multiple Images Enables users to upload multiple images at once.

company 1071
OmniStudio
Content Parent Id Enter a comma-separated list of object ids to attach the Content Document to Parent Records. When
left blank, the Content Document does not attach to a parent record. Note: Image and File uploads do
not work in Preview.
Remote Class Specify a Vlocity Open Interface Class.
Remote Method Specify a Vlocity Open Interface Method.
Upload To Content In LWC OmniScript, images upload to a Salesforce Content Document by default. Check this box to
Document display the Content Parent ID field and attach a Parent Record.
See Also
• Upload Files and Images in OmniScripts

Posting Data to the Application Object using the Post to Object Action
You can submit an OmniScript directly to the Vlocity Application object using the Post to Object Action
Element. The Vlocity Application object enables an in-progress OmniScript to be stored and resumed later.
The OmniScript can be resumed by the original user, reviewed, or approved. This can either be a button on
a Step or a remote action that runs between Steps. The entire JSON, including attachments, submits.
NOTE
Posting Data to the Application Object is only available in Communities and Salesforce
Sites.
When a user submits for the first time, OmniScript:
• Creates an Application record where the name equals the value of the postNameTemplate property and
the application reference number generates based on the Auto Number seed and workflow rule. For
more information, see Create an Auto Number Field and Configure a Workflow Rule.
• Populates the Full JSON , Data JSON , and Files Map fields.
• Processes root level files, if any, and adds them as attachments to the application record.
• Sets the Application Status to Submitted.
The application record will not generate with a parent record's Id in the object's primary party Id field. To
update the primary party Id field on the application object, place a DataRaptor Post Action after the Post to
Object action. The DataRaptor will then have access to the application's Id in the JSON, allowing you to
upsert the application record, for more information on upsert, see Post Salesforce Data from OmniScripts.
To post data to the Vlocity application object:

company 1072
OmniStudio
1. Submitting an OmniScript to the Vlocity Application Object

2. Creating an Auto Number Field and Configuring a Workflow Rule
3. Reviewing or Modifying a Submitted OmniScript
Submitting an OmniScript to the Vlocity Application Object

To create a Post to Object Action element:
1. From the OmniScript, create the last Element with Type as Post to Object Action.
2. If the Element will launch from inside a Step, place it inside a Step or Block. It will render as a button. If
the Element will launch in between steps (remotely), place it at the same level as the Step (no Parent
Element), after the final Step that you are collecting data from.
3. If the Element is a button, the Property Set contains:
• controlWidth—controls the width of the button
• label—label on the button
• restPath—/NS/v1/application. NS = Name space of the package.
• restMethod—POST
• postNameTemplate—the name of the OmniScript in the object. Supports merge fields—for
example, %text1% Medical Application %date1%.
• remoteTimeout—the timeout for the request, in milliseconds. If left blank, defaults to 30,000 (30
seconds. Maximum 120,000 (120 seconds).
• validationRequired—whether to check the validation of the script or step before the OmniScript
posts. Enter Submit to validate the entire script or Step to validate only the step that the button is
on. Leave blank to bypass validation.
• redirectPageName—custom redirect page name. Upon success, the script navigates to this page.
Leave null to bypass the redirect page.
• redirectTemplateURL—HTML template of the redirect page. The provided template is
vlcApplicationAcknowledgeV2.html.
• redirectPreviousLabel—the label of the previous button on the redirect page.
• redirectPreviousWidth—the width of the previous button on the redirect page.
4. If the Element runs remotely (in between steps):
• label—heading of the Action block.
• restPath—/NS/v1/application. NS = Name space of the package.
• restMethod—enter POST.
• postNameTemplate—the name of the OmniScript in the object. Supports merge fields—for
example, %text1% Medical Application %date1%.
• remoteTimeout—the timeout for the request, in milliseconds. If left blank, defaults to 30,000 (30
seconds. Maximum 120,000 (120 seconds).
• inProgressMessage—message displayed while the action is being executed.
• postMessage—message displayed upon success.
• failureNextLabel—label of the continue button if the action fails.
• failureAbortLabel—label of the abort button if the action fails.
• failureAbortMessage—confirmation message displayed after user clicks abort button.
• validationRequired—whether to check the validation of the script before Raptor is invoked. Default
is Submit. Leave blank to bypass validation.

company 1073
OmniStudio
• redirectPageName—custom redirect page name. Upon success, the script navigates to this page.
Leave null to bypass the redirect page.
• redirectTemplateURL—HTML template of the redirect page. The provided template is
vlcApplicationAcknowledgeV2.html.
• redirectNextLabel—label of the next button on the redirect page.
• redirectNextWidth—width of the next button on the redirect page.
Creating an Auto Number Field and Configuring a Workflow Rule

Create an Auto Number field and Configure a Workflow Rule to populate the field.
1. From Setup, click Create, and then click Objects, and then click Application.
2. Scroll down to the Custom Fields & Relationships section and click New.
3. Select Auto Number and click Next.
4. In the Field Label field, enter the name of the field.
5. In the Display Format field, enter the new display format. Click What Is This? for more information on
display formats.
6. Enter a starting number and click Next.
7. Set the field-level security by setting the field to Visible for profiles that should see the field.
8. Click Next.
9. Click Save.
10. Return to Setup and click Create, and then click Workflow & Approvals, and then click Workflow
Rules.
11. Click New Rule.
12. Select Application and click Next.
13. In the Rule Name field, enter a name.
14. In the Rule Criteria section, enter NS_ApplicationReferenceNumber__c = '', where NS is the
Vlocity namespace in your org. For more information, see Viewing the Namespace and Version of the
Vlocity Package.
15. Click Save & Next.
16. On the following page, click Add Workflow Action and then click New Field Update.
17. In the Name field, enter a name for the update.
18. In the Field to Update field , select Application Reference Number.
19. Click Re-evaluate Workflow Rules after Field Change.
20. Click Use a formula to set the new value.
21. Click Show Formula Editor.
22. Click Insert Field and select the Auto Number field you created.
23. Click Save.
24. Click Done.
25. Click Activate.
Reviewing or Modifying a Submitted OmniScript

To enable a user to review or modify a submitted OmniScript in the Application object, modify the
Application page layout to include the Review button and ApplicationDataJSONPage Visualforce section.

company 1074
OmniStudio
NOTE
Vlocity Communications does not include the Application custom object tab. To learn how
to create a new custom object tab, see Create a Custom Tab in the Salesforce Help.
1. From Setup, click Create, and then click Objects, and then click Application.
2. Scroll down to the Page Layouts section and click Edit next to the production Application layout.
3. Drag the Review button from the palette to the Custom Buttons section.
4. Create a 1-Column section and drag the ApplicationDataJSONPage from the palette onto the new
section.
5. Click Save.
Integrating DocuSign with OmniScript

As a DocuSign user, you can build OmniScripts that fill DocuSign templates and then allow the user to sign
them directly from the OmniScript (DocuSign Signature Action) or email the user a copy of the document to
sign at their convenience (DocuSign Envelope Action).
These features require an active DocuSign account but do not require DocuSign for Salesforce or
DocuSign Connect. For optimal integration between DocuSign and Salesforce, Vlocity recommends one of
these products.
Preparing a DocuSign Template for OmniScript

You can fill a DocuSign document using elements from an OmniScript. The DocuSign document can then
be emailed to one or more signers using the DocuSign Envelope Action. The document can also be signed
within the OmniScript using the DocuSign Signature Action.
To prepare a DocuSign template for OmniScript, you must have the following items:
• DocuSign account
• DocuSign for Salesforce account
Linking Your Salesforce Org to Your DocuSign Account

1. From the Vlocity DocuSign Setup tab, click Modify DocuSign Configuration.
2. Add your Account Name, Account Id, and select the org type, either Demo or Production.
3. Click Save.
4. From Setup | Security | Remote Site Settings, add the correct DocuSign endpoint. Endpoints could
include:
• https://www.docusign.net
• https://na2.docusign.net
• Contact DocuSign if these endpoints are incorrect for your account.
Preparing DocuSign Documents

Configure DocuSign documents for use with OmniScript.

company 1075
OmniStudio
1. From the DocuSign Admin tab click DocuSign.

DocuSign opens in a new browser tab or window.
2. Click Templates and then click New Template.
3. Add a document and then add a recipient.
4. Select Placeholder as the recipient type and then add a Role for the Placeholder.
5. Select whether the Placeholder needs to sign, receives a copy, or needs to view the document.
6. Add more Placeholders and set a signing order, if necessary.
7. Edit the default email subject and body and click Next.
8. Prepare the form by dragging fields from the palette onto the form. Vlocity supports mapping fields
from an OmniScript to DocuSign Text, Radio Button, and Checkbox fields.
9. Add a Data Label to each field. This label will appear in DataRaptor when you create the
transformation mappings from the OmniScript to the DocuSign document.
Linking a DocuSign Template to Vlocity

Returning to Salesforce, from the Vlocity DocuSign Setup tab, click Fetch DocuSign Templates. All saved
Templates appear in the DocuSign Template List.
Mapping Fields from the OmniScript to the DocuSign Template

To populate a DocuSign template, you define the output JSON of the OmniScript as input to a DataRaptor
transform, which uses that data to populate the template. To compose the output JSON, map data from the
data JSON to the output JSON as follows:
1. Click an element in the Data Mappings table.

2. Click the Output Path field.
3. Select the corresponding field name on the DocuSign Template.
4. Repeat for all remaining fields to map.
5. When you are finished, inspect the Output JSON section to make sure all fields on the Template have
been mapped.
After completing this step, you can create either a DocuSign Envelope Action or DocuSign Signature Action
(v12 only) in your OmniScript.
Populating a DocuSign Template Using DataRaptor Transform

After creating an OmniScript that collects the data required by your DocuSign template, define a
DataRaptor Transform that populates the template, as follows:
1. On the Vlocity DataRaptor tab, click New.

2. For Interface Type, select Transform.
3. When prompted, specify a unique name for the transform, and specify settings as follows:
• Interface Type: Transform
• Input Type: JSON
• Output Type: DocuSign
• Target Output DocuSign Template Id: Choose the template that your OmniScript is designed to
populate.
Save your settings.

company 1076
OmniStudio
4. (Optional) For ease of mapping, copy the data JSON from your OmniScript and paste it into the Input
JSON pane in the DataRaptor Designer.
5. On the Outputs tab, map the fields from the output JSON of your OmniScript to the input fields from
the DocuSign template.
NOTE
If you have updated your DocuSign template, you must Fetch the DocuSign templates
to update the input fields. For more information on fetching templates, see Linking
DocuSign Template to Vlocity.
Using the DocuSign Signature Action to Sign Documents From Within an OmniScript
After preparing the DocuSign Template and mapping the fields from the OmniScript to the Template using
DataRaptor, create a DocuSign Signature Action in the OmniScript. When the action runs, a modal opens
containing the prefilled document. The user must take an action on the document before continuing the
OmniScript. They can either sign or decline to sign the document.
NOTE
To use a DocuSign Signature Action with LWC OmniScript in a Community, add this
Visualforce page permission to any profiles using the OmniScript:
OmniScriptLwcDocuSignViewPdf.
When the modal opens, a node is written to the Data JSON of the OmniScript in this format:
"DocuSignElementName": [
{
"status": Declined",
"envelopeId":"xyz123"
},
{
"status": Completed",
"envelopeId":"xyz123"
}
]
A new status and envelopeId generate every time the modal launches. Statuses include Completed,
Declined, and In Process.
To create a DocuSign Signature Action:

company 1077
OmniStudio
1. From the OmniScript Designer, drag a DocuSign Signature Action element from the Actions section
onto a step or block of the form, where it renders as a button.
2. From the element properties, select a DocuSign Template.
3. Enter a signer name, email, and template role. Template roles are configured during the template
setup. Signer Name and Signer Email support merge fields. For example %firstName% %lastName%
would merge the contents of the firstName and lastName fields into the Signer Name field during
runtime.
4. Add an Email Subject that recipients receive after signing.
5. (Optional) Enter a DocuSign Return Url that will display in the modal after signing is complete.
6. Expand the Send/Response Transformations section and select the DataRaptor Interface that was
created to map the OmniScript fields to the DocuSign Template.
7. (Optional) LWC OmniScripts use window.parent.postMessage to post the status to the LWC Omniscript
from the Docusign Return Page. If you are overriding OmniScriptDocuSignReturnPage in your
OmniScript, post the docusign status back to OmniScript using window.parent.postMessage. For more
information, see
Example:
window.addEventListener('DOMContentLoaded', function(event){
var domClass = '';
var searchStr = event.currentTarget.location.search;
searchStr = searchStr.substring(searchStr.indexOf('&event='),
searchStr.length);
searchStr = searchStr.substring(searchStr.indexOf('=') +
1,searchStr.length);
if(searchStr === 'signing_complete') {

domClass = document.getElementById('signing_complete');
domClass.style.display = 'block';
} else {
domClass = document.getElementById('signing_failed');
domClass.style.display = 'block';
}
_window.parent.postMessage(searchStr, '');_*
});
Using the DocuSign Envelope Action to Email Documents for Signature

After you finish preparing the DocuSign Template and mapping the fields from the OmniScript to the
Template using DataRaptor, you can create a DocuSign Envelope Action in the OmniScript. When the
action runs, a DocuSign Envelope containing the prefilled document is emailed to one or more recipients for
signing or reviewing.
To create a DocuSign Envelope Action:

company 1078
OmniStudio
1. From the OmniScript Designer, drag a DocuSign Envelope Action element from the Actions section
onto the palette. To run the action automatically, place it between steps. To run the action when the
user clicks a button, place it in a step.
2. From the element properties, select a DocuSign Template.
3. Click Add Recipient and enter a signer name, email, and template role.
Template roles are configured during the template setup. The Signer Name and Signer Email roles
support merge fields. For example %firstName% %lastName% would merge the contents of the
firstName and lastName fields into the Signer Name field during runtime.
4. If you have more than one recipient, you can override the routing order set on the template by entering
a new order in the Routing Order field. Leave the field blank to use the default routing order.
5. Add an Email Subject and Body that recipients receive along with the envelope.
6. Expand the Send/Response Transformations section and select the DataRaptor Interface that was
created to map the OmniScript fields to the DocuSign Template.
Integrating Salesforce Knowledge with Classic OmniScript

Activate the Knowledge component in OmniScript to allow users to view and search for articles from your
Salesforce Knowledge articles. Automatically search for articles based on static values set up during
configuration, dynamic inputs from OmniScript fields, or using a simple search bar.
NOTE
Your organization must have Salesforce Knowledge enabled to use this feature.

company 1079
OmniStudio
Figure 16. Simple Search Bar
Articles can either be opened directly in the OmniScript or in a modal window. Examples of those two
options are shown in the images below.

company 1080
OmniStudio
Figure 17. Articles Open in an OmniScript

company 1081
OmniStudio
Figure 18. Modal Window
Articles can also open in a new browser or console tab.
Initial Configuration for the Knowledge Component in Classic OmniScript

If your organization has Salesforce Knowledge enabled, you can integrate it with OmniScript to enable
users to search and view Salesforce Knowledge articles in the OmniScript. OmniScript also supports
querying Lightning Knowledge once it has been enabled. Before enabling Lightning Knowledge, see
Lightning Knowledge Limitations.
To configure the Knowledge component in an OmniScript, follow the instructions below:
1. From the Script Configuration section, expand the Persistent Component section.
2. Click the vlcKnowledge tab.
3. Enter a display label for the component and click Render.
4. (Optional) Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, in LWC
OmniScripts, select Display Outside OmniScript to enable OmniScripts to display Knowledge base
articles outside of the OmniScript. For information on configuring this option, see Opening Knowledge
Base Articles Outside of a Classic OmniScript.
5. Expand the Knowledge Options section and click Enable Knowledge.
6. In the Knowledge Article Type Query Fields Map, on the left side, enter the Article Type API name.
When Lightning Knowledge is enabled, enter the Record Type API name.
7. On the right side, enter the field API Name for the article body.

company 1082
OmniStudio
8. To query multiple fields for the article type, enter each field, comma-separated with no spaces. For
example Summary,vlocitycmt__articleBody__c. Click +Add New Key/Value Pair to query additional
Article Types.
When using Lightning Knowledge, perform the following steps:

9. In Knowledge Options, click Lightning Knowledge.
10. Enter the Lightning Knowledge object's API name into the Lightning Knowledge Object API Name
field.
11. Lightning Knowledge queries Record types instead of Article types. To query multiple fields for the
record enter each field, comma-separated with no spaces. For example Summary__c,Body__c.Click
+Add New Key/Value Pair to query additional Record Types.
Configuring Knowledge for Individual Steps in Classic OmniScript

After finishing the Initial Configuration for the Knowledge Component in an OmniScript, you can configure
the integration with Knowledge for the OmniScript Steps.
To configure Knowledge at the step level:
1. From the OmniScript Designer, click the Step that should display the Knowledge component.
2. Under Show Persistent Component, select vlcKnowledge.
3. Expand the Knowledge Options section.
4. Language is defaulted to English and Publish Status to Online.
5. In the Keyword field, enter one or more static values, such as a literal string, or a merge field to build
the query string. For information on merge fields see, Access OmniScript Data JSON with Merge
Fields.
6. In the Data Category Criteria field, enter a query for the Data Category. This helps to filter the articles.
For example, Type__c AT (Internet__c). Note that you do not need to enter WITH DATA CATEGORY.
See With Data Category filtering Expression from the Force.com SOQL and SOSL Reference for
more information on building queries for Data Categories.
7. (Optional) When lightning knowledge is enabled, enter article Record Types into the Record Type
Filter field to filter the record types queried by the step.

company 1083
OmniStudio
Opening Knowledge Base Articles Outside of a Classic OmniScript

Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, launch Knowledge
base articles outside of an OmniScript using the Vlocity OmniScript Knowledge Base component in a
Community or Lightning page.
The Vlocity OmniScript Knowledge Base component renders Knowledge base articles side-by-side with an
OmniScript or as a standalone component. When opening Knowledge Base articles from an OmniScript,
OmniScript passes specific information into the OmniScript Knowledge Base component to search the
Knowledge base and render articles.
Before You Begin

1. Configure the fields in that query the Knowledge base in the Initial Configuration for the Knowledge Component in Classic
OmniScript.
2. (Optional) Define Knowledge base queries at the step level, see Configuring Knowledge for Individual Steps in Classic OmniScript.
1. In an OmniScript's Script Configuration, expand Knowledge options, and select Enable Knowledge.
2. Select Lightning Knowledge, and configure the remaining fields using the instructions in Initial
Configuration for the Knowledge Component in Classic OmniScript.
3. In the Persistent Cart's vlcKnowledge tab, ensure Display Outside OmniScript is checked.
4. (Optional) Configure Knowledge Options on the Step level. See Configuring Knowledge for Individual
Steps in Classic OmniScript.
5. Deploy the OmniScript by clicking the Activate button.
6. Open the Lightning App Builder and create a new page with a layout containing at least two regions.

company 1084
OmniStudio
7. From the Lightning page, drag the deployed LWC OmniScript component into the page. For more
information, see Add an LWC OmniScript to a Community or Lightning Page.
8. From the Lightning Components section, drag the Vlocity OmniScript Knowledge Base component.
9. In the omniscriptKey field, enter the name of the LWC OmniScript component using the syntax
type_SubType_Language.
10. (Optional) In the layout field, enter newport to render the Knowledge base article with Newport
styling.
11. Save the Lightning page and test the OmniScript on the Lightning page to preview the behavior.
See Also
• Initial Configuration for the Knowledge Component in Classic OmniScript

• Configuring Knowledge for Individual Steps in Classic OmniScript
Calculation Action
Before you Begin



company 1085
OmniStudio

company 1086
OmniStudio

Example

company 1087
OmniStudio

company 1088
OmniStudio
interface:
correct inputs):

company 1089
OmniStudio


company 1090
OmniStudio
See Also

Administering, Deploying, and Launching OmniScripts

This module tells you how to import, version, launch, and deploy OmniScripts. OmniScripts can be
launched from Communities, object pages, Vlocity Mobile, Console Apps, and remote sites. OmniScripts
can be deployed to Salesforce sites and external services, such as Adobe External Manager and Heroku.
Managing OmniScripts
The following topics tell you how to manage your OmniScripts.
Creating an OmniScript Type and SubType
NOTE
Beginning with Vlocity Insurance and Health Summer '19, OmniScripts enable the use of
Lightning Web Components. For more information, see LWC OmniScripts.

company 1091
OmniStudio
The Type and SubType and Language fields combine to act as a unique identifier for the OmniScript.
It is possible to create a new Type and SubType while creating a new OmniScript by filling in the Type and
SubType fields in the OmniScript's Script Configuration. Maintain track of OmniScripts by using logical
naming conventions. For example, an OmniScript that creates a new Contact might use the naming
convention Type=Contact and SubType=New.
NOTE
There can be only one active OmniScript or Integration Procedure per Type, SubType, and
Language. Ensure that each active OmniScript and Integration Procedure has a unique
SubType.
Administrators can also create new Types and SubTypes by following the instructions below:
1. From Setup, click Create.

2. Click Objects.
3. Click the link for Vlocity OmniScript.
4. Scroll to the Custom Fields & Relationships section and click Type.
5. In the Type field, enter a Unique Name that begins with a lowercase letter.
6. Click SubType, and enter a unique name.
7. Enter a Language, and click Save.
Importing OmniScripts
Starting with Spring 2016, OmniScripts can be imported using the Data Pack feature. This allows you to
move OmniScripts from one environment to another.

company 1092
OmniStudio
1. Go to the OmniScript Designer tab.

2. Click Import OmniScripts.
3. Click Browse, select the .JSON file that was previously exported, and click Next .
4. Review the selected elements to import and click Next.
5. Wait for the import process to complete.
For more information about how to export OmniScripts, see Exporting OmniScripts .
Exporting OmniScripts
OmniScripts can be exported using the new Data Pack feature. This allows you to move OmniScripts from
one environment to another.
1. From the OmniScript Designer tab, use the disclosure arrows to expand the OmniScript.
2. Locate the version of OmniScript you want to export and click the arrow icon. This icon is visible for
expanded OmniScripts to the right the Active column.
3. Click Export to load the Data Pack Export module.

4. Review the Export Elements and select all of the elements to export and click Next.
5. Review all of the Export Elements selected and click Next.
6. Give the Export a file name and click Done.
7. The OmniScript saves as a .JSON file to your browser's default downloads folder.
For more information about importing. JSON export files into another environment, see Importing
OmniScripts.
Version OmniScripts
Create multiple versions of an OmniScript to develop and test scripts in preview mode before activating
scripts for production deployment. Vlocity recommends not making any changes to a production
OmniScript. Any time you plan to alter a production script, create a new, inactive version and make all
updates in the latest version before activating.
1. From your OmniScript, click New Version.

2. Enter your new OmniScript and begin to alter your new version of the script.
See Also
• Set Up an OmniScript in the LWC OmniScript Designer
Save and Resume an OmniScript

supports saving and resuming OmniScripts.

company 1093
OmniStudio
Enable users to save and resume OmniScripts by using OmniScript's Save Options property. Users can
bookmark links, launch a saved instance from an object page, or email the link. Configure custom URLs to
resume saved OmniScript instances in different domains. For example, a customer can initiate an
OmniScript inside of a Community, and then a customer service representative can resume the OmniScript
inside of the Service Console.
Next Steps
Configure Save Options
Configure Save Options

Enable users to Save and Resume OmniScripts by configuring the Save for Later functionality.
supports the Save For Later feature.
1. From the OmniScript's Script Configuration, expand the Save Options section.
2. Click Allow Save For Later to enable the Save For Later feature.
3. (Optional) Enable steps to automatically save an instance when a user clicks the Next button on a Step
by checking Auto Save on Step Next.
4. In the Save Name Template field, enter a name for the OmniScript instance. This field supports merge
fields—for example, %LastName%, %FirstName% - Application. If this field is left blank, the default
is Saved-OmniScript Name-[RowId]."
5. In the Save Expire In Days field, enter a number to enable the OmniScript instance to remain usable
for a number of days. If a user attempts to resume the script after it expires, the script will start over.
6. Exclusive to Angular OmniScripts, set the Save For Later Redirect Page Name to a redirect page
name. Upon success, the script navigates to this page.
7. Exclusive to Angular OmniScripts, Save For Later Redirect Template Url—HTML template of the
redirect page. The provided template is vlcSaveForLaterAcknowledge.html.

company 1094
OmniStudio
8. Set the Save Object ID field to attach the Saved OmniScript instance to a record. The default value is
%ContextId%. This field supports merge fields. For more information, see Access OmniScript Data
JSON with Merge Fields.
9. (Optional) Exclusive to LWC OmniScripts, enable users to merge data into an updated LWC
OmniScript by checking Merge Saved Data JSON into updated OmniScript. If the option is not
enabled, users opening a saved instance will start from the beginning of the updated version of the
OmniScript.
User Message:
NOTE
When an LWC OmniScript is Activated, it generates a unique LWC making saved
OmniScript instances of the previous version unusable. If Merge Saved Data JSON
into updated OmniScript is enabled, when a saved instance launches, the
OmniScript merges the data from the saved instance into the updated OmniScript.
10. (Optional) Click Save Content Encoded to use Base64 encoding for the saved OmniScript file. Select
this option to obfuscate the data.
11. In the Save URL Patterns section, map the OmniScript instance URL to a custom field in an Object.
See Map Saved Instance URLs to Custom Fields.
12. (Optional) To enable Allow Save For Later on a per-step basis:
a. From a Step element, expand the Save Options section.
b. Check, or uncheck, Allow Save For Later to enable or disable Save For Later on the Step.
What's Next
Map Saved Instance URLs to Custom Fields
See Also
• Customize the Save for Later Error Message
• Conditionally Display Elements in Saved OmniScripts for Different User Profiles
• View In-Progress and Completed OmniScripts
• Specify a Resume Link in a Visualforce Page
Map Saved Instance URLs to Custom Fields

Configure where a saved OmniScript instance launches in Salesforce by mapping URLs to custom fields on
the Saved OmniScript object.
Configure Save URL Patterns to control the URL format that maps to any custom fields. You must create a
custom field in the Saved OmniScript object for every additional URL that you save to an OmniScript
instance.

company 1095
OmniStudio
Before You Begin

When using Community pages to launch saved OmniScript instances, add the Vlocity LWC OmniScript Wrapper component to the
Community page. See Launch an LWC OmniScript with LWC OmniScript Wrapper.
NOTE
The URLs saved to the object require different syntax depending on the type of OmniScript
and where the OmniScript launches.
1. From Salesforce Setup, open the Object Manager, and select the Saved OmniScript object.
2. Add a new custom field that accepts URLs.
3. Copy the field's API name.
4. In the Save URL Patterns section, in the Field API Name field, paste the field API name.
5. In the URL Pattern field, enter a URL using these syntax patterns:
LWC OmniScripts:
NOTE
LWC OmniScripts must use the LWC OmniScript Wrapper URL patterns to launch
saved OmniScript instance URLs.
• Community Pages:
Using the Community LWC OmniScript Wrapper URL pattern, add the parameter c__instanceId ,
and set it to {0}. Set the c__target parameter to {1}.
https://myDomain.force.com/CommunityName/s/CommunityPage/
c__layout=lightning&c__instanceId={0}&c__target={1}
NOTE
The Community page that opens the saved instance must have the LWC
OmniScript Wrapper component present. See Launch an LWC OmniScript with
LWC OmniScript Wrapper.
• Lightning Pages:
Using the Lightning LWC OmniScript Wrapper URL pattern, add the parameter c__instanceId
and set it to {0}. Set the c__target parameter to {1}.
https://myDomain.force.com/lightning/cmp/namespace__vlocityLWCOmniWrapper?
c__layout=lightning&c__instanceId={0}&c__target={1}
Angular OmniScripts:

company 1096
OmniStudio
Enter the Resume link for the OmniScript, replacing the Instance Id with {0}:
https://myDomain.force.com/apex/OmniScriptUniversalPage?
layout=lightning#/OS/{0}/scriptState/saveAndResume/true/true
6. (Optional) Test the OmniScript by taking these steps:
a. Save and Activate the OmniScript.
b. Preview the OmniScript and save the instance.
c. Copy the saved OmniScript link.
d. Paste the link into your browser to view the saved instance.
NOTE
If the link does not work, ensure your URL format and any Community page
names are correct.
What's Next
Customize the Save for Later Error Message
See Also
• Configure Save Options

Customize the Save for Later Error Message

Exclusive to LWC OmniScripts, create custom error messages with the error handling framework.
When multiple users are updating the same saved OmniScript instance, the first user that saves the
OmniScript becomes the owner of that instance. The user that is unable to save the OmniScript receives an
error that informs them that they need to refresh the OmniScript. Customize the error message users
receive by using the Error Messages property. For more information, see Customize OmniScript Error
Messages.
1. In the OmniScript's Script Configuration, expand the Error Messages section, and click Add Custom
Error Message.
2. Leave the Path value blank. The error message is in the OmniScript's root path.
3. In the Value field, enter this default error message text: This saved OmniScript has been
updated since resuming. To see the latest updates, please exit and resume
the saved OmniScript again.
4. In the Message field, enter a custom error message.
6. (Optional) Test the OmniScript by taking these steps:
a. Open the OmniScript and save an instance.

company 1097
OmniStudio
b. Resume the saved OmniScript instance in two separate tabs.

c. In one of the instances, add additional information and save the OmniScript.
d. In the other instance, try to add information and save the instance to view the custom error.
See Also

• Map Saved Instance URLs to Custom Fields
Conditionally Display Elements in Saved OmniScripts for Different User Profiles

Beginning with Vlocity Spring '18, a user's saved OmniScript instance can be opened by another user.
When the OmniScript resumes, it uses the profile of the current user. Conditions on elements can
determine whether the user has access to the element. For example, an agent may see data that does not
display to customers.
1. In an element's Conditional View property, click Add Condition.

2. In the first field, enter userProfile.
3. In the second field, enter the name of a User Profile. For example, System Administrator.
The following figure shows settings for an element that displays only to call center agents.
See Also

View In-Progress and Completed OmniScripts

Enable users to view in-progress OmniScripts that have been saved for later by using Visualforce pages
and the Vlocity OmniScript Workbench.
Use prebuilt Visualforce pages for Accounts and Contacts, create custom Visualforce pages for additional
records, or view all records in the Vlocity OmniScript Workbench.

company 1098
OmniStudio
NOTE
If an OmniScript launches from the context of a Contact or Account record, you can view
all in progress or completed OmniScripts for that specific Account or Contact under the
Customer Story section.
Display Saved OmniScript Instances for Accounts and Contacts

Add the provided OmniScriptInstanceAccountPage Visualforce page to the Account layout or the
OmniScriptInstanceContactPage to the Contact layout.
Display Saved OmniScript Instances on ObjectRecord Pages

Display saved OmniScript instances on an object record page by creating a Visualforce page and adding
the component to the object's layout.
1. Create a new Visualforce page.

2. Copy and paste the following code into a new Visualforce page.
<apex:page standardStylesheets="false" showHeader="true"

standardController="ObjectName" extensions="NS.VFPageControllerBase"
sidebar="true" docType="html-5.0" >
<NS:OmniScriptInstanceComponent standardController="{!stdController}"/>
</apex:page>
3. Replace these variables in the code with the appropriate values:
• ObjectName Enter the API name of the standard or custom object.
• NS : Enter the Namespace of the package. For more information, see Viewing the Namespace and
View All Saved OmniScript Instances

View all Saved OmniScript instances by opening the Vlocity OmniScript Workbench.
To open the Vlocity OmniScript Workbench:
1. Open the Salesforce App Launcher.

2. Click Vlocity OmniScript Workbench.
See Also


company 1099
OmniStudio
Specify a Resume Link in a Visualforce Page

Users can create a VisualForce page that specifies the custom URL used for Save and Resume.
Create a new Visual ForcePage and enter the code below. Replace the FieldAPIName variable with the
Field API Name specified under the Save URL Patterns. For more information, see Configure Save
Options.
<apex:page standardStylesheets="false" showHeader="true"

standardController="Account" extensions="VFPageControllerBase" sidebar="true"
docType="html-5.0" >
<c:OmniScriptInstanceComponent standardController="{!stdController}"
resumeFieldName="FieldAPIName"/>
</apex:page>
See Also

Emailing an OmniScript
To email a link to an OmniScript to a Contact, Lead, or User, you create an Integration Procedure that uses
a remote action to send the email and call the Integration Procedure from an OmniScript or from Apex
code.
For example, an insurance agent who requires details about a prospect can email an OmniScript link to the
prospect. When the recipient of the email clicks the link, their browser displays the OmniScript, containing
whatever data the sender has entered. The recipient fills in the required information, enabling the agent to
create a quote for them.
The recipient does not need to have a Salesforce account to access the OmniScript but must have a
Contact, Lead, or User record containing their email address and the permissions required to view the
script. The recipient might be required to log in to view the email.
To implement this feature, you create the following components:
• An email template containing the required merge fields

• An Integration Procedure containing a remote action that invokes the email-sending method, passing in
the required parameters
• In the OmniScript, an Integration Procedure action that calls the email Integration Procedure
The following sections provide details about creating the required components.

company 1100
OmniStudio
Creating the Email Integration Procedure

To send the email, create an Integration Procedure containing a remote action with the following settings:
• Remote Class: DefaultOmniScriptSendEmail

• Remote Method: emailOmniScriptLink
In the Remote Options section, define the following required key/value pairs, plus any merge fields
required by the email template:
• Language : OmniScript language. For multi-language OmniScripts, set to "Multi-Language" and set the
LanguageCode parameter to the Salesforce language code .
• Type : OmniScript type.
• Subtype: OmniScript subtype.
• emailTargetObjectId: The Id of the recipient (contact, lead, or user).
• emailTemplateName : The Salesforce Unique Template Name.
• saveAsActivity: Set to true if you want an activity record created when the email is sent.
• LanguageCode : For multi-language OmniScripts, the Salesforce language code.
This remote action creates an OmniScript record with the specified Type, Subtype and Language. Before
the OmniScript is saved, all actions prior to the first step are run, which enables you to prefill information
about the Contact, Lead, or User. The Remote Action merges the data into the email template and sends
the email.
To test the Integration Procedure, go to the Preview tab and define an input parameter named "contextId"
that contains the Id of a valid Contact, Lead, or User who has a valid email address. When you are satisfied
that the Integration Procedure works as desired, activate it.
Specifying the Integration Procedure Action

In the OmniScript, at the point where you want the email sent, add an Integration Procedure action with the
following settings:
• Integration Procedure Key: Email_Action

• Extra Payload:
• Key: contextId
• Value: the Id of the Contact to whom you want to send the email.
The OmniScript must provide the contact Id in the contextId node of the JSON payload that is sent to the
To verify that you have configured all settings correctly, preview the OmniScript and check the resulting
email.
Creating the Email Template

Define an email template containing the desired text. The email template type must be Custom (without
using Letterhead). In the template, specify the URL that links to the OmniScript using the following format:

company 1101
OmniStudio
https://<instance>/apex/OmniScriptUniversalPage?layout=lightning#/OS/
%OmniScriptInstanceId%/scriptState/saveAndResume/true/true
In the email template, use Salesforce-style merge fields (formatted as {!object.field}) to incorporate
Salesforce data, and Vlocity-style merge fields (formatted as %fieldname%) to incorporate data that is
provided by the Integration Procedure.
For example:
Hi, {!Name}:
Here's a link to the OmniScript you requested:
https:///myorg.visual.force.com/apex/OmniScriptUniversalPage?
layout=newport&AccountId=%accId%&OmniScriptInstanceId=%instanceId
%&scriptMode=vertical&loadWithPage=false&LanguageCode=%LanguageCode%#/
Thanks,
%SenderName% %Name%
Deploying an OmniScript
Vlocity OmniScripts can be deployed within the Vlocity application, or within an iFrame either on a
Salesforce Community or an external website. Once embedded within the page, the script can be
versioned, modified, and activated without the need to reconfigure the page.
When using OmniScript in the Lightning Console, note that the result of launching the OmniScript home
page has changed as of SFDC Winter '19. For the optimal experience, create a new primary tab by CTRL-
clicking the link. From the new primary tab, you can open objects in a sub-tab of that primary tab.
Deploy an OmniScript to an External Salesforce Site

After creating a new Visualforce OmniScript page, you can deploy to an external Salesforce website. Once
embedded within the page, the script can be versioned, modified, and activated without the need to
reconfigure the page.
1. From Setup, click Develop, and then click Sites, and then click New.
2. Enter values for Site Label, Site Name, and other fields.
3. In the Active Site Home Page field, lookup and select the Visualforce OmniScript page created above.
4. Record the site's URL for future reference.
5. Click Public Access Settings, and then click Edit, and set the following values:
• Custom Object Permissions
• Vlocity OmniScripts: Read
• Elements: Read
• Applications: Read, Create
• Field Level Security
• Vlocity OmniScript: Make All Fields Visible
• Element: Make All Fields Visible
• Application: Make All Fields Visible
• Enabled Apex Class Access

company 1102
OmniStudio
• [NameSpace] .ApplicationResource
6. Embed the URL from Step 4 in the external site's iFrame.

Enable specific access to Remote Action APIs (Vlocity Open Interface Apex classes) per user or profile.
Configure an Apex class permissions checker to require the user to have explicit access to the Apex class
that administers the remote action called from an Omniscript, FlexCard, Classic Card, or REST API.
For example, after creating a Force.com site, publicly available APIs are enabled for the Site User profile
based on the profile's Apex class access to RestResource Apex classes. Adding an Apex class
permissions checker ensures that unauthorized users, such as a guest user, can't access classes through
the Vlocity/V1/GenericInvoke/ API.
1. In your org, go to Setup.

2. Type Custom Settings in the Quick Find search box and click Custom Settings.
3. From the Custom Settings page, click on the custom setting named General Settings.
4. On the General Settings page, click Manage.
5. Click New.
6. Enter ApexClassCheck into the Name field.

7. Enter true into the Value box.
8. Click Save to complete the process.

company 1103
OmniStudio
Deploying OmniScripts Off-Platform with OmniOut

Deploy OmniScripts to AEM, Heroku, and other Cloud Application Platforms to run them outside of the
Salesforce platform. AEM, Heroku, and other Cloud Application Platforms connect with Salesforce through
Salesforce Cloud Authentication Components or via a Salesforce Connected App. For more information,
see Connected Apps.
Using OmniScript with Adobe Experience Manager

Adobe Experience Manager is a web deployment option for OmniScript. AEM can be useful for keeping
your OmniScripts in line with your organization's designs and implementing custom elements and behaviors
for use across OmniScripts presented by your AEM Instance.
Setting Up and Configuring Adobe Experience Manager to use with OmniScript

OmniScript can be deployed to the web using Adobe Experience Manager.
See the instructions below on how to configure AEM:
1. Log in to the computer hosting your AEM server. If your server is hosted on another computer, log in to
it via Remote Desktop.
2. In Salesforce, visit the Static Resources page and download the vlocityomniaem.resource resource.
Rename the file to .zip and extract it to a new directory.
3. There are two packages in this folder:
a. omniscript-core: Contains the core business logic and styles for OmniScript as well as a Universal
page that can be configured for use with any OAuth2.0 configuration.
b. omniscript-demo: Contains several sample alternative deployments of OmniScript, One which
uses an OAuth pop out for script specific authentication, one and which uses constant
configuration on the OmniScript component.
4. If you have a non-standard deployment of AEM, you can configure the package by editing the
POM.xml to reflect your instance and login information.
5. Access CRXDE Lite and click the Packages icon to open the Package Manager page.
6. From Windows, open a command-line interfacesuch as Cygwin, Command Prompt, or PowerShell.
7. Through the command-line interface, navigate to the directory where you saved the static resource
downloaded in step two.
8. Navigate to the omniscript-core file and run the following command: mvn -P autoInstallPackage
clean install. This will take a few minutes as the package is built, deployed to and installed on
your configured AEM instance.
9. Navigate to the omniscript-demo file and run the following command: mvn -P
autoInstallPackage clean install.
10. Verify by going back to CRXDE and clicking on the second icon button in the top bar. This will bring
you to the Package Manager and will show your installed packages.
11. From CRXDE, navigate to apps/vloc/clientlibs/ooutCustom/js
12. Copy the sample_custom_setting.js file and rename the copy to custom_setting.js.
13. (Optional) In custom_setting.js change the namespace and consumer key.
var CONNECTED_APP_CONSUMER_KEY = 'AppKey';
var SFDC_NAMESPACE = 'vlocity_package_namespace';

company 1104
OmniStudio
After completing the instructions above, Set Up Salesforce Cloud Services Connection for Adobe
Experience Manager.
Connecting Salesforce Cloud Services with Adobe Experience Manager

After Setting Up and Configuring Adobe Experience Manager to use with OmniScript, follow the instructions
below to connect AEM to Salesforce:
The steps on this page outline how to connect Salesforce and AEM. The connection setup is not part of the
Vlocity package. For more information on connecting Salesforce to AEM, see Integrating with Salesforce.
1. Log into your Salesforce org and create your Connected App. In the API section, check Enable OAuth
Settings, and add Full access(full), and Perform request on your behalf at any time
(refresh_token, offline_access) to your Selected OAuth Scopes.
2. Enter a Contact Email, and leave the tab open.
3. After creating app, it can take up to ten minutes to take effect. Click Manage to set up connection
policies. Once the page loads, click Edit Policies.
4. Ensure that the Refresh Token Policy is set to Refresh token is valid until revoked and under
Session Policies the Timeout value is set to --None–. You need the Consumer key and Consumer
secret for step 6 of this process.
5. Open your AEM instance and click the main logo in the top left corner.
6. Click the Tools icon, and select Deployment.
7. Select the Cloud Services card and scroll down to the Salesforce section. Click Show Configurations.
8. Click the [+] link located to the right of Available Configurations and enter the necessary information
and click Create. This opens a new page and modal for the Cloud Services Configuration.
9. To create consistency across platforms, enter the name of the Connected App that you created in
Salesforce into the Title and Name fields of the AEM Configuration modal. Leave the modal open.
10. Navigate back to the Connected App page in Salesforce.
11. In Callback URL, enter the AEM URL that has Administrator Access: http://
localhost:4502/etc/cloudservices/salesforce/testsalesforceconnect.html where
testsalesforceconnect is the title of your Cloud Services connection.
12. Navigate back to the Connected App page and paste the URL into the Callback URL field.
13. Click Save.
14. From the Connected App record page, copy the Consumer Key.
15. Return to the AEM modal and paste the Consumer Key into the Customer Key field.
16. From the Connected App record page, copy the Consumer Secret.
17. Return to the AEM modal and paste the Consumer Secret into the Customer Secret field.
18. Click Connect to Salesforce. This brings you to a login screen for Salesforce. Log in to the
appropriate org and click Allow. A modal window will pop up indicating that the connection was
successful. If you receive an error, wait 10 minutes and attempt to connect again.
19. Click Ok to save the settings.
Applying the configuration to your website:
1. In AEM, navigate to your site home page and click the site where you want to add the Salesforce
connection.

company 1105
OmniStudio
2. In the toolbar that appears at the top of the page, click View Properties.
3. From the site properties page, click the Cloud Services tab.
4. Click Add Configuration, and select Salesforce.
5. Click on Configuration Reference, and select the configuration that is titled the same as your
Connected App.
6. Click Save.
Adding a Local OmniScript Definition to Adobe Experience Manager

To obtain a local definition of an OmniScript and store it in Adobe Experience Manager the OmniScript
JSON must be saved and stored locally before being loaded into Adobe Experience Manager.
To obtain and store the local definition:
1. In Salesforce, switch to Salesforce Classic.

2. Open an OmniScript in the OmniScript Designer.
3. Click the page's URL and remove the relative path, leaving only the record id. For example, the
highlighted text in this URL: https://example.visual.force.com/apex/
example_namespace__omniscriptdesigner?id=a1L61000001e5TIEAY would be removed,
resulting in this URL: https://example.visual.force.com/a1L61000001e5TIEAY .
4. Navigate to OmniScript record page by entering the new URL.
5. Click Edit Layout.
6. Add the OmniScript definition to the record page by clicking Related Lists in the OmniScript Layout
editor, and dragging OmniScript Definitions into the Related Lists section, and click Save.
7. From the OmniScript record page, click the OmniScript definition listed under the OmniScript
Definitions section.
8. From the OmniScript Compiled Definition Detail page, copy the JSON from the Content field. If the
Content field is not available, add it by editing the page layout.
9. To add the JSON to your local computer create a file in a text editor with a JSON extension and paste
in the copied content. The file name should be saved in the following format, replacing Type, SubType,
and Language with your OmniScript's Type, SubType, and Language:
Type_SubType_Language.json . The Type and SubType cannot include special characters or
spaces.
To upload your OmniScript into Adobe Experience Manager:
1. In AEM, navigate to your Assets page by clicking the home button in the upper-left corner, then click
Assets.
2. From the Assets page, click the folder titled oout, then click the folder title scripts.
3. Click Create and add the JSON file. If the OmniScript already exists in AEM, update the file by clicking
the existing JSON file, then click Add Rendition, and select your new OmniScript JSON file.
Adding OmniScript to a Page in Adobe Experience Manager

To use OmniScript as a paragraph component in Adobe Experience Manager, it is first necessary to ensure
that the OmniScript page exists in Salesforce or a locally defined OmniScript has been added to Adobe
Experience Manager. For more information on adding a local definition of OmniScript, see Adding a Local

company 1106
OmniStudio
OmniScript Definition to Adobe Experience Manager. Once the OmniScript is confirmed in Salesforce or
locally defined, you can create a page in AEM that uses OmniScript.
To create the page:
1. In AEM, generate a page with a paragraph system by selecting Sites, clicking Create, and selecting
Page.
2. Select a generic content page template.
3. Enter the configuration information and click Create.
4. To configure a paragraph type to accept new components on this site, in the upper-right corner of the
page, change the mode from Edit to Design.
5. Click on the paragraph where you want to place the component, click on the paragraph icon that
appears, and then click the configuration icon that appears.
6. Scroll down to the components and make sure they are checked. Vlocity components are organized
under the Vlocity category. Once this is configured, components can be added in Editor mode.
To add components to the page:
1. From the AEM page, change the mode from Design back to Edit.
2. Once in Edit mode, click on Drag Components Here, and click the + icon.
3. Connect the page to Salesforce by selecting the Salesforce Cloud Services Authentication
component.
4. Configure the new component by selecting the component, and clicking on the configuration icon.
5. In the Edit Dialog modal, click the Configuration field, select the name of your Connected App, enter
a Salesforce Namespace Override, and click Save.
6. (Optional) Add a proxy in the Proxy URL field.
7. To add an OmniScript component, click on Drag Components Here, click the + icon, and select
OmniScript Universal.
8. Configure the OmniScript Universal component by selecting the component, and clicking on the
configuration icon.
9. For the path, enter the query and path you use for your active OmniScript with the following exception:
If merge indicators are included, e.g., {0}, remove them or replace them with hardcoded values.
10. (Optional) Apply Newport styling by adding the parameter layout=Newport to the path.
11. Save the configuration and view the OmniScript in the component to ensure the connection was
successful.
To use a local OmniScript definition in AEM:
configuration icon.
4. For the path, enter the query and path you would normally use for your active OmniScript with the
following exception:
If it includes merge indicators, e.g., {0}, remove them or replace them with hardcoded values.

company 1107
OmniStudio
5. (Optional) Apply Newport styling by adding the parameter layout=Newport to the path entered in the
previous step. For more information on using Newport to customize templates, see Branding
6. Enable AEM to use the Local Script Definition by using one of the following options:
• From the AEM GUI: Click the checkbox labeled Use Local Script Definition.
• From CRXDE : Navigate to apps/vloc/clientlibs/ooutCustom/js .
• In the custom_settings.js file enter this boolean: window.forceLocalDef = true .
Do not add the Salesforce Cloud Services Authentication component when using OmniScripts
defined locally. If the Salesforce Cloud Services Authentication exists, the resulting Salesforce
connection will cause the page to ignore the local definition.
Beginning with Vlocity Insurance Winter '19, OmniScripts defined locally can connect to the Salesforce
backend using the Salesforce Cloud Services Authentication component.
To use a local OmniScript definition with Salesforce Cloud Services Authentication :
2. Once in Edit mode, click on Drag Components Here, and click the + icon.
3. Connect the page to Salesforce by selecting the Salesforce Cloud Services Authentication
component.
4. Configure the new component by selecting the component, and clicking on the configuration icon.
5. In the Edit Dialog modal, click the Configuration field, select the name of your Connected App, enter
a Salesforce Namespace Override, and click Save.
configuration icon.
8. For the path, enter the query and path you use for your active OmniScript with the following exception:
If it includes merge indicators, e.g., {0} , remove them or replace them with hardcoded values.
9. (Optional) Apply Newport styling by adding the parameter layout=Newport to the path entered in the
previous step. For more information on using Newport to customize templates, see Branding
10. Enable AEM to use the Local Script Definition by using one of the following options:
• From the AEM interface: Click the checkbox labeled Use Local Script Definition.
• From CRXDE: Navigate to apps/vloc/clientlibs/ooutCustom/js .
• In the custom_setting.js file enter this boolean: window.forceLocalDef = true .
11. (Optional) To retrieve User information for logged in users:
• In the custom_setting.js file enter this boolean: window.callUserInfo = true.
12. Save the configuration.
Referencing Local Assets in Adobe Experience Manager

Asset references must be made manually while building an OmniScript. The instructions below explain how
to add local asset references to radio or multi-select elements.
1. In your Salesforce Org's OmniScript Designer, either open or Create the OmniScript you want to
reference the local asset in.

company 1108
OmniStudio
2. In AEM, open the Navigation Panel, click on Assets, and navigate to your desired asset.
3. Record the asset path. This is located in the URL after assetdetails.html. For example, /
content/dam/geometrixx/icons/diamond.png
4. Return to your script in the OmniScript Designer. From the radio or multi-select element, create one or
more options and type in value and label.
5. Click Edit as JSON link and scroll down to "imgId".
6. Paste the asset path into the entry for imgId.
7. Make sure to activate your OmniScript.
8. After opening the script in your AEM instance, the local asset should be visible.
Due to an issue with tinyMCE, the above instructions do not work on elements powered by tinyMCE.
Instead, the absolute path must be used. This can be done by adding your publish environment's Host URL
before the relative URL. This can be entered directly on the tinyMCE image options context menu.
Creating Custom Angular Templates for Adobe Experience Manager

OmniScript is built on the AngularJS framework and leverages templates to display different elements and
objects. Custom templates saved in Adobe Experience Manager can be used to replace specific instances
of elements to tweak how they display and add additional functionality.
1. Open CRXDE and navigate to /apps/vloc/components/global/customTemplates/

templates
2. Right click the customTemplates/templates node and select Create File and enter the file information.
3. This file can contain one or more templates as long as each template is within its own set of script tags.
Each template must have a unique id that can be referenced by the OmniScript elements. Set the type
to text/ng-template and save.
4. After creating your template, you need to update or create the index file. Navigate to /apps/vloc/
components/global/customTemplates
5. If there is no file named customTemplates.jsp, create one by copying and renaming
sample_customTemplates.jsp, this sample contains a sample call in the correct format.
6. Open customTemplates.jsp and for each template file you wish to include, add another <cq:include/>
tag with the 'script' property being the relative path to the file from the component's base directory. In
this case, it should read as follows:
<%@ include file="/libs/foundation/global.jsp" %>
<%@ page contentType="text/html; charset=utf-8" import="com.day.cq.wcm.api.WCMMode" %>
<%
%><%
%>
<cq:include script="templates/tutorial.html"/>
7. To use the template with an OmniScript, return to your OmniScript in OmniScript Designer and select
the element you wish to modify.
8. Scroll down to the input labeled HTML Template Id and enter the id of the template you created.
9. Previewing this OmniScript in the OmniScript Designer won't display the change. However, the new
template is visible in AEM.
For more information on using templates, see Overwrite OmniScript Element Template.

company 1109
OmniStudio
Creating Custom JavaScript and CSS for Adobe Experience Manager

In Adobe Experience Manager, client-side code such as stylesheets and JavaScript are handled by a
system of Client Libraries. To simplify customization, we have included a clientlib that is loaded by the
OmniScript components. This removes the need for customers to create and manage custom OmniScript
components manually for instance-wide customizations. This clientlib can be found at /apps/vloc/
clientlibs/ooutCustom.
This document explains adding JavaScript and CSS customizations to the OmniScript Component.
1. Navigate to /apps/vloc/clientlibs/ooutCustomCustom. The readme.txt folder contains a

detailed description of the folder and its function.
2. If you haven't already, create a folder for CSS and JS styles under the main clientLib folder. The files
stored here will override the base OmniScript code and can be used to change standard behaviors and
styles.
3. When adding files to the clientlib, do not include the substrings 'readme' or 'sample' in the filenames as
the package is configured to manage files with such names, and may overwrite or remove such files.
4. To load these files it is necessary to create index files for the clientlib to reference. AEM is set up to use
the file names 'css.txt' and 'js.txt' specifically and may not recognize index files by other names.The
#base variable points to the base directory that the clientlib will load the CSS or JS from, relative to the
clientlib folder. To include new files, list their paths relative to #base in the order you would like them to
load.
• For CSS, create a file under the main directory titled css.txt with the following code:
#base=css
yourfilename.css
• For JavaScript, create a file under the main directory titled js.txt with the following code:
#base=js
yourfilename.js
Deploying OmniScripts to Cloud Application Platforms

Cloud Application Platforms host OmniScripts by connecting to Salesforce as a Connected App or as a
standalone app. In the example Heroku deployment below, steps that are not exclusive to Heroku can be
applied to most Cloud Application Platform deployments.
To deploy OmniScripts to Heroku and other Cloud Application Platforms:
1. Set up your developer account with Heroku.

2. Once the account is set up, download and install Heroku CLI.
3. In Salesforce, visit the Static Resources page and download vlocityomniout.resource.
4. Rename the file to .zip and unzip it to a folder.
5. Copy the sample_custom_setting.js file and rename the new file to custom_setting.js; you must
apply all custom modifications to the custom_setting.js file. Heroku and OmniScript can be run in two
different ways, either as a Connected App or as a standalone app. Standalone apps can be used if you
do not wish to directly connect to Salesforce, you'll need to connect to your backend server in order for
the app to function.
• Connected App:

company 1110
OmniStudio
1. Log into your Salesforce org and create your Connected App. After creating an app, it can take
up to ten minutes to take effect.
2. Modify the following lines in the custom_setting.js file:
• var CONNECTED_APP_CONSUMER_KEY = 'ConsumerKey';
• var SFDC_NAMESPACE = 'vlocity_NS'; For information on locating your namespace,
• Standalone App:
1. Modify the custom_setting.js file and uncomment the last two lines:
customVOmniAuth = function(scope){};
2. Modify the index.html file to the following:
angular.module('miniApp', ["forceng", "vlocity-business-process"])
controller('ContactListCtrl', function ($scope, force, $location) {
$scope.showLink = true;
});
3. In index.html, add links to launch different scripts. Add the link as an anchor tag to the template
using the following syntax:
<a href="#/OmniScriptType/ExampleType/OmniScriptSubType/
ExampleSubType/OmniScriptLang/English/ContextId//
PrefillDataRaptorBundle//false" target="_self">Click Here</a>
4. To launch scripts from the links in your HTML file, include the script's definition in the scripts
folder, file naming convention:
ScriptType_ScriptSubType_ScriptLang.json
If Script Type or ScriptSubType name has spaces in it, replace the spaces with an underscore.
6. Deploy to Heroku using Git.
7. (Optional) To use a local OmniScript definition:
Modify the custom_setting.js file to include this boolean: window.forceLocalDef = true.
8. (Optional) Beginning with Vlocity Insurance Winter '19, User information for logged in Users can be
retrieved by OmniScripts defined locally. To retrieve the User information:
Modify the custom_setting.js file to include this boolean: window.callUserInfo = true.
9. (Optional) Beginning with Vlocity Summer '19, Newport styling is supported. To add Newport styling to
your Heroku deployment:
a. Inside of index.php, rename /index.html to /index_newport.html.
b. Apply any modifications made to /index.html to /index_newport.html.
Making Attachments Available in External OmniScripts

To render attachments on an external OmniScript:
1. Go to your attachment, and download it.

2. Go to the Documents tab, and click New.
3. Check the box labeled Externally Available Image and upload the attachment as a document.
4. Right-click the image on the document, and select Copy Image Location.
5. Paste the image location in a simple text editor or notepad. Remove the host information and remove
extraneous parameters so that the path resembles the format of this example: /servlet/
servlet.ImageServer?id=015f4000002W0eV&oid=00Df400000380sD.

company 1111
OmniStudio
6. Navigate to the Record page where the file will be attached. If this is a Product record, edit the record
layout to include the Product Attachment List Visualforce page.
7. Click the New Attachment button, and fill out the form.
8. Instead of uploading the file again, copy the modified URL from step 5, and paste it into the URL field..
9. Leave URL Name blank.
10. Set Content Type to Image.
11. Set Is Default Image to Yes, and Save the attachment.
12. The name is the record Id, which can be used to edit the record in the future.
13. The image is now accessible in external OmniScripts.
Launching OmniScripts
This section provides information on launching OmniScripts in Salesforce from Communities, Object detail
pages, and Vlocity Card Actions.
How to Launch
Once activated, enable OmniScript access in one of three ways: standalone, embedded, or Vlocity Aura
Wrapper.
Standalone
Once Activated, the OmniScript is compiled and deployed as a standalone Lightning Web Component.
Access the LWC in the Salesforce Lightning App Builder in the Custom section and drag it onto the page.
Embedded
Once Activated, you can embed the component into any Aura or LWC component using the component tag.
The component attribute "prefill" accepts string or javascript object.
Examples
<c-type--sub-type-english prefill={prefill} layout="lightning"></c-type--sub-

type-english>
<c-type--sub-type-english prefill='\{"ContextId":"abc","otherParam":"FAQ"}'
layout="newport"></c-type--sub-type-english>
Vlocity Aura Wrapper

Once Activated, the OmniScript can be accessed using Vlocity’s prebuilt Aura component.
Since Lightning Web Components are not yet URL addressable, you can use this method to pass additional
parameters into the OmniScript.
Example
this[NavigationMixin.Navigate]({
type: 'standard__component',
attributes: {
componentName: '__vlocityLWCOmniWrapper'
},

company 1112
OmniStudio
state: {
c__target: 'c:testSubTypeEnglish',
c__layout: 'lightning', // or 'newport'
c__tabIcon: 'custom:custom18'
}
})
Lightning URL Example
https://my_org.force.com/lightning/cmp/my_org__vlocityLWCOmniWrapper?
c__target=my_org:typeSubTypeEnglish&c__layout=lightning&c__tabIcon=custom:custo
m18
Newport URL Example
https://my_org.force.com/lightning/cmp/my_org__vlocityLWCOmniWrapper?
c__target=my_org:typeSubTypeEnglish&c__layout=newport&c__tabIcon=custom:custom1
8
Configuring the Vlocity OS Player Lightning Component

The Vlocity OS Player lightning component is a lightning component that acts as an endpoint for Actions in
Vlocity Cards to render OmniScripts in a Community.
NOTE
When launching an OmniScript from a Community object page, use the Vlocity OmniScript
lightning component to host OmniScripts. For more information on the Vlocity OmniScript
lightning component, see Launching OmniScript from a Community object page.
To configure the Vlocity OS Player:
1. In the Community Builder, create a new Standard Community Page. See Create Custom Pages
with Community Builder. Enter any name in the Name field. However, you must enter os as the URL.

company 1113
OmniStudio
2. From the Components navigation menu, drag the Vlocity OS Player component onto the /os page.

company 1114
OmniStudio
3. (Optional) To set a maximum height for the OmniScript, in the Max Height(px) field, enter a value.
To configure the Vlocity Cards component that launches OmniScripts:
1. Open any community page that has a Vlocity Cards component that launches an OmniScript.
2. In the Vlocity Cards component, enter /os in the Custom Community Page URL field.

company 1115
OmniStudio
Launching OmniScript from a Community or Lightning Record Page

The Vlocity OmniScript component hosts a single OmniScript that is invoked directly from a Community or
Lightning Record Page. By default, the record Id that exists on a Lightning Record page passes as a
parameter into the OmniScript as a context Id.
NOTE
When invoking an OmniScript from the Vlocity Cards lightning component in a Community,
use the OS Player lightning component to host OmniScripts. For more information on the
OS Player lightning component, see Configuring the Vlocity OS Player Lightning
Component.
To configure the Vlocity OmniScript component:
1. From the Lightning App Builder or Community Builder, drag the Vlocity OmniScript component
into your page.
2. When on a Lightning Record Page, the record Id for the object on the page is automatically passed into
the Record Id field when it contains the {!recordId} parameter.
3. Specify the Type and SubType of your OmniScript.
4. Select a Language.
5. Select a Layout.
6. (Optional) Specify a Max Height.
7. (Optional) To set where the page scrolls when Users page through the OmniScript, enter a number, in
pixels, into the Scroll Offset field.
8. (Optional) Select a Custom Visualforce Page to display styling changes.

company 1116
OmniStudio
9. (Optional) To prevent hitting issues with the Salesforce view state size limit, check Disable Load in
Page.
Launching OmniScript from a List Button

In order for the Visualforce page to show up as a selectable content source for the List button, follow the
instructions below. This example uses an Opportunity as the object, but other objects can be used.
1. Create an Apex page, using the following code:

public class
tenPageSizeExt { public tenPageSizeExt(ApexPages.StandardSetController controller)
{ controller.setPageSize(10); }
}
2. From the Omniscript page, click How to launch activated Omniscript. Check the Lightning checkbox
and click Copy to clipboard.
3. Create a Visualforce page and paste in the copied code.
4. Add the following code between the first two apex tags and save.
standardController="Opportunity" recordSetVar="opportunities" tabStyle="Opportunity"

extensions="tenPageSizeExt"
5. Go to Opportunity buttons and create a button with a List type and change the content source to
Visualforce page.
6. The Visualforce page you just created should show up from the dropdown selection list for Content.
7. Add the button to the List view for the Opportunity.
Launch OmniScript from Salesforce Flow

The new OmniScriptFlow lightning component enables you to invoke an OmniScript. The OmniScript must
have its step chart hidden and it can only contain a single step. To learn more about Salesforce flow, see
Cloud Flow Designer Guide. To invoke an OmniScript from Salesforce flow:
1. Go to Flow Designer, Drag a Screen component from the palette.

2. Click the Add a Field tab.
3. Under Extensions, drag the lightning component into the right panel.
4. Specify the following fields for the component:
• Unique Name - Enter a name for the component
• Lightning Component - Must be set to OmniScriptFlow
5. Configure the following Input Attributes:
• Type - Type of OmniScript
• SubType - SubType of OmniScript
• Language - Language of OmniScript
• Select Layout - Defaults to the Lightning layout, the Newport layout is also available.
• Extra Params String - This accepts a Text Template that contains a JSON string. The JSON string
is used to pass additional key/value parameters into the OmniScript. See the screenshot below for
an example of a Text Template.
• Record Id: The record ID is used as the Context ID for the OmniScript, {!recordId} is the flow
variable.

company 1117
OmniStudio
6. Configure the following Output Attribute:

• OmniScript Output Data: This attribute is used to send the OmniScript data JSON back to the flow.
This must be set to the variable {!osOutput}
7. (Optional) When calling an Integration Procedure from Salesforce Flow, the record variable {!
osOutput} can be used as a Source for the Input target. See Calling Integration Procedure From
Salesforce Flow.
Launching OmniScripts from an Object Detail Page

Launch an OmniScript form an Object detail page by creating a link or button.
To configure a custom button or link:
1. Locate and write down the Namespace prefix of your Salesforce org by going to Setup and clicking
Installed Packages.
2. Create a new Visualforce page. From Setup, click Develop , and then click Pages , and then click
New.
3. Paste the following Apex code into the page, replacing all other code:
Example 5. Apex Code to Launch OmniScript from a Button or Link

<apex:page standardStylesheets="false" showHeader="true" sidebar="true"
standardController="ObjectType" extensions="NS.VFPageControllerBase"
<div ng-app="Text" class='vlocity'>
<a ng-if="!isSforce" ng-href="/{!currentRecord['Id']}" ><i class="fa

fa-caret-left"></i>{!$Label.NS__NewBackTo} {!sParentObjectLabel} {!
$Label.NS__DetailLC}</a>
<a ng-if="isSforce" href="javascript:sforce.one.navigateToURL('/{!

currentRecord['Id']}')"><i class="fa fa-caret-left"></i>{!
$Label.NS__NewBackTo} {!sParentObjectLabel} {!$Label.NS__DetailLC}</a>
<hr/>
<NS:BusinessProcessComponent
standardController="{!
stdController}"
strOmniScriptType="ObjectSScriptType"
strOmniScriptSubType="ObjectScriptSubType"
strOmniScriptLang="" Language

company 1118
OmniStudio
strPrefillDataRaptorBundle="DRBundle"
verticalMode="true"
/>
var myModule = angular.module('Text', modules);
</script>
</div>
</apex:page>
4. In the code, perform the following steps:
• Set NS equal to the Namespace value collected in Step 1.
• Set standardController="ObjectType" to the object where the button or link is located.
• Set strOmniScriptType equal to the Type of the OmniScript.
• Set strOmniScriptSubType equal to the SubType of the OmniScript.
• Set Language equal to the Language of the OmniScript.
• Set Text equal to any value, as long as it is the same in both places.
• Set verticalMode to false to launch the script in Horizontal Mode.
• Version 2.5 or prefilling into hidden Steps and Elements only: If you are using DataRaptor to prefill
data into the OmniScript, set DRBundle equal to the DataRaptor Interface (Bundle) name. If you are
not using DataRaptor to pre-fill data, delete strPrefillDataRaptorBundle="DRBundle" from
the code.
5. Click Save.
Launching an OmniScript From an Object Detail Page Using a Custom Link or Button
To configure a custom button or link to launch an OmniScript from any detail page:
1. Locate and write down the Namespace prefix of your Salesforce org by going to Setup and clicking
Installed Packages.
2. To create a new Visualforce page, from Setup, click Develop, and then click Pages, and then click
New.
3. Paste the below Apex code into the page, replacing all other code.
• Set NS equal to the value collected in Step 1.
• Set ObjectType to the object where the button or link is located.
• Set OmniScriptType equal to the Type of the OmniScript.
• Set OmniScriptSubType equal to the Sub Type of the OmniScript.

company 1119
OmniStudio
• Set verticalMode to "false" to launch the script in Horizontal Mode.

• Prefilling into hidden Steps and Elements only: If you are using DataRaptor to pre-fill data into the
OmniScript, set DRBundle equal to the DataRaptor Interface (Bundle) name. If you are not using
DataRaptor to prefill data, delete strPrefillDataRaptorBundle="DRBundle" from the code.
• Click Save.
Example 6. Apex Code to Launch OmniScript From a Button or Link
<apex:page standardStylesheets="false" showHeader="true" sidebar="true"

standardController="ObjectType" extensions="NS.VFPageControllerBase"
<apex:includeScript value="/support/console/42.0/integration.js"/>
<a ng-if="!isSforce" ng-href="/{!currentRecord['Id']}" ><i class="fa fa-
caret-left"></i>{!$Label.NS__NewBackTo} {!sParentObjectLabel} {!
$Label.NS__DetailLC}</a>
<a ng-if="isSforce" href="javascript:sforce.one.navigateToURL('/{!
currentRecord['Id']}')"><i class="fa fa-caret-left"></i>{!
$Label.NS__NewBackTo} {!sParentObjectLabel} {!$Label.NS__DetailLC}</a>
<hr/>
<NS:BusinessProcessComponent standardController="{!stdController}"
strOmniScriptType="OmniScriptType"
strOmniScriptLang="Language"
verticalMode="true"
/>
</script>
</div>
</apex:page>
To add a button or link to an object detail page:
1. For SFDC standard objects, from Setup, click Customize, and then click [Object Name], and then
click Buttons, Links, and Actions. For custom objects, from Setup, click Create, and then click
Objects, and then click [Object Name].
3. Enter a Name for the button or link.
4. Select a Display Type.
5. For Behavior, select Display in existing window without sidebar or header.
6. For Content Source, select Visualforce Page and then select the page that you configured above.
7. Click Save.

company 1120
OmniStudio
8. Navigate to the page layout for the object and drag the button or link from the palette onto the layout.
9. Click Save.
Adding a Button or Link to the Page Layout

To add a button or link to an object detail page:
1. For SFDC standard objects, from Setup, click Customize, and then click [Object Name], and then
click Buttons, Links, and Actions. For custom objects, from Setup, click Create, and then click
Objects, and then click [Object Name].
3. Enter a Name for the button or link.
4. Select a Display Type.
5. For Behavior, select Display in existing window without sidebar or header. Select a different option if
your requirements are different.
6. For Content Source, select Visualforce Page and then select the page that you configured above.
7. Click Save.
8. Navigate to the page layout for the object and drag the button or link from the palette onto the layout.
9. Click Save.
Creating a Custom Link to Launch an OmniScript

Use the following syntax to launch a link from any page:
<a href="#/OmniScriptType/AAA1/OmniScriptSubType/AAA2/OmniScriptLang/AAA3/
ContextId/[ContextId]/PrefillDataRaptorBundle/[BundleName]/
[verticalMode]">TEST</a>
• AAA1—OmniScript Type
• AAA2—OmniScript Sub Type
• AAA3—OmniScript Language
• [ContextId] (Optional)—Context Id for example {!Contact.Id}
• [BundleName] (Optional)—DataRaptor Bundle name used for prefilling fields into the script. While this
functionality is still supported, Vlocity recommends using the Data Raptor Extract Action within
OmniScripts to prefill.
• [verticalMode] (Optional)—/true or /false. Default is True. If True, all the steps are vertically stacked. If
False, all the steps are horizontally navigated.
Launching an OmniScript From the Action Toolbar
NOTE
Beginning with Winter '18, the Action Toolbar is no longer available.

company 1121
OmniStudio
Using the Action toolbar, you can launch a single OmniScript from a variety of contexts without configuring
a Visualforce page for each context. For example, you can launch an OmniScript from a Contact, Account,
Case record, or Customer Community, using a single Visualforce page.
In addition, you can apply filters so that the OmniScript is available only if certain conditions are met. For
example, an Insurance OmniScript called Add a Driver can be available on an Auto Policy record type, but
not on any other policy record types, or only a certain user profile can see an action.
Target URL and URL Parameters

To launch Vlocity OmniScripts, Vlocity Cards components, web pages, or external applications from a
Vlocity Action, enter an Apex page, or a URL with parameters as the Target URL. LWC components, such
as LWC OmniScripts, LWC Cards, and FlexCards, are not URL addressable and so can't be accessed
directly from a URL and must embedded on a page. See Vlocity Actions.
IMPORTANT
For out-of-the-box Vlocity Actions, such as View Record, the Target URL/{0} does not
work outside of Salesforce Classic. To navigate to a page in Salesforce Lightning
Experience, update the URL to /lightning/r/[ObjectName]/{0}/view, where
ObjectName is the API name of the sObject such as Account.

company 1122
OmniStudio
Available Visualforce Pages to Launch OmniScripts

Vlocity provides these Visualforce pages to launch OmniScripts:
• OmniScriptUniversalPage
• OmniScriptUniversalPageWHeader
• OmniScriptUniversalPageWHeaderSidebar.
• OmniScriptUniversalMobilePage (for use with Mobile only)
• OmniScriptUniveralPageConsole (for use in the Industry Console)
• OmniScriptUniversalCommunitiesPage (for use in Communities)
Formatting the Target URL

For a Target URL that launches a Vlocity Card component or a Vlocity OmniScript, the first part of the URL
is the apex page, followed by the PageName, such as /apex/<PageName>. The second part of the Target
URL is a list of parameters defined in the URL Parameters field and is available to any URL types Vlocity
Actions support, including web pages and external applications.
The following example shows how to format the URL:
//Example Target URL for launching an OmniScript
/apexNS__[PageName]?id={0}#/OmniScriptType/AAA1/OmniScriptSubType/AAA2/
OmniScriptLang/AAA3/layout/[LayoutName]/ContextId/{0}/PrefillDataRaptorBundle/
[BundleName]/[verticalMode]
//Example Target URL for launching a Card component
/apex/NS__[PageName]?id={0}#/layout=[LayoutName]
//Example External URL
https://www.domainName.com/?id={0}/
Beginning with Vlocity Version 12, an alternative URL pattern is available:
/apexNS__[PageName]?
id={0}&OmniScriptType=AAA1&OmniScriptSubType=AAA2&OmniScriptLang=AAA3&layout=[L
ayoutName]]&PrefillDataRaptorBundle=[BundleName]&scriptMode=[verticalMode]
/apex/NS__[PageName]?id={0}&layout=[LayoutName]

company 1123
OmniStudio
NOTE
While both URL patterns are valid, the advantage of the alternative pattern is that it is
mobile-friendly and enables adding additional URL parameters directly into the OmniScript
Data JSON. For example, appending &customerSLALevel=gold to the URL would add a
node to the root of the OmniScript Data JSON, such as "customerSLALevel":"gold".
Target URL Variable Descriptions

This table lists descriptions for the variables from the Target URL examples on this page:
Variable Description Available

For
NS__ Namespace of the installed package. Use when referencing a Universal Visualforce page. OmniScript,
Card
[PageName] Universal Visualforce page, OmniScriptUniversalPage, OmniScriptUniversalPageWHeader, OmniScript,
OmniScriptUniversalPageWHeaderSidebar, or OmniScriptUniversalMobilePage) or another Card
Visualforce page containing the OmniScript.
{0} The first parameter listed in the URL Parameters field and is often the Context Id of an OmniScript,
sObject. See URL Parameters on this page. Card
AAA1 OmniScript Type OmniScript
AAA2 OmniScript Sub Type OmniScript
AAA3 OmniScript Language OmniScript
[LayoutName] • (Optional) For OmniScript: lightning or Newport. Defines which layout theme to use. The OmniScript,
default is lightning. Card
• (Optional) For Card: Defines which card layout to use.
[BundleName] (Optional) DataRaptor Bundle name used for prefilling fields in the script. OmniScript
[verticalMode] (Optional) true or false. If true, all the steps in an OmniScript are vertically stacked. If false, all OmniScript
the steps in an OmniScript are horizontally navigated. Default is true.
URL Parameters
In a Target URL, the {0} represents the indexed position of a parameter in the list of parameters in the URL
Parameter field. The parameter is the field API name in the applicable object, such as AccountId, or ID in
Contact.
Specify the parameters as a comma-delimited string, in the sequence in which you want to replace the
parameters in the Target URL. For example, AccountId,vlocity_ins__PrimaryContactId__c, replaces {0}
in the Target URL with the AccountId, and replaces {1} in the Target URL with the
vlocity_ins__PrimaryContactId__c.

company 1124
OmniStudio
You can also use attributes from the User object, such as User.ContactId to get the Id of the current user.
NOTE
Beginning with CME Fall '18, Vlocity supports the Salesforce object edit URL format of /{3
character sobject prefix}/e'.
Example 7. URL Parameter Example

/apex/vlocity_ins__OmniScriptUniversalPage?
id={0}&OmniScriptType=AppointmentApplication&OmniScriptSubType=IndependentAgent
AppointmentApplication&OmniScriptLang=English&layout=lightning
/apex/NameSpace__ConsoleCards?id={0}&layout=lex-layout
Navigating URLs in Lightning and Lightning Community

Navigating to Lightning pages and from Lightning Containers requires the relative path to have a prefix.
To use proper URL syntax, follow these requirements :
• To use relative URLs in the Lightning Console (LEX), prefix the Target URL with ltng:, and make sure
the Open URL in value is set to New Tab / Window so that the relative URL link will open in a new
window. For example, ltng:/apex/NewLandingPage, will open the New Landing Page in a new
window.
• To redirect to a Lightning or Lightning Community Page, prefix the relative URL with ltngpage:. For
example, ltngpage:/Home will redirect to your community home page.
• To open a Visualforce page from Salesforce's Lightning container, prefix the relative URL with ltng:. For
example, ltng:/apex/CustomVFPage, will redirect to the CustomVFPage.
Creating a Visualforce Page to Display the Action Toolbar
1. From Setup, click Develop, and then click Visualforce Pages.

2. Click New.
3. Replace the code in the Visualforce Markup section with the following Apex code:
<apex:page standardController="ObjectName"
extensions="NS.VFPageControllerBase" showHeader="false" sidebar="false"
docType="html-5.0">

company 1125
OmniStudio
<NS:ActionComponent standardController="{!
stdController}"
objType="ObjectName"
style="StyleType"/>
</apex:page>
• NS = Namespace of the installed package.

• ObjectName = Object that the toolbar will launch from.
NOTE
If the ObjectName is a custom object, add the Namespace to the standardController—
for example, vlocity_ins__Policy__c.
• StyleType = Style options are Horizontal, Vertical or Select. See below for examples.
Visualforce Page to Display the Action Toolbar on the Home Page
<apex:page controller="NS.ActionDisplayController" showHeader="false"

sidebar="false" docType="html-5.0">
<NS:ActionComponent objType="Home"
style="StyleType"/>
</apex:page>
To learn how to add a Visualforce component to your Home page, see Create Custom Home Page
Components in the Salesforce Help.
Action Toolbar Style Types
NOTE
Beginning with Winter '18, the Action Toolbar is no longer available.
Figure 19. Horizontal Action Toolbar

company 1126
OmniStudio
Figure 20. Vertical Action Toolbar
Figure 21. Action Toolbar as a List
URLs
Use the following syntax to launch a link from any page:
<a href="#/OmniScriptType/AAA1/OmniScriptSubType/AAA2/OmniScriptLang/AAA3/
ContextId/[ContextId]/PrefillDataRaptorBundle/[BundleName]/
[verticalMode]">TEST</a>
• AAA1—OmniScript Type
• AAA2—OmniScript Sub Type
• AAA3—OmniScript Language
• [ContextId] (Optional)—Context Id for example {!Contact.Id}
• [BundleName] (Optional)—DataRaptor Bundle name used for pre-filling fields into the script. While this
functionality is still supported, Vlocity recommends using the Data Raptor Extract Action within
OmniScripts to prefill.
• [verticalMode] (Optional)—/true or /false. Default is True. If True, all the steps are vertically stacked. If
False, all the steps are horizontally navigated.
Embed an OmniScript in Another OmniScript

An OmniScript can be reused in one or more existing OmniScripts. Reusing OmniScripts enables you to
build a variety of smaller scripts and then piece them together into one or more parent scripts. Embedded
OmniScripts behave just like other OmniScript elements.

company 1127
OmniStudio
NOTE
A reusable OmniScript cannot contain another reusable OmniScript. Additionally, no
element in a reusable OmniScript can have the same name as an element in the parent
script. Reusable OmniScripts adopt the script configuration of the parent script.
1. In the OmniScript you want to reuse, click Setup, and check the Reusable checkbox.
2. Activate the reusable OmniScript.
3. Navigate to the OmniScript that will host the reusable OmniScript.
4. In your OmniScript's Build panel, expand the OmniScripts section.
5. Locate the reusable OmniScript and drag it into the canvas.
6. Preview your OmniScript to test the behavior.
What's Next
Activate and Deactivate Embedded OmniScripts
See Also

• Embed FlexCards in an LWC OmniScript
Embedding a Reusable OmniScript

You can embed active reusable OmniScripts in other OmniScripts. For example, if you have an OmniScript
that updates a case, you might want to add that reusable script component at the end of an OmniScript
form used for troubleshooting.
To embed a reusable OmniScript in another form:
1. Expand the OmniScripts section of the Available Components.

2. Drag the reusable OmniScript onto the Structure pane.

company 1128
OmniStudio
Starting with Summer '17, Reusable OmniScripts have a link, located under the element properties, that
enables a user to view the OmniScript in a new tab while working in the OmniScript Designer.
If the OmniScript that you want to embed is not visible, make sure it's Active and marked as Reusable. For
more information, see Embed an OmniScript in Another OmniScript and Activate or Deactivate an
Embedded OmniScript.
Activate and Deactivate Embedded OmniScripts

When you activate or deactivate an embedded script, Vlocity updates all activated parent scripts to reflect
the change.
Before You Begin

Learn how to embed an OmniScript in other OmniScripts. See Embed an OmniScript in Another OmniScript.
1. From the Setup section of the embedded script, click Activate Version or Deactivate Version.
2. Verify the Affected OmniScripts (any Active OmniScript that this form is embedded in), and click
Proceed.

company 1129
OmniStudio
3. After the parent scripts update, click Done.
See Also

• Embed FlexCards in an LWC OmniScript
Configuring Community Profiles for OmniScript
IMPORTANT
Beginning with the Winter '20 Salesforce release, Guest Users, also called anonymous
users, cannot access any records by default. Criteria-based Sharing Rules grant them
read-only access. This affects all Salesforce orgs. For details, see Guest User Record
Access Development Best Practices.
Vlocity allows guest users to create and update the records to which Sharing Rules grant
access. No additional configuration is necessary for this expanded access.
To enable an OmniScript to be deployed from a Community, configure the following sharing settings and
profile access.
To configure sharing settings:
1. From Setup, click Security Controls or Security and then click Sharing Settings.
2. If you are in Lightning Experience, from the Manage sharing settings for drop-down list, select
Vlocity OmniScript. If you are in Salesforce Classic, skip this step.
3. To change the Default Internal Access or External Default Access for Vlocity OmniScript, click the Edit
button next to Organization-Wide Defaults.
4. For Vlocity OmniScript, set the Default Internal Access and External Default Access to Public Read
Only.
5. If you are writing to the Application object, follow the same steps to set the Default Internal Access and
Default External Access for Application objects to Public Read/Write.

company 1130
OmniStudio
6. Click Save.
The prerequisite for these steps is that communities must exist in your org. For more information, see
Setting Up a Community in the Salesforce Help. To configure community user visibility:
1. From Setup, click Customize or Feature Settings, then click Communities, then click All
Communities.
2. For the community to which you are granting access, click Workspaces, click Administration, then
click Members.
3. Make sure that all profiles that should access the community are in the Selected Profiles section, then
click Save.
To ensure that you are using the Original Profile Interface:
1. From Setup, type User in the Quick Find box and click User Management Settings.
2. Set the Enhanced Profile User Interface option to Disabled.
To set field-level security:
1. From Setup, click Manage Users or Users, then click Profiles.

2. Find the profile for the users who will be accessing the community and click its name.
If you click Edit, you won't see the Field Level Security settings.
3. Scroll down to the Field Level Security section and click View next to Application.
4. Click Edit and click Read Access next to every field.
5. Click Save.
6. Repeat steps 3 through 5 for Vlocity OmniScript and Vlocity OmniScript Compiled Definition.
Setting Object Permissions and Enabling APIs, Visualforce Pages, and Apex Access
IMPORTANT
1. From the Profile for the users who will be accessing the Community, click Edit. Click API Enabled.
2. Scroll down to Custom Object Permissions and enable Create, Read, Edit, and Delete permissions for
the Application, OmniScript Definitions, and Vlocity OmniScript objects.

company 1131
OmniStudio
3. Click Save.
4. Return to the Profile. Scroll down to Enabled Apex Class Access and click Edit.
5. Move all Vlocity classes and any OmniScript-related Custom Classes into the Enabled Apex Classes
section and click Save.
6. Return to the Profile and scroll down to the Enabled Visualforce Page Access section and click Edit.
7. Move all Vlocity VF pages and any OmniScript-related Visualforce pages into the Enabled Visualforce
Pages section and click Save.
Applying the Visualforce Page for OmniScript in a Community

To configure the Visualforce Page for the OmniScript in a Community:
1. Locate and write down the Namespace prefix of your Salesforce Org. Go to Setup and click Installed
Packages.
2. To create a new Visualforce page, from Setup, click Develop, and then click Pages, and then click
New.
3. Paste the below Apex code into the page, replacing all other code.
• Set NS equal to the value collected in Step 1.
• Set strObjectType to the object where the button or link is located.
• Set strOmniScriptType equal to the Type of the OmniScript.
• Set strOmniScriptSubType equal to the SubType of the OmniScript.
• Set verticalMode to false to launch the script in Horizontal Mode.
• Version 2.5 or prefilling into hidden Steps and Elements only: If you are using DataRaptor to prefill
data into the OmniScript, set DRBundle equal to the DataRaptor Interface (Bundle) name. If you are
not using DataRaptor to prefill data, delete strPrefillDataRaptorBundle="DRBundle" from the
code.
4. Click Save.
<apex:page standardStylesheets="false" showHeader="false" sidebar="false"

<style> .vlocity .vlc-form-group { text-transform: none;} .vlocity .field-
lable {text-transform: uppercase;} </style>
<NS:BusinessProcessComponent
strOmniScriptType="ObjectSScriptType"
strOmniScriptLang="Language"

company 1132
OmniStudio
verticalMode="true"
/>
</script>
</div>
</apex:page>
Creating a Community User From an Application

The housing community will provide clients with a self-service portal to interact with the agency and
property management.
It is possible to automate the creation of an external (Salesforce Community) user after a prospective
tenant fills out the initial intake form, requesting assistance. If you would like to automate that user creation,
follow these steps.
To create an external user when a form is submitted:
1. Add a Remote Action to the end of the OmniScript and configure the settings as follows:
Remote Class = ExternalUserSelfRegistration

Remote Method = selfReg
2. Create elements in the OmniScript for Username and Password. Alternatively, if an email address is
already an element in the form, you can set the email address as the username. If no password
element is added, a system-generated email will be sent to the user with instructions for setting up their
password for the portal. There are two optional remote options to add as Key/Value pairs:
• profileId: To create a user with a different profile than the default one set up in the community, enter
profileId as the key and the Id of the profile as the value.
• sendEmail: To decide if a confirmation email is sent to new user, enter a boolean in the value field.
3. Create a Pre-Transform DataRaptor Interface to add to the remote action. The purpose of the Pre-
Transform DataRaptor Interface is to map fields in the application (such as Name, Email, Password) to
the required inputs for registration.

company 1133
OmniStudio
Figure 22. Example Pre-Transform DataRaptor Interface
OmniScript Element Reference

This guide contains explanations of the different elements that can be added to an OmniScript. Each
element uses an extendable Lightning web component or customizable HTML template. There are
separate templates used for Lightning Player and Classic Player. Classic Player is no longer supported,
however, Classic templates for Summer 17 and v15 are still available.
Beginning with Vlocity Insurance and Vlocity Health Summer '18, OmniScript templates can be installed
directly from within your org. To install the templates, see Installing Vlocity Templates.
To download Lightning Player and Classic Player templates, see Downloading OmniScript Vlocity
Templates.
• Action Block (see Action Block)

• Aggregates (see Creating a Formula or Aggregate in an OmniScript)
• Blocks
• Calculations (see Integrating OmniScript with Vlocity Calculations using the Calculation Action)
• Checkbox (see OmniScript Input Components)
• Currency (see OmniScript Input Components)
• Custom LWC (see Custom LWC Element)
• DataRaptor Turbo Action
• Date (see OmniScript Input Components)
• Date/Time (Local) (see OmniScript Input Components)
• Delete Action (see Delete Action )
• Disclosure (see OmniScript Input Components)
• DocuSign Envelope Action (see Preparing DocuSign Documents)
• DocuSign Signature Action (see Preparing DocuSign Documents)

company 1134
OmniStudio
• Done Action (see OmniScript Done Action)

• Edit Block (see Using OmniScript Edit Blocks)
• Email
• Email Action (see OmniScript Email Action)
• File (see Adding a File Component to the Structure of an OmniScript)
• Formulas (see Creating Formula Fields in an OmniScript)
• Geolocation (see OmniScript Function Components)
• Headline (see OmniScript Display Components)
• HTTP Action
• Image (see OmniScript Display Components)
• Input Block (see OmniScript Group Components)
• Integration Procedure Action (see OmniScript Integration Procedure Action)
• Intelligence Action
• Line Break (see OmniScript Display Components)
• List Merge Action (see OmniScript Component Definitions)
• Lookup (see Working with Lookup Query Configurations)
• Matrix Action (see OmniScript Matrix Action)
• Multi-select (see OmniScript Input Components)
• Navigate Action (see Navigate Action)
• Number (see OmniScript Input Components)
• OmniForm
• OmniScript (see OmniScript Action Components)
• Password (see OmniScript Input Components)
• PDF Action (seeAdding a PDF Action to the OmniScript)
• Post to Object Action (See Posting Data to the Application Object using the Post to Object Action)
• Radio (see OmniScript Input Components)
• Radio Group (see OmniScript Group Component)
• Range (see OmniScript Input Components)
• Remote Action (see OmniScript Remote Action)
• Response Action
• Rest Action (see HTTP Action)
• Review Action (see OmniScript Review Action)
• Select (see OmniScripts Select Element)
• Selectable Items (see OmniScript Group Components)
• Set Errors (see Setting Errors In an OmniScript)
• Set Values (see Setting Values in an OmniScript)
• Signature (see OmniScript Input Components)
• Step
• Telephone (see OmniScript Input Components)
• Text (see OmniScript Input Components)
• Text Area (see OmniScript Input Components)
• Text Block (see OmniScript Input Components)

company 1135
OmniStudio
• Time (see OmniScript Input Components)

• Type Ahead Block (see Adding a Type Ahead Block)
• URL (see OmniScripts URL Element)
Adding OmniScript Elements to an Upgraded Org

To use new elements after upgrading an org, add OmniScript elements to the OmniScript Element Type
picklist. This article describes the process of adding elements and provides a list of the added elements by
release.
To add a new OmniScript element:
1. Click Setup.
2. In the Quick Find/Search box enter Object, and click Object Manager.
3. Click Vlocity OmniScript Element.
4. Click Fields & Relationships.

company 1136
OmniStudio
5. Click the Type Picklist.
6. Scroll down to the Values section, and click New.
7. Enter the new Element name to the picklist, and click Save.
The following table lists new OmniScript elements by release:
Package Version Element

company 1137
OmniStudio
Vlocity Insurance Spring '20 Release Notes DataRaptor Turbo Action

Vlocity Insurance Spring '20 Release Notes DataRaptor Extract Action
Vlocity Insurance Spring '20 Release Notes Action Block
Vlocity Health Summer '19 Release Notes, Vlocity Insurance Summer '19 Release Notes, Navigate Action
Vlocity Communications, Media, and Energy Fall '19
Vlocity Health Summer '19 Release Notes, Vlocity Insurance Summer '19 Release Notes, Custom Lightning Web Component
Vlocity Communications, Media, and Energy Fall '19
Vlocity Insurance and Vlocity Health Summer 2018, Vlocity Communications, Media, and Radio Group
Energy Fall '18
Vlocity OmniScript Summer 2018 CME , Vlocity OmniScript Spring 2018 INS Delete Action
Vlocity OmniScript Summer 2018 CME , Vlocity OmniScript Spring 2018 INS Add this value to the Language
picklist in the Vlocity OmniScript
table: Multi-Language.
Vlocity Digital Interaction Platform Summer 2017 Edit Block
Vlocity Digital Interaction Platform Summer 2017 DataRaptor Transform Action
Vlocity Digital Interaction Platform Summer 2017 Matrix Action
Vlocity Digital Interaction Platform Summer 2017 Integration Procedure Action
Vlocity Digital Interaction Platform Summer 2017 Response Action
Vlocity Digital Interaction Platform V14 Email Action
Vlocity Digital Interaction Platform V12 Type Ahead Block
Vlocity Digital Interaction Platform V12 DocuSign Signature Action
Vlocity Digital Interaction Platform V12 Line Break
Vlocity Digital Interaction Platform V11 Formula
Vlocity Digital Interaction Platform V11 Aggregate
Vlocity Digital Interaction Platform V11 Validation
Common OmniScript Element Properties Definitions

Each element also includes an extensible Property set that is specific to the type of element. Use the
Properties pane on the Designer to edit these properties. Some common element properties are not
available in certain elements.

Add Condition Add additional test conditions to an element's Conditional View. Conditionally Display
Elements Using the
Conditional View
Property.
Add Group Group conditions to create complex expressions. A group enables a set of n/a
conditionals to have a separate AND/OR operator. For example, there can be two
groups ORed together, but inside of each group there can be an AND to ensure
the group tests are true.
Available For Data JSON can prefill the element when it is hidden by a conditional. n/a
Prefill When
Hidden
Conditional View If conditions in this field are met, the element displays, becomes editable, or is Conditionally Display
marked as required. The Value field supports merge syntax. Elements Using the
Conditional View
Property.

company 1138
OmniStudio

Conditional Type Condition types determine whether element shows, disables read only, or Conditionally Display
becomes required when the conditions evaluate to true. Elements Using the
Conditional View
Property
Control Width Display width of the control on the page, using a range of 1-12. n/a
Default Value: Sets a default value for the element. If the element has been prefilled with a Set a Default Value for
value, it will not be overwritten by the default value. Supports merge syntax. an Element
Element Name The unique identifier for the element. Element Names cannot contain spaces and n/a
must be unique in an OmniScript.
Field Width Displayed if the Label outside of field checkbox is checked. Specifies the width n/a
of the input field separate from the Control Width. Useful if the label is longer than
the expected input.
Help Text The text displayed when the user hovers over the help icon. n/a
Help Determines if a help icon is displayed to the user. n/a
Label outside of For input components, specifies whether the label displays outside the field. Valid n/a
field only when using the Lightning Experience.
Label Display label for the control. n/a
Mask Sets the format for user input, for example, (999)999-9999. n/a
Maximum Length Maximum number of characters the user can enter. n/a
Minimum Length Minimum number of characters the user can enter. n/a
Options An array of input selections for drop-down, multi-select, and radio button controls. n/a
Pattern Error Text Message displayed if the input does not match the expression. n/a
Pattern The pattern flag is used to enforce data validation before submitting. Currently, Regular Expressions
complex patterns are not supported, but simple pattern matching works. The
patterns accept regular expressions (regex), and custom error text.
Placeholder Displays placeholder text in empty fields. Placeholder text is not applicable if n/a
masking is enabled.
Read Only If true, the user cannot modify the value in the field. n/a
Repeat If true for an element or block, a user can click + to copy the element or blocks of Prefill Repeatable
elements on the form. Blocks
Repeat Clone If true, any values from the element or block of elements are copied to repeated n/a
instances of the element or block.
Repeat Limit Specifies the number of times this element can be repeated. For example, to set n/a
a maximum of two repetitions, set Repeat Limit to 1.
Required Specifies whether the user must enter a value in order to submit the form. n/a
Show/Hide Determines whether multiple conditions must be met to render an OS. When set n/a
Operator to All Conditions Are Met an AND operator checks if all conditions are valid.
When set to Any Condition Is Met an OR operator checks if any of the
conditions are valid.
Setup and Script Configuration Reference

The Script Configuration defines the Name, Type, SubType, Language, and Currency of an OmniScript.
The Script Configuration also provides multiple configuration options that enable a User to define both the
appearance and behavior of the OmniScript further.

company 1139
OmniStudio
NOTE
When creating or editing an OmniScript in the LWC OS Designer, see script configuration
properties in the Setup panel.
Setup Properties Exclusive to the LWC OmniScript Designer

Custom Lightning Enter the name of a static resource that contains a CSS file to Apply Custom Styling to
Stylesheet File Name apply custom SLDS styling. OmniScripts with Static
Resources
Custom Newport Enter the name of a static resource that contains a CSS file to Apply Custom Styling to
Stylesheet File Name apply custom Newport styling. OmniScripts with Static
Resources
Default Error Message Sets a script wide default error message that displays if an error Customize OmniScript Error
message for a specific action does not exist. Messages
Enable SEO Make your OmniScript's URL available to search engines. Enable SEO for LWC OmniScripts
Lightning Design Override Salesforce's Lightning Design System design tokens. Customize SLDS Design Tokens
System Design Token in OmniScript
Overrides
Scroll Animation Select On to add a smooth scroll animation to your OmniScript. n/a
Tracking Business Define a business category for a tracking entry. For example, Enable Tracking for Vlocity
Category eCommerce. Components
Tracking Business Define a business tracking event for a tracking entry. For Enable Tracking for Vlocity
Event example, Payment Plan. Components
Script Configuration Properties Exclusive to LWC OmniScripts

Beginning with Vlocity Insurance and Vlocity Health Summer '19, OmniScripts support Lightning web
components. For more information, see LWC OmniScripts.

company 1140
OmniStudio

commitOnChange In LWC OmniScripts, validation runs when a user clicks out of a field by using n/a
the onBlur function. In Angular OmniScripts, validation runs when a user types
Available beginning with in a field by using the onChange function.
Vlocity Insurance and
Health Winter '20 and To enable the LWC OmniScript to run validation when a user types:
Vlocity CME Winter '20.
NOTE
In LWC OmniScripts, the onChange behavior runs
after a half-second delay.
Deploy LWC Redeploy an active OmniScript if the previously generated LWC OmniScript Activate and Deploy
fails to deploy by clicking Deploy LWC. an LWC OmniScript
Download LWC Review the auto-generated OmniScript LWC by clicking Download LWC. n/a
Element Type To LWC Enables a custom Lightning web component to override all elements of a Add Custom
Component Mapping specific Element Type. Lightning Web
Components to an
OmniScript
Enable LWC Enables the OmniScript to use the Vlocity Lightning Web Component Create an LWC
framework. OmniScript
Pub/Sub Sends custom parameters as a key/value pair when an action fires a pub/sub n/a
event that enables communication between Lightning Web Components.
Step Chart Placement Exclusive to LWC OmniScripts using Lightning styling, set the Step Chart to Right:
display to the right, to the left, or on top of the OmniScript.
Left:
Top:
Script Configuration Properties
Property Description LWC Example

Label Enabled
Cancel Enables customization of the cancel link's Yes Configuring the Cancel Link in an OmniScript
Options behavior.

company 1141
OmniStudio

Label Enabled
Console Tab Applies text to the console tab where the Available n/a
Label OmniScript is embedded. The Console starting
Tab Label and Console Tab Icon settings with Vlocity
in OmniScript will only apply if the Insurance
OmniScript owns the entire tab or subtab. and Health
The Console Tab Label and Console Tab Winter '20
Icon settings will not be used if the and Vlocity
OmniScript is embedded on a page with CME
other components. Winter '20..
Console Tab Applies an icon to the console tab where Available n/a
Icon the OmniScript is embedded. The Console starting
Tab Label and Console Tab Icon settings with Vlocity
in OmniScript will only apply if the Insurance
OmniScript owns the entire tab or subtab. and Health
The Console Tab Label and Console Tab Winter '20
Icon settings will not be used if the and Vlocity
OmniScript is embedded on a page with CME
other components. Winter '20..
Currency By default, OmniScript uses an org's Yes In a VisualForce page that displays an
Code default currency in single currency orgs OmniScript, by setting the
and a user's currency in multi-currency strOmniScriptCurrencyCode to a currency code.
orgs. Override the default currency by
configuring the currency code field. Add Example:strOmniScriptCurrencyCode="CNY"
the currency code as a static value or
pass it in from a URL using the
OmniScriptCurrencyCode parameter. For
example, set the currency code JPY or
pass it in as a URL parameter,
c__OmniScriptCurrencyCode=JPY.
Custom HTML Enter CSS to modify the OmniScript or No Using Custom Templates
Templates enter HTML templates to override
OmniScript's default templates.
Custom Enter custom JavaScript that is run, or No n/a
JavaScript available, when an OmniScript initializes.
Description Shown on the list view on the OmniScript Yes n/a
Designer home page.
Element Type Applies a template override to every No n/a
To HTML element of a specific type. The element
Template type is specified in the left field, and the
Mapping template is specified in the field on the
right.
Enable Enables OmniScript to track how long Available OmniScript Event Tracking
Tracking steps and actions take. The times are starting
stored in the Data JSON. with Vlocity
Insurance
and Health
Winter '20
and Vlocity
CME
Winter '20..

company 1142
OmniStudio

Label Enabled
Enable Enables a Leave Site? warning to be Yes n/a
Unload triggered by reloading, navigating away, or
Warning closing the window.
Error Enables custom error messages that No Customize OmniScript Error Messages
Messages replace the default error messages.
Fetch Picklist Enables picklist values to be retrieved at Available n/a
Values At script load when checked. If unchecked, starting
Script Load picklists will be fetched at design time. with Vlocity
Insurance
and Health
Winter '20
and Vlocity
CME
Winter '20..
Hide Step Removes the Step Chart from the UI when Yes n/a
Chart checked.
Knowledge Enables Salesforce Knowledge to be Available Integrating Salesforce Knowledge with Classic
Options integrated with OmniScript. starting OmniScript
with Vlocity
Insurance
and Health
Winter '20
and Vlocity
CME
Winter '20..
Label Outside Displays the label outside of the field when No
Of Field checked.
Language Type, SubType, and Language define the Yes Create Multi-Language OmniScripts
unique identity of the OmniScript: there
can be only one OmniScript with the same
Type, SubType, and Language active at
any time.
Merge Saved Enables saved OmniScript instances to Yes Configure Save Options
Data JSON merge data from the saved instance into
an updated and redeployed OmniScript. If
left unchecked, users start a new instance
of the updated OmniScript.
OmniScript Shown on the list view on the OmniScript Yes n/a
Name Designer home page.
Persistent Enables the addition of persistent No n/a
Component components, including Cart and
Knowledge.

company 1143
OmniStudio

Label Enabled
Reusable Enables the OmniScript to be embedded Yes Embedding a Reusable OmniScript
into another OmniScript when checked.
Save Options Enables OmniScript data to be written to Available Save and Resume an OmniScript
the OmniScriptInstance__c object, starting
including the Data JSON, full JSON, and with Vlocity
attachments. Insurance
and Health
Winter '20
and Vlocity
CME
Winter '20..
Seed Data Seed Data JSON enables the OmniScript Yes Seed Data Into an OmniScript
JSON to be seeded with data on launch. It does
not allow for referencing other data with
the %element% syntax or use of
expressions. For more robust functionality,
use the Set Values action.
SubType Type, SubType, and Language define the Yes n/a
any time. Special Characters are not
allowed.
Session Sends custom parameters as a key/value Yes n/a
Storage pair when an action fires a session
storage event that enables temporary data
storage.
Tracking Log custom data to the Vlocity Tracking Available n/a
Custom Data Entry table by adding Key/Value pairs. starting
Requires the Vlocity Tracking Service to with Vlocity
be enabled in Custom Settings. Insurance
and Health
Winter '20
and Vlocity
CME
Winter '20..
Type Type, SubType, and Language define the Yes n/a
any time. Special Characters are not
allowed.
Visualforce To make a custom Visualforce available in No n/a
Pages the OmniScript preview player dropdown,
Available In enter a Key/Value pair.
Preview
Window Sends custom parameters as a key/value Yes n/a
PostMessage pair when an action fires a postMessage
event that enables cross-window
communication.

company 1144
OmniStudio
OmniScript Action Elements

This page contains a table explaining the available OmniScript elements listed under the Actions section.
To download the component HTML Templates, see OmniScript Component Definitions.
Element Element Description Template Reference

Name
Calculation The Calculation Action element calls the vlcRemoteAction.html Integrating OmniScript with
Action Vlocity Calculation Service and Vlocity Calculations
DataRaptor; it returns results to vlcRemoteActionBtn.html
OmniScript.
DataRaptor The DataRaptor Extract Action element vlcRemoteAction.html DataRaptor Extract Action
Extract makes a DataRaptor outbound call to
Action populate an OmniScript with data from vlcRemoteActionBtn.html
SFDC objects. Inputs DataRaptor
Interface name and input parameters.
DataRaptor The DataRaptor Post Action commits vlcRemoteAction.html DataRaptor Post Action
Post Action data from OmniScript to SFDC objects.
Inputs DataRaptor Interface name, Data vlcRemoteActionBtn.html
JSON of OmniScript, and filesMap.
DataRaptor The Data Raptor Transform Action vlcRemoteAction.html OmniScript DataRaptor Transform
Transform sends the full OmniScript Data JSON to Action
Action DataRaptor and returns the mapping vlcRemoteActionBtn.html
from the DataRaptor.
Delete Deletes specified records from an vlcRemoteAction.html If the data JSON contains a list of
sObject. Objects are specified by Id, accounts like this:
and best practice is to use a merge field vlcRemoteActionBtn.html
to refer to an Id or a list of Ids in the {
data JSON. "Account": [
{
"accId":
["001f400000EPQ8o",
"001f400000BAkbn"]
}
]
}
You can delete it by specifying the

following merge field in the Path
to Id field: %Account:accId%
To specify messages to be
displayed to users when the
operation succeeds or fails, set
the corresponding fields in the
Error Messages section.
DocuSign The DocuSign Envelope Action element vlcRemoteAction.html Using the DocuSign Envelope
Envelope sends an email that contains the Action to Email Documents for
Action prefilled documents for signing or vlcRemoteActionBtn.html Signature
reviewing. It can be sent to one or more
recipients.
DocuSign The DocuSign Signature Action element vlcRemoteAction.html Using the DocuSign Signature
Signature displays a modal containing a DocuSign Action to Sign Documents From
Action document. The OmniScript user can vlcRemoteActionBtn.html Within an OmniScript
sign the document directly from the
modal and download a PDF of the
signed document.

company 1145
OmniStudio
Element Element Description Template Reference

Name
Done Action The Done Action ends and OmniScript. vlcDoneAction.html OmniScript Done Action
It returns the user either to where the
script was launched or a custom URL.
Email Action The Email Action uses the Salesforce vlcRemoteAction.html OmniScript Email Action
Email API to either send an email
template to the email address of a User, vlcRemoteActionBtn.html
Lead or Contact or send an email body
defined in the action configuration to
any email address.
Integration The Integration Procedure Action vlcRemoteAction.html Integration Procedures
Procedure element allows multiple actions to be
Action run as a headless service (lacking a UI) vlcRemoteActionBtn.html
through JavaScript or Apex Service.
Navigate Navigate to another page or component OmniScript Navigate Action Navigate Action
Action using the Navigate Action. (omniscriptNavigateAction)
ReadMe
Matrix Action The Matrix Action calls a matrix through vlcRemoteAction.html OmniScript Matrix Action
an OmniScript.
vlcRemoteActionBtn.html
PDF Action The PDF Action element inputs Data vlcRemoteAction.html Add a PDF Action to the
JSON to DataRaptor Transform. It OmniScript
returns a filled PDF based on vlcRemoteActionBtn.html
OmniScript elements.
Post to The Post to Object Action component vlcRemoteAction.html OmniScript Post to Object Action
Object Action commits an entire OmniScript to
Application custom object. Inputs full vlcObjectPostActionBtn.html
JSON of OmniScript and filesMap.
Remote The Remote Action element calls an vlcRemoteAction.html OmniScript Remote Action
Action Apex class that implements
VlocityOpenInterface. Inputs Data vlcRemoteActionBtn.html
JSON of the OmniScript.
HTTP Action The HTTP Action calls an HTTP API vlcRemoteAction.html HTTP Action
that allows Apex, Named Credentials,
SOAP/XML, or Web. Inputs Data JSON vlcRemoteActionBtn.html
of the OmniScript.
Review The Review Action component vlcRemoteAction.html OmniScript Review Action
Action navigates to a redirect page containing
Data JSON of the OmniScript. vlcRemoteActionBtn.html
Set Errors The Set Errors element handles failures vlcEmpty.html Set Errors In an OmniScript
from users of the OmniScript.
Set Values Set Values handles values of elements vlcEmpty.html Set Values in an OmniScript
on a hidden node, current, or future
step.
Common Action Element Properties

Action elements can be either rendered as a button when placed in a Step or Block or run remotely if
placed between steps. In either case, you can specify a redirect page, where the user can proceed to the
next Step or Action, or if a button, back to the source Step.

company 1146
OmniStudio
Common Action Properties

Label The label on the button, or, if running remotely, the heading of the Action block. n/a
Redirect Page Name Custom redirect page name. Upon success, the script navigates to this page. Leave blank to n/a
bypass the redirect page.
Redirect Template URL HTML template of the redirect page. Vlocity provides templates for redirect pages, or you can n/a
create your own.
Validation Required Determines whether validation runs on the script or Step before the Action is invoked. Select n/a
Submit to validate the entire script or Step to validate only the Step that the button is on.
When set to Step, the Action will be clickable once all required fields within the Step contain
valid input. Select None to bypass validation.
Invoke Mode Configure the response behavior of the action. n/a
Default: The Action blocks the UI with a loading spinner.
Non-Blocking: The Action runs asynchronously, and the response is applied to the UI. Pre
and Post DataRaptor transforms, and large attachments are not supported.
Fire and Forget: The Action runs asynchronously with no callback to the UI. Pre and Post
DataRaptor transforms, and large attachments are not supported. A response will still appear
in the debug console but will not be applied to the Data JSON.
Conditional View All Action elements support conditional view. Conditionally
Display
Elements
Using the
Conditional
View
Property
Pub/Sub Communicate with OmniScript from a custom LWC by sending key-value pairs. Use the Communicate
events passed in the key-value pairs to trigger custom behavior in a component. with
OmniScript
from a
Lightning
Web
Component
Session Storage Send information to a Session Storage object using key-value pairs. A session storage object Message with
clears when a page session ends. Window Post
Messages
and Session
Storage
Messages
Window Post Message Send information from an element to a window object in key-value pairs. Message with
Window Post
Messages
and Session
Storage
Messages
Tracking Business Category Define a business category for a tracking entry. For example, eCommerce. Enable
Tracking for
Vlocity
Components
Tracking Business Event Define a business tracking event for a tracking entry. For example, Payment Plan. Enable
Tracking for
Vlocity
Components

company 1147
OmniStudio
User Message Properties

Actions that run remotely and between steps, or before the first Step is run, contain these User Message
properties.
Enable Action Message Enables an input of custom action messages.
Enable Default Abort Enables the Abort functionality to override the default Go Back functionality. Users will then
only be able to abort the OmniScript if the Action fails.
Failure NextLabel Label of the continue button if the Action fails, and the Enable Default Abort checkbox is
checked.
Failure Abort Label Label of the abort button if the Action fails, and the Enable Default Abort checkbox is checked.
Failure Abort Message Confirmation message displayed after user clicks abort button.
Failure Go Back Label Label of the Go Back button if the Action fails. The default behavior enables users to return to
the previous Step unless there are no previous steps, or the Enable Default Abort checkbox
has been checked.
In Progress Message: Message displayed while the Action is being executed. This property is exclusive to Angular
OmniScripts.
Post Message Message displayed upon success.
Redirect Next Label Label of the next button on the redirect page.
Redirect Next Width Width of the next button on the redirect page.
Validation Required Whether to check the validation of the script before the Action is invoked. Default is Submit.
Leave blank to bypass validation.
Redirect Properties
Actions that are placed in Steps and render as buttons contain these common elements.
Control Width Controls the width of the button.
Redirect Previous Label The label of the previous button on the redirect page.
Redirect Previous Width The width of the previous button on the redirect page.
Send and Response Transformations

Send and Response Transformations are properties available on a variety of OmniScript remote actions.
They provide flexibility in trimming and reparenting the request and response JSON. For more information
on how to use Send and Response Transformations, see Manipulating JSON with the Send and Response
Transformations Property.
Send JSON Path This property enables one node of the OmniScript Data JSON to be sent, rather than the
entire JSON. Specify the node name in this property.
Send JSON Node This property allows you to specify the root node name in the outgoing response. For
example, if your OmniScript had a Customer node at the root, you could relabel the node to
CustomerAccount.
Pre-Transform DataRaptor In situations where a more complete transformation of the JSON is required, you can specify a
DataRaptor transform interface. The service will run on the server, and then return the request
body to the client for sending.

company 1148
OmniStudio
Post-Transform DataRaptor Works identically to the Pre-Transform, except the transformation is applied to the response
body before merging into the Data JSON.
Response JSON Path This property allows you to trim the incoming JSON. For example, if the response has a three-
level hierarchy, and you only want one of the nodes, you can specific the path you like to
extract. The syntax is node:node:node (colon-separated).
Response JSON Node This property allows you to reparent the incoming JSON to a node within the OmniScript
JSON. Specific the OmniScript element name which will be the new root node for the
response JSON.
Selecting an Invoke Mode

Enable actions to run asynchronously, block users from advancing to a future Step, and modify by selecting
an invoke mode.
Invoke Mode enables you to configure the response behavior of an action.
Available in:
• Remote Action
Default The Action blocks the UI with a loading spinner.
Non-Blocking The Action runs asynchronously, and the response is applied to the UI. Pre and Post DataRaptor transforms, and
large attachments are not supported.
Fire and Forget The Action runs asynchronously with no callback to the UI. Pre and Post DataRaptor transforms, and large
attachments are not supported. A response will still appear in the debug console but will not be applied to the Data
JSON.
Extra Payload
ExtraPayload is an additional property available for the actions listed below. The script configurator can set
up extra payload to be sent while making the call. This property supports merge fields.
• Remote Action
• Calculation Action
• HTTP Action
See Also
• Add an Action Message
• Manipulate JSON with the Send/Response Transformations Properties
Add an Action Message

Display an action message beneath the loading spinner while the action is running.Beginning with Vlocity
Insurance and Health Winter '20 and Vlocity CME Winter '20, LWC OmniScripts support custom Action
messages.

company 1149
OmniStudio
1. In an Action, expand the User Messages property.

2. Check Enable Action Message.
3. In Action Message, enter a custom message, or leave the default message.
Messaging Framework
Communicate between an OmniScript, windows, Lightning web components, and OmniScript elements
using window post messages, session storage messages, and PubSub messaging.
Determine which object or component needs to handle and use data, and use the corresponding property
from this table:
Property Description Object or Example

Component
Window Send information from an element to a window Window object Message with Window Post
postMessage object in key-value pairs. Messages and Session
Storage Messages
Pub/Sub Communicate with OmniScript from a custom LWC Lightning Web Communicate with
by sending key-value pairs. Use the events passed Components OmniScript from a Lightning
in the key-value pairs to trigger custom behavior in Web Component
a component.
Session Storage Send information to a Session Storage object using Session Storage Message with Window Post
key-value pairs. A session storage object clears object Messages and Session
when a page session ends. Storage Messages
For information on communicating with an LWC from an embedded LWC OmniScript, see Embed an
OmniScript Lightning Web Component in a Lightning Web Component.
See Also
• Make Remote Calls from Lightning Web Components using the LWC OmniScript Action Framework
Communicate with OmniScript from a Lightning Web Component

Send data from OmniScript Actions and Steps to other LWCs using the Pub/Sub property.
The Pub/Sub property enables Action elements and Step elements to send data in Key-Value pairs to other
LWCs. LWCs must register the OmniScript component's event name and add code to handle the data sent
from the event.
Before You Begin

Review the Salesforce documentation on using PubSub. See Communicate Between Components.
NOTE
Beginning with Vlocity Insurance and Health Spring '20, the Step element supports the
Pub/Sub property.

company 1150
OmniStudio
1. In an OmniScript Action or Step, select the Messaging Framework and check Pub/Sub.
2. In the Key and Value fields, configure which data to pass to another LWC.
a. In the Key field, enter a name to store the value.
b. In the Value field, enter data to pass to the LWC. The field accepts merge syntax.

Pass data from the Action's response in the value field using Pass data from an element within the Step using
merge syntax. For example, to pass the response node merge syntax. For example, to pass a Text element
"accountId", enter %accountId% in the Value field. named Text1, enter %Text1% in the Value field.
3. Activate the OmniScript.

4. In an LWC that receives data from the Action or Step, import the pubsub module. Using this example,
replace ns with the namespace of your Vlocity package. See Viewing the Namespace and Version of
import pubsub from 'ns/pubsub';

5. In the LWC, register the pubsub event. The even must register after the component renders.
Action pubsub Event Step pubsub Event

pubsub.register('omniscript_action', { pubsub.register('omniscript_step', {
data: this.handleOmniAction.bind(this), data: this.handleOmniStepLoadData.bind(this),
}); });
6. In the LWC, create a pubsub event handler.
Action Event Handler Example Step Event Handler Example

// perform logic to handle the Action's // perform logic to handle the pubsub data from
response data the Step
} }
7. (Optional) If different Actions or Steps require different logic in the code, use a switch statement to
determine how to handle the event. For information on switch statements, see switch.

company 1151
OmniStudio

Access the Action's Element Name using data.name. Access the Step's Element Name using data.name.
switch(data.name) { switch(data.name) {
case 'SomeNameForAction': case 'FirstStep':
this.handleSomeNameForAction(data);
break; this.handleOmniFirstStepLoadData(data);
case 'SomeNameForAction2': break;
this.handleSomeNameForAction2(data); case 'SecondStep':
break;
default: this.handleOmniSecondStepLoadData(data);
// handle default case break;
} default:
} // handle default case
}
handleSomeNameForAction(data) { }
SomeNameForAction action handleOmniFirstStepLoadData(data) {
// that has element name = // perform some logic specific when a
"SomeNameForAction" Step element which name is
} // FirstStep is loaded
}
handleSomeNameForAction2(data) {
// perform some logic specific to handleOmniSecondStepLoadData(data) {
SomeNameForAction2 action // perform some logic specific when a
// that has element name = Step element which name is
"SomeNameForAction2" // SecondStep is loaded
} }
Access the Action's Element Type using data.type. n/a
handleOmniAction(data) {
switch(data.type) {
case 'Integration Procedure Action':
this.handleIPActionPubsubEvents(data);
break;
case 'Remote Action':
this.handleRemoteActionPubsubEvents(data);
break;
default:
// handle default case
}
}
handleIPActionPubsubEvents(data) {
}
handleRemoteActionPubsubEvents(data) {
// perform some logic specific to Remote
Actions
}
See Also
• Message with Window Post Messages and Session Storage Messages


company 1152
OmniStudio
Message with Window Post Messages and Session Storage Messages

Communicate between OmniScript, windows, and components with window post messages and session
storage messages.
Pass element information and data JSON from OmniScript elements containing the window post message,
session storage message, and LWC Pub/Sub message. For information on using the pub/sub message in
OmniScript, see Communicate with OmniScript from a Lightning Web Component.
To add window post messages or session storage messages:
1. In the element, check the Window Post Message checkbox or the Session Storage Message
checkbox. Once enabled, the default messaging sends the name of the element and the type of the
element.
Default Messaging:
{
Type: <element_type>,
OmniEleName: <element_name>
}
2. (Optional) In the Messages property, add additional messaging to the node by entering a Key/Value
pair. The Value field accepts merge syntax. For information on merge fields, see Access OmniScript
Data JSON with Merge Fields.
3. (Optional) Beginning with Vlocity Insurance and Health and Vlocity CME Summer '20, pass a value in
the c__messagingKey URL parameter to change the node that stores the messaging payload for
window.postMessage and session storage message.
Beginning with Vlocity CME Spring '20, Step elements support the use of window post messages, session
storage messages, and messages. However, the properties do not appear in the properties section of the
element.
NOTE
Beginning with Vlocity Insurance and Health Spring '20, the wpm, ssm, and message
properties appear in the Step element's default properties.
To add messages to a Step:
1. In the Step's properties, click Edit Properties as JSON.

2. Paste in the following JSON before the closing curly bracket:
"wpm": false,
"ssm": false,
"message": {}

company 1153
OmniStudio
3. Enable WPM or SSM by setting the value equal to true.
"wpm": true
4. Add additional key/value pairs inside the message object.
"message": {"Account":%AccountId%, "Status": %AccountStatus%}
What's Next
Preview the OmniScript and test the messaging behavior by inspecting the browser.
See Also
• Common Action Element Properties

• Tracking Changes for Adobe DTM and Google Analytics
Calculation Action
Before you Begin



company 1154
OmniStudio

company 1155
OmniStudio

Example

company 1156
OmniStudio

company 1157
OmniStudio
interface:
correct inputs):

company 1158
OmniStudio


company 1159
OmniStudio
See Also

Calculation Action Properties

This page contains information on Calculation Action Properties.
Remote Class Specify the namespace.PricingMatrixCalculationService class, where namespace is
vlocity_cmt, vlocity_ins, or vlocity_ps.
Remote Method Specify the calculate method.
Remote Timeout (ms) Optional timeout in milliseconds. The default is 30000, equivalent to five minutes.
Send Only Extra Enables the action to send Extra Payload's Key/Value pairs without including the OmniScript's data JSON.
Payload
Configuration Name Name of the calculation procedure.
Include Inputs Check if the OmniScript elements sent to the calculation procedure are at the Step level of the OmniScript
(not in a block).
Pre-Transform An optional DataRaptor Transform that prepares input data for the calculation procedure. Beginning with
DataRaptor Interface Vlocity Insurance and Health Spring '20, this property appears in the Remote Properties section.
Post-Transform An optional DataRaptor Transform that reformats output data from the calculation procedure. Beginning with
DataRaptor Interface Vlocity Insurance and Health Spring '20, this property appears in the Remote Properties section.
Match Input Variables Check if the OmniScript elements sent to the calculation procedure exactly match the Variable Ids in the
procedure.

company 1160
OmniStudio
See Also
DataRaptor Extract Action

Invoke a DataRaptor Extract to retrieve data from one or more related Salesforce objects. You can also use
formulas and complex field mappings.
For a non-LWC OmniScript, you must create the DataRaptor Extract to be called before creating the
DataRaptor Extract Action. For an LWC OmniScript, if the DataRaptor Extract doesn't already exist, you can
create it by clicking Create New DataRaptor immediately after dragging the DataRaptor Extract Action into
the OmniScript structure panel.
1. Drag the DataRaptor Extract Action into the OmniScript's structure panel.
2. To select the DataRaptor Extract to be called, click in the DataRaptor Interface field and select from
the list. You can type in the field to filter the list.
3. Provide any input parameters the DataRaptor Extract requires. Each Data Source field must match a
DataRaptor Extract input parameter. Each Filter Value must match values in the sObject field to which
the input parameter refers.
4. Use the Response Transformations properties to trim or rename the output JSON. See Manipulate
JSON with the Send/Response Transformations Properties.
See Also
• Load Salesforce Data into OmniScript Using DataRaptor

• DataRaptor Extract Action Properties
DataRaptor Extract Action Properties

This page contains information on Integration Procedure Action Properties.
DataRaptor Interface Name of the DataRaptor Extract being called.
Data Source Name of a JSON node that provides input for the DataRaptor Extract.
Filter Value Value of the JSON node that provides input for the DataRaptor Extract.
Related Topics
• DataRaptor Extract Overview

• Load Salesforce Data into OmniScript Using DataRaptor

company 1161
OmniStudio
DataRaptor Post Action

Invoke a DataRaptor Load action to write data to one or more Salesforce objects.
For a non-LWC OmniScript, you must create the DataRaptor Load to be called before creating the
DataRaptor Post Action. For an LWC OmniScript, if the DataRaptor Load doesn't already exist, you can
create it by clicking Create New DataRaptor immediately after dragging the DataRaptor Post Action into
the OmniScript structure panel.
1. Drag the DataRaptor Post Action into the OmniScript's structure panel.
2. To select the DataRaptor Load to be called, click in the DataRaptor Interface field and select from the
list. You can type in the field to filter the list.
3. Use the Send Transformations properties to trim or rename the input JSON so it has the structure the
DataRaptor Load expects. See Manipulate JSON with the Send/Response Transformations Properties.
See Also
• Create a DataRaptor Load

• DataRaptor Load Overview
• DataRaptor Post Action Properties
DataRaptor Post Action Properties

This page contains information on DataRaptor Post Action Properties.
DataRaptor Interface Name of the DataRaptor Load being called.
Related Topics
DataRaptor Transform Action

Invoke a DataRaptor Transform to restructure, rename, and convert data. Unlike DataRaptor Extracts and
Loads, Transforms do not read or write Salesforce data.
For a non-LWC OmniScript, you must create the DataRaptor Transform to be called before creating the
DataRaptor Transform Action. For an LWC OmniScript, if the DataRaptor Transform doesn't already exist,
you can create it by clicking Create New DataRaptor immediately after dragging the DataRaptor Transform
into the OmniScript structure panel.
1. Drag the DataRaptor Transform Action into the OmniScript's structure panel.
2. To select the DataRaptor Transform to be called, click in the DataRaptor Interface field and select
from the list. You can type in the field to filter the list.
3. Use the Send/Response Transformations properties to trim or rename the input JSON so it has the
structure the DataRaptor Transform expects. Or you can trim or rename the output JSON for a

company 1162
OmniStudio
subsequent OmniScript step. See Manipulate JSON with the Send/Response Transformations
Properties.
Related Topics
• Populating a DocuSign Template Using DataRaptor Transform

DataRaptor Transform Action Properties

This page contains information on DataRaptor Transform Action Properties.
DataRaptor Interface Name of the DataRaptor Transform being called.
Related Topics
• DataRaptor Transform Overview
DataRaptor Turbo Action

Beginning with Vlocity Insurance and Health Spring '20, Invoke a DataRaptor Turbo Extract to retrieve data
from a single Salesforce object. Unlike a standard DataRaptor Extract, a DataRaptor Turbo Extract doesn't
support formulas or complex field mappings.
For a non-LWC OmniScript, you must create the DataRaptor Turbo Extract to be called before creating the
DataRaptor Turbo Action. For an LWC OmniScript, if the DataRaptor Turbo Extract doesn't already exist,
you can create it by clicking Create New DataRaptor immediately after dragging the DataRaptor Turbo
Action into the OmniScript structure panel.
1. Drag the DataRaptor Turbo Action into the OmniScript's structure panel.
2. To select the DataRaptor Turbo Extract to be called, click in the DataRaptor Interface field and select
3. Provide any input parameters the DataRaptor Turbo Extract requires. Each Data Source field must
match a DataRaptor Turbo Extract input parameter. Each Filter Value must match values in the
sObject field to which the input parameter refers.

company 1163
OmniStudio
NOTE
DataRaptor Turbo Extracts return objects in a nested array format.
4. (Optional) In the Response JSON Path field, enter the name of the object returned in the Action's
response. Append a | delimiter and a number to access the correct instance in the nested array. This
enables OmniScripts to prefill elements.
DataRaptor Turbo Extract JSON Example Response JSON Path Example

{ Account|1
"Account": [
{
"RecordTypeId": "0125w000001NgyvAAC",
"Phone": "5105551223",
"Name": "Aileen Lee",
"Id": "0015w00002D8iCAAAZ"
}
]
}
5. (Optional) In the Response JSON Node field, enter VlocityNoRootNode. This ensures the object is
not nested. See Manipulate JSON with the Send/Response Transformations Properties.

company 1164
OmniStudio
6. Preview the OmniScript to test the DataRaptor Turbo Action.
See Also
• DataRaptor Turbo Extract Overview


company 1165
OmniStudio
DataRaptor Turbo Action Properties

This page contains information on DataRaptor Turbo Action Properties.
DataRaptor Interface Name of the DataRaptor Turbo Extract being called.
Data Source Name of a JSON node that provides input for the DataRaptor Turbo Extract.
Filter Value Value of the JSON node that provides input for the DataRaptor Turbo Extract.
Related Topics
Delete Action
Enable users to delete one or more sObject records by using the Delete Action. Use an Object's Record Id
to determine which record to delete. Vlocity recommends using a merge field in the Path to Id field that
refers to an Id or a list of Ids in the data JSON.
To delete records with the Delete Action:
1. Preview the OmniScript and identify the JSON path for the record. For example, this data JSON
contains a list of Accounts:
{ "Account": { "accId": ["001f400000EPQ8o", "001f400000BAkbn"] } }

2. In the Delete Action properties, click Add sObject to Delete.
3. In the Type column, select an Object.
4. In the Path to Id field, enter the JSON path for the record id using merge field syntax. Using the
Account example, the path to delete the array of Account ids is: %Account:accId%.
5. Preview the OmniScript and use a test record's id to test the functionality.
For Integration Procedure examples that include a Delete Action, see Process Arrays Using Loop Blocks
and Handle Errors Using Try-Catch Blocks.
Confirming Record Deletion

Enable users to confirm the deletion of a record using the Confirmation Modal.
To change the behavior of the confirmation modal, configure these properties:
• Confirm: Controls whether the modal displays.

• Confirmation Dialog Message: Message asking the user to confirm the deletion.
• Confirm Label: Button label for the confirm action.
• Cancel Label: Button label for the cancel action.
Displaying Messages from a Delete Action

Display messages when the operation succeeds or fails by configuring these fields in the Error Messages
section:

company 1166
OmniStudio
• Entity Is Deleted Message: Enter a message that displays when a record is deleted.
• Delete Failed Message: Enter a message that displays when the action fails to delete a record.
• Invalid Id Message: Enter a message that displays when an invalid Id is sent to the Delete Action.
• Configuration Error Message: Enter a message that displays when the Delete Action has a
configuration error.
Delete Action Properties

This page contains information on Delete Action Properties.
Type Type of sObject record to delete. For example, Account is a Type of sObject.
Path to Id Path to the JSON node that contains the Id or list of Ids of the records to delete. Supports merge
syntax.
All Or None When checked, the operation fails if any of the records are not deleted.
Entity Is Deleted Message Message that displays when a record is deleted.
Delete Failed Message Message that displays when the action fails to delete a record.
Invalid Id Message Message that displays when an invalid Id is sent to the Delete Action.
Configuration Error Message Message that displays when the Delete Action has a configuration error.
Confirm Controls whether the modal displays.
Confirmation Dialog Message The Confirmation Modal's message text. The default message text is Are you sure? This
action cannot be undone.
Confirm Label Button label for the Confirmation Modal's confirm action.
Cancel Label Button label for the Confirmation Modal's cancel action.
Related Topics
• Confirming Record Deletion

• Displaying Messages from a Delete Action
DocuSign Envelope Action Properties

This page contains information on DocuSign Envelope Action Properties.
DocuSign Templates Templates for the documents that you want signed.
Email Subject Subject line for the email requesting signatures.
Email Body Body text for the email requesting signatures.
Date Format Format for display of date values.
Date Time Format Format for display of datetime values.
Time Format Format for display of time values.
Related Topics
• Integrating DocuSign with OmniScript

• Display in Moment.js Documentation

company 1167
OmniStudio
DocuSign Signature Action Properties

This page contains information on DocuSign Signature Action Properties.
DocuSign Templates Templates for the documents that you want signed.
DocuSign Return Url URL to which the user is redirected after signing completion. Leave blank to display default redirect page.
Date Format Format for display of date values.
Date Time Format Format for display of datetime values.
Signer Email The email of the signer. Supports merge syntax.
Signer Name The name of the signer. Supports merge syntax.
Time Format Format for display of time values.
Related Topics

• Display in Moment.js Documentation
Done Action
The Done Action ends the OmniScript and returns the user either to where the script was launched or a
custom URL. This page explains the settings to configure for the Done Action. For more information, see
Ending the Execution of an OmniScript.
NOTE
LWC OmniScripts do not support the Done Action. For information on how to navigate from
an LWC OmniScript, see Navigate Action.
• Option Source:
• To redirect to a Salesforce object, select SObject.
• To redirect to a URL, select URL.
• To redirect to an HTML template, select Redirect.
• Source:
• If redirecting to an SObject, enter %ContextId% to redirect to the record from which the script
launched.
• If redirecting to a URL, enter the page and parameters. For example, MyTestPage?Id=%ContextId
% would redirect to an internal page and http://www.vlocity.com will redirect to an external
page.

company 1168
OmniStudio
NOTE
Beginning with Vlocity Summer '19, you can pass percentage signs in the URL by
replacing the percentage sign in the URL with the variable $Vlocity.Percent.
• Beginning with Vlocity Insurance and Vlocity Health Summer 2018, when redirecting to a Visualforce
page URL from a Lightning container, use the ltng: prefix. For example, ltng:/apex/
CustomVFPage will redirect to a Visualforce page.
• Beginning with Vlocity Insurance and Vlocity Health Summer 2018, when redirecting to a Lightning or
Lightning Community page URL, apply the ltngpage: prefix. For example, ltngpage:/Home will
redirect to the community home page.
• Redirect Page Name and Redirect Template URL:
• If you selected Redirect, enter the page name and template URL that the OmniScript will redirect to
when the action runs into the Redirect Page Name and Redirect Template URL fields.
• Outcome:
• If event tracking is enabled, specifies the value to be logged in the event tracking object. You can use
merge fields to specify the value to be assigned. For more information, see Tracking OmniScripts,
Cards, and Integration Procedures.
• Console Tab Label:
• Modifies the text that displays in the label of the console tab. By default, this is set to New.
• openInPrimaryTab: OmniScript's open in SubTabs by default. Make the Done Action open a Primary tab
by taking these steps:
1. In the Done Action, click Edit JSON.

2. Set the openInPrimaryTab property to true.
"openInPrimaryTab": true
Navigate Action Functionality Map
Done Action Navigate Action Configuration Notes

Option Source: Target a component. n/a
Redirect
Example Configuration:
PageReference Type: Current Page
Target Params: c__target=myCancelComponent

Option Source: PageReference Type: Record Use a merge field in the Navigate Action’s
SObject Record Id configuration to target a specific
record, otherwise navigate to an Object Level
page using the Object PageReference Type
Option Source: URL PageReference Type: Web Page use a URL to navigate when referencing
resources outside of salesforce. Otherwise
use one of the more specific PageReference
types.
Source Use Merge fields in the Navigate Action’s configuration. n/a

company 1169
OmniStudio
Done Action Navigate Action Configuration Notes

Redirect Page n/a n/a
Name
Redirect Template n/a n/a
URL
Console Tab Label Use the c__tabLabel and c__tabIcon parameters in Currently, it is not possible to control where
the Navigate Action’s Target Params field. the tab is opened.
Outcome n/a n/a
Window Post LWC PubSub Message? Communicate with other components using
Message? / Session the LWC PubSub Message configuration on
Storage Message? the Navigate Action.
See Also
• Ending the Execution of an OmniScript

• Navigate Action
Done Action Properties

This page contains information on Done Action Properties.
Option Source Where the user is sent when the OmniScript completes:
• Redirect — Navigates to an HTML template.

• SObject — Navigates to a Salesforce object.
• URL — Navigates to an external web page.
Source Depends on the Option Source selection:
• If you selected Redirect, leave this property blank and use the Redirect Page Name and Redirect Template URL
properties.
• If you selected SObject, enter %ContextId% to redirect to the record from which the script launched.
• If you selected URL, enter the page and parameters. For example, MyTestPage?Id=%ContextId% navigates to
an internal page and http://www.vlocity.com navigates to an external page.
Beginning with Vlocity Summer '19, you can pass percentage signs in the URL by replacing the percentage sign in
the URL with the variable $Vlocity.Percent.
Redirect Page Name of the HTML template page, for example mobileDone.
Name
Redirect URL of the HTML template, for example vlcMobileConfirmation.html.
Template URL
Beginning with Vlocity Summer '19, you can pass percentage signs in the URL by replacing the percentage sign in
the URL with the variable $Vlocity.Percent.
Console Tab Modifies the text that displays in the label of the console tab. By default, this is set to New.
Label
Outcome If event tracking is enabled, specifies the value to be logged in the event tracking object. You can use merge fields to
specify the value to be assigned.
Related Topics
• Navigate Action
• Vlocity Tracking Service

company 1170
OmniStudio
Email Action
The OmniScript Email Action uses the Salesforce Email API to either send an email template to the email
address of a User, Lead, or Contact or to send an email body defined in the action configuration to any
email address.
The Use Template checkbox determines whether using an email template or a defined email body.
• If the Use Template checkbox is checked, the email will send a template to a user, lead, or contact.
• Select Email Template: The ID of the email template that should be used.
• Email Target Object ID: The object ID of the Contact, Lead, or User the email should be sent to.
• What Id: If you specify a contact for the targetObjectId field, a What Id can be used to further ensure
that merge fields in the template contain the correct data. See the Salesforce Email API documentation
for more information.
• Save as Activity: If this option is checked, the email is saved as an activity record on the recipient’s
page in Salesforce.
• Org Wide Email Address: Allows the email to be sent by an Salesforce organization-wide email
address. For more information on organization-wide email addresses, see Organization-Wide Email
Addresses,
• Content Versions: Accepts the ID of a ContentDocument that is sent as an attachment with the Email
Action.
• If Use Template checkbox is unchecked, an email body defined in the action configuration can be sent to
any email address.
• TO: — An array of email addresses or object IDs of the contacts, leads, or users you’re sending the
email to. The maximum number of toAddresses is 100.
• CC: — An array of carbon copy (CC) addresses or object IDs of the contacts, leads, and users you’re
sending the email to. The maximum number of ccAddresses is 25.
• BCC: — An array of blind carbon copy (BCC) addresses or object IDs of the contacts, leads, and users
you’re sending the email to. The maximum number of bccAddresses is 25.
• Email Subject — The subject of the email.
• Email Body — The body of the email.
• Set HTML Body — Determines if the Email Body should be read as plain text or HTML.
• Attachment List — Supports attachment IDs merged from Data JSON. For example, %DocGenId%. When
the email is sent, the attachment will be added to the email.
Email Action Properties

This page contains information on Email Action Properties.
Use Template If checked, uses a Salesforce email template. Also determines which other properties are available.
To Email Address List Specifies the recipients in the TO field of the email. Can accept an array of up to 100 addresses.
Supports merge fields. Available if Use Template is not checked.

company 1171
OmniStudio
CC Email Address List Specifies the recipients in the CC field of the email. Can accept an array of up to 25 addresses.

BCC Email Address List Specifies the recipients in the BCC field of the email. Can accept an array of up to 25 addresses.

Email Subject Specifies the email subject line.

Email Body Specifies the body of the email.

Set HTML Email Body Processes HTML code in the email body.
Select Email Template Specifies the Salesforce email template. Enter the sObject Id, then select the template from the drop-
down list.
Available if Use Template is checked.

Email Target Object Id Specifies the Id of a Contact, User, or Lead with an email address.

What Id If you specify a Contact in the Email Target Object Id field, this property can further ensure that merge
fields in the template contain the correct data. See the Salesforce Email API documentation for more
information.

Save As Activity If checked, saves the email as an activity record on the recipient’s page in Salesforce.

Org Wide Email Address Specifies the sender in the FROM field of the email. This is assumed to be an email that represents the
entire org. If not specified, the default sender is the user that invoked the Integration Procedure. See
Organization-Wide Email Addresses in the Salesforce help.

File Attachments from Specifies the OmniScript JSON node that contains a single or list of Salesforce File sObject Ids.
OmniScript
Document Attachments Specifies the OmniScript JSON node that contains a single or list of Salesforce Document sObject Ids.
from OmniScript
Content Versions Specifies the Id of a ContentVersion sObject that is included as an attachment.
Select Document Specifies the Attachment sObjects to add to the email.
Attachments
Attachment List Specifies a node in the data JSON that contains a list of attachment Ids.
HTTP Action
Call internal and external web services from OmniScript without coding or making Salesforce API calls
using the HTTP Action.

company 1172
OmniStudio
NOTE
In an LWC OmniScript, to use an HTTP Action that calls Apex, you must add the
Salesforce org's domain into a Remote Site's Remote Site URL field. For more
To make an external call with an HTTP Action:
Use the HTTP Action to:
• Send GET, POST, PUT, or DELETE requests to standard REST Endpoints.

• Call Apex REST.
• Access Salesforce Named Credential (OAuth) identity services.
Settings:
• HTTP Path: The request URL of the API. For example, /NS/v1/application. NS = namespace of the
Apex REST API. The path can contain merge fields. For example, to pass a UserId node from the data
JSON, add the node name with percentage signs on either side, i.e., %UserId%.
NOTE
Beginning with Vlocity Summer '19, you can pass percentage signs in the URL by
replacing the percentage sign in the URL with the variable $Vlocity.Percent.
• HTTP Method: The method name, which has two parameters. For example, doPost(String fullJSON,
String filesMap).
• Option Source: The type of HTTP Action.
• Use Named Credentials (OAuth via Salesforce).
• SOAP/XML (Simple Object Access Protocol)
• Web (Unauthenticated or Credentials in Header)
• Remote Timeout: The timeout for the request, in milliseconds. Defaults to 30,000 (30 seconds. Maximum
12,0000 (120 seconds).
• Pre- and Post-Transform DataRaptor Interface: (Optional) DataRaptor Transform interface to run before
or after the REST Action.
Prior to Summer '17, the HTTP Action was known as the REST Action.
HTTP Action Properties

This page contains information on HTTP Action Properties.

company 1173
OmniStudio
HTTP Path URL to call. For Apex REST actions, you can use merge fields to set this property.
Beginning with Vlocity Spring '19, you can pass percentage signs in the URL by replacing the percentage sign
in the Path with the variable $Vlocity.Percent.
HTTP Method GET, POST, PUT, or DELETE.
Endpoint Type Specifies the endpoint type:
• Apex — Invokes Apex REST. You must add the Salesforce org's domain to a Remote Site's Remote Site
URL field.
• Named Credential — Access Salesforce Named Credential (OAuth) identity services.
• SOAP/XML — Send requests to standard REST endpoints using XML format for the request and response
bodies.
• Web — Send requests to standard REST endpoints (unauthenticated or credentials in HTTP headers).
Named Credential Salesforce named credential. For Named Credential and optionally SOAP/XML endpoint types.
HTTP Headers HTTP headers specified as Key/Value pairs. Supports merge field syntax.
Parameters URL parameters specified as Key/Value pairs. Supports merge field syntax.
Encode URI Uses HTML escape codes in the URI.
Cache Caches the response.
With Credentials Requires security credentials such as a username and password.
Send Body Sends the Extra Payload as the request body for a POST action.
Send Only Extra Enables the action to send Extra Payload's Key/Value pairs without including the OmniScript's data JSON.
Payload
Related Topics
• Adding Remote Site Settings in Apex Developer Guide
Integration Procedure Action

Invoke an Integration Procedure to retrieve Salesforce data and external data.
Before You Begin

Create an Integration Procedure to handle OmniScript data.
1. Drag the Integration Procedure Action into the OmniScript's structure panel.
2. To select the Integration Procedure to be called, click in the Integration Procedure field, and select
3. Use the Response Transformations properties to specify the input and to trim or rename the output
JSON.
• Send JSON Path — Specifies the JSON node that contains the input for the Integration Procedure.
This is typically the name of a previous element in the OmniScript.
• Send JSON Node — Renames the JSON node that contains the input for the Integration Procedure.
This is typically the name of one of the Integration Procedure's input parameters.
• Response JSON Path — Specifies the JSON node that contains the output to return to the
OmniScript. By default all Integration Procedure data is returned.

company 1174
OmniStudio
• Response JSON Node — Renames the JSON node that contains the output to return to the
OmniScript. This is typically the name of a subsequent element in the OmniScript.
See Manipulate JSON with the Send/Response Transformations Properties.
4. Use the Extra Payload property to send additional key/value pairs to the Integration Procedure as input
data.
5. Specify any additional Integration Procedure Action properties you need.
See Also
• Integration Procedure Action Properties

• Future Methods in Apex Developer Guide
• Settings for Long-Running Integration Procedures
• Continuation in Long-Running Calls
Integration Procedure Action Properties

This page contains information on Integration Procedure Action Properties.
Integration Procedure Specifies the Integration Procedure to be run in the format Type_Subtype.
Remote Options Specifies additional properties for the Integration Procedure as key/value pairs.
Send Only Extra Enables the action to send Extra Payload's Key/Value pairs without including the OmniScript's data
Payload JSON.
Use Future Specifies that the Integration Procedure runs asynchronously, as a Salesforce future method, which can
return no data to the calling OmniScript.
Is Chainable Enables the Chainable settings of the subordinate Integration Procedure.
Use Continuation Enables a subordinate Integration Procedure that calls long-running actions to use Apex continuations.
Use Queueable Enables chainable steps in the subordinate Integration Procedure to start queueable jobs.
Is Queueable Enables the Queueable Chainable settings of the Integration Procedure.
Chainable
Invoke Mode Configures the response behavior of the action:
• Default — Blocks the UI with a loading spinner.

• Non-Blocking — Runs asynchronously, and the response is applied to the UI. Pre and Post DataRaptor
transforms and large attachments are not supported.
• Fire and Forget — Runs asynchronously with no callback to the UI. Pre and Post DataRaptor
transforms and large attachments are not supported. A response will still appear in the debug console
but will not be applied to the Data JSON.
Show Toast On Displays a message when the subordinate Integration Procedure completes.
Completion
See Also
• Future Methods in Apex Developer Guide
• Settings for Long-Running Integration Procedures

company 1175
OmniStudio
• Continuation in Long-Running Calls
Navigate Action
Navigate to various Salesforce experiences from OmniScript using the Navigate Action element. For more
information on Salesforce experiences, see PageReference Types.
1. Drag the Navigate Action into the OmniScript's structure panel. If the Navigate Action renders in a
Step, it becomes a clickable button. If the Navigate Action is between steps, it will fire automatically.
2. (Optional) If the Navigate Action renders in a Step, determine the style of the button by clicking the
Button Variant dropdown and selecting an SLDS Button variant. In addition to the SLDS Button
variants, you can select Link to render the Navigate Action as an HTML anchor tag.
3. (Optional) If the Navigate Action renders in a Step, display an SLDS Icon in the button by entering the
Icon name into the Icon Name field. For example, to add the standard_account Icon, enter
Standard:Account.
4. (Optional) Replace the existing entry in the browser history by setting the Replace? property to Yes. If
Replace? is set to Yes, users cannot navigate back to the OmniScript.
NOTE
By default, a Navigate Action in a Console App opens the PageReference type in a
new subtab. Replace the current tab in a Console App by setting Replace? to Yes.
5. (Optional) Enable the LWC OmniScript to send messages to separate Lightning web components by
checking LWC PubSub Message? and adding a Message key-value pair. For more information, see
Communicate with OmniScript from a Lightning Web Component.
6. (Optional) Beginning with the Vlocity Insurance and Health Winter '20, and Vlocity CME Winter '20, Fire
events from the Navigate Action by passing an event to the OmniScript in the URL parameter
c__vlocEvents. The Navigate Action element must have the checkbox property LWC PubSub
Message? enabled to fire the event. For more information on passing parameters into an OmniScript,
see Launch an LWC OmniScript with LWC OmniScript Wrapper. To refresh Cards using events, see
Reloading a Card After Updating an LWC OmniScript.
7. Determine the Salesforce experience that the Navigate Action will direct to by clicking and selecting a
PageReference type. This page contains further instructions for each PageReference Type that
Navigate Action supports. For information on PageReference Types, see PageReference Types.

App Launch a standard or custom app that is available from the app launcher. Connected apps are not
supported.
Community Named Page Direct users to a Named Page in a Community.
Component Navigate to Aura components and Lightning web components.
Current Page Trigger a page update on the current page once a user completes the OmniScript.
Knowledge Article Display knowledge articles in the OmniScript.
Login Open a Community login page.
LWC OmniScript Launch another LWC OmniScript.
Named Page Open a standard Named page.

company 1176
OmniStudio

Navigation Item A page displaying mapped content on a CustomTab.
Object Direct users to a standard, or custom, object page.
Record Open a page that interacts with a Salesforce record.
Record Relationship Open a record relationship page.
Restart OmniScript Return a user to the beginning of an OmniScript and clear the OmniScript data.
Vlocity OmniScript Launch a separate OmniScript.
Web Page Open an external URL.
NOTE
In the LWC OmniScript Designer, the Navigate Action's JSON prop set does not contain
every property from the Properties section. Edit the JSON to add properties. Once a
property is added, if a corresponding property exists it will appear in the UI.
Do not edit the following properties when using the Edit JSON feature: disOnTplt,
objectActionOptions, recordActionOptions, loginActionOptions, targetTypeOptions,
variantOptions, iconPositionOptions, replaceOptions, targetLWCLayoutOptions.
See Also

• Enable and Configure Cancel Functionality in an LWC OmniScript
• Navigate Action Lightning Web Component ReadMe
Navigate to an App
Beginning with Vlocity Insurance and Health Spring '20, Direct users from an OmniScript to a standard App,
custom App, or a page within an App using Navigate Action's App PageReference Type.
Before You Begin

1. Configure the Navigate Action's additional properties and view alternative page reference types. See Navigate Action.
2. Ensure the App you're using is available in the Salesforce App Launcher. For more information, see App Launcher.
1. Set the PageReference type property to App.

2. In the App Name field, enter the App's appId or appDeveloperName using the appropriate
namespace.
appId The AppDefinition object's DurableId.

company 1177
OmniStudio
appDeveloperName The concatenation of the app’s namespace and developer name. The app's namespace is standard,
custom, or a managed package namespace. The Developer name is viewable in the App Manager. For
more information on appDeveloperName, see PageReference Type
Syntax Examples:
• Standard: standard__Account
• Custom: c__CustomAccountApp
• Managed: vloc_ps_OmniScriptDesigner
3. (Optional) In the Target Page field, enter JSON to specify the app page and additional attributes. The
Target Page field represents the App's pageRef property.
{"type": "standard__navItemPage","attributes": {"apiName":

"oui_dailylwc__LWCDesigner"}}
4. Activate and preview the OmniScript to test the behavior of the navigation.
See Also

• Navigate Action
Navigate to a Community Login or Logout

Beginning with Vlocity Insurance and Health Spring '20, Direct users from an OmniScript to a Community
Login or Logout page for authentication.
Before You Begin

Configure the Navigate Action's additional properties and view alternative page reference types. For more information, see Navigate
Action.
1. Set the PageReference type property to Login.

2. Set the Login Action property to login to direct the user to a login page or logout to direct the user
to logout.
3. Preview the OmniScript by activating the OmniScript and placing it in a Community. For more
information, see Add an LWC OmniScript to a Community or Lightning Page.
See Also

• Navigate Action
Navigate to a Component
Navigate to Aura components and Lightning web components from an OmniScript by using the Component
PageReference Type.

company 1178
OmniStudio
Before You Begin

Action.
1. Set the PageReference type property to Component.

2. Enter an Aura component name into the Component Name field using the format
NS__componentName, where NS is the namespace of your Vlocity package. The vlocityLWCWrapper
enables Lightning web components to be URL Addressable. For more information, see Launch
Lightning Web Component URLs with vlocityLWCWrapper. This field supports Merge fields.
NOTE
The Aura component must implement the lightning:isUrlAddressable interface. For
more information, see Is Url Addressable.
3. (Optional) Pass parameters by using a URL query string format in the Target Params property.
Parameters must have a c__ prefix. This field supports Merge fields.
4. (Optional) When navigating to a component in a console app, add a Console Tab Icon and a Console
Tab Label by setting the c__tabIcon and c__tabLabel parameters. The c__tabIcon accepts and SLDS
Icon and c__tabLabel accepts plain text. For example, &c__tabLabel=Custom

company 1179
OmniStudio
See Also

• Navigate Action
Navigate to the Current Page

Update and navigate to the current page from an OmniScript by using the Current Page PageRefrence
Type in a Navigate Action.
Before You Begin

Action.
1. Set the PageReference type property to Current Page.

2. Apply updates to the current page by passing parameters that use a URL query string format in the
Target Params property. Parameters must have a c__ prefix. This field supports Merge fields.
See Also

• Navigate Action
Navigate to a Knowledge Article

Display a Knowledge Article in an OmniScript by selecting the Navigate Action's Knowledge Article
PageReference Type.
Before You Begin

Action.
1. Set the PageReference type property to Knowledge Article.

2. Enter the Knowledge Article's urlName into the Article URL field. This field supports Merge fields.
3. Enter the articleType API name into the Article Type field. Find the articleType API Name by
removing __kav from the API Name of the Knowledge Object.

company 1180
OmniStudio
NOTE
Communities ignore articleType.
See Also
• Navigate Action
Navigate to an LWC OmniScript

Navigate to an OmniScript by using the Vlocity OmniScript PageReference Type. OmniScripts on
Community Pages must be accessed using the Community Named Page PageReference Type. See
Navigate to a Named Page or Community Named Page.
Before You Begin

Action.
1. Enter the name of the OmniScript with a prefix of c: into the LWC OmniScript field. The name of the
OmniScript is defined by the OmniScript's Type, SubType, and Language, using the syntax
typeSubTypeLanguage. For example, an OmniScript with the properties Type=myType,
SubType=Example, and Language=English appears as a component using the syntax
myTypeExampleEnglish.
2. Select the layout the OmniScript uses to render by clicking the OmniScript Layout property.
3. (Optional) Prefill the target OmniScript by passing parameters using a URL query string format in the
OmniScript Prefill property. Parameters must have a c__ prefix. This field supports Merge fields.
4. (Optional) When navigating to an OmniScript in a console app, add a Console Tab Icon and a Console
Tab Label by setting the c__tabIcon and c__tabLabel parameters. The c__tabIcon accepts an SLDS
Icon , and c__tabLabel accepts plain text. For example, &c__tabLabel=Custom

company 1181
OmniStudio
See Also

• Navigate Action
Navigate to a Named Page or Community Named Page

Beginning with Vlocity Insurance and Health Spring '20, Direct users to a standard or community page by
using the Named Page or Community Named Page PageReference Type.
Before You Begin

Configure the Navigate Action's additional properties and view alternative page reference types. See Navigate Action.
1. Set the PageReference type property to Named Page , or if the page exists in a Community, select
Community Named Page.
2. In the Page Name field, enter the API for the page name. This field supports Merge fields.
3. Activate and preview the OmniScript to test the behavior of the navigation.
See Also

• Navigate Action
Navigate to a Navigation Item

Navigate from an OmniScript to a custom tab displaying mapped content by using the Navigate Action
Navigation Item PageReference Type.

company 1182
OmniStudio
Before You Begin

Action.
1. Set the PageReference type property to Navigation Item. This field supports Merge fields.
2. Find the Custom Tab's Tab Name and Namespace prefix, and enter it into the Tab Name field using the
format NS__TabName, where NS is the namespace of the Tab. For more information on Tabs, see
Create Lightning Page Tabs. This field supports Merge fields.
See Also
• Navigate Action
Navigate to an Object Page

Navigate from an OmniScript to an Object page by using the Navigate Action's Object PageReference
Type.
Before You Begin

Action.
1. Set the PageReference type property to Object.

2. Enter the API name of the object into the Object API Name field. Custom objects from a managed
package require a namespace prefix using the syntax NS__APIName, where NS is the namespace
prefix of the object. This field supports Merge fields.
3. Click the Action property and select an Action to invoke.
NOTE
The New action opens a modal dialogue.
4. (Optional) Enter the Id of the Object page into the Filter Name field. Filter Name defaults to
Recent. This field supports Merge fields.
See Also
• Navigate Action
Navigate to a Record Page

Navigate from an OmniScript to a Record page by using Navigate Action's Record PageReference Type.

company 1183
OmniStudio
Before You Begin

Action.
1. Set the PageReference type property to Record.

2. Enter a recordId into the Record Id field. This field supports Merge fields.
3. Click the Action property and select an Action to invoke.
NOTE
Clone and Edit actions open a modal dialogue.
4. (Optional) Enter the API name of the object into the Object API Name field. Custom objects from a
managed package require a namespace prefix using the syntax NS__APIName, where NS is the
namespace prefix of the object. This field supports Merge fields.
See Also

• Navigate Action
Navigate to a Record Relationship Page

Navigate from an OmniScript to pages interacting with a record relationship by using the Record
Relationship PageReference Type.
Before You Begin

Action.
1. Set the PageReference type property to Record Relationship.

2. Enter a recordId into the Record Id field. This field supports Merge fields.
3. (Optional) Enter the API name of the object defining the Relationship into the Object API Name field.
Custom objects from a managed package require a namespace prefix using the syntax NS__APIName,
where NS is the namespace prefix of the object. This field supports Merge fields.
4. (Optional) Enter the API name of the Relationship into the Relationship API Name field.
See Also

• Navigate Action

company 1184
OmniStudio
Navigate to a Web Page

Navigate to a Web page from an OmniScript by using the Web Page PageReference Type.
Before You Begin

Action.
1. Set the PageReference type property to Web Page.

2. Enter the full URL for a web page into the Web URL field. For example, to navigate to google, enter
https://google.com.
See Also

• Navigate Action
Navigate Action Properties

This page contains information on Navigate Action Properties.
NOTE
In the LWC OmniScript Designer, the Navigate Action's JSON prop set does not contain
every property from the Properties section. Edit the JSON to add properties. Once a
property is added, if a corresponding property exists it will appear in the UI.
Do not edit the following properties when using the Edit JSON feature: disOnTplt,
objectActionOptions, recordActionOptions, loginActionOptions, targetTypeOptions,
variantOptions, iconPositionOptions, replaceOptions, targetLWCLayoutOptions.
Button Variant If the Navigate Action renders in a Step, determines the style of the button:
• brand — Uses a brand-specific fill color to indicate a primary action.

• outline-brand — Uses a brand-specific outline color to indicate a primary action.
• neutral — Generic button.
• success — Uses a green fill to indicate success.
• destructive — Uses a red fill to indicate a destructive action to the user, like permanently erasing data.
• text-destructive — Uses red text to indicate a destructive action to the user, like permanently erasing data.
• inverse — Uses a white outline and text to be visible on a dark background.
• link — Highlighted and underlined to indicate navigation to a page.
Icon Name Name of the icon for the button.

company 1185
OmniStudio
Page Reference Select the PageReference sObject type:
Type
• App — Navigates to an App page.
• Component — Navigates to a Lightning Web Component.
• Community Named Page — Navigates to a Community Named Page.
• Current Page — Performs an action on the current page.
• Knowledge Article — Navigates to a knowledge article.
• Login — Navigates to a Login or Logout.
• Named Page — Navigates to the page with the specified name.
• Navigation Item — Navigates to a Custom Tab. Visualforce tabs, web tabs, Lightning Pages, and Lightning
Component tabs are supported.
• Object — Navigates to an sObject page.
• Record — Navigates to an sObject record page.
• Record Relationship — Navigates to a list of records related to the specified record.
• Web Page — Navigates to an external web page.
• Vlocity OmniScript — Navigates to a Vlocity OmniScript.
Replace Existing Specifies that the page to which this action navigates replaces the current page in the browser history. If this is
Page in Browser checked, users cannot navigate back to the OmniScript.
History
Component Name Name of the Lightning Web Component.
Target Parameters Additional parameters for the page.
Article URL URL of the Knowledge Article.
Article Type Type of the Knowledge Article.
Page Name Name of the Named Page.
Tab Name Name of the Custom Tab.
Object API Name Name of the sObject. For custom objects, include the namespace, for example
vlocity_ins__PartyRelationship__c.
Object Action Page for the action to perform on the sObject:
• Home — Displays sObject information.

• List — Lists sObject records.
• New — Opens the window for creating a new sObject.
Filter Name Text to filter the List of sObject records.
Record Action Page for the action to perform on the sObject record:
• Clone — Opens the window for cloning the record.

• Edit — Opens the window for editing the record.
• View — Displays sObject record information.
Relationship API Name of the relationship. For standard objects, this is usually an Id reference such as AccountId. For custom
Name objects, this is usually the name of the related object with the __c suffix changed to __r.
Replace If checked, the pageReference replaces the existing entry in the browser history, and disables the user from
navigating back to the OmniScript. In a console context, the target replaces the current tab instead of opening
a new tab.
Record ID Id of the sObject record.
Web URL URL of the external Web Page.
LWC OmniScript Name of the OmniScript using the syntax typeSubTypeLanguage.
OmniScript Layout Layout for OmniScript rendering, either Newport for non-LWC or Lightning for LWC.
OmniScript Prefill Parameters to prefill the OmniScript in URL query string format. Parameters must have a c__ prefix. This field
supports Merge fields. For example: c__firstName=%firstName%.

company 1186
OmniStudio
Pub/Sub Enables the OmniScript to send messages to separate Lightning web components. After checking this, specify
a Message key-value pair.
Related Topics
• Navigate Action
• Buttons in Salesforce Lightning Design System
• Icons in Salesforce Lightning Design System
Restart an OmniScript
Navigate a user to a new instance of the same OmniScript using the Navigate Action.
Required Versions
Spring '21 or later.
1. From OmniScript, add a Navigate Action to the canvas.

2. In your Navigate Action's properties, click Edit Properties As JSON.
3. Locate the node "targetType", and set "Restart OmniScript" as the value.
"targetType": "Restart OmniScript"

4. Save your settings and test the functionality.
See Also

• Navigate to the Current Page
Matrix Action
The OmniScript Matrix Action enables you to retrieve a value from a calculation matrix by specifying the
required input parameters. For example, the matrix shown below specifies insurance premiums based on
age, sex and smoking status.

company 1187
OmniStudio
The OmniScript below collects the required data from the user, submits it to the matrix, and displays the
resulting premium.
The matrix action element is configured as follows:
In the Matrix Input Parameters field, map data from the Data JSON (in the Data Source field) to the
parameters that the matrix defines (in the Filter Value field). To specify the matrix to be used, choose it
from the drop-down list in Remote Options.
To control when the matrix executes, enter a DateTime value in the Execution Date Time field. If the
Execution Date Time field is left blank, the matrix executes immediately.

company 1188
OmniStudio
Matrix Action Properties

This page contains information on Matrix Action Properties.
Data Source Name of a JSON node that provides input for the calculation matrix.
Filter Value Value of the JSON node that provides input for the calculation matrix.
Matrix Name Name of the calculation matrix being called.
Post-Transform DataRaptor An optional DataRaptor Transform that reformats output data from the calculation matrix.
Interface
Remote Options Key/value pairs that specify additional options for the calculation matrix.
Default Matrix Result Key/value pairs that specify the default result if the matrix doesn't return a result.
Execution Date Time Controls when the matrix executes. If blank, the matrix executes immediately. Supports merge
syntax.
Remote Action
Call Apex classes from OmniScript using the Remote Action element.
Before You Begin

Create an Apex class in Salesforce to call from OmniScript.
1. Add a Remote Action before a Step, in a Step, or after a Step to load data or send data in the
OmniScript. The OmniScript's data JSON is sent as the input.
2. In the Remote Class field, enter the name of the Apex class that the action calls.
NOTE
The Apex Class must implement NS.VlocityOpenInterface. NS = the namespace of the
Apex class. For information on namespace, see Viewing the Namespace and Version
of the Vlocity Package.
3. In the Remote Method field, enter a method of the class that the Action calls. For example—
validateAddress.
4. (Optional) In the Pre- and Post-Transform DataRaptor Interface—optionally select a DataRaptor
Transform interface to run before or after the Remote Action. See DataRaptor Transform Overview.
5. (Optional) Change the amount of time before the Action times out using the Remote Timeout property.
In the element, click Edit Properties as JSON, and in the remoteTimeout property, set a time in
milliseconds. The default timeout is 30,000, or 30 seconds. The maximum is 120,000, or 120
seconds.
6. (Optional) Configure additional properties in the Remote Action. See Remote Action Properties.

company 1189
OmniStudio
Example
NOTE
This example references the Troubleshooting OmniScript and the OmniCallout and
DataObjectService Apex classes.
In the Troubleshooting OmniScript, the callOut1 Remote Action element calls an external system to check if
the asset is still under warranty.
It implements the OmniCallout class and the checkWarrantyStatus method:

company 1190
OmniStudio
Since this is a sample OmniScript, the method contains a hard-coded response:

company 1191
OmniStudio
The callOut2 Remote Action calls the returnItemOrder method, which in turn calls the
DataObjectService class that calls out to a Heroku instance to return an order number:

company 1192
OmniStudio
Sample Class Structure

The following class structure can be used to call out to an external system:
global with sharing class CustomClassName implements NS.VlocityOpenInterface

{
global CustomClassName() {}
global Boolean invokeMethod(String methodName, Map<String,Object>

inputMap, Map<String,Object> outMap, Map<String,Object> options) {
try{
if(methodName.equals('customMethodName')){
// your implementation, use outMap to send response back to

OmniScript
else if(methodName.equals('customMethodName2')){
// your implementation, use outMap to send response back to

OmniScript
} catch(Exception e){
result = false;
return result;
See Also

company 1193
OmniStudio
• HTTP Action
Remote Action Properties

This page contains information on Remote Action Properties.
Properties Description
Remote Class Vlocity Open Interface class.
Remote Method Vlocity Open Interface method.
Remote Options Additional class invocation options.
Send Only Extra Payload Enables the action to send Extra Payload's Key/Value pairs without including the OmniScript's
data JSON.
Show Toast On Completion Displays a message when the subordinate remote action completes.
Use Continuation Enables a subordinate Integration Procedure that calls long-running actions to use Apex
continuations.
Review Action
Skip Elements—Hides Steps, Blocks, or individual Elements from the Review page. To configure this
element:
1. Next to Skip Elements, click Add new element property.

2. Enter the name of the element that should be omitted from the Review page.
3. Repeat for additional elements.
Set Errors Properties

This page contains information on Set Errors Action Properties.
Element Name The OmniScript element for which an error is to be set.
Value The error message. Options:
• Merge fields from a previous step (%elementName%)

• Literal value
• Concatenated values
• Results of formulas and functions
• Expressions that combine the options: "Case Status: %caseStatus%"
Related Topics
• Set Errors In an OmniScript
Set Values Properties

This page contains information on Set Values Properties.
Element Name The JSON node for which a value is to be set.

company 1194
OmniStudio
Value The value to assign to the JSON node. Options:

• Literal value
Related Topics
• Set Values in an OmniScript
OmniScript Display Elements

This page contains a table explaining the available OmniScript elements listed under the Display section.
Element Element Description Template Example

Name
Headline The Headline element is used to Lightning: Use the Rich Text Editor in the
create a heading with the Rich Text Vlocity OmniScript Designer
editor. omniLightning-vlcHeadline.html
Newport:
vlcHeadline.html
Line Break The Line Break element displays a Lightning: Use the Line Break Element to
line break. Add Line Breaks in an OmniScript
omniLightning-vlcLineBreak.html
Newport:
omniNewport-vlcLineBreak.html
Text Block The Text Block element displays a Lightning: Use the Rich Text Editor in the
block of text to the user. Vlocity OmniScript Designer
omniLightning-vlcTextblock.html
Newport:
omniNewport-vlcTextblock.html
OmniScript Function Elements

This page contains a table explaining the available OmniScript elements listed under the Function section.
Element Element Description Template Example Example Image

Name
Aggregate The Aggregate element vlcFormula.html Create a Formula Lightning Aggregate:
provides a variety of or Aggregate in an
functions for OmniScript
aggregation. Unlike the
Formula component, the
Aggregate component
expects input in the form
Newport Aggregate:
of an array.

company 1195
OmniStudio
Formula The Formula element vlcFormula.htm Create Formula Lightning Formula:

performs calculations Fields in an
that require complex OmniScript
operations.
Newport Formula:
Geolocation The Geolocation vlcGeolocation.html Geolocation: Lightning Geolocation:

element records the
geographical location of
a person when it is
clicked by the User.
Newport Geolocation:

company 1196
OmniStudio
Messaging The Messaging element vlcValidation.html Display Messaging To view the different Message
displays comments, in OmniScripts types, see Displaying Messaging in
requirements, success, OmniScripts.
and warning messaging
depending on whether
the validate expression
is true or false.
OmniScript Group Elements

This page contains a table explaining the available OmniScript elements listed under the Groups section.
Element Element Templates Example Example Image

Name Description
Block The Block vlcBlock.html Blocks Lightning Block:
element groups
elements inside
of a Step
component into a
manageable
structure.
Newport Block:
Edit Block The Edit Block vlcEditBlock.html Use See Configuring an Edit Block.
element groups OmniScript
together inputs to vlcEditBlockCards.html Edit Block
allow users to
vlcEditBlockFS.html
add, edit, and
(provides an additional "Sum
delete records.
element" property)
vlcEditBlockInline.html
vlcEditBlockLongCards.html

company 1197
OmniStudio
Filter Block The Filter Block vlcFilterBlock.html n/a n/a

is the container
that holds Filters.
Input Block The Input Block vlcInputBlock.html n/a n/a
acts as a
placeholder for a
custom template.
Radio The Radio Group vlcRadioGroup.html Setting up a Lightning Radio Group:
Group element allows questionnaire
users to quickly with Radio
answer a large Group
volume of
multiple choice
questions in one
step.
Newport Radio Group:

company 1198
OmniStudio
Selectable The Selectable vlcSelectableItemsV2.html Create and vlcSelectableItemsV2.html:

Items Items component Populate a
uses an array to vlcAssetList.html Custom
populate a list of Template for a
vlcSmallItemsV2.html
selectable items. Selectable
Item Using
vlcPaymentList.html
DataRaptor
vlcAssetList.html:
vlcSmallItemsV2.html:

company 1199
OmniStudio
Step The Step element vlcStep.html Steps Lightning Step:

divides the
OmniScript into
different sections.
Newport Step:
Type The Type Ahead vlcTypeAheadBlock.html Configure Lightning Type Ahead:

Ahead Block displays as Type Ahead
Block a text input field; Blocks
the field auto
completes results
based on the
user's input.
Newport Type Ahead:

company 1200
OmniStudio
Action Block
Beginning with Vlocity Insurance and Health Spring '20, run multiple OmniScript Actions asynchronously by
grouping them in an Action Block.
Actions within the Action Block run in parallel and inherit the Action Block's settings.
Before you begin

View the Action Block flow chart to understand how actions in the Action Block execute.
Action Block flow chart:
To configure an Action Block:
1. Drag the Action Block from the element palette into the designer. Place the Action Block inside of a
Step, before the first Step, or between Steps.
2. Drag up to four Actions into the Action Block.

company 1201
OmniStudio
3. Select an Invoke Mode to control how actions inside the Action Block run.
Default The Action blocks the UI with a loading spinner.
Non-Blocking The Action runs asynchronously, and the response applies to the UI. Pre and Post DataRaptor transforms,
and large attachments are not supported.
Fire and Forget The Action runs asynchronously with no callback to the UI. Pre and Post DataRaptor transforms, and large
attachments are not supported. A response still appears in the debug console but does not apply to the Data
JSON.
4. (Optional) Check Apply if error to enable actions that run successfully to apply their responses to the
OmniScript's data JSON even when other actions in the Action Block fail. When Apply if error is
unchecked, successful actions do not apply their responses to the data JSON when another action in
the block fails.
5. (Optional) When the Action Block is inside of a Step, set Validation Required to Step to prevent the
Action Block from running when errors exist in the Step.
6. Preview the OmniScript to test the Action Block behavior.
NOTE
In Vlocity Insurance and Health Spring '20, Action Block's Conditional View property is
not available in the LWC Designer. To edit the Conditional View property, temporarily
switch to the Classic Designer and configure the Conditional View properties. Once the
conditional view is configured, save the OmniScript and switch back to the LWC
See Also

• OmniScript Action Elements
• Action Block Properties
Action Block Properties

This page contains information on Action Block properties.
Apply If Error Enables actions that run successfully to apply their responses to the OmniScript's data JSON even when other
actions in the Action Block fail.
Default An Invoke Mode option, Default blocks the UI with a loading spinner until the Action finishes executing.
Non-Blocking An Invoke Mode option, Non-Blocking runs the action asynchronously, and the response is applied to the UI.
Pre and Post DataRaptor transforms, and large attachments are not supported.
Fire and Forget An Invoke Mode option, Fire and Forget runs the action asynchronously with no callback to the UI. Pre and
Post DataRaptor transforms, and large attachments are not supported. A response appears in the debug
console but is not applied to the Data JSON.

company 1202
OmniStudio
Validation When set to Step, Validation Required prevents the Action Block from running when errors exist in the Step.
Required
See Also
• Action Block
Block
Combine logical groups of elements in an OmniScript Step using a Block element.
Blocks help to group information to create nested JSON data. Blocks are contained within Steps and may
repeat to capture an array of data. For example, street, city, state, and postal code elements may be
combined into an address block.
NOTE
Blocks do not support the Custom LWC Element. See Custom LWC Element.
To add and configure a Block:
1. Drag a Block element into the OmniScript canvas and name the element.
2. In Field Label, enter a label that displays to users.
3. (Optional) Check Collapse to render a collapsed Block in the OmniScript.

company 1203
OmniStudio
4. (Optional) In Repeat Settings, check Enable Repeat to enable users to add multiple block entries.
Repeatable blocks store data in an array format, where each block entry is indexed in an array under
the Block's element name. If you plan to access data from an element in a repeatable Block, see
Evaluating Elements in Repeatable Blocks. For information on prefilling blocks, see Prefill Repeatable
Blocks.
5. (Optional) Check Clone When Repeating to clone values when a Block is repeated.
6. (Optional) In the Limit Repeat field, enter a number to set the number of times a Block can be
repeated.
7. Preview the OmniScript and test the functionality.
8. Note the data JSON output format based on your configuration to map data JSON from Blocks.
No Block JSON Example Block JSON Example Repeatable Block JSON Example

company 1204
OmniStudio
See Also
• Edit Block
Edit Block
supports Edit Blocks.
Create, edit, and delete multiple Salesforce or external records on one page using Edit Block.
For example, if you are collecting an Account's Contact information, you can add an Edit Block to your
OmniScript to enable users to add a record for each Contact.
NOTE
In the Summer '17 version, the first three fields of the Edit Block display by default. In
Winter '18, the display fields must be chosen by the user when configuring the Edit Block
in the OmniScript Designer. When you disable an active OmniScript with an Edit Block
created before Winter '18, you must determine which fields you want to display on the Edit
Block before reactivating the OmniScript.
What's Next
Select an Edit Mode and configure the Edit Block to display elements. See Configuring an Edit Block.
See Also
• Adding, Editing, and Deleting Records with Edit Block Actions

• Overriding an LWC Edit Block
• Working with Formulas in Edit Block
• Setting a Select Mode in Edit Block
• Displaying Sprites in Edit Block
• Edit Block Properties
Configuring an Edit Block

Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20 , LWC OmniScript
supports Edit Blocks.

company 1205
OmniStudio
NOTE
Edit Blocks do not support the Custom LWC element. For more information, see Custom
LWC Element.
Edit Blocks enable a user to add and edit multiple entries in a single array. For example, you can use an
Edit Block to list and edit an Account's list of Contacts. Edit Blocks are repeatable blocks by default.
Prefilling repeatable blocks with data is possible using an array format. For more information, see Prefill
Repeatable Blocks.
Displaying Elements in an Edit Block

Edit Block displays three elements in the Edit Block's default view and can display additional elements in
the edit view. It is possible to hide elements, hide elements from the edit view.
• To display an element in the Edit Block's default view, check the checkbox next to the element in the
structure panel. This element also appears when editing an entry.
Example Default View:
• To only display elements when a user edits an entry, leave the checkbox next to the element in the
structure panel unchecked.
Example Edit View:

company 1206
OmniStudio
• To hide an element in the Edit Block, in the element, click Edit as JSON, and set Hide equal to true.
For more information, see Hide OmniScript Elements.
• To only display an element in the Edit Block's default view:
1. Check the checkbox next to the element in the structure panel.

2. In the Element, click Edit as JSON, and set Hide equal to true. The element displays in the entry's
default view and is hidden when editing the entry.
Setting Display Modes and Templates

Enable LWC OmniScripts and Angular OmniScripts to display different Edit Block user interfaces by using
LWC Modes and Angular Templates.
LWC Modes
Select a Mode in the Edit Block's Edit Block Mode field to change the display and functionality of the Edit
Block.

company 1207
OmniStudio
Mode Configuration Notes Lightning Newport

Example Example
Inline n/a
Table n/a
Financial Statement (FS) • The total combined width of the elements

must be less than or equal to 12.
• Vlocity recommends displaying less than
twelve elements.
• Hidden elements do not affect the total
display width
Cards n/a
NOTE
Available beginning in
Vlocity Insurance and
Health Spring '20
LongCards In the Winter '20 release, the width of

LongCards must be set to 12.
Angular Templates
Add a template to the EditBlock's HTML Template Id field to modify the display and functionality of the Edit
Block.
Template Name Lightning Example Newport Example

Responsive table -
vlcEditBlock.html
Cards - vlcEditBlockCards.html
Financial Statement -
vlcEditBlockFS.html
Inline - vlcEditBlockInline.html

company 1208
OmniStudio
Long cards -
vlcEditBlockLongCards.html
Compatible Elements
The following elements are compatible with Edit Block:
• Aggregate
• Checkbox
• Currency
• Date
• Date/Time
• Disclosure
• Email
• File
• Formula
• Headline
• HTTP Action
• Image
• Line Break
• Lookup
• Matrix Action
• Multi-select
• Number
• Password

company 1209
OmniStudio
• Radio
• Radio Group
• Range
• Remote Action
• Select
• Signature
• Telephone
• Text
• Text Area
• Text Block
• Time
• URL
What's Next
Add actions to an Edit Block or use SObject mapping to create, edit, and delete records. See Adding,
Editing, and Deleting Records with Edit Block Actions.
See Also

Adding, Editing, and Deleting Records with Edit Block Actions

Enable users to add, edit, and delete records by using Edit Block's default remote actions. Add custom
functionality by configuring additional actions.
Edit Block supports these Actions:
• HTTP Action
• Remote Action
Creating, Editing, and Deleting Records with Default Actions and sObject Mapping
Add sObject Mapping functionality by adding Remote Actions to the Edit Block for each option you want to
make available to the User. These Remote actions will access Apex classes built for the Edit Block and the
sObject Mapping tool. The Default Actions use the sObject mapping property to determine how the entries
map to an sObject.

company 1210
OmniStudio
NOTE
In the LWC OmniScript Designer, the SObject Mapping section does not work. To edit the
SObject mapping, use the classic designer. Once the edits are complete, switch back to
the LWC OmniScript Designer to test the mapping.
To allow a user to create new entries, edit entries, or delete entries:
1. Add a Remote Action to the Edit Block.

2. Configure the Edit Block using the Element naming convention, Class, and Method for each of these
table entries:
Element Name Class Method

(Edit Block Element Name)-New DefaultOmniScriptEditBlock new
(Edit Block Element Name)-Edit DefaultOmniScriptEditBlock edit
(Edit Block Element Name)-Delete DefaultOmniScriptEditBlock delete
Map the Edit Block entries to Salesforce objects by using the SOBJECT MAPPING property. Fields hidden
from the user, such as an Id, remain available for mapping.
To add mapping entries to the Edit Block:
1. Click SOBJECT MAPPING to expand the section.

2. Click Select Object and select a Salesforce object.
3. Click +Add Mapping.
4. In the Edit Block Element field, enter the name of an element that is in the Edit Block.
NOTE
By default, new entries are added, and existing entries are updated. To create a new
record instead of updating an existing one, check the Duplicate Key checkbox.
5. In the sObject field, select an sObject field. The element will map to this field.
NOTE
You must add a Text Element to store the Id of the record in the Edit Block. The
element containing the record Id must map to the sObject's Id field in the SOBJECT
MAPPING section. To hide the element from displaying in the UI, see Using the Hide
Property on OmniScript Components.
Adding Custom Actions

Add custom actions to include additional functionality in your Edit Block.

company 1211
OmniStudio
To add a custom action:
1. Add an Action into the Edit Block.

2. Name the element. Actions in the Edit Block will appear in the dropdown beneath the default actions by
default.
3. (Optional)To have an Action replace the default New, Edit, or Delete Actions in the User Interface,
name the Action element, and append the action type.
Replace Action Example Element Name

New AddUserNew
Edit ChangeAddressEdit
Delete RemoveAccountDelete
4. Add a Label to the Action.
5. Configure the Action.
Adding Global Actions

Run Actions on the entire JSON for the Edit Block by adding global actions. Global actions display outside
of the Edit Block entries.
To add a Global Action:
1. Add an Action into the Edit Block.

2. Name the element and append Global onto the Element Name. For example, to make an action with
the element name DeleteUsers a global Action, the Element Name must be DeleteUsersGlobal.
3. Add a label to the Action.
4. Configure the Action.
See Also
• Configuring an Edit Block

Displaying Sprites in Edit Block

Display Sprites to indicate information about an Edit Block record entry using the Default Svg Sprite and
Default Svg Icon properties. For example, a User icon may display if the entry is a Contact record. Vlocity
supports the Lightning Design System icons found here . Dynamically display different sprites by mapping
the SVG Controlling Element's possible values to SLDS icons in the SVG Controlling Element Map.
Replacing the Default SVG Sprite and Icon

To replace the Default SVG Sprite and Icon:
1. Search for an SLDS icon, and note the category and the icon name.

company 1212
OmniStudio
2. In the Default SVG Sprite field, enter the icon's category.

3. In the Default SVG Icon field, enter the name of the icon.
4. Preview the OmniScript to view the new default SVG icon.
Displaying SVG Icons Dynamically

To dynamically display different SVG Icons:
1. In the Edit Block's SVG Controlling Element, enter the name of an Element in the Edit Block.
2. In the Svg Controlling Element Map, click Add SVG Icon.
3. In the SVG Icon's Value field, enter a possible value for the SVG Controlling Element.
4. Search for an SLDS icon, and note the category and the icon name.
5. In the Svg Sprite field, enter the icon's category.
6. In the Svg Icon field, enter the name of the icon.
7. Preview the OmniScript and enter the value for the SVG Controlling Element to test the functionality.
8. (Optional) Repeat the steps for additional element values.
See Also

Setting a Select Mode in Edit Block

Select modes enable users to change an Edit Block entry's boolean value in the data JSON by clicking on
Edit Block entries.
NOTE
Select Mode is only available for Cards, LongCards, and Table.
To set a select mode:
1. Add a Checkbox element into the Edit Block and name the element. For example, Element Name =
PaidInFull.
2. (Optional) Hide the element from the Edit Block by clicking Edit as JSON, and setting Hide equal to
true.
3. In the Edit Block, set Select Mode equal to Single or Multi.
4. Enter the Checkbox element name in the Checkbox Element Name field.

company 1213
OmniStudio
5. Preview the OmniScript, create Edit Block entries, and select the entries.
6. Click { Data } to open the data panel and view the boolean values for the Edit Block entry.
See Also

Working with Formulas in Edit Block

Perform equations and combine strings by using Formula Elements. Place formulas within an Edit Block to
access element values within a specific Edit Block entry. Place Formula outside of the Edit Block in the
same Step to access an element value for all of the Edit Block entries.
To access data within a specific Edit Block entry:
1. Add a Formula element to the Edit Block.

2. Using the merge field syntax, add the Edit Block's Element Name and the Element Name for the
element you want to access in the Formula. For example, %EditBlock:FirstName%. For more
information on merge fields, see Access OmniScript Data JSON with Merge Fields.
3. Add a |n after the Edit Block element name to set the formula to only access the merge field's value
for its instance. Using the |n syntax is necessary because the Edit Block stores entry values in an array
format. The resulting syntax is %EditBlock|n:FirstName%.
4. Concatenate values by combining them using the |n syntax. For example, %EditBlock|
n:FirstName% + " " + %EditBlock|n:LastName%.

company 1214
OmniStudio
To access each index of an Edit Block array in a formula:
1. Place a Formula outside of the Edit Block.

2. In the Formula editor, add the Element Name using the merge field syntax. For example, to return the
sum of all the entries for a Number element in an Edit Block, you would use the following syntax in the
formula editor: SUM(%EditBlock1:NetIncome%), where NetIncome is the name of a Number
element.
3. (Optional) When using the vlcEditBlockFS.html template, display the formula at the top of the Edit
Block by adding the Formula element's name to the Edit Block's Sum Element property.
See Also

Overriding an LWC Edit Block

Apply custom code to an Edit Block by extending and overriding the Edit Block's components.
Edit Blocks contain up to three LWC override fields based on the Edit Block's Edit mode. For information on
Edit Modes, see Configuring an Edit Block.

company 1215
OmniStudio
Property Description Compatible Edit Example

Modes
LWC Component Customize the Edit Block component by All Extending the Edit Block
Override extending the Edit Block component. LWC
Edit Block Label LWC Customize the Edit Block's label by overriding Cards, Long Cards Extending the Edit Block
Component Override the label component. Label LWC
Edit Block New LWC Customize the Edit Block Card users click to Cards Extending the Edit Block
Component Override create new entries by overriding the New LWC New LWC
component.
See Also
Extending the Edit Block LWC

Customize an LWC OmniScript's Edit Block by extending the Edit Block LWC.
The Edit Block LWC overrides the entire Edit Block LWC unless the Edit Mode is Cards or Long Cards.
Cards and Long Cards include additional extendable LWCs. For information on Cards and Long Cards
LWC options, see Overriding an LWC Edit Block.
Before you begin

Ensure you understand the requirements for extending an OmniScript element's Lightning web component.
For more information, see Extend an OmniScript Element's Lightning Web Component.
To extend and customize the Edit Block LWC:
1. In VisualStudio, create a custom LWC or download a custom Edit Block LWC example by clicking here.
The code in the custom LWC example changes the background of the Edit Block card to green.
Original Edit Block Card Custom Edit Block Card Example
2. In the LWC's JavaScript file, extend the Edit Block LWC. Using this code example, replace the NS with
the namespace of the package. For information on finding the namespace, see Viewing the

company 1216
OmniStudio
Example:
import omniscriptEditBlock from "VLOCITYNAMESPACE/omniscriptEditBlock";

import template from "./editblockCardCustomize.html"
export default class editblockCardCustomize extends
omniscriptEditBlock{
// your properties and methods here
render()
{
if (this.jsonDef) {
this._hasChildren = this.jsonDef.children.length > 0;
this._isFirstIndex = this.jsonDef.index === 0;
if (this._isCards && this._isFirstIndex) {

// hides the first short card with no children
if (!this._hasChildren) {
this.classList.add(this._theme + '-hide');
} else {
this.classList.remove(this._theme + '-hide');
}
}
}
return template;
}
}
3. Add code to the custom LWC.
4. Deploy the custom LWC to Salesforce. See Deploy Lightning Web Components.
5. Go to the OmniScript that contains the Edit Block LWC.
6. In the Edit Block's LWC Component Override field, enter the name of the custom LWC.
7. Activate the OmniScript, and preview your changes.
See Also

Extending the Edit Block Label LWC

Customize an LWC Edit Block's Label for the Cards and Long Cards edit modes by extending the Edit
Block Label LWC.
Exclusive to Cards and Long Cards edit mode, the Edit Block Label LWC overrides the original labels,
including global actions. For information on additional Long Cards LWC options, see Overriding an LWC
Edit Block.

company 1217
OmniStudio
Before you begin

To extend and customize the Edit Block Label LWC:
1. In VisualStudio, create a custom LWC or download a custom Edit Block LWC example by clicking here.
The code in the custom LWC example changes the label of a global action to green.
Original Edit Block Label Custom Edit Block Label
2. In the LWC's JavaScript file, extend the Edit Block Label LWC. Using this code example, replace the
NS with the namespace of the package. For information on finding the namespace, see Viewing the
Example:
import omniscriptEditBlockLabel from "NS/omniscriptEditBlockLabel";

import template from "./editblockLabelCustomize.html"
export default class editblockLabelCustomize extends
omniscriptEditBlockLabel{
render()
{
return template;
}
}
6. In the Edit Block's properties, select Edit Block Mode, and click Cards or LongCards.
7. In the Edit Block's Edit Block Label LWC Component Override field, enter the name of the custom
LWC.
See Also
Extending the Edit Block New LWC

Customize an LWC Edit Block's new entry card by extending the Edit Block New LWC.
Exclusive to the Card Edit Mode, the Edit Block New LWC overrides the new entry card. For information on
additional Cards LWC options, see Overriding an LWC Edit Block.

company 1218
OmniStudio
Before you begin

To extend and customize the Edit Block New LWC:
1. In VisualStudio, create a custom LWC or download a custom Edit Block New LWC example by clicking
here. The code in the custom LWC example changes the text color to green.
Original Edit Block New Card Custom Edit Block New Example
2. In the LWC's JavaScript file, extend the Edit Block New LWC. Using this code example, replace the NS
with the namespace of the package. For information on finding the namespace, see Viewing the
Example:
import omniscriptEditBlockNew from "NS/omniscriptEditBlockNew";

import template from "./editblockNewCustomize.html"
export default class editblockNewCustomize extends
omniscriptEditBlockNew{
render()
{
return template;
}
}
6. In the Edit Block's properties, click Edit Block Mode and select Cards.
7. In the Edit Block's Edit Block New LWC Component Override field, enter the name of the custom
LWC.

company 1219
OmniStudio
See Also

Edit Block Properties

This section contains information on the Edit Block properties. For information on configuring these
properties, see Configuring an Edit Block.
Allow Delete Enables users to access an Action that deletes an entry.
Allow Edit Enables users to access an Action that edits an entry.
Allow New Enables users to access an Action that creates a new entry in the Edit Block.
Delete Label The text label that appears for the Delete Action.
Edit Block Mode Exclusive to LWC OmniScripts; sets the styling for Edit Block entries.
Edit Label The text label that appears for the Edit Action.
New Label The text label that appears for the New Action.
Default SVG Sprite The name of the Default SVG Sprite category. By default, this field is set to the utility category.
Default SVG Icon The name of the Default SVG Icon that is within the Default SVG Sprite's category. By default, this field is
set to the user icon.
SVG Controlling Element The name of an element in the Edit Block that's value dynamically controls whether an alternate SVG Icon
displays.
Sum Element The Sum Element displays the value for a Formula placed outside of the Edit Block.
Select Mode Exclusive to LWC OmniScript, Select Mode enables users to set a Checkbox's boolean value to true by
selecting Edit Block entries. Select Mode is only available for Cards, LongCards, and Table Edit Blocks.
Checkbox Element Enter the name of a Checkbox element in the Edit Block. This element enables Select Mode to function.
Name
sObject Mapping Enables users to use Vlocity's default actions to map Edit Block entries to Salesforce records.
For information on common properties, see Common OmniScript Element Properties Definitions.
See Also

Setting up a questionnaire with Radio Group

OmniScript's Radio Group enables you to create and display questions in a questionnaire format.

company 1220
OmniStudio
NOTE
Radio Group provides the same options for each question. To provide different options for
each question, see Add Options for Selects, Multi-Selects, and Radio Buttons.
To set up a questionnaire with Radio Group:
1. Drag a Radio Group into an existing Step in the structure panel.

2. In the Radio Group's Properties, under Options, add Values and Labels. These represent the
user's selectable options.
NOTE
Using a value from a Radio Group as a conditional in another element requires adding
the Radio Group's element name as the parent node. The image below displays an
example of how to reference a Radio Group value in a conditional:
3. (Optional) Select the Set All button next to an option to check all of the fields at once when the option
is selected.

company 1221
OmniStudio
4. Under Radio Group Questions, add questions into the Label field and enter Values to store the
user's response. The Labels represent the questions that display to the left of the selectable options.
5. (Optional) Set the Radio Labels Width. Changing the Width of Radio Group Labels changes the width
of the Options Labels.
6. Preview the OmniScript to test the questionnaire.
Steps
When Creating the Script Structure for an OmniScript, Steps should be used to create each "page" of the
form. Users can navigate through Steps using Next and Previous buttons. You can enable field validation
for a Step, which means that all required fields on the Step must be completed in order to move forward.
Conditionally Display Elements Using the Conditional View Property can be done by applying conditional
views to steps. This enables you to create one OmniScript that offers different experiences based on the
user's responses.

company 1222
OmniStudio
Step Example
In the example OmniScript pictured below, the first Step is called Agent Information:
Here is the same Step rendered on the form:

company 1223
OmniStudio
The Instruction field on the Step element configuration appears in Horizontal mode and is HTML-rich:

company 1224
OmniStudio
The OmniScript's Step Chart can be hidden by checking Hide Step Chart in the Script Configuration:
The Step Chart Label property enables you to text that is separate from the Step's main display label:

company 1225
OmniStudio
Type Ahead Block

Display a list of results when a user begins typing in an input field by using the Type Ahead Block. When a
user selects a record, the Type Ahead Block can retrieve additional information related to the record. For
example, a Type Ahead Block can be used with a DataRaptor to list Accounts in the results.
In the OmniScript Designer, the Type Ahead Block is located under the Groups section of Available
Components.
See Also
• Add and Configure a Type Ahead Block

• Make an HTTP Call from a Type Ahead Block
• Using Google Maps Autocomplete in LWC OmniScripts
• Using Google Maps Autocomplete with OmniScript
• Using Type Ahead Block With Data JSON
• Using Type Ahead Block with DataRaptor
• Type Ahead Block Properties
Add and Configure a Type Ahead Block

Configure how users can create and edit records in Edit Block.
1. Add the Type Ahead Block element to the OmniScript canvas.
NOTE
If a Type Ahead Block exists in a Block element, only one Block element is permitted.
Adding multiple nested Blocks will result in errors.
2. Add an Action element into the Type Ahead Block to retrieve data or seed the Type Ahead Block with
data. Type Ahead Blocks only support using a single action.
NOTE
Prior to Vlocity Insurance and Health Spring '20, in an LWC OmniScript, if an action
returns nested response data, you must trim the path in the Response JSON Node
field. For example, if Response JSON Path is set to the nested node %data:years
%, the Response JSON Node must be set to %years% or VlocityNoRootNode.For
information on trimming the JSON path of an action's response, see Manipulate JSON
with the Send/Response Transformations Properties.
Supported Data Sources Description Type Ahead Example

Data JSON Accesses an array of data present in the Using Type Ahead Block With Data JSON
OmniScript's data JSON.
DataRaptor Extract Action Retrieves internal or external Salesforce data. Using Type Ahead Block with DataRaptor

company 1226
OmniStudio
Supported Data Sources Description Type Ahead Example

Google Maps Auto Calls a Google Maps API to retrieve google Using Google Maps Autocomplete in LWC
Complete maps data. OmniScripts
HTTP Action Retrieves external data. Make an HTTP Call from a Type Ahead
Block
Remote Action Retrieves data from an Apex class. n/a
3. Add Input elements into the Type Ahead Block to map response data.
To hide an element, such as an Id, from the user, prefill it with data from the TypeAhead using these
steps:
a. From the element properties panel, click Edit as JSON. The JSON definition of the element is
displayed.
b. Set the hide property's value to true.
c. Check the box labeled Available for Prefill When Hidden.
4. Configure additional properties in the Edit Block to set a user's data access. See Type Ahead Block
Properties.
5. Beginning with Vlocity Insurance and Health Spring '20, Add custom styling and behavior by overriding
LWC Type Ahead Block components. The LWC Component Override field only overrides the Type
Ahead Component.
Type Ahead Block LWCs Description

omniscriptTypeahead Overrides the Type Ahead component that lists the data results.
omniscriptTypeaheadBlock Overrides the Type Ahead Block component that embeds the Type Ahead component.
progressBar LWC Type Ahead Blocks display a progress-bar when retrieving data results. For information on
customizing the progress-bar, see Base Vlocity LWC ReadMe Reference.
See Also

• Using Google Maps Autocomplete in LWC OmniScripts
Make an HTTP Call from a Type Ahead Block

Retrieve data from a URL in your Type Ahead Block using an HTTP Action.
The video below contains an overview of the OmniScript Type Ahead Block including instructions on how to
use it with an HTTP action.
1. Add a Type Ahead Block to your OmniScript.

2. Drag the REST action component into the structure of the Type Ahead Block. See OmniScript Script
Structure Definitions for more information.

company 1227
OmniStudio
3. Configure your HTTP Action by entering your HTTP Path and your HTTP Method.
4. Add fields to your Type Ahead Block for the items that are being returned by the HTTP action.
In the video example, the HTTP action is returning street address, city, and state. These are added as
text fields for street_line, city, and state.
By default, user input will be filtered against a LIKE match. To return unfiltered results check the Disable
Data Filter checkbox in the Type Ahead Block's properties.
See Also

Using Type Ahead Block With Data JSON

The Type Ahead Block can use a Data JSON as its source instead of an API, HTTP, or Remote action.
Using a Data JSON enables the response from the Type Ahead Block to be made client-side instead of
needing to make server calls.
For example, you might want to use a Data JSON with an array containing a list of your coverage plan
names. As your agent begins typing, a list of plan names is displayed, enabling the agent to choose one.
To use a Data JSON as the source for your Type Ahead Block:
1. Check the Use Data JSON checkbox

2. In the Data JSON Path, enter the name of a root level JSON node returned by the response of the
Action.
NOTE
The Data JSON Path only accepts data at the root level of the JSON.
By default, user input is filtered using a LIKE match. To return unfiltered results, check Disable Data Filter
in the Type Ahead Block's properties.
To make the Type Ahead Block behave like the Lookup element, check the Lookup Mode checkbox.
Instead of typing to return a set of values, users select from a set of values.
See Also


company 1228
OmniStudio

Using Google Maps Autocomplete in LWC OmniScripts

Retrieve Google Maps data and display a location in the Type Ahead Block using the Google Maps API.
Before You Begin

The Type Ahead Block's Google Maps functionality requires you to use a Google Maps API Key. See Google.

2. In Type Ahead Block's Field Label, enter the text to display in the google maps search field.
3. Check the Enable Google Maps Autocomplete checkbox to display the Google Maps
Autocomplete section.
4. In the Google Maps API Key field, enter your Google Maps JavaScript API key. If you don't have a
Google Maps JavaScript API Key, obtain one from Google.
5. (Optional) To hide the Google Map widget, check Hide Map.
6. Click the Country Filter field and select a Country.
7. Preview the OmniScript to run a search and return a Google response.
8. Open the Action Debugger to view the response. A larger set of response data is available beginning
with Vlocity Insurance and Health and Vlocity CME Summer '20.

company 1229
OmniStudio
These are the available response nodes:

• Prior to Vlocity Insurance and Health and Vlocity CME Summer '20, the response includes these
nodes:
Response Node Description

street: Returns a street address
locality Returns a city or town
administrative_area_level_1 In the United States, this returns a state
administrative_area_level_2 In the United States, this returns a county
postal_code Returns a postal code
country Returns a country
• Beginning with Vlocity Insurance and Health and Vlocity CME Summer '20, the response includes a
larger set of data and the previously available response nodes. Responses return unique sets of
data depending on the configuration.
In addition to the default response nodes, this table displays response nodes that may also be
available in the Google response. For detailed information on each response node, see Google
Geocoding API (Google documentation).

street_address A street address.
route A named route, e.g., I-5.
intersection A major intersection.
political A political entity.
country A national political entity.
geometry An object containing longitude and latitude.
administrative_area_level_1 A first-order civil entity below the country level, e.g., states.
administrative_area_level_2 A second-order civil entity, e.g., counties.
administrative_area_level_3 A third-order civil entity.
administrative_area_level_4 A fourth-order civil entity.
administrative_area_level_5 A fifth-order civil entity.
colloquial_area A common alternative name for the entity.

company 1230
OmniStudio

locality An incorporated city.
sublocality A first-order civil entity below locality. The sublocality may contain additional civil entities in
nodes from sublocality_level_1 to sublocality_level_5.
neighborhood A neighborhood.
premise A location, e.g., a building.
subpremise A first-order entity below a location, e.g., a building.
plus_code An encoded location reference taken from the latitude and longitude.
postal_code A postal code.
natural_feature An important natural feature.
airport An airport.
park A park name.
point_of_interest A point of interest, usually an important local entity, e.g., the Golden Gate Bridge.
types An array containing the response's type. For example, San Francisco is a type of locality.
9. Add an element to the Type Ahead Block to map data from a Google response node. Elements in the
Type Ahead Block appear as a selectable Child Element in the Google Transformation section.
10. In the Google Transformations section, click Add New Mapping.

11. Select a Child Element and map it to a Google Response Node.
Refer to the Action debugger's response, and map these additional nested data types by entering the
correct notation in the Google Response Node field:
Response Node Data Type Notation Example

geometry Object geometry:location:lat
types Array types|1
12. Save the OmniScript and run it in preview to view your mappings.
See Also


company 1231
OmniStudio

Using Google Maps Autocomplete with OmniScript

Retrieve Google Maps data and display a location in the Type Ahead Block using the Google Maps API.
NOTE
Beginning with Vlocity Insurance and Health Summer '20, LWC OmniScripts require
different configurations for the Type Ahead Block's Google Maps functionality. See Using
Google Maps Autocomplete in LWC OmniScripts.
This video explains how to use the Google Maps API in a Type Ahead Block:
To add Google Maps autocomplete to a Type Ahead Block:

2. Add elements to the Type Ahead Block to map the response of the Google Maps API.
The response includes:
• street: Returns a street address
• locality: Returns a city or town
• administrative_area_level_1: In the United States, this returns a state
• administrative_area_level_2: In the United States, this returns a county
• postal_code: Returns a postal code
• country: Returns a country
3. In the Type Ahead Block's properties, expand the Google Maps Autocomplete section and check the
Enable Google Maps Autocomplete checkbox.
4. (Optional) To hide the Google Map widget, check Hide Map.
5. In the Google Maps API Key field, enter your Google Maps JavaScript API key. If you don't have a
Google Maps JavaScript API Key, obtain one from Google.
6. Click the Country Filter field and select a Country.
7. In the Google Transformation section, select an Output JSON element and map it to an Input JSON
field.
See Also

company 1232
OmniStudio

Using Type Ahead Block with DataRaptor

Retrieve data in your Type Ahead Block using DataRaptor
This video demonstrates how to use OmniScript's Type Ahead Block with DataRaptor:

2. Drag a DataRaptor Extract Action component into the structure of the Type Ahead Block. See
OmniScript Script Structure Definitions for more information.
3. To configure your DataRaptor Extract Action, select a DataRaptor Interface and set your input
parameters. To pass the user's input to the DataRaptor, set one input parameter to the Element Name
of the Type Ahead Block.
4. Add fields to your Type Ahead Block.
5. To populate the fields, set the Element names to match the extracted data being returned by the
DataRaptor Extract Action. For more information on populating elements, see Prefill OmniScript
Elements using DataRaptor.
See Also

Type Ahead Block Properties

This page contains information on Type Ahead Block properties.
Type Ahead Key Where to apply the data returned by the action. To invoke JavaScript for parsing, set Data Process
Function.
Edit Mode Check to display the fields in the Type Ahead Block automatically. If Edit Mode is not checked, users can
click the edit button to display fields. Displaying the field enables users to enter information into the fields
without using type-ahead.
Google Map Api Key Enter a Google Maps API Key.
New Item Label Permits users to add a new entry when using the Type Ahead Block. By default, users can only choose
from the list of values.

company 1233
OmniStudio
Hide Edit Button Prevents the Edit button from displaying. If Edit Mode is checked, the Type Ahead Block fields still display
to the user.
Hide Map Hides the Google Maps widget in the OmniScript.
Google Response The name of the google response node. Preview the OmniScript to run the Google search and view all the
Node available response nodes in the action debugger.
See Also

OmniScript Input Elements

This page contains a table explaining the available OmniScript elements listed under the Inputs section.
Lightning Player and Newport Player templates are available for all Input components. To download the
component HTML Templates, see OmniScript Component Definitions.
Element Element Description Template Example Image

Name
Checkbox Checkbox is a boolean input control. It returns Lightning: Lightning Checkbox:
true or false to the Data JSON.
omniLightning-
vlcCheckbox.html
Newport:
omniNewport-
vlcCheckbox.html
Newport Checkbox:

company 1234
OmniStudio
Currency The Currency element records a currency Lightning: Lightning Currency:

amount on a single line. To configure the
currency symbol displayed in the OmniScript, omniLightning-
you have the following options: vlcCurrency.html
Newport:
• In single currency Salesforce orgs, the
Currency Code is set to the org currency by omniNewport-
default. No configuration is necessary. vlcCurrency.html
• In multi-currency Salesforce orgs, the
Currency Code changes to a current user's
currency code by default. No configuration
is necessary. For information on configuring
multiple currencies, see Manage Multiple
Currencies.
• Override the currency code with a default
value. In the Script Configuration, set the
Currency Code field to a supported
currency code.
• In the URL that launches the script, set the
OmniScriptCurrencyCode parameter. For
example: &OmniScriptCurrencyCode=JPY
• (Exclusive to LWC OmniScripts) Display the
Currency Code by checking the Display
Currency Code checkbox on the Currency
element.
• In a VisualForce page that displays an
OmniScript, by setting the
strOmniScriptCurrencyCode to a currency
code.
Newport Currency:
Custom Exclusive to LWC OmniScripts, add a custom n/a n/a

LWC LWC to an OmniScript using the Custom LWC
element. See Custom LWC Element.
Date The Date element is used for input fields that Lightning: Lightning Date:
should contain a date. The Date Type can be
set to either String or Date for a Date omniLightning-vlcDate.html
element. Setting the Date Type to String
Newport:
results in the use of the Absolute Date. The
model date format, can be set in the omniNewport-vlcDate.html
element's configuration. The default is yyyy-
MM-dd.
Newport Date:

company 1235
OmniStudio
Date/Time The Date element is used for input fields that Lightning: Lightning Date/Time:
should contain a date and time. Displays two
fields. The timezone property provides the omniLightning-vlcDatetime-
option of setting the timezone to either the local.html
User object's time or the browser's local time.
Newport:
omniNewport-vlcDatetime-
local.html
Newport Date/Time:
Disclosure Displays Disclosure text and has a checkbox Lightning: Lightning Disclosure:
for user to select whether or not they agree
with the disclosure. omniLightning-
vlcDisclosure.html
Newport:
omniNewport-
vlcDisclosure.html
Newport Disclosure:

company 1236
OmniStudio
Email The Email element is used for input fields that Lightning: Lightning Email:
should contain an e-mail address.
omniLightning-vlcEmail.html
Newport:
omniNewport-vlcEmail.html
Newport Email:
File The File element allows the user to upload a Lightning: Lightning File:
file from their computer so that it is accessible
by OmniScript. omniLightning-vlcFile.html
Newport:
omniNewport-vlcFile.html
Newport File:

company 1237
OmniStudio
Filter The Filter element must be added to a Filter Lightning: n/a

Block. Filters allow a user to filter items in an
OmniScript, either as select or multi-select. omniLightning-
vlcFilterItemSelect.html
omniLightning-
vlcFilterItemMSelect.html
Newport:
omniNewport-
vlcFilterItemSelect.html
omniNewport-
vlcFilterItemMSelect.html
Image The Image element defines an image in Lightning: Lightning Image:
Omniscript.
omniLightning-vlcImage.html
Newport:
omniNewport-vlcImage.html
Newport Image:
Lookup The Lookup element calls the DataRaptor Lightning: Lightning Lookup:
Output service to query SFDC tables and
populate the element with the results of the omniLightning-
query. s vlcLookup.html
Newport:
omniNewport-vlcLookup.html
Newport Lookup:

company 1238
OmniStudio
Multi- When a value is selected, the language- Lightning: Lightning Multi-select:

select independent "Value" in the Data JSON is
populated. omniLightning-vlcMulti-
select.html
Newport:
omniNewport-vlcMulti-
select.html
Newport Multi-select:
Number A numeric input field. Lightning: Lightning Number:
omniLightning-
vlcNumber.html
Newport:
omniNewport-
vlcNumber.html
Newport Number:

company 1239
OmniStudio
Password The Password element is a password field. Lightning: Lightning Password:
omniLightning-
vlcPassword.html
Newport:
omniNewport-
vlcPassword.html
Newport Password:

company 1240
OmniStudio
Radio Radio buttons let a user select one of a Lightning: Lightning Radio Display Mode
limited number of options. Options are Options:
displayed in a vertical list. omniLightning-vlcRadio.html
Horizontal:
Newport:
omniNewport-vlcRadio.html
Image:
Vertical:
Newport Radio Display Mode

Options:
Horizontal:

company 1241
OmniStudio
Image:
Segment:
Vertical:

company 1242
OmniStudio
Range The Range element is used for input fields Lightning: Lightning Range:
that should contain a value within a range.
omniLightning-vlcRange.html
Newport:
omniNewport-vlcRange.html
Newport Range:

company 1243
OmniStudio
Select Displays a dropdown menu of values. When a Lightning: Lightning Select:

value is selected, the language-independent
"value" is populated in the Data JSON. omniLightning-vlcSelect.html
Newport:
omniNewport-vlcSelect.html
Lightning Select Dropdown:
Newport Select:
Newport Select Dropdown:

company 1244
OmniStudio
Signature The Signature element collects a signature Lightning: Lightning Signature:

during an OmniScript. This field can be made
required. omniLightning-
vlcSignature.html
Newport:
omniNewport-
vlcSignature.html
Newport Signature:
Telephone The Telephone element is used for input Lightning: Lightning Telephone:
fields that should contain a telephone
number. omniLightning-vlcTel.html
Newport:
omniNewport-vlcTel.html
Newport Telephone:

company 1245
OmniStudio
Text The Text element is a one-line text input field. Lightning: Lightning Text:
omniLightning-vlcText.html
Newport:
omniNewport-vlcText.html
Newport Text:
Text Area The Text Area element is a multiple-line text Lightning: Lightning TextArea:
input field.
omniLightning-
vlcTextarea.html
Newport:
omniNewport-
vlcTextarea.html
Newport TextArea:

company 1246
OmniStudio
Time The Time element allows users to input a time Lightning: Lightning Time:
into the field.
omniLightning-vlcTime.html
Newport:
omniNewport-vlcTime.html
Newport Time:
URL The URL element is used for input fields that Lightning: Lightning URL:
should contain a URL address.
omniLightning-vlcURL.html
Newport:
omniNewport-vlcURL.html
Newport URL:

company 1247
OmniStudio
Custom Lightning Web Component Properties

Custom Lightning Web Component element properties are configurable from the Properties panel when
you select the element. With the Custom Lightning Web Component element, embed a custom Lightning
web component into your OmniScript.
LWC Name Enter the name of the custom component to render it in an active OmniScript.
Property Name Enter a property name using the HTML attribute format to pass it into the custom component. For example, the
property recordId converts to the HTML attribute record-id.
Property Source Enter a value to pass in the property. Values may use merge field syntax to pass a JSON node. For example, to
pass the JSON node ContextId, enter %ContextId%.
Standalone LWC A checkbox that enables the use of a Standalone LWC.
See Also

OmniScripts Checkbox Element

Enable users to select a checkbox by adding the Checkbox element to your OmniScript. For example, map
the user's yes/no answer to a true/false field in a record.
1. Drag a Checkbox element from the Build panel onto the canvas.
2. In the Properties panel, give the element a name in the Name field.
3. In Field Label, enter a label visible to the user.
4. (Optional) Select Default Value to enable the checkbox by default. The value is true or false in the
Data JSON.
5. (Optional) For additional properties, see Common OmniScript Element Properties Definitions.
See Also
• OmniScript Input Elements

• OmniScript Element Reference
Checkbox Properties
Checkbox properties are configurable from the Properties panel when you select a Checkbox element. With
the Checkbox element, enable users to select a checkbox in your OmniScript.
Default Value Select to enable the checkbox by default. The value is true or false in the Data JSON.
See Also
• OmniScripts Checkbox Element


company 1248
OmniStudio
OmniScripts Currency Element

Enable users to enter a currency amount by adding the Currency element to your OmniScript. Update
default format options such as the number of decimal places to display, minimum and maximum currency
value, and more.
1. Drag a Currency element from the Build panel onto the canvas.
4. (Optional) To override the default allowable format, select Custom Mask, and then enter a new mask
in the Format Override: Custom Mask field. For example, the mask ###,### transforms an input of
123456 into 123,456. See Pattern Mask.
5. (Optional) In Format Override: Decimal Places, enter a number to change the default number of
decimal places to display.
6. (Optional) In Minimum Currency Value, enter the minimum value that a user can enter, such as 1.
7. (Optional) In Maximum Currency Value, enter the maximum value that a user can enter, such as
10,000.
8. (Optional) Select Allow Negative Numbers to allow users to enter negative values, such as -15.
9. (Optional) Select Hide Comma Separators to hide commas for values greater than three digits. For
example, display 1000 instead of 1,000.
10. (Optional) Select Display Currency Code to display a currency code based on the logged-in user's
locale. For example, if the user locale is en-US, the currency code is USD.
See Also
• OmniScripts Number Element

Currency Properties
Currency properties are configurable from the Properties panel when you select a Currency element. With
the Currency element, enable users to enter a currency amount in an input field in your OmniScript.
Custom Mask Overrides the default allowable format.
Format Override: Custom Mask Specifies the custom mask that overrides the default mask. For example, the mask ###,###
transforms an input of 123456 into 123,456. For additional pattern information, visit https://
imask.js.org/guide.html#masked-pattern, and review Pattern Mask.
Format Override: Decimal Places Specifies how many decimal places to display. For example, enter 3 to display 50.201 instead
of 50.20.
Minimum Currency Value The minimum value that a user can enter.
Maximum Currency Value, The maximum value that a user can enter.
Allow Negative Numbers Allows users to enter negative values, such as -15.
Hide Comma Separators Hides commas for values greater than three digits. For example, display 1000 instead of
1,000.

company 1249
OmniStudio
Display Currency Code Displays a currency code based on the logged-in user's locale. For example, if the user locale
is en-US, the currency code is USD.
See Also
• OmniScripts Currency Element
OmniScripts Date/Time Element

Enable users to select a date from a date picker and a time from a list by adding the Date/Time element to
your OmniScript. Set the minimum and maximum dates, and the date and time formats.
1. Drag a Text element from the Build panel onto the canvas.
4. In Minimum Date, enter the earliest date the user can select from the date picker, such as
01-01-1950.
NOTE
The format entered must be the same as in the Date Format field. For example, to set
the minimum date to January 1, 1950, if the Date Format is MM-DD-YYYY, you must
enter 01-01-1950.
5. In Maximum Date, enter the latest date the user can select from the date picker, such as
12-31-2019.
NOTE
the maximum date to December 31, 2019, if the Date Format is MM-DD-YYYY, you
must enter 12-31-2019.
6. In Date Format, enter the format to display the date. For example, if the format is MM-DD-YYYY, and
the user selects January 3, 2020 from the date picker, the date displays as 01-03-2020. For
more format options, see Day.js.
7. In Time Format, enter the format to display the time, such as hh:mm a, which is the default.
NOTE
Enter h or hh for hour, m or mm for minute, s or ss for seconds, and a for am/pm. A
single letter, such as h or m, has no leading zero. Remove the a to display 24 hour
time. For example, hh:mm a displays 03:30 pm, h:mm a displays 3:30 pm, and
hh:mm:ss. displays 15:30 01. For more format options, see Day.js.

company 1250
OmniStudio
8. In Time Interval, enter the intervals within an hour the user can select from the time dropdown. For
example, enter 15 for 15 minute periods within the hour such as 12:00, 12:15, 12:30, 12:45, and so on.
The default interval is 30.
9. In the Advanced Options section, select a Time Zone:
• Select Local Timezone to use the timezone of the browser.
• Select User Timezone to use the timezone set in the logged-in user's profile.
See Also
• OmniScripts Date Element

Date/Time Properties
Date/Time properties are configurable from the Properties panel when you select a Date/Time element.
With the Date/Time element, enable users to select a date from a date picker and a time from a dropdown
list in your OmniScript.
Date Format Specifies the format to display the date. For example, if the format is MM-DD-YYYY, and the
user selects January 3, 2020 from the date picker, the date displays as 01-03-2020. For
more format options, visit https://day.js.org/docs/en/parse/string-format.
Maximum Date The latest date the user can select from the date picker. The format must be the same as in
the Date Format field. For example, to set the maximum date to December 31, 2019, if the
Date Format is MM-DD-YYYY, you must enter 12-31-2019.
Minimum Date The earliest date the user can select from the date picker. The format must be the same as in
the Date Format field. For example, to set the minimum date to January 1, 1950, if the Date
Format is MM-DD-YYYY, you must enter 01-01-1950.
Time Format Specifies the format to display the time. Enter h or hh for hour, m or mm for minute, s or ss for
seconds, and a for am/pm. A single letter, such as h or m, has no leading zero. Remove the a
to display 24 hour time. For more format options, visit https://day.js.org/docs/en/parse/string-
format.
Time Interval Specifies the intervals within an hour the user can select from the time dropdown. For
example, enter 15 for 15 minute periods within the hour such as 12:00, 12:15, 12:30, 12:45,
and so on.
Time Zone Specifies the timezone the date and time should be based. Select Local Timezone to use the
timezone of the browser. Select User Timezone to use the timezone set in the logged-in
user's profile.
See Also
• OmniScripts Date/Time Element

OmniScripts Date Element

Enable users to select a date from a date picker by adding a Date element to your OmniScript. Set the
minimum and maximum dates, and the date format.

company 1251
OmniStudio
1. Drag a Date element from the Build panel onto the canvas.
4. In Minimum Date, enter the earliest date the user can select from the date picker, such as
01-01-1950.
NOTE
the minimum date to January 1, 1950, if the Date Format is MM-DD-YYYY, you must
enter 01-01-1950.
5. In Maximum Date, enter the latest date the user can select from the date picker, such as
12-31-2019.
NOTE
the maximum date to December 31, 2019, if the Date Format is MM-DD-YYYY, you
must enter 12-31-2019.
6. In Date Format, enter the format to display the date. For example, if the format is MM-DD-YYYY, and
the user selects January 3, 2020 from the date picker, the date displays as 01-03-2020. For
more format options, see Day.js.
7. (Optional) In the Advanced Options section, update values for the following properties:
• Data Type: Specifies how to display the date in the Data JSON.
• If set to String, the Model Date Format is applied. String is the default data type.
• If set to Date, the date is encoded as an ISO 8601 date/time, such as
2018-01-28T05:00:00.000Z.
• Model Date Format: Specifies how the date is formatted in the Data JSON when Data Type is set to
String. For example, YYYY-MM-DD. For more format options, see Day.js.
See Also

Date Properties
Date properties are configurable from the Properties panel when you select a Date element. With the Date
element, enable users to select a date from a date picker in your OmniScript.

company 1252
OmniStudio
Data Type Specifies how to display the date in the Data JSON. Default is String. If set to String, the
Model Date Format is applied. If set to Date, the date is encoded as an ISO 8601 date/time,
such as 2018-01-28T05:00:00.000Z.
Date Format Specifies the format to display the date. For example, if the format is MM-DD-YYYY, and the
user selects January 3, 2020 from the date picker, the date displays as 01-03-2020. For
more format options, visit https://day.js.org/docs/en/parse/string-format.
Maximum Date The latest date the user can select from the date picker. The format must be the same as in
the Date Format field. For example, to set the maximum date to December 31, 2019, if the
Date Format is MM-DD-YYYY, you must enter 12-31-2019.
Minimum Date The earliest date the user can select from the date picker. The format must be the same as in
the Date Format field. For example, to set the minimum date to January 1, 1950, if the Date
Format is MM-DD-YYYY, you must enter 01-01-1950.
Model Date Format Specifies how the date is formatted in the Data JSON when Data Type is set to String. For
example, YYYY-MM-DD. For more format options, visit https://day.js.org/docs/en/parse/string-
format.
See Also

OmniScripts Disclosure Element

Enable users to agree to a disclosure statement by adding a Disclosure element to your OmniScript. Enter
the copy in a rich text editor.
1. Drag a Disclosure element from the Build panel onto the canvas.
4. (Optional) Select the Required field to make selecting the checkbox next to the statement required.
5. (Optional) Click the Text field to enter the text for your disclosure statement.
See Also

Disclosure Properties
Disclosure properties are configurable from the Properties panel when you select a Disclosure element.
With the Disclosure element, enable users to read a disclosure statement and select a checkbox to indicate
agreement.
Check Label The text that appears next to the checkbox.
Text The disclosure statement text.

company 1253
OmniStudio
See Also
• OmniScripts Disclosure Element

OmniScripts Email Element

Enable users to enter an email address by adding the Email element to your OmniScript. Update the default
allowable format with Validation Options.
1. Drag an Email element from the Build panel onto the canvas.
4. (Optional) In the Validation Options section, update data validation options:
• In Pattern, enter a pattern to override the default allowable email format. Use simple pattern
matching. Regular expressions (regex) accepted. See Regular Expressions.
• In Pattern Error Text, enter the message displayed if the input does not match the expression in
Pattern.
See Also

Email Properties
Email properties are configurable from the Properties panel when you select an Email element. With the
Email element, enable users to enter an email address in your OmniScript.
To view a list of properties available to the Email element, see Common OmniScript Element Properties
Definitions.
See Also
• OmniScripts Email Element

OmniScripts Multi-Select Element

Enable users to select from multiple items by adding the Multi-select element to your OmniScript. Display
options vertically, horizontally, or as an image.
1. Drag a Multi-select element from the Build panel onto the canvas.
4. (Optional) In Display Mode, select how to display the radio buttons. The following list options
available:
• Horizontal: (Default) Display radio buttons next to each other.

company 1254
OmniStudio
• Vertical: Display radio buttons stacked.

• Image: Display each radio button as an image.
5. (Optional) If you select Image in Display Mode, the following are additional properties you can
configure:
• Width: Sets the image width.
• Height: Sets the image height.
• Image Count In Row: Sets how many images per row to display.
• Enable Caption: Displays a caption below the image.
6. In Option Source, select where the list of options come from. Select from one of the following:
• Manual: (Default) Manually enter value/label pairs. Available when Display Mode is not Image.
• Custom: Enter the Apex class and method that returns the options. Use the format
ClassName.method. See Populating Picklist Values From Apex.
• SObject: Retrieves the picklist values from the Salesforce object and field. Use the format
• Image: When Image is selected as Display Mode, manually enter value/label pairs and upload
images to display. If no image is uploaded, the label displays in the image box.
7. If you select Manual or Image as an Option Source, for each option follow these steps:
a. Click + Add New Option.
b. Enter the Value and visible Label.
c. If your option is an image, select an image available from the Choose existing image dropdown.
Or upload an image from your computer from the Or upload new image section.
d. (Optional) Check Use as Default to make the option selected by default.
8. If you select Custom as an Option Source, in the Source, enter the name of a method to call on a
class in the format class.method.
9. If you select SObject as an Option Source, in the Source, enter the name of a field on an object in
the format SObject.field.
10. (Optional) To display options based on the selection of another value, configure Controlling Field
Type by following these steps:
a. To define the source of the controlling field:
• To retrieve picklist options from an Apex class, select Custom.
• To retrieve dependent picklist values from a Salesforce object, select SObject.
b. In Controlling Field Source, enter an Apex class.
c. In Controlling Field Element, enter an OmniScript element name.
See Also
• OmniScripts Select Element
Multi-Select Properties
Multi-Select properties are configurable from the Properties panel when you select a Multi-Select element.
With the Multi-Select element, enable users to select one or more items from one or more options in your
OmniScript.

company 1255
OmniStudio
Choose existing image Choose from a list of images available in your org.
Controlling Field Element The OmniScript element name on which to base the options displayed.
Controlling Field Source The Apex Class on which to base the options displayed.
Controlling Field Type Displays options based on the selection of another value. Select Custom to retrieve picklist
options from an Apex class. Select SObject to retrieve dependent picklist values from a
Salesforce object.
Display Mode Specifies how to display the options.
Enable Caption Displays a caption below the image.
Height Sets the image height.
Image Count In Row Sets how many images per row to display.
Label The option's visible label.
Options Specifies the options the user can choose from.
Option Source Specifies where the list of options come from. If Manual, enter value/label pairs. If Custom,
enter the Apex class and method in the format ClassName.method. If SObject, retrieves the
picklist values from the Salesforce object and field, in the format
ObjectAPIName.FieldAPIName. If Image, when Display Mode is Image, manually enter
value/label pairs and upload images to display.
Source Enter the source depending on the Option Source selected. If Custom, enter the name of a
method to call on a class in the format class.method. If SObject, enter the name of a field
on an object in the format SObject.field.
Use as Default Selects the option by default.
Value The value of the option.
Width Sets the image height.
See Also
• OmniScripts Multi-Select Element
OmniScripts Number Element

Enable users to enter a number by adding the Number element to your OmniScript. Limit what the user can
enter by setting a mask.
1. Drag a Number element from the Build panel onto the canvas.
4. In Mask, set the allowable format the user can enter. See Pattern Mask.
NOTE
The # symbol and the integers 1-9 represent a digit in the field. You can separate the
integers by using commas and a single decimal. The decimal is only applied if a user
enters it into the field. For example, the mask ###,###.## transforms an input of
123456.78 into 123,456.78. Enter a + or - symbol to return a positive or negative
integer.

company 1256
OmniStudio
5. (Optional) For Validation Options and other additional properties, see Common OmniScript Element
Properties Definitions.
See Also
• OmniScripts Currency Element

OmniScripts Password Element

Enable users to enter a password by adding the Password element to your OmniScript. Set the minimum
and maximum lengths of the password.
1. Drag a Password element from the Build panel onto the canvas.
4. In Minimum Password Length, enter the minimum number of characters the user must enter for a
valid password.
5. In Maximum Password Length, set the maximum number of characters the user can enter for a valid
password.
See Also

Password Properties
Password properties are configurable from the Properties panel when you select a Password element. With
the Password element, enable users to enter a password in your OmniScript.
Minimum Password Length Specifies the minimum number of characters the user must enter for a valid password.
Maximum Password Length Specifies the maximum number of characters the user can enter for a valid password.
See Also
• OmniScripts Password Element

OmniScripts Radio Element

Enable users to select one from multiple items by adding the Radio element to your OmniScript. Display
options vertically, horizontally, as an image, or styled based on the Newport Design System.
1. Drag a Radio element from the Build panel onto the canvas.

company 1257
OmniStudio
4. (Optional) In Display Mode, select how to display the radio buttons. The following list options
available:
• Horizontal: (Default) Display radio buttons next to each other.
• Vertical: Display radio buttons stacked.
• Image: Display each radio button as an image.
• Segmented (Newport only): Display each radio button as a stylized link based on the Newport
Design System. See Customizing OmniScripts and Cards with Vlocity Newport Design System.
5. (Optional) If you select Image in Display Mode, the following are additional properties you can
configure:
• Width: Sets the image width.
• Height: Sets the image height.
• Image Count In Row: Sets how many images per row to display.
• Enable Caption: Displays a caption below the image.
• Manual: (Default) Manually enter value/label pairs. Available when Display Mode is not Image.
• Image: When Image is selected as Display Mode, manually enter value/label pairs and upload
images to display. If no image is uploaded, the label displays in the image box.
7. If you select Manual or Image as an Option Source, for each option follow these steps:
c. If your option is an image, select an image available from the Choose existing image dropdown.
Or upload an image from your computer from the Or upload new image section.
d. (Optional) Check Use as Default to make the option selected by default.
e. (Optional) Check Auto Advance to advance the user to the next step when they click this option.

company 1258
OmniStudio
See Also

• Controlling Field Property
Radio Properties
Radio properties are configurable from the Properties panel when you select a Radio element. With the
Radio element, enable users to make a selection from one or more options in your OmniScript.
Auto Advance Advances the user to the next step when they click this option.
Choose existing image Choose from a list of images available in your org.
Salesforce object.
Display Mode Specifies how to display the options.
Enable Caption Displays a caption below the image.
Height Sets the image height.
Image Count In Row Sets how many images per row to display.
Width Sets the image height.
See Also
• OmniScripts Radio Element

OmniScripts Range Element

Enables users to select a number from a specified range by adding the Range element to your OmniScript.
Specify the increment values and use both dynamic and static values to define the minimum and maximum
values for the range.

company 1259
OmniStudio
1. Drag a Range element from the Build panel onto the canvas.
4. In Step, enter an increment value of the input range. For example, enter 2 so the user can select 2, 4,
6, 8, and 10 from a range of 2 to 10, or 4.5, 6.5, 8.5, and 10.5 from a range of 4.5 to 10.5. Default Step
is 1.
5. To create a selectable range configure the following properties:
• Minimum Value: Sets the lowest selectable number in the range.
• Maximum Value: Sets the highest selectable number in the range.
NOTE
Both fields accept dynamic and static values. Dynamic values are set using merge
fields. For example, to use a Number element value, whose element name is
Number1, to dynamically set your minimum or maximum value, enter %Number1%.
Acceptable static values include whole, negative, and decimal numbers, such as 1,
-5, and .5.
See Also

Range Properties
Range properties are configurable from the Properties panel when you select a Range element. With the
Range element, enable users to enter an email address in your OmniScript.
Step Specifies the increment value of the input range. For example, enter 2 so the user can select
2, 4, 6, 8, and 10 from a range of 2 to 10.
Minimum Value Sets the lowest selectable number in the range. Accepts dynamic and static values. For
example, to enter the value of an element whose name is Number1, enter the merge field
%Number1%. Acceptable static values include whole, negative, and decimal numbers, such as
1, -5, .5.
Maximum Value Sets the highest selectable number in the range. Accepts dynamic and static values. For
example, to enter the value of an element whose name is Number1, enter the merge field
%Number1%. Acceptable static values include whole, negative, and decimal numbers, such as
1, -5, .5.
See Also
• OmniScripts Range Element


company 1260
OmniStudio
OmniScripts Select Element

Enable users to select from a dropdown by adding a Select element to your OmniScript. Manually enter
options or dynamically pull options from an Apex class and method, or for a Salesforce object.
1. Drag a Select element from the Build panel onto the canvas.
• Manual: (Default) Manually enter value/label pairs.
5. If you select Manual as an Option Source, for each option follow these steps:
c. (Optional) Check Use as Default to make the option selected by default.
d. (Optional) Check Auto Advance to advance the user to the next step when they click this option.
See Also
• OmniScripts Multi-Select Element

• Controlling Field Property
• OmniScripts Radio Element
Select Properties
Select properties are configurable from the Properties panel when you select a Select element. With the
Select element, enable users to make a selection from a dropdown list in your OmniScript.

company 1261
OmniStudio
Auto Advance Advances the user to the next step when they click this option.
Salesforce object.
See Also

OmniScripts Telephone Element

Enable users to enter a telephone number by adding a Telephone element to your OmniScript. Limit the
length and format of the number the user can enter.
1. Drag a Telephone element from the Build panel onto the canvas.
4. (Optional) In Mask, update the allowable format by entering a custom pattern. The default is (999)
999-9999. See Pattern Mask.
5. (Optional) In Minimum Length, update the minimum number of characters the user must enter.
6. (Optional) In Maximum length, update the maximum number of characters the user can enter.
See Also

OmniScripts Text Area Element

Enable users to enter multiple lines of text by adding a Text Area element to your OmniScript. Limit the
number of characters the user can enter.

company 1262
OmniStudio
1. Drag a Text Area element from the Build panel onto the canvas.
4. (Optional) In Minimum Length, enter the minimum number of characters the user must enter.
5. (Optional) In Maximum Length, enter the maximum number of characters the user can enter.
See Also
• OmniScripts Text Element

Text Area Properties

Text Area properties are configurable from the Properties panel when you select a Text Area element. With
the Text Area element, enable users to enter multiple lines of text in your OmniScript.
Minimum Length The minimum number of characters the user must enter.
Maximum Length The maximum number of characters the user can enter.
See Also
• OmniScripts Text Area Element

OmniScripts Text Element

Enable users to enter a line of text by adding the Text element to your OmniScript. Limit the length of the
text using minimum and maximum values and set allowable information using the mask property.
1. Drag a Text element from the Build panel onto the canvas.
4. (Optional) To set the type of information and its format, enter a Mask such as (999)
999-9999[x9999], which accepts a North American phone number with an optional extension. See
Pattern Mask.
5. (Optional) In Minimum Length, set the minimum length of the text allowed, such as 1.
6. (Optional) In Maximum Length, set the maximum length of text allowed, such as 300.
See Also
• OmniScripts Text Area Element


company 1263
OmniStudio
Text Properties
Text properties are configurable from the Properties panel when you select a Text element. With the Text
element, enable users to enter a line of text in your OmniScript.
Mask Specifies the allowable input and sets the input's format. Use A for any letter, 9 for any number, * for any
character, and [ ] to enclose optional characters. For additional pattern information, visit https://
imask.js.org/guide.html#masked-pattern, and review Pattern Mask.
Minimum Length The minimum number of characters the user must enter.
Maximum Length The maximum number of characters the user can enter.
See Also
• OmniScripts Text Element

OmniScripts Time Element

Enable users to select from a list of times by adding the Time element to your OmniScript. Format the
display and set the time intervals.
1. Drag a Time element from the Build panel onto the canvas.
4. In Minimum Time, enter the earliest time the user can select, such as 12:00 am.
NOTE
The format entered must be the same as in the Time Format field. For example, to
set the minimum time to midnight, if the Time Format is hh:mm a, you must enter
12:00 am.
5. In Maximum Time, enter the latest time the user can select, such as 08:00 pm.
NOTE
The format entered must be the same as in the Time Format field. For example, to
set the maximum time to 8pm, if the Time Format is hh:mm a, you must enter 08:00
pm.
6. In Time Format, enter the format to display the time, such as hh:mm a, which is the default.

company 1264
OmniStudio
NOTE
Enter h or hh for hour, m or mm for minute, s or ss for seconds, and a for am/pm. A
single letter, such as h or m, has no leading zero. Remove the a to display 24 hour
time. For example, hh:mm a displays 03:30 pm, h:mm a displays 3:30 pm, and
hh:mm:ss. displays 15:30 01. For more format options, see Day.js.
7. In Time Interval, enter the intervals within an hour the user can select from the time dropdown. For
example, enter 15 for 15 minute periods within the hour such as 12:00, 12:15, 12:30, 12:45, and so on.
The default interval is 30.
8. (Optional) In the Advanced Options section, update values for the following properties:
• Data Type: Specifies how to display the time in the Data JSON.
• If set to String, the Model Time Format is applied. String is the default data type.
• If set to Date, the time is encoded as an ISO 8601 time.
• Model Time Format: Specifies how the time is formatted in the Data JSON when Data Type is set
to String. The default format is HH:mm:ss.sss'Z'. For more format options, see Day.js.
See Also

Time Properties
Time properties are configurable from the Properties panel when you select a Time element. With the Time
element, enable users to select a time from a dropdown list in your OmniScript.
Data Type Specifies how to display the time in the Data JSON. If set to String, the Model Time Format
is applied. String is the default data type. If set to Date, the time is encoded as an ISO 8601
time.
Maximum Time The latest time the user can select. The format entered must be the same as in the Time
Format field. For example, to set the maximum time to 8pm, if the Time Format is hh:mm a,
you must enter 08:00 pm.
Minimum Time The earliest time the user can select. The format entered must be the same as in the Time
Format field. For example, to set the minimum time to midnight, if the Time Format is hh:mm
a, you must enter 12:00 am.
Model Time Format Specifies how the time is formatted in the Data JSON when Data Type is set to String. The
default format is HH:mm:ss.sss'Z'. For more format options, visit https://day.js.org/docs/en/
parse/string-format.
Time Format Specifies the format to display the time. Enter h or hh for hour, m or mm for minute, s or ss for
seconds, and a for am/pm. A single letter, such as h or m, has no leading zero. Remove the a
to display 24 hour time. For more format options, visit https://day.js.org/docs/en/parse/string-
format.

company 1265
OmniStudio
Time Interval Specifies the intervals within an hour the user can select from the time dropdown. For
example, enter 15 for 15 minute periods within the hour such as 12:00, 12:15, 12:30, 12:45,
and so on.
See Also
• OmniScripts Time Element

OmniScripts URL Element

Enable users to enter a website address by adding the URL element to your OmniScript. For example, a
user can enter salesforce.com, or www.salesforce.com, and so on.
1. Drag a URL element from the Build panel onto the canvas.
4. (Optional) In the Error Text field of the Validation Options section, enter text to override the default
message displayed when the user does not enter the URL correctly.
See Also

URL Properties
URL properties are configurable from the Properties panel when you select a URL element. With the URL
element, enable users to enter a web address in your OmniScript.
Error Text Overrides the default message displayed when the user does not enter the URL correctly.
See Also
• OmniScripts URL Element

Vlocity Cards Framework

The Vlocity Cards Framework provides a set of tools to build customer-centric, industry-specific UI
components and applications on the Salesforce platform. Create dynamic and engaging omni-channel
customer experiences, rich in information and actions relevant to the customer's context with cards.

company 1266
OmniStudio
NOTE
When using Vlocity admin tools in the Lightning Console, note that the process to launch a
Vlocity object home page (like the OmniScript Designer, Cards Designer, and so on) has
changed as of SFDC Winter '19. For the optimal experience, create a new primary tab by
CTRL-clicking the link (or Cmd-clicking on the Mac) in the Console's tab selection menu.
From the new primary tab, you can open objects in a sub-tab of that primary tab.
Cards are containers for a related group of information. They display Salesforce object information along
with discrete, clickable actions that change according to the context in which they appear and based on the
information that they contain. Build interfaces with Salesforce specific or external data sources.
The Vlocity Cards Framework features a card designer, a declarative tool used to build cards. Add content
to states and create conditions for any state to determine what content displays when. Accelerate
incremental development by previewing and testing your interface with actual data from a live Preview tab.
Save and activate the card to generate the component to add to your Lightning or Community page.
NOTE
exclusive to LWC enabled cards. With LWC Cards you can use standard JavaScript and
HTML to modify and extend Vlocity products. See Vlocity Lightning Web Components.
Classic Card Designer

With the Classic Designer, some coding is required to customize your interfaces. The design and layout of
your cards are determined by templates that you can modify in the Template Designer if Angular, or extend
in a local development environment if LWC enabled. Each card can have a different data source, including
back-office systems other than Salesforce. A large library of Vlocity templates enables you to get ahead of
the design process. See Classic Cards.
Because everything gets built on industry-standard web technologies such as HTML5, CSS3, AngularJS
(for Angular Cards only), and Sass, you can perform deeper template branding and customization with your
web developers, as desired.
Enable Lighting Web Components in the Classic Card Designer to turn on LWC features and generate a
Lightning web component instead of an Angular component to add to your Lightning or Community page.
See LWC Cards.

company 1267
OmniStudio
FlexCard Designer
With the FlexCard Designer, build cards without code using a drag interface and WYSIWYG editing. Drag
elements, such as data fields, actions, data tables, charts, icons, images, and so forth, onto a canvas to
build the layout of your card. Create the look and feel of the card with graphic user interfaces (GUIs) built
into the designer to style individual elements. See FlexCards.
From one action element, add actions that enable your users to update OmniScripts, pass data from an
OmniScript to a FlexCard, embed cards inside each other, trigger events, create event listeners, and more.
Because the FlexCard Designer is built with the Lightning Web Components programming model, the
saved and activated FlexCard generates an LWC component to add to your Lightning or Community page.
Getting Started with the Vlocity Cards Framework

Once you have read OmniStudio Basics, the fastest way to get started with the Vlocity Cards Framework is
to build a Service Console App. Your service console provides context for customer relationships, displays
the most common service requests, and launches guided interactions. See Building a Vlocity Service
Console App.
FlexCards
Build customer-centric, industry-specific UI components and applications on the Salesforce platform with
FlexCards. Display Salesforce object information along with distinct, clickable actions that change
according to the context in which they appear and based on the information that they contain. Create and
design FlexCards with the FlexCard Designer, a declarative tool with a drag interface, WYSIWYG editing,
and graphic user interfaces to style individual elements. See FlexCard Designer.
Required Versions
Creating UI components with FlexCards is all about sourcing the data and displaying and organizing the
returned information in a meaningful way.
Cards
The FlexCard component contains a combination of pertinent information and links to processes within a
specific context based on the data source provided.
An account FlexCard, for example, can include unique account information, such as:
• Status
• Creation date
• Company logo
• Closing a case

company 1268
OmniStudio
Each action can launch an OmniScript. Depending on the action type, an action can also update an
OmniScript, fire an event, open a web address or web app, display a flyout, or update a field values. See
Add an Action to a FlexCard.
Flyouts
You can design a card to launch an action that when clicked, opens a child card, Custom LWC, or an
OmniScript embedded in a popover or modal. A card flyout contains additional information and actions
related to the parent card. See Launch a Flyout from an Action on a FlexCard.
Data Sources
Choose from a number of data source options to retrieve data to display data from a Salesforce object or
API on your FlexCard. For a list of possible data source types, see FlexCards Data Source Reference.
Design and Layout

Build a FlexCard by dragging elements onto its canvas. Add data fields, action, data tables, charts, menus,
icons, images, and more. See Add Elements to a FlexCard.
Update the look of each element with the graphic user interfaces available in the Style panel when an
element is clicked. For example, to update the text for a data field, you can enter the name of a font, and
change the text color with a color picker interface. See Style FlexCard Elements.
Make your FlexCard responsive by setting widths for available viewport breakpoints. See Create
Responsive Elements on a FlexCard.
Publish Options
After activating your FlexCard, which generates a Lightning web component to add to a Lightning or
Community page, you can configure publishing options. For example, configure your component's icon, and
where your component is allowed to be published. See Configure Publish Options on a FlexCard.
Deploy FlexCards
After activating a FlexCard, you can add the generated LWC to a Lightning or Community page. See Add a
FlexCard to a Lightning Page. See Add a FlexCard to a Community Page.
FlexCard Designer
The FlexCard Designer is a declarative tool with a drag interface and WYSIWYG editing that makes it easy
to build user interface (UI) Lightning web components without code. Build interfaces rich in information and
with actions relevant to your customer's context. You can also create the look and feel of your FlexCard by
styling individual elements from graphic user interfaces (GUIs) built into the designer.
Required Versions
Available beginning with Vlocity Insurance and Health Summer '20.

company 1269
OmniStudio
Header (1), Canvas (2), Build panel (3), Properties panel (4), Style panel (5), Setup panel (6), Preview (7),
In-Product Help (8), Publish Options (9)
FlexCard Designer Highlights

With the FlexCard Designer, you can:
• Build your FlexCard on a wide and adjustable Canvas.

• Drag customizable elements from the Build panel onto the Canvas.
• Adjust the width of any element along a 12-column horizontal grid.
• Use the Action element to launch an OmniScript or Flyout, and trigger Custom or Pubsub Events, and
more.
• From the Style panel, customize the look and feel of your FlexCard by styling elements using a GUI to
choose the colors of texts, borders, and backgrounds, change the size of fonts and entire elements, and
make elements responsive.
• Create a new FlexCard and configure your data source with a step-through wizard.
• Use In-Product Help to learn about a property or an element without leaving the Designer.
• Configure FlexCard-wide settings from the Setup panel, such as required permissions, event listeners,
session variables, and more.
• Configure metadata values for your generated LWC and update its component SVG icon with the
Publish Options feature.
• Download on and off-platform FlexCard LWCs to view code and debug issues.
What's Next
Explore the FlexCard Designer. See Get to Know the FlexCard Designer.

company 1270
OmniStudio
Get to Know the FlexCard Designer

Get to know how the different parts of the FlexCard Designer work to build rich interfaces relevant to your
customer's context. The FlexCard Designer is a declarative tool with a drag interface and WYSIWYG
editing that makes it easy to build user interface (UI) Lightning web components without code.
See FlexCard Designer.
Header (1), Canvas (2), Build panel (3), Properties panel (4), Style panel (5), Setup panel (6), Preview (7),
In-Product Help (8), Publish Options (9)
Header (1)
In the Header, view basic metadata about your FlexCard such as Author, Current Version, and Status.
Perform actions related to your FlexCard, such as Preview, Clone, Activate, Export, Add Custom CSS,
create a New Version, and access a list of resources from a Help link. When the FlexCard is active,
download its LWC, Deactivate, and configure Publish Options.
Publish Options (9) enables you to configure your generated FlexCard LWC's metadata values, such as
where the component can be published, API version, description, and more. Also add your own custom
component SVG icon to identify your generated LWC in the Experience Builder for Communities and
Lightning App Builder for Lightning pages. See Configure Publish Options on a FlexCard.

company 1271
OmniStudio
Canvas (2)

company 1272
OmniStudio
Build your card by dragging elements from the Build panel into a state on the Canvas. Rearrange, clone,
delete, and adjust the widths of your elements as needed.
Test the responsiveness of your FlexCard with the Viewport Dropdown. See how elements are positioned at
different viewport breakpoints. See View a FlexCard at Different Viewport Breakpoints.

company 1273
OmniStudio
Build Panel (3)

company 1274
OmniStudio
Drag elements from the Build panel onto the Canvas to build the layout of your FlexCard. Drag all available
fields from a configured data source from the Fields list into a State. You can also add states to your
FlexCard, and embed Custom LWCs and reusable child FlexCards. See Add Elements to a FlexCard.

company 1275
OmniStudio
Properties Panel (4)

company 1276
OmniStudio
Configure element properties from the Properties panel when an element is selected on the Canvas. For
example, when a Field element is selected, you can update the Label, choose the data field value to
display, select the type of field it is, and more.

company 1277
OmniStudio
Style Panel (5)

company 1278
OmniStudio
Style your FlexCard elements from the Style panel using a GUI that updates the look of elements in real-
time. Configure backgrounds, sizes, borders, padding, margins, height, fonts, and responsiveness. See
Style FlexCard Elements.
For custom design needs, create and apply custom CSS. Create CSS classes with an in-product code
editor with Intellisense features such as code completion, contextual prompts, and a color picker. Apply
custom classes created from the editor or from any style sheet accessible to the FlexCard, or apply inline
CSS styles. See FlexCards Element Custom CSS.
Save style settings on an element to use on multiple elements on the FlexCard. See Create a Custom Style
for a FlexCard Element.

company 1279
OmniStudio
Setup Panel (6)

company 1280
OmniStudio
Configure global options from the Setup panel. See Set Up a FlexCard in the FlexCard Designer.
Update your data source. Apply custom permissions to limit access to your FlexCard. Track Custom Data
on elements with tracking enabled.
Enable Multi-Language and OmniScript Support, set Session Variables, create Event Listeners, and more.
Preview (7)
(A) Preview your FlexCard in real-time to test its design and functionality. See Preview a FlexCard.
(B) Preview how a FlexCard appears on different devices, such as mobile, desktop, and tablet with
the Viewport Dropdown. See
(C) Add Test Parameters to preview your FlexCard with different parameters, such as record Ids, and
pagination limits.

company 1281
OmniStudio
In-Product Help (8)
Find context-sensitive help specific to an element or property using the FlexCard Designer's in-product help
feature.
(A) Access in-line information about specific properties by hovering over tooltip icons.
(B) View detailed documentation about an element's or feature's purpose and functionality with slide-out
help trays.
What's Next
Get started building FlexCards with the FlexCard Designer. See Get Started with FlexCards. Then, Create
a New FlexCard.
Get Started with FlexCards

FlexCards provide a set of components for building customer-centric UI components and applications on
the Salesforce platform. Here are some key resources to help you navigate the FlexCard Designer and
guide you through common tasks, such as adding and styling elements, configuring data sources, adding
actions, and more.
Required Versions
• FlexCard Designer
With the FlexCard Designer, build dynamic, context-aware user interfaces using a drag UI with
WYSIWYG editing.
• Download FlexCard Sample DataPacks
Download sample DataPacks with configured FlexCard elements and feature implementations.

company 1282
OmniStudio
• FlexCards Context Variables

Provide context to data sources, actions, and other components on your FlexCard with global and local
context variables.
• FlexCard Setup Reference
Configure optional settings for your FlexCard in the Setup panel of the FlexCard Designer, such as
updating a data source, creating an event listener, adding session variables, and more.
• FlexCards Data Source Reference
Configure a data source on your FlexCard to retrieve data from a Salesforce object or an external
database.
• FlexCards Elements Reference
Add elements such as actions, states, data fields, and more to build your FlexCard.
• FlexCards Actions Reference
Add an action to your FlexCard to launch or update an OmniScript, navigate to a web page or
application, display a flyout, or fire an event.
• Style FlexCard Elements
Configure the look and feel of your FlexCard by styling individual elements and entire states.
• Configure Publish Options on a FlexCard
Define metadata values and update the SVG resource for your generated LWC from the FlexCard
Designer
• FlexCards Troubleshooting Considerations
Review troubleshooting tips for FlexCards.
Managed and Unmanaged Components in Managed Packages

Managed FlexCard components visible in the Lighting App and Community Builders and shipped in the
managed package in your org, work as-is. As in, you can add them to a Lightning or Community page
without having to use the FlexCard Designer.
NOTE
A Managed FlexCard component is a component included in an org like those included in
Express or vertical orgs on install. An Unmanaged FlexCard component is one you create.
If you want to modify the component, you must open the managed FlexCard in the FlexCard Designer. A
managed component opened in the FlexCard Designer triggers the creation of an unmanaged component,
which is an exact copy of the managed component. Changes to the FlexCard only affect the unmanaged
version because the managed version can never be modified.
Required Versions
Available beginning with Vlocity Health and Insurance Spring '21 .

company 1283
OmniStudio
Find Unmanaged Components in Lightning App Builder

In the Lightning App Builder, the managed version is visible under the Custom - Managed section of the
Components pane. The unmanaged version is visible under the Custom section of the Components
pane. Both have the same name unless you change the Master Label of the unmanaged version in the
Publish Options feature of the FlexCard Designer. See Define Metadata Values from the FlexCard
Designer.
Find Unmanaged Components in the Community Builder

In the Community Builder, both unmanaged and managed versions display next to each other in the
Custom section of the Lightning Components Pane. Both have the same name. To distinguish the
unmanaged component from the managed component, after activating the FlexCard in the FlexCard
Designer, update the Master Label with the Publish Options feature. See Define Metadata Values from
the FlexCard Designer.
Child and Parent Managed and Unmanaged Components

This table describes how the managed and unmanaged components work with child and parent FlexCard
components:
FlexCard Type Description

Child, Parent • A parent and child component works as-is unless opened in the FlexCard Designer
• When a managed component is opened in FlexCard Designer, an unmanaged component is generated as an
exact copy, and changes effect only the unmanaged component.
Child If a managed child component is opened in the FlexCard Designer, the parent component must also be opened in
the FlexCard designer, if it is managed, so that an unmanaged version is generated.
FlexCard Designer Changes and Enhancements

Changes in functionality affect how you must configure your FlexCard and how your FlexCard performs.
For information on unsupported features, see FlexCard Designer Considerations.
Beginning with Vlocity Insurance and Health Summer '20 , the FlexCard Designer enables you to preview
while you build dynamic context-specific user interfaces for customer interactions using a drag interface
with WYSIWYG editing. The FlexCard Designer is LWC only and does not support Angular. See FlexCard
Designer.
For latest changes and enhancements to the FLexCard Designer, see the releases notes.
Changes and Enhancements for Vlocity Health and Insurance Spring '21
New and Enhanced Functionality
Feature Description Refere

Add an Apex Class Add an Apex class permissions checker to ensure only authorized users can Adding an Apex Class
Permissions Checker access Vlocity Open Interface classes (APIs) from a remote action on a Permissions Checker
FlexCard.
Chart Aspect Ratio Adjust the proportions of a Chart element with the Aspect Ratio, Maintain FlexCard Chart Element
Aspect Ratio, and Chart Height features in the FlexCard Designer. Aspect Ratio

company 1284
OmniStudio
Feature Description Refere

Download a Download a FlexCard LWC to debug and inspect issues. Download a FlexCard
FlexCard LWC LWC from the FlexCard
Designer
Download Off- Download an Off-Platform FlexCard LWC to view code and debug. Download an Off-
Platform LWC Platform FlexCard LWC
from the FlexCard
Designer
Generate When you open a managed component in the FlexCard Designer, it generates Managed and
Unmanaged an unmanaged version of the component that can be modified as needed. Unmanaged
Components from a Components in
Managed Managed Packages
Component
Limit User Access to For managed packages you must add the Limit User Access to a
a FlexCard in a vlocityRequiredPermissionCheck Apex class to use the FlexCard FlexCard with Custom
Managed Package Designer's Required Permissions feature to limit user access based on Permissions
custom permissions.
Notification to Get notified when your Remote Site Settings need to be updated to grant Update Remote Site
Update Remote Site access to your org domains to enable LWC features such as Preview. Settings to Preview Your
Settings FlexCard
Use Absolute Date If the Field Type property of a Field element is Date, you can prevent Add a Field to a
converting the date based on the timezone when the Format property is FlexCard
updated.
Use User Locale For On the Field element, if your FlexCard is used on an application accessible Add a Field to a
Formatting across different locales, enable Use User Locale For Formatting to use the FlexCard
logged-in user's locale to determine the format of your date, time, and
currency.
Changes and Enhancements for Vlocity Health and Insurance Summer '20
Changes to UI Names
FlexCards Designer Vlocity Cards Designer Reference

(LWC Enabled)
Custom data source Sample data source Configure a Custom Data Source on a FlexCard
Event Action with Custom and Pubsub Action Trigger a Custom Event from an Action on a FlexCard, Trigger
Pubsub subtypes. a Pubsub Event from an Action on a FlexCard
Navigate Action Custom Action Navigate from a FlexCard with the Navigate Action
Publish Options Show XML Interface Configure Publish Options on a FlexCard
Repeat Records Loop Settings Disable Record Looping on a FlexCard
Test Paramaters Test Data Source Settings Preview a FlexCard
Functionality FlexCard Designer Vlocity Cards Designer (LWC Reference

Enabled)
Build a Card with Build a FlexCard with elements, such Build a Vlocity Card Layout with Build a FlexCard with
Elements as Fields, Datatables, Menus, Actions, Cards. the FlexCard
Custom LWCs, and more. Designer

company 1285
OmniStudio
Functionality FlexCard Designer Vlocity Cards Designer (LWC Reference

Enabled)
Custom LWC Add a Custom LWC as an element by Enable Custom LWC on a state. Embed a Custom
dragging it onto the canvas from the LWC Inside a
Build panel. FlexCard
Deploy LWC LWC is automatically generated on Click Deploy to updated changes to n/a
Preview and on Activate. your card, see the latest preview,
and create the Lightning web
component to add to a Community or
Lightning page.
Flyout Create a flyout from an Action element Enable and configure a flyout from a Launch a Flyout from
dragged onto a state. state. an Action on a
FlexCard
Include User Accessing information about the Enable returning information about FlexCards Context
Information logged-in user is enabled by default. the logged in user from the data Variables
Use the User global context variable in source of a card and layout with the
Design view, and see it rendered in Include User Information feature.
Preview.
Preview in Design Preview elements inside states on the Preview in Preview mode only. Add Elements to a
View canvas while in Design view. FlexCard
Viewport Dropdown View FlexCard at different viewport Preview how a Layout looks on View a FlexCard at
in Design View breakpoints in Design view. different pages and mobile devices in Different Viewport
Preview only. Breakpoints
Features Unique to the FlexCard Designer
Functionality Description Reference

Add an Event Listener Add an event listener to the FlexCard. Add an Event Listener to a FlexCard
Add SVG Resource Add a custom component SVG icon from the FlexCard Add a Custom Component SVG Icon to a
Designer. FlexCard
Add Test Parameters in Add test paramaters in Preview mode. Preview a FlexCard
Preview
Adjust Element Widths Manually adjust the width of an element, such as a Adjust the Width of an Element on a
Field or Action, on the canvas. FlexCard
Child FlexCard Embed a Child FlexCard as an element Inside a Embed a FlexCard Inside Another FlexCard
FlexCard
Custom Event Add a custom event action to an element. Trigger a Custom Event from an Action on a
FlexCard
Data Source Test Result View test data source results as a table. Test Data Source Settings on a FlexCard
Table
Enable Tracking Enable tracking on Action and Child FlexCard Enable Tracking on a FlexCard
elements.
Export Export your FlexCard from inside the FlexCard Export a FlexCard
Designer.
In-Product Help Find context-sensitive help specific to an element or FlexCard Designer: In-Product Help
property inside the FlexCard Designer.
Multi-Language Support Enable Multi-Language Support to make all field labels Enable Multi-Language Support on a
in the designer dynamic. FlexCard
Reload Action Reload a FlexCard from an action. Add a Reload Action to a FlexCard
Remove Action Create action that removes records on a FlexCard. Add a Remove Action to a FlexCard

company 1286
OmniStudio

Responsive Elements Make elements responsive from a interface in the FlexCards Element Responsiveness
FlexCard Designer.
Set Values Action Create an action that updates the data field values on Add an Action to Update Field Values on a
a FlexCard. FlexCard
Style Style FlexCards from an interface in the FlexCard Style FlexCard Elements
Designer. Or add custom CSS classes and inline
classes.
Track Custom Data Track custom data to publish with OmniAnalytics. Track Custom Data on a FlexCard
Update Data Source Update a data source from an action. Add an Action to Update a Data Source on
Action a FlexCard
Update OmniScript Update an OmniScript from a FlexCard. Update an OmniScript from a FlexCard
Action
See Also
FlexCard Designer Considerations

The FlexCard Designer doesn’t support all functions, features, and data sources available in the Vlocity
Cards Designer. For information on changes and enhancements, see FlexCard Designer Changes and
Enhancements.
Designer.
Unsupported Data Sources
• Dual (available for Angular Cards only)
Unsupported Features
• Smart Actions
• Add Metatags
• Templates
• Add Filter
• Edit Mode State
• Add Custom Page in Preview
• Edit JSON
• Refresh Preview
• Add Properties to a Target Name
• 'Copy to Clipboard' when viewing test data

company 1287
OmniStudio
See Also
Download FlexCard Sample DataPacks

Download sample FlexCard DataPacks with configured FlexCard elements and settings to import to your
org. For example, download a FlexCard DataPack with a configured Datatable element. Or download a
DataPack
Required Versions
Feature Description Reference Download

Pass Data from An LWC OmniScript that passes data to Download a Sample demoPassDataLWCOStoFC.json
an LWC embedded FlexCards in three ways: by DataPack that
OmniScript to passing an object node with a data set; by Passes Data from
an Embedded passing the recordId; and by passing a an LWC OmniScript
FlexCard Parent object. to a FlexCard
Custom Event A FlexCard with an Event Listener that Download a Sample demoParentChildCustomEvent.json
Action listens for a Custom Event from its Custom Event
embedded child FlexCard. The child DataPack
FlexCard's Custom Event action updates
a data field value on the parent when
clicked.
Datatable A FlexCard that displays a grouped, Download a Sample demoDatatable.json
searchable, and sortable Datatable Datatable DataPack
element.
Event Listener Add an event listener that listens for an Download a Sample demoEventListener.zip.
event and executes an action in Event Listener
response. DataPack
Pass Data to a Embed a reusable FlexCard as a child Download a Sample demoEmbedChildFlexCard-VMP.zip
Child FlexCard inside the state of a parent FlexCard to Child FlexCard
pass data from the parent to the child. DataPack
Pubsub Event A FlexCard with three action elements Download a Sample demoPubsubEvent.json.
Action that trigger events that update data field Pubsub Event
values. DataPack
Toggle Element A FlexCard displaying all Toggle element Download a Sample demoToggleDisplayActionUpdate.json
types, with Update Data Source enabled Toggle DataPack
on two elements and a Set Values Card
Action configured on one element.
Update Prefill an OmniScript when a user clicks Download a Sample demoPrefillUpdateOmniScriptAction.zip.
OmniScript an Update OmniScript action from a Update OmniScript
Action FlexCard embedded in the OmniScript. Action DataPack
Includes the FlexCard and the
OmniScript.
See Also
• Data Migration with Vlocity DataPacks

company 1288
OmniStudio
Build a FlexCard with the FlexCard Designer

With the FlexCard Designer create, build, design, test, and activate a FlexCard before publishing it to a
Lightning or Community page. Use a drag interface with WYSIWYG editing to preview while you build
dynamic context-specific user interfaces for customer interactions.
FlexCard Designer Workflow Diagram

company 1289
OmniStudio
Create a New FlexCard

• Step through a four-step configuration wizard to create a new FlexCard. See Create a New FlexCard.
• Configure basic settings such as title, name, author, description, and optionally enable the ability to
embed the FlexCard inside another FlexCard.
• Select and configure a data source, and where applicable, add test data to populate fields and preview
the FlexCard at run time.
Configure Setup Options

Configure card-wide options, such as adding an event listener, adding session variables, disabling record
looping, limiting user access, and updating data source settings, and more. See Set Up a FlexCard in the
FlexCard Designer.
Add, Configure and Style Elements

• Add and configure elements, such as fields, states, actions, and other components on a FlexCard. See
Add Elements to a FlexCard.
• Add styles for each element such as background color and image, border, padding, and margin. Set an
element's height. Update the look of supported text fields by adding custom classes. Create and apply
custom classes and inline styles. And more. See Style FlexCard Elements.
• Enable an element's width to change when the viewport updates. See Create Responsive Elements on a
FlexCard.
Preview FlexCard
Preview your FlexCard's appearance and functionality before publishing it to a Lightning or Community
page. See Preview a FlexCard.
Activate FlexCard
Activate your FlexCard to publish it to a Lightning or Community page. See Activate a FlexCard.
Configure Publish Options

Define metadata values and set a custom component SVG icon for the generated FlexCard LWC. See
Configure Publish Options on a FlexCard.
What's Next
Deploy your generated FlexCard LWC from the Lightning App Builder to a Lightning page or from the
Experience Builder to a Community page. See Add a FlexCard to a Lightning Page. See Add a FlexCard to
a Community Page.
See Also
• FlexCard Designer Changes and Enhancements
• FlexCard Designer Considerations
Create a New FlexCard

Configure basic settings and data source options when creating a new FlexCard in the FlexCard Designer.
After creating a new FlexCard you can update additional options and start building your user experience.

company 1290
OmniStudio
Designer.
Configure Basic Settings
1. From the FlexCards tab, click New.

2. In the New FlexCard step, enter the Name of your FlexCard following required naming conventions.
See FlexCard Naming Conventions.
3. Select a Theme for your FlexCard. Select Lightning to use SLDS (Salesforce Lightning Design
System), or Newport to use the Newport Design System.
NOTE
You cannot change the theme once set. You will need to clone the FlexCard to change
the theme.
4. Update the Author.
NOTE
You cannot change the author once set. You will need to clone the FlexCard to
change the author.
5. (Optional) Update the Title. The title is used to find your generated FlexCard LWC after activation in
the Lightning App Builder and Community Builder.
6. (Optional) Enable Is Child Card to embed the FlexCard inside another FlexCard. See Embed a
FlexCard Inside Another FlexCard.
7. (Optional) Enter the Description visible on the FlexCards home page.
8. Click Next.
Configure Data Source
1. In the Select Data Source Type step, select a data source type to retrieve data from a Salesforce
object or an external database. See FlexCards Data Source Reference.
2. Click Next.
3. In the Select Data Source step, configure the data source properties. For example, if you selected a
DataRaptor as your data source type, select an active DataRaptor, configure input parameters, and
additional options. See FlexCards Data Source Properties.
4. Click Next.
Enter Test Input Parameters
1. To enter a test parameter as a key/value pair:

company 1291
OmniStudio
• If a Run-Time Variable has been added from the previous Select Data Source Type step, add the
Test Value.
• For each new variable, click + Add, and enter these properties:
1. Enter a Run-Time Variable, such as recordId. See FlexCards Context Variables.
2. Enter a Test Value, such as an Account record Id.
2. To drill down through the JSON data to pass a specific dataset to the FlexCard, enter the JSON path in
the Result JSON Path field. For example, enter Account.Cases to return data from the Cases node
only.
3. Click Fetch.
4. View a Table of the returned Test Response.
5. (Optional) Click JSON to view the returned results as JSON.
6. Click Save.
What's Next
Configure additional options. See FlexCard Setup Reference.
See Also
• Add Elements to a FlexCard

• Preview a FlexCard
• Activate a FlexCard
• Add a FlexCard to a Lightning Page
• Add a FlexCard to a Community Page
Add an Action to a FlexCard

Add an action to a FlexCard to launch or update an OmniScript, navigate to a web page or application,
display a flyout, fire an event, or update data field values. For example, add an action that when clicked,
displays the contact information, in a window, for the Account page the FlexCard is on.
See FlexCards Actions Reference.
1. In the FlexCard Designer, drag the Action element from the Build panel into a state on the canvas.
2. (Optional) From the Properties panel, update the element name in the Element Name field.
3. Select the type of action to execute from the Action Type dropdown. For example, to launch an
OmniScript, select OmniScript. See FlexCards Actions Reference.
4. To configure settings specific to the type of action selected, see FlexCards Action Properties.
5. To disable tracking events, unselect Enable Tracking.
6. (Optional) To update the visible label for the action, enter a new label in the Label field.
7. (Optional) To update the action icon, from the Icon field, perform one of these tasks:
• Enter the name of the icon, such as utility:arrowdown. See Salesforce Lightning Design
System.
• Click the search icon in the input field, and perform one of the following tasks:
• Click to select an icon from the list available, and click Save.

company 1292
OmniStudio
• Search for an icon in the search field, click an icon to select it, and click Save.
8. (Optional) To show an icon without text, check Show Only Icon.
9. (Optional) To show a label without an icon, check Hide Icon.
10. (Optional) To display the action link as a button:
a. Check Display As Button.
b. Select a style option from the Variant dropdown. For a description of each variant, see Variations.
11. (Optional) To add conditions that must be met for the element to display, see Add Conditions to a
FlexCard Element.
What's Next
(Optional) To style your element, click Style to open the Style panel, and see Style FlexCard Elements.
Add a Click Event Action to a FlexCard Element

Enable an element on a FlexCard to perform an action when clicked. Supported elements include Image,
Block, Icon, and Toggle.
1. From the FlexCard Designer, select a supported element on the canvas to add an action to. Or, drag a
supported element from the Build panel into a state on the canvas
2. From the Properties panel, click + Add Action.
3. Select the type of action to execute from the Action Type dropdown. For example, to launch an
OmniScript, select OmniScript. See FlexCards Actions Reference.
4. To configure settings specific to the type of action selected, see FlexCards Action Properties.
5. Click Save.
What's Next
Preview your FlexCard. See Preview a FlexCard.
FlexCards Actions Reference

Select from multiple ways to execute an action from a FlexCard. Create an action to launch an OmniScript,
navigate to a web page or application, display a flyout, fire an event, and more.
See Add an Action to a FlexCard.
Action Type Description Example

Name
Card Perform Card level actions, such as reload, remove, update data Add a Reload Action to a FlexCard
source, and set values.
Custom Event Fire a Custom Event to notify the parent FlexCard of an event Trigger a Custom Event from an
occurring. Action on a FlexCard
Flyout Display additional information from a Child Card, OmniScript, or Launch a Flyout from an Action on a
Custom LWC in a window or popover. FlexCard
Navigate Add actions directly on a card by selecting a Target URL or a Navigate from a FlexCard with the
PageReference Type that enables navigation within Lightning Navigate Action
Experience, within Communities, or to an external web address
OmniScript Launch an OmniScript from a FlexCard. Launch an OmniScript from a
FlexCard

company 1293
OmniStudio
Action Type Description Example

Name
PubSub Event Fire a PubSub Event to notify another component on a page or Trigger a Pubsub Event from an
application of an event occurring. Action on a FlexCard
Update Update an OmniScript from a FlexCard embedded as a custom LWC Update an OmniScript from a
OmniScript in an OmniScript. FlexCard
Vlocity Action Launch Vlocity OmniScripts, components, web pages, or external Add a Vlocity Action to a FlexCard
applications from a reusable Vlocity Action.
See Also
• FlexCards Action Properties

• FlexCards Action Style Properties
FlexCards Action Properties

Action element properties are configurable from the Properties panel in the FlexCard Designer when you
select an Action element. With the Action element, create an action to launch an OmniScript, navigate to a
web page or application, display a flyout, fire an event, and more.
See FlexCards Actions Reference. See Add an Action to a FlexCard.
Common Action Type Properties

These properties are shared by all Action Types.
Property Description Reference

Action Type Select the type of action to execute. FlexCards Actions Reference.
Conditions Add a condition that must be met for the element to display. Add Conditions to a FlexCard
Element
Display As Button Check to display the action as a button. n/a
Element Name The name of the element as seen on the canvas. Used to FlexCard Naming Conventions
distinguish one element from another as you build your FlexCard
in the designer. Is used only within the designer.
Enable Tracking Enable click-based event tracking through OmniAnalytics. Track Enable Tracking on a FlexCard
the UI Action event.
Hide Icon Check to hide the icon and only show the label. n/a
Icon Enter the name of the icon, such as utility:down, or click n/a
into the field to search for an icon.
Label Enter a visible label for the element. n/a
Show Only Icon Select to show an icon without a label. n/a
Variant Select from predefined SLDS styles to change the appearance of n/a
the element.
Card Action
These properties are unique to the Card Action.
Type Select the type of action to launch.

company 1294
OmniStudio
Card Action Types

This table lists descriptions for the available Card Action Types.
Type Description
Reload Reloads the FlexCard.
Remove Removes a card from the FlexCard component. For example, use for notifications and alerts.
Set Values Updates field values.
Update Data Source Changes the data source, or updates parameters of an existing data source.
Event Action
These properties are unique to the Event Action. See Trigger a Custom Event from an Action on a
FlexCard. See Trigger a Pubsub Event from an Action on a FlexCard.
Bubbles Check to enable the event to bubble up through the DOM.
Channel Name Enter a channel name for the pubsub event.
Composed Check to enable the event to pass through the shadow boundary.
Event Name Enter the name of the custom event.
Event Type Select an event type.
Input Parameters Enter parameters to pass contextual data to the event as key/value pairs.
Flyout Action
These properties are unique to the Flyout Action. See Launch a Flyout from an Action on a FlexCard.
Attributes Set attributes available from the flyout's component. For example, if an OmniScript requires a ContextId
be set, enter ContextId as Key and {recordId} as Value.
Data Node To pass parent data to the Child FlexCard, select a data node.
Flyout Select the component to display in the flyout.
Flyout Type Select the type of component to display.
Layout Type Select a theme for the flyout.
Open Flyout In Select the flyout's container type. When enabling a flyout as a clickable event on an element such as a
Block or Menu element, this feature defaults to modal and is disabled because popover positioning cannot
be controlled.
Reset Component On Resets the component to its on load state when the flyout closes.
Close
Navigate Action
These properties are unique to the Navigate Action. See Navigate from a FlexCard with the Navigate
Action. See PageReference Types.
Property Description Target

Action Name Enter the name of the action. App
Api Name Enter the API name of the app. App

company 1295
OmniStudio
Property Description Target

App Target The app that you’re navigating to. Pass either the appId or App
appDeveloperName to the appTarget.
App Type The standard or custom app available from the App Launcher. App
Article Url The value of the urlName field on the target Knowledge Article
KnowledgeArticleVersion record. The urlName is the article's
URL.
Community Page Name The unique name of the Lightning community page. The value for Community Named Page
name is the API Name value for a supported page.
Component Name The Lightning component name in the format Component
namespace__componentName.
Custom Tab Name The unique name of the custom tab. Navigation Item
Input Parameters Enter parameters to pass contextual data to the action as key/ Component, Login,
value pairs. Navigation Item
Object API Name The API name of the standard or custom object. For custom Object
objects that are part of a managed package, prefix the custom
object with ns__, where ns is your org's namespace.
Open Target In Select whether to open the target page in the current window or a All
new tab/window.
Page Name The unique name of the page. Named Page
RecordId Enter the record Id of the record to navigate to. App
Record Object API Name The API name of the record’s object. Record
Relationship Object API The API name of the object that defines the relationship. Record Relationship
Name
Target Select the PageReference type. All
Target Action Enter a valid action name to call. Login, Object, Record,
Record Relationship
Target ArticleType Enter the API name of the article type. Knowledge Article
Target Id Select a ContextId from the data source. Record, Record Relationship
Target Relationship The API name of the object’s relationship field. Record Relationship
URL The URL of the page you’re navigating to. Web Page
OmniScript Action
These properties are unique to the OmniScript Action. See Launch an OmniScript from a FlexCard.
Context ID Select a data field to use as the ContextId, such as {'AccountId'}.
Input Parameters Enter parameters to pass contextual data to the action as key/value pairs.
Layout Type Select a theme for the layout.
OmniScript Select the OmniScript to launch.
Open Target In Select whether to open the target page in the current window or a new tab/window.
Visualforce Page Override the default Visualforce Page that displays the OmniScript.
Update OmniScript Action

These properties are unique to the Update OmniScript Action. See Update an OmniScript from a
FlexCard.

company 1296
OmniStudio
Input Parameters Enter the OmniScript data fields to update.
Parent Node Point to a specific data node in the OmniScript JSON to update. Select from the merge fields available from the
data source or enter a data node manually.
Vlocity Action
These properties are unique to the Vlocity Action. See Add a Vlocity Action to a FlexCard.
Action Name Enter a visible name for the action.
Context ID Select a data field to use as the ContextId, such as {'AccountId'}.
Fetch Action Name From Datasource Select the action name from a data source field.
Input Parameters Enter parameters to pass contextual data to the action as key/value pairs.
Object Select the sObject.
Open Target In (Disabled by default) Opens target in the current window or a new tab/window.
Navigate from a FlexCard with the Navigate Action

Navigate to an external web address, or within Lightning Experience, Lightning communities, or the
Salesforce mobile app from a Navigate Action element on a FlexCard. For example, allow a user to
navigate to a Policy record page by clicking an action element on a FlexCard that lists Account Policies.
NOTE
To create an email link, see Create an Email Link from a FlexCard Navigation Action.
1. From the FlexCard Designer, drag an Action element into a state.

2. Select Navigate from the Action Type dropdown.
3. Select a page reference type from the Target dropdown.
4. To configure settings and options unique to your selected Target, see Navigate Action.
5. (Optional) To open the target page in a new tab or window, select New Tab/Window from the Open
Target In dropdown.
6. (Optional) To configure other options common among all Action properties, see FlexCards Action
Properties.
What's Next
To style your action element, click Style to open the Style panel, and see FlexCards Action Style
Properties.
Create an Email Link from a FlexCard Navigation Action

Enable your user to send an email from a link. Create an email link with the Navigate action element to
open your user's default mail program.

company 1297
OmniStudio

2. Select Navigate from the Action Type dropdown.
3. Select Web Page from the Target dropdown.
4. Enter a mailto link in the URL field. For example, enter mailto:[email protected]. See All
About mailto: Links.
5. To configure settings and options unique to your selected Target, see Navigate Action.
6. (Optional) To open the target page in a new tab or window, select New Tab/Window from the Open
Target In dropdown.
Properties.
What's Next
Properties.
Add a Vlocity Action to a FlexCard

Add a reusable action to a FlexCard with a Vlocity Action element. Vlocity Actions launch OmniScripts,
components, web pages, or external applications.
See Vlocity Actions.

3. Select Vlocity Action from the Action Type dropdown.
4. To select the sObject to perform the action on, click into the Object field.
5. To select an Action Name from the data source as a merge field, click to enable Fetch Action Name
From Datasource.
6. To select the Vlocity Action, click into the Action Name field.
If Fetch Action Name From Datasource isn’t selected, select from a list of Vlocity Actions associated
with the sObject.
7. (Optional) Click into the Context ID field to select a context Id, such as AccountId.
8. (Optional) To pass contextual data as a key/value pair, click + Add New next to Input Parameters,
and perform the following tasks:
a. Enter a variable name in the Key field.
b. Enter the variable value in the Value field.
Properties.
What's Next
Properties.
Launch a Flyout from an Action on a FlexCard

Create a flyout to display additional information when a user clicks an action on a FlexCard. For example, a
FlexCard that displays Account information can display the Primary Contact's name and email address in a
flyout.

company 1298
OmniStudio
CAUTION
When embedding a component, confirm that it isn’t called multiple times. See Fix Cyclic
Redundancy When Embedding FlexCard Components.

2. Select Flyout from the Action Type dropdown.
3. From the Flyout Type dropdown, select Child Card, Custom LWC, or OmniScripts as the type of
component to display inside the flyout.
4. Click into the Flyout field and select a component to display in your flyout.
NOTE
The component must be active to select it from the list of available components.
5. (Optional) To use the data source from the parent FlexCard, click into Data Node and select what data
to send to the child.
Node Description
{records} Send all data.
{records[#]} Send all the data of a specific record. {records[0]} = first record. {records[1]} = second record. And so on.
{record} Send just the current record's data, such as when Repeat Records is disabled in the Setup panel or only
one record is requested from a query.
{record.FieldName} Send the record object that belongs to the State. For example, if {record.Product} is an object or array
with additional data, select it. But, if you want to send a data field, use the Attributes property.
{record.attributes} Send all Attributes for the current record.
6. (Optional) To set attributes available from the flyout's component to use on the child component, click +
Add New next to Attributes.
a. Enter the name of an attribute in the Key field, such as ContextId from an OmniScript
component whose ConetxtId must be passed to the FlexCard.
b. In the Value field, enter a value as a string or merge field, such as {Id}.
c. In the child component, use the {Parent} context variable in supported fields. For example,
enter {Parent.Id} in the child component's data source Input Map Value field to use the
parent's Account Id as the child's contextId.
7. (Optional) Select whether to display the flyout as a window or popover from the Open Flyout In
dropdown.
NOTE
When enabling a flyout as a clickable event on an element, this feature defaults to
Modal and is disabled because popover positioning can’t be controlled.

company 1299
OmniStudio
8. (Optional) To reset the component to its load state when the flyout closes, select Reset Component
On Close.
Properties.
What's Next
Properties.
Launch an OmniScript from a FlexCard

Launch an Angular or LWC OmniScript from an OmniScript Action element on a FlexCard. For example,
launch a form that updates Account information based on the account Id passed from the FlexCard to the
OmniScript.

2. Select OmniScript from the Action Type dropdown. See FlexCards Actions Reference.
3. Click into OmniScript and select the OmniScript to launch.
4. (Optional) From the VisualForce Page dropdown, select a VisualForce page to display the
OmniScript. For example, if you have a custom template for your OmniScript, select the custom page
you created.
5. (Optional) To update the OmniScript's layout, select Lightning or Newport from the Layout Type
dropdown.
6. In the Context ID field, enter the sObject's context Id associated with your OmniScript. For example, if
your OmniScript updates account information, your context Id is an account record ID variable from the
data source, such as {AccountId}.
7. (Optional) If you selected an LWC OmniScript, from the Console Tab Label field, enter the visible label
of the console tab. For example, Update Account.
8. (Optional) If you selected an LWC OmniScript, from Console Tab Icon, select an icon to display in the
subtab of a console after the OmniScript Action link is clicked. For example, select
standard:account for an OmniScript that updates account information.

company 1300
OmniStudio
10. (Optional) Select whether to open the OmniScript in the current tab or a new tab, select from the Open
Target In dropdown.
Properties.
What's Next
Properties.
Launch an OmniScript from an OmniScript Action on a FlexCard in Lightning Experience

On a Lightning Experience page, launch an OmniScript from an OmniScript Action on a FlexCard. Launch
an LWC or an Angular OmniScript.
1. Add and configure the OmniScript Action element on a FlexCard. See Launch an OmniScript from a
FlexCard.
2. Add the FlexCard to a Lightning page. See Add a FlexCard to a Lightning Page.
See Also
• Reload a FlexCard After Updating an LWC OmniScript in a Flyout
Launch an OmniScript from an OmniScript Action on a FlexCard in a Community

Launch an OmniScript from an OmniScript Action on a FlexCard in a Community. Launch an LWC or an
Angular OmniScript.
Before You Begin

Add and configure the OmniScript Action element on a FlexCard. See Launch an OmniScript from a FlexCard.

company 1301
OmniStudio
Launch an LWC OmniScript
1. Create a community page with the URL /lwcos. Enter any name as the Community page name. See
Creating Custom Pages with Community Builder.
2. Add a Vlocity LWC OmniScript Wrapper component to the /lwcos Community page. See Launch
an LWC OmniScript with LWC OmniScript Wrapper.
3. Add the card to the Community page that launches the action, such as the Home page or Record
Detail page. See Add a FlexCard to a Community Page.
Launch an Angular OmniScript
1. Create a Community page with the URL /os. Enter any name for the page name. See Creating
Custom Pages with Community Builder.

company 1302
OmniStudio
2. Add a Vlocity OS Player component to the /os page. See Configuring the Vlocity OS Player Lightning
Component.
3. Add the card to a Community page from where you want your action to launch, such as the Home
page or Record Detail page. See Add a FlexCard to a Community Page.
Update an OmniScript from a FlexCard

Create an action that updates an OmniScript's data JSON from the FlexCard embedded in the OmniScript.
You can embed a FlexCard inside an OmniScript as a Custom LWC.
See Embed FlexCards in an LWC OmniScript.
Example 8. Example: Suspend Mobile Device Plan

You want to build a FlexCard that enables a customer to start the process to suspend their mobile device
plan.
First, you create the FlexCard that displays the customer's available devices. Each device has a name, an
image and a Toggle element.
Next, you configure an Update OmniScript Action on the Toggle element to pass the value of the action
(true or false), and other device or account information, to the OmniScript.
Finally, you build the OmniScript that walks a customer through the process of selecting the device and
suspension date range, before submitting the request.

company 1303
OmniStudio
Before You Begin

• Create an OmniScript. See Create an LWC OmniScript or Create an LWC OmniScript in the LWC OmniScript Designer.

2. Select Update OmniScript from the Action Type dropdown.
3. (Optional) To point to a specific data node in the OmniScript JSON, click into the Parent Node field
and a node from the list of merge fields or enter the data node manually.
For example, from the example above enter data to point to the parent node listing all records.
4. To pass the data to update, click + Add New next to Input Parameters.
a. In the Key field, enter the name of the field to update. For example, in the above example, enter
records.
b. In the Value field, enter the new value from the FlexCard's data source. For example, in the above
example, enter the {records} context variable to pass all Asset records. See FlexCards Context
Variables.
Properties.
6. To style your action element, click Style to open the Style panel, and see FlexCards Action Style
Properties.
7. Enable OmniScript Support:
a. Click Setup to open the Setup panel.
b. Select OmniScript Support.
Download a Sample Update OmniScript Action DataPack

Download a sample DataPack that prefills data on an OmniScript when a user clicks the Update Action on
a FlexCard embedded in the OmniScript. See Download a Sample Update OmniScript Action DataPack.
What's Next
Embed the FlexCard inside an LWC OmniScript. See Embed FlexCards in an LWC OmniScript.
See Also
Download a Sample Update OmniScript Action DataPack

Download a sample Update OmniScript DataPack to import into your org. Create an action that updates an
LWC OmniScript's data JSON from the FlexCard embedded in the OmniScript.
See Update an OmniScript from a FlexCard.
The sample DataPack demonstrates how to prefill data in an OmniScript when a user clicks an Update
OmniScript action from a FlexCard embedded in the OmniScript. The FlexCard action passes data to the
OmniScript.

company 1304
OmniStudio
What's Included
• A demoPrefillUpdateOSActionFlexCard FlexCard with an Update OmniScript action that passes data

source values for Id and Name to an OmniScript in a data node.
• A demoPrefillUpdateOmniScriptOS LWC OmniScript with the embedded FlexCard and a text block
with merge fields to display the incoming data.
Download and Import the DataPack
1. Download the DataPack here: demoPrefillUpdateOmniScriptAction.zip.

2. Import the DataPack. See Import a FlexCard.
3. If you didn't activate the FlexCard or OmniScript during the import process:
1. From the FlexCards home tab, click the demoPrefillUpdateOSActionFlexCard FlexCard, select
the checkbox, and click Activate.
2. From the Vlocity OmniScript Designer home tab, click the demoPrefillUpdateOmniScriptOS
OmniScript to open the LWC OmniScript Designer, and click Activate.
4. Click Preview in the OmniScript Designer.
See Also

Trigger a Custom Event from an Action on a FlexCard

Trigger a Custom Event from an Action element on a child FlexCard or another element to notify the parent
FlexCard of the event occurring. Custom Events are used to communicate between a child and its parent.
For example, add a Custom Event action on an embedded child FlexCard, that when clicked updates a
Field value on the parent FlexCard.
See Communicate with Events.
You can also trigger a custom event from an element that notifies the FlexCard of the event occurring and
performs an action accordingly. For example, add a Toggle element to a FlexCard that when clicked,
updates Field values on the same FlexCard it's on.

2. Select Event from the Action Type dropdown.
3. Select Custom from the Event Type dropdown.
4. Enter the name of the event in the Event Name field.
IMPORTANT
Don’t use these reserved names: reload, updatedatasource, remove.
5. (Optional) To enable the event to pass through the shadow DOM boundary, select Compose. See
Configure Event Propagation.

company 1305
OmniStudio
6. (Optional) To enable the event to bubble up through the DOM, select Bubbles. See Configure Event
Propagation.
Properties.
Properties.
Download a Sample Custom Event DataPack

Download a sample FlexCard DataPack with a configured Custom Event Action. See Download a Sample
Custom Event DataPack.
What's Next
See Also
• Add an Event Listener to a FlexCard
Download a Sample Custom Event DataPack

Download a sample Custom Event DataPack to import into your org. Trigger a Custom Event from an
Action element on a child FlexCard or an element to notify the parent FlexCard of the event occurring.
See Trigger a Custom Event from an Action on a FlexCard.
The sample DataPack demonstrates how to update a data field on a FlexCard from an Action element in an
embedded child FlexCard.
What's Included
• A child FlexCard, demoChildFlexCardCustomEvent, with an Action element that triggers a Custom

Event, named triggerparent, that passes a parameter to the parent FlexCard listening for the event.
NOTE
Activate the child FlexCard to see it in the parent.
• A parent FlexCard, demoParentFlexCardCustomEvent, with the following features:

• A Field element populated from an SOQL Query data source.
• An Event Listener configured in the Setup panel listens for the triggerparent custom Event from
the child FlexCard.

company 1306
OmniStudio
Import DataPack
1. Download the DataPack here: demoParentChildCustomEvent.json.
3. If you didn't activate the demoChildFlexCardCustomEvent FlexCard during the import process, from
the FlexCards home tab, click the FlexCard name, select the checkbox, and click Activate. The child
FlexCard must be active to view inside a parent.
4. Click the Trigger Parent action element on the demoParentFlexCardCustomEvent FlexCard to see
the Custom Event in action.
See Also
Trigger a Pubsub Event from an Action on a FlexCard

Trigger an event from an action element to notify another component on a page or application of an event
occurring. For example, update a list of products on one FlexCard from a filter on another FlexCard.
See Communicate Across the DOM.
Example 9. Example: Update Product List

An admin must create a page that displays a filterable list of products. The admin creates a Product
List FlexCard and a Filter FlexCard. Use Field and Image elements to display product information on
the Product List FlexCard. The Filter FlexCard enables users to select from a number of filters, such as
price and category, to update the list of products.
The Filter FlexCard has Toggle elements and a Pubsub Event Action element. Each Toggle element has
a Set Values action that updates the data values with a user-selected value. The Pubsub Event Action
displayed as an Apply button, has an update event, which sends the updated data values as input
parameters to the Product List FlexCard.
When a user selects a filter, such as <$2000, and clicks the Apply button from the Filter FlexCard, only
products that cost less than $2000 are visible in the Product List FlexCard.

2. Select Event from the Action Type dropdown.
3. Select Pubsub from the Event Type dropdown.
4. To set the channel in which the event is posted, click into the Channel field. Select from the list of
merge fields if the channel is available from the data source. Otherwise, enter a channel name
5. Enter the name of the event in the Event Name field.
IMPORTANT
Don’t use these reserved names: reload, updatedatasource, remove.

company 1307
OmniStudio
Properties.
Properties.
Download a Sample Pubsub Event DataPack

Download a sample FlexCard DataPack with action elements configured to trigger pubsub events, and an
event listener to listen for the events. See Download a Sample Pubsub Event DataPack.
What's Next
Create an event listener on a FlexCard to listen for your event. See Add an Event Listener to a FlexCard.
See Also
• Add an Event Listener to a FlexCard
Download a Sample Pubsub Event DataPack

Download a sample Pubsub Event DataPack to import into your org. Trigger an event from an Action
element to notify another component on a page or application of an event occurring.
See Trigger a Pubsub Event from an Action on a FlexCard.
The sample DataPack demonstrates how to trigger events that update the values of data fields.
What's Included
• A demoPubSubEvent FlexCard with the following elements and features:

• An Action element configured to trigger a Pubsub Event named setvalue that passes a new value for
the Field element to the FlexCard.
• An Icon element configured to trigger a Pubsub Event named setvalue that passes a new value for
the Field element to the FlexCard.
• An Event Listener configured in the Setup panel that listens for the setvalue event and updates the
Field value based on parameters passed from the event.
NOTE
The Record Index is set to 1 so that only the Field value in the second record
returned from the custom data source is updated.

company 1308
OmniStudio
1. Download the DataPack here: demoPubsubEvent.json.

3. From the FlexCards home tab, click the demoPubSubEvent to open the FlexCard Designer, and click
Preview. From here you can click actions to test events.
See Also

Add an Action to Update a Data Source on a FlexCard

With a Card Action, create an action that changes the data source, or updates parameters of an existing
data source. For example, create an action that updates the pagination limits on a list of returned records.

2. Select Card from the Action Type dropdown.
3. From the Type dropdown, select Update Data Source.
4. Select a data source type from the Data Source Type dropdown.
IMPORTANT
If you select SOQL Query and SOSL Search, you can’t change the data source for
security reasons. However, you can update the parameters.
5. To configure a new data source, see Configure a Data Source on a FlexCard.

6. To update parameters from an existing data source, enter new Parameters or update values.
For example, in a SOQL Query with a limit set to {Params.limit}, update the Params.limit value
from 10 to a lower number to show fewer records at a time.
Properties.
What's Next
Properties.
Add an Action to Update Field Values on a FlexCard

With a Card Action, create an action that updates specific field values on a FlexCard. For example, allow
your customer service reps to update the status of a case to closed when the case is resolved.

3. From the Type dropdown, select Set Values.
4. To add the fields to update, in the Set Values section, click + Add New.

company 1309
OmniStudio
5. In the Key field, enter the name of a field returned from a data source.
6. In the Value field, enter a new field value as a string or merge field, such as New Value or {Name}.
Properties.
What's Next
Properties.
Add a Reload Action to a FlexCard

With a Card Action, create an action that reloads a FlexCard. For example, create a FLexCard that listens
for an event from another FlexCard and reloads itself when the event is fired.
See Add an Event Listener to a FlexCard.

3. From the Type dropdown, select Reload.
Properties.
What's Next
Properties.
Add a Remove Action to a FlexCard

With a Card Action, create an action that removes a specific record on a FlexCard or removes the entire
FlexCard. The data record is only removed from the FlexCard and not from the database it's pulled from.
The FlexCard is only removed from the page it's viewed from, and not permanently deleted.

3. From the Type dropdown, select Remove.
4. To remove a specific record, create an Event Listener, and enter a Record Index. See Add an Event
Listener to a FlexCard.
Properties.
What's Next
Properties.
Add Elements to a FlexCard

Build a FlexCard in the FlexCard Designer by dragging data fields, states, actions, reusable FlexCards,
custom LWC, data tables, images, and other elements from the Build panel onto the canvas. Each element
can be styled and properties configured within the designer.

company 1310
OmniStudio
Designer.

company 1311
OmniStudio
Figure 23. FlexCard Structure Inside FlexCard Designer

company 1312
OmniStudio
Before You Begin

1. Create a new FlexCard, and configure basic settings and a data source. See Create a New FlexCard.
2. Configure Setup options as needed. See FlexCard Setup Reference.
3. Learn how element sizing and responsiveness works in the FlexCard Designer. See FlexCards Element Responsiveness.
Add, Configure, and Style an Element
1. From the FlexCards tab, click a version of a FlexCard to open the FlexCard Designer.
2. (Optional) To adjust the width of the canvas while building your FlexCard, select a size from the canvas
size dropdown. See FlexCards Element Responsiveness.
3. To add an element to a state from the Build panel, perform one of these tasks:
a. To add an element from a search:
i. In the search field, enter the name of an element, such as Action, or a Field element, such as
Email.
ii. Drag the element from search results into a state on the canvas.
b. To add an element from the lists of available elements:
• To add data fields, perform one of these tasks:
• Click Fields, to reveal a list of data fields available from the data source, and drag one or
more fields into a state on the canvas.
• From the Elements list, drag the Field element into a state onto the canvas.
• To add other components such as an action, data table, menu, icon, custom LWC, and so forth,
drag the element from the Elements list into a state on the canvas. See FlexCards Elements
Reference.

company 1313
OmniStudio
NOTE
When you drag an element next to another element, it takes up the remaining with of
the container. For example, if you drag an Icon element next to a Field element whose
width is 10 parts of the 12 column grid, the Icon element will take up the remaining 2
columns. See FlexCards Element Responsiveness.
4. To configure the element, click the element to update its properties from the Properties panel.
TIP
To easily distinguish between elements, update the Element Name. When you hover
over or click an element on the canvas, the element name is viewable as a blue tab
with white text.
5. (Optional) To adjust the width of the element, hover over the square box on the right border until your
mouse pointer icon becomes a drag icon. Click and slide the square box right or left to increase or
decrease the width.

company 1314
OmniStudio
NOTE
To make the width of the element responsive to the viewport, see Create Responsive
Elements on a FlexCard.
6. (Optional) To style your element, click Style to open the Style panel, and see Style FlexCard Elements.
FlexCard Element.
8. (Optional) To add an additional state, drag the State element from the Elements list of the Build panel
onto the canvas, and follow steps 4 through 7. See Add a State to a FlexCard.
NOTE
Each FlexCard has a default state that cannot be deleted.
9. To rearrange, duplicate, or delete elements, see Arrange, Duplicate, and Remove Elements on a
FlexCard.
What's Next
See Also
• Define Metadata Values from the FlexCard Designer
• Add a Custom Component SVG Icon to a FlexCard

company 1315
OmniStudio
FlexCards Elements Reference

Select from a number of elements to add to your FlexCard to build your interactive customer interface. Add
elements such as data fields, actions, states, data tables, and more. See Add Elements to a FlexCard.
Element Element Description Element Properties Reference

Name
Action Renders text or a button that executes an action when clicked. See Add FlexCards Action Properties
an Action to a FlexCard.
Block Enables grouping elements inside a collapsible container. See Group FlexCards Block Properties
Elements Inside a Block on a FlexCard.
Chart Displays data as a chart. See Add a Chart to a FlexCard. FlexCards Chart Properties
Custom LWC Embeds a Custom LWC inside a FlexCard state. See Embed a Custom FlexCards Custom LWC Properties
LWC Inside a FlexCard.
Datatable Creates a tabular structure from the data provided. See Add a Datatable FlexCards Datatable Properties
to a FlexCard.
Field Displays the output from a data field. See Add a Field to a FlexCard. FlexCards Field Properties
FlexCard Embeds a FlexCard inside a state. See Embed a FlexCard Inside FlexCards Child FlexCard Properties
Another FlexCard.
Icon Displays a custom or Salesforce SVG icon. The icon can be linked to an FlexCards Icon Properties
action. See Add an Icon to a FlexCard.
Image Displays a custom image from a given URL. Upload an image, use an FlexCards Image Properties
image from your org's library, or use an external source. The image can
be linked to an action. See Add an Image to a FlexCard.
Menu Displays a list of actions as a dropdown menu. See Add a Menu to a FlexCards Menu Properties
FlexCard.
State Adds a state to a FlexCard. See Add a State to a FlexCard. FlexCards State Properties
Text Renders text and parses merge fields with a rich text editor. See Add a FlexCards Text Element Properties
Text Element to a FlexCard.
Toggle Trigger an action when a user selects a Toggle element. The value is FlexCards Toggle Properties
sent as a parameter to the action as true or false, or a comma-separated
list of user-selected options. See Trigger Actions with the Toggle
Element on a FlexCard.
Group Elements Inside a Block on a FlexCard

Combine logical groups of elements inside a collapsible container with the Block element on a FlexCard.
For example, group an Account's basic information together, and separately, group the account's Contact
information together.
Add Block Element

1. From the FlexCard Designer, drag a Block element from the Build panel into a state on the canvas.
3. (Optional) To enable the ability to collapse the block, check Collapsible.
• (Optional) To display a visible label for the collapsible block element, enter text in the Label field.
• (Optional) To show the block collapsed by default, click Collapsed By Default.
4. (Optional) To enable a click event on the block, click + Add Action. To configure action properties, see
FlexCards Action Properties.

company 1316
OmniStudio
FlexCard Element.
Add Elements Inside the Block
1. To add an element from the Build panel, drag a field from the Fields list, or an element from the
Elements list into the block element.
For example, drag address related Account fields into a block element, such as BillingCity,
BillingCountry, and so on.
NOTE
The Element Name of any new element added to a block is prepended with the word
Block until you update the name in the Properties panel.
2. To add an element into a block element from a state, click, hold, and drag the element into the block
element.
What's Next
See Also
• FlexCards Block Properties
FlexCards Block Properties

Block element properties are configurable in the Property Panel when you select a Block element in the
FlexCard Designer. With the Block element, combine logical groups of elements in a collapsible container.
See Group Elements Inside a Block on a FlexCard.

Add Action Make the element a clickable action. Add a Click Event Action to a
FlexCard Element
Collapsed By If selected, the block element is collapsed by default. n/a
Default
Collapsible Makes the block collapsible, hiding its content. n/a
Element
Element Name The name of the element as seen on the canvas. Used to distinguish FlexCard Naming Conventions
one element from another as you build your FlexCard in the designer. Is
used only within the designer.
Label Displays a visible label for the collapsible block element. n/a
See Also

company 1317
OmniStudio
Add a Chart to a FlexCard

Display data on a FlexCard as a chart with the Chart element. Select from bar, pie, donut, line, and radar
chart types.
Configured Bar Chart
2. Drag a Chart element from the Build panel into a state on the canvas.
4. (Optional) To display a title at the top of the chart, which is hidden by default, update these properties:
• In the Title field, enter a title.
• Deselect Hide Header.
5. From the Type dropdown, select the type of chart to display.
6. (Optional) To adjust your chart's proportions, update the Aspect Ratio. See FlexCard Chart Element
Aspect Ratio.
7. (Optional) To manually set the height, overriding the Aspect Ratio, enter a number in the Chart
Height field. The height is in pixels, such as 300px. You can enter just the number without the 'px'
suffix, such as 300.
NOTE
This feature is visible when the Maintain Aspect Ratio feature is disabled.
8. From the Label Node dropdown, select the field whose values are used to categorize the data, such
as Name to display Account names.
9. From the Value Node dropdown, select the field whose values are used to populate the chart, such as
AnnualRevenue.

company 1318
OmniStudio
IMPORTANT
The values must be numbers and have the same count as the field selected in Label
Node.
10. Select the color scheme for your chart from the Color Palette dropdown.
NOTE
Each color palette has up to 6 unique colors. If there are more than 6 values in your
chart, the colors repeat from the beginning.
FlexCard Element.
What's Next
See Also
• FlexCards Chart Properties
FlexCard Chart Element Aspect Ratio

You can adjust the proportions of a Chart element with the Aspect Ratio, Maintain Aspect Ratio, and Chart
Height features in the FlexCard Designer. Set the Aspect Ratio to adjust height relative to the width. Set
fixed proportions. Or, override the aspect ratio and set a fixed height.
The Aspect Ratio is the chart's width to height ratio. By default, the aspect ratio is 1, such as 1:1. The chart
width is always the maximum width available given the number of columns it spans on the 12-column grid
of the canvas in the designer. The height is proportionate to the chart's width. Adjusting the ratio adjusts the
height.

company 1319
OmniStudio
Default Aspect Ratio on a 7-column wide chart
To make the chart shorter, given the width of the element, increase the number of the Aspect Ratio. For
example, if the ratio is at the default 1, enter 2 to make the height about half the default height. In other
words, if the original width and height of a 7 column Chart element are 600px and 300px, and the aspect
ratio is 2 then the height is 150px, and the width remains the same.
Aspect Ratio 2 on a 7-column wide chart
To make the chart taller, given the width of the element, decrease the number of the Aspect Ratio. For
example, if the ratio is at the default 1, decrease it to .5 to make the height twice the default height. In other
words, if the original width and height of a 7 column Chart element are 600px and 300px, and the aspect
ratio is .5, the height is 600px and the width remains the same.

company 1320
OmniStudio
Aspect Ratio .5 on a 7-column wide chart
To set fixed proportions, you can enable the Maintain Aspect Ratio feature. When this feature is enabled,
given the width, the height becomes exactly X times the width. For example, if the Aspect Ratio is 1, the
width and height are exactly the same so that your chart is a square. If the Aspect Ratio is 2, the height is
half of the width. In other words, if the width of a 7-column Chart element is 600px, and the aspect ratio is 2,
then the height is 300px.
Aspect Ratio Maintained on a 7-column wide chart
To override the Aspect Ratio, manually set the height for your chart with the Chart Height feature. This
feature is visible when Maintain Aspect Ratio is disabled. The height is in pixels, such as 300px.

company 1321
OmniStudio
Aspect Ratio disabled, fixed height set on a 7-column wide chart
Here is a summary of how width and height are determined with each feature:
Feature Width Height Examples

Aspect Full width of the element container X-times the default • 1 = Default width (full width of the space the
Ratio (as determined by the number of height. X is determined element occupies on the canvas) and
columns the element occupies on by the ratio entered. proportionate height
the canvas in the designer) • 2 = Default width, and about half the default
height
• .5 = Default width, and about twice the
default height
Maintain Full width of the element container X-times the width. X is • If Aspect Ratio is 1, the width and height are
Apect (as determined by the number of determined by the ratio the same.
Ratio columns the element occupies on entered. • If Aspect Ratio is 2, the height is half the
the canvas in the designer) width.
• If Aspect Ratio is .5, the height is twice the
width.
Chart Full width of the element container The number, in pixels, 300, or 300px.
Height (as determined by the number of entered in this field.
columns the element occupies on
the canvas in the designer)
See Also
• Add a Chart to a FlexCard

• FlexCards Chart Properties
FlexCards Chart Properties

Chart element properties are configurable in the Property Panel when you select a Chart element in the
FlexCard Designer. With the Chart element, display data as a chart and enable users to perform actions
within the chart. See Add a Chart to a FlexCard.

company 1322
OmniStudio

Aspect Ratio Enter a number to set the height relative to the width. For example, if the Aspect FlexCard Chart Element
Ratio is 2, and the default width and height is 600px and 300px, the width remains Aspect Ratio
the same and the height is half the default height at 150px.
Chart Height Manually set the height of the chart, which overrides the Aspect Ratio and is FlexCard Chart Element
visible when the Maintain Aspect Ratio feature is disabled. Aspect Ratio
Color Palette Select a predefined color scheme. n/a
Conditions Add a condition that must be met for the element to display. Add Conditions to a
FlexCard Element
Cutout Enter the size of the donut chart hole by percentage. n/a
Percentage
Element Name The name of the element as seen on the canvas. Used to distinguish one element FlexCard Naming
from another as you build your FlexCard in the designer. Is used only within the Conventions
designer.
Hide Header Show or hide the chart's title. n/a
Label Node Select the field whose values are used to categorize the data, such as Name of n/a
Accounts.
Maintain Aspect Maintain the aspect ratio so that the width and height are a fixed proportion. For FlexCard Chart Element
Ratio example, if the Aspect Ratio is 2, and the width is 600px, then the height is Aspect Ratio
300px.
Title Displays a title above the chart when Hide Header is disabled. n/a
Type Select the type of chart to display. n/a
Value Node Select the values to populate the chart, such as AnnualRevenue for Accounts. n/a
See Also

• Add Conditions to a FlexCard Element
Embed a FlexCard Inside Another FlexCard

Embed a reusable FlexCard as a child inside the state of a parent FlexCard. The child FlexCard can have
its own data source. Or, the parent can override the child's data source with its own data source. The
parent can also pass specific data to the child, such as a record Id to use as the child data source's
contextId.
CAUTION
Before You Begin

• Create a child FlexCard. See Create a New FlexCard.

company 1323
OmniStudio
1. In the FlexCard Designer, drag the FlexCard element from the Build panel into a state.
3. Click into the FlexCard Name field, and select a reusable FlexCard to embed. That is, a FlexCard
where Is Child Card is enabled.
IMPORTANT
If your parent FlexCard is OmniScript Support enabled, only an OmniScript
Support enabled child FlexCard can be embedded. See Enable OmniScript Support
on a FlexCard.
4. (Optional) To use the data source from the parent FlexCard instead of the child's data source:
a. Click into the Data Node field, and select an available data node to pass to the child FlexCard.
Node Description
{records} Send all data.
{records[#]} Send all the data of a specific record. {records[0]} = first record. {records[1]} = second record. And
so on.
{record} Send just the current record's data, such as when Repeat Records is disabled in the Setup panel
or only one record is requested from a query.
{record.FieldName} Send the record object that belongs to the State. For example, if {record.Product} is an object or
array with additional data, select it. But, if you want to send a data field, use the Attributes
property.
b. Open the child FlexCard selected in the FlexCard Name field, and enter data from the parent
FlexCard:
• As a merge field: Enter data fields available from the FlexCard as merge fields, such as {Name},
in any supported input field such as the Text element.
• As an element: Configure the child FlexCard with the same data source as the parent. This way
the same data fields available in the parent appear in the child. Drag Field elements, Datatable
elements, and so forth, onto the canvas.
5. (Optional) To pass attributes from the parent FlexCard to a child FlexCard, in the Attributes section:
a. Click + Add New.
b. In the Attribute field, enter a name for the attribute to pass, such as postalcode or Id.
c. Click into the Value field and select a merge field, such as {BillingPostalCode} or {Id}. Or
enter text.
d. Open the child FlexCard selected in the FlexCard Name field, and enter the {Parent} context
variable in a supported field.
Example 10. Example: Use Merge Fields to Display Data or as a ContextId

Enter {Parent.postalcode} in a Text element to display the postal code from the parent.
Enter {Parent.Id} in the data source's Input Map Value field to use the parent's record object Id
as the value of the child's contextId.

company 1324
OmniStudio
Parent FlexCard: Attributes are defined and passed in the parent FlexCard on the FlexCard
Element.
Child FlexCard: Use attributes passed from the parent FlexCard in supported fields in the child
FlexCard.
IMPORTANT
To pass a parent attribute to a grand child, pass the {Parent} to the child, then pass
it again from the child to the grand child.

company 1325
OmniStudio
NOTE
If your child FlexCard displays multiple records and you want to show them side by
side instead of stacked, see Display Records Side-By-Side on a FlexCard.
Download a Sample Embed Child FlexCard DataPack

Download a sample DataPack with parent FlexCards passing data to embedded child FlexCards. See
Download a Sample Child FlexCard DataPack.
What's Next
See Also
• FlexCards Child FlexCard Properties
FlexCards Child FlexCard Properties

FlexCard element properties are configurable in the Property Panel when you select a FlexCard element in
the FlexCard Designer. With the FlexCard element, embed a reusable FlexCard as a child inside the state
of another FlexCard. See Embed a FlexCard Inside Another FlexCard.

Attribute Define a key that represents an attribute. n/a
Attributes Pass data from the parent to the child FlexCard by creating an attribute and Embed a FlexCard Inside
assigning it a value, such as a data merge field. Another FlexCard
FlexCard Element
Data Node To use the data source from the parent FlexCard, select a data node. n/a
Element Name The name of the element as seen on the canvas. Used to distinguish one element n/a
from another as you build your FlexCard in the designer. Is used only within the
designer.
Enable Tracking Enable event tracking through OmniAnalytics. Track Card Load, Card Unload and Enable Tracking on a
State Load events. FlexCard
FlexCard Name Select the child FlexCard to display. n/a
Select State View a state from the FlexCard Name selected. n/a
Value Select the data to pass for the defined Attribute. n/a
See Also

Download a Sample Child FlexCard DataPack

Download a sample child FlexCard DataPack. Embed a reusable FlexCard as a child inside the state of a
parent FlexCard to pass data from the parent to the child. See Embed a FlexCard Inside Another FlexCard.

company 1326
OmniStudio
The sample DataPack demonstrates how to pass data in two ways. Pass specific data from the parent
FlexCard as an attribute to a child FlexCard with its own data source. Pass all records from the parent
FlexCard to the child FlexCard which has no data source.
What's Included
Pass Parent Attributes to the Child FlexCard

Show Account information on the parent FlexCard and Contact information on the embedded child
FlexCard.
The demoEmbedChildPFCpassAttribute parent FlexCard in the DataPack includes the following

features:
• A SOQL Query data source gets Account information.

• A Field element displays the Account name.
• An embedded child FlexCard passes the Account Id from the parent as an attribute named AccountId.
The demoEmbedChildCFCpassAttribute child FlexCard in the DataPack includes the following features:
• A list of Contacts based on the Account Id of the parent FlexCard it's embedded into.
• A data source uses the {Parent.AccountId} context variable as the context Id to get the list of
Contacts.

company 1327
OmniStudio
Pass All Parent Records to the Child FlexCard

Pass data from the parent to a child FlexCard that's used as a template to display Account Cases in a
specific way.
The demoEmbedChildPFCpassRecords parent FlexCard in the DataPack includes the following features:
• The Repeat Records feature is disabled in the Setup panel to use the parent card only as a container for
the child card. See Disable Record Looping on a FlexCard.
• A SOQL Query data source gets a list of an Account's Cases.
• A FlexCard element passes all parent records through the {records} Data Node to the child FlexCard.
The demoEmbedChildFCpassRecords child FlexCard in the DataPack includes the following features:
• A Text element displays Case information as merge fields.

• The card state is 6 columns wide to display Cases side-by-side. See Display Records Side-By-Side on a
FlexCard.
Download and Import
1. Download the Vertical Managed Package DataPack here: demoEmbedChildFlexCard-VMP.zip


company 1328
OmniStudio
See Also
• FlexCards Child FlexCard Properties
Embed a Custom LWC Inside a FlexCard

Embed an LWC OmniScript, a generated FlexCard LWC, or a custom LWC, inside a FlexCard state. A
wrapper encases the Custom LWC element and is fed data from your FlexCard's data source.
For example, if you have a carousel with custom styling and functionality, you can embed it in a FlexCard
state. Then, configure the component's custom attributes, such as thumbnaillimit and mode.
CAUTION
Before You Begin

• Create and activate a FlexCard, LWC OmniScript, or custom LWC component to generate an LWC to embed. To create an LWC
OmniScript, see Create an LWC OmniScript or Create an LWC OmniScript in the LWC OmniScript Designer.
1. In the FlexCard Designer, drag a Custom LWC element from the Build panel into a state on the canvas.
3. Click into the Custom LWC Name field, and select a custom LWC to embed.
NOTE
The Custom LWC is rendered in Preview only.
NOTE
The names of Custom LWCs created in the FlexCard Designer are appended with cf.
For example, if your Child FlexCard name is AccountCases, the Custom LWC name
is cfAccountCases.
4. To set the value of an attribute available to the component:

a. Next to the Attributes label, click +Add.
b. Enter the attribute name in the Attribute field, such as thumbnaillimit.

company 1329
OmniStudio
IMPORTANT
The Name of a custom LWC attribute must match the custom LWC attribute's
markup name. For example, the targetType attribute from the NavigateAction
LWC must be written as target-type.
c. Click into the Value field and select a merge field such as {Number}, or enter text such as 5.
FlexCard Element.
What's Next
See Also
• FlexCards Custom LWC Properties
FlexCards Custom LWC Properties

Custom LWC element properties are configurable in the Property Panel when you select a Custom LWC
element in the FlexCard Designer. With Custom LWC element, embed an LWC OmniScript, a generated
FlexCard LWC, or a custom LWC, inside a FlexCard state. See Embed a Custom LWC Inside a FlexCard.

Attributes Set the values for attributes defined in the selected custom LWC. n/a
Attritbute Enter the name of the attribute defined in the selected custom LWC. n/a
FlexCard Element
Custom LWC Select the custom LWC to embed. n/a
Name
Element Name The name of the element as seen on the canvas. Used to distinguish one FlexCard Naming
element from another as you build your FlexCard in the designer. Is used only Conventions
within the designer.
Value Enter the value of the Attribute. n/a
See Also

Add a Datatable to a FlexCard

Display a tabular structure of the data fetched from a data source on a FlexCard. For example, display
Account Cases as a sortable table.

company 1330
OmniStudio
Configured Datatable
1. In the FlexCard Designer, drag a Datatable element from the Build panel into a state on the canvas.
3. To update columns, click the pencil icon next to Column to launch the Add DataTable Columns
modal.
• To add an available data field column, click Add Column.
• To delete a data field column, click the trash icon of the data field to remove.
• To update data field column labels, click into a field under Field Label.
• To update the ability to sort a specific data field column, change the value for Is Sortable to false or
true. Is Sortable must be selected under Attributes in the Properties panel.
• To update the ability to search a specific data field, change the value for Is Searchable to true or
false. Is Searchable must be selected under Attributes in the Properties panel.
• To update the type of data for a specific data field column, such as currency, date, number, and so
on, update Type.
• To update the ability to edit the value of a data field, change the value for Is Editable to true or false.
Cell Level Edit must be checked under Attributes in the Properties panel.
• To update the ability for a user to hide or show specific data field columns, change the value for Is
User Selectable to true or false. User Selectable Column must be checked under Attributes in the
Properties panel.
• To update whether a data field is hidden or shown by default, change the value for Is Visible to true
or false. If this property is set to false and Is User Selectable is set to true, the user can make the
column visible.
4. Click Save to save updates and close modal.
5. (Optional) To add pagination to the data table:
1. To set how many records per page to display, enter a number in the Page Size field.
2. To set a max number of pagination links to display, enter a number in the Page Limit field.
6. (Optional) To enable the ability to delete a row based on a data field value returning as false, enter the
name of the data field column in the Row Delete Dependent Column.
For example, let's say your table is a list of account cases and has a record field IsEscalated whose
value is either true or false. When a record's IsEscalated value is false, a user can delete the record. If
true, the trash icon is disabled and a user cannot delete the record.

company 1331
OmniStudio
IMPORTANT
Row Delete must be enabled, and the column must have a boolean (true or false)
value.
7. (Optional) To configure additional Attributes, see FlexCards Datatable Properties.

8. (Optional) To group a table by a data field type:
a. Enter the name of the data field to group records by in the Group By field. For example, to group
Account Cases by the Status data field, enter Status.
b. (Optional) Configure these properties:
• To sort across all groups, select Sort Across Groups.
By default, sorting happens within each group.
• To remove the space below and above the group name, select Hide Extra Column.
• To collapse or expand the grouped rows by default, select Active Groups.
• To add a class to each group, enter a defined class in the Group Wrapper Class field. See Apply
Custom CSS to an Element on a FlexCard.
• To update the order in which each group is sorted, select from the Group Order dropdown.
FlexCard Element.
10. (Optional) To style your element, click Style to open the Style panel, and see FlexCards Datatable
Style Properties.
Download a Sample Datatable DataPack

Download a sample FlexCard DataPack with a configured Datatable. See Download a Sample Datatable
DataPack.
What's Next
See Also
• FlexCards Datatable Properties
FlexCards Datatable Properties

Datatable element properties are configurable in the Property Panel when you select a Datatable element
in the FlexCard Designer. With the Datatable element, display a tabular structure of the data fetched from a
data source. See Add a Datatable to a FlexCard.

Column Update the data fields to populate the table and set options for columns, such as n/a
type, selectability, and so on.
FlexCard Element

company 1332
OmniStudio

designer.
Records Specify the record data that populates the table. Defaults to {records}. n/a
Attributes
Cell Level Edit Enable support for cell-level inline-editing. Select which columns are editable from the Column property.
Draggable Enable the ability to rearrange rows by dragging them up or down.
Extra Class Enter a class appended to the container of the element. Select from a class defined in the Add Custom
CSS feature of the FlexCard Designer or any style sheet available to the FlexCard.
Fire Event On Delete Fire a delete custom event when a row is deleted.
Confirm
Hide Table Header Hide the table header.
Is Searchable Enable the ability to search all column values. Limit which columns are searchable from the Column
Property.
Is Sortable Enable support for sorting all columns. Limit which columns are sortable from the Column Property.
Page Limit Specify how many page navigation links to add to pagination. The Page Size property must be enabled.
Page Size Enable pagination by specifying how many records to display on each page. If using Group By, the
Page Size is determined by the number of groups instead of the number of rows.
Row Delete Enable the ability to delete a row from the FlexCard. The record is not deleted in the database.
Row Delete Dependent Delete a row based on a data field value returning as false. The field must have a boolean (true or false)
Column value and Row Delete must be enabled.
Row Level Edit Enable support for row-level inline-editing.
Show Confirm Modal Display a confirmation modal before a row gets deleted.
Before Row Delete
User Selectable Column Let users select which columns are visible. Select specific columns from the Column property.
User Selectable Row Add a checkbox at the beginning of each row to let users select a row.
Group Attributes
Active Groups Expand all groups.
Group By Group table rows by a data field.
Group Order Sort groups in ascending or descending order.
Group Wrapper Class Add a class to the wrapper surrounding each group name.
Hide Extra Column Remove the space below and above the group name.
Sort Across Groups Sort groups and rows within each group when a column head is clicked. By default, sorting happens within
each group when a column head is clicked. View functionality in Preview.
Column Properties
These properties are visible in the Add DataTable Columns modal when you click the Column property.

company 1333
OmniStudio
Field Label Update the name of the field column. By default, the field label is the Field Name.
Field Name Select the field column to display.
Is Sortable Select which fields are sortable. Is Sortable must also be enabled under Attributes in the Properties panel.
Is Searchable Select which fields are searchable from the search form. Is Searchable must also be enabled under Attributes
in the Properties panel.
Type Select the type of data the field column displays. For example, if an Account field name is AnnualRevenue,
select Currency.
Is Editable Select which field column a user can edit. Cell Level Edit must also be enabled under Attributes in the
Properties panel.
Is User Selectable Select which field columns a user an hide or show. User Selectable Column must also be enabled under
Attributes in the Properties panel.
Is Visible Select which field columns are hidden or visible by default. Use with Is User Selectable to enable users to
display hidden field columns.
See Also
• Download a Sample Datatable DataPack

Download a Sample Datatable DataPack

Download a sample Datatable DataPack to import into your org. A Datatable element lets you display a
tabular structure of the data fetched from a data source on a FlexCard. See Add a Datatable to a FlexCard.
The sample DataPack demonstrates how to configure a data table with common settings, such as
searchability, sortability, and more.

company 1334
OmniStudio
What's Included
A FlexCard with a DataTable element with the following features:
• Grouped by a data field.

• Searchable and sortable.
• Sortable across groups.
• Groups expanded.
• Row and cell-level editing.
• Draggable.
• Deletable row with confirmation upon deletion.
• Pagination.
• Repeat Records in Setup panel disabled.
• Custom data source.
1. Download the DataPack here: demoDatatable.json.

See Also
• FlexCards Datatable Properties


Display data fields returned from a data source on a FlexCard. For example, display Policy information for
an Account.
2. To add a data field, from the Build panel, perform one of these tasks:
• Click Fields to view the list of available data fields, and drag a data field into a state on the canvas.
• Drag the Field element from the Elements list into a state on the canvas.
4. (Optional) Enter a visible label in the Label field.
5. (Optional) Add placeholder text in the Placeholder field.
6. (Optional) To set a data type, such as text, currency, and so forth, select one from the Field Type
dropdown. The default is Text.
NOTE
To configure additional properties for your selected Field Type, see FlexCards Field
Properties.

company 1335
OmniStudio
IMPORTANT
If you select Date as a Field Type, and the field element is a string that represents a
date, make sure that the date value matches the user locale format. For example, if
your date value comes from a Custom data source such as is [{"DOB" :
"28-03-2015"}, and your locale is en_US, which has a M/D/YYYY format, because
months only go up to 12, the number 28 will not read properly. The final date will be
displayed incorrectly. Instead, if your application does not require localization, update
the format to match the string output, such as DD/MM/YYYY. Or select Text as a
Field Type.
7. If you dragged the Field element from the Build panel, in the Output field, click into the field and select
from the available data fields returned from the data source.
8. (Optional) When Date is selected for Field Type, you can enable Use Absolute Date to prevent
converting the date based on the timezone when Format is updated.
NOTE
When this feature is not enabled, the date may display one day ahead or behind, such
as 12/16/2020 or 12/14/2020 instead of 12/15/2020 if the logged-in user's timezone is
not the same as the timezone where the record was created.
IMPORTANT
Do not enable if Date is the Field Type and your field element returns a date as a
string, such as data from a Custom data source that looks like [{"DOB" :
"28-03-2015"}], and does not match the defined format. This will throw an error.
See the notice in Step 6.
9. (Optional) If your FlexCard is used on an application accessible across different locales, enable Use
User Locale For Formatting to use the logged-in user's locale to determine the format of your date,
time, and currency.
NOTE
By default, the FlexCard Author's user locale determines the format.

company 1336
OmniStudio
IMPORTANT
Do not enable if Date is the Field Type and your field element returns a date as a
string, such as data from a Custom data source that looks like [{"DOB" :
"28-03-2015"}], and does not match the defined format. This will throw an error.
See the notice in Step 6.
FlexCard Element.
11. (Optional) To style your element, click Style to open the Style panel, and see FlexCards Field Style
Properties.
What's Next
FlexCards Field Properties

Field element properties are configurable in the Property Panel when you select a Field element in the
FlexCard Designer. With the Field element, display data fields returned from a provided data source. See
Add a Field to a FlexCard.

FlexCard Element
Element Name The name of the element as seen on the canvas. Used to distinguish one element from FlexCard Naming
another as you build your FlexCard in the designer. Is used only within the designer. Conventions
Field Type Select the type of Field element to display. If you select Date, make sure the date n/a
value, such as 28/03/2015, matches the format of the user locale, such as DD/MM/
YYYY, otherwise the date displays incorrectly.
Output Select the data field to display. n/a
Placeholder Enter placeholder text. n/a
Field Type Properties

This table lists additional properties available for each Field Type.
Property Description Field Type Reference

Currency Enter a currency code to update the supported currency. Currency Currency Codes
Format Select a format for the date or date and time if the Field Type is Date, Date Date and Time
either Date or Date Time. By default, the FlexCard Author's user Time Formats
locale determines the format.
Locale Enter a locale code to update the supported language. Currency Supported
Languages
Mask Enter a string expression to limit the user's input. Number n/a
Use Absolute Enable to prevent converting the date based on the timezone. Date n/a
Date

company 1337
OmniStudio
Property Description Field Type Reference

Use User Locale If your FlexCard is used in an application accessible across All n/a
For Formatting multiple locales, enable to use the logged-in user's locale to
determine the format of your date, time, currency, and so on.
See Also

Add an Icon to a FlexCard

Display an SVG Icon on a FlexCard. Select from a Salesforce SVG icon or a custom action. You can also
link the icon to an action.
1. From the FlexCard Designer, drag an Icon element from the Build panel into a state on the canvas.
3. From the Type dropdown, select an icon type.
4. To configure a Custom icon, enter the source of the icon in the Source field.
5. To configure Salesforce SVG icon properties:
a. To select the icon, from the Icon field, perform one of the following tasks:
System.
b. (Optional) Select a style variant from the Variant dropdown.
6. (Optional) To update the size of the icon, select a new size from the Size dropdown.
7. To link the icon to an action, click + Add Action. To configure action properties, see FlexCards Action
Properties.
FlexCard Element.
9. (Optional) To style your icon element, click Style to open the Style panel, and see FlexCards Icon Style
Properties.
What's Next
See Also
• FlexCards Icon Properties
FlexCards Icon Properties

Icon element properties are configurable in the Property Panel when you select an Icon element in the
FlexCard Designer. With the Icon element, display a Salesforce SVG Icon or a custom icon on a FlexCard.
See Add an Icon to a FlexCard.

company 1338
OmniStudio

FlexCard Element
Element
Element Name The name of the element as seen on the canvas. Used to distinguish one FlexCard Naming Conventions
element from another as you build your FlexCard in the designer. Is used
only within the designer.
Extra Class Add an additional class to the element. n/a
Icon Enter the name of the Salesforce Icon. n/a
Image Source Enter the URL of a custom icon. n/a
Size Select the size of the icon. n/a
Type Select the type of icon to display. n/a
Variant Select from predefined SLDS styles to change the appearance of the n/a
element.
See Also

Add an Image to a FlexCard

Add an image to a FlexCard in the FlexCard Designer. With the Image element, upload an image from your
computer, use an image from a Salesforce library, enter a URL, or use a merge field from a data source.
Link the image to an action, add classes, and adjust the size of the image relative to the canvas size.
NOTE
All labels in the Properties panel have Custom Label support.
1. From the FlexCard Designer, drag an Image element from the Build panel into a state on the canvas.
3. Select the Image Source from one of these options:
• To display an image from an external source, enter the absolute URL of the image
IMPORTANT
If your image doesn't show, add the URL of the image to the CSP Trusted Sites list
in your org. If you're adding your FlexCard to a Community, you must add the URL
to the CSP Trusted Sites list. See Content Security Policy (CSP).
• To upload a file from your computer:

company 1339
OmniStudio
1. Click the search icon.

2. Click Upload Files and select an image file from your computer. Or drag a file from your
computer and drop it where it says Or drop files.
3. Click Save.
NOTE
Uploaded files are saved to your org's library of documents for reuse.
• To use a file from a library in your Salesforce CRM Content or Salesforce Files:
1. Click the search icon.
2. Select an image from the Select an Image from Content Document dropdown.
3. Click Save.
4. (Optional) To adjust the size of the image relative to the canvas size, select an option from the Size
dropdown.
NOTE
By default, Fit Content is selected, enabling the image to fill the container of the
Image element, or the container of a Block element if the image is inside a Block
element.
On the canvas, adjust the element size to fit your image as needed.
5. For accessibility, in the Alternative Text field, enter text describing the image.
6. (Optional) Enter a Newport, SLDS, or custom CSS class in the Extra Class field.
NOTE
By default, slds-image--card slds-align_absolute-center populate the
field.
7. (Optional) To display an image caption, enter text in the Title field.

8. (Optional) To style the image caption, enter a class in the Title Class field.
9. (Optional) To launch an action on click of the element, see Add a Click Event Action to a FlexCard
Element.
FlexCard Element.
What's Next

company 1340
OmniStudio
See Also
• FlexCards Image Properties
FlexCards Image Properties

Image element properties are configurable in the Property Panel when you select an Image element in the
FlexCard Designer. With the Image element, display an image on a FlexCard. See Add an Image to a
FlexCard.

Add Action Make the element a clickable action. Add a Click Event Action
to a FlexCard Element
Alternative Text For accessibility, enter text describing the image, which displays when the image is n/a
not available.
FlexCard Element
designer.
Extra Class Enter a class appended to the container of the element. Select from a class defined n/a
in the Add Custom CSS feature of the FlexCard Designer or any style sheet
available to the FlexCard.
Height Enter a value available to the height CSS property, such as 100px, 4rem, or a n/a
calc() function.
Image Source Enter the image source for the icon. Upload the icon here, select an image from your n/a
org's libraries, or enter a secure absolute URL from an external source.
Size Update the size of the image relative to the canvas size. By default, Fit Content is n/a
selected, enabling the image to fill the container of the Image element.
Title Enter an image caption. n/a
Title Class Enter a class for the image caption. n/a
Width Enter a value available to the width CSS property, such as 100px, 4rem, or a n/a
calc() function.
See Also

Add a Menu to a FlexCard

Create a menu from a list of actions on a FlexCard. Style the menu button, and each action in the menu's
dropdown. Add any action type available in the FlexCard Designer. See FlexCards Actions Reference.
Add and Configure Menu
1. From the FlexCard Designer, drag a Menu element into a state on the canvas.
3. To add an action to the menu, see Add Actions.
4. (Optional) In the Label field, enter the visible label of the menu button.

company 1341
OmniStudio
5. (Optional) To change the default menu button icon, from the Icon field perform one of the following
tasks:
System.
6. (Optional) To disable scrolling in the dropdown when there are more than 5 menu items, uncheck
Enable Overflow.
7. (Optional) To change the position of the dropdown menu, select a new position from the Dropdown
Position dropdown. The default is left.
8. (Optional) To change the size of the dropdown menu, select a new size from the Dropdown Size
dropdown.
9. (Optional) To select a style variant, select a new style from the Variant dropdown.
10. (Optional) To change the position of the icon in the menu button relative to the label, select a new
position from the Icon Position dropdown.
11. (Optional) To adjust the size of the icon in the menu button, select a new size from the Icon Size
dropdown.
FlexCard Element.
13. (Optional) To style your menu element, click Style to open the Style panel, and see FlexCards Menu
Style Properties.
Add Actions
For each new action item, perform these tasks:
1. Click + Add New Action.

2. Select a type of action to execute from the Action Type dropdown.
3. To configure action properties, see FlexCards Action Properties.
4. To update the position of the action icon relative to the label, select a new position from the Icon
Position dropdown.
5. To enable menu items to reflect status level notifications like Error, Success, and Warning, select the
class from the Status dropdown.
What's Next
See Also
• FlexCards Menu Properties
FlexCards Menu Properties

Menu element properties are configurable in the Property Panel when you select a Menu element in the
FlexCard Designer. With the Menu element, create a menu from a list of actions. See Add a Menu to a
FlexCard.

company 1342
OmniStudio

Add New Action Add actions to populate the menu. n/a
Element
Dropdown Position Select the positon of the dropdown relative to the menu button. n/a
Dropdown Size Select the size of the dropdown. n/a
Enable Overflow To disable scrolling in the dropdown when there are more than 5 menu n/a
items, disable this feature. Enabled by default.
Icon Select the icon to display. n/a
Icon Position Select position of the icon relative to the label. n/a
Icon Size Select the size of the icon. n/a
Status Select an SLDS style for your menu item. Configure from the modal when
you click on the Add New
Action property.
Variant Select from predefined SLDS styles to change the appearance of the n/a
element.
See Also

Add a Text Element to a FlexCard

Combine plain text and merge fields inside a rich text editor with the Text element in the FlexCard Designer.
Enter a merge field, such as data fields, or context variables, such as session variables. For available
context variables and their corresponding merge fields, see FlexCards Context Variables.
The Text element's rich text editor adds an HTML div for each text section to build the layout of the
element. Add SDLS and NDS classes and other formatting options to each div to style your text.
Add Text
1. In the FlexCard Designer, drag the Text element from the Build panel into a state on the canvas.
2. To update the default text, from the Properties panel, click into the rich text editor to override the
content.
3. (Optional) To add a new block of text, click return to create a new div.
4. (Optional) To add data field values, select from the Fields list in the rich text editor. You can also
manually add the field by entering the field name surrounded by single curly braces, such as {Type}.
5. (Optional) To add custom labels, enter the {Label.customLabelName} merge field anywhere in the rich
text editor. For example, to add a custom label for AccountName, enter {Label.AccountName}. See
Add Custom Labels to Supported Fields on a FlexCard.

company 1343
OmniStudio
6. (Optional) To add a context variable as a merge field, enter it any div. For example, enter
{User.userProfileName} to add the logged-in user's profile name. See FlexCards Context
Variables.
NOTE
The rendered User global context variable is visible at run time only, such as in
Preview or when FlexCard is published to a page.
7. (Optional) To undo a change, click the Undo icon.

8. (Optional) To redo an undone change, click the Redo icon.
FlexCard Element.
Style Text With the Rich Text Editor
1. To add NDS or SLDS classes to change the text style:

a. Click into a div in the rich text editor.
b. To adjust the size or style of the text, click the Paragraph dropdown, and select one or more
classes from Headers or Body section.
c. To change the color of the text, click the Paragraph dropdown, and select a class from the Color
section.
d. To remove a class, select the class again.
For SLDS class descriptions, see SLDS Text documentation.
2. To manually update the text size, weight, style, font, and color, select the text, then select from one of
the rich text editor's formatting options.
For example, to make the text bold, select text, and click the B icon.
3. To create a list, adjust alignment, or set indentation, click into a div, and select from the list, alignment,
or indentation formatting options.
For example, to add indentation, select the text, and select the Increase Indentation icon.
4. To clear formatting, select the text, and click the Clear formatting icon.
What's Next
(Optional) To style your element, click Style to open the Style panel, and see Style FlexCard Elements.
See Also
• FlexCards Text Element Properties

FlexCards Text Element Properties

Text element properties are configurable in the Property Panel when you select a Text element in the
FlexCard Designer. With the Text element, combine plain text and merge fields using a Rich Text Editor.
See Add a Text Element to a FlexCard.

company 1344
OmniStudio

FlexCard Element
designer.
See Also

Trigger Actions with the Toggle Element on a FlexCard

Trigger an action when a user clicks a toggle element on a FlexCard. Let a user pick between two states,
enable or disable an option, or select multiple options. When the element is clicked, its value is sent as a
parameter to the action as true or false, or a comma-separated list of user-selected options with the
{element.value} merge field.
You can also update the data source with the selected value of the Toggle element for all toggle types
except Checkbox Group and Checkbox Group Button.
Add and Configure Toggle Element
1. In the FlexCard Designer, drag a Toggle element from the Build panel into a state on the canvas.
3. From the Toggle Type dropdown, select the type of toggle element to use. See FlexCard Toggle
Element Type Reference.
4. To configure the selected toggle type, see FlexCards Toggle Properties.
5. (Optional) To disable the element, from the Disabled field, select from one of the following options:
• Select true.
• To disable to toggle element based on the boolean (true or false) value of a merge field, select the
merge field from the dropdown.
For example, on a FlexCard whose data source returns Cases, you can disable a toggle element if
the record's IsEscalated field is set to true.
NOTE
The merge field must have a boolean (true or false) value. If the value is a string,
Disabled returns false.
6. To configure the action triggered on click of the element, see Add an Action below.
7.
8. (Optional) To add a class to the element's container, enter a class in the Extra Class field.
FlexCard Element.

company 1345
OmniStudio
NOTE
If the selected Toggle Type is a Checkbox Button, see FlexCards Toggle Style
Properties.
Add an Action
To configure the action that gets triggered when the element is clicked:
1. Click Add Action.

2. To configure action properties, see FlexCards Action Properties.
3. To pass the toggle element's value as a parameter:
a. Click Input Parameters.
b. Enter any name in the Key field.
c. Enter {element.value} in the Value field.
NOTE
To pass the value to an action without Input Parameters, such as a Navigate action
whose target is a Web Page, enter the key/value pair as URL parameters. For
example, /apex?keyname={element.value}.
Download a Sample Toggle Element DataPack

Download a sample DataPack with configured Toggle elements. See Download a Sample Toggle
DataPack.
What's Next
FlexCard Toggle Element Type Reference

Select how to trigger an action when a user clicks a Toggle element on a FlexCard. Enable a user to pick
between two states, enable or disable an option, or select multiple options to trigger an action. See Trigger
Actions with the Toggle Element on a FlexCard.
Toggle Type Description Example

Checkbox Button Displays a checkbox styled as an icon that enables switching between two options, where
each state can display a unique icon. Configurable options include adding a visible label
next to the element.
Checkbox Group Displays a group of checkboxes with labels.

company 1346
OmniStudio
Toggle Type Description Example

Checkbox Group Displays a group of checkboxes styled as clickable textual buttons.
Button
Checkbox Toggle Displays a checkbox styled as an on/off switch that enables switching between disbaled and
enabled. Configurable options include displaying labels for each state.
Dual Stateful Diplays an icon button that enables switching between two options. Each state can display
Button a unique icon.
Stateful Button Displays an icon button that enables switching between selected and unselected options
when clicked, and a hover state on focus. Configurable options include adding a label and
unique icons for all three states, and adding a style variant, such as Brand.
Stateful Icon Displays an icon button that enables switching between two options. The same icon
displays for both states.
See Also
• Download a Sample Toggle DataPack

• FlexCards Toggle Properties
• FlexCards Toggle Style Properties
Download a Sample Toggle DataPack

Download a sample Toggle element FlexCard DataPack into import to your org. Trigger an action when a
user clicks a Toggle element on a FlexCard. See Trigger Actions with the Toggle Element on a FlexCard.
The sample DataPack demonstrates how the different toggle types look, and how to update data fields with
new values pass from the elements.

company 1347
OmniStudio
What's Included
The demoToggleDisplayActionUpdate FlexCard in the DataPack includes the following features:
• Displays all Toggle Types. See FlexCard Toggle Element Type Reference.
• Enables and configures the Checkbox Group, Checkbox Button, and Checkbox Toggle elements to
update the data source with new values. See FlexCards Toggle Properties.
• A Checkbox Group Button Toggle element with a Card action that updates a Field value. See Add an
Action to Update Field Values on a FlexCard.
1. Download the DataPack here: demoToggleDisplayActionUpdate.json.

See Also
• FlexCards Toggle Properties


company 1348
OmniStudio
FlexCards Toggle Properties

Toggle element properties are configurable in the Property Panel when you select a Toggle element in the
FlexCard Designer. Trigger an action when a user selects a Toggle element. See Trigger Actions with the
Toggle Element on a FlexCard.
Common Toggle Element Properties

These properties are shared by all Toggle element types.

Add Action Add an action that gets triggered when a user clicks the toggle element. Add a Click Event Action to a
FlexCard Element
Element
Element Name The name of the element as seen on the canvas. Used to distinguish one FlexCard Naming
element from another as you build your FlexCard in the designer. Is used only Conventions
within the designer.
Extra Class Enter a class appended to the container of the element. Select from a class n/a
defined in the Add Custom CSS feature of the FlexCard Designer or any style
sheet available to the FlexCard.
Toggle Type Set the type of toggle element to display. FlexCard Toggle Element
Type Reference
Toggle Element Properties
Property Description Type

Alignment Select whether to align each checkbox horizontally or vertically. Checkbox Group
Alternative Text Enter text for accessibility, visible when image is not present. Stateful Icon
Checked Set the toggle element to be checked by default. Stateful Icon, Checkbox Button,
Checkbox Toggle, Stateful Button, Dual
Stateful Button
Checked Icon Select the icon visible when the element is checked. Checkbox Button, Dual Stateful Button,
Name Stateful Button
Checked Label Select the label visible when the element is checked. Stateful Button, Dual Stateful Button,
Checkbox Toggle
Disabled Disable the toggle element. Or disable the toggle element based Stateful Icon, Checkbox Button,
on the value of a data field whose value returns true or false. The Checkbox Toggle, Stateful Button, Dual
field must have a boolean value. If the value returns a string, Stateful Button
Disabled is false.
Help Text Add text visible when user hovers over the help i icon. Stateful Icon, Checkbox Button,
Checkbox Group Button, Checkbox
Group, Checkbox Toggle
Icon Name Select the icon. Stateful Icon
Icon On Hover Select the icon visible on hover of the element. Stateful Button
Label Enter a visible label for the element. Stateful Icon, Checkbox Button,
Label On Hover Select the label visible on hover of the element. Stateful Button
Options Enter a key/value pair for each checkbox option. Checkbox Group, Checkbox Group
Button

company 1349
OmniStudio
Property Description Type

Required Make the toggle element a required field. Adds an asterisk next to Checkbox Toggle, Checkbox Group
the element. Button, Checkbox Group
Required Label Add text next to the asterisk when Require is enabled. Stateful Icon, Checkbox Button,
Unchecked Icon Select the icon visible when the element is unchecked Checkbox Button, Dual Stateful Button,
Name Stateful Button
Unchecked Label Select the label visible when the element is unchecked. Stateful Button, Dual Stateful Button,
Checkbox Toggle
Update Data Updates the data source with the value of the selected state of Stateful Icon, Checkbox Button,
Source the toggle element. Checkbox Toggle, Stateful Button, Dual
Stateful Button
Value Add default value. For example, set a value as true or enter a Checkbox Group, Checkbox Group
comma-separated list of selected options. Button
Variant Select from predefined SLDS styles to change the appearance of Stateful Button
the element.
See Also
• Download a Sample Toggle DataPack

Add Conditions to a FlexCard Element

Display or hide FlexCard elements based on the value of data fields. For example, display an alert icon or
supplemental text only for Cases whose Status is Escalated.
To apply conditions to a state, see Add Conditions to a FlexCard State.
IMPORTANT
Applied conditions are visible in Preview only.
2. Select an element to add conditions to, such as an Icon element.
3. In the Properties panel, click the pencil icon next to Conditions.
4. Click + Add Condition.
5. To create basic conditions:
a. Click into Data Field, from the list of data fields, select a data field to filter. For example, select
Status for a Case record.
b. To define the relationship between the data field and a value, celect the Operator from the
dropdown, such as =.

company 1350
OmniStudio
c. In the Value field, enter the value to check against. For example, enter Escalated.
d. If adding another condition, click + Add Condition and select AND or OR from the dropdown
between conditions:
• Select AND if all conditions must be met.
For example, Status is Escalated and Priority is High.
NOTE
If there is only one condition, that condition must be met to display cards.
• Select OR if any condition can be met.

For example, Status is Escalated or Priority is High.
NOTE
If there is only one condition, that condition does not need to be met to display
cards.
6. To build nested conditions:

a. Click + Add Group after creating a condition.
b. Click + Add Condition and enter values for all fields for each condition.
c. Select AND or OR from the dropdown between conditions.
FlexCards Conditions Properties

Conditions properties are configurable for all elements in the Properties panel in the FlexCard Designer.
Show or hide FlexCard elements based on specified conditions. See Add Conditions to a FlexCard
Element.
Add Condition Add a condition that must be met based on data field values.
Add Group Create complex expressions by grouping conditions. A group is similar to enclosing a series of tests in parenthesis in
a programming language. For example, to add a condition for high priority cases that are either escalated or have an
account whose revenue is above a certain number, create two condition groups connected by an OR operator, such
as [Priority = High AND IsEscalated = true] OR [Priority = High AND AnnualRevenue >
500000].
Data Field Select the data field to evaluate.
Operator Select the equality or relational operator that evaluates the data field against the value, such as =, !=, >, and so on.
Value Enter the value to check against.
FlexCards Common Element Properties

FlexCard elements have properties shared by all FlexCard elements. For example, any element can be
shown or hidden based on conditions set with the Conditions property.

company 1351
OmniStudio

Element
FlexCard Element
FlexCard States
FlexCards have states. Each state displays a list of fields a data source and one or more actions. You can
also associate a state with one or more flyouts, which shows supplemental data displayed as a modal or
popover.
FlexCard states enable the presentation of different CRM interactions per state. For example, closed cases
have reopen actions, while escalated cases are styled differently have an action to view the case.
FlexCards with different states present different data.
In addition to adding different elements depending on the state, you can also set conditions to determine if,
when, and how data displays on a FlexCard. The FlexCard selects the first state with true conditions to
display. See Add Conditions to a FlexCard State.
You can enable a Blank Card State to display information when no data is returned from the configured
data source.
You can customize each card by its state to display various clickable actions, information, and optional
visual cues. For example:
• If a Case is escalated, the Case FlexCard (via its state) could display with a red border, red text, and an
action, such as View Case.
• A FlexCard for a closed case could display the text as greyed out and an action to Reopen Case.

company 1352
OmniStudio
Add a State to a FlexCard

Add an additional state to a FlexCard to present different interactions and layouts based on specified
conditions. Each FlexCard has a default state that cannot be deleted. Add a State element to the canvas of
a FlexCard, or clone a state already on the canvas.
Add a State Element
1. From the FlexCard Designer, drag a State element from the Build panel onto the canvas.
2. (Optional) To create a state to display when there are no records available, select the Blank Card
State checkbox. For example, when a data source returns no records from the Policy object, create a
state with an OmniScript action to add a Policy.
3. In the Name field, enter the name of the state, such as Active.
NOTE
The state Name is for internal use and does not appear on the generated LWC or in
Preview.
4. To add data fields and other elements, see Add Elements to a FlexCard.
5. To add conditions that must be met for the state to display, see Add Conditions to a FlexCard State.
6. (Optional) To style your state, click Style to open the Style panel, and see Style FlexCard Elements.
Clone a State
1. Click the double square plus icon on a selected state. The cloned state appears below the original
state.

company 1353
OmniStudio
2. (Optional) To create a state to display when there are no records available, select the Blank Card
State checkbox. For example, when a data source returns no records from the Policy object, create a
state with an OmniScript action to add a Policy.
3. In the Name field, enter a descriptive name for the state, such as No Data.
NOTE
The Name is for reference only and does not appear on the generated LWC or in
Preview.
4. To add data fields and other elements, see Add Elements to a FlexCard.
5. To add conditions that must be met for the state to display, see Add Conditions to a FlexCard State.
What's Next
Style your element. See Style FlexCard Elements.
See Also
• FlexCard States
• FlexCards State Properties
Add Conditions to a FlexCard State

FlexCard states enable the presentation of different CRM interactions for each state. Set conditions to
determine if, when, and how data displays on a FlexCard.
Example 11. Example: Policy Information FlexCard

A FlexCard displays policy information for an Account. If the Policy is up to date, the default state displays
data fields, and an action to update Account information. If the Policy is about to expire, the Policy has a
red border, an alert notification, and an action to renew the Policy.

company 1354
OmniStudio
NOTE
When arranging the order of your states on the canvas, place the states in a logical order,
where the first condition is checked against the next, and so on. Typically, states with
complex conditions precede states with simple ones, followed by a state with no
conditions, and then a Blank Card State. The FlexCard selects the first state with true
conditions to display.
For example, the order of the states for the example above would be:
1. State 1 - Condition: DaysToExpiration < 31 && DaysToExpiration != Null (empty)

2. State 2 - No conditions
3. State 3 - Blank Card State (no records returned)
IMPORTANT
Applied conditions are visible in Preview only.
2. Select a state, and click the pencil icon next Conditions in the Properties panel.
3. Click + Add Condition.
a. Click into the Data Field, from the list of data fields, select a data field to filter, such as
DaysToExpiration.
b. To define the relationship between the data field and a value, select an operator from Operator
dropdown, such as <.
c. In the Value field, enter the value to check against the data field, such as 31.
d. If adding another condition, click + Add Condition and select AND or OR from the dropdown
between conditions:
• For example, the policy status is purchased AND the expiration date is less than 31 days.
NOTE

• For example, the policy status is closed OR the expiration date is less than 31 days.

company 1355
OmniStudio
NOTE
cards.

a. Click + Add Group after creating a condition, such as DaysToExpiration < 31.
b. Click + Add Condition and enter values for all fields for each condition.
For example, use the conditions feature to build the conditional expression DaysToExpiration <
31 AND ( PolicyType = Universal Life OR PolicyType = Universal Variable
Life) to filter for policies about to expire, and whose policy type is either Universal Life or Universal
Variable Life.

company 1356
OmniStudio
See Also
• FlexCard States
• FlexCards State Properties
FlexCards State Properties

This page contains lists of available FlexCards State element properties. Add additional states o a FlexCard
to present different interactions and layouts based on specified conditions. See Add a State to a FlexCard.

Blank Card State Display this state when there is no data returned from a data source. n/a
Name Enter a descriptive name for the state. The state Name is for reference only and n/a
does not appear on the generated LWC or in Preview.
Conditions Set when and how a state displayed based on specified conditions. Add Conditions to a
FlexCard State
See Also
• FlexCard States
Configure a Data Source on a FlexCard

Configure a data source on a FlexCard to retrieve data from a Salesforce object or an external database. A
Child FlexCard can have a data source independent of the parent FlexCard or use the data source from the
parent FlexCard.
See Embed a FlexCard Inside Another FlexCard.
Configure a data source when creating a new FlexCard through a configuration wizard. Or, configure a data
source from the Setup panel in the FlexCard Designer. See Set Up a FlexCard in the FlexCard Designer.
NOTE
An administrator can enable or disable data sources for an org, profile, and user level. See
Enable and Disable Data Sources.
See Also
• FlexCards Data Source Reference

• FlexCards Data Source Properties

company 1357
OmniStudio
FlexCards Data Source Reference

Select from multiple data source types in the FlexCard Designer to retrieve data from a Salesforce object or
an external database. Select a data source from the Setup panel in the designer, or when creating a new
FlexCard. See Configure a Data Source on a FlexCard.
Data Source Description Example

Type
Apex Remote Uses an Apex Remote class and method to return data. An Apex Remote class is Configure an Apex
a standard Apex class that implements the VlocityOpenInterface. Remote Data Source on a
FlexCard
Apex REST Uses a REST endpoint of an Apex class to return data. Configure an Apex REST
Data Source on a
FlexCard
Custom Uses sample JSON to set up a FlexCard with temporary data eventually be Configure a Custom Data
replaced with another data source. This allows you to embed the custom JSON Source on a FlexCard
directly into the layout without depending on external data.
DataRaptor Uses a DataRaptor Extract interface to return data. Field-level security is fully Configure a DataRaptor
supported. See DataRaptors. Data Source on a
FlexCard
Integration Uses an Integration Procedure to return data. Integration Procedures are Integration Procedures
Procedures declarative, server-side processes that execute multiple actions in a single server
call. See Integration Procedures.
Platform Event Uses Salesforce's Platform Events enterprise messaging platform, which Configure a Platform Event
combines PushTopic and Streaming Channel to enable apps to communicate Data Source on a
inside and outside of Salesforce. Instead of working with an sObject, Platform FlexCard
Events work with custom objects.
PushTopic Uses an SOQL query to return a result that notifies listeners of changes to records Configure a PushTopic
in a Salesforce organization. The PushTopic defines a Streaming API channel. Data Source on a
See Salesforce Streaming API. FlexCard
REST: Named Uses the standard REST API call to return data from the URL of a callout endpoint Configure a REST Data
Credential and its required authentication parameters in one definition. Source Using Named
Credentials on a FlexCard
REST: Web Uses the standard REST API call to return data from the URL of a callout Configure a REST Web
endpoint. Data Source on a
FlexCard
SOQL Query Uses a Salesforce Object Query Language (SOQL) to search an org's Salesforce Configure a SOQL Query
data for specific information. For example, SELECT Name,Id FROM Account Data Source on a
LIMIT 5. FlexCard
NOTE
If security is a concern, use a DataRaptor instead of a
SOQL query, because DataRaptors fully support field-level
security.
SOSL Search Uses a Salesforce Object Search Language (SOSL) to construct text-based Configure a SOSL Search
search queries against the search index. Data Source on a
FlexCard
Streaming Uses the Salesforce Streaming API to send notifications of general events that are Configure a Streaming
Channel not tied to Salesforce data changes. Channel Data Source on a
FlexCard

company 1358
OmniStudio
See Also
FlexCards Data Source Properties

FlexCard Data Source properties are configurable for each data source type in the Setup panel of the
FlexCard Designer. Retrieve data from a Salesforce object or an external database. See FlexCards Data
Source Reference.
Common Data Source Properties

These properties are shared by all data sources. See Configure a Data Source on a FlexCard.
Data Source Type Select the data source type.
Fetch Timeout(ms) Set an appropriate timeout value to enable the application and users to react accordingly to long wait times.
The timeout value controls the time that the framework waits for the designated data source to return a
response. Does not work in Design view, test in Preview.
Input Map When required, pass variables from the FlexCard to the data source.
Key Enter the variable to pass. For example, pass the contextId AccountId.
Order By Order the records by a specified field.
Refresh Interval(ms) Set an interval to enable recursive updates of records. The data source refreshes continuously at the given
interval and checks for changes in data source records. If changes are found, the FlexCard reloads.
Result JSON Path To drill down to a specific dataset enter a JSON path, such as ['Cases'].
Reverse Order Reverse the order of the returned records.
Test Parameters Preview a FlexCard using real data by adding test variables that the query can use to return live data.
Value Enter the value for the variable. For example, enter a merge field, such as {recordId} or a static value, such
as the alpha-numeric Account Id found in the URL of an Account record page.
Apex Remote Data Source Properties

These properties are unique to the Apex Remote data source. See Configure an Apex Remote Data
Source on a FlexCard.
Asynchronous Calls the Apex class asynchronously using the long-polling method.
Options Map Send additional key/value pairs to the Input Map passed to the remote method. Enter a key in the first field, and its
value in the second field. The value supports merge field syntax such as {Name}.
Poll Interval Specifies the polling interval in milliseconds to check the response status.
Remote Class The Apex remote class to invoke.
Remote Method The Apex method to call.
Apex REST Data Source Properties

These properties are unique to the Apex REST data source. See Configure an Apex REST Data Source on
a FlexCard.

company 1359
OmniStudio
Apex Endpoint The URL of the Apex REST endpoint.
JSON Payload Enter the JSON formatted response.
Method Specifies what type of call to make: GET or POST.
DataRaptor Data Source Properties

These properties are unique to the DataRaptor data source. See Configure a DataRaptor Data Source on a
FlexCard.
Interface Name Select the DataRaptor to fetch the data from.
Integration Procedure Data Source Properties

These properties are unique to the Integration Procedure data source. See Configure an Integration
Procedure Data Source on a Flex Card.
Name Select the Integration Procedure to fetch the data from.
REST Data Source Properties

These properties are unique to the REST data source. See Configure a REST Web Data Source on a
FlexCard. See Configure a REST Data Source Using Named Credentials on a FlexCard.
Endpoint Enter the relative path to get what you need from the API, such as My_Payroll_System/paystubs?
format=json.
Headers Pass additional information from an HTTP request or response with an HTTP header.
JSON Payload Enter the JSON formatted response.
Method Select a GET or POST method.
Named Credential Select a Named Credential created from Setup > Named Credential in your org.
REST type Select the type of REST endpoint to access.
SOQL Query Properties

These properties are unique to the SOQL Query data source. See Configure a SOQL Query Data Source
on a FlexCard.
Query Enter an SOQL expression to search for specific information from an org's Salesforce database. For example, SELECT
Id, FirstName, LastName Email, Phone, Title FROM Contact WHERE Phone != Null.
SOSL Search Data Source Properties

These properties are unique to the SOSL Search data source. See Configure a SOSL Search Data Source
on a FlexCard.

company 1360
OmniStudio
In Select which fields to search in.
Limit to Limit the maximum number of rows to return.
Returning sObject & Fields Select at least one sObject and field to search.
Search For Enter the search term to search for.
Streaming API Data Source Properties

These properties are unique to the Streaming API data source. See Vlocity Streaming API Data Sources.
Channel Enter the URL of the app you created.
Get All Messages Select whether to get all messages from the last 24 hours or get the latest data update.
Operations Select the type of operation to perform. Select Replace to overwrite the FlexCard with new data or Append to
add new data to the FlexCard.
Type Select a Streaming API type.
Configure a DataRaptor Data Source on a FlexCard

Configure a DataRaptor data source to fetch data from a DataRaptor Extract. DataRaptor is a mapping tool
that enables you to read, transform, and write Salesforce data.
See DataRaptor Overview.
NOTE
For optimal flexibility and easier implementation, use an Integration Procedure as a data
source to execute multiple actions in a single server call. See Configure an Integration
Procedure Data Source on a FlexCard.
Before You Begin

• Create a DataRaptor Extract. See Create a DataRaptor Extract.
1. To configure the data source when creating a FlexCard, navigate to the Select Data Source Type
step, select DataRaptor, and click Next.
2. To configure the data source from the SetUp Panel in the FlexCard Designer, click Setup, and select
DataRaptor from the Data Source Type dropdown.
3. Click into the Interface Name field, and select a DataRaptor Extract.
4. To pass a variable to the DataRaptor, click + Add New next to Input Map.
Example 12. Pass the ContextId

For example, to use the recordId context variable to dynamically get the ContextId of FlexCard:

company 1361
OmniStudio
1. In a new tab, go to the Vlocity DataRaptor Designer tab, open the DataRaptor Extract selected
from the Interface Name, and click the Preview tab to view the Input Parameters.
2. In the Key field of the Input Map, enter the variable representing the ContextId, such as
AccountId.
3. In the Value field of the Input Map, enter {recordId} as the value.
5. (Optional) To configure other options common among all data sources, see FlexCards Data Source
Properties.
6. To test data source settings, add test variables that the query can use to return live data, see Test Data
Source Settings on a FlexCard.
What's Next
Add elements to the FlexCard. See Add Elements to a FlexCard.
See Also
Configure an Integration Procedure Data Source on a FlexCard

Configure a data source to use a Vlocity Integration Procedure to execute multiple actions in a single server
call. For example, as a Systems Admin, you want your customer service reps to view the weather forecast
of policy holders when on a call. You can use an Integration Procedure with a DataRaptor Extract that
returns an account's ZIP code, and a REST API call that uses the ZIP code to get the current forecast for
the Account's region.
NOTE
An Integration Procedure doesn’t support the following data sources:
• Salesforce Object Search Language (SOSL)

• Streaming API
• Off-Platform
Before You Begin

• Create an Integration Procedure. See Create an Integration Procedure.
step, select Integration Procedures, and click Next.
Integration Procedures from the Data Source Type dropdown.
3. Click into the Name field and select an Integration Procedure to use.
4. To pass a variable to the Integration Procedure, click + Add New next to Input Map.

company 1362
OmniStudio
Example 13. Pass the ContextId

For example, to use the recordId context variable as a merge field to dynamically get the ContextId of
a FlexCard:
1. In a new tab, go to the Vlocity Integration Procedures tab, open the Integration Procedure selected
from the Name, and click the Preview tab to view the Input Parameters.
2. In the Key field of the Input Map, enter the variable representing the ContextId, such as
AccountId.
3. In the Value field of the Input Map, enter {recordId} as the value.
Properties.
Add Dummy Data From an Integration Procedure
1. In a current or new Integration Procedure add a Response Action step.
2. Use one of two methods to add dummy JSON data:

• For a small dataset:
1. In the Properties tab, click ADDITIONAL OUTPUT RESPONSE.
2. For each key/value pair, click the Add Key/Value Pair button and add your data.

company 1363
OmniStudio
• For a large dataset:

1. Click the Edit as JSON link at the top right of the Properties tab.
2. In the additionalOutput node, enter your full JSON data as an object.

company 1364
OmniStudio
3. (Optional) If the Integration Procedure has other data sources, to return only the dummy data, select
the checkbox next to the Return Only Additional Output label.

company 1365
OmniStudio
4. In your FlexCard's Setup panel, confirm that the Integration Procedure with the dummy data is chosen
in the Name field.
5. To view your dummy data, click Save & Fetch.
What's Next
See Also
Configure a SOQL Query Data Source on a FlexCard

Configure a data source to use a Salesforce Object Query Language (SOQL) query to search an org's data
for specific information. The SOQL queries are encrypted so that FlexCards don’t display query information
on the client-side. If security is a concern, use a DataRaptor instead of a SOQL query, because
DataRaptors provide field-level security.
NOTE
When mapping fields, only fields in the field picker that have non-null values for the
specific record in the test query are visible. Use a test record that you know has non-null
values for all the fields you want to map. Or use custom fields if the test record doesn't
have the fields that you want to map.
NOTE
step, select SOQL Query, and click Next.

company 1366
OmniStudio
SOQL Query from the Data Source Type dropdown.
3. Enter a SOQL expression in the Query field.
For example, enter the following to get fields from the Contact object, limit it to 10 and return only
records that have an email address:
SELECT Id, Name, Email, Phone, Title FROM Contact WHERE Email != Null
LIMIT 10
Properties.
What's Next
See Also
Configure a SOSL Search Data Source on a FlexCard

Construct text-based search queries against the search index with Salesforce Object Search Language
(SOSL). You can search text, email, and phone fields for multiple objects to which you have access,
including custom objects, in a single query. The SOSL queries are encrypted so that FlexCards don’t
display query information on the client-side.
See SOSL and SOQL Reference
step, select SOSL Search, and click Next.
SOSL Search from the Data Source Type dropdown.
3. Enter the search term in the Search For field.
4. Select which fields to search in from the In dropdown.
5. From the Returning sObject & Fields section, select at least one sObject to search:
a. Click into the sObject field and select an object, such as Account.
b. Select one or more data fields from the Field dropdown.
c. (Optional) To add additional objects and fields, click + Add sObject.
6. (Optional) To limit the maximum number of rows to return, enter a number in the Limit to field.
Properties.
What's Next

company 1367
OmniStudio
See Also
Configure a Custom Data Source on a FlexCard

Embed custom JSON data directly into FlexCard without depending on any external data source. Configure
the Custom data source for testing with temporary static data. For example, when you're waiting for access
to an API, or if you want to quickly test a concept.
step, select Custom, and click Next.
Custom from the Data Source Type dropdown.
3. Enter custom JSON in the Custom JSON field.
Example 14. Sample Custom JSON

[
{
"attributes": {
"type": "Contact",
"url": "/services/data/v49.0/sobjects/Contact/
0033700000TOF0eAAH"
},
"Name": "Perry",
"Id": "0033700000TOF0eAAH",
"Phone": "(734) 489-5851",
"AccountId": "0013700000NVVLvAAP",
"Email": "[email protected]",
"MailingAddress": {
"city": "Concord",
"country": "US",
"geocodeAccuracy": null,
"latitude": null,
"longitude": null,
"postalCode": "53813",
"state": "WI",
"street": "856 4th Avenue #76"
},
"CreatedDate": "2017-06-14T18:53:11.000+0000"
},
{
"attributes": {
"type": "Contact",
0033700000TOB6mAAH"

company 1368
OmniStudio
},
"Name": "Robert0 Taylor",
"Id": "0033700000TOB6mAAH",
"Phone": "(888) 888-8888",
"AccountId": "00137000007D63JAAS",
"MailingAddress": {
"city": "SF",
"country": "US",
"latitude": null,
"longitude": null,
"state": "CA",
"street": "50 Santa Rita St"
},
"CreatedDate": "2017-06-13T21:08:25.000+0000"
},
{
"attributes": {
"type": "Contact",
0033700000TNvK0AAL"
},
"Name": "c1",
"Id": "0033700000TNvK0AAL",
"AccountId": "0013700000NVE4tAAH",
"MailingAddress": null,
"CreatedDate": "2017-06-08T20:13:41.000+0000"
},
{
"attributes": {
"type": "Contact",
0033700000TNvKKAA1"
},
"Name": "c2",
"Id": "0033700000TNvKKAA1",
"AccountId": "0013700000NVE4tAAH",
"MailingAddress": null,
"CreatedDate": "2017-06-08T20:13:50.000+0000"
},
{
"attributes": {
"type": "Contact",
0033700000Vs6RzAAJ"

company 1369
OmniStudio
},
"Name": "Smith",
"Id": "0033700000Vs6RzAAJ",
"Phone": "(300) 333-3763",
"AccountId": "001370000098i8mAAA",
"MailingAddress": {
"city": "SF",
"country": "US",
"latitude": null,
"longitude": null,
"state": "CA",
"street": "50 Fremont St"
},
"CreatedDate": "2017-08-16T20:26:07.000+0000"
}
]
Properties.
What's Next
See Also
Configure an Apex REST Data Source on a FlexCard

Configure a data source to use an Apex REST call to fetch data to populate fields on a FlexCard.
NOTE
step, select Apex Rest, and click Next.
Apex Rest from the Data Source Type dropdown.

company 1370
OmniStudio
3. Enter the endpoint URL in the Endpoint field. For example, /services/apexrest/{namespace}/
CardTestApexRestResource/{recordId}
4. Select a method type from the Method dropdown:
• Select GET to requests data specified by the parameters of the URL.
• Select POST to send JSON data.
• Enter the JSON data to send in the JSON Payload field.
NOTE
You can use Context Variables to pass inherited values with either method. See
FlexCards Context Variables.
Properties.
What's Next
See Also
Configure an Apex Remote Data Source on a FlexCard

Configure a data source to invoke an Apex Class and method that fetches data to populate a FlexCard.
Apex remote data sources can run asynchronously through Apex, which increases the CPU time but
ensures that long-running transactions aren’t timed-out.
NOTE
Before You Begin

1. Know the Apex remote class and method you need to invoke before you can configure a remote data source. Managed packages
can include Apex remote classes and methods.
To see existing Apex classes:
a. In your org, go to Setup, and in the Quick Find box, enter Apex.
b. Click Apex Classes.
2. Beginning with Vlocity Health and Insurance Spring '21, add an Apex class permissions checker to ensure only authorized users can
access VlocityOpenInterface classes (APIs) from a remote action on a card. See Adding an Apex Class Permissions Checker.

company 1371
OmniStudio
step, select Apex Remote, and click Next.
Apex Remote from the Data Source Type dropdown.
3. Enter the name of the remote class in the Remote Class field.
IMPORTANT
The Apex Class must implement the Vlocity Open Interface otherwise an error
message displays.
4. Enter the name of the remote method in the Remote Method field.
For example, you can access the remote Apex method getStories from the remote Apex class
StoryListHandler.
5. (Optional) To pass a variable from the FlexCard to the remote class method, click + Add New next to
Input Map and perform the following tasks:
a. In the Key field, enter the variable to pass. For example, pass the ContextId AccountId.
b. In the Value field, enter the value of the variable. For example, enter a merge field, such as
{recordId} or a static value, such as the alpha-numeric Account Id found in the URL of an
Account record page.
6. (Optional) To send additional key/value pairs to the Input Map passed to the remote method, click
+Add New next to Options Map. Enter a key in the first field, and its value in the second field. The
value supports merge field syntax such as {Name}.
NOTE
By default the NS.IntegrationProcedureService continuation object is set for
you to use asynchronous callouts to make long-running requests from a Visualforce
page to an external Web service and process responses in callback methods. NS
represents your org's Namespace, such as vlocity_ins or vlocity_cmt, as in
vlocity_ins.IntegrationProcedureService.
7. (Optional) To run asynchronously through Apex, select Is Asynchronous.

8. (Optional) To specify the polling interval to check the response status, enter the time in milliseconds in
the Poll Interval field.
Properties.
What's Next

company 1372
OmniStudio
See Also
Configure a REST Data Source Using Named Credentials on a FlexCard

Use Named Credentials to authenticate Apex callouts when configuring a REST data source. A named
credential specifies the URL of a callout endpoint and its required authentication parameters in one
definition.
To create a named credential, see Named Credentials as Callout Endpoints.
NOTE
Before You Begin

• Create a Named Credential. See Define a Named Credential.
step, select REST, and click Next.
REST from the Data Source Type dropdown.
3. Select Named Credential from the REST type dropdown.
4. From the Named Credential dropdown, select a Named Credential created from Setup > Named
Credential in your org.
5. Enter a relative path in the Endpoint field to get what you need from the API, such as
My_Payroll_System/paystubs?format=json.
NOTE
7. (Optional) To add any request headers, click + Add New next to Headers to add any request headers.

company 1373
OmniStudio
NOTE
Most third-party APIs expect various headers such as tokens, public keys, and
content-type.
Properties.
What's Next
See Also
Configure a REST Web Data Source on a FlexCard

Configure a REST Web data source to get or post data from or to a public API. For example, pull in weather
data from a weather API based on a policy holder's postal code.
To configure a REST data source with Named Credentials to authenticate Apex callouts, see Configure a
REST Data Source Using Named Credentials on a FlexCard.
NOTE
step, select REST, and click Next.
REST from the Data Source Type dropdown.
3. Select Web from the REST type dropdown.
4. In the Endpoint field, enter the REST endpoint URL. For example:
http://api.weatherstack.com/current?
access_key={Session.weatherAPIkey}&query={BillingCity}

company 1374
OmniStudio

NOTE
6. (Optional) To add any request headers, click + Add New next to Headers to add any request headers.
NOTE
Most third-party APIs expect various headers such as tokens, public keys, and
content-type.
Properties.
What's Next
See Also
Test Data Source Settings on a FlexCard

Preview a FlexCard with real data by adding test variables that the query can use to return live data. The
variables populate the dynamic fields in a data source, such as a REST endpoint with parameters or from a
DataRaptor that gets data from an sObject.
1. Click the FlexCards home tab, click a version of a FlexCard to open the FlexCard Designer.
2. In the Setup panel, to configure test parameters, click + Add New in the Test Parameters section.
3. In the Key field, enter a test variable name. For example, enter the variable from the Input Map
representing a contextId such as recordId. See FlexCards Context Variables.
4. In the Value field, enter a test variable value. For example, enter a record Id, such as the one found in
the URL of an Account page.
5. (Optional) If your returned data has multiple arrays, to return a specific dataset enter its JSON path in
the Results JSON. For example, to return just the Cases dataset, enter [0]['Cases'] if your JSON
looks like this:
{
[
"Cases": [
{

company 1375
OmniStudio
"Priority": "High",
"IsEscalated": false,
"CaseId": "5006g00000FpEz5AAF",
"Created": "2020-07-22T00:22:42.000Z",
"Type": "Mechanical",
"Subject": "Generator won't start",
"Status": "New",
"Origin": "Web",
"Description": "Despite turn the power on and off several times, the
generator wouldn't start",
"CaseNumber": "00001028"
},
{
"Priority": "Medium",
"IsEscalated": false,
"CaseId": "5006g00000BsfKkAAJ",
"Created": "2020-02-27T22:28:20.000Z",
"Type": "Mechanical",
"Subject": "Shutting down of generator",
"Status": "Closed",
"Origin": "Web",
"CaseNumber": "00001017"
}
],
"Account": {
"Type": "Customer - Direct",
"Name": "Edge Communications",
"Street": "312 Constitution Place\nAustin, TX 78767\nUSA",
"State/Province": "TX",
"City": "Austin",
"Revenue": 139000000
}
]
}
6. Click Save & Fetch to view the Test Results.

company 1376
OmniStudio
7. (Optional) Click JSON to view test results as JSON.

8. (Optional) Click Refresh to see the latest data.
See Also
Vlocity Streaming API Data Sources

Streaming API lets you push a stream of notifications from Salesforce to client apps based on criteria that
you define. It has a persistent connection that continues to deliver new data as it becomes available, rather
than using client polling.
Polling is the most traditional way to get data from a data source that produces the stream of events and
updates. The client makes requests periodically, and the server sends data if there’s a response. In case
there's no data to be sent by the server, an empty response is returned.
Streaming API uses push technology, which is a publish and subscribe model that transfers information that
is initiated from a server to the client. Push technology transfers information that is initiated from a server to
the client. This type of communication is the opposite of polling where a request for information is made
from a client to the server. The main benefits of using the Streaming API are a reduced number of API calls
and improved performance.
For details about the Streaming API, see Use Streaming API and Streaming API Developer Guide.
This illustration shows the difference between Polling and Streaming API:

company 1377
OmniStudio
Streaming API Types

The Vlocity Streaming API types include:
Type Description Example

Streaming Channel The Streaming Channel API type uses the Streaming API to send notifications Configure a Streaming
of general events that aren’t tied to Salesforce data changes. Channel Data Source
on a FlexCard
PushTopic A PushTopic is an SOQL query that returns a result that notifies listeners of Configure a
changes to records in a Salesforce organization. The PushTopic defines a PushTopic Data
Streaming API channel. Source on a FlexCard
Platform Event Platform Events are part of Salesforce’s enterprise messaging platform. The Configure a Platform
platform provides an event-driven messaging architecture to enable apps to Event Data Source on
communicate inside and outside of Salesforce. A Platform Event combines a FlexCard.
PushTopic and Streaming Channel. Instead of working with an sObject,
Platform Events work with custom objects.

company 1378
OmniStudio
PushTopic Data Source

The Streaming Channel API type uses the Streaming API to send notifications of general events that are
not tied to Salesforce data changes. Use the Streaming Channel API when you want to send and receive
notifications based on custom events that you specify. You can use Streaming Channel API for any
application that sends custom notifications, such as a Chat application.
Streaming API is known as Generic Streaming in Salesforce. See Generic Streaming.
A PushTopic is a SOQL query that returns a result that notifies listeners of changes to records in a
Salesforce organization. The PushTopic defines a Streaming API channel. For instance, if you want to get
notified when a case is created for a particular type or status or both, use a PushTopic.
The following example code creates a PushTopic that pushes data if a case of type Problem is created:
Select Id,CaseNumber,Subject,ContactEmail from Case where Type = 'Problem'
If you also need Status, you can simply add another condition:
Select Id,CaseNumber,Subject,ContactEmail from Case where Type = 'Problem' AND

Status = ‘New’
You cannot use GROUP BY or ORDER BY clauses in a PushTopic. See Creating a PushTopic.
For another example, you could create an app that notifies a user any time a new task is created for that
user.
What's Next
Configure a PushTopic data source on your FlexCard. See Configure a PushTopic Data Source on a
FlexCard.

company 1379
OmniStudio
See Also
• Vlocity Streaming API Data Sources

Configure a PushTopic Data Source on a FlexCard

Configure a PushTopic data source to run a SOQL query that returns a result that notifies listeners of
changes to records in a Salesforce organization. The PushTopic defines a Streaming API channel. For
example, get notified when a case is created for a particular type or status or both.
See PushTopic Data Source.
Before You Begin

• Create a PushTopic. See Creating a PushTopic.
1. To configure a data source from the FlexCard configuration wizard, navigate to the Select Data
Source Type step, select Streaming API, and click Next.
2. To configure a data source from the SetUp Panel in the FlexCard Designer, click Setup, and select
Streaming API from the Data Source Type dropdown.
3. Select PushTopic from the Type dropdown.
4. In the Channel field, enter the URL of the PushTopic that you created.
5. From the Operation picklist, select Replace or Append.
• Select Replace to overwrite the Card with new data.
• Select Append to add new data to the Card.
6. From the Get All Messages picklist, select True or False.
• Select True to get all data from the last 24 hours.
• Select False to get the latest data update.
Properties.
What's Next
See Also
Platform Event Data Source

Platform Events are part of Salesforce’s enterprise messaging platform. A Platform Event combines
PushTopic and Streaming Channel to enable apps to communicate inside and outside of Salesforce.
Instead of working with an sObject, Platform Events work with custom objects.
• Systems in request-response communication models make a request to a web service or database to

obtain information about a certain state.

company 1380
OmniStudio
• An event-based model obtains information and can react to it in near real time when the event occurs.
• Event producers don’t know the consumers that receive the events. Any number of consumers can
receive and react to the same events.
• The only dependency between producers and consumers is the semantic of the message content.
• Unlike with an sObject, you can’t update or delete event records. You also can’t view event records in the
Salesforce user interface, and Platform Events don’t have page layouts.
The architecture is suitable for large distributed systems because it decouples event producers from event
consumers, simplifying the communication model in connected systems.
For details, see Delivering Custom Notifications with Platform Events in Salesforce Help.
For example, you can create a card that uses a Platform Event as a data source to display the current ink
level for a printer. To see a detailed demo, see End-to-End Example: Printer Supply Automation in
Salesforce Help.
What's Next
Configure a Platform Event data source on your FlexCard. See Configure a Platform Event Data Source on
a FlexCard.

company 1381
OmniStudio
See Also

Configure a Platform Event Data Source on a FlexCard

Configure a Platform Event data source to enable apps to communicate inside and outside of Salesforce.
PushTopic and Streaming Channel. Instead of working with an sObject, Platform Events work with custom
objects.
See Platform Event Data Source.
Before You Begin

• Create a Platform Event. See Delivering Custom Notifications with Platform Events.
3. Select Platform Event from the Type dropdown.
4. In the Channel field, enter the URL of the Platform Event that you created.
Properties.
What's Next
See Also
Streaming Channel Data Source

The Streaming Channel API type uses the Streaming API to send notifications of general events that aren’t
tied to Salesforce data changes. Use the Streaming Channel API when you want to send and receive
application that sends custom notifications, such as a Chat application.

company 1382
OmniStudio
Streaming API is known as Generic Streaming in Salesforce. See Generic Streaming.
For example, use the Streaming Channel data source for a Chat application for the users in your org.
What's Next
Configure a Streaming Channel data source on your FlexCard. See Configure a Streaming Channel Data
Source on a FlexCard.
See Also

Configure a Streaming Channel Data Source on a FlexCard

Enable the Streaming Channel data source to send and receive notifications based on custom events that
you specify. The Streaming Channel API type enables the Streaming API to send notifications of general
events that aren’t tied to Salesforce data changes.
See Streaming Channel Data Source.
Before You Begin

• Create the app that sends and receives notifications. See Generic Streaming.
3. Select Streaming Channel from the Type dropdown.
4. In the Channel field, enter the URL of the app that you created.
Properties.

company 1383
OmniStudio
What's Next
See Also
Set Up a FlexCard in the FlexCard Designer

Configure optional settings for your FlexCard in the Setup panel of the FlexCard Designer. For example,
update a data source, create an event listener, add session variables, and so on.
Before You Begin

• Create a FlexCard. See Create a New FlexCard.
1. From the FlexCard Designer, click Setup to open the Setup panel.
2. To configure specific options, see FlexCard Setup Reference.
What's Next
Build your FlexCard. See Add Elements to a FlexCard.
See Also

FlexCard Setup Reference

The Setup panel in the FlexCard Designer provides multiple configuration options that enable a user to
define the behavior of the FlexCard further. For example, you can update the data source, add session
variables, and so on. See Set Up a FlexCard in the FlexCard Designer.

Author (Disabled by default) The Author of the FlexCard. To update the Author, FlexCard Naming Conventions
clone the FlexCard.
Data Source Sets a data source for the FlexCard. Configure a Data Source on a
FlexCard
Event Listener Add a listener for a PubSub or Custom event that gets fired when a user Add an Event Listener to a
performs an action. FlexCard
Multi-Language Enable to make Custom Labels update and not cached. Enable Multi-Language Support
Support on a FlexCard, Add Custom
Labels to Supported Fields on a
FlexCard

company 1384
OmniStudio

Name (Disabled by default) The API name of the FlexCard. To update the Name, FlexCard Naming Conventions
clone the FlexCard.
OmniScript Enable when your FlexCard interacts with an LWC OmniScript, such as Enable OmniScript Support on a
Support when embedding a Custom LWC in the OmniScript Designer, or updating FlexCard
an OmniScript from a FlexCard Action element.
Repeat Records Disable this feature to display content that doesn't need repeating, such as Repeat Options in the FlexCard
a Chart or Datatable element that displays data for multiple Accounts, or a Designer
Custom LWC used as a header on a page.
Required Limits user access to a FlexCard by entering a comma-separated list of Limit User Access to a FlexCard
Permission custom permissions. If this field is left empty, any user can see the with Custom Permissions
FlexCard.
Session Set attributes available from a component, or store values from data Add Session Variables to a
Variables sources, external systems, or hardcoded to access globally on a FlexCard. FlexCard
Title The title that displays in the Experience Builder (for Communities) and n/a
Lightning App Builder.
Track Custom Log custom data to the Vlocity Tracking Entry object. You must enable Track Custom Data on a
Data Vlocity Tracking Service and OmniAnalytics in Setup > Custom Settings. FlexCard
Repeat Options in the FlexCard Designer

By default, a FlexCard loops through records returned from its data source and displays a FlexCard
instance for each record returned. For example, if a data source returns a list of active Cases for an
Account, each FlexCard instance displays the Status, Priority, Subject, and any other elements added to an
active state.
A FlexCard with multiple Field elements and an Action element. Repeat Records enabled.
To display data that doesn't need repeating, disable the Repeat Records feature. For example, disable the
feature to display one Account record, a Chart element that displays data from multiple Accounts, a
Datatable element that lists Account Cases, a Custom LWC element that serves as a header for a Console
app, or a child FlexCard that has it's own data source.

company 1385
OmniStudio
A FlexCard with a Datatable element. Repeat Records disabled.
Repeatable Modes
This table displays how the Repeat Records feature works for an Active State and a Blank Card State
when records are available and not available:
Enabled? Records Active State Blank Card State

Available?
Yes (default) Yes Show a FlexCard instance for each available Hidden
record.
Yes (default) Yes When a condition results in no records to show, Show one card. For example, display
this state is hidden. an action link to create a record.
Yes (default) No (or no Data Hidden Show one card. For example, display
Source) an action link to create a record.
No Yes Show one card with all available records inside it. Hidden
For example, display a Datatable, List, or a Chart
that displays all the data from the data source. Or
display a Custom LWC or a child FlexCard that
uses its own data source.
No Yes When a condition results in no records to show, Show one card, For example, display
this state is hidden. an action link to create a record.
No No (or no Data Hidden Show one card, such as to show an
Source) action link to create a record.
Disable Record Looping on a FlexCard

To display data that doesn't need repeating, disable the Repeat Records feature. For example, disable the
feature to display one Account record, a Chart element that displays data from multiple Accounts, a
Datatable element that lists Account Cases, a Custom LWC element that serves as a header for a Console
app, or a child FlexCard that has it's own data source.

company 1386
OmniStudio
A Datatable element listing Account Cases. Repeat Records disabled.
1. In the FlexCard Designer, click Setup to open the Setup panel.

2. To disable looping over records, unselect Repeat Records.
See Also
• Repeat Options in the FlexCard Designer
Add Session Variables to a FlexCard

Set attributes available from a component, or store values from data sources or external systems to access
globally on a FlexCard. For example, set an API key or track pagination. Use the merge field
{Session.var} to parse the value.
This table lists the elements that support Session Variables:
Element Supported Input Fields

Action Label
Field Label, Placeholder, and Output
Text Inside the rich text editor

company 1387
OmniStudio
2. Click + Add New next to Session Variables.

3. Enter a Key, such as APIkey.
4. Enter a Value, such as 123456dk489384A1sdjsk.
IMPORTANT
You cannot use data source values as session variables.
5. Apply the session variable as a merge field to an element field. For example, enter
{Session.APIkey} to a REST data source Endpoint URL.
See Also
Add an Event Listener to a FlexCard

Add an event listener that listens for an event happening and performs an action in response. With a
Pubsub Event, listen for an event from another component. With a Custom event, listen for an event fired
from a child FlexCard or from an element on the card.
Example 15. Example: Update Product List

An admin must create a page that displays a filterable list of products. The admin creates a Product
List FlexCard and a Filter FlexCard. Use Field and Image elements to display product information on
the Product List FlexCard. The Filter FlexCard enables users to select from a number of filters, such as
price and category, to update the list of products.
The Filter FlexCard has Toggle elements and a Pubsub Event Action element. Each Toggle element has
a Set Values action that updates the data values with a user-selected value. The Pubsub Event Action
displayed as an Apply button, has an update event, which sends the updated data values as input
parameters to the Product List FlexCard.
When a user selects a filter, such as <$2000, and clicks the Apply button from the Filter FlexCard, only
products that cost less than $2000 are visible in the Product List FlexCard.
Before You Begin

Create the Custom or Pubsub event or get the name of the event if already created.
Add the Event Listener

2. In the Event Listener section, click + Add New.
3. Select a Custom or Pubsub Event Type.
4. To configure a Custom event, in the Event Name field, enter the name of the event, such as reload.
5. To configure a PubSub event:

company 1388
OmniStudio
a. In the Event Name field, enter the name of the event, such as reload.
b. In the Channel Name field, enter the channel in which the event is posted.
c. If your action type is Card, and type is remove, in the Record Index field, update the index to
indicate which record to remove. For example, enter 0, to remove the first record, or 3 to remove
the fourth record.
6. To create an action, see Create the Action.
Create the Action
1. In the Action Properties section, select an Action Type from the dropdown. See FlexCards Actions
Reference.
2. To configure the selected Action Type, see FlexCards Action Properties.
3. Click Save.
Download a Sample Event Listener DataPack

Download a sample FlexCard DataPack with configured Event Listeners. See Download a Sample Event
Listener DataPack.
What's Next
See Also
• FlexCards Event Listener Properties
Download a Sample Event Listener DataPack

Download a sample Event Listener DataPack to import to your org. Create an event listener that listens for
an event happening and performs an action in response. See Add an Event Listener to a FlexCard.
The sample DataPack demonstrates how to enable a FlexCard to listen for an event from another
FlexCard, and to listen for an event from an action on the same card. Click actions to fire an event to reload
a FlexCard, to update data sources, and to update merge field values.
What's Included
• A demoUpdateDataSourceEvent FlexCard with two actions that when clicked, updates the data source
on another FlexCard.
• A demoEventListener FlexCard that listens for events and performs actions based on the event. This
FlexCard has the following elements and properties:
• Merge fields to display data from an SOQL Query data source.
• Merge fields to display data from a DataRaptor Extract data source.
• Event listeners that set values, updates the data source to an SOQL Query data source, updates the
data source to a DataRaptor, and reloads the FlexCard.

company 1389
OmniStudio
NOTE
To save and fetch test data from the getAccountCases DataRaptor Extract, update the
value of the action.setId in the Test Parameters of the PubsubUpdateDS:dataraptor
event listener.
• Two action elements that when clicked, fires an event to update values with new data.
• An action element that when clicked, reloads the FlexCard.
• A getAccountCases DataRaptor Extract to populate merge fields when the related event is triggered.
NOTE
To return data, check that you have Account Case records in your org.
1. Download the DataPack here: demoEventListener.zip.

2. Import the Datapack. See Import a FlexCard.
3. If you didn't activate the FlexCards during the import process, from the FlexCards home tab, for each
FlexCard, click the FlexCard name, select the checkbox, and click Activate.
4. Add both FlexCards to a Lightning Page to preview and test the event listening feature. Add the
demoEventListener below the demoUpdateDataSourceEvent. See Add a FlexCard to a Lightning
Page.

company 1390
OmniStudio
See Also
• FlexCards Event Listener Properties

FlexCards Event Listener Properties

Event Listener properties are configurable from the Setup panel in the FlexCard Designer. Add a listener for
a PubSub or Custom event that is triggered when a user performs an action. See Add an Event Listener to
a FlexCard.

Event Type Select an event type. n/a
Event Name Enter the name of the event. n/a
Channel Name Enter the channel in which the event is posted. n/a
Record Index If your action type is Card, and type is remove, enter the number of the index n/a
that indicates which record to remove. For example, enter 0, to remove the first
record, or 3 to remove the fourth record.
Action Type Select the action that triggers the event. FlexCards Action
Properties

company 1391
OmniStudio
Enable Multi-Language Support on a FlexCard

Enable multi-language support on a FlexCard from the FlexCard Designer. When the Multi-Langauge
Support feature is on, all Custom Labels are updated and not cached. See Custom Labels.

2. Select Multi-language Support.
What's Next
Add custom labels to supported fields. See Add Custom Labels to Supported Fields on a FlexCard.
Enable OmniScript Support on a FlexCard

Enable the OmniScript Support feature when your FlexCard interacts with an LWC OmniScript. For
example, render a FlexCard inside an OmniScript with the OmniScript Designer's Custom LWC element.
See Embed FlexCards in an LWC OmniScript. Or update an OmniScript with the Update OmniScript action
element. See Update an OmniScript from a FlexCard.

2. Select OmniScript Support.
3. Click Activate.
See Also
• Update an OmniScript from a FlexCard

• Launch an OmniScript from a FlexCard

Limit user access to a FlexCard by assigning custom permissions. Enter a list of custom permissions in the
Setup panel of your FlexCard to specify which users can view your FlexCard.
Before You Begin

Create custom permissions in Setup > Custom Permissions. See Create Custom Permissions.
1. From the FlexCard Designer, click Setup to open the Setup panel.
2. Enter a comma-separated list of custom permissions in the Required Permissions field. For example,
if you created custom permissions named Can_Edit_Policy and Can_View_Policy, enter them
as Can_Edit_Policy,Can_View_Policy.
NOTE
If this field is left empty, any user can see the FlexCard.
3. For the managed package in your org, confirm that the VlocityRequiredPermissionCheck Apex
Class exists at Setup > Apex Classes. If it doesn't exist, add it as follows:
a. From Setup, in the Quick Find menu, enter apex.

company 1392
OmniStudio

c. Click New
d. Enter the following Apex code in the Apex Class tab:
global class VlocityRequiredPermissionCheck implements Callable

{
global Boolean call(String action, Map<String, Object> args)
{
if (action == 'checkPermission')
{
return
checkPermission((String)args.get('requiredPermission'));
}
return false;
}
private Boolean checkPermission(String requiredPermission)

{
Boolean hasCustomPermission = false;
List<String> customPermissionsName =
requiredPermission.split(',');
for (String permissionName : customPermissionsName)
{
Boolean hasPermission =
FeatureManagement.checkPermission(permissionName.normalizeSpace());
if (hasPermission == true)
{
hasCustomPermission = true;
break;
}
}
return hasCustomPermission;
}
}
e. Click Save.
See Also
Tracked FlexCard Events

FlexCards support tracking Card Load, Card Unload, and State Load events from parent and Child
FlexCards, and the UI Action event from the Action element. See Enable Tracking on a FlexCard.
The following table lists tracked events and their available OmniAnaltics Keys. See Event Tracking Data for
Cards Framework.

company 1393
OmniStudio
NOTE
Keys with ActionContainer prefix always represents the root card. Keys with Card prefix
refers to the current card. Keys with ParentCard prefix refers to the immediate parent.
Event Event OmniAnalytics Keys Available

Type
Card Load Card • The ActionContainer keys are always available.
• The ParentCard keys and Card keys are only available for child card.
Card Unload Card • The ActionContainer keys are always available.
• The ParentCard keys and Card keys are only available for child card.
State Load Card • The Card keys along-with ActionContainer keys are always available.
• The ParentCard keys are not available.
NOTE
Example: If a card has a single state but has 3 records for that state, loading of
that card includes 1 Card Load event and 3 State Load events.
UI Action Click • The Card keys along-with ActionContainer keys are always available.
• The ParentCard keys are not available.
See Also
• Vlocity OmniAnalytics Overview

• Enable Tracking for Vlocity Components
• Track Custom Data on a FlexCard
Enable Tracking on a FlexCard

Enable tracking from a FlexCard Action or Child FlexCard element to publish tracked data with
OmniAnalytics. The tracking feature sends tracked information from the FlexCard element to the Vlocity
Tracking Service which is then published by OmniAnalytics. See Event Tracking Data for Cards
Framework.
Parent and Child FlexCards track the Card Load, Card Unload, and State Load events. The Action tracks
the UI Action event. See Tracked FlexCard Events.
By default, the Enable Tracking feature is enabled on a FlexCard that is not a Child FlexCard. For
example, on a parent FlexCard which has a Child FlexCard embedded, tracking is enabled on the parent by
default.
To track events on a Child FlexCard, you must enable the Enable Tracking feature, which is disabled by
default. To enable tracking on all nested Child FlexCards, you must enable the tracking feature on all parent
FlexCards.

company 1394
OmniStudio
On the Action element, the Enable Tracking feature is enabled by default. When disabled, the UI Action
event is not fired. Action click tracking is independent of Child FlexCard tracking.
1. In the FlexCard Designer, select an action on the canvas or drag a supported element, such as Action,
into a state on the canvas.
2. In the Properties panel, if the Enable Tracking feature is disabled, click to enable.
What's Next
Track custom data. See Track Custom Data on a FlexCard.
See Also
• Cards Framework Event Tracking

Track Custom Data on a FlexCard

Track custom data to publish with OmniAnalytics. The tracked information is sent from the FlexCard
element to the Vlocity Tracking Service which is then published by OmniAnalytics. See Vlocity
OmniAnalytics Overview.
Configure your Business Event, Business Category, and Custom Fields on a FlexCard in the FlexCard
Designer. All FlexCard events support Business Event, Business Category, and Custom Fields. For Card
Load and Card Unload events, all merge fields, except record merge fields are selectable.
Child FlexCard events must be specified in the Child FlexCard.
Before You Begin

1. Enable the Vlocity Tracking Service in Custom Settings. See Enable Tracking for Vlocity Components.
2. Enable OmniAnalytics. See Enable OmniAnalytics and Store Tracking Data.
3. Enable tracking on a FlexCard element. See Enable Tracking on a FlexCard

2. To select a business event to track, click into the Business Event field, and select from the list of
merge fields if your data source pulls in the business event. Otherwise, enter the name of the event,
such as view_cart, or a session variable, such as {Session.cart}.
3. To select a business category for the event, click into the Business Category field, and select from the
list of merge fields if your data source pulls in the business category. Otherwise, enter the name of a
category, such as Ecommerce, or a session variable, such as {Session.ecommerce}.
4. To append custom fields to the tracking event sent to the Vlocity Tracking Entry object, from the
Custom Fields section perform these tasks:
a. Click into the Key field and select from the list of fields from the TrackingEntry object. For
example, select ns__AccountId, where ns represents your org's namespace. Or enter a key.
b. Click into the Value field and select the associated merge field, such as {AccountId}. Or enter a
value.
c. To enable logging to the custom fields you added to the VlocityTrackingEntry__c object, you must
add a trigger for each field. See Event Tracking for Custom Fields.

company 1395
OmniStudio
See Also
• Cards Framework Event Tracking

Style FlexCard Elements

Configure the look and feel of a FlexCard by styling individual elements, fields inside elements, and entire
states. From the Style panel in the FlexCard Designer, design backgrounds, text, and borders; adjust
heights, widths, and spacing inside and between elements; apply classes and inline styles; make your
element responsive; and more.
Save style settings on an element to use on multiple elements on the FlexCard. Create custom classes
from a code editor in the FlexCard Designer and apply them to individual elements. On supported
elements, add classes to specific fields inside the element, such as the label and value of a Text element.
Style Options Available to All Elements
Style panel Description Reference

Section
Alignment Update the padding, margin, and text alignment of an element. FlexCards Element Alignment
Properties
Appearance Configure the color, background, and border of an element. FlexCards Element Appearance
Properties
Custom Create and apply custom classes, and add inline styles to an element. FlexCards Element Custom CSS
Custom Styles Save style settings on a FlexCard element as a Custom Style to use Create a Custom Style for a
on multiple elements on a FlexCard.. FlexCard Element
Dimensions Set the height and configure the responsiveness of an element. FlexCards Element Dimensions
Style Options Available to Specific Elements
Style panel Section Reference

Action FlexCards Action Style Properties
Datatable FlexCards Datatable Style Properties
Field FlexCards Field Style Properties
Icon FlexCards Icon Style Properties
Menu FlexCards Menu Style Properties
Toggle FlexCards Toggle Style Properties
FlexCards Element Dimensions

Set the height and width, and configure the responsiveness of a FlexCard element within the FlexCard
Designer. In addition to adjusting the width of an element by clicking and moving its drag markers left and
right on the canvas, use a slider on the Style panel to adjust the width. See Adjust the Width of an Element
on a FlexCard.
Configure the height, minimum height, and maximum height of the element using CSS supported values.
See Adjust the Height of an Element on a FlexCard.

company 1396
OmniStudio
Enable responsiveness on one or more elements to set the width to change as the width of the visable area
of a page, called the viewport, changes. See Create Responsive Elements on a FlexCard.
The responsive sizing of elements is mobile-first. Sizing starts at the smallest visible viewport breakpoint
and is continuously applied upwards until the next wider breakpoint overrides it. When responsiveness is
enabled, the default width becomes the width of the smallest viewport breakpoint. See FlexCards Element
Responsiveness.
See Also
• FlexCards Element Dimensions Properties

• Create Responsive Elements on a FlexCard
FlexCards Element Dimensions Properties

An element's Dimensions properties are configurable from the Style panel in the FlexCard Designer when
an element is selected. Update the height and width, and configure responsiveness for your element.

Default Set the default width of the element when Responsive is disabled. Adjust the Width of an
Element on a FlexCard
Height Set the height of the element. Enter any value allowed by the height CSS n/a
property, such as 10em, auto or calc(). If you enter just a number, the default
unit used is px. The percentage unit (%) is not supported.
Maximum Set the maximum height of the element. Enter any value allowed by the n/a
Height maximum-height CSS property, such as 10em, auto, or calc(). If you enter
just a number, the default unit used is px. The percentage unit (%) is not
supported.
Minimum Height Set the minimum height of the element. Enter any value allowed by the n/a
minimum-height CSS property, such as 10em, auto, or calc(). If you enter
just a number, the default unit used is px. The percentage unit (%) is not
supported.
Responsive Make your element adjust to the width of the viewport. After enabling, set the FlexCards Element
width of each viewport breakpoint. Responsiveness
See Also
Adjust the Height of an Element on a FlexCard

Update the height of an element on a FlexCard from the Style panel in the FlexCard Designer. Enter any
CSS supported values, such as length units (px, cm, and so on), inherit, auto, and so forth. Or enter a
CSS function, such as calc(2em * 5).
IMPORTANT
Percentage (%) is not supported for height.

company 1397
OmniStudio
1. In the FlexCard Designer, click an element on the canvas, and click Style to open the Style panel.
2. To update the height of your element, open the Dimensions section, and enter a CSS supported value
for one or more of the following properties:
NOTE
For example, enter 20, 150px, or calc(2em * 5), auto, and so on. If you enter
just a number, the length unit defaults to px.
• To set a fixed height, enter a CSS supported value in the Height field.
• To set a minimum height, enter a CSS supported value in the Minimum Height field.
• To set a maximum height, enter a CSS supported value in the Maximum Height field.
What's Next
See Also

• FlexCards Element Dimensions
Adjust the Width of an Element on a FlexCard

After dragging an element from the Build panel into a state, adjust its width along a 12-column horizontal
grid. The width of an element is 1 to 12 parts of a 12 column grid. For example, a field element that is 6
columns wide takes up 50% of the available horizontal space.
When an element is dragged next to another element that is less than 12 columns wide, the new element
takes up the remaining width of the horizontal space available. And when the width of an element is
adjusted from less than 12 to 12 columns wide, any elements next to it will move below it.
1. In the FlexCard Designer, click an element in a state.

2. To adjust the width of an element inside a state, perform these tasks:
a. Hover over the square box on the right border until the mouse pointer icon becomes a drag icon.
b. Click and slide the square box right or left to make the element more narrow or wider.

company 1398
OmniStudio
3. To adjust the width from the Style panel for any element, including a state, perform these tasks:
a. Click Style to open the Style panel
b. In the Dimensions section, under Default, move the slider left or right to adjust the element width.
NOTE
Only Child FlexCards enable you to adjust the width of a State element, and only
from the Style panel. When you adjust the width of the state, if the width is less
than 6 columns wide, records display side by side, mimicking the behavior of
elements inside states. See Display Records Side-By-Side on a FlexCard.
See Also
• Adjust the Height of an Element on a FlexCard
FlexCards Element Responsiveness

In the FlexCard Designer, enable responsiveness on one or more elements to set the width to change as
the visible area of a page, called the viewport, changes. By default, the width of an element is the same
regardless of the width of the viewport device on which the user views the FlexCard. The width of an
element is 1 to 12 parts of a 12 column grid. For example, a field element that is 6 columns wide takes up
50% of the available horizontal space. See Adjust the Width of an Element on a FlexCard.
When the Responsive feature is enabled in the Style panel of a FlexCard, the responsive sizing of
elements is mobile-first. Sizing starts at the smallest viewport breakpoint and is continuously applied
upwards until the next wider breakpoint overrides it. When responsiveness is enabled, the default width
becomes the width of the smallest viewport breakpoint.

company 1399
OmniStudio
TIP
Build with a mobile-first approach if most or all of your elements are responsive. Build your
FlexCard at the smallest canvas size by selecting Mobile L/S from the Viewport
Dropdown. After setting widths for all breakpoints for each element from the Style panel,
view your layout at different viewports by toggling through the Viewport Dropdown. See
View a FlexCard at Different Viewport Breakpoints
Example 16. Example Responsive Subject and CaseId Field Elements

A user wants the Subject field and a CaseId Field element next to each other on the Medium and Large
viewports, but stacked on Small and Smaller viewports:
• Set the Subject field to 12 for Smaller and Small, and 10 for Medium and Large.
• Set the CaseId field to 12 for Smaller and Small, and 2 for Medium and Large.

company 1400
OmniStudio
Subject and CaseId responsiveness settings.
Subject and Caseid fields on larger and small viewports.
Available Breakpoints
Viewport Breakpoint Device
Large (>=1024px) Laptop and desktop
Medium (>=768px) Large tablet
Small (>= 480px) Small or medium tablet, and large mobile device
Smaller (< 480px) Small or medium mobile device
See Also
Create Responsive Elements on a FlexCard

Enable an element's width to change when the viewport updates. For example, make the widths of the
fields for First Name and Last Name of a Contact take the full width of the page on smaller devices, but
shrink to 50% on larger devices such as laptops and desktops.
By default, the width of an element is the same no matter the width of the viewport of the device your user
views the FlexCard. When responsiveness is enabled, the width of an element changes to the width set at

company 1401
OmniStudio
each viewport breakpoint. The default width becomes the width on the smallest viewport breakpoint for a
mobile-first approach. See FlexCards Element Responsiveness.
TIP
Build with a mobile-first approach if most or all of your elements are responsive. Build your
FlexCard at the smallest canvas size by selecting Mobile L/S from the Viewport
Dropdown. After setting widths for all breakpoints for each element from the Style panel,
view your layout at different viewports by toggling through the Viewport Dropdown. See
2. From the Dimensions section, enable Responsive.
NOTE
Easily identify responsive elements by selecting or hovering over the element. A
device icon displays next to the Component Name.
3. For each viewport breakpoint, adjust the slider to set a width.

company 1402
OmniStudio
Example 17. Example Responsive Subject and CaseId Field Elements

A user wants the Subject field and a CaseId Field element next to each other on the Medium and
Large viewports, but stacked on Small and Smaller viewports:
• Set the Subject field to 12 for Smaller and Small, and 10 for Medium and Large.
• Set the CaseId field to 12 for Smaller and Small, and 2 for Medium and Large.
Subject and CaseId responsiveness settings.
Subject and Caseid fields on larger and small viewports.

4. To test the responsiveness of your elements, toggle between viewport widths from the Viewport
Dropdown. See View a FlexCard at Different Viewport Breakpoints.
What's Next
See Also

FlexCards Element Appearance

Update the appearance of your FlexCard elements with the Appearance properties in the Style panel of the
FlexCard Designer. Change the text color, background, border, and set a Salesforce theme for your
elements.

company 1403
OmniStudio
See Also
FlexCards Element Appearance Properties

Appearance properties are configurable in the Style panel of the FlexCard Designer when you select an
element. Update background, text color, border, and theme of your elements.
Background Color Select a background color. Enter a Hex color code, such as #ff0000. Or click the colored box to select from a
color picker.
Background Image Enter the URL of the image to display as the background of your element. The image must be accessible.
Url
Background Position Set the position of the background image. Enter any value allowed by the background-position CSS
property, such as right bottom, center, 10px 30px, and so on.
Background Repeat Set how the background image repeats itself. Enter any value allowed by the background-repeat CSS
property, such as no-repeat, repeat, repeat-x, and so on.
Background Size Set the size of the background image. Enter a value allowed by the background-size CSS property, such
as cover, contain, and so on.
Border Color Select a border color. Enter a Hex color code, such as #ff0000. Or click the colored box to select from a color
picker.
Border Radius To round the edges of the element border, set a border radius. Enter a value allowed by the border-radius
CSS property, such as 25px, 25px 50px, and so on.
Border Style Select the type of border to display. Enter a value allowed by the border-style CSS property, such as solid,
dashed, inset, and so on. Default is solid.
Border Type Select one or more border locations such as top, bottom, right, and left. To remove a border location,
select it again from the dropdown.
Border Width Enter a number for the thickness of the border in pixels.
Salesforce Theme Select a predefined color scheme for your element.
Text Color Update the element's text color. Enter a Hex color code, such as #ff0000. Or click the colored box to select
from a color picker.
See Also
FlexCards Element Alignment

With Alignment properties in the Style panel of the FlexCard Designer, you can create space inside and
around your elements. You can also adjust the position of the text relative to the element's container.
See Also
FlexCards Element Alignment Properties

The Alignment properties of an element are configurable in the Style panel when an element is selected in
the FlexCard Designer. Configuring padding, margin, and text alignment.

company 1404
OmniStudio
Margin Size Select the size of the margins.
Margin Type Select where to add margins to your element, such as the bottom, both vertical spaces, both horizontal positions,
around the entire element, and so on.
Padding Size Select the size of the padding.
Padding Type Select where to add padding to your element, such as the bottom, both vertical spaces, both horizontal positions,
around the entire element, and so on.
Text Align Select text alignment, such as center, to update the alignment of the content within the element's container.
See Also
• Add Space Inside a FlexCard Element

• Add Space Around Your FlexCard Element
Add Space Inside a FlexCard Element

Create space inside the container of a FlexCard element. Add padding to create space between the
boundary of your element and the contents inside your element.
1. In the FlexCard Designer, click on an element in a state, and click Style to open the Style panel.
2. From the Padding Type dropdown, select where to add your padding. For example, to add padding on
all sides of the content, select Around. To add padding to both the top and the bottom, select
Horizontal.
3. From the Padding Size dropdown, select how much padding to add, such as Medium, x-Small, and
so on. See SLDS Padding.
4. Click the plus icon.
5. Repeat steps 1 through 3 to add more padding.
See Also
• Add Space Around Your FlexCard Element

Add Space Around Your FlexCard Element

Create space around the container of a FlexCard element. Add margins between adjacent elements on
your FlexCard.
1. In the FlexCard Designer, click on an element in a state, and click Style to open the Style panel.
2. From the Margin Type dropdown, select where to add your margin. For example, to add space around
the entire element, select Around. To add space above and below your element, select Horizontal.
3. From the Margin Size dropdown, select how much spacing to add, such as Medium, x-Small, and so
on. See SLDS Padding.
4. Click the plus icon.
5. Repeat steps 1 through 3 to add more margins.

company 1405
OmniStudio
See Also
• Add Space Inside a FlexCard Element

FlexCards Element Custom CSS

Create, edit, and apply custom CSS classes and inline styles to your FlexCard elements in the FlexCard
Designer. When styling options available from the design interfaces of the Style panel don't meet your
design needs, create custom CSS classes from a code editor inside the designer, and apply them to
supported fields. Or, add inline styles to a specific element.
See Also
Create Custom CSS Within the FlexCard Designer

Create custom CSS classes within the FlexCard Designer to apply to FlexCard elements or supported
fields inside elements. Create custom CSS classes when the design interfaces in the Style panel do not
meet your design needs. See Style FlexCard Elements.
The custom CSS is a Salesforce attachment. When the FlexCard is saved, the attachment is updated.
A .css file is also packaged with the generated LWC.
2. In the FlexCard Designer submenu, click the down arrow next to Activate, and select Add Custom
CSS.
NOTE
Your FlexCard must be inactive to use this feature.

company 1406
OmniStudio
3. Enter your custom classes inside the code editor.
4. To apply CSS classes at run time, such as in Preview, enable Load as Global CSS.
5. Click Save.
What's Next
Apply custom CSS classes to elements. See Apply Custom CSS to a FlexCard Element.
See Also
FlexCards 'Add Custom CSS' Properties

Add Custom CSS properties are configurable from the submenu of the FlexCard Designer. Create custom
CSS classes and add them to supported fields in the Properties and Style panels. See Create Custom CSS
Within the FlexCard Designer.

company 1407
OmniStudio
Add Custom CSS Create and edit custom CSS classes. The custom CSS is a Salesforce attachment. When the FlexCard is
saved, the attachment is updated. A .css is also packaged with the generated LWC.
Load as Global CSS Enable to apply your CSS classes at run time, such as in Preview.
See Also
• FlexCards Element Custom CSS

Apply Custom CSS to a FlexCard Element

Apply custom CSS classes to a FlexCard element and supported fields inside elements. When the design
interfaces available in the Style panel of the FlexCard Designer don't meet your design needs, apply
custom CSS to your elements. See Style FlexCard Elements.
Apply classes from stylesheets available to the FlexCard, such as SLDS and NDS stylesheets. Also, apply
classes that you create inside the FlexCard Designer with the Add Custom CSS feature. See Create
Custom CSS Within the FlexCard Designer.
NOTE
Add custom CSS to edit the internal components of an element or a child element. Use
this feature as needed and sparingly to optimize performance.
Example 18. Example Grouped Datatable Element with Alternating Background

Colors
A Datatable element displays Account Cases grouped by case Type. An admin wants to show alternating
background colors for all rows and set a different background color for the group heading. There is no
option in the Style panel for alternating row background colors. But you can enter a class for the group
heading. Use the Add Custom CSS feature to create two classes. An alt-table-rows class for the
Datatable element, and an alt-bg-group-wrapper class for the group heading.

company 1408
OmniStudio
The admin applies the alt-table-rows class to the element and the alt-bg-group-wrapper class to
the group heading.
1. In the FlexCard Designer, select an element on the canvas.

2. To apply a custom class to an element, click Style to open the Style panel. From the Custom CSS
section, complete one or both of these tasks:
• To append a custom class to the element's container, enter the class name in the Container Class
field, such as branded-tables.
• To append a custom class directly on the element, enter the class name in the Custom Class field,
such as alt-table-rows from the example above.
3. To apply a custom class to a specific field inside an element, in the Properties panel, enter a class in a
field that supports classes.
For example, from the grouped datatable example above, enter alt-bg-group-wrapper in the
Group Wrapper Class field in the Properties panel of a Datatable element.

company 1409
OmniStudio
4. If your custom classes were created with the Add Custom CSS feature, to apply your CSS classes at
run time and in Preview, perform these tasks:
a. In the submenu of the designer, click the down arrow next to Activate, and select Add Custom
CSS.
b. Enable Load as Global CSS to edit the internal sections of an element or a.
NOTE
Use this feature sparingly as it might slow down performance if used
c. Click Save.
d. Click Preview. See Preview a FlexCard.
What's Next
Activate your FlexCard. See Activate a FlexCard.
See Also
Add Inline Styles to a FlexCard Element

When styling options available from the design interfaces in the FlexCard Designer don't meet your design
needs, add inline CSS styles to an element on a FlexCard. Override classes and target specific elements or
element components.
TIP
Use this feature as needed and sparingly to optimize performance.
2. In the Inline CSS Styles field of the Custom section, enter CSS properties and their values. For
example, font-variant: small-caps; word-spacing: 30px;.
What's Next
See Also

company 1410
OmniStudio
FlexCards Custom CSS Properties

Custom CSS properties are configurable from the Style panel in the FlexCard Designer when you select an
element. When the design interfaces in the Style panel do not meet your design needs, apply a class from
any style sheet available to the FlexCard, or add inline styles.
Container Class Add a class to the container of your element.
Custom Class Add a class directly to the element.
Inline CSS Styles Apply inline CSS styles to your element, such as font-variant: small-caps;.
See Also
• Add Inline Styles to a FlexCard Element

• Create Custom CSS Within the FlexCard Designer.
FlexCards Action Style Properties

Configure style properties specific to the Action element from the Style panel in the FlexCard Designer. To
configure additional style properties common to all elements, see Style FlexCard Elements.
Color Enter a Hex color code or click the colored box to select a color from the color picker.
Font Family Enter a web-safe font or any font included in SLDS or Newport Design System.
Font Size Select a font-size. Enter any value allowed by the font-size CSS property, such as 1em, 6px, large or
calc(). If you enter just a number, the default unit used is px.
Size Select the size of the entire element, such as Medium.
Text Align Select text alignment, such as center. To align a Flyout content's text, select Text Align in the Alignment section
of the Style panel.
Text Decoration Set th apperance of decorative lines on the text. Enter a value allowed by the text-decoration CSS property,
such as underline, overline, and so on.
See Also
FlexCards Datatable Style Properties

Configure style properties specific to the Datatable element from the Style panel of the FlexCard Designer.
To configure additional style properties common to all elements, see Style FlexCard Elements.
Property Description Applies To

Background Color Select a background color. Enter a Hex color code, such as #ff0000. Or click the Table, Cells, Table
colored box to select from a color picker. Head, Rows
Border Color Select a border color. Enter a Hex color code, such as #ff0000. Or click the Table, Cells
colored box to select from a color picker.
Border Type Select one or more border locations such as top, bottom, right, and left. Table, Cells
To remove a border location, select it again from the dropdown.

company 1411
OmniStudio
Property Description Applies To

Border Width Enter a number for the thickness of the border in pixels. Table, Cells
Box Shadow Add a box shadow to cells. Enter a value allowed by the box-shadow CSS Cells
property, such as 2px 4px 3px #888888.
Font Family Enter a web-safe font or any font included in SLDS or Newport Design System. Table Head
Font Weight Enter a value allowed by the font-weight CSS property, such as bold, Table Head
lighter, 600, and so on.
Margin Size Select the size of the margins for all cells. Cells
Margin Type Select where to add margins to your cells, such as the bottom, both vertical Cells
spaces, both horizontal positions, around the entire cell, and so on.
Padding Size Select the size of the padding for all cells. Cells
Padding Type Select where to add padding to your cells, such as bottom, both vertical spaces, Cells
both horizontal positions, or around the entire cell, and so on.
Text Decoration Set th apperance of decorative lines on the text. Enter a value allowed by the Table Head
text-decoration CSS property, such as underline, overline, and so
on.
See Also

• Create Custom CSS Within the FlexCard Designer
FlexCards Field Style Properties

Configure style properties specific to the Field element from the Style panel of the FlexCard Designer. To

Color Enter a Hex color code or click the colored box to select a color from the color picker. n/a
Font Family Enter a web-safe font or any font included in SLDS or Newport Design System. n/a
Font Size Select a font-size. Enter any value allowed by the font-size CSS property, such as n/a
1em, 6px, large or calc(). If you enter just a number, the default unit used is px.
Label Class Select a class for the field label. Select from a class defined in the Add Custom CSS Create Custom CSS
feature of the FlexCard Designer or any style sheet available to the FlexCard. Within the FlexCard
Designer
Text Align Select text alignment, such as center. n/a
Text Decoration Set th apperance of decorative lines on the text. Enter a value allowed by the text- n/a
decoration CSS property, such as underline, overline, and so on.
Value Class Select a class for the field value. Select from a class defined in the Add Custom CSS Create Custom CSS
feature of the FlexCard Designer or any style sheet available to the component. Within the FlexCard
Designer
See Also


company 1412
OmniStudio
FlexCards Icon Style Properties

Configure style properties specific to the Icon element from the Style panel of the FlexCard Designer. To

Extra Class Enter a class appended to the container of the element. Select from a class defined in Create Custom CSS
the Add Custom CSS feature of the FlexCard Designer or any style sheet available to Within the FlexCard
the FlexCard. Designer
Icon Color Enter a Hex color code or click the colored box to select a color from the color picker. n/a
See Also

FlexCards Menu Style Properties

Configure style properties specific to the Menu element from the Style panel of the FlexCard Designer. To
Color Enter a Hex color code or click the colored box to select a color from the color picker.
Size Select the size of the entire element, such as Medium.
See Also
FlexCards Toggle Style Properties

Configure style properties specific to the Toggle element from the Style panel in the FlexCard Designer. To
Checkbox Properties
These properties are unique to the Checkbox Toggle, Checkbox Button, Checkbox Group Button,
Checkbox Group toggle types.
Text Align Select text alignment, such as center.

company 1413
OmniStudio
IMPORTANT
In Vlocity Health and Insurance Spring '21, the Font Size property is not available for the
Checkbox Toggle and Checkbox Button toggle types.
Checkbox Button and Checkbox Toggle Properties

These properties are unique to the Checkbox Toggle and Checkbox Button toggle types.
Checked Label Select the display color of the label when the toggle element is selected. Enter a Hex color code or click the
colored box to select a color from the color picker.
Unchecked Label Select the display color of the label when the toggle element is not selected. Enter a Hex color code or click the
colored box to select a color from the color picker.
Checkbox Button
These properties are unique to the Checkbox Button toggle type.
Checked Icon Select the display color when the toggle element is selected. Enter a Hex color code or click the colored box to
select a color from the color picker.
Unchecked Icon Select the display color when the toggle element is not selected. Enter a Hex color code or click the colored box to
select a color from the color picker.
Checkbox Group Properties

These properties are unique to the Checkbox Group Button and Checkbox Group toggle types.
Color Select a label color. Enter a Hex color code or click the colored box to select a color from the color picker.
IMPORTANT
In Vlocity Health and Insurance Spring '21, the Color property on the Checkbox Toggle
and Checkbox Button toggle types do not work and will be replaced with the Font Size
property in the next release.

company 1414
OmniStudio
See Also

• FlexCard Toggle Element Type Reference
Create a Custom Style for a FlexCard Element

Save style settings on a FlexCard element as a Custom Style to use on multiple elements on your
FlexCard. For example, to apply the same font color, font size, text color, and background color to multiple
Field elements on a FlexCard, create a Custom Style called blue-field-scheme on one Field element.
Then apply blue-field-scheme to other Field elements as needed.
The Custom Style feature saves any settings configured in the Style panel including classes, inline styles,
widths, and responsiveness.
Create a Custom Style
1. In the FlexCard Designer, select an element from the canvas, and click Style to open the Style panel.
2. Style the element as needed. See Style FlexCard Elements.
3. To create a new style, from the Custom Styles section, click the down arrow, and select Save As.
4. Enter a style name in the Enter Style Name field.

5. Click Save.
Apply a Custom Style
1. In the FlexCard Designer, select an element on the canvas, and click Style to open the Style panel.
2. Click the Select Saved Style search icon in the Custom Styles section.

company 1415
OmniStudio
3. In the Select Saved Styles modal, click on the name of a style under Select Style.
4. View how your applied style will look in the Preview section of the modal.
5. Click Save.
What's Next
See Also
FlexCards Custom Styles Properties

Custom Styles properties are configurable in the Style panel when you select an element in the FlexCard
Designer. Save style settings on a FlexCard element as a Custom Style to use on multiple elements on a
FlexCard. See Create a Custom Style for a FlexCard Element.
Clear Styles Clear all styles configured from the Style panel including applied classes and responsiveness.
Create New Style Create a new Custom Style based on the current styles set.
Enter Style Name Enter the name of a new Custom Style.
Remove Default Removes the default style for the selected element type. For example, if the current style for a selected Action
element is Red Action, and you click Remove Default, the default style for any new Action element added to
the FlexCard will not have a default style.
Reset Changes Reset the changes to a saved Custom Style. Removes any styles applied to an element that is not part of the
applied Custom Style. For example, if you add a background image to an Action element whose Custom Style is
Red Action, clicking Reset Changes removes the background image but retains any settings that are part of
the Red Action Custom Style.
Save As Save current style settings as a Custom Style.
Search For Style Search from the list of saved Custom Styles.
Select Saved Style Apply a saved Custom Style to the element.

company 1416
OmniStudio
Set As Default Set the current Custom Style as the default for the selected element type. For example, if the current style for a
selected Action element is Red Action, and you click Set As Default, the default style for any new Action
element added to the FlexCard will be Red Action.
See Also
Display Records Side-By-Side on a FlexCard

Display records side-by-side instead of stacked by embedding a child FlexCard and adjusting the widths of
its states. By default, records display one on top of the other regardless of the widths of individual elements
in the FlexCard. To display records next to each other, embed a Child FlexCard whose width is at most 6
columns (50%) wide. See Adjust the Width of an Element on a FlexCard.
Create the Child FlexCard
1. Create a child FlexCard and add all the elements you want to display on each state. See Embed a
FlexCard Inside Another FlexCard
2. Click a state, and click Style to open the Style panel.
3. From the Dimensions section, under Default, use the slider to adjust the width of the state to at most
6.
For example, to display two records next to each other, select 6. To display 3 records next to each
other, select 4. To display 4 records next to each other, select 3.
TIP
Consider enabling responsiveness so that when your FlexCard is viewed on mobile
devices, your content looks good. For example, make the records full width when on
mobile devices, but 6 columns wide on tablets, and 3 columns wide on desktops. See
Create Responsive Elements on a FlexCard.
4. Repeat steps 2 and 3 for each state on your Child FlexCard.

5. Click Activate.

company 1417
OmniStudio
Embed the Child FlexCard in a FlexCard
1. Create a new FlexCard. See Create a New FlexCard. Or open an existing FlexCard from the
FlexCards home tab.
2. From the Build panel, drag a FlexCard element into an active state.
3. Click into Card Name and select the name of the child FlexCard you created in the above steps.
4. Click Setup, and uncheck Repeat Records. See Disable Record Looping on a FlexCard.
5. Click Preview to see your records displayed next to each other.
6. Click Activate.
What's Next
Configure Publish Options to define metadata values and add a custom component SVG icon for your
generated LWC. See Configure Publish Options on a FlexCard.

company 1418
OmniStudio
Arrange, Duplicate, and Remove Elements on a FlexCard

Arrange, duplicate, and delete elements on the canvas of a FlexCard in the FlexCard Designer. Drag
elements onto the canvas, and rearrange them by dragging them below, above, and next to other elements.
Duplicate and remove elements with one click.
1. To rearrange an element inside a state, or move an element between states, click and hold down the
element, then drag it to the desired position. Wait for the position indicator to appear at the desired
position before letting go.
2. To rearrange a state, click and hold down the state and move it up or down to the desired position.
3. To duplicate an element, click the element, and click the double square icon.
State
Element (not a State)

4. To delete an element, click the element, and click the trash icon.
See Also
• Adjust the Width of an Element on a FlexCard


company 1419
OmniStudio
Brand FlexCards Globally

Customize the appearance of FlexCards throughout your org with the Newport Design System. The
Newport Design System enables you to download, edit, and override the existing Newport CSS styles with
your own customizations. Newport includes Storybook.js, a browser-based preview tool that enables you to
see your changes in action.
Before You Begin

1. Create a new FlexCard, and select Newport as the Theme. See Create a New FlexCard.
1. Download Newport Design System and edit the CSS with your customizations. See Apply Global
Branding to FlexCards.
2. Upload the changes to your Salesforce org. See Deploy Global Style Changes to FlexCards with the
Newport Design System.
See Also
Apply Global Branding to FlexCards

Use the Newport Design System (NDS) to apply global style changes to FlexCards. The Newport Design
System enables you to download, edit, and override the existing Newport CSS styles with your own
customizations.
Before You Begin

1. Create a new FlexCard, and select Newport as the Theme. See Create a New FlexCard.
2. If you are unfamiliar with using command-line interfaces, see Command Line 101 (git-tower documentation).
3. System Requirements:
using a command-line interface. To see which components are provided by Newport, look at the UI/
components directory.
What's Next
Deploy the CSS to your Salesforce org. See Deploy Global Style Changes to FlexCards with the Newport
Design System.

company 1420
OmniStudio
See Also
Deploy Global Style Changes to FlexCards with the Newport Design System
Add any changes to the Newport Design System theme by uploading the theme in a Salesforce org. Install
your theme so that all FlexCard Designer users can use it to preview their FlexCards. Apply modifications
to the Newport templates by adding a Static Resource that overrides the Newport preview wherever it is
available.
Required Versions
Available beginning with Spring '19.
Before You Begin

1. Edit the Newport Design System templates as needed. See Apply Global Branding to FlexCards.
2. Create a distribution folder containing your changes by issuing the following command: npm run-script dist. The command
creates a zip file in the .dist/dist directory.
3. In versions prior to Spring '19, navigate to (cd to) the dist folder and zip its contents. (Do not zip the top-level dist folder: cd into it
and zip its content).
4. In Salesforce, upload the zip file as a static resource. See Defining Static Resources.
3. Preview your FlexCard in the FlexCard Designer Preview tab.
See Also
Preview a FlexCard
Preview your FlexCard's appearance and functionality before publishing it to a Lightning or Community
page. In Preview mode, test how your FlexCard looks on multiple devices and test the functionality of action
links and other interactive elements.
NOTE
The Navigate and OmniScript actions do not work in Preview. You must add them to a
Lightning or Community page to view them.

company 1421
OmniStudio
Before You Begin

• Create a FlexCard and configure its data source. See Create a New FlexCard.
• Add elements to your FlexCard. See Add Elements to a FlexCard.
1. In the FlexCard Designer submenu, click Preview.
IMPORTANT
If you don't see your content in the Preview canvas, check that you have granted
access to your org domains in Remote Site Settings. See Update Remote Site
Settings to Preview Your FlexCard.
2. (Optional) To add test parameters, click Add Test Params, and perform these tasks:
• Enter a Key, such as recordId. See FlexCards Context Variables.
• Enter a Value, such as an Account Id.
• Click Add to enter another parameter as a key/value pair.
3. To see how your FlexCard looks on different devices, select from the Viewport Dropdown.
NOTE
To enable elements to change widths in response to the width of the viewport, see
Create Responsive Elements on a FlexCard.
4. To test functionality, click actions and other interactive elements on your FlexCard.
What's Next
Activate your FlexCard. See Activate a FlexCard.
See Also

FlexCards Preview 'Add Test Params' Properties

FlexCards Add Test Params properties are available when previewing a FlexCard in the FlexCard
Designer. Preview the FlexCard's appearance and functionality before publishing it to a Lightning or
Community page. Enter additional test variables that your data source query can use to update your
Preview.
See Preview a FlexCard.
Key Enter a variable to test how and what data displays on your FlexCard. For example, enter pagelimit to update how
many pages display for a datatable.

company 1422
OmniStudio
Value Enter a test value. For example, if the Key is pagelimit, enter 2 to limit the number of pages to display on a datatable to
2.

Adjust the size of your FlexCard's canvas to test for responsiveness. Use the Viewport Dropdown in the
FlexCard Designer to mimic the sizes of a desktop, laptop, and smaller mobile devices.
The viewport size is saved when changed. After navigating away from the FlexCard Designer, toggling
between Design view and Preview, or reloading the page, the viewport size remains the same until you
change it.
2. In Design view, select a breakpoint from the Viewport Dropdown.
3. To view your FlexCard at different viewport breakpoints in Preview, see Preview a FlexCard.
What's Next
Enable elements to respond to different viewport widths. See Create Responsive Elements on a FlexCard.
See Also

Activate a FlexCard
Activate a FlexCard to generate an LWC and publish it to a Lightning or Community page. Activating a
FlexCard disables editing capabilities. You cannot add or edit elements on an active FlexCard.
Before Your Begin

Preview your FlexCard's appearance and test functionality before activating it. See Preview a FlexCard.

company 1423
OmniStudio
Activate from the FlexCard Designer
2. Click Activate in the submenu to initiate the activation wizard.
3. Click Done.
Activate from the FlexCards Home
1. In the FlexCards home tab in your org, click on a FlexCard to view available versions.
2. Select the checkbox next to the inactive FlexCard you want to activate.
3. Click Activate.
What's Next
Configure Publish Options to define metadata values and add a custom component SVG icon for your
generated LWC. See Configure Publish Options on a FlexCard.
See Also

Download a FlexCard LWC from the FlexCard Designer

Download your FlexCard LWC from the FlexCard Designer. Download your LWC to debug and inspect
issues.
WARNING
Do not redeploy the LWC back into your org.
Required Versions
Before You Begin

• You must activate your FlexCard to download its LWC.
2. From the FlexCard Designer submenu, click the down arrow next to Activate, and click Download
LWC.
3. Click Done.

company 1424
OmniStudio
See Also
Download an Off-Platform FlexCard LWC from the FlexCard Designer

Download an off-platform FlexCard LWC from the FlexCard Designer. Download your LWC to inspect code.
WARNING
Do not redeploy anywhere. Download to view code only.
Required Versions
Before You Begin

• You must activate your FlexCard to download its generated LWC.
2. From the FlexCard Designer submenu, click the down arrow next to Activate, and click Download
Off-Platform LWC.
3. Click Done.
See Also
Configure Publish Options on a FlexCard

Define metadata values and update the component SVG icon for your generated FlexCard LWC before
publishing your component to a Lighting or Community page. For example, to view your FlexCard on a
Community page you can enable Community Page under Targets in Publish Options. See Add a
FlexCard to a Community Page.
Before You Begin

• You must activate your FlexCard to configure Publish Options. See Activate a FlexCard.
2. From the FlexCard Designer submenu, click the down arrow next to Activate, and click Publish
Options.
3. To configure metadata values, see Define Metadata Values from the FlexCard Designer.
4. To update the SVG resource with a custom icon, see Add a Custom Component SVG Icon to a
FlexCard.

company 1425
OmniStudio
What's Next
Publish your FlexCard to a Lightning or Community page. See Add a FlexCard to a Lightning Page. See
Add a FlexCard to a Community Page.
FlexCards Publish Options Properties

FlexCard Publish Options properties are configurable after activating a FlexCard. Define metadata values
and update the SVG icon for your generated FlexCard LWC from the FlexCard Designer. See Configure
Publish Options on a FlexCard.

Master Label Update the visible name of generated LWC as you want it to appear in the Lightning Configuration File Tags
App Builder and Community Builder. The default is the Name you used to create the
FlexCard and, which is visible in the Setup panel.
Description Enter a description for your generated LWC. Configuration File Tags
API Version Defines the API version of your generated LWC. The default is the API version used Configuration File Tags
when creating the FlexCard. When creating a new FlexCard, the default value is the
current API version.
Runtime (Read-Only) Defines the Vlocity package namespace. Configuration File Tags
Namespace
Is Exposed When enabled, your card component is public. By default, this feature is enabled. Configuration File Tags
Targets Select where your generated LWC is accessible. By default, HomePage, Configuration File Tags
RecordPage, and AppPage are selected to enable use on a custom home page, a
record page, and an app home page.
To enable the use of your LWC on a Community Page, select CommunityPage. To

enable the use of your generated LWC on a Community Page with configurable
properties, select CommunityDefault.
Editor Manually configure meta data values. For example, add properties to a Target. Configuration File Tags
Add SVG Add an SVG resource as a custom icon for your generated LWC to easily identify it Add a Custom
Resource in the Experience Builder for Communities and Lightning App Builder for Lightning Component SVG Icon
pages. to a FlexCard
See Also

Define Metadata Values from the FlexCard Designer

Define the metadata values for the generated FlexCard LWC. With the Publish Options feature in the
FlexCard Designer, configure the metadata values for your generated LWC from a GUI or code editor. See
Configuration File Tags.
Before You Begin

• You must activate your FlexCard to view the Publish Options feature. See Activate a FlexCard.
Options.

company 1426
OmniStudio
3. Enter or update values for these properties:
Master Label Update the visible name of generated LWC as you want it to appear in the Lightning App Builder and
Community Builder. The default is the Name you used to create the FlexCard and, which is visible in the
Setup panel.
Description Enter a description for your generated LWC.
API Version Defines the API version of your generated LWC. The default is the API version used when creating the
FlexCard. When creating a new FlexCard, the default value is the current API version.
Runtime (Read-Only) Defines the Vlocity package namespace.
Namespace
Is Exposed When enabled, your card component is public. By default, this feature is enabled.
Targets Select where your generated LWC is accessible. By default, HomePage, RecordPage, and AppPage are
selected to enable use on a custom home page, a record page, and an app home page.
To enable the use of your LWC on a Community Page, select CommunityPage. To enable the use of your
generated LWC on a Community Page with configurable properties, select CommunityDefault.
Add Properties to a Target

To add properties to a Target, enter them manually from the Publish Options Editor.

company 1427
OmniStudio
What's Next
Add a custom component SVG icon to your generated FlexCard LWC. See Add a Custom Component SVG
Icon to a FlexCard.
See Also

Add a Custom Component SVG Icon to a FlexCard

Add an SVG resource as the custom icon for your generated LWC to easily identify it in the Experience
Builder for Communities and Lightning App Builder for Lightning pages. Use the Publish Options feature
on an activated FlexCard to update the default icon with a custom SVG resource.
Before You Begin

• You must activate your FlexCard to view the Publish Options feature. See Activate a FlexCard.

company 1428
OmniStudio
Options.
3. To upload a custom SVG resource, under Add SVG resource / Drop it here, click Choose File or
drag a file from your computer inside the dashed box.
4. Click Save.
What's Next
Configure metadata values for your generated FlexCard LWC. See Define Metadata Values from the
FlexCard Designer.
See Also

Add Custom Labels to Supported Fields on a FlexCard

Add custom labels to supported FlexCard element fields. For example, add custom labels if your FlexCard
supports multiple languages. Custom labels are custom text values that can be accessed from Apex
classes, Visualforce pages, or Lightning components. The values can be translated into any language
Salesforce supports. See Custom Labels.
FlexCards support the {Label} merge field on the following elements:
Element Supported Fields

Field Label, Placeholder
Text Inside the Rich Text Editor
Action Label
Before You Begin

1. View FlexCard element fields that support custom labels. See ???.
2. Confirm available custom labels in your org at Setup > Custom Labels. See Custom Labels.
2. Select a supported element, such as the Field element.
3. From the Properties panel, enter {Label.customLabelName} in a supported field. For example, to
display the AccountName custom label as the Label for a Field element that displays the name of an
Account, enter {Label.AccountName}.

company 1429
OmniStudio
What's Next
Enable multi-language support. See Enable Multi-Language Support on a FlexCard.
Pass Data from an LWC OmniScript to an Embedded FlexCard

To populate data fields and perform actions on a FlexCard embedded in an LWC OmniScript, you can pass
data from an OmniScript's Data JSON to the FlexCard. Embed a FlexCard inside an LWC OmniScript with
the Custom Lighting Web Component element. See Embed FlexCards in an LWC OmniScript.
There are three ways to pass data from the LWC OmniScript to the embedded FlexCard:
Options Description Reference

Pass a set of Use the records global context variable to map data from the LWC Map Data from an LWC OmniScript to
records OmniScript to an emdedded FlexCard. an Embedded FlexCard
Pass the Pass the recordId global context variable from the LWC OmniScript Pass the RecordId from an
recordId to the FlexCard. OmniScript to Run a Query on a
FlexCard
Pass a parent Pass a Parent object containing parent attributes to the FlexCard Pass a Parent Object from an LWC
object from the LWC OmniScript. The OmniScript is the parent of the OmniScript to Run a Query on a
embedded FlexCard. The Parent global context variable, such as FlexCard
{Parent.Id}, must be used in the FlexCard where the merge field
is supported.
Download a Sample DataPack

Download a sample DataPack that demonstrates how to pass a recordId, a Parent object, and a set of
records from the LWC OmniScript to an embedded FlexCard. See Download a Sample DataPack that
Passes Data from an LWC OmniScript to a FlexCard.
Map Data from an LWC OmniScript to an Embedded FlexCard

After embedding a FlexCard inside an LWC OmniScript, map records from the OmniScript to data fields in
the FlexCard. For example, populate a list of FlexCards from an array in an OmniScript. In this scenario,
the FlexCard uses data from the OmniScript instead of its own data source.
The data fields on the LWC OmniScript must exist in the FlexCard even if the values are empty. For
example, if your OmniScript Data JSON has Id, Name, Email, and Phone fields, these field names must
exist even if the value of Email or any other fields are empty in the data source of the embedded FlexCard.
1. In your org, go to the FlexCards tab and click a version of a FlexCard to open the FlexCard Designer.
Or, create a new FlexCard. See Create a New FlexCard.

company 1430
OmniStudio
2. In the Setup panel, select and configure the data source with data fields you want the OmniScript to
map.
For example, if your data source is a DataRaptor that gets a list of Accounts, confirm that the
DataRaptor Output fields selected include those your OmniScript Data JSON maps to. If your
OmniScript Data JSON has a Name field, so should the Output from the DataRaptor, and so on.
3. Click Save & Fetch.
4. From the Build panel, add elements such as Fields, Datatables, and so on onto the canvas. See Add
Elements to a FlexCard.
5. In the Setup panel, check OmniScript Support.
6. Click Activate.
7. Embed your FlexCard in an LWC OmniScript with the Custom LWC element in the LWC OmniScript
Designer. See Embed FlexCards in an LWC OmniScript.
8. In the Custom Lightning Web Component Properties section of the Properties panel, add parent-
data as the Property Name, and set the Property Source value to true.
9. Click + Add New Property.
10. Enter records as the Property Name, and in the Property Source field, enter the object in the Data
JSON that lists records that map to those in your FlexCard. Enter the object as a merge field using
OmniScript merge field syntax, such as %objectname%.
For example, if your list of records is stored in a JSON object called accounts, enter %accounts%.
11. Click Activate.
12. Click Preview to preview the FlexCard inside the LWC OmniScript.
See Also
Pass the RecordId from an OmniScript to Run a Query on a FlexCard

Pass the recordId context variable from an LWC OmniScript to an embedded FlexCard to run a query on
the FlexCard. The query returns the data that populates the FlexCard data fields and actions.
For example, if your FlexCard has a DataRaptor that gets Account Cases, the fields and actions get
updated based on the value of the recordId set in the LWC OmniScript Data JSON. If you use the {recordId}
merge field in your FlexCard such as in an SOQL query or a Text element, that data that relies on that
merge field is also updated based on the recordId coming from the LWC OmniScript Data JSON.
2. Configure your data source if you haven't already. See Configure a Data Source on a FlexCard.
3. Add data elements such as Fields, Actions, and so on, from the Build panel onto the canvas. See Add
Elements to a FlexCard.
5. Click Activate.
7. In the Custom Lightning Web Component Properties section of the Properties panel, add record-
id as the Property Name.

company 1431
OmniStudio
NOTE
Because the Property Name is an HTML attribute, it must be written in kebab case,
with words separated by a dash. See Property and Attribute Names.
8. Set the Property Source to a JSON node that contains a recordId. Use OmniScript merge field syntax,
such as %nodename%, to enter the node as a merge field.
For example, if your recordId is stored in a JSON node called ContextId, enter %ContextId%.
9. Click Activate.
10. Click Preview to preview the FlexCard inside the OmniScript.
See Also
Pass a Parent Object from an LWC OmniScript to Run a Query on a FlexCard

Pass a Parent object from the LWC OmniScript to the FlexCard. The LWC OmniScript is the parent of the
embedded FlexCard. The Parent context variable must be used in the FlexCard where merge fields are
supported, such as {Parent.Id}. See FlexCards Context Variables.
The parent object in the OmniScript Data JSON can be named anything as long as it is an object with fields
that match the name of the parent attribute that you want the OmniScript to look for in the FlexCard. For
example, the JSON object name can be parent or account, such as "parent" : {"Id" :
"1234567"} or "account" : {"Id" : "1234567"}.
2. Configure your data source if you haven't already in Step 1. See Configure a Data Source on a
FlexCard.
3. Add data elements such as Fields, Datatables, and so on, from the Build panel onto the Canvas. See
Add Elements to a FlexCard.
4. Add a {Parent} merge field, such as {Parent.Id}, in your FlexCard where merge fields are
supported such as in an SOQL query, a Text element, an Input Parameter, and so forth.
6. Click Activate.
8. In the Custom Lightning Web Component Properties section of the Properties panel, add parent-
attribute as the Property Name, and set the Property Source to the parent JSON object that
contains parent attributes. Use OmniScript merge field syntax, such as %objectname%, to enter the
node as a merge field.
For example, if your parent object is stored in a JSON object called account, enter %account%.
9. Click Activate.
10. Click Preview to preview the FlexCard inside the OmniScript.

company 1432
OmniStudio
See Also
Download a Sample DataPack that Passes Data from an LWC OmniScript to a FlexCard
Download a sample DataPack that demonstrates how to pass data from an LWC OmniScript to a FlexCard.
Import the DataPack to your org. See Pass Data from an LWC OmniScript to an Embedded FlexCard.
The sample DataPack demonstrates how to pass a recordId, a Parent object, and a set of records from the
LWC OmniScript to the embedded FlexCards.
What's Included
• A demoPassDataParentAttributeFC FlexCard displays Account data and whose SOQL Query data
source uses the {Parent.Id} merge field to determine the contextId.
• A demoPassDataRecordIdFC FlexCard displays Account data and whose SOQL Query data source
uses the {recordId} merge field to determine the contextId.
• A demoPassDataRecordIdDRFC FlexCard displays Account Case data and whose DataRaptor data
source uses the {recordId} merge field to determine the contextId.
• A demoPassDataParentDataRecordsFC FlexCard displays a list of accounts as a data table. The data
source is a basic SOQL Query.
• A demoPassDataLWCOStoFC LWC OmniScript with the following features:
• A Set Values Action with three element values: one that defines a ContextId; one that defines a Parent
object; and one that displays a list of records.
• A Step with 4 Custom LWC elements that display 4 FlexCards.
• A getCases DataRaptor gets a list of Account Cases.
1. Download the DataPack here: demoPassDataLWCOStoFC.zip.

IMPORTANT
Do not activate yet.
3. Open the demoPassDataParentAttributeFC FlexCard, click Setup, and update the Parent.Id
under Test Parameters with the ID of an Account record in your org.
4. Open the demoPassDataRecordIdDRFC and demoPassDataRecordIdFC FlexCards, click Setup,
and update the recordId under Test Parameters with the ID of an Account record in your org.
5. Open the demoPassDataLWCOStoFC OmniScript, click SetValues1, click Properties, and click Edit
Properties as JSON. Replace the values of ContextId and parentObj:Id with an Ids of Account
records in your org.
6. Activate all four FlexCards.
7. To Preview the FlexCards in the LWC OmniScript, activate the LWC OmniScript, and click Preview.

company 1433
OmniStudio
See Also

Reload a FlexCard After Updating an LWC OmniScript in a Flyout

Update information on a FlexCard after saving changes to an LWC OmniScript embedded in a flyout. Add a
Flyout action on a FlexCard that triggers an event, and create an event listener on the card to refresh.
When the card you want to refresh "hears" the event, it executes a Card Reload action.
Before You Begin

1. Create an LWC OmniScript, to embed in your FlexCard flyout. See Create an LWC OmniScript in the LWC OmniScript Designer.
2. Add a Navigation Action, and select Pub/Sub in the Messaging Framework section of the Properties panel.
1. Go to FlexCards home tab in your org and open a FlexCard in the FlexCard Designer. Or to create a
new one, see Create a New FlexCard.
2. To embed the LWC OmniScript in a flyout, drag an Action element from the Build panel onto the
canvas.
3. Select Flyout as the Action Type.
4. Click + Add New next to Attributes and enter the values for these settings as follows:
• Key: vlocEvents
• Value: Enter the name of the pubusb channel. This is typically the FlexCard you want to refresh. For
example, if the name of the FlexCard to refresh is AccountPolicy, enter that here.
5. If the FlexCard you want to refresh is different from this FlexCard, open that FlexCard from the
FlexCards home tab.
6. From the Setup panel click + Add New next to Event Listener, and enter the values for the settings as
follows:
• Event Type: Pubsub
• Channel Name: Enter the same of the vlocEvents attribute you entered in step 5. For example, if
your vlocEvents value is AccountPolicy, enter that here.
• Event Name: data
• Action Type: Card
• Type: Reload
Add a FlexCard to a Lightning Page

After creating and activating your FlexCard, publish your generated component to a Lightning page with the
Lightning App Builder. See Lightning App Builder.
1. In your org, go to Setup > Lightning App Builder and click Edit for an existing Lightning app to open the
Lightning App Builder. Or, on a Lightning record page, from the Setup menu, click Edit Page.
2. From the Components pane, find your generated FlexCard Lightning web component from the list of
Custom components, and drag it to the canvas area.

company 1434
OmniStudio
IMPORTANT
If you do not see your component listed, confirm that the appropriate Target is
checked in Publish Options. See Define Metadata Values from the FlexCard Designer
3. (Optional) In the properties panel, set Component Visibility. See Dynamic Lightning Pages.
4. To configure activation options, click Activation. See Activate Your Lightning App Page.
Add a FlexCard to a Community Page

After activating your FlexCardt, publish the generated LWC from the Experience Builder to a Community
page. See Experience Builder Overview.
1. In your org, go to Service Setup > All Communities and click Builder for an existing Community.
2. Click the blue and white lightning bolt icon on the left to open the Components pane.
3. From the list of Custom Components in the Components pane, find the name of your generated
FlexCard LWC and drag it to the canvas area.
IMPORTANT
If you don't see your FlexCard, confirm that it is active and available to Community
pages. See Define Metadata Values from the FlexCard Designer.
4. (Optional) In the properties pane, set Component Visibility. See Dynamic Lightning Pages.
5. Click Preview. See Preview Your Lightning Community with Experience Builder.
6. Click Publish.
Access the ContextId of a FlexCard on a Community Page

On a Community page, to view record data on a FlexCard that uses the {recordId} context variable in an
Input Map to pass a ContextId to an Apex Remote, DataRaptor, or Integration Procedure data source, you
must add and configure a recordId property. Add the recordId property in your FlexCard's configuration file,
then configure the property on the Community page.
1. From an active FlexCard in the FlexCard Designer, click the down arrow next to Activate in the
submenu, and click Publish Options.
2. Under Targets, select the CommunityDefault checkbox.
3. Click the Editor tab.
4. Inside the targetConfig tag, add a property tag with the name recordId and the type String.
<targetConfig targets="lightningCommunity__Default">
<property name="recordId" type="String" ></property>
</targetConfig>
5. Add your FlexCard to your Community page. See Add a FlexCard to a Community Page.
6. In the recordId property field, enter {!recordId}.

company 1435
OmniStudio
Configure Community Profiles for FlexCards

Ensure that your users see FlexCards on community pages by configuring user profile settings. Enable the
appropriate interface first. Then configure custom object permissions and Apex class access.
1. Ensure that you are using the Original Profile Interface by disabling the Enhanced Profile User
Interface. See Disable Enhanced Profile User Interface.
2. Grant access to the necessary custom objects. See Configure Custom Object Permissions.
3. Grant access to the necessary Apex classes. See Grant Apex Class Access to a Community Profile.
Disable Enhanced Profile User Interface

Enable the appropriate interface before configuring community profile settings that ensure that your users
see FlexCards on community pages. Use the Original Profile Interface.
See Also
• Configure Community Profiles for FlexCards
Configure Custom Object Permissions

Configure custom object permission to ensure that your users see FlexCards on community pages. Give
access to the necessary objects.
Before You Begin

• Ensure that you're using the Original Profile Interface. See Disable Enhanced Profile User Interface.

company 1436
OmniStudio
1. From Setup, type Users in the Quick Find box and click Profiles.
2. Find the profile for the users who will be accessing the community and click Edit.
3. Scroll to the Custom Object Permissions section.
4. Check View All for the following objects:
• Vlocity Actions
• Vlocity Cards
NOTE
You can't change Custom Object Permissions for any of the default profiles. For these
profiles, the checkboxes in this section are not selectable.
5. Click Save.
See Also
Grant Apex Class Access to a Community Profile

Configure Apex class access to ensure that your users see FlexCards on community pages. Give access to
the necessary Apex classes.
Before You Begin

• Ensure that you're using the Original Profile Interface. See Disable Enhanced Profile User Interface.
2. Find the profile for the users who will be accessing the community and click the profile name.
If you click Edit, you won't see the Enabled Apex Class Access settings.
3. Scroll to the Enabled Apex Class Access section and click Edit.
4. If namespace.CardCanvasController is not in the Enabled Apex Classes list, select it from the list
of Available Apex Classes and click Add.
For namespace see Viewing the Namespace and Version of the Vlocity Package.
5. Click Save.
See Also
FlexCards Versioning and Cloning

FlexCards supports versioning and cloning. You can create an identical copy of a FlexCard based on how
you want to use the new version.
Purpose Version or Clone?

To update a FlexCard already published on Lighting or Community pages, and elsewhere. Version
To make slight modifications to an existing FlexCard to test behavior and layout. Version

company 1437
OmniStudio
Purpose Version or Clone?

To create a new FlexCard but copy over layout, settings, or both. Clone
Versioning Vs Cloning
FlexCards Versioning
FlexCards supports versioning. You can create an identical copy of a FlexCard by creating a new version
and keeping other versions with the same name, and author, but with a new version number. Create a new
version when you want to make slight modifications to a FlexCard already published to Lighting or
Community pages, and elsewhere.
The name, author, and version combination must be unique for each component in an org. Only one
version of a component can be active at a time. When you create a new version of a FlexCard in the
FlexCard Designer, the version number increases by 1 and the Status is inactive. See Create a New
Version of a FlexCard.

company 1438
OmniStudio
Versioning Workflow
When you create a new version of a FlexCard in the FlexCard Designer, a new version is created
dynamically. You can't choose the author or name of the new version. To create a new FlexCard based on a
current FlexCard, and to update the Author and/or Name, you must clone your FlexCard. See Clone a
FlexCard.
The following table describes the fields involved in the versioning process:
Field Description
Name FlexCards are requested by name.
Author Specifies the user organization that created the FlexCard. Use author names that describe the team creating the content.
Version An integer that increases by one with every new version.
Active Indicates whether a record is active for run time use. One active record per name is allowed in an org. Activating a
component deactivates all other versions of the component with the same name. Only active records are exported when a
DataPack is created.
See Also
• FlexCards Versioning and Cloning

• FlexCards Cloning
• FlexCard Naming Conventions
Create a New Version of a FlexCard

Create a new version of a FlexCard in the FlexCard Designer when you want to make slight modifications
to a current. Creating a version of a FlexCard makes an exact copy with a version number equal to the
latest version number plus one. For example, if you already have two versions, the new version number will
be 3.
NOTE
To create a copy of a FlexCard with a new Name, or Author, or both, you must clone the
FlexCard. See Clone a FlexCard.

company 1439
OmniStudio
2. Click New Version in the submenu.
3. The new version of your FlexCard opens in a new tab and the Current Version is updated to the
previous version number plus one.
Left: Original FlexCard. Right: New version of FlexCard.
See Also
• FlexCards Versioning
FlexCards Cloning
FlexCards supports cloning. You can create a new FlexCard by cloning a current one to update the Author
and/or Name, and copy over layout and/or settings. See Clone a FlexCard.
The name, author, and version combination must be unique for each component in an org.

company 1440
OmniStudio
Cloning Workflow
If you need to create a new version of a FlexCard with the same Name and Author, and want to make slight
modifications to test behavior and layout between versions, version the FlexCard instead. See Create a
New Version of a FlexCard.
See Also

• FlexCards Versioning
• FlexCard Naming Conventions
Clone a FlexCard
Create an identical copy of a FlexCard with the Clone feature in the FlexCard Designer. Cloning an existing
FlexCard creates a new FlexCard with a new Name, or Author, or both. The Name and Author must be
unique. See FlexCards Cloning.

company 1441
OmniStudio
NOTE
To create a new version of a FlexCard with the same name and author, make minor
modifications, and compare between versions, see Create a New Version of a FlexCard.
2. Click Clone in the submenu.
3. If you're not changing the author, enter a new Name. Either the Name, or Author, or both must change.
4. If you're not changing the name, enter a new Author. Either the Name, or Author, or both must
change.
5. (Optional) Update the following properties:
• Update the Theme to Lightning (SLDS) or Newport.
• Update the Title of the rendered component visible in the component lists in the Lightning App
Builder and Community Builder.
• If disabled, enable Child Card to embed it inside another FlexCard.
• Update the Description that displays on the FlexCards tab.
6. Click Clone.
See Also
• FlexCards Clone Properties
FlexCards Clone Properties

This page lists FlexCards Clone Card properties available when cloning a FlexCard in the FlexCard
Designer.
Create an identical copy of a FlexCard with the Clone feature in the FlexCard Designer. See Clone a
FlexCard.

Card Name Enter the Name of your FlexCard. FlexCard Naming
Conventions
Card Title Enter a title for your FlexCard. The title is used to find your generated FlexCard n/a
LWC after activation in the Lightning App Builder and Community Builder
Theme Select a theme to determine the default design of your FlexCard. n/a
Card Author Enter the author of the FlexCard, such as the name of a department in your n/a
organization.
Is Child Card Enable to embed this FlexCard inside another FlexCard. Embed a FlexCard Inside
Another FlexCard
Description Enter a description of your FlexCard. n/a

company 1442
OmniStudio
FlexCard Naming Conventions

Follow requirements when naming FlexCards and FlexCard elements to prevent errors when working with
the FlexCard Designer and importing FlexCards as datapacks. For example, you may run into issues when
importing a FlexCard with the same name as one that already exists in your org.
FlexCard Naming Requirements
Requirements Examples
The combination of the card Name and Author must be unique in your Org. For example, • Name = AccountActive, Author =
if importing a FlexCard with the same name and author of a current FlexCard, you will be CustomerSales
asked if you want overwrite the current FlexCard in your org. • Name = AccountClosed, Author =
CustomerSales
The name and author must only contain underscores and alphanumeric characters. It must Not acceptable:
be unique, begin with a letter, not include spaces, not end with an underscore, and not
contain two consecutive underscores. • account$card!
• 2account__card
• $$account__card_
• account card
If you have multiple versions of a FlexCard, only one version can be active at a time. See N/A
FlexCards Versioning.
FlexCard names cannot be changed. You must clone a FlexCard to change the name. See N/A
Clone a FlexCard.
FlexCard Element Name Requirements
Requirement Examples
• Element Names cannot contain spaces and must be unique in Acceptable:
a FlexCard. It can contain any string combination of
alphanumerical and special characters. • address_block
• View_Account
• $account_revenue!
Not acceptable:
• address block
• View Account
• $account revenue!
See Also
Delete a FlexCard
Delete a FlexCard from the FlexCards home tab in your org. Once deleted it cannot be retrieved.
Before You Begin

• Deactivate the FlexCard you want to delete by clicking the Deactivate link in the submenu of the FlexCard Designer or the FlexCards
home tab.

company 1443
OmniStudio
1. From the FlexCards home tab, click a FlexCard to display available versions.
2. Click the checkbox next to the version to delete.
NOTE
You can delete an inactive version of a FlexCard added to a Lightning or Community
page if there is more than one version.
3. Click the trash icon.
NOTE
If the trash icon is disabled, check that the FlexCard is deactivated.
Import a FlexCard
Import a FlexCard as a DataPack from another environment into your org. To export a DataPack to import,
see Export a FlexCard.
1. From the FlexCards home tab, click Import.

2. Click Upload Files and select a DataPack from your computer to upload. Or, drag the file from the
computer to the Or drop files section.
3. Click Next.
4. Select the items to import.
5. Click Next.
6. Review the items to import.
7. Click Next.
8. To activate items from the imported FlexCard:
a. Click Activate Now.
b. Select the items to activate.
c. Click Next.
d. Click Done.
9. To activate items from the imported FlexCard later, click Activate Later.
What's Next
Update the data source of the imported FlexCard, and configure other Setup properties. See FlexCard
Setup Properties.

company 1444
OmniStudio
See Also
• Data Migration with Vlocity DataPacks
Export a FlexCard
Export a FlexCard as a DataPack to import to other environments. You can export one or more FlexCards
from the FlexCards home tab or from within the FlexCard Designer. See Migrating Data with Vlocity
DataPacks.
1. To export from the FlexCards home tab:

a. Click a FlexCard, and select the checkbox for the version to export.
b. Click Export.
2. To export from the FlexCard Designer:
a. From the FlexCards home tab, click a FlexCard, and click a version to open in the FlexCard
Designer.
b. Click the down arrow in the submenu and select Export.
3. Select the items to export.
4. Click Next.
5. Review the items to export.
6. Click Next.
7. (Optional) Update the Name.
8. (Optional) Update the Description.
9. To store the DataPack and access it later from the Vlocity DataPacks tab, select Add to Library.
10. (Optional) To publish the DataPack, click Publish. See Publishing DataPacks to Connected Orgs.
11. To download the DataPack to your computer, leave Download selected.
12. Click Done.
What's Next
Import a FlexCard to another environment. See Import a FlexCard.
FlexCards Context Variables

Global and local context variables are available to a FlexCard to provide context to data sources, actions,
and other components. All variables are case sensitive.
Global Variables
Name Description Merge Field

Label Salesforce Custom Labels. See Add Custom Labels to Supported {Label.mylabel}
Fields on a FlexCard.
For example, {Label.AccountName} gets a
custom label named AccountName.
Params The page parameters passed to the URL. {Params.fieldName}
For example, {Params.Id} gets the

ContextId. We recommend using
{recordId} to get the ContextId of a record.

company 1445
OmniStudio

Parent Reference attributes from the parent FlexCard on the child FlexCard {Parent.attributeName}
with this variable. Attributes are defined at design time on the parent
FlexCard. See Embed a FlexCard Inside Another FlexCard. For example, Parent.Id gets the {Id}
attribute defined on the parent FlexCard.
recordId Gets the contextId of a Salesforce object's data record. {recordId}
records The records object of the FlexCard, which can be passed on to Child {records}
FlexCard, Custom LWC, and Flyout parameters.
For example, {records} gets all records,
while {records [0]} gets the first available
record.
Session Variables used to store values from data sources, external systems {Session.sessionkey}
and hardcoded values. Properties are defined at design time on the
FlexCard. See Add Session Variables to a FlexCard. For example, {Session.pageLimit} gets a
session variable named pageLimit.
User User and Contact properties for the logged-in user. {User.property}
For example, {User.userName} gets the

logged in user's username.
NOTE
Rendered User context variable is viewable at
run time only. View in Preview.
Available properties:
• userId: User's Salesforce Id.

• userAnLocale: User's personal locale.
• userSfLocale: Salesforce org's locale.
• userCurrency: User's default currency.
• userLangudge: User's default language.
• userTimeZone: User's timezone.
• userName: User's username.
• userType: User's license type.
• userRole: User's role.
• userProfileName: Profile name from the Profile lookup.
• userProfileId: Salesforce Id from the Profile lookup.
• userAccountId: Salesforce id from the Account lookup.
• userContactId: Salesforce id from the Contact lookup.
Local Variables

action The parameters received by an event listener and sent to an {action.parameter}
action.
For example, if your event is sending you a contextId
parameter, then use {action.contextId}.
element The values set by the toggle element and tied to an action. {element.value}, {element.checked}
• Checkbox Toggle type: element.checked

• All other Toggle types: element.value

company 1446
OmniStudio

record The record object that belongs to the State, and passed on {record}, {record.FieldName}
to Child FlexCard, Custom LWC, and Flyout parameters.
For example, {record} gets the entire record, while
{record.Name} gets the Name field from the record.
FlexCards Troubleshooting Considerations

When working within the FlexCard Designer, you may run into issues that require some troubleshooting to
resolve. Before contacting support, consider these troubleshooting articles.
• Fix Cyclic Redundancy When Embedding FlexCard Components

When you embed components, such as flyouts, Custom LWCs, and Child Cards, check that components
are not called multiple times.
• Update Remote Site Settings to Preview Your FlexCard
Grant access to your org domains to enable LWC features such as Preview. When spinning a new org or
new installation, the Tooling API calls necessary for LWC may fail if the Remote Site Settings page in
your org does not include the URLs required.
Fix Cyclic Redundancy When Embedding FlexCard Components

When you embed components, such as flyouts, Custom LWCs, and child FlexCards, check that
components are not called multiple times. If you add components that call themselves or call other
components embedded inside components, you may create cyclic redundancy causing events to
continuously fire in your browser, exceeding your maximum call size stack.
Example 19. Example

Your FlexCard has a child FlexCard that calls an OmniScript that also calls the same parent FlexCard from
a flyout.
Solution
Confirm what components are called inside an embedded component before adding it to a FlexCard. Update the components that might
cause cyclic redundancy.
Update Remote Site Settings to Preview Your FlexCard

Grant access to your org domains to enable LWC features such as Preview. When spinning a new org or
new installation, the Tooling API calls necessary for LWC may fail if the Remote Site Settings page in your
org does not include the URLs required. The required URLs are your org's lightning.force.com URL and the
visualforce.com URL of the Visualforce page that contains the FlexCard Designer.
Depending on the package version installed in your org, you can dynamically or manually update the
Remote Site Settings. Select the method that applies to you.
Fix Option Versions

Dynamically Update Remote Site Settings Any version with FlexCards installed beginning with Summer '20
Manually Update Remote Site Settings (URLs Provided) Beginning with Vlocity Health and Insurance Spring '21
Manually Update Remote Site Settings (Find URLs) Any version

company 1447
OmniStudio
Dynamically Update Remote Site Settings
1. Go to the Vlocity Cards home tab.

2. Click Warnings.
3. Click Fix.
Results
In your org, go to Setup > Security > Remote Site Settings to confirm the addition of two new Remote Site
URLs:
Remote Site Name Remote Site URL

EnableLWC[timestamp] https://[MyDomain].lightning.force.com
EnableLWCPreview[timestamp] https://[MyDomain]--[namespace].visualforce.com

company 1448
OmniStudio
Manually Update Remote Site Settings (URLs Provided)

If you see a Warnings button in your OmniStudio FlexCards home tab, add missing URLs to your Remote
Site Settings.
1. Click the Warnings button in the OmniStudio FlexCards home tab and copy the visualforce.com
URL.
2. In a new browser tab, go to Setup > Security > Remote Site Settings.
4. Enter a Remote Site Name without spaces for the visualforce.com domain. For example, enter
LWC_VF.
5. Enter your copied visualforce.com URL in Remote Site URL. For example, enter https://
whitmanco--vlocity-ins.visualforce.com.
6. Confirm that the Active checkbox is enabled.
7. Click Save.
8. In your original browser tab, copy the lightning.force.com URL from the Warnings popup on the
OmniStudio FlexCards home tab.

company 1449
OmniStudio
9. Go to Setup > Security > Remote Site Settings and click New Remote Site.
10. Enter a Remote Site Name without spaces for the lightning.force.com domain. For example, enter
LWC_LF.
11. Enter the copied lightning.force.com URL. For example, enter https://
whitmanco.lightning.force.com.
12. Repeat steps 6 and 7.
Manually Update Remote Site Settings (Find URLs)
1. In your org, open any FlexCard to view the FlexCard Designer, and click the Preview link in the
submenu.
2. Right-click in the white space that contains your FlexCard content to view the menu options in a popup.
Select View Frame Source to open the iframe in a new browser tab, and copy your
visualforce.com domain from the address bar. For example, https://whitmanco--vlocity-
ins.visualforce.com.
3. In your org, go to Setup > Security > Remote Site Settings.

4. Confirm that your org domains are not listed in the Remote Site URL column.

company 1450
OmniStudio

LWC_VF.
9. Click Save.
LWC_LF.
12. Enter the lightning.force.com URL visible in the address browser bar on all pages in your org. For
example, enter https://whitmanco.lightning.force.com.
Classic Cards
Classic Cards in the Vlocity Cards Framework are UI components rich in information and actions relevant to
the customer's context. The Classic Card Designer is a declarative tool to create cards and card layouts,
with minimal HTML, CSS, and AngularJS coding.

company 1451
OmniStudio
NOTE
exclusive to LWC Cards. LWC Cards enables you to use standard JavaScript and HTML to
modify and extend Vlocity products. To learn more, see Vlocity Lightning Web
Components.
Cards
A Vlocity card is a block that contains a combination of pertinent information and links to processes within a
specific context. For LWC enabled cards, see, LWC Cards.
An account card, for example, includes unique account information, such as:
• Status
• Creation date
• Closing a case

company 1452
OmniStudio
Each action can launch an OmniScript to begin a guided process. An action can also open an external web
address or application. With an LWC enabled card, you can fire a pubsub event from an action. See Using
Actions with Cards. If your card is LWC enabled, see Using Actions with LWC Cards.
Card Flyouts
You can design a card to have an action that, when clicked, opens or "flies out" an additional card. A card
flyout contains additional information and actions related to the parent card. See Creating a Flyout. If your
card is LWC enabled, see Creating an LWC Flyout.
Card Layouts
A card layout contains one or more cards. To create a new card, you must create a card layout for it. See
Vlocity Layouts. If your card is LWC enabled, see Creating an LWC Flyout.
When you create a new card layout, you can:
• Choose existing cards to include in the layout

• Create new cards to include in the layout

company 1453
OmniStudio
Controlling the Look of Cards and Card Layouts

Each card and card layout is associated with a template that can use HTML and CSS/SCSS, and may use
Javascript. Templates control the style and appearance of the card and the card layout, and they can be
changed using the Template Designer. See Template Designer.
The Template Designer is not supported when LWC is enabled. See LWC Cards Considerations.
Data Sources for Cards and Card Layouts

When you create a card or a card layout, you indicate where it retrieves data to display. For a list of
possible data source types, see Configuring Data Sources for Cards Components.

company 1454
OmniStudio
Installing and Activating Vlocity Templates and Cards

After you install the latest Vlocity package, you must install and activate the base templates and cards. See
Base UI and Card Templates.
The base templates, layouts, and cards are the base components used by the Vlocity Lightning Console.
They serve as examples for custom components you might want to create.
1. Go to the Vlocity Templates tab and select Install BaseUITemplates from the picklist on the upper-
right.
a. Ensure that all items are selected and click Next.

company 1455
OmniStudio
b. Click Next again and click Done.

c. Click Activate Now.
If a template with the same name is already activated, a warning is displayed that the existing
template will be overwritten. You can clone or create a new version of the existing template or
deselect the new template that has a warning. See Cards Framework Versioning.
d. Click Next and Done.
2. Go to the Vlocity Cards tab and select Install BaseVlocityCards from the picklist on the upper-right.
a. Ensure that all items are selected and click Next.

b. Click Next again and click Done.
c. Click Activate Now.
If a component with the same name is already activated, a warning is displayed that the existing
object will be overwritten. You can clone or create a new version of the existing object or deselect
the new object that has a warning. See Cards Framework Versioning.
NOTE
If you use Vlocity Insurance or Vlocity Health, select the following:
• ins-product-rules-container (Author: Vlocity, Version: 2)

• ins-product-rules-eligibility (Author: Vlocity, Version: 2)
• ins-product-rules-requirements (Author: Vlocity, Version: 2)
d. Click Next and Done.
Configuring Community Profiles for Vlocity Cards

Ensure users see Vlocity Card Layouts on community pages by configuring user profile settings. Enable the
appropriate interface, and configure custom object permissions, Visualforce page access, and Apex class
access.
Disable Enhanced Profile User Interface

Ensure that you are using the Original Profile Interface.

company 1456
OmniStudio
Configure Custom Object Permissions
2. Find the profile for the users who will be accessing the community and click Edit.
3. Scroll to the Custom Object Permissions section.
4. Check View All for the following objects:
• Vlocity Actions
• Vlocity Cards
• Vlocity UI Layouts
• Vlocity UI Templates
NOTE
You can't change Custom Object Permissions for any of the default profiles. For these
profiles, the checkboxes in this section are not selectable.
5. Click Save.
Configure Visualforce Page Access
If you click Edit, you won't see the Enabled Visualforce Page Access settings.
3. Scroll to the Enabled Visualforce Page Access section and click Edit.
4. Make sure the following pages are in the Enabled Visualforce Pages list:
• namespace.CommunityCanvas
• namespace.ConsoleCards
• namespace.UniversalCardPage
For namespace see Viewing the Namespace and Version of the Vlocity Package.
5. Click Save.
Configure Apex Class Access
If you click Edit, you won't see the Enabled Apex Class Access settings.
3. Scroll to the Enabled Apex Class Access section and click Edit.
4. Make sure that namespace.CardCanvasController is in the Enabled Apex Classes list. See Viewing
the Namespace and Version of the Vlocity Package.
5. Click Save.

company 1457
OmniStudio
LWC Cards
Vlocity Lightning Web Components enables you to use standard JavaScript and HTML to modify and
extend Vlocity Cards. Vlocity Lightning Web Components enables embedding Vlocity Cards inside
OmniScripts, and leverages the Salesforce Lightning Web Components programming model for flyouts and
editable states. For information on Vlocity's Lightning web components, see Vlocity Lightning Web
Components.
NOTE
It is possible to switch a Card to either an LWC Card or an Angular Card at any time.
However, Angular Cards and LWC Cards do not support the same components and
functionalities. For more information on Card's Lightning web component support, see
LWC Cards Considerations.
NOTE
By default, LWC enabled Cards are exposed to the Lightning App Builder and are visible
as custom components. To change the visibility, use the Show XML Interface feature. See
Creating an LWC Card Layout.
LWC Cards Changes and Enhancements

LWC Cards contain changes to existing features that affect how you must configure an LWC Card and how
an LWC Card performs. See LWC Cards Considerations for unsupported features and functionality.
Changes and Enhancements for Vlocity Insurance and Health Summer '20
New Functionalities Exclusive to Vlocity Cards Lightning Web Components
Enable Newport From the Layout panel of the Card Designer, when LWC is enabled, you can also enable the Newport Design
System to load the Newport CSS resource to your LWC Card layout. Your layout and card templates must have
Newport support.

company 1458
OmniStudio
Changes and Enhancements for Vlocity Insurance and Health Spring '20

Configure Remote Site URLs From the Vlocity Cards tab, add Remote Site URLs to Fixing Inactive/Invalid Error When
on Vlocity Cards tab grant access to your org domains to enable LWC features. Enabling LWC on a Card Layout
Fire a Pubsub Event on an Fire pubsub events from an action to notify another Firing a Pubsub Event from an
Action component on a page or application of an event occurring Action on an LWC Card
on an LWC enabled card.
Optional Parameters for OS Configure ContextId, Console Tab Icon, and Console Tab Launching an LWC OmniScript from
Action Label on an OS Action when selecting an LWC enabled a Vlocity or Custom Action on a Card
OmniScript.
Changes in Functionalities Exclusive to Vlocity Cards Lightning Web Component

Card and Card Layout When creating a card or layout in the Card Designer, the name Card and Card Layout Naming
Naming Conventions and author must only contain underscores and alphanumeric Conventions
characters.
Configure the Metadata Configure metadata properties on an LWC enabled card with Configuring the Metadata
Values for an LWC Card an updated, more user-friendly Show XML Interface Values for an LWC Card
Download LWC Component In the Card Designer, download Custom LWC components Downloading Custom
templates and components only. Vlocity managed LWCs are Unmanaged LWCs From the
not downloadable. Card Designer
New LWC Card Templates
LWC Card Template Description

ActionGridState LWC Displays a vertical list of actions as icons followed by labels, and an optional title at the top. See Action Grid
State LWC Card Template.
Changes and Enhancements for Vlocity Insurance and Health Winter '20 and CME Winter
'20
Added Data Source Support
Data Source LWC Behavior Angular Behavior

Async/Queueable support on No change No change
Integration Procedures and Apex
Remotes
Dual No change No change
Streaming API The Streaming API data source is not supported in the Preview pane. No change
You must add your LWC enabled component to a Lightning or
Community page to preview it.

company 1459
OmniStudio

Click Tracking Supports only field tracking and action tracking. No change
OS Action OS Actions are fully supported. No change
Feature Description Reference

Custom Action Custom Actions support Salesforce PageReference Types that enable Adding a Custom Action to an
Target Types navigation within Lightning Experience, Communities, or an external LWC Card
web address.
Custom LWC Embed a custom Vlocity Lightning Web Component inside a card state. Embedding a Vlocity Lightning
Web Component Inside an LWC
Card State
Deploy LWC Explicitly save changes to an LWC enabled card layout by clicking the Creating an LWC Card Layout
Deploy button on a card or card layout.
LWC Flyout Use Flyout Properties to configure the attributes of a Vlocity Lightning Creating an LWC Flyout
Attributes Web Component used as a flyout on an LWC enabled card layout.
Smart Actions and Enable Smart Actions and standard actions, such as Vlocity Actions, Configuring Smart Actions on an
Standard Actions OS Actions, and Custom Actions at the same time. LWC Card
New LWC Card Templates
LWC Card Template Description

LeftAccountInfoState LWC Card Template Displays a card state template with account data listed in rows.
LeftProfileState LWC Card Template Displays account information with a google map image, up to three data fields, and up to
three actions.
Changes and Enhancements for Vlocity Insurance and Health Summer '19 and Vlocity
Processes Exclusive to Vlocity Cards Lightning Web Components
Process Change
Accessing Base Card While base card templates are readily available in the Summer '19 release package, they are also
Templates available through IDX Workbench for customization.
Add LWC Cards to Pages In the Lightning App Builder and Community Builder, you can add a Card directly from the Custom
components list of the Components pane to the canvas area.
Functionalities Exclusive to Vlocity Cards Lightning Web Components

Loop Settings Group the cards by object type or by the order they appear in the Creating an LWC Card Layout
database.
LWC Flyout Select any LWC enabled component as a flyout, such as an LWC card Creating an LWC Flyout
layout, an LWC OmniScript, and a custom LWC.

company 1460
OmniStudio

OmniScript To use a Card layout directly in the OmniScript Designer, add OmniScript Creating an LWC Card Layout
Support support to the generated Vlocity Lightning Web Component.
Show XML Show XML Interface provides a visual editor to configure the metadata for Creating an LWC Card Layout
Interface the Vlocity Lightning Web Component.
Smart Actions Configure a card to use a Vlocity Integration Procedure to return a set of Configuring Smart Actions on
actions. an LWC Card
LWC Cards Considerations

LWC Cards do not support all functions, features, and data sources that Angular Cards support.
IMPORTANT
See LWC Cards Changes and Enhancements for new features and enhancements.
Considerations for Vlocity Insurance and Health Winter '20
• Angular Card templates

• Template Designer
• Zones
• Placeholders
Unsupported Deployment Options

LWC Cards do not support any off-platform deployment. See Cards Framework Web Deployment Options
Considerations for Vlocity Insurance and Health Summer '19 and Vlocity
• Angular Card templates

• Template Designer
• Zones
• Placeholders
• Custom Actions
• Click Tracking

company 1461
OmniStudio
Unsupported Data Sources
• Streaming API
• Async/Queueable support on Integration Procedures and Apex Remotes
Unsupported Deployment Options

LWC Cards do not support any off-platform deployment. See Cards Framework Web Deployment Options.
Creating an LWC Card Layout

Create an LWC card layout to enable Vlocity Lightning web components.
With Vlocity Lightning Web Components, use standard JavaScript and HTML to modify and extend Vlocity
Cards, embed LWC Cards inside OmniScripts, and embed other Vlocity Lightning Web Components inside
card states.
Workflow Diagram for Creating an LWC Card
Create a New LWC Card Layout

To create a new LWC Card Layout:

company 1462
OmniStudio
1. In your org, click the App Launcher, click Vlocity Cards, and click New.
2. Enter a unique Layout Name and follow Vlocity required naming conventions and best practices. See
Card and Card Layout Naming Conventions.
NOTE
Beginning with Vlocity Insurance and Health Spring '20, when creating a card or
layout, the name and author must only contain underscores and alphanumeric
characters. It must be unique, begin with a letter, not include spaces, not end with an
underscore, and not contain two consecutive underscores. Existing layout names and
card names are automatically updated to make them compliant. New cards and
layouts can not be saved without following these naming requirements.
3. Select a Layout as the Layout Type.

4. (Optional) Update the Layout Author. See Understanding the Author of a Card Layout.
5. Click Enable LWC.
6. Click into the Layout LWC field to select an appropriate LWC layout template or component. For
example, select the Vlocity cardCanvasLayout template. See Base LWC Card and Layout Templates.
7. Click Save.
LWC Enable an Angular Card Layout

To enable an Angular card to work with Lightning web components:
1. In your org, click the App Launcher, click Vlocity Cards, and click a card layout version to open the
Card Designer.
2. If the card is active, deactivate it by clicking Activate in the Layout pane.
3. In the LWC Settings section of the Layout pane, click Enable LWC.
4. In the Layout LWC field, select an LWC card layout template, such as cardCanvasLayout. See
Base LWC Card and Layout Templates.
5. In the States pane, select a State LWC template for each card state, such as card-active-state.
6. Click Deploy in the Layout pane.
Configure Remote Site URLs

If you see the error, The LWC is inactive/invalid when trying to select a template in the Layout
LWC field, check that there are Remote Site URLs set in the Remote Site Settings page in your org. You
must grant access to your org's domain to enable LWC features. See Fixing Inactive/Invalid Error When
Enabling LWC on a Card Layout.

company 1463
OmniStudio
Configure LWC Settings

To configure optional LWC specific properties in the LWC Settings section of the Layout pane, see
Configuring LWC Settings on an LWC Card Layout.
What's Next
Next steps, configure other layout properties in the Layout pane, such as configuring a data source. See
Configuring Card Layout Properties.
See Also
• LWC Cards Changes and Enhancements

• Adding a Card to a Layout
• Adding a State to a Card
• Saving and Deploying an LWC Card in the Card Designer
• Previewing a Layout
• Adding an LWC Card to a Lightning or Community Page

company 1464
OmniStudio
• LWC Cards Considerations
Configuring LWC Settings on an LWC Card Layout

Configure LWC specific properties on your LWC Card layout.
After creating an LWC card layout, configure the optional layout properties in the LWC Settings of the
Layout pane of the Card Designer.

Enable Enable the Newport Design System to load the Newport CSS N/A
Newport resource to your LWC Card layout. Your Layout and Card
templates must have Newport support. See Apply Global Branding
to Vlocity Cards.
Include User Uses the $root.vlocity variable to return information about For example, to display the ID and the
Information the logged in user from the data source of a card layout. See name of the logged-in user on a card, enter
Cards Context Variables. $root.vlocity.userName in the
Search For field of a SOSL search.
Beginning with Vlocity Insurance and Health Winter '20 and
Vlocity CME Winter '20, LWC Cards support returning information
about the logged in user from the data source of a card, in
addition to a card layout, after enabling Include User
Information.
Loop Sets how to group the cards. To group cards by object type (such For example, if you have a card layout that
Settings as Cases, Accounts, Contacts), select Repeat Cards. To group displays a list of contacts, choose Repeat
cards by the order they appear in the database, select Repeat Records.
Records.
Omniscript Enables OmniScript to work with your LWC card layout. When N/A
Support enabled, the LWC card layout is usable in the Omniscript Designer
via the Custom LWC input element. See Launch Vlocity Cards
within an LWC OmniScript. The card must be active for the
OmniScript Support feature to work. The LWC card layout is a
standalone LWC that does not interact with the LWC OmniScript.
Show XML Sets the metadata for the component using a visual editor. For For example, select the CommunityPage
Interface more information on configuring metadata, see Component checkbox under Target Name to make your
Configuration File. The layout must be active to enable this LWC accessible on a community page.
feature. By default, the following metadata are set: Master Label,
API Version, Is Exposed, and AppPage, RecordPage, and
HomePage targets. See Configuration File Tags.
Saving and Deploying an LWC Card in the Card Designer

Beginning with Vlocity Insurance and Health,Winter '20 and Vlocity CME Winter '20, use the Deploy feature
in the Card Designer to update changes to your card, see the latest preview, and create the Lightning web
component to add to a Community or Lightning page.
To save and deploy:
1. Click the Deploy in the Layout pane.

company 1465
OmniStudio
IMPORTANT
If there are any changes to a card or card layout, a notification message appears
alerting you of changes to deploy.
2. Click Deploy in Preview If there are undeployed changes when attempting to preview your layout.
Configuring the Metadata Values for an LWC Card

Configure the metadata values for an LWC card from a visual editor in the card layout instead of updating
the configuration file manually.
To learn more about a component's configuration file, see Component Configuration File.
Defining Metadata Values

To define the metadata values for an LWC enabled card component:
1. Open the Vlocity Cards tab, and click a version of an LWC enabled layout to open the Card Designer.
2. In the Layout pane, click Show XML Interface.
IMPORTANT
You must activate the layout to enable the Show XML Interface feature.

company 1466
OmniStudio
3. Enter or update values for these properties:

• Master Label: Update the visible name of your card component as you want it to appear in the
Lightning App Builder and Community Builder. The default is the Layout Name defined in the Layout
pane.
• Description: Enter a description for your card component.
• API Version: Defines the API version of your card component. The default is the API version used
when creating the card component. When creating a new card, the default value is the current API
version.
• (Read-Only) Runtime Namespace: Defines the Vlocity package namespace.
• Is Exposed: When enabled, your card component is public. By default, this feature is enabled.
• Target Name: Select where your card component is accessible. By default, HomePage,
RecordPage, and AppPage are selected to enable use on a custom home page, a record page,
and an app home page.
To enable the use of your card component on a Community Page, select CommunityPage. To
enable the use of your card component on a Community Page with configurable properties, select
CommunityDefault. See Configuration File Tags.
To add a property to a Target Name that can be set in the Lightning App Builder or Community
Builder, see Adding Properties to a Target Name.

company 1467
OmniStudio
Adding Properties Beginning with Vlocity Insurance and Health Spring '20
Adding Properties to a Target Name

To add a property to a Target Name:
1. Click the pencil icon.
2. Click the + icon next to Add Properties.

company 1468
OmniStudio
3. In the Select Property Type (Required) field, to specify the property data type, select Integer, String,
or Boolean.
4. In the Attributes Added section, enter a variable name for the name attribute, such as debug. The
name attribute is required for each property.

company 1469
OmniStudio
5. Select additional attributes to add to your property from the Attributes dropdown list. See
Configuration File Tags for descriptions of each available attribute.

company 1470
OmniStudio
6. Enter a value for each additional attribute.

7. (Optional) If your Target Name is RecordPage, click into the Object field to select an object from the
picklist.

company 1471
OmniStudio
8. Click Save.
To edit or delete an existing property:
1. Click the pencil icon for the Target Name whose property you want to edit or delete.
2. Click the radio button next to the property name.
3. To edit the property, click the pencil icon.

company 1472
OmniStudio
4. To delete the property, click the x icon.
To remove an attribute from an existing property:
1. Click the pencil icon for the Target Name whose property attribute you want to remove.
3. Click the pencil icon for the property.
4. In the Attributes Added section, click the X next to the attribute you want to remove.

company 1473
OmniStudio
Adding Properties Prior to Vlocity Insurance and Health Spring '20
Adding Properties to a Target Name

To add a property to a Target Name:
1. Click the pencil icon.
2. Click the + icon next to Add Properties.

company 1474
OmniStudio
3. Add a variable name for the name attribute. The name attribute is required for each property, such as
debug.
4. In the Select Property Type (Required) field, to specify the property data type, select Integer, String,
or Boolean.

company 1475
OmniStudio
5. Select an additional attribute to add to your property from the Fields dropdown list. See Configuration
File Tags for descriptions of each available attribute.
6. Enter the attribute's variable name in the input field.

company 1476
OmniStudio
7. (Optional) If your Target Name is RecordPage, click into the Object field and start typing to choose an
object from the picklist.
8. Click Save.

company 1477
OmniStudio
To edit or delete an existing property:
1. Click the pencil icon for the Target Name property to edit or delete.
3. To edit the property, click the pencil icon.
4. To delete the property, click the x icon.

company 1478
OmniStudio
To remove an attribute from an existing property:
1. Click the pencil icon for the Target Name property attribute to remove.
3. Click the pencil icon for the property.
4. From the Fields dropdown, select the attribute to remove. This removes the attribute from the list of
added attributes.

company 1479
OmniStudio
Creating Custom LWC Card Templates

Create a custom LWC card template from an existing template, or from one of Vlocity's base mixins, such
as BaseState LWC for card states and BaseLayout LWC for layouts.

company 1480
OmniStudio
NOTE
Set up Your Environment

To manage and develop Vlocity Lightning Web Components, use Salesforce DX with Visual Studio or IDX
Workbench with Visual Studio. Both development approaches have source control. However, we
recommend IDX Workbench because it enables you to migrate Vlocity components from one org to another
and compare both source and target files.
• To manage and develop your LWCs with Salesforce DX, see Set Up Your Development Environment.
Create a New Custom LWC Card Template

Create a new custom LWC layout template by extending the BaseLayout mixin. See Creating a New
Custom LWC Layout Template.
Create a new custom LWC card state template by extending the BaseState mixin. See Creating a New
Custom LWC Card State Template.
Create a Custom LWC Card Template From an Existing Template

Create a custom LWC layout template by extending an existing layout template. See Extending a Template
to Create a Custom LWC Layout Template.
Create a custom LWC card state template by extending an existing state template. See Extending a
Template to Create a Custom LWC Card State Template.
Creating a New Custom LWC Layout Template

Create a custom template for an LWC layout by extending the BaseLayout Mixin. See BaseLayout
Lightning Web Component ReadMe.
Before you begin

Before creating a custom template, complete these tasks:
1. To manage and develop Vlocity Lightning Web Components, use Salesforce DX with Visual Studio or
IDX Workbench with Visual Studio. Both development approaches have source control. However, we
recommend IDX Workbench because it enables you to migrate Vlocity components from one org to
another and compare both source and target files.
• To manage and develop your LWCs with Salesforce DX, see Set Up Your Development
Environment.

company 1481
OmniStudio
2. Create a new component in your local development environment. See Create Lightning Web
Components.
Updating the JS File

In the JS file:
1. Import the BaseLayout mixin from your Vlocity namespace. See Viewing the Namespace and Version
of the Vlocity Package.
For example, if your namespace is vlocity_cmt:
import { BaseLayout } from "vlocity_cmt/baseLayout";

2. Import your custom HTML template.
For example, if your HTML file name is threeColCardCanvas.html:
import temp from "./threeColCardCanvas.html";

3. Confirm that your class declaration has the extends keyword.
For example, if your class is threeColCardCanvas:
export default class threeColCardCanvas extends

BaseLayout(LightningElement) {
Example JS
The following example overwrites the render() method that returns the HTML template.
import { LightningElement } from "lwc";

import { BaseLayout } from "vlocity_cmt/baseLayout";
import temp from "./threeColCardCanvas.html";
export default class threeColCardCanvas extends BaseLayout(LightningElement) {
render() {
return temp;
}
}
Creating the HTML Template

In the HTML template file:
• Inside the <template> tag, enter the HTML to create the structure and display the content of your
custom LWC layout template.
Example HTML
The following example shows a basic layout that uses the lightning-card component as a container to
group information.
<template>
<div class="via-slds">


company 1482
OmniStudio
<div class="slds-is-relative">
<vlocity_cmt-spinner
if:false={isLoaded}
variant="brand"
size="medium"
alternative-text="loading"
></vlocity_cmt-spinner>
</div>

<lightning-card title="My Title here">
<lightning-button label="Custom Button" slot="actions">
</lightning-button>
<p class="slds-p-horizontal_small">

<slot></slot>
</p>
</lightning-card>
</div>
</template>
Updating the Metadata XML File

In the metadata configuration XML:
• Set the runtimeNamespace metadata tag to your org's namespace. This enables your custom LWC
layout template to run within the Vlocity namespace, and access the BaseLayout mixin and other
components. See Viewing the Namespace and Version of the Vlocity Package.
NOTE
After deploying your LWC to your org, you can set or update other metadata values, such
as targets, masterLabel, apiVersion, and isExposed, with the Show XML Interface in the
Card Designer. See Configuring the Metadata Values for an LWC Card. The
runtimeNamespace cannot be set or updated in the Card Designer.
Example XML
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<masterLabel>Three Column Layout</masterLabel>
<runtimeNamespace>vlocity_cmt</runtimeNamespace>

company 1483
OmniStudio
Extending a Template to Create a Custom LWC Layout Template

Extend an existing template to create a custom LWC layout template. For example, use the
CardCanvasLayout LWC template to overwrite methods and HTML templates.
Before you begin

Before extending a template, complete these tasks:
Environment.
Components.

To see what methods can be overwritten for your extended component, view its ReadMe file. See Vlocity
Cards LWC ReadMe Reference and Base Vlocity LWC ReadMe Reference.
In the JS file:
1. Import the LWC template you want to extend from your Vlocity namespace. See Viewing the
For example, to extend the CardCanvasLayout LWC template:
import cardCanvasLayout from "vlocity_cmt/cardCanvasLayout";

2. Import your custom HTML template file.
For example, if your HTML file name is threeColumnCanvas.html:
import temp from "./threeColumnCanvas.html";

3. To overwrite the HTML template of the extended LWC template, use the render() method to return
your custom HTML template.
For example:
render() {
return temp;
}
For example, if your class is threeColumnCanvas:
export default class threeColumnCanvas extends cardCanvasLayout {

company 1484
OmniStudio
Example JS
The following example overwrites the render() method that returns the HTML template, and the
searchCard() method that searches for a record name.

import cardCanvasLayout from "vlocity_cmt/cardCanvasLayout";
import temp from "./threeColumnCanvas.html";
export default class threeColumnCanvas extends cardCanvasLayout {
render() {
return template;
}
searchCard = (event) => {

const recordName = event.target.value;
setTimeout(this.searchName(recordName), 500);
}
searchName(recordName) {
this.allRecords = this.allRecords ? this.allRecords : this.records;
if (this.allRecords) {
if (recordName) {
let data = [...this.allRecords];
let filteredRecords = [];
data.forEach(element => {
let val = element['Name'];
if (val && typeof val == "string" &&
val.indexOf(recordName) !== -1) {
filteredRecords.push(element);
}
});
this.records = filteredRecords;
} else {
this.records = [...this.allRecords];
}
this.setCardsRecords();
}
}
}

• If you choose to overwrite the HTML from the extended LWC template, enter the HTML to create the
structure and display the content of your custom LWC layout template.

company 1485
OmniStudio
Example HTML
The following example shows a basic card that extends the CardCanvasLayout LWC template. The
template shows how to reference Vlocity base components, such as Input LWC.
<template>
<div class="via-slds">
<div class="slds-grid slds-gutters">
<div class="slds-col">
<vlocity_cmt-input
oninput={searchCard}
size="x-small"
icon-name-left="utility:search"
placeholder="Search name."
></vlocity_cmt-input>
</div>
<div class="slds-col"></div>
</div>
<slot></slot>
</div>
</template>
Updating the Metadata Configuration XML

• Set the runtimeNamespace metadata tag to your org's namespace. This enables your custom LWC
layout template to run within the Vlocity namespace, and access the extended LWC layout template
and other components. See Viewing the Namespace and Version of the Vlocity Package.
NOTE
Example XML
The following example shows an LWC configured for visibility on a record page, app page, and home page.

<masterLabel>threeColumnCardCanvas</masterLabel>

company 1486
OmniStudio
<runtimeNamespace>vlocity_cmt</runtimeNamespace>
Creating a New Custom LWC Card State Template

Create a custom template for an LWC card state by extending the BaseState Mixin. See BaseState
Lightning Web Component ReadMe.
Before you begin

Before creating a custom template, complete these tasks:
Environment.
Components.

In the JS file:
1. Import the BaseState mixin from your Vlocity namespace. See Viewing the Namespace and Version of
For example, if your namespace is vlocity_ins:
import { BaseState } from "vlocity_ins/baseState";

For example, if your HTML file name is customActivetState.html:
import temp from "./customActiveState.html";

For example, if your class is customActiveState:
export default class customActiveState extends BaseState(LightningElement)

{
Example JS
The following example overwrites the render() method that returns the HTML template.

import { BaseState } from "vlocity_ins/baseState";
import temp from "./customActiveState.html";
export default class customActiveState extends BaseState(LightningElement) {

company 1487
OmniStudio
render() {
return temp;
}
}

• Inside the <template> tag, enter the HTML to create the structure and display the content of your
custom LWC card state template.
Example HTML
The following example shows a basic card that loops through fields and actions. The template shows how
to reference Vlocity base components like output-field and action.
<template>
<div if:true={selectedState} class="slds-p-top_small">
<div class="slds-card via-slds-card--active slds-m-bottom--small">
<div
class="slds-card__body slds-p-around-small slds-grid slds-wrap slds-
theme--default slds-p-around--medium"
>
<div class="slds-col--padded slds-size--1-of-2">

<div
key={field.name}
class="via-field slds-tile slds-p-bottom--medium"
for:each={state.fields}
for:item="field"
for:index="index"
onmouseleave={resetIcon}
>
<p
key={field.name}
class="slds-truncate slds-text-heading--label slds-p-right_large"
title={field.label}
>
{field.label}
</p>
<div
key={field.label}
class="slds-tile__detail slds-text-heading--small"
>

<vlocity_ins-output-field

company 1488
OmniStudio
record={obj}
field-name={field.name}
type={field.type}
></vlocity_ins-output-field>
</div>
</div>
</div>
<div class="slds-col--padded slds-size--1-of-2">


<template for:each={actions} for:item="item">
<div
class="slds-tile slds-p-top--x-small slds-p-bottom--medium slds-
truncate via-actions state-action-item "
key={item.id}
>

<vlocity_ins-action
state-obj={obj}
state-action={item}
></vlocity_ins-action>
</div>
</template>
</div>
</div> 

</div>
</div>
</template>
Updating the Metadata XML File

• Set the runtimeNamespace metadata tag to your org's namespace. This enables you custom LWC
card state template to run within the Vlocity namespace, and access the BaseState mixin and other
components. See Viewing the Namespace and Version of the Vlocity Package.

company 1489
OmniStudio
NOTE
Example XML

<masterLabel>Custom Active State</masterLabel>
<runtimeNamespace>vlocity_ins</runtimeNamespace>
Extending a Template to Create a Custom LWC Card State Template

Extend an existing template to create a custom LWC card state template. For example, use the
CardActiveState LWC template to overwrite methods and HTML templates.
Before you begin

Before extending a template, complete these tasks:
Environment.
Components.

To see what methods can be overwritten for your extended component, view its ReadMe file. See Vlocity
Cards LWC ReadMe Reference and Base Vlocity LWC ReadMe Reference.
In the JS file:
1. Import the LWC template you want to extend from your Vlocity namespace. See Viewing the
For example, to extend the CardActiveState LWC template:

company 1490
OmniStudio
import cardActiveState from "vlocity_ins/cardActiveState";

For example, if your HTML file name is customCardActiveState.html:
import temp from "./customCardActiveState.html";

3. To overwrite the HTML template of the extended LWC template, use the render() method to return
your custom HTML template.
For example:
render() {
return temp;
}
For example, if your class is customCardActiveState:
export default class customCardActiveState extends cardActiveState {
Example JS
The following example overwrites the render() method that returns the HTML template, and the
trackInteraction() method that tracks interactions.
import { LightningElement,track } from "lwc";

import cardActiveState from "vlocity_ins/cardActiveState";
import temp from "./customCardActiveState.html";
export default class customCardActiveState extends cardActiveState{
render() {
return temp;
}
trackInteraction(event) {
let element = event.target;
// custom code
}
}

• If you choose to overwrite the HTML from the extended LWC template, enter the HTML to create the
structure and display the content of your custom LWC card state template.
Example HTML
The following example shows a basic card that extends the CardActiveState LWC template. The template
shows how to reference Vlocity base components, such as Icon LWC.

company 1491
OmniStudio
<template>
<div if:true={selectedState} class="slds-p-top_small">
<div class="slds-card via-slds-card--active slds-m-bottom--small">
<table class="slds-card__body slds-p-around-small slds-wrap slds-
theme--default slds-p-around--medium">
<tr key={field.name} class="slds-tile slds-p-bottom--medium"
for:each={state.fields} for:item="field"
for:index="index" onmouseleave={resetIcon}>
<td key={field.name} class="slds-col slds-truncate slds-
text-heading--label slds-p-right_large"
title={field.label}>
{field.label}
</td>
<td key={field.label} class="slds-col slds-tile__detail
slds-text-heading--small">
<vlocity_ins-output-field record={obj} field-
name={field.name} type={field.type}>
</vlocity_ins-output-field>
</td>
<td class="slds-col slds-tile__detail slds-text-heading--
small">
<vlocity_ins-icon data-fieldindex={index}
onclick={trackInteraction} icon-name="utility:preview"
class="trackIcon" size="small"></vlocity_ins-icon>
</td>
</tr>
</table>
</div>
</div>
</template>
Updating the XML Metadata File

• Set the runtimeNamespace metadata tag to your org's namespace. This enables you custom LWC
card state template to run within the Vlocity namespace, and access the extended LWC card state
template and other components. See Viewing the Namespace and Version of the Vlocity Package.
NOTE

company 1492
OmniStudio
Example XML
The following example shows an LWC configured for visibility on a record page, app page, and home page.

<masterLabel>customCardActiveState</masterLabel>
<runtimeNamespace>vlocity_ins</runtimeNamespace>
Downloading Custom Unmanaged LWCs From the Card Designer

Download custom LWC layout and card state templates, and components from the Card Designer.
IMPORTANT
Beginning with Vlocity Insurance and Health Spring '20, the download feature is enabled
for custom LWC templates and custom components only.
To download a custom LWC layout or card state template or component from the Card Designer:
1. In your org, click App Launcher, click Vlocity Cards, and click a version of a card layout to open the
Card Designer.
2. To download a custom layout LWC template or component, in the Layout pane, click the download icon
next to the Layout LWC field.
3. To download a custom state LWC template or component, in the States pane, click the download icon
next to the State LWC field.
Creating an LWC Flyout

Flyouts in Vlocity Cards provide additional information about the record displayed on the card when you
click the flyout. For example, a flyout can display information from long text strings that do not fit in the
standard card field, or data from child records, such as open cases for an account, or additional actions.
With an LWC flyout, choose any LWC enabled component to use as a flyout, such as an LWC card layout,
an LWC OmniScript, and a custom LWC you've created.
Alternatively, create an LWC enabled flyout layout as you would create an Angular flyout.
To create an LWC flyout layout:
1. Go to the Vlocity Cards tab and click New to create a new card layout.
2. On the New Layout screen, in the Type field, select Flyout.
3. Click Enable LWC in the Layout pane.

company 1493
OmniStudio
4. (Optional) Configure the flyout Data Source if your flyout does not need to use data from the parent
context variable of the card layout where you'll add your flyout. See Configuring Data Sources for
Cards Components.
5. Click Activate on the Layout pane and on each card.
To add an LWC flyout to a card state:
1. Go to the Vlocity Cards tab and open a card.

2. In the Flyout section of a card state, select an LWC flyout or any LWC enabled component from the
dropdown list.
NOTE
You must activate the LWC enabled component for it to appear in the dropdown list.
See Creating an LWC Card Layout.
3. To set the attributes of the LWC enabled component, click Add Attributes in the Flyout Properties
section.
For example, the dataTable component requires values for both records and columns attributes
whose values must be data references. Enter records and $scope.records as the first key-value
pair to get the list of records and then enter columns and $scope.session.columns as the second
key-value pair to set column titles.
Embedding a Vlocity Lightning Web Component Inside an LWC Card State

Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, LWC Cards support
embedding any Vlocity Lightning Web Component, such as an LWC OmniScript, an LWC enabled card, or
any other custom LWC, inside an LWC Card state and setting the attributes of the embedded component.
A wrapper encases the custom LWC, which sits inside a slot and is fed data from the card's data source.
For example, if you have an LWC dataTable with custom styling, you can embed it in a card state. Then
configure the component's custom attributes, such as records and columns, on the card to determine how
and what data to pull from the card or card layout's data source.
Before you begin

Before embedding an LWC, complete these tasks:
1. Create a Custom LWC by extending an existing Vlocity Lightning web component. See Extend Vlocity
2. Create an LWC Card layout. See Creating an LWC Card Layout.
Embedding an LWC
To embed an LWC inside a card state:
1. Open the Vlocity Cards tab, and click a version of a card layout to open the Card Designer.
2. Check the Custom LWC checkbox of a card state.

company 1494
OmniStudio
3. Enter the name of a Lightning Web Component in the State LWC field. For example, enter dataTable
to show a list of accounts and related data from the card or card layout's data source.
4. In the Custom LWC Attributes section, enter attributes available to the embedded component as key-
value pairs.
For example, the dataTable component requires values for both records and columns attributes,
whose values must be data references. Enter records and $scope.records as the first key-value
pair to get the list of records, and then enter columns and $scope.session.columns as the
second key-value pair to set column titles.
IMPORTANT
The Name of a custom LWC attribute must match the custom LWC attribute's markup
name. For example, the targetType attribute from the NavigateAction LWC must be
written as target-type.
5. (Optional) In the Card Session Variables section of the card, enter a key-value pair for attributes
whose values have additional attributes, such as a JSON object.
For example, in the dataTable example, the columns attribute value must be a JSON object listing
record field names, used as column titles, and related properties. The session variable key is columns
and its value is [{"fieldName": "Name", "label": "Account", "sortable" : "true"},
{"fieldName": "Website", "label": "Website"},{"fieldName": "Phone",
"label": "Phone"}].
6. (Optional) To display a component once per record, check the Repeat state over records checkbox.
For example, if your Custom LWC gets account information, such as name, primary contact, and so
forth, select this option to display a component for each account record.
Accessing the Context Id of an LWC Card on a Community Page

On a Community page, to view record data on an LWC Card that uses the {{params.id}} context
variable in an Input Map to pass a context Id to an Apex Remote, DataRaptor, or Integration Procedure
data source, you must add and configure a recordId property. Add the recordId property in your LWC Card's
configuration file, then configure the property on the Community page.
To add and configure the recordId property:
1. Add the recordId property to the configuration file.

To add the recordId property from the Cards Designer:

company 1495
OmniStudio
a. Open the Vlocity Cards tab and click a card layout to open a version in the Cards Designer.
b. Click Show XML Interface in the Cards pane.
c. Select the CommunityDefault checkbox.
d. Click the pencil icon next to CommunityDefault.
e. Click the + icon next to Add Properties.
f. Add recordId as the variable name for the name attribute.
g. In the Select Property Type (Required) section, select String.
h. Click Save to save the property.
i. Click Save to save changes to the Metadata Configuration file.
To add the recordId property from your LWC Card's configuration file:
a. In your configuration file, add the targetConfig tag.
b. Inside the targetConfig tag, add a property tag with the name recordId and the type String.
<targetConfig targets="lightningCommunity__Default">
<property name="recordId" type="String" ></property>
</targetConfig>
2. Add your LWC card to your Community page. See Adding an LWC Card to a Lightning or Community
Page.
3. In the recordId property field, enter {!recordId}.
Using Actions with LWC Cards

LWC Cards use Vlocity Actions, OS Actions, Custom Actions, Smart Actions, and PubSub Actions to
launch procedures. For example, a card can launch an OmniScript, run an Apex class, redirect to a URL
endpoint, launch an Integration Procedure, fire a pubsub event, and so on.

company 1496
OmniStudio
• Vlocity Actions: Adds preconfigured actions created in the Vlocity Actions tool in your org. Vlocity
Actions are reusable on multiple cards. See Vlocity Actions.
• Custom Actions: Create an action unique to the card state. A custom action is not reusable on other
cards. See Adding a Custom Action to a Card.
• OS Actions: Launch an OmniScript from your card state. See Launching an OmniScript from an OS
Action on a Card.
NOTE
Beginning with the Vlocity Summer '19 release, launch an LWC OmniScript from an OS
Action. See Launching an LWC OmniScript from an OS Action on a Card.
• Smart Actions: Beginning with the Vlocity Summer '19 release, Vlocity supports generating and
returning actions to an LWC Card at runtime by using a Vlocity Integration Procedure, which reduces
server processing time, increasing performance. See Configuring Smart Actions on an LWC Card.
• PubSub Action: Beginning with Vlocity Insurance and Health Vlocity Spring '20, Vlocity supports firing
pubsub events from an action on an LWC Card. See Firing a Pubsub Event from an Action on an LWC
Card.
Adding a Custom Action to an LWC Card

Add actions directly on a card with Custom Actions. Custom Actions perform faster than standard Vlocity
Actions but have fewer configuration options. For reusable actions with additional configuration options, see
Vlocity Actions.
Beginning with the Summer '19 release, Vlocity supports Salesforce's Lightning Web Components
programming model with Vlocity Lightning Web Components. Vlocity Lightning Web Components include
components, functionalities, and templates exclusive to LWC Cards. See LWC Cards Considerations and
Configuring Smart Actions on an LWC Card.
To add a Custom Action to a card:
NOTE
In the code samples below, replace NameSpace with your org's Vlocity namespace prefix.
See Viewing the Namespace and Version of the Vlocity Package.
1. Open a card from the Vlocity Cards tab and click Add Custom Action in the card state.
2. In the Id field, to distinguish the action from other actions in the card designer, enter a unique name.
For example, ActiveAccountUpdate.

company 1497
OmniStudio
3. In the Display Name field, enter the name to display to the user. For example, Update Account.
4. In the URL field, enter the URL to which the action links. See Target URL and URL Parameters.
5. Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, in LWC Cards,
Custom Actions support Salesforce PageReference Types that enable navigation within Lightning
Experience, within Communities, or to an external web address. See PageReference Types.
From the Target Type drop-down, select a page reference type:
• App: Navigates to a standard or custom app available from the App Launcher in an org.
App Target The app that you are navigating to. Pass either the appId or appDeveloperName to the appTarget.
Type The standard or custom app available from the App Launcher.
Action Name Enter the name of the action.
API Name Enter the API name of the app.
RecordId Enter the record Id of the record to navigate to.
• Login: Navigate to a page for authentication into a community.
Target Actions Enter a valid action name to call.
Target Parameters Click Add Parameters to pass contextual data as key-value pairs. See Add Query Parameters.
• Component: Navigates to a Lightning component or a Lightning Web Component, such as a card or
an OmniScript.
Component Enter the component name. For example, NameSpace__vlocityLWCOmniWrapper.
Name

company 1498
OmniStudio
Target Click Add Parameters to pass contextual data as key-value pairs. For example, enter parameters to get
Parameters a specific OmniScript and set the layout type to Newport Designing System instead. In the first key-value
pair, enter NameSpace__target as the key and NameSpace:GetAccountDetails as the value. In
the second key-value pair, enter layout as the key and newport as the value.
• Knowledge Article: Navigates to a Knowledge Article.
Article URL Enter the article's urlName. For example, Client-Updates.
Target Article Type Enter the API name of the Knowledge Article record. For example, client_updates.
NOTE
In Lightning Knowledge, standard record types replace custom article types.
• Object: Navigates to a standard or custom object.
Object API Name Enter the API name of the standard Salesforce object or custom object. For example, Account for a
standard object, or NameSpace_Application__c for a custom object.
Target Action Enter action names to call. Valid values are home, list and new. See PageReference Types.
• Record: Navigates to a record.
Object API Name Enter the API name of the object, such as Account.
Target Action Enter a valid action name to call. Valid values are clone, view, and edit. Communities do not support
clone or edit.
Target Id Enter the record ID.
• Record Relationship: Navigates to a relationship on a particular record. Only related lists are
supported.
Object API Name Enter the API name of the object, such as Account.
Target Action Enter the valid action name to call. A valid value is view.
Target Id Enter the record ID that defines the relationship, such as an account's case record Id.
Target Relationship Enter the API name of the related object, such as Case.
• Named Page: Navigates to a standard Lightning page with a unique name.
Page Name Enter the name of a standard page in Lightning Experience. For example, enter
NameSpace__VlocityCardHome to navigate to the Vlocity Cards tab or home to navigate to the
landing page of your org.
Target Click Add Parameters to pass contextual data as key-value pairs. See Add Query Parameters.
Parameters
• Navigation Item: Navigates to a Custom Tab. Visualforce tabs, web tabs, Lightning Pages, and
Lightning Component tabs are supported.

company 1499
OmniStudio
Custom Tab Name Enter a custom tab name, such as NameSpace_Households for a Vlocity managed tab or
Console_Home for an unmanaged tab.
• Web Page: Navigates to a web address.
URL Enter an external web address, such as https://vlocity.com/.
• Community Named Page: Navigates to a Community page.
Community Page Name Enter a community page name. For example, contactsupport directs to the community url + '/
contactsupport'.
6. (Optional) Enter values for these properties:
• Vlocity Icon: Select a Vlocity icon or an SLDS icon to display next to the action link. For a complete
list of Vlocity Icons, go to the Vlocity Actions tab, open any action, and click the Vlocity Icons
header label to reveal the list of icons.
• Open URL in: Select Current Window or New Tab/Window to indicate where to open the URL.
To configure the action to invoke an Apex class, see Configuring Action Options.
Configuring Smart Actions on an LWC Card

Reduce server processing time and increase performance. Use a Vlocity Integration Procedure to generate
and return actions to an LWC Card at run time.
Before you begin
IMPORTANT
You must create an Integration Procedure before you can follow the steps on this page.
Configure Smart Action

To configure a Smart Action:
1. Click the Enable LWC button on a card to enable Smart Actions.

2. In a card state, select an sObject from the Salesforce Object Type dropdown.
3. In the Id Field for Actions field, add the ContextId available from the card's data source, such as Id.
4. Click the arrow next to the Smart Actions to reveal smart action options.

company 1500
OmniStudio
NOTE
Prior to Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, you must
click the Actions dropdown to select Smart Actions.
5. Click into the IP Name input field and select an existing Integration Procedure from the list that
appears. The Integration Procedure must include an Intelligence Action.
NOTE
Vlocity recommends using Vlocity Intelligence. However, you can use your own
machine learning framework with the schema outlined on this page.

company 1501
OmniStudio
IMPORTANT
The Integration Procedure must return the following schema. A Vlocity Intelligence
Action returns this schema by default.
[
{
"OfferRecommendation": "test",
"targetObjectType": "Vlocity Action",
"targetObjectKey": "open-claim",
"virtualResourceId": null,
"virtualResourceData": null,
"rejectLast": null,
"rejectDecay": 0,
"acceptLast": null,
"acceptDecay": 0,
"viewLast": null,
"viewDecay": 0,
"currentMachine": "smartCard",
"contextId": "02i3u0000099Ul0AAE",
"info": null,
"attachment": {
"Icons_-_Lightning_Design_System-3":
"00P3u00000dqZ1REAU",
"Smartcard": "00P3u00000dk5JvEAI",
"Ranking": "00P3u00000dZWuaEAG"
},
"scaledRawScore": 100,
"formattedAggregatedScore": 1,
"aggregatedScore": 1,
"componentScores": [
{
"scoreParameters": [
{
"score": 100,
"objectTypeString": "vlocityins2__Attribute__c",
"name": "OpenClaim",
"identifier": "openClaim"
}
],
"scaledScore": 1,
"normalizedScore": 1,
"rawMaxScore": 100,
"rawMinScore": 0,

company 1502
OmniStudio
"rawMultiplier": 1,
"rawScore": 100,
"scoringComponentName": "VqScoringImplProfileMatch"
}
],
"resource": {
"vlocityins2__TargetObjectType__c": "Vlocity Action",
"vlocityins2__TargetObjectKey__c": "open-claim",
"vlocityins2__IsActive__c": true,
"vlocityins2__Headline__c": "There is open claim!",
"vlocityins2__EffectiveDate__c":
"2019-11-07T08:00:00.000Z",
"vlocityins2__Description__c": "There is open claim.
Please handle.",
"SystemModstamp": "2019-12-18T22:19:25.000Z",
"LastModifiedById": "0056A000000taWIQAY",
"LastModifiedDate": "2019-12-18T22:19:25.000Z",
"CreatedById": "0056A000000taWIQAY",
"CreatedDate": "2019-11-13T01:59:48.000Z",
"Name": "Open Claim",
"IsDeleted": false,
"OwnerId": "0056A000000taWIQAY",
"Id": "a3k3u000000OJ8NAAW"
}
},...
]
6. Enter the values for the following if the Integration Procedure requires them:
• Input Map. Enter name-value pairs in this field to send input parameters to the Integration
Procedure.
• Options Map. Enter name-value pairs in this field to send optional parameters to the Integration
Procedure.
Firing a Pubsub Event from an Action on an LWC Card

Beginning with Vlocity Insurance and Health Vlocity Spring '20, Vlocity supports firing pubsub events from
an action to notify another component on a page or application of an event occurring.
For example, create an action link that fires a pubsub event called openPolicy that opens a Policy record
page from any component that listens for the event.
Before you begin

Create an event or get the name of the event to fire.
Configure PubSub Action

To fire a pubsub event from an action an LWC Card:

company 1503
OmniStudio
1. Open the Vlocity Cards tab, and click a layout to open a version in the Card Designer.
2. In the Actions section of a State, click + Add PubSub Action.
3. In the Id field, to distinguish the action from other actions in the Card Designer, enter a unique name.
For example, openPolicy.
4. In the Display Name field, enter the name to display to the user. For example, Go to Policy.
5. (Optional) In the Vlocity Icon field, select a Vlocity icon or an SLDS icon to display next to the action
link. For a complete list of Vlocity Icons, go to the Vlocity Actions tab, open any action, and click the
Vlocity Icons header label to reveal the list of icons.
6. In the Event Name field, enter the name of an event to fire.
7. In the Message field, enter a message for the event.
8. (Optional) Check the Actions Options checkbox to pass Custom Parameters and add Conditions.
See Configuring Action Options.
Adding an LWC Card to a Lightning or Community Page

After enabling and activating your LWC Card, add your card to a Lightning Page or Community Page.
To add an LWC Card to a Lightning Page:
1. In your org, go to Setup > Lightning App Builder and click Edit for an existing Lightning app to open the
Lightning App Builder.
2. From the Lightning Components pane, find your generated Card Lightning web component from the list
of Custom components and drag it to the canvas area.
IMPORTANT
By default, active layouts are visible for all page types in the Lightning App Builder. If
you don't see your LWC Card, confirm that it is active and available to your Custom,
Home, or Record page app. In your Card, check that the correct Target Name is
checked in your Show XML Interface settings. See Configuring the Metadata Values
for an LWC Card.
4. Save and Activate your app.
To add an LWC Card to a Community Page:
1. In your org, go to Service Setup > All Communities and click Builder for an existing Community to
open the Community Builder.
3. From the list of Custom Components in the Components pane, find the name of your generated Card
Lightning web component and drag the Card to the canvas area.

company 1504
OmniStudio
IMPORTANT
If you don't see your LWC Card, confirm that it is active and available to the
Community Builder. In your Card, check that the appropriate Target Name is checked
in your Show XML Interface setting. See the Show XML Interface step in Creating an
LWC Card Layout.
IMPORTANT
If your LWC Card uses the {{params.id}} context variable in an Input Map to pass
a context Id to an Apex Remote, DataRaptor, or Integration Procedure data source, to
view the record data on the LWC Card on your Community page, you must create and
configure a recordId property. See Accessing the Context Id of an LWC Card on a
Community Page.
5. Preview or Publish your community.
Reloading a Smart Card After Updating Profile Attributes

To reload a card with Smart Actions when profile attributes update, add a Vlocity Profiler component on a
Lightning or Community page. When profile attributes update, the Vlocity Profiler component fires a
smartAction event that reloads Smart Actions on an LWC Card.
To learn how to add and configure the Vlocity Profiler component, see Adding Profile Attributes to a
Lightning or Community Page.
To learn how to add and configure Smart Actions on an LWC Card, see Configuring Smart Actions on an
LWC Card.
Replacing Actions on an LWC Customer Story Card

Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, the LWC Customer
Story Card supports replacing the preconfigured list of actions with a custom list of actions. Each action
creates a new record for a standard or custom sObject.

company 1505
OmniStudio
In the Layout Session Variables section of the LWC enabled story-slds card, the actions session stores
the preconfigured list of new record actions as a comma-separated list of objecType:label pairs:
Case:Case,Task:Task,Order:Order,Note:Note,Campaign:Campaign,Event:Event,Opportu
nity:Opportunity

company 1506
OmniStudio
The preconfigured list displays by default and when the data source of the story card return no records.
To override the list of preconfigured actions on a Customer Story card:
1. In your org, go to Setup > Custom Code > Custom Settings.

2. Click the Story Object Configuration link.
3. Click the Manage button, and then click Edit link next to the object of the action to enable.
4. Check the Enable New Action checkbox.
5. In the New Action Name field, enter the visible name of the new action. For example, after enabling
the Account_Opportunity action, enter Opportunity as the action name. If the action is enabled but
this field is empty, the text from the Story Object Name field displays. See Customer Story
Configuration.
6. To view the new list of actions, visit the Lightning or Community page where the Customer Story is
published, and click the New button. For example, enabling the Account_Opportunity and
Account_Case actions displays only these two actions.

company 1507
OmniStudio
IMPORTANT
If there are no records for any one of the enabled new actions, the Customer Story
card displays the preconfigured list of actions defined in the actions session of the
LWC enabled story-slds card.
Fixing Inactive/Invalid Error When Enabling LWC on a Card Layout

Grant access to your org domains to enable LWC features.
When spinning a new org or new installation, the Tooling API calls necessary for Vlocity LWC may fail if the
Remote Site Settings page in your org does not include the URLs required.
The required URLs are your org's lightning.force.com URL and the visualforce.com URL of the Visualforce
page that contains the Card Designer.
Fix Beginning with Vlocity Insurance and Health Spring '20

If you receive a warning on your Vlocity Cards home page, and the error message, The LWC is
inactive/invalid, on a card layout after enabling LWC, the required Remote Site URLs are missing.
You can automatically register your org domains in one click from the Vlocity Cards home page.

company 1508
OmniStudio
To register your org domains:
1. Open the Vlocity Cards tab.

2. Click Warnings.
3. Click Fix.

company 1509
OmniStudio
Results
In your org, go to Setup > Security > Remote Site Settings to confirm the addition of two new Remote Site
URLs:
Remote Site Name Remote Site URL

EnableLWC[timestamp] https://[myDomain].lightning.force.com
EnableLWCPreview[timestamp] https://[myDomain]--[vlocityNameSpace].visualforce.com
Fix Prior to Vlocity Insurance and Health Spring '20

If you see the error, The LWC is inactive/invalid, after enabling LWC on a card layout, manually
register your org domains on the Remote Site Settings Page in your org.

company 1510
OmniStudio
To register your org domains:
1. In your org, click the App Launcher, click Vlocity Cards, right-click anywhere in the tab, select Frame
Source to open the iframe in a new browser tab, and copy your domain from the address bar. For
example, copy https://whitmanco--vlocity-ins.visualforce.com.

company 1511
OmniStudio
2. In your org, go to Setup > Security > Remote Site Settings.

3. Confirm that your org domains are not listed in the Remote Site URL column.

company 1512
OmniStudio

LWC_VF.
8. Click Save.
9. Repeat step 4.
LWC_LF.
11. Enter the lightning.force.com URL visible in the address browser bar on all pages in your org. For
example, enter https://whitmanco.lightning.force.com.
Base LWC Card and Layout Templates

The following tables list the LWC card templates and LWC layout templates available in Vlocity Cards.
When editing a template, it is best practice to make a copy of the existing template first and to edit the
cloned version. For more information on creating and cloning LWC card templates, see Creating Custom
LWC Card Templates.
LWC Card and Layout Templates

Apply card and layout templates to a Vlocity LWC enabled card to control the information and actions
available to a user.

company 1513
OmniStudio
LWC Card Layout Templates

LWC layout templates are containers for card templates and control how the cards display. For more
information on Layouts, see Vlocity Layouts.
To apply an LWC layout template:
1. In the Layout pane of a Vlocity Card, ensure the Type is set to Layout.
2. Enter a layout name in the Layout LWC field.
Card Layout Template Description Card Layout Compatible Card

Preview Templates
cardCanvas1x Displays a one-column container. Any
cardCanvasLayout Displays a one-column container with a header that Any

includes a search box and room for an optional title before
the search box.
LWC Card Templates

LWC card templates control how card information displays on a card.

company 1514
OmniStudio
To apply an LWC card template:
1. In the Cards pane of a Vlocity Card, ensure your card is not active.
2. In the States pane of a Vlocity Card, enter a card template name in the State LWC field.
Card Template Description Template Compatible

Preview Card Layout
Templates
actionGridState Displays a vertical list of actions as icons followed by labels, and an Any
optional title at the top.
cardActiveState Displays a card with an image and title in a header, and a two-column body Any
with a list of fields in the first column and a list of actions in the second
column. Has flyout functionality.
cardMiniActive Displays a two-column card with an image or icon in the first column, and Any
data and actions in the second column. Has max-height and truncates
descriptive text at 2 lines.
cardOpenState Displays a card as a centered image and text block that links to the first Any
action. Remaining actions display in an inline grid beneath the image and
text block. Has flyout functionality.
wideCard Displays a wide layout with an image, a list of actions, the status of the Any
card state, and a list of fields as an inline grid. Has flyout functionality.
wideCardSlim Displays a wide layout with an image, a list of actions, the status of the Any
card state, and a list of fields as an inline grid.
wideCardSmart Displays a wide layout with an image, the status of the card state, a list of Any
fields as an inline grid, and displays a list of Smart Actions. Has flyout
functionality. See Configuring Smart Actions on an LWC Card.
Flyout Templates
Flyout templates enable users to view information or access additional actions for the current record or a
child record. To create a flyout layout template, see Creating a Flyout.
To apply an LWC flyout template:
1. In the Layout pane of a Vlocity Card, ensure the Type is set to Flyout.
2. Enter a layout name in the Layout LWC field:

company 1515
OmniStudio
Card Template Description Template Compatible Card Layout

Preview Templates
storyEditStateFlyout Displays the parent story item edit fields in a storyCardCanvas
Lightning form.
Console Card and Layout Templates

Console card and layout templates enable multiple records to be accessible and actionable all from the
same view. Apply console cards and layouts to service Vlocity Service Console apps. For more information
on Vlocity Service Console apps, see Building a Vlocity Service Console App.
Console Card Layout Template

Console card layout templates are containers for console cards and control how console cards display.
Card Layout Template Description Template Compatible Card

Preview Templates
storyCardCanvas Displays story cards inside a one-column container storyNormalState,
that has a header, which includes a title and a storyOngoingState
search box.
Console Card Templates

Console card templates control how information on a console card displays.
Card Template Description Template Compatible Card

Preview Templates
leftAccountInfoState Displays account data listed in rows. Any
leftProfileState Displays account information as a static google map, up to Any

three data fields, and up to three actions.
profileCardState Displays profile information as a static google map, data Any
fields, and actions.
storyNormalState Displays a story item as an image in the first column, and the storyCardCanvas
title and data fields in the second column.

company 1516
OmniStudio
Card Template Description Template Compatible Card

Preview Templates
storyOngoingState Displays a story item as an image in the first column, and the storyCardCanvas
title, subtitle, and fields in the second column.
Vlocity Cards LWC ReadMe Reference

This page lists the Lightning web component ReadMes available for LWC Cards. For details about the
layout for each card and card layout component, see Base LWC Card and Layout Templates.
Card Template ReadMes
ActionGridState Displays a vertical list of actions as icons followed by labels, and an optional title at the top.
CardActiveState A card state template with a header
CardMiniActive A card state template without a header.
CardOpenState A simplified card state with a centered linked image and additional links below as actions.
LeftAccountInfoState A console card template displaying simplified account data.
LeftProfileState A console card template that displays acccount information with a google map as a background header and
limited data fields and actions.
ProfileCardState A console card template that displays account information with no limit on data and actions.
StoryEditStateFlyout Customery story console card template displays as a flyout.
StoryNormalState Customer story console card that displays story data as a card's default state.
StoryOngoingState Customer story console card that displays story data.
WideCard A card template with a wide layout for one-column layouts with a header.
WideCardSlim A card template with a wide layout for one-column layouts without a header.
WideCardSmart A card template with a wide layout for one-column layouts that work with Smart Actions.
Layout Template ReadMes
CardCanvas1x A one-column layout without a header.
CardCanvasLayout A one-column layout with a header.
StoryCardCanvas A one-column console layout for customer story cards.
Action Grid State LWC Card Template

This page contains the Action Grid State LWC Card Template ReadMe for each Vlocity release.

company 1517
OmniStudio

The ActionGridState LWC Card Template displays a list of actions. The header includes a title set by a
session variable. The body is a single column of actions where each row displays an action icon followed
by the action label.
Available ActionGridState Features
Feature Description
theme Specifies which theme to use, slds or nds.
title If the session title variable is set, it displays as the card title. If the session title variable is not set, a card title is not
shown.
actions Lists the actions configured. Actions display as a vertical list. Each row has an action icon followed by the action label.
CardActiveState LWC Card Template

This page contains the CardActiveState ReadMe for each Vlocity release.
The CardActiveState LWC Card Template displays a card state template for a card active state. The layout
includes a header with image and title, has flyout functionality, and field tracking capability. The body is a
two-column section, where data fields display as block elements in the first column and actions display as
block elements in the second column.
Available CardActiveState Features
Feature Description
header icon Displays an icon in the header. By default, displays the sObject type icon.
header title Displays the title of the card. By default, the title of the card is the first field configured.
fields Lists the data fields configured. Data fields display in the first column.
actions Lists the actions configured. Actions display in the second column.
tracking On focus, each field displays an eye icon that triggers tracking when clicked.
flyout By default, this template has a flyout. When a user clicks the expand icon, the configured flyout displays in a modal.
CardCanvas1x LWC Layout Template

This page contains the CardCanvas1x LWC Layout Template ReadMe for each Vlocity release.
The CardCanvas1x LWC Layout Template displays a one column LWC card layout template.
Available CardCanvas1x Features
Feature Description
cards The layout displays cards with one card in each row.

company 1518
OmniStudio
CardCanvasLayout LWC Layout Template

This page contains the CardCanvasLayout LWC Layout Template ReadMe for each Vlocity release.
The CardCanvasLayout LWC Layout Template displays a one column LWC card layout template with a
header that includes a title and a search box.
Available CardCanvasLayout Features
Feature Description
title Sets the layout title.
search bar When a user enters text into the search box, only cards containing that text displays.
cards The layout displays cards with one card in each row.
CardMiniActive LWC Card Template

This page contains the CardMiniActive LWC Card Template ReadMe for each Vlocity release.

The CardMiniActive LWC Card Template displays a card state template with two columns. An icon or image
displays in one column, while the data fields and actions display in the other column. The component has a
max-height of 132px and truncates descriptive text to two lines. The user can configure multiple images
with session variables. However, one image is recommended.
Available CardMiniActive Features
Feature Description
fields By default, the title of the card is the first data field configured. The remaining data fields display as blocks.
actions, smartActions By default, actions display below fields. Only two actions are visible at anypoint based on the order added.
session Specifies session variables to add to the card. See Available session Variables on this page.
Available session Variables
Variable Description
leftImage Sets the left image URL. For example, /image-url.jpg. URL can be relative or absolute.
leftIcon Sets the left icon. For example, standard:icon
rightImage Sets the left image URL. For example, /image-url.jpg. URL can be relative or absolute.
rightIcon Sets the right icon. For example, standard:icon
imageStyle Sets the css style for both left and right images. For example, height: 100px; border: 1px;
The CardMiniActive LWC Card Template displays a card state template with two columns. An icon or image
displays in one column, while the data fields and actions display in the other column. The user can
configure multiple images with session variables. However, one image is recommended.

company 1519
OmniStudio
Available CardMiniActive Features
Feature Description
fields By default, the title of the card is the first data field configured. The remaining data fields display as blocks.
actions, smartActions By default, all actions display below the fields.
session Specifies session variables to add to the card. See Available session Variables on this page.
leftImage Sets the left image URL. For example, /image-url.jpg. URL can be relative or absolute.
leftIcon Sets the left icon. For example, standard:icon
rightImage Sets the left image URL. For example, /image-url.jpg. URL can be relative or absolute.
rightIcon Sets the right icon. For example, standard:icon
imageStyle Sets the css style for both left and right images. For example, height: 100px; border: 1px;
CardOpenState LWC Card Template

This page contains the CardOpenState LWC Card Template ReadMe for each Vlocity release.
The CardOpenState LWC Card Template displays a card state template that displays actions only. The
layout includes a centered image and text block linked to the first action, and has flyout functionality.
Remaining actions display in an inline grid beneath the image and text block.
Available CardOpenState Features
Feature Description
icon By default, if the state has an action, the document icon displays at the center of the card. Icon links to the target URL of
the first action.
state name By default, if the state has an action, the state name displays at the center of the card, below the document icon. State
name links to the target URL of the first action.
actions By default, the state name at the center of the card gets the target link of the first action. The rest of the actions, display
inline at the bottom.
LeftAccountInfoState LWC Card Template

This page contains the LeftAccountInfoState LWC Card Template ReadMe for each Vlocity release.
The LeftAccountInfoState LWC Card Template displays a card state template with account data listed in
rows.

company 1520
OmniStudio
Available LeftAccountInfoStateFeatures
Feature Description
fields The provided data fields display in an SLDS table.
LeftProfileState LWC Card Template

This page contains the LeftProfileState LWC Card Template ReadMe for each Vlocity release.
The LeftProfileState LWC Card Template displays a card state template with account profile information.
The layout includes a google map image, up to three data fields, and up to three actions.
Available LeftProfileState Features
Feature Description
fields By default, if the first field is not present the string Name is returned. The first data field displays in a row below the google
map image. The other two data field display in the same row below the first data field.
actions Displays first three actions in a row. The remaining actions display in a menu.
session See Available session Variables on this page.
APIKEY Sets the API Key for the google map API to display the location passed to location variable.
location Defines the location of the account used in the static google map. Pass the address from account
{{obj.BillingAddress}}.
ProfileCardState LWC Card Template

This page contains the ProfileCardState LWC Card Template ReadMe for each Vlocity release.
The profileCardState LWC Card Template displays a card state template with profile information added as
data fields, actions, and a static location map.
Available profileCardState Features
Feature Description
fields By default, the title of the card is obj Name. The remaining fields display as blocks.
actions By default, actions display below the fields.

company 1521
OmniStudio
APIKEY Sets the API Key for the google map API to display the location passed to location field.
location Defines the location of the Account used in the static google map. You can pass the address from account
showBadge Sets the badge icon for the respective user account. You can pass the customer value from account
{{obj.CustomerValue__c}}. Default value is false.
showActionLabel To display the action label. Default value is false.
The profileCardState LWC Card Template displays a card state template with profile information added as
fields, actions, and a static location map.
Available profileCardState Features
Feature Description
fields By default, the title of the card is obj Name. The remaining fields
display as blocks.
APIKEY Sets the API Key for the google map API to display the location
passed to location field.
location Defines the location of the Account used in the static google map.
You can pass the address from account
StoryCardCanvas LWC Layout Template

This page contains the StoryCardCanvas LWC Layout Template ReadMe for each Vlocity release.
The StoryCardCanvas LWC Layout Template displays the layout and the containing cards with one card in
each row for a customer story. The layout also includes a title and search bar.
Available StoryCardCanvas Features
Feature Description
title See Available session Variables on this page.
menu for new item The menu list includes Case, Task, Order Note, Campaign, Event and Opportunity. On selecting a menu item
from the list, it opens the new item page for selected item type.
cards The layout shows containing story cards, if any.

company 1522
OmniStudio
title Sets the layout title
StoryOngoingState LWC Card Template

This page contains the StoryOngoingState LWC Card Template ReadMe for each Vlocity release.
The StoryOngoingState LWC Card Template displays the story item. The layout includes an icon, a title, a
subtitle, and fields in two columns. The icon displays in the first column, while the title, the subtitle, and
fields display in the second column. The fields are displayed inline. This template has flyout functionality.
Available StoryOngoingStateFeatures
Feature Description
icon By default, the icon is the sObject type. If there is no SLDS icon associated with the sObject, you can define one with a
card session variable using the iconName attribute. For example, to define an icon for the 'Order' sObject, set iconName
to standard:orders. See SLDS Icons.
title By default, the story item obj title is next to the icon. Clicking the title takes the user to the story item record page.
subtitle By default, the subtitle is the story item obj detailValueMap.Description.
fields By default, the fields display inline at the bottom.
StoryNormalState LWC Card Template

This page contains the StoryNormalState LWC Card Template ReadMe for each Vlocity release.
The StoryNormalState LWC Card Template displays the story item. The layout includes an icon, a title and
fields in two columns. The icon displays in the first column, while the title and fields display in the second
column. The fields display inline.
Available StoryNormalState Features
Feature Description
icon By default, the icon is the sObject type. If there is no SLDS icon associated with the sObject, you can define one with a
card session variable using the iconName attribute. For example, to define an icon for the 'Order' sObject, set iconName
to standard:orders. See SLDS Icons.
title By default, the story item obj title is next to the icon. Clicking the title takes the user to the story item record page.
fields By default, the fields display inline with the title.
date By default, this template displays the story item monthNameLastActivityDate at the bottom of the card.
StoryEditStateFlyout LWC Card Template

This page contains the StoryEditStateFlyout LWC Card Template ReadMe for each Vlocity release.

company 1523
OmniStudio
The StoryEditStateFlyout LWC Flyout Template displays the edit fields of the parent story item. The edit
fields display in a Lightning form.
Available StoryEditStateFlyout Features
Feature Description
fields By default, the template displays the parent story item's edit fields in a Lightning form. Each field has an edit icon, which on
click, enables fields in edit mode. The template shows 'Save' and 'Cancel' buttons in edit mode. Clicking 'Save' updates the
parent card.
WideCard LWC Card Template

This page contains the WideCard LWC Card Template ReadMe for each Vlocity release.
The WideCard LWC Card Template displays a card state template with a wide layout. The layout includes
an image, has flyout functionality, has field tracking capability, and displays the status of the card state. The
data fields display in an inline grid.
Available WideCard Features
Feature Description
fields By default, the title of the card is the first field configured. The remaining fields display as block elements.
flyout By default, this template has a flyout. When a user clicks the expand icon, the configured flyout displays in a modal. To use
a card without a flyout, use the WideCardSlim LWC Card Templateinstead.
img Sets the image url. For example, /image-name.jpg. URL can be relative or absolute.
status Defines the status of the card. Is hidden if null or empty.
The WideCard LWC Card Template displays a card state template with a wide layout. The layout includes
an image, has flyout functionality and displays the status of the card state. The data fields display in an
inline grid.
Available WideCard Features
Feature Description
fields By default, the title of the card is the first field configured. The remaining fields display as blocks.

company 1524
OmniStudio
Feature Description
flyout By default, this template has a flyout. When a user clicks the expand icon, the configured flyout displays in a modal. To use
a card without a flyout, use the WideCardSlim LWC Card Template instead.
img Sets the image url. For example, <image url>
status Defines the status of the card. Is hidden if null or empty
WideCardSlim LWC Card Template

This page contains the WideCardSlim LWC Card Template ReadMe for each Vlocity release.
The WideCardSlim LWC Card Template displays a card state template with a wide layout. The layout
includes an image, displays the status of the card state, and has field tracking capability. The data fields
display in an inline grid.
Available WideCardSlim Features
Feature Description
actions By default, all actions display below the fields.
img Sets the image url. For example, /image-url.jpg. URL can be relative or absolute.
The WideCardSlim LWC Card Template displays a card state template with a wide layout. The layout
includes an image and displays the status of the card state. The data fields display in an inline grid.
Available WideCardSlim Features
Feature Description
actions By default, all actions display below the fields.

company 1525
OmniStudio
WideCardSmart LWC Card Template

This page contains the WideCardSmart ReadMe for each Vlocity release.
The WideCardSmart LWC Card Template displays a card state template with a wide layout and uses Smart
Actions to generate actions on the card. See the Configuring Smart Actions on an LWC Card topic. The
layout includes an image, has flyout functionality, has field tracking capability, and displays the status of the
card state. The data fields display in an inline grid.
Available WideCardSmart Features
Feature Description
actions By default, the first action is the banner action. The action's visible Label displays as the banner title. Remaining
actions display under the fields.
flyout By default, this template has a flyout. When a user clicks the expand icon, the configured flyout displays in a modal. To
use a card without a flyout, and if Smart Actions are not required, use the WideCardSlim LWC Card Template instead.
smartAction This lwc by default supports smartAction and works same way as actions. Refer IP output fields for more info.
img Sets the image url. For example, /image-url.jpg. URL can be relative or absolute.
height Defines the height of the card image
imageSyle Sets style for smart action banner image
Table 62. Available smartAction Integration Procedure Output Fields

id Sets the name of the action.
type Sets the type of the action. Is Vlocity Action by default.
displayName Displays a visible label for the action.
iconName Set this variable to add an icon to the action. Supports only SLDS icons.
description Sets the action description on the banner.
image Set this variable to use an image instead of an icon. An image has higher priority than an icon.

company 1526
OmniStudio
The WideCardSmart LWC Card Template displays a card state template with a wide layout and uses Smart
Actions to generate actions on the card (see Configuring Smart Actions on an LWC Card). The layout
includes an image, has flyout functionality and displays the status of the card state. The data fields display
in an inline grid.
Available WideCardSmart Features
Feature Description
actions By default, the first action is the banner action. The action’s visible Label displays as the banner title. Remaining
actions display under the fields.
flyout By default, this template has a flyout. When a user clicks the expand icon, the configured flyout displays in a modal. To
use a card without a flyout, and if Smart Actions are not required, use theWideCardSlim LWC Card Template instead.
smartAction This lwc by default supports smartAction and works same way as actions. Refer IP output fields for more info.
Available smartAction Integration Procedure Output Fields
id Sets the name of the action.
type Sets the type of the action. Must be Vlocity Action by
default.
displayName Displays a visible label for the action.
iconName Sets the icon name for the action. Supports only SLDS icons.
Apply Global Branding to Vlocity Cards

Apply global style changes to all Vlocity Cards in your org by using the Newport Design System. The
Newport Design System enables you to download, edit, and override the existing Newport CSS styles with
your own styles.
Required Versions

company 1527
OmniStudio
Before You Begin

• If you are unfamiliar with using command-line interfaces, see Command Line 101 (git-tower documentation).
• System Requirements:
2. Clone the latest Newport Design System package from newport-design-system, and follow the
instructions outlined in the GitHub repo.
3. Edit the CSS in a local text editor and save your changes.
4. Preview the changes using Storybook. For more information, see the instructions found in the newport-
design-system.
5. To deploy the CSS to Salesforce, see Deploy Card Template Changes with the Newport Design
System.
6. Preview the changes in your Salesforce org in the Card Designer Preview.
See Also
• For LWC Cards: Creating Custom LWC Card Templates
• For Angular Cards: Template Designer
Deploy Card Template Changes with the Newport Design System

The Newport Design System enables you to apply custom changes to the Newport templates that can then
be applied to any Card using a Newport Design System template. Cards using the Newport Design System
are available for download in the Vlocity Process Library. To view an example of Cards using the Newport
Design System, see Vlocity Digital Policyholder Self-Service.
Beginning with Spring '19, you can apply your customizations to the Newport templates by adding a Static
Resource that overrides the Newport templates wherever they are present.
Before You Begin

1. Edit the Newport Design System styles as needed. See Apply Global Branding to Vlocity Cards.
2. Confirm that your Card's layout template and card templates support Newport.
3. Create a distribution folder containing your changes by issuing the following command: npm run-script dist. The command
creates a zip file in the .dist/dist directory.
4. In versions prior to Spring '19, navigate to (cd to) the dist folder and zip its contents. (Do not zip the top-level dist folder: cd into it
and zip its content).
5. In your org, upload the zip file as a static resource. See Defining Static Resources.

company 1528
OmniStudio
3. To preview Card layouts that use the Newport Design System, in the Card Designer:
• For Angular Cards: Click Preview and add the following query parameter to the URL:
vlocitytheme=newport. For example, https://vloc-oui-designer-dev.na90.com/apex/ConsoleCards?
vlocitytheme=newport&layout=Grid&layoutId=a1a1K00000f25qe&previewMode=Universal.
• For LWC Cards: In the Layout pane, click Enable Newport when LWC is enabled, and then click
Preview.
IMPORTANT
Your LWC Card layout template and card templates must support Newport.
Working with the Template Designer and Card Designer

Customize the look of card layouts, card states, and flyouts by creating or editing templates in the Template
Designer. See Base UI and Card Templates. In the Card Designer, assign templates to layouts, states, or
flyouts.
NOTE
Beginning with the Summer '19 release, Vlocity supports Salesforce's Lightning Web
Components programming model with Vlocity Lightning Web Components. For more
information about customizing Cards with Vlocity Lighting Web Components, see Creating
Custom LWC Card Templates.
In a card layout, cluster related cards into distinct visual areas called zones. See Creating Zones.
To populate card layouts and cards with data, bind them to data sources and actions in the Card Designer.
To insert fields populated from data sources into cards, create placeholders. See Creating a Placeholder.
To enable cards to change their appearance dynamically, configure the card states. See Card States.
Cards Designer
You can use the Cards Designer to interactively create and configure layouts, zones, cards, flyouts, and
card states.

company 1529
OmniStudio
The optional Preview tab displays changes as soon as you make them:
For information on how to use the Cards Designer to create and configure Card layouts, see Creating a
New Card Layout using Cards Designer.

company 1530
OmniStudio
Template Designer
Vlocity Templates provide the structure for OmniScript elements and Cards Framework components, such
as a layout that includes the associated cards and card states. The template enables you to work directly
with HTML to provide organizational structure, CSS/SASS to provide style, and AngularJS to loop through
data from data sources.
NOTE
To apply CSS and template changes to all card and OmniScript templates, see Apply
Global Branding to Vlocity Cards.
Template Designer Settings

To configure the look and behavior of the Template Designer:
1. Go to the Vlocity Templates tab, click a template, then click a template version.
2. Click Settings.

company 1531
OmniStudio
3. Update or enter values for the following fields:

• Editor Theme: To modify the background and text colors in the code editor to suit your preferred
working environment, select from the dropdown list.
• Font Size: To change the font size in the code editor, update the number in this field.
• Default Author: To change the default author, which describes the team creating the content,
update this field.
• Auto Save: To automatically save changes, select this checkbox.
• Wordwrap: To force the code to wrap to another line and avoid scrolling right, select this checkbox.
Template Designer Help
1. Go to the Vlocity Templates tab, click a template, then click a template version.
2. Click Help.

company 1532
OmniStudio
3. Learn how to use the code and shortcuts the Template Designer supports:
• HTML: Learn how the Template Designer supports HTML.
• CSS/SCSS: Learn how the Template Designer supports CSS and SASS.
• JavaScript: Learn how the Template Designer supports AngularJS.
• Keyboard Shortcuts: Learn what keyboard shortcuts are available for the Template Designer.
Creating and Importing a Template

To create or import a template, see Creating a Template with the Template Designer.
Creating a Card Layout Using Card Designer

Create a card layout to build visual components to your customer interactions by adding data, enabling
actions, and using custom or Vlocity templates to determine the look and feel.

company 1533
OmniStudio
NOTE
Beginning with the Vlocity Summer '19 release, Vlocity supports Salesforce's Lightning
Web Components programming model with Vlocity Lightning Web Components. Vlocity
Lightning Web Components include components, functionalities, and templates exclusive
to LWC Cards. To enable LWC on a card layout, see Creating an LWC Card Layout.
To create a card layout:
1. Open the Vlocity Card tabs, and click New.

2. Enter a unique Layout Name and follow Vlocity required naming conventions and best practices. See
Card and Card Layout Naming Conventions.
NOTE
Beginning with Vlocity Insurance and Health Spring '20, when creating a card or
layout, the name and author must only contain underscores and alphanumeric
characters. It must be unique, begin with a letter, not include spaces, not end with an
underscore, and not contain two consecutive underscores. Existing layout names and
card names are automatically updated to make them compliant. New cards and
layouts can not be saved without following these naming requirements.
3. Select Layout from the Layout Type dropdown.
NOTE
To create a Flyout, see Creating a Flyout.
4. (Optional) Update the author in the LayoutAuthor field. See Understanding the Author of a Card
Layout.
5. In the Template dropdown list, select a template, such as card-canvas-3x-slds to display cards in
a 3 column layout. See Base UI and Card Templates.
6. Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, Vlocity Cards
supports limiting user access to a card layout by entering a comma-separated list of custom
permissions in the Required Permissions field. For example, enter
Can_Edit_Card,Can_View_Card to only allow users with at least one of these custom permissions
to see the card layout. If this field is left empty, any user can see the layout. See Custom Permissions.
7. To configure card layout attributes, click the Add Session Variables button to enter a variable Name
and Value. For example, the layout template cardCanvasLayout has a configurable attribute called
title, which adds a title to the top of the layout. Enter title in the Name field and a value for the
title such as List of Accounts in the Value field.
8. Select a data source for the layout in the Data Source field.

company 1534
OmniStudio
The data source holds the master query that returns results in a JSON structure for cards in the layout.
For example, you might query every policy associated with an account, then create a card for each
policy type. For more information on how to configure a data source and to see a complete list of data
sources, see Configuring Data Sources.
NOTE
Cards can have data sources different from the layout data source.
9. After configuring your data source, to test data returned, click the +Add Test Variables button in the
Test Data Source Settings section. Enter values for these properties:
• Name: Enter the name of the variable to test, such as params.id. This gets the ID in a page
parameter for a record, such as an account record ID.
• Value: Enter the value of the variable. For example, the account ID found in the URL parameter of
an account record.
10. To use metatags to enable search engine optimization (SEO) options in your metadata, click +Add
Metatags. The metatags feature enables the layout to write metatags to a page header. Available card
metatags are:
• author
• description
• keywords
• viewport
The metatags are inserted after a layout or card loads, whether or not the data source is set.
Vlocity recommends that you replace metatags with the same name. Do not duplicate metatags. Web
crawlers ignore duplicate tags.
11. Click View Data to display the query results in JSON.
12. Click Activate.
NOTE
After editing a layout, activate it before you leave the Card Designer. If you attempt to use
an inactive layout, the layout throws the following error:
Error: There is no active instance of Layout Name: layout.
Configuring Card Layout Properties

Configure card layout properties.
After creating a card layout, configure layout properties in the Layout pane of the Card Designer. See
Creating a Card Layout Using Card Designer. See Creating an LWC Card Layout.

company 1535
OmniStudio

+Add Enables search engine optimization (SEO) options For example, possible keywords for a card layout that
Metatags in your metadata by allowing the layout to write shows a list of active account cases are cases,
metatags to a page header. current cases, active cases.
Available card metatags are: author, description,

keywords, and viewport.
The metatags are inserted after a layout or card

loads, whether or not the data source is set.
Vlocity recommends that you replace metatags

with the same name. Do not duplicate metatags.
Web crawlers ignore duplicate tags.
Add Session Sets card layout attributes. Enter a variable Name For example, the layout template cardCanvasLayout
Variables and Value for each attribute. has a configurable attribute called title, which adds a
title to the top of the layout. Enter title in the Name field
and a value for the title such as List of Accounts in
the Value field.
+Add Test Returns test data after configuring your data • Name: For example, enter params.id to get the ID in
Variables source. Name and Value populate the dynamic a page parameter for a record, such as an account
fields in a data source endpoint. Enter the name of record ID.
the variable to test, such as params.id. Enter the • Value: For example, enter the account ID found in the
value of the variable. For more information on test URL parameter of an account record.
variables and their settings, see Testing Data
Source Settings.
Data Source Sets a data source for the layout. For example, you might query every policy associated with
an account, then create a card for each policy type.
The data source holds the master query that
returns results in a JSON structure for cards in the
layout. For more information on how to configure a
data source and to see a complete list of data
sources, see Configuring Data Sources. Cards can
have data sources different from the layout data
source.
Required Limits user access to a card layout by entering a For example, enter Can_Edit_Card,Can_View_Card
Permissions comma-separated list of custom permissions. If to only allow users with at least one of these custom
this field is left empty, any user can see the layout. permissions to see the card layout.
See Custom Permissions.
This feature is available beginning with Vlocity

Insurance and Health Winter '20 and Vlocity CME
Winter '20.
Also see Limit User Access to a Card Layout in a

Managed Package.
See Also
• Configuring Data Sources for Cards Components

• Adding a Card to a Layout
Creating a Template with the Template Designer

Customize the layout of a card state or card layout by creating custom templates for OmniScript elements
or Cards Framework components with the Vlocity Template Designer. To customize a template that already
exists, see Cloning a Template.

company 1536
OmniStudio
To create a new template:
1. In your org, go to the Vlocity Templates tab, and click New to open the Template Designer.
2. In the Template Name field, enter the name of your new template.
3. To organize your templates into categories, click into the Template Type field to select from the
available options, or enter the name of a new type.
4. In the Template Author field, enter an author name that describes the team creating the content. The
default author name is Vlocity Internal.
5. Click Done.
6. Enter your code in the code editors:
• HTML: Enter your HTML here.
• CSS: Enter your CSS and SASS styles here. Vlocity recommends using SASS.
• JS: Enter your AngularJS here.
NOTE
To learn how the Template Designer supports HTML, CSS, SASS, and AngularJS,
click Help.
7. (Optional) Click Edit to configure the following attributes and features of your template:
• Description: Enter the description of your template.

• Sample: Enter sample JSON data to preview your template. For example, add data for a card
template from the card layout's data source.

company 1537
OmniStudio
• Add Zone: Click to organize the display of your template by zones. For example, separate the
header, body, and footer of your template into sections.
• Add Placeholder: Click to insert fields in your template. For example, add a Title to a card state
to display when certain conditions are met.
8. Click Save.

company 1538
OmniStudio
NOTE
The asterisk next to the name of the template indicates that the template is not saved.
To make changes save automatically, select the Auto Save checkbox in Settings.
See Template Designer.
9. (Optional) To preview the template, click Preview. The template must have sample data in the Sample
field of the Edit tab.
To import a template:
1. Go to the Vlocity Templates tab and click Import.
2. From the Select File modal, click Browse to select a downloaded data pack from your computer. Or
drag and drop the data pack file from your computer directly onto the selection window.
3. Click Done.
To configure the look and behavior of the Template Designer, such as the color scheme of the code editors,
see Template Designer.
Comparing the Differences Between Templates

View two templates or two template versions side by side in the Template Designer to compare the
differences between them and make changes to one.
To compare the differences between templates:
1. Go to Vlocity Templates, click to expand a template, and click to open a version of the template to
compare with another template.
2. Click New/Open.

company 1539
OmniStudio
3. Click the book icon of the template to compare it to the open template. For example, if you have
version 2 of the template trng-card-canvas-3x-zones-slds open, click the book icon of version
3 of that template to compare the differences between them.

company 1540
OmniStudio
4. Click HTML, CSS, or JS to view the differences between each and perform these tasks:

company 1541
OmniStudio
• In the right Editable column, edit the template that you are comparing to the original template. Click
Save when done.
• View the code in the original template in the left Read Only.
• Click Activate for either template. You must activate only one template version at a time.
• To see either template in full view, click Open.
• To return to the original template in full view, click Go Back.
Vlocity Layouts
Vlocity layouts consist of rectangular canvases that act as containers for cards. Cards display information
and clickable actions to support efficient navigation through complex CRM interactions.
For example, in a Salesforce Console for an insurance call center, you could use a layout to display all of a
customer's Account insurance policies. Each card represents an individual policy. A card representing a
Variable Annuity Policy could have information related to and an action for, for example, a loan request.
In addition to cards, you can add flyouts, that is, child objects that offer supplemental information inherited
from a parent card or layout. The flyout shares the context of its parent, including variable names and data.

company 1542
OmniStudio
Other examples of card layouts that contain sets of cards that appear in a given context are:
• A call center agent opens an account record and a card layout appears containing cards with account
information all its associated assets.
• An insurance agent views a card layout for an account including every policy the account holds.
• A case manager views a card layout displaying every benefit case that a case worker manages.
You can quickly change a page's content regions by switching to a different layout. For example, if your
current layout is has one full-width column, you can quickly change it to another layout, such as a 3-column,
1:1:2 ratio layout.

company 1543
OmniStudio
Viewing Available Layouts on the Vlocity Cards Tab

The Vlocity Cards tab displays all of the layouts that can contain cards.
For some constructs, such as card templates, you must go to the Vlocity Templates tab and use the
Template Designer before you use the Card Designer.
To go to the Vlocity Cards tab:
• In Salesforce Classic, click All Tabs , then click Vlocity Cards.

• In Lightning Experience, click the App Launcher , then click Vlocity Cards.
Figure 24. Vlocity Cards Tab in Salesforce Classic

company 1544
OmniStudio
Figure 25. Vlocity Cards Tab in Lightning Experience
The Vlocity Cards tab displays a list of available layouts, including their types, last modified dates, and
status.
• Click a layout name to expand it and see all of its versions.

• Click the Last Modified column to sort the layout list from most to least recently modified.
Card States
Cards have states. Each state displays a list of fields from either the layout or the individual card data
source, plus a list of Vlocity Actions. You can also associate each state with a flyout, an extended version of
a card with supplemental data displayed in a larger area.
Cards states enable presentation of different CRM interactions per state. For example, when a customer
adds an auto insurance policy, the policy becomes active, but when a customer misses a payment the
policy state becomes past due. Cards with different states present different data.
You can customize each card via its state to display various clickable actions, information, and/or optional
visual cues. For example:
• If an Automobile policy remains unpurchased, the policy card (via its state) would likely offer a single
action, specifically, "Add [a New Policy]".
• A card for an active Automobile policy could display information such as the policy holder's name plus
relevant actions, such as, "File a Claim".
• If an Automobile policy falls past due, a card might include a red border, a balance due amount, and
Actions such as, "Pay [the] Premium", "[Request a] Billing Extension", and so on.

company 1545
OmniStudio
TIP
In the Cards Framework, an object returns only one state and creates one card, by default.
However, if you apply multiple state filter(s) to the parent field, there is a possibility of
getting a card for each filter state, as the filter is applied to all objects.
See also Add States to a Card.
Cards Framework Versioning

The Vlocity Cards Framework supports versioning for all components. The name, author, and version
combination must be unique for each component of a given type (layout, card, or template) in an org. For
more on naming conventions, see Card and Card Layout Naming Conventions.
Use the following fields to create unique versions of a component:
Field Description
Name Components are requested by name.
Author Specifies the user organization that created the record. Use author names that describe the team creating the content.
Vlocity-authored components have Vlocity as the author. You cannot modify these components, but you can clone them.
See Understanding the Author of a Card Layout.
Version An integer that increases by one with every new version.
Active Indicates whether a record is active for runtime use. One active record per name is allowed in an org. Activating a
component deactivates all other components of the same type that have the same name. Only active records are exported
when a DataPack is created.
Card and Card Layout Naming Conventions

Follow Vlocity's requirements and best practices when naming cards and card layouts.

company 1546
OmniStudio
Beginning with Vlocity Insurance and Health Spring '20
Layout and Card Naming Conventions
The combination of the card Name and Author must be unique in your Org. If the Name is Name: account_layout
the same and Author is different, the card or layout is versioned. See Cards Framework
Versioning. Author: CustomerSales
Name: account_closed_layout
Author: CustomerSales
Beginning with Vlocity Insurance and Health Spring '20, when creating a card or layout, the Not acceptable: account$card!,
name and author must only contain underscores and alphanumeric characters. It must be 1account__card, $$account__card_,
unique, begin with a letter, not include spaces, not end with an underscore, and not contain account card
two consecutive underscores. Existing layout names and card names are automatically
updated to make them compliant. New cards and layouts can not be saved without following
these naming requirements.
Only one version of a card or layout can be active at the same time. N/A
Card and layout names cannot be changed. N/A
Layout Naming Conventions
Best Practices Examples

• Use lowercase separated by an underscore (_) for feature or sub feature. • myapp_home_product
• trng_account_console
Card Naming Conventions

• Use descriptive name in Title Case and an optional prefix. • vpl_Product_Details
• rep_Account_Cases
Prior to Vlocity Insurance and Health Spring '20
Layout and Card Naming Conventions
The combination of the card Name and Author must be unique in your Org. If the Name is the Name: account-layout
same and Author is different, the card or layout is versioned. See Cards Framework Versioning.
Name: account-closed-layout
Use ASCII characters. See ascii.cl.
Only one version of a card or layout can be active at the same time. N/A
Card and layout names cannot be changed. N/A

company 1547
OmniStudio
Layout Naming Conventions

• Use lowercase separated by a dash (-) for feature or sub feature. • myapp-home-product
• trng-account-console
Card Naming Conventions

• Use descriptive name in Title Case and an optional prefix. • vpl Product Details
• rep Account Cases
Activation in the Cards Framework

Multiple versions of a component can exist, but only one version at a time can be active. Activating one
version deactivates all the others. Only active component versions are exported when you create a
DataPack.

company 1548
OmniStudio
Versioning in the Cards Framework

Creating a version of a component creates an exact copy of the record with a Version equal to the latest
version number plus one.

company 1549
OmniStudio
Cloning in the Cards Framework

When you clone a component, you must change the Name and/or Author fields. The version of the new
component is set to 1. The Name, Author, and Version combination must be unique within the component
type for this action to be successful.
Understanding the Author of a Card Layout

The Author property in templates, layouts, and cards specify the user organization that created the record.
Vlocity delivers prebuilt templates, layouts, and cards, which have an Author value of Vlocity. Although
you can't alter these components, as an administrator, you can clone, rename, and version them. See
Cards Framework Versioning.

company 1550
OmniStudio
You may, however, edit templates, layouts, and cards if your org name is its Author. A child object such as
a card in a layout or zone inherits its author from its parent.
Consider Vlocity's requirements and best practices when updating an Author name. See Card and Card
Layout Naming Conventions.
Sample Versioning Workflow

This example shows the differences in versioning between a clone and a new version.

company 1551
OmniStudio
Versioning Best Practices

Consider the following:
• When working with Vlocity-authored components in a client org:

• Set a unique name for the new component if you are only using the original component as a template
to start from.
• Set a unique author for the new component when replacing a Vlocity component with your own inside
of a larger app. For example, inside of CPQ you can replace one component without having to
overwrite and clone the whole app.
• When you import DataPacks, components of the same type are matched by Name, Author, and Version
combination. If this combination is not unique, a warning is displayed that there is a pending overwrite.
Importing components doesn't create new versions of them.
• Make sure to activate your components before creating a DataPack. When you export DataPacks, only
active components are exported.
• Use source control. This versioning workflow is not as fail-safe as the security that source control
provides.
• Use Vlocity build tools to work efficiently with imports and exports. For large or complex migrations, use
the Vlocity Build tool, which is available from GitHub. The Build tool is a command-line tool that packages
related objects together as DataPacks, ensuring that dependencies are preserved.

company 1552
OmniStudio
Exporting Vlocity Layouts and Cards

When migrating to a new org, you must export any applicable Vlocity Cards framework components,
particularly those that you modified. The Vlocity Cards Framework supports versioning for all components
(layouts, cards and templates). Only active versions are exported.
See Cards Framework Versioning.
To export Vlocity Layouts and Cards:
1. Go to the Vlocity Card Designer.

2. Expand the first layout to export.
3. Select the latest version of the layout.
4. Repeat steps 2 and 3 for each layout to export.

5. Click Export.
The Export DataPack dialog box opens.

7. Click Next.
9. Click Next.
10. Enter the following information:
• Name, a unique, memorable name for the DataPack.
• Select Published.
• Deselect Download.

company 1553
OmniStudio
11. Click Done.
Using Actions with Cards

Cards use Vlocity Actions, OS Actions, and Custom Actions to launch procedures. For example, a card can
launch an OmniScript, run an Apex class, redirect to a URL endpoint, and so on. For LWC enabled cards,
see Using Actions with LWC Cards.
• Vlocity Actions: Adds preconfigured actions created in the Vlocity Actions tool in your org. Vlocity
Actions are reusable on multiple cards. See Vlocity Actions.
• Custom Actions: Create an action unique to the card state. A custom action is not reusable on other
cards. See Adding a Custom Action to a Card.
• OS Actions: Launch an OmniScript from your card state. See Launching an OmniScript from an OS
Action on a Card.
NOTE
Beginning with the Vlocity Summer '19 release, launch an LWC OmniScript from an OS
Action. See Launching an LWC OmniScript from an OS Action on a Card.

company 1554
OmniStudio
Adding a Custom Action to a Card

Add actions directly on a card with Custom Actions. Custom Actions perform faster than standard Vlocity
Actions but have fewer configuration options. For reusable actions with additional configuration options, see
Vlocity Actions.
Beginning with the Summer '19 release, Vlocity supports Salesforce's Lightning Web Components
programming model with Vlocity Lightning Web Components. Vlocity Lightning Web Components include
components, functionalities, and templates exclusive to LWC Cards. See LWC Cards Considerations and
Configuring Smart Actions on an LWC Card.
To add a Custom Action to a card:
NOTE
In the code samples below, replace NameSpace with your org's Vlocity namespace prefix.
See Viewing the Namespace and Version of the Vlocity Package.
1. Open a card from the Vlocity Cards tab and click Add Custom Action in the card state.
2. In the Id field, to distinguish the action from other actions in the card designer, enter a unique name.
For example, ActiveAccountUpdate.
3. In the Display Name field, enter the name to display to the user. For example, Update Account.
4. In the URL field, enter the URL to which the action links. See Target URL and URL Parameters.
• Vlocity Icon: Select a Vlocity icon or an SLDS icon to display next to the action link. For a complete
list of Vlocity Icons, go to the Vlocity Actions tab, open any action, and click the Vlocity Icons
header label to reveal the list of icons.
• Open URL in: Select Current Window or New Tab/Window to indicate where to open the URL.
• Check the Actions Options checkbox to add Custom Parameters, Conditions, and to invoke an
Apex class. See Configuring Action Options.

company 1555
OmniStudio
Adding a Vlocity Action to a Card

Add reusable actions to a card with Vlocity Actions to launch Vlocity OmniScripts, Vlocity Cards
components, web pages, or external applications.
To add a Vlocity Action to a card:
1. You must first create a Vlocity Action to add to your card. See Vlocity Actions.
2. In your org, click App Launcher, click Vlocity Cards, and select a card layout to open the Card
Designer.
3. In the Actions section of a card's state, click into the Salesforce Object Type input field, and select an
sObject from the picklist, such as Contact.
4. Click into the Id Field for Actions, and select a ContextId from the available list of fields returned from
the data source, such as ['ContactId'].
If Blank Card State is enabled:
• Click the Enable Id field for actions checkbox to display the Id Field for Actions input field.

company 1556
OmniStudio
• By default, the ContextId is params.id when Enable Id field for actions is disabled. When
enabled, in addition to entering a ContextId from a data source, use Id Field for Actions to set any
page parameter, session variable, or $root variable to fetch actions.
For example, use the $root.vlocity context variable, such as
$root.vlocity.userContactId to create an action for a logged-in user. For a list of available
context variables, see Cards Context Variables.
5. In the Actions section of a card state, next to the Add button, select a reusable action from the picklist.
IMPORTANT
If you do not see the action you are looking for, confirm you have selected the
appropriate sObject from the Salesforce Object Type dropdown.
6. (Optional) Check the Actions Options checkbox to add Custom Parameters and Conditions. See
Configuring Action Options.
Configuring Action Options

Configure additional options for Vlocity Actions, OmniScript Actions, and Custom Actions on a card state by
enabling the Action Options feature.
Options available for all actions:
• Custom Parameters: Enter additional parameters to send them with the request.
• Conditions: Enter conditions to hide actions from specific users. For example, to display an action only
to an account named Acme, select the ['Name'] field and set it equal to Acme. See Displaying
Conditional Actions on a Card.

company 1557
OmniStudio
Options available only for Custom Actions:
• Invoke Class Name: Enter an Apex class name to invoke through the action. For example,
EmailManager.
• Invoke Method Name: Enter a method within the Apex class to invoke through the action. For example,
sendMail.
• Input Map: Enter key-value pairs to send as a Map object to the invoked Apex class. For more
information, see Maps.
• Options Map: Enter key-value pairs to send as an Options Map to the invoked Apex class.
Displaying Conditional Actions on a Card

You can use conditions to show or hide actions on a card based on the card data. For example, you can
have a card display one set of actions for a Policy card when the Status is New, and a different set when
the Status is not New. To do this, clone a state on the card, modify the actions, and use conditions to
determine when to display each state.
1. In Vlocity Cards, create a card layout and add a card to it.

See Creating a New Card Layout and Adding a Card to the Layout.
2. On your card, create a state with actions.
See Adding a State to a Card.
3. Clone the state. Click the Clone Template icon in the top right corner of the state:

company 1558
OmniStudio
4. Remove or add actions from the cloned state as necessary.

5. On the clone, click + Add Condition at the bottom, and create your condition.
For example: "Policy Status = New" or "DaysUntilExpiration__c < 31".
6. On the original state, click + Add Condition at the bottom, and add the opposite condition.
For example: "Policy Status != New" or "DaysUntilExpiration__c >= 31".
Launching an OmniScript from an OS Action on a Card

Beginning with Vlocity Insurance and Vlocity Health Winter '18, Vlocity Cards contains a configurable
OmniScript Action (OS Action). The OS Action simplifies the process to navigate to an OmniScript from a
card action.
NOTE
OS Actions are not reusable. To create an action that launches the same OmniScript from
different cards, see Using Actions with Cards.
Launching an OmniScript with an OS Action in Lightning

To launch an OmniScript with an OS Action in Lightning:
1. Follow the instructions on Configuring an OS Action on this page.

2. Add the card to a Lightning page. See Adding a Vlocity Card to a Lightning or Community Page.
Launching an OmniScript with an OS Action in a Community

To Launch an OmniScript with an OS Action in a community:

2. Create a Community page with the URL /os. Enter any name for the page name. See Creating
Custom Pages with Community Builder.

company 1559
OmniStudio
3. Add a Vlocity OS Player component to the /os page. See Configuring the Vlocity OS Player Lightning
Component.
4. Add the card to a Community page from where you want your action to launch, such as the Home
page or Record Detail page. See Adding a Vlocity Card to a Lightning or Community Page.
Configuring an OS Action
To set up an OS Action:
1. Open the Vlocity Cards tab, and click on a version of a card to open the Card Designer.
2. Click Add OS Action in the Actions section of a card state
3. In the Id field, enter a unique name to distinguish the action from other actions in the Card Designer.
4. In the Display Name field, enter the name that the action displays to the user.
5. Click in the OmniScript typeahead field to choose an active OmniScript from the drop-down list.
Beginning with Vlocity Insurance and Health Winter '20 , the OmniScripts are listed as Type/
SubType/Language. For example, if you select CustomerInteractionAccountCMT/Creation/
English, the Type is the OmniScript name CustomerInteractionAccountCMT, the SubType is
Creation, and the Language is English.
• Action Options: To add custom parameters, set conditions for when the OS Action displays, and
configure optional settings for LWC enabled cards, select this checkbox. See Configuring Action
Options.

company 1560
OmniStudio
• Icon: Select a Vlocity icon or an SLDS icon to display next to the action link. For a complete list of
Vlocity Icons, go to the Vlocity Actions tab, open any action, and click the Vlocity Icons header label
to reveal the list of icons.
• Open URL in: Select Current Window or New Tab/Window to indicate where to open the target
URL.
• Visualforce Page: Choose a Visualforce page to display the OmniScript on a custom page. For
example, if you have a custom template for your OmniScript, you might create a custom page to
display it.
• Layout: Select the Lightning or Newport for the layout. This feature works for Angular OmniScripts
only.
• LWC Enabled: If the selected OmniScript is an LWC OS, this checkbox is automatically selected.
• When LWC Enabled is checked, enter values for these properties:
• Context Id: Enter the sObject's ContextId associated with your OmniScript. For example, if your
LWC OmniScript updates account information, your context Id is an account record ID.
• Console Tab Icon: Select a Vlocity icon or an SLDS icon to display in the subtab of a console
after the OS action link is clicked. For example, select standard:account for an OmniScript
that updates account information.
• Console Tab Label: Enter the visible label of the Console Tab Icon. For example, Update
Account.
Launching an LWC OmniScript from an OS Action on a Card

Beginning with Vlocity Insurance and Vlocity Health Winter '18, Vlocity Cards contains a configurable
OmniScript Action (OS Action). The OS Action simplifies the process to navigate to an OmniScript from a
card action.

company 1561
OmniStudio
NOTE
OS Actions are not reusable. To create an action that launches the same LWC OmniScript
from different cards, see Using Actions with Cards.
Launching an LWC OmniScript with an OS Action in Lightning

To launch an LWC OmniScript with an OS Action in Lightning:

2. Add the card to a Lightning page. See Adding a Vlocity Card to a Lightning or Community Page.
3. (Optional) To reload the card when the LWC OmniScript updates, see Reloading a Card After Updating
an LWC OmniScript.
Launching an LWC OmniScript with an OS Action in a Community

Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, Vlocity Cards supports
launching an LWC OmniScript with an OS Action in a Community:

2. Create a community page with the URL /lwcos. Enter any name as the Community page name. See
Creating Custom Pages with Community Builder.
3. Add a Vlocity LWC OmniScript Wrapper component to the /lwcos Community page. See Launch
an LWC OmniScript with LWC OmniScript Wrapper.

company 1562
OmniStudio
4. Add the card to the Community page that launches the action, such as the Home page or Record
Detail page. See Adding a Vlocity Card to a Lightning or Community Page.
5. (Optional) To reload the card when the LWC OmniScript updates, see Reloading a Card After Updating
an LWC OmniScript.
Configuring an OS Action
To set up an OS Action:
1. Open the Vlocity Cards tab, and click on a version of a card to open the Card Designer.
2. Click Add OS Action in the Actions section of a card state
3. In the Id field, enter a unique name to distinguish the action from other actions in the Card Designer.
4. In the Display Name field, enter the name that the action displays to the user.
5. Click in the OmniScript typeahead field to choose an active OmniScript from the drop-down list.
Beginning with Vlocity Insurance and Health Winter '20 , the OmniScripts are listed as Type/
SubType/Language. For example, if you select CustomerInteractionAccountCMT/Creation/
English, the Type is the OmniScript name CustomerInteractionAccountCMT, the SubType is
Creation, and the Language is English.
• Action Options: To add custom parameters, set conditions for when the OS Action displays, and
configure optional settings for LWC enabled cards, select this checkbox. See Configuring Action
Options.
• Icon: Select a Vlocity icon or an SLDS icon to display next to the action link. For a complete list of
Vlocity Icons, go to the Vlocity Actions tab, open any action, and click the Vlocity Icons header label
to reveal the list of icons.
• Open URL in: Select Current Window or New Tab/Window to indicate where to open the target
URL.
• Visualforce Page: Choose a Visualforce page to display the OmniScript on a custom page. For
example, if you have a custom template for your OmniScript, you might create a custom page to
display it.
• Layout: Select the Lightning or Newport for the layout. This feature works for Angular OmniScripts
only.
• LWC Enabled: If the selected OmniScript is an LWC OS, this checkbox is automatically selected.
• When LWC Enabled is checked, enter values for these properties:
• Context Id: Enter the sObject's ContextId associated with your OmniScript. For example, if your
LWC OmniScript updates account information, your context Id is an account record ID.
• Console Tab Icon: Select a Vlocity icon or an SLDS icon to display in the subtab of a console
after the OS action link is clicked. For example, select standard:account for an OmniScript
that updates account information.

company 1563
OmniStudio
• Console Tab Label: Enter the visible label of the Console Tab Icon. For example, Update
Account.
Launching an LWC OmniScript from a Vlocity or Custom Action on a Card

Launch an LWC OmniScript from a card on a Community or Lightning page by configuring the URL of a
Vlocity Action or Custom Action. Add a generated LWC OS component to a Community page when you do
not need to pass custom parameters to the component, or add the component to a Lightning page with or
without custom parameters. Add the Vlocity LWC OmniScript Wrapper component to a Community page
when you need to pass parameters to the LWC OmniScript.
NOTE
Using the generated LWC OS results in a boost in performance in Communities and in
Lightning Experience.
Launching an LWC OmniScript with a Vlocity or Custom Action on a Lightning Page

To launch an LWC OmniScript from a card on a Lightning page:
1. Go to Vlocity Cards tab, open a card, and navigate to the Actions section of a card state:
• To launch an LWC OmniScript with a Vlocity Action, select a reusable action from the picklist next to
the Add button.

company 1564
OmniStudio
• Click the link icon to open the Vlocity Action, and in the Target URL field, enter the relative path
from the Vlocity Aura Wrapper section in your generated LWC OS. See the section, Launching an
LWC OmniScript in Lightning, in Launch an LWC OmniScript with LWC OmniScript Wrapper
For additional Vlocity Action configuration options, see Adding a Vlocity Action to a Card.
• To launch an LWC OmniScript with a Custom Action, click Add Custom Action.
• In the URL field, enter the relative path from the Vlocity Aura Wrapper section in your generated
LWC OS. See the section, Launching an LWC OmniScript in Lightning, in Launch an LWC
OmniScript with LWC OmniScript Wrapper.
For additional Custom Action configuration options, see Adding a Custom Action to a Card.
2. Add the generated LWC OS to a Lightning page. See Adding an LWC OmniScript to a Community or
Lightning Page.
Launching an LWC OmniScript with a Vlocity or Custom Action on a Community Page

To launch an LWC OmniScript, without parameters, from a card on a Community page:
1. Add your generated LWC OS to a Community page. See Adding an LWC OmniScript to a Community
or Lightning Page.
the Add button.
• Click the link icon to open the Vlocity Action, and in the Target URL field, enter the Community
page URL hosting the generated LWC OS. For example, if your generated LWC OS is on a
Community named AccountCommunity that has a page named AccountPage, your URL might
look like:
https://exampleURL.force.com/AccountCommunity/s/AccountPage
• In the URL field, enter the Community page URL hosting the LWC OS. For example, if your
generated LWC OS is on a Community named AccountCommunity that has a page named
AccountPage, your URL might look like:
https://exampleURL.force.com/AccountCommunity/s/AccountPage
Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, Vlocity Cards supports
launching an LWC OmniScript, with parameters, from a card on a Community page
1. Add the Vlocity LWC OmniScript Wrapper component to a Community Page. See Adding an LWC
OmniScript to a Community or Lightning Page.
the Add button, and click the link icon to open the Vlocity Action.
• In the Target URL field, enter the configured URL with parameters to access the Vlocity

company 1565
OmniStudio
• In the Link Type dropdown, select CommunityURL.

• In the URL field, enter the configured URL with parameters to access the Vlocity OmniScript
Wrapper component.
Previewing a Layout
Preview a card layout to see how your cards will look once published to a Lightning or Community page.
To preview a layout:
1. In your org, click App Launcher, click Vlocity Cards, and click a version of a layout to open the Card
Designer.
2. Click the Preview tab.
NOTE
Only active cards are visible in Run Time. All inactive and active cards are visible in
Design Time.
3. Click the 'open in new window' icon to view the layout on a Visualforce page.
4. Click the refresh icon to reload the layout in the Preview pane.
5. To preview how the layout looks on different pages and mobile devices, select a page from the
dropdown list of universal and custom pages. Universal is selected by default.

company 1566
OmniStudio
6. To add a custom preview page for your layout:

1. Create a Visualfource page for your preview page. See Creating Visualforce Pages. Or choose an
existing page from Setup > Custom Code > Visualforce Pages.
2. Click + Add Custom Page.
3. In the Custom Page modal, click + Add Custom Page for each new custom page you want to
add.
4. Enter values for these properties:
• Page Name: Enter the API name of the Visualforce page.
• Page Label: Enter the label of the Visualforce page.
7. If your card is LWC enabled, you must click Deploy to update changes before previewing your layout.
What's Next
Next steps, add your card to a Lightning or Community page. See Adding a Vlocity Card to a Lightning or
Community Page. See Adding an LWC Card to a Lightning or Community Page.
Adding a Card to a Layout

Add cards to your layout after creating the layout and fetching data. See Creating a Card Layout Using
Card Designer. See Creating an LWC Card Layout.
Because cards are portable components added to one or more layouts, changes made to existing cards
apply to that same card on any layout containing that card. For example, if you add a card named
CustServ Account Cases to a layout named public-accounts and a layout named account-
policies, updating the card on one of these layouts automatically updates that card on the other layout.
A card can have its own data source independent of the layout data source. See Configuring Data Sources
for Cards Components.
Before you begin
1. Create a card layout. See Creating a Card Layout Using Card Designer. See Creating an LWC Card
Layout.
Adding a Card to a Layout

To add a card to a layout:

company 1567
OmniStudio
1. In your org, click the App Launcher, click Vlocity Cards, click a version of card layout to open.
2. In the Cards section of your layout, click + Add Card.
3. To select an existing card, in the Choose Existing column, select the checkboxes next to one or more
cards.
4. To create a new card, in the Blank Card column, enter the values for these properties:

company 1568
OmniStudio
• Card Name: Create a unique name for your card, such as CustServ Account Cases.
• Card Title: Enter the visible name of your card, such as Cases.
• (Optional) Card Author: Update the user organization that created the record. The best practice is to
use author names that describe the team creating the content. For example, MeriCommCustServ.
See Understanding the Author of a Card Layout.
5. Click Add.
6. Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, if your layout is
LWC enabled, click the Deploy button next to Enable LWC in the Layout pane to save changes to the
card layout.
Configuring a Card
To configure a card on a layout, set these optional properties:
1. To create a new version of a card, click Create Version. The new version is added underneath the
current card. Creating a version of the card creates an exact copy of the card with a Version equal to
the latest version number plus one, such as Version 2. See Cards Framework Versioning.
2. To filter the output of the returned data from the data source:
1. In the Filter section of the card, click + Add Filter.
2. In the first column's input field, enter the name of a field returned from the data source. For
example, ['AccountName']. To view available data fields to filter, click View Data in the card or
the card layout.
3. In the second column's input field, enter the value to filter. For example, Acme.
3. To configure a card to store data from the data source, or to enable additional features from a card
template, in the Card Session Variables section, click + Add Session Variables to enter a variable
Name and Value.

company 1569
OmniStudio
4. To use metatags to enable search engine optimization (SEO) options in your metadata, click +Add
Metatags. The metatags feature enables the layout to write metatags to a page header. Available card
metatags are:
• author
• description
• keywords
• viewport
The metatags are inserted after a layout or card loads, whether or not the data source is set.
Vlocity recommends that you replace metatags with the same name. Do not duplicate metatags. Web
crawlers ignore duplicate tags.
5. Select a data source for the layout in the Data Source field.
The data source holds the master query that returns results in a JSON structure for cards in the layout.
For example, you might query every policy associated with an account, then create a card for each
policy type. For more information on how to configure a data source and to see a complete list of data
sources, see Configuring Data Sources.
NOTE
Cards can have data sources different from the layout data source.
What's Next
Next steps, add card states to your cards. See Adding a State to a Card.
See Also
• Previewing a Layout
• Adding a Vlocity Card to a Lightning or Community Page

In the managed package in your org, the VlocityRequiredPermissionCheck Apex Class must exist in
Setup > Apex Classes for the Required Permissions feature to work. The Required Permissions feature
enables you to limit user access to a card layout. Enter a list of custom permissions to specify which users
can see your layout.
Before You Begin

Create custom permissions in Setup > Custom Permissions. See Create Custom Permissions.
1. From the Vlocity Cards tab, click a card layout to open in the Card Designer.
2. From the Layout panel, enter a comma-separated list of custom permissions in the Required
Permissions field. For example, if you created custom permissions named Can_Edit_Policy and
Can_View_Policy, enter them as Can_Edit_Policy,Can_View_Policy.
3. From Setup, in the Quick Find menu, enter apex.

company 1570
OmniStudio
4. Click Apex Classes.

5. Search for the VlocityRequiredPermissionCheck Apex Class. If it does not exist, continue to the
next step.
6. Click New
7. Enter the following Apex code in the Apex Class tab:

{
{
{
return checkPermission((String)args.get('requiredPermission'));
}
return false;
}

{
List<String> customPermissionsName = requiredPermission.split(',');
{
{
break;
}
}
}
}
8. Click Save.
Configuring Card Properties

Configure card properties on your card layout.
After creating a card layout and adding cards, configure card properties in the Cards pane of the Card
Designer. See Creating a Card Layout Using Card Designer or Creating an LWC Card Layout. See Adding
a Card to a Layout.

company 1571
OmniStudio

Create Creates a new version of a card. The new version is added N/A
Version underneath the current card. Creating a version of the card creates
an exact copy of the card with a Version equal to the latest version
number plus one, such as Version 2. See Cards Framework
Versioning.
+ Add Filter Filters the output of the returned data from the data source. For the For example, to show data whose account
key, select the name of a field returned from the data source. For name is Acme, select ['AccountName']
the value, enter the value to filter. To view available data fields to as the key, and Acme as the value.
filter, click View Data in the card or the card layout.
+ Add Configure a card to store data from the data source, or enable For example, enter columns as the name
Session additional features from a card template. and an array of table heading names and
Variables settings as the value if your selected card
state template is a DataTable LWC whose
attribute columns requires a list of columns
to display in the table.
+Add Enables search engine optimization (SEO) options in your For example, possible keywords for a card
Metatags metadata by allowing the layout to write metatags to a page layout that shows a list of active account
header. cases are cases, current cases,
active cases.
Available card metatags are: author, description, keywords, and
viewport.
The metatags are inserted after a layout or card loads, whether or

not the data source is set.
Vlocity recommends that you replace metatags with the same

name. Do not duplicate metatags. Web crawlers ignore duplicate
tags.
Data Sets a data source for the layout. For example, you might query every policy
Source associated with an account, then create a
The data source holds the master query that returns results in a card for each policy type.
JSON structure for cards in the layout. For more information on
how to configure a data source and to see a complete list of data
sources, see Configuring Data Sources. Cards can have data
sources different from the layout data source.
Adding a State to a Card

Add card states to display data fields from the card or card layout data source, to present different
interactions and layouts based on specified conditions, to add actions, and to add flyouts to display
additional information about a record. For example, for cards displaying past due policy information, use a
card state template, and display actions, fields, and flyouts different from those on cards displaying
information for active policies in good standing.
Before you begin

1. Create a card layout. See Creating a Card Layout Using Card Designer. See Creating an LWC Card
Layout.
2. Add a card. See Adding a Card to a Layout.
3. Select a data source for the layout or a card on the layout. See Configuring Data Sources for Cards
Components.

company 1572
OmniStudio
To add a state to a card:
1. In your org, click the App Launcher, click Vlocity Cards, and click a version of a card layout to open the
Card Designer.
2. In the Cards pane, click the black arrow on a card to expand it.
3. In the States pane, click + Add State.

company 1573
OmniStudio
TIP
When adding multiple states with similar settings, click the Clone State icon to create
a copy of the card state. The cloned card state appears below the original card state.
4. (Optional) To create a card state to display when there are no records available, select the Blank Card
State checkbox. For example, if an Account or Contact does not have an insurance policy, create a
state with a card-open-slds template to display a linked action to add a policy.

company 1574
OmniStudio
5. (Optional) Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, if your
card is LWC enabled, select the Custom LWC checkbox to embed any Vlocity Lightning Web
Component inside an LWC card state. See Embedding a Vlocity Lightning Web Component Inside an
LWC Card State.
6. In the Name field, enter the name of the state, such as Active Policy.
NOTE
The state Name is for internal use and does not appear on the card.
7. Select a card state template:

• To select a card state template for an Angular card:
• Select a template from the Template dropdown, such as card-active-slds. See Base UI and
Card Templates.
• To select a card state template for an LWC enabled card:
• Select a template from the State LWC dropdown, such as card-active-state. See Base LWC
Card and Layout Templates.

company 1575
OmniStudio
NOTE
If you want to display data fields, only actions, or both, choose the appropriate
template. Some card templates display only actions, only data fields, and both.
For example:
• Select card-active-slds for an active card, such as a policy card that displays policy
information and related actions.
• Select card-open-slds for a Blank Card State, such as a policy card that only
displays a Create New Policy action link for an Account or Contact without a
policy.
8. (Optional) If the selected template has a placeholder, see Adding a Placeholder to a Card State.
NOTE
Your card state template must have a placeholder merge field. See Creating a
Placeholder.
9. To add data fields:

a. Select a field from the Fields dropdown, and click Add.
NOTE
Fields come from the layout data source unless the card has its own data source.

company 1576
OmniStudio
IMPORTANT
If you do not see a list of available data fields, click View Data in the Card pane
or the Layout pane, whichever has the data source configured.
b. (Optional) To enter a field not listed in the dropdown, but that does exist in your data source, select
<<Custom Field>>, and click Add For example, if the current record used in the Test Data
Source Settings does not have a Description in the JSON schema, but is available in the
associated DataRaptor, the new field may not display in the Fields list.
c. (Optional) If you selected <<Custom Field>> from the Fields dropdown, in the first column,
enter the name of the field, such as ['Policy Description'].
d. To update the field type, in the middle column, delete the default string, and choose from the
available types in the picklist. For example, if the field is a date, select date.
e. To update the visible label of the field, in the last column, enter a label. For example, if the field is
['Created Date'], enter Policy Created.

company 1577
OmniStudio
10. (Optional) To add actions to the card state, see Using Actions with Cards.
11. (Optional) To add a flyout to display additional information about the record displayed on the card, see
Adding a Flyout to a Card State or Creating an LWC Flyout.
12. (Optional) To set conditions that must be met for the card state to be visible, see Adding Conditions to
a Card State.
13. To preview the card, and check that card states are working as expected, click the Preview tab. For
more preview options, see Previewing a Layout.
14. Click Activate on each card.
What's Next
Next steps, preview your cards. See Previewing a Layout.
See Also
• Adding a Vlocity Card to a Lightning or Community Page

Adding Conditions to a Card State

Set conditions to determine which card state is displayed on a layout or to change appearance based on
conditions. For example, on a card that displays policy information, one card state shows action links to
update profile and account information for all policies, while another card state includes a renew action link
if the policy is about to expire.
If a card has multiple states, it must have logical conditions that determine which state is displayed and
when. For example, a card has an active state if there is data to display, and a blank or open state if there
is no data and limited actions.
To add a condition to a card state:
1. In your org, click the App Launcher, click Vlocity Cards, and click a version of a card to open the Card
Designer.
2. In the Conditions section of a card state, click + Add Condition.

company 1578
OmniStudio
a. Select AND or OR from the dropdown preceding each condition:

• For example, the policy status is purchased AND the expiration date is less than 31 days.
NOTE

• For example, the policy status is closed OR the expiration date is less than 31 days.
NOTE
cards.
b. Click into the first input field, from the list of data fields, select a data field to filter, such as
['DaysToExpiration'].
c. Select the operator from the dropdown in the middle column, such as <.
d. In the last input field, enter the value to filter, such as 31.

company 1579
OmniStudio
IMPORTANT
In an LWC enabled card, when adding params and $root.vlocity context
variables as values to check against in a condition, enclose them in double curly
braces. For example, {{params.id}} and
{{$root.vlocity.userAccountId}}.

a. Click + Add Group after creating a condition, such as DaysToExpiration < 31.
b. Click + Add Condition and enter values for all fields for each condition. You must create at least
two conditions to form a group.
For example, use the conditions feature to build the conditional expression DaysToExpiration <
31 AND ( PolicyType = Universal Life OR PolicyType = Universal Variable
Life) to filter for policies about to expire, and whose policy type is either Universal Life or Universal
Variable Life.

company 1580
OmniStudio
Creating a Custom State Field

You can create a custom State Field in the template for your layouts or cards by entering 'custom-type'
into the supporting HTML for the template in the Template Designer, as follows:
The custom-type appears in the State Field type in the Card Designer:

company 1581
OmniStudio
You can review the custom type's structure as entered in the Template Designer via the Preview tab in the
Card Designer:

company 1582
OmniStudio
Configuring Data Sources for Cards Components

Configure a data source on a card, layout, or flyout to retrieve data from a Salesforce object or an external
database. Display the returned data on cards in a layout or flyout.
Cards can have data sources independent of the layout or flyout data source.
NOTE
An administrator can enable or disable data sources for an org, profile, and user level. See
Enable and Disable Data Sources.

company 1583
OmniStudio
Data Source Types

Data sources available for card, layouts, and flyouts include:

company 1584
OmniStudio
Data Source Description Availability

Type
Integration Uses a Vlocity Integration Procedure to return data. Integration Procedures are declarative, Cards and
Procedures server-side processes that execute multiple actions in a single server call. See Integration Layouts
Procedures.
IMPORTANT
Vlocity recommends using a Vlocity Integration Procedure as a data
source for optimal flexibility and easier implementation.
Apex Remote Uses an Apex Remote class and method to return data. An Apex Remote class is a standard Cards and
Apex class that implements the VlocityOpenInterface. Layouts
Apex REST Uses a REST endpoint of an Apex class to return data. Cards and
Layouts
DataRaptor Uses a Vlocity DataRaptor Extract interface to return data. Field-level security is fully Cards and
supported. See DataRaptors. Layouts
Dual Combines Apex Remote and Apex REST technologies to support hybrid applications available Cards and
for both web and mobile usage. For example, the Salesforce web environment uses Apex Layouts
Remote technology while its parallel mobile App uses the Apex REST API, requiring
configuration for multiple environments.
Parent On the card or card layout of a flyout, the Parent data source uses data from the parent card Flyouts
or card layout that a flyout is assigned. See Creating a Flyout.
REST Uses the standard REST API call to return data. The Vlocity Rest types include: Cards and
Layouts
• Web: Standard request from the URL of a callout endpoint.
• Named Credentials: Specifies the URL of a callout endpoint and its required authentication
parameters in one definition.
NOTE
Use +Add Header Variables to add any request headers. Most third-
party APIs expect various headers such as tokens, public keys, and
content-type.
SOQL Query Uses a Salesforce Object Query Language (SOQL) to search an org's Salesforce data for Cards and
specific information. For example, SELECT Name,Id FROM Account LIMIT 5. Layouts
NOTE
If security is a concern, use a DataRaptor instead of a SOQL query,
because DataRaptors fully support field-level security.
SOSL Query Uses a Salesforce Object Search Language (SOSL) to construct text-based search queries Cards and
against the search index. Layouts
Sample Uses sample JSON to set up a card with a temporary data source, which will eventually be Cards and
replaced with another data source. This allows you to embed the custom JSON directly into Layouts
the layout without depending on external data.

company 1585
OmniStudio
Data Source Description Availability

Type
Streaming Uses the Salesforce Streaming API to push notifications from the server to the client based on Cards and
API criteria that you define. The Vlocity Streaming API types include: Layouts
• Streaming Channel: Sends notifications of general events that are not tied to Salesforce
data changes.
• PushTopic: Uses an SOQL query to return a result that notifies listeners of changes to
records in a Salesforce organization.
• Platform Event: Uses Salesforce's Platform Events enterprise messaging platform, which
combines PushTopic and Streaming Channel to enable apps to communicate inside and
outside of Salesforce.
Configuring an Integration Procedure Data Source

Configure a data source to use a Vlocity Integration Procedure to execute multiple actions in a single server
call.
NOTE
An Integration Procedure doesn’t support the following data sources:
• Salesforce Object Search Language (SOSL)

• Streaming API
• Off-Platform
To Configure an Integration Procedure on a Vlocity Card:

1. On the Vlocity Cards tab, click New to configure a data source for a new card, or select an existing
card to configure its data source.
2. In the Cards Designer, in the Layout or Cards pane, from the Data Source picklist, select Integration
Procedures.

company 1586
OmniStudio
3. Enter the Name of the Integration Procedure to use. To create an Integration Procedure, see Create an
4. Click + Add Input Map Variable to add one or more name-value pairs to pass to the Integration
Procedure. To determine the name-value pair to pass to the Integration Procedure, in your Integration
Procedure, view the Element Value Map on its SetValues action or the Input Parameters on its
Preview tab.

company 1587
OmniStudio
For example, to use the Page Parameters {{params}} context variable to dynamically set the
ContextId of your layouts and cards:
1. Open your Integration Procedure, click the Preview tab to view the Input Parameters.
TIP
To quickly access the Integration Procedure, click the link icon next to the
Integration Procedure name.
2. In the Data Source section of your card or layout, in the first field of the Input Map, enter the key of
the Input Parameter, such as AccountId.
3. In the second field of the Input Map, enter {{params.id}} as the value. Parameters passed to a
page are stored in the {{params}} context variable for use anywhere in the Vlocity Cards

company 1588
OmniStudio
framework. In this case, your card or layout inherits the Id of the record page it's on in order to
dynamically populate the cards with that record's data.
5. Optionally, enter the values for the following:
• Options Map: To pass additional parameters to the Integration Procedure, enter a name-value pair.
• Return JSON Path: To drill down through the JSON data to pass a specific dataset to the cards,
enter the JSON path. For example, enter Account.Cases to return data from the ‘Cases’ object only.
• OrderBy: To change the order of the data returned, choose the data field by which to order the
returned data.
IMPORTANT
The OrderBy feature works with one array of objects. The feature does not work
with multiple objects with or without internal arrays. For example, if you want to
order by Case.Number, and have Account, Cases and Contact objects in the
returned data, the OrderBy feature does not work.
• Reverse Order: To reverse the order of the data returned, select True from the picklist.
• Timeout (ms): To limit the time that the framework waits for the designated data source to return a
response, set a timeout value in milliseconds.
• Timeouts improve handling user interactions with long running processes. Setting an appropriate
timeout value allows the application and users to react accordingly to long wait times.
• Interval (ms): To continuously refresh the data and check for changes from the data source, set an
interval value in milliseconds.
• If changes are found, the layout or card component reloads. Setting an interval enables recursive
updates of records.
6. In Test Data Source Settings, add a test variable that the query can use to return live data in the
Preview pane. See Testing Data Source Settings.
To Use Dummy Data from an Integration Procedure:

1. In a current or new Integration Procedure add a Response Action step.

company 1589
OmniStudio
2. Use one of two methods to add dummy JSON data:

• For a small dataset:
1. In the Properties tab, click ADDITIONAL OUTPUT RESPONSE.
2. For each key/value pair, click the Add Key/Value Pair button and add your data.

company 1590
OmniStudio
• For a large dataset:

1. Click the Edit as JSON link at the top right of the Properties tab.
2. In the additionalOutput node, enter your full JSON data as an object.

company 1591
OmniStudio
3. (Optional) If the Integration Procedure has other data sources, to return only the dummy data, select
the checkbox next to the Return Only Additional Output label.

company 1592
OmniStudio
4. In the Card Designer, in the Layout or Cards pane, confirm that the Integration Procedure with the
dummy data is chosen in the Name field.
5. To view your dummy data, click the View Data button at the bottom of the Layout or Cards pane.
Configuring a SOQL Query Data Source

Configure a data source to use a Salesforce Object Query Language (SOQL) query to search an org's data
for specific information.
NOTE
When mapping fields, only fields in the field picker that have non-null values for the
specific record in the test query are visible. Use a test record that you know has non-null
values for all the fields you want to map. Or use custom fields if the test record doesn't
have the fields that you want to map.
The SOQL queries are encrypted so that Cards do not display query information on the client-side. If
security is a concern, use a DataRaptor instead of a SOQL query, because DataRaptors provide field-level
security.
NOTE
source to execute multiple actions in a single server call. See Configuring an Integration
Procedure Data Source.
To configure a data source for a card, perform the following steps:
1. In the SOQL Query box, enter a SOQL expression. For example:

company 1593
OmniStudio
2. (Optional). Enter values for these properties:
• To drill down to a specific dataset, in the Result JSON Path field, enter a path. For example, enter
records.results, which drills down to the results array and passes the array to the card or
card layout.
• To sort data by a specific data field, enter the field name in the Order By input field.
• To reverse the order of the data returned, select True from the Reverse Order picklist.
• Set a Timeout value in milliseconds.

The timeout value controls the time that the framework waits for the designated data source to return
a response. Timeouts improve handling user interactions with long running processes. Setting an
appropriate timeout value allows the application and users to react accordingly to long wait times.
• Set an Interval value in milliseconds.
The card component's data source refreshes continuously at the given interval and checks for
changes in data source records. If changes are found, the layout or card component reloads. Setting
an interval enables recursive updates of records.
3. To preview a card using real data, add a test variable in the Test Data Source Settings fields. See
Testing Data Source Settings.
Configuring a SOSL Search Data Source

Construct text-based search queries against the search index with Salesforce Object Search Language
(SOSL).
You can search text, email, and phone fields for multiple objects to which you have access, including
custom objects, in a single query. See the SOSL and SOQL Reference in the Salesforce help. The SOSL
queries are encrypted so that Cards do not display query information on the client-side.

company 1594
OmniStudio
To create a SOSL query for a card:
1. On the Vlocity Cards tab, click New to configure a data source for a new cards component, or select an
existing component to configure its data source.
2. In the Cards Designer, in the Layout or Cards pane, from the Data Source picklist, select SOSL
Search.
3. Select or enter values for the following:
Field Select or Enter

Search For Enter the search term in the object field. Must be more than one character.
In Select the fields to search:
• All fields (Name, Email, Phone)

• Name Fields
• Email Fields
• Phone Fields
Returning sObject & fields Select at least one sObject. Click + Add sObject to add more sObjects and fields.
Limit to Specify the maximum number of rows to return.
4. Reusing topic #UUID-ae995bf9-95bf-810f-2f09-0d74d3ec2531
5. Test data source settings. To preview a cards component using real data, add a test variable that the
query can use to return live data. See Testing Data Source Settings.
Configuring a DataRaptor Data Source

Configure a DataRaptor data source to fetch data from a DataRaptor Extract.
DataRaptor is a mapping tool that enables you to read, transform, and write Salesforce data. See
DataRaptor Overview.
NOTE
To use a DataRaptor Extract as a data source for a layout or card:
2. In the Cards Designer, in the Layout or Cards pane, from the Data Source picklist, select DataRaptor.

company 1595
OmniStudio
3. Enter the Interface Name of a DataRaptor Extract.

4. Click +Add Input Map Variable and add one or more name-value pairs to pass to the DataRaptor.
For example, to use the Page Parameters {{params}} context variable to dynamically get the
ContextId of your layouts and cards:
1. Open your DataRaptor, click the Preview tab to view the Input Parameters.

company 1596
OmniStudio
TIP
To quickly access the DataRaptor, click the link icon next to the Interface Name.
2. In the Data Source section of your card or layout, in the first field of the Input Map, enter the key of
the Input Parameter, such as AccountId.
3. In the second field of the Input Map, enter {{params.id}} as the value. Parameters passed to
the page are stored in the {{params}} context variable for use anywhere in the Vlocity Cards
dynamically populate the cards with that record's data.
card layout.


company 1597
OmniStudio
Configuring a REST Web Data Source

Configure a REST Web data source to get or post data from or to a public API.
For example, pull in weather data from a weather API based on a policy holder's postal code.
NOTE
To configure a REST data source:
1. On the Vlocity Cards tab, click New to configure a data source for a new cards component, or select
the component for which you want to configure a data source.
2. In the Cards Designer, in the Layout or Cards pane, from the Data Source picklist, select REST.

company 1598
OmniStudio
3. From the Subtype picklist, select Web.

4. In the Endpoint box, enter REST endpoint URL. For example:
5. Specify the REST method:

• GET—Requests data specified by the parameters of the URL.
• POST—Sends JSON data specified in the Body text area.
You can use Context Variables to pass inherited values with either method.
6. Click +Add Header Variable to add request headers.
Most third-party APIs expect headers, such as tokens, public keys, and content-type. For example:
Request header Value

Accept: application/json

company 1599
OmniStudio
Request header Value

Accept-Language: en_US
Token: Ke2B34kmpOU9wen
If you are making a cross-domain REST API call, you must ensure that it abides by the Cross-Origin
Resource Sharing (CORS) policy. For example, an API response that contains a request header
named Access-Control-Allow-Origin: * enables CORS.
card layout.

Configuring a REST Data Source Using Named Credentials

Configure a REST data source using Named Credentials to authenticate Apex callouts.
A named credential specifies the URL of a callout endpoint and its required authentication parameters in
one definition. To create a named credential, see Named Credentials as Callout Endpoints.
To configure a REST data source:
1. On the Vlocity Cards tab, click New to configure a data source for a new card component, or select an
2. In the Cards Designer, in the Layout or Cards pane, from the Data Source picklist, select REST.

company 1600
OmniStudio
3. From the Subtype picklist, select Named Credential.

4. In the Path box, enter the REST endpoint URL.

company 1601
OmniStudio

6. Reusing topic #UUID-ae995bf9-95bf-810f-2f09-0d74d3ec2531
7. Reusing topic #UUID-253808e6-a3a8-7a43-b4ea-1b75844484d6
Configuring an Apex REST Data Source

Configure a data source to use an Apex REST call to fetch data to populate fields on a FlexCard. See
Introduction to Apex REST.
NOTE

company 1602
OmniStudio
To configure Salesforce to use an Apex REST method:
2. In the Cards Designer, in the Layout or Cards pane, from the Data Source picklist, select Apex REST.
3. In the Endpoint field, enter the URL of the REST endpoint.
card layout.

company 1603
OmniStudio

Configuring an Apex Remote Data Source

Configure a data source to invoke an Apex Class and method to fetch data to populate a card.
Apex remote data sources can run asynchronously through Apex. This increases the CPU time but ensures
that long-running transactions are not timed-out.
NOTE
Before You Begin

1. Know the Apex remote class and method you need to invoke before you can configure a remote data source. Managed packages
can include Apex remote classes and methods.
To see existing Apex classes:
a. In your org, go to Setup, and in the Quick Find box, enter Apex.
2. Beginning with Vlocity Health and Insurance Spring '21, add an Apex class permissions checker to ensure only authorized users can
access VlocityOpenInterface classes (APIs) from a remote action on a card. See Adding an Apex Class Permissions Checker.
Configure Apex Remote Settings
1. In your org, click the App Launcher, click Vlocity Cards, click a version of a card layout to open the
Card Designer.
2. In the Layout or Cards pane, from the Data Source picklist, select Apex Remote.

company 1604
OmniStudio
3. Enter the name of the Remote Class.

company 1605
OmniStudio
IMPORTANT
The Apex Class must implement the Vlocity Open Interface otherwise an error
message displays.
4. Enter the name of the Remote Method.

For example, you can access the remote Apex method getStories from the remote Apex class
StoryListHandler.
5. Click + Add Input Map Variable to add one or more name-value pairs to pass to the remote Apex
class method.
For example, to use the Page Parameters {{params}} context variable to dynamically get the
ContextId for your layouts and cards:
1. In the first field of the Input Map, enter a ContextId form your Apex class method, such as
AccountId.
2. In the second field of the Input Map, enter {{params.id}} as the value. Parameters passed to
the page are stored in the {{params}} context variable for use anywhere in the Vlocity Cards
dynamically populate the card with that record's data. The remote method receives an inherited
value as an Account Id from the layout or card, not the literal string {{params.id}}.
6. Click +Add Options Map Variable to add option variables to the map passed to the remote method.
NOTE
By default the NS.IntegrationProcedureService continuation object is set for
you to use asynchronous callouts to make long-running requests from a Visualforce
page to an external Web service and process responses in callback methods. NS
represents your org's Namespace, such as vlocity_ins or vlocity_cmt, as in
vlocity_ins.IntegrationProcedureService.
card layout.

company 1606
OmniStudio

Configuring Dual Data Sources

A dual data source combines Apex remote and Apex REST technologies to support hybrid applications for
both web apps and mobile apps. The Salesforce web environment uses Apex remote technology, and the
parallel mobile app uses the Apex REST API, requiring configuration for dual environments.
NOTE
To configure a dual data source:
2. In the Cards Designer, in the Layout or Cards pane, from the Data Source picklist, select Dual.

company 1607
OmniStudio
3. In the Desktop ApexRemote Config section, follow these steps:

a. In the Remote Class box, enter the name of the remote class, for example, CpqAppHandler.
b. In the Remote Method box, enter the name of the method the remote class invokes.
For example, the method in the CpqAppHandler remote class is getCartsItems.
c. Click + Add Input Map Variable to add input variables to the map that is passed to the remote
method.
Context variables allow the map to inherit values from variables in a parent Layout or Card. By
defining CartId as {{params.id}}, the remote method receives an inherited value (an Account
ID) from the layout or card, not the literal string {{params.id}}.
d. Click +Add Options Map Variable to add option variables to the map that is passed to the remote
method.

company 1608
OmniStudio
e. In the Result JSON Path box, you can specify a path to a specific node in the JSON-formatted
response. If the information resides specifically in the CartId node, set the Result JSON Path to
CartId.
4. In the Mobile Hybrid RemoteApex Config section, follow these steps:
a. In the Endpoint box, enter the Apex REST endpoint URL.
b. Specify the REST method:


company 1609
OmniStudio
c. (Optional). Enter values for these properties:
• To drill down to a specific dataset, in the Result JSON Path field, enter a path. For example,
enter records.results, which drills down to the results array and passes the array to the
card or card layout.

The timeout value controls the time that the framework waits for the designated data source to
return a response. Timeouts improve handling user interactions with long running processes.
Setting an appropriate timeout value allows the application and users to react accordingly to
long wait times.

company 1610
OmniStudio
changes in data source records. If changes are found, the layout or card component reloads.
Setting an interval enables recursive updates of records.
5. To preview a cards component using real data, add a test variable that the query can use to return live
data. See Testing Data Source Settings.
Vlocity Streaming API Data Sources

Streaming API lets you push a stream of notifications from Salesforce to client apps based on criteria that
you define. It has a persistent connection that continues to deliver new data as it becomes available, rather
than using client polling. Polling is the most traditional way to get data from a data source that produces the
stream of events and updates. The client makes requests periodically, and the server sends data if there is
a response. In case there is no data to be sent by the server, an empty response is returned.
Streaming API uses push technology, a publish and subscribe model that transfers information that is
initiated from a server to the client. Push technology transfers information that is initiated from a server to
the client. This type of communication is the opposite of polling where a request for information is made
from a client to the server. The main benefits of using the Streaming API are a reduced number of API calls
and improved performance.
For details about the Streaming API, see the Use Streaming API topics and the Streaming API Developer
Guide in the Salesforce help.
This illustration shows the difference between Polling and Streaming API:

company 1611
OmniStudio
Streaming API Types

The Vlocity Streaming API types include:
Type Description Example

Streaming Channel The Streaming Channel API type uses the Streaming API to send notifications Configuring a
of general events that are not tied to Salesforce data changes. Streaming Channel
Data Source
PushTopic A PushTopic is an SOQL query that returns a result that notifies listeners of Configuring a
changes to records in a Salesforce organization. The PushTopic defines a PushTopic Data
Streaming API channel. Source
Platform Event Platform Events are part of Salesforce’s enterprise messaging platform. The Configuring a Platform
platform provides an event-driven messaging architecture to enable apps to Event Data Source
communicate inside and outside of Salesforce. A Platform Event combines
PushTopic and Streaming Channel. Instead of working with an sObject,
Platform Events work with custom objects.

company 1612
OmniStudio
Streaming Channel Data Source

not tied to Salesforce data changes.
Use the Streaming Channel API when you want to send and receive notifications based on custom events
that you specify. You can use Streaming Channel API for any application that sends custom notifications,
such as a Chat application.
Streaming API is known as Generic Streaming in Salesforce. For details, see Generic Streaming in the
Salesforce Streaming API Developer's Guide.
For example, use the Streaming Channel data source for a Chat application for the users in your org.
Configuring a Streaming Channel Data Source

Enable the Streaming Channel data source to send and receive notifications based on custom events that
you specify.
The Streaming Channel API type enables the Streaming API to send notifications of general events that are
not tied to Salesforce data changes. See Streaming Channel Data Source.
To configure a Streaming Channel data source:
1. In the Cards Designer, in the Layout or Cards pane, from the Data Source picklist, select Streaming
API.
2. From the Type picklist, select Streaming Channel.

company 1613
OmniStudio
3. In the Channel field, select the URL of the app that you created.
This field is auto-populated for Streaming Channel and PushTopic.

From the Get All Messages picklist, select True or False.

card layout.


company 1614
OmniStudio
IMPORTANT
After configuring a Streaming API data source for an LWC card, you cannot preview
the card in the Card Designer's Preview pane. To view the LWC card, you must deploy
it, and then add the LWC card to a Lightning or Community page. For more
information on deploying an LWC card, see Creating an LWC Card Layout. For more
information on adding an LWC card to a page, see Adding an LWC Card to a
PushTopic Data Source

not tied to Salesforce data changes. Use the Streaming Channel API when you want to send and receive
application that sends custom notifications, such as a Chat application. Streaming API is known as Generic
Streaming in Salesforce.
For details, see Generic Streaming in the Salesforce Streaming API Developer's Guide.
A PushTopic is a SOQL query that returns a result that notifies listeners of changes to records in a
Salesforce organization. The PushTopic defines a Streaming API channel. For instance, if you want to get
notified when a case is created for a particular type or status or both, use a PushTopic.
The following example code creates a PushTopic that pushes data if a case of type Problem is created:
Select Id,CaseNumber,Subject,ContactEmail from Case where Type = 'Problem'
If you also need Status, you can simply add another condition:
Select Id,CaseNumber,Subject,ContactEmail from Case where Type = 'Problem' AND

Status = ‘New’
You cannot use GROUP BY or ORDER BY clauses in a PushTopic.
For details, see Creating a PushTopic in the Salesforce Help.
For another example, you could create an app that notifies a user any time a new task is created for that
user.

company 1615
OmniStudio
Configuring a PushTopic Data Source

Configure a PushTopic data source to run an SOQL query that returns a result that notifies listeners of
changes to records in a Salesforce organization.
The PushTopic defines a Streaming API channel. For instance, if you want to get notified when a case is
created for a particular type or status or both, use a PushTopic. For more information on how a Streaming
API PushTopic data source works, see PushTopic Data Source.
To configure a PushTopic data source:
API.
2. From the Type picklist, select PushTopic.

company 1616
OmniStudio
3. In the Channel field, select the URL of the PushTopic that you created.
This field is auto-populated for Streaming Channel and PushTopic.


card layout.


company 1617
OmniStudio
IMPORTANT
Platform Event Data Source

objects.
• Systems in request-response communication models make a request to a web service or database to

obtain information about a certain state.
• An event-based model obtains information and can react to it in near real time when the event occurs.
• Event producers don’t know the consumers that receive the events. Any number of consumers can
receive and react to the same events.
• The only dependency between producers and consumers is the semantic of the message content.
• Unlike with an sObject, you can’t update or delete event records. You also can’t view event records in the
Salesforce user interface, and Platform Events do not have page layouts.
The architecture is suitable for large distributed systems because it decouples event producers from event
consumers, thereby simplifying the communication model in connected systems.
For details, see Delivering Custom Notifications with Platform Events in the Salesforce Help.

company 1618
OmniStudio
For example, you might create a Card that uses a Platform Event as a data source to display the current ink
level for a printer. You must first create your Platform event. To see a detailed demo, see End-to-End
Example: Printer Supply Automation in the Salesforce Help.
Configuring a Platform Event Data Source

objects. See Platform Event Data Source.
To configure a Platform Event data source:
API.
2. From the Type picklist, select Platform Event.

company 1619
OmniStudio
3. In the Channel field, enter the URL of the Platform Event that you created.



company 1620
OmniStudio
card layout.

IMPORTANT
Testing Data Source Settings

Add runtime variables to fetch and test your data source.
Preview a FlexCard using real data by adding test variables that the query can use to return live data.
1. In the Test Data Source Settings section, click + Add Test Variables.

company 1621
OmniStudio
2. Set Name to (for example) params.id.

3. Set Value to an actual record ID value.
To find the actual ID value of a Salesforce record, copy the ID from the URL on the object's record
detail page. If you are looking for an account ID, go to an Account record's detail page and capture the
information after the last slash (/), as shown:
4. Click the View Data button to view the JSON-formatted response.

• SOQL Query Example

company 1622
OmniStudio
• Data Raptor Example

company 1623
OmniStudio
Cards URL Syntax

The Vlocity Cards framework uses a generic Visualforce page to show layouts. This page requires at least
one parameter pair to load a specific layout. For example:
/apex/consolecards?layout=MyLayout&layoutId=3141592653589793
• layout—Represents the name of an active layout.

company 1624
OmniStudio
• layoutId—for testing purposes, the layout ID is passed so you can view the layout regardless of its
version or status.
By default, layout and layoutId get passed as URL parameters. For example:
/apex/ConsoleCards?layout=Test&layoutId=0011500001ChJqa.
You can add more parameters to the URL as necessary.
IMPORTANT
If either layout or layoutId are not set, the framework loads the default Grid layout.
Consequently, any other parameters passed to the page get stored in the {{params}}
context variable to use on that page.
Creating Zones
Zones enable you to arrange the information on a card layout into sections. Create zones in the Template
Designer, add the zones to a layout in the Card Designer, then add cards or nested layouts inside the
zones.
For example, to create a layout where account information takes the entire width of the layout, and related
information displays beneath it as a 3-column grid, create a Header zone with a nested layout for the
account information, and one or more Body zones for cards displaying related information, such as cases,
policies, and so forth.

company 1625
OmniStudio
Creating a Zone in the Template Designer

Organize cards into sections by creating zones in the Template Designer.
To create a zone:
1. In your org, click App Launcher, click Vlocity Templates, and click a version of a template to open the
Template Designer.
TIP
Clone a template that has zones, such as card-canvas-3x-zones-slds. Then
update, remove, or add zones as needed.

company 1626
OmniStudio
2. Click the Edit tab.

3. In the Zones section, click Add Zone.
4. Enter a unique zone Name and descriptive zone Label, such as footer and Footer, respectively.
5. Click Save.
6. Click the HTML tab.
7. To reference the zone by Zone Name in the HTML add data.zones['Zone Name'].cards to an
ng-repeat directive, such as in card-canvas-3x-zones-slds:


<div ng-repeat="card in data.zones['Body'].cards |orderBy:order|filter:
searchFunc(card, searchTerm.value)" vloc-card ctrl="{{ctrl}}" ng-
model="card" data="card" records="records" index="{{$index}}" session-
id="{{sessionId}}" class="slds-p-around--small slds-size--1-
of-1 slds-medium-size--3-of-6 slds-large-size--4-of-12" use-existing-
element-type>
</div>
8. Click Save.
Adding a Zone to a Card Layout

Add cards to a zone or nest card layouts inside a zone to arrange cards into sections.
To add a zone to a card layout:
1. In your org, click App Launcher, click Vlocity Cards, and click a version of a card layout to open the
Card Designer.

company 1627
OmniStudio
2. In the Layout pane, select a template with zones.

3. Click the black arrow in the Zones pane to expand it, and click the black arrow of a zone to expand.
4. (Optional) Edit the zone Label.

5. To add a card to a zone, see Adding a Card to a Zone.
6. To add a card layout to a zone, see Adding a Card Layout to a Zone.
7. Click Activate on the Layout pane.
Adding a Card to a Zone
To add a card to a zone:

company 1628
OmniStudio
1. Expand a zone, and click + Add Card.

2. To select the cards to add to the zone, select the checkbox for each card.
3. Click Add.
Adding a Card Layout to a Zone
To embed a card layout inside a zone:
1. Expand a zone, and click into the Layouts input field to select an active card layout from the
dropdown.

company 1629
OmniStudio

company 1630
OmniStudio
2. Click + Add Layout.
Creating a Placeholder
Create placeholders in the Template Designer to insert additional fields into card states in the Card
Designer. For example, to add a unique title for escalated case cards, select the card-active-
placeholders-slds card template, and enter Escalated for the value of the Title placeholder.
To create a placeholder in the Template Designer:
1. In your org, click the App Launcher, click Vlocity Templates, and click to open a version of a template in
the Card Designer.
TIP
Clone a template that has placeholders, such as card-active-placeholder-
slds. Then update, remove, or add placeholders as needed. See Cloning a
Template.
2. Click the Edit tab.

3. In the Placeholders section, click Add Placeholder.
4. Enter a Placehdoler Name such as CaseTitle.
IMPORTANT
The Placeholder Name is the API name, which can have underscores, but no spaces.
For example, Case_Title or CaseTitle is permitted. However, Case Title is
not.
5. Click Save.
6. Click the HTML tab.
7. Enter the placeholder label, type, and value merge fields inside the HTML:
• To reference the placeholder value in the HTML, add
{{placeholder.PlaceholderAPIName.value}} where you want the value to display on the
card.
• (Optional) To reference the placeholder label in the HTML, add
{{placeholder.PlaceholderAPIName.label}} where you want the label to display on the
card.
• (Optional) To reference the placeholder type in the HTML, add
{{placeholder.PlaceholderAPIName.type}} to display the type of data, such as
String or Address.
<div class="slds-media__body slds-truncate">
<a href="javascript:void(0);" class="slds-text-link--reset" tooltip-

placement="bottom" tooltip="{{data.title}}">

company 1631
OmniStudio

<span class="slds-text-heading--small">
{{placeholder.CaseTitle.label}}: {{placeholder.CaseTitle.value}}: </span>
</a>
</div
8. Click Save.
Adding a Placeholder to a Card State

Add additional fields to a card state by adding placeholders created in the Template Designer. See Creating
a Placeholder.
To insert a placeholder into a card state:
IMPORTANT
Your card template must support placeholders. For a list of Vlocity base card state
templates that support placeholders, see Base UI and Card Templates. To create a custom
card state template that supports placeholders, see Creating a Placeholder.
1. Select a placeholder from the Placeholders dropdown, and click Add.
2. Enter values for these fields:

• Value: Enter the value of the placeholder.
NOTE
By default, a list of data fields available from the card or card layout data source is
visible when you click into this input field. However, any value is acceptable.
• (Optional) Placeholder type: To update the field type, in the second input field, delete the default
string, and choose from the available types in the picklist.

company 1632
OmniStudio
• (Optional) Label: If your template displays a label, enter a label for the placeholder. For example:
NOTE
By default, a list of data fields available from the card or card layout data source is
visible when you click into this input field. However, any value is acceptable.
For example, display an alert for high priority cases using a card state template that displays both the
placeholder label and its value in the header of a card. Enter Priority as the label of the alert, and
the context variable ['Priority'] as the placeholder value.

company 1633
OmniStudio
Creating a Flyout
Create a flyout to display additional information about the record displayed on the card when you click the
card. For example, a flyout can display information from long text strings that do not fit in the standard card
field, or data from child records, such as open cases for an account, or additional actions.
To create a flyout:
1. In your org, click the App Launcher, click Vlocity Cards, and click New to create a new card layout.
2. On the New Layout screen, in the Type field, select Flyout.
3. Select the flyout Data Source:
• To use the parent context variable of the card layout where you'll add your flyout, select Parent as
the data source. To display specific data in the flyout:
• Click View Data on the Layout or Card pane in the card layout where you'll add your flyout and
copy the JSON data by clicking Copy to clipboard.
• Choose Sample as the Data Source on your flyout layout and paste the copied JSON inside the
input field.

company 1634
OmniStudio
• Click View Data to generate the Fields picklist.

• From the Fields picklist in the card state, add data fields.
• If your flyout does not use data from the parent context variable of the card layout from where you'll
add your flyout, add a data source to the layout, and optionally, to a card. See Configuring Data
Sources for Cards Components.

company 1635
OmniStudio
4. Click Activate on the Layout pane and on each card.
Adding a Flyout to a Card State

Add a flyout to a card state to display additional information about the record displayed on the card when
you click the card. For example, the base Vlocity flyout template flyout-grid-slds displays overflow
actions from the parent card.
To add a flyout to a card state:
1. In your org, click the App Launcher, click Vlocity Cards, and click a version of a card to open the Card
Designer.
2. In the Flyouts section of a card state, select a flyout layout template from the Flyout Layout
dropdown. See Creating a Flyout. Only active flyouts are visible in the list.
3. To display specific records, set the Flyout Data Object:
NOTE
The parent context variable always gets passed into the flyout. See Creating a Flyout.
• null: leave the field blank to pass in the parent context of the card.
• $scope.obj.[children]: where [children] represents an array inside the data source object such
as PolicyLineItems for a Policy.

company 1636
OmniStudio
Cloning a Card Layout

Clone an existing card layout to copy layout, card state, and data source settings to a new card layout.
To clone an existing card layout:
1. Go to the Vlocity Cards tab and click on an existing card layout to reveal the list of card layout versions.

company 1637
OmniStudio
2. Select a card layout version, click the dropdown arrow, and click Clone.
3. In the Layout Name field, update the name of the card layout.
NOTE
Vlocity recommends that you create a unique name when cloning a layout. Only one
layout with the same layout name can be active at a time.

• Layout Type: To create a card layout, select Layout. See Vlocity Layouts. To extend a card with
supplemental information that is either hidden or displayed in larger areas, select Flyout. See
Creating a Flyout.
• Layout Author: Enter an author name that describes the team creating the content. To learn more
about layout author names, see Understanding the Author of a Card Layout.
5. Click Clone.
Creating a Version of a Template

To make minor edits and switch between active versions, create a version of a template.
Creating a version of a template creates an exact copy of the template with a version equal to the latest
version number plus one. For example, if the name of your card layout template is trng-card-
canvas-3x-zones-slds the first version is trng-card-canvas-3x-zones-slds (Version 1), the
next is trng-card-canvas-3x-zones-slds (Version 2), and so forth.

company 1638
OmniStudio
IMPORTANT
To assign a template to a component, one version of the template must be active, and only
one version of a template can be active at a time. For example, in the Cards Designer, to
assign a card layout template named trng-card-canvas-3x-zones-slds to a card
layout, activate one version so that it displays in the Template dropdown.
NOTE
To learn best practices and how versioning works throughout the Vlocity Cards
Framework, see Cards Framework Versioning.
To create a version of a template:
1. Go to the Vlocity Templates tab, click to expand a template, and click a version to open.

company 1639
OmniStudio
NOTE
If the template is a Vlocity base template, it cannot be versioned. You must clone the
template instead, or clone then create a version. See Cloning a Template.
2. Click Create a Version.

company 1640
OmniStudio
Cloning a Template
NOTE
Beginning with the Summer '19 release, Vlocity supports Salesforce's Lightning Web
Components programming model with Vlocity Lightning Web Components. Vlocity
to LWC Cards. To clone an LWC Card template, see Creating Custom LWC Card
Templates.
Edit a template without overriding existing code and settings by cloning an OmniScript element or Cards
Framework component template with the Template Designer.
To create a new template or import a template, see Creating a Template with the Template Designer,
To clone an existing template:
1. Go to the Vlocity Templates tab, click to expand a template you want to clone.
2. Choose one of the following to clone a template version:

• Click down arrow: In the last column next to the Active column, click the down arrow of the version of
the template you want to clone, and then click Clone.
• Open template version: Click to open the template version you want to clone, then click Clone.

company 1641
OmniStudio
3. Enter a Template Name, Template Type, and Template Author, then click Clone.
NOTE
A template is unique as a result of the combination of its Name, Author, and Version
attributes. See Cards Framework Versioning.
4. After editing your cloned template, click Save.

company 1642
OmniStudio
Adding Cards to a Lightning or Community Page

Launch Vlocity Cards from Lightning and Community pages by adding Card Layouts with the Lightning App
Builder and the Community Builder.
Adding a Vlocity Card to a Lightning or Community Page

Configure a Vlocity Cards Lightning component to render a Card Layout on a custom Lightning page or a
Community page.
NOTE
To configure a Vlocity LWC component to render an LWC enabled Card Layout, see
Adding an LWC Card to a Lightning or Community Page.
To configure a Vlocity Cards Lightning component on a custom Lightning page:
1. In your org, go to Setup > Lightning App Builder. Click the New button to create a new app. Or, choose
an existing app to open by clicking Edit next to its name. For information on the Lightning App Builder,
see Lightning App Builder.
2. From the Lightning components pane, drag the Vlocity Cards component from the list of Custom -
Managed components into the canvas area.

company 1643
OmniStudio
3. In the properties pane, select a Card Layout in the Layout Name dropdown list.

company 1644
OmniStudio

company 1645
OmniStudio

• Disable Cache: Select this checkbox to prevent the Layout, Cards and Templates from being read
from the offline cache.
• Max Height(px): To restrict the height and make the component scrollable, add a height in pixels,
such as 600.
• Custom Visualforce Page: To override the default Visualforce page used to render Cards, select a
custom Visualforce page from the dropdown list.
• Background: To override the default #FFFFFF background color, enter a hex color code such as
#000000.
• Theme: To set the CSS style sheet, select slds or newport from the dropdown list.
• Set Component Visibility: To control when a component appears on a Lightning page, see
Dynamic Lightning Pages.
To configure a Vlocity Cards Lightning component on a Community page:
1. In your org, go to Setup > All Communities. Click the New Community button to create a new
community. Or, choose an existing community to open by clicking Builder next to its name. For
information on the Community Builder, see Community Builder Overview.
2. Click the blue and white lightning icon to open the Components pane. From the list of Custom
Components, select Vlocity Cards and drag it to the canvas area.
3. In the properties pane that pops up, select a Card Layout from the Layout Name dropdown list.

company 1646
OmniStudio

company 1647
OmniStudio
IMPORTANT
Record ID: The record Id for the object on the community page is automatically
passed into the Record Id field as the {!recordId} parameter.
• Custom Community Page URL: If the Card component uses OmniScripts, add the relative URL of
the community page created to display OmniScripts, such as "/omnipage".
• Disable Cache: Select this checkbox to prevent the Layout, Cards and Templates from being read
from the offline cache.
• Max Height(px): To restrict the height and make the component scrollable, add a height in pixels,
such as 600.
• Custom Visualforce Page: To override the default Visualforce page used to render Cards, select a
custom Visualforce page from the dropdown list.
• Background: To override the default #FFFFFF background color, enter a hex color code such as
#000000.
• Theme: To set the CSS style sheet, select slds or newport from the dropdown list.
Adding Profile Attributes to a Lightning or Community Page

The Vlocity Lightning Profiler component adds profile attributes related to a record to a custom Lightning
page or a Community page. To learn more about creating profile attributes, see Profile Attributes.
To add a Vlocity Lightning Profiler component to a custom Lightning page:
1. In your org, go to Setup > Lighting App Builder. Click the New button to create a new app. Or, choose
2. In the properties pane, drag the Vlocity Lightning Profiler component from the list of Custom -
Managed components into the canvas area.

company 1648
OmniStudio
3. In the Profile Title field, enter a visible title for the component.
4. If the Vlocity Profiler component is not used on a record page, enter a specific sObject ID in the
Context ID field.
5. (Optional) Enter the values for these properties:
• Take Context ID from field on current record: To enable the Profiler to get attributes based on the
relationship field, if present, enter the relationship field name. For example AccountId.
• Use Category Color Codes: To enable category color codes, select this checkbox. To learn how to
set category colors, see Create New Profile Attribute Categories.
6. Save and Activate the app to view the profile attributes on a record page.

company 1649
OmniStudio
To add a Vlocity Lightning Profiler component to a Community page:
1. In your org, go to Setup > All Communities. Click the New Community button to create a new
community. Or, choose an existing community to open by clicking Builder next to its name. For more
information on the Community Builder, see Community Builder Overview.
Components, select Vlocity Lightning Profiler component and drag it to the canvas area.
3. In the properties pane that pops up, enter a visible title for the component in the Profile Title field.

company 1650
OmniStudio
4. (Optional) If the Vlocity Profiler component is not used on a record page, enter a specific sObject ID in
the Context ID field.
5. (Optional) Enter the values for these properties:
• Take Context ID from field on current record: Based on a relationship field on the page, enter the
relationship field name. For example, AccountId.
• Use Category Color Codes: To enable category color codes, select this checkbox. To learn how to
set attribute category colors, see Create New Profile Attributes.
6. View the profile attributes in the canvas area or click the Preview button to view page in preview mode.
Reloading a Card Layout After Updating Profile Attributes

To reload a Card Layout after updating profile attributes, configure a Vlocity Cards Component Events
component. Enable a Vlocity Cards Component Events component on a Lightning Page through the
Lightning App Builder and on a Community Page through the Community Builder. To learn more about
creating profile attributes, see Profile Attributes.

company 1651
OmniStudio
IMPORTANT
A Vlocity Cards component and a Vlocity Lightning Profiler component must be on the
same Lightning Page or Community Page as the Vlocity Cards Component Events
component.
IMPORTANT
Vlocity Cards Component Events component does not work with LWC enabled Vlocity
Card Layouts.
To configure a Vlocity Cards Component Events component on a custom Lightning page:
1. In your org, go to Setup > Lighting App Builder. Click the New button to create a new app. Or, choose
2. From the Lightning components pane, drag the Vlocity Cards Component Events component from
the list of Custom - Managed components onto the canvas area.

company 1652
OmniStudio
3. In the Layout Name input field in the properties pane, add the name of the Card Layout that is on the
same Lightning page.
4. The Vlocity Cards Component Events component does not display content. To check that your
component is configured properly, visit your Lightning page. Make a change to the available profile
attributes to see the Card Layout reload.
To add a Vlocity Cards Lightning component to a Community page:
1. In your org, go to Setup > All Communities, and click the New Community button to create a new
community. Or, choose an existing community to open by clicking Builder next to its name. For more
information on using the Community Builder, see Community Builder Overview.
Components, select Vlocity Cards and drag it to the canvas area.

company 1653
OmniStudio
3. In the properties pane, enter the name of a Card Layout in the Layout Name input field.
4. The Vlocity Cards Component Events component does not display content. To validate if your
component is configured properly, visit your Community page. Make a change to the available profile
attributes to see the Card Layout reload.
Reloading a Card After Updating an LWC OmniScript

Update information on a card after making a change to an LWC OmniScript by passing an event to the
OmniScript in the URL parameter c__vlocEvents of an OS Action.
To refresh a card after an LWC OmniScript updates:
1. Go to the Vlocity Cards tab, and open a card.

2. From the Actions section of a card state, click Add OS Action and select the Action Options
checkbox. To configure your OS Action, see Launching an LWC OmniScript from an OS Action on a
Card.
3. Click Add Parameters:
• Enter c__vlocEvents in the first input field.
• Add componentName-reload in the second input field. Replace componentName with the name
of the card layout which must be in camelcase. For example, if your card layout name is accounts-
campaigns-current, enter AccountsCampaignsCurrent-reload.
4. The Navigate Action element in your OmniScript must have the checkbox property LWC PubSub
Message? enabled to fire the event. For more information on the Navigate Action, see See Navigate
Action.

company 1654
OmniStudio
Cards Context Variables

Several variables are available across the framework to provide contexts to cards, data sources, flyouts,
templates, and other components.
NOTE
All variables are case sensitive.

company 1655
OmniStudio
Name Variable Access Example

Page Parameters {{params}} Global /apex/consolecards?id=123
Represents the page represents {{params.Id}} ,equaling 123.

parameters passed to
the URL.
Object {{obj}} Card If the object for the card has an Account such that Name =
'Test', obj.Name = 'Test'.
The object represented
in the card, which holds
all the fields and
information for the
record.
Parent (for flyouts only) {{parent}} Global SELECT Id, Name FROM Contact WHERE
(Flyout) AccountId = {parent.obj.Id}
The parent object of
the flyout. where {parent.obj.Id} equals the ID of the object in
the card that contains the flyout.
Parent Layout {{parentLayout}} Card
Gives access to the

parent layout scope.
Attributes {{attrs}} Global <vloc-card name="community-account"
customtemplate="community-sidebar-ads"> </
Allows access to the vloc-card>
attributes passed to the
vloc-card, vloc-layout, Access the name and custom template by calling
and vloc-cmp directives {{attrs.name}} and {{attrs.customtemplate}}.
Session Variables {{session}} Layout or You can set a session variable to be named: Title and set it
Card to obj.Name in the designer.
Variables that are set in
the designer for
runtime use, they can
access any property in
the scope plus the
{{payload}}
variable.
Payload {{payload}} Layout or The variable holds the entire result of the data source so
Card you can access other properties like payload.totalSize
A temporary variable while using a result variable of result.records in the
used by the session Datasource.
variables to access the
entire result of a data
source.

company 1656
OmniStudio

Imported Scope {{importedScope}} Global to Excerpt from the community templates:
the inserted
The framework allows component. Component with imported ctrl; see ctrl attribute
for external modules inserted the infoCtrl:
and controllers to be If imported
imported into the cards, into a
layouts, and layout, the <vloc-cmp name="frame"
components. Importing cards also customtemplate="community-content-frame"
the scope can then have loaded="true"
extend the functionality access. ctrl="infoCtrl" ng-show="!
of the framework, for $root.showContent">
example, the {ctrl} </vloc-cmp>
attribute.
Template using imported logic:
<div class="info">
<h2 ng-click="$root.showContent = !
$root.showContent; importedScope.url =
'';">
<span class="icon icon-v-left-caret">
</span>Back
</h2>
<iframe ng-src="{{importedScope.url}}"
onload="iframeLoaded()"ng-
show="importedScope.loaded">
</iframe>
</div>
Controller imported:
.controller('infoCtrl',
function($scope, $rootScope,
remoteActions, force, $sce)
{ $scope.loaded = false;
$rootScope.$on('actionSelected',function(ev
ent, action) {
console.log(action.url);
$scope.loaded = false;
$rootScope.showContent = false;
$scope.url =
$sce.trustAsResourceUrl(action.url);
});
window.iframeLoaded = function() {
if ($scope.url) {
console.log('Community frame loaded');
$scope.loaded = true;
$scope.$apply();
}
};
});

company 1657
OmniStudio

User Information {{$root.vlocity}} Layout or Example of a query on a card data source using a
Variable Card contextId: Select AccountId, Account.Name,
Name, Birthdate,Phone FROM Contact where
Information about the AccountId =
user is fetched on the '{{$root.vlocity.userAccountId}}'
start of the framework.
The information is User information available:
stored under the
$rootScope.vlocity • User Id: $root.vlocity.userId
variable and is • User Name : $root.vlocity.userName
available inside • User Type: $root.vlocity.userType
templates in
• User Role: $root.vlocity.user
$root.vlocity.
• User Profile Id : $root.vlocity.userProfileId
• User Profile Name :
$root.vlocity.userProfileName
• User Account Id : $root.vlocity.userAccountId
• User Contact Id : $root.vlocity.userContactId
• Locale in browser lowercase format :
$root.vlocity.userAnLocale
• Locale in Salesforce format:
$root.vlocity.userSfLocale
• Currency code: $root.vlocity.userCurrency
• Language: $root.vlocity.userLanguage
• Time Zone: $root.vlocity.userTimeZone
Exporting Vlocity Layouts and Cards

When migrating to a new org, you must export any applicable Vlocity Cards framework components,
particularly those that you modified. The Vlocity Cards Framework supports versioning for all components
(layouts, cards and templates). Only active versions are exported.
See Cards Framework Versioning.
To export Vlocity Layouts and Cards:
1. Go to the Vlocity Card Designer.

2. Expand the first layout to export.
3. Select the latest version of the layout.

company 1658
OmniStudio
4. Repeat steps 2 and 3 for each layout to export.

5. Click Export.
The Export DataPack dialog box opens.

7. Click Next.
9. Click Next.
• Name, a unique, memorable name for the DataPack.
• Select Published.
• Deselect Download.

company 1659
OmniStudio
11. Click Done.
Cards Framework Web Deployment Options

You can deploy OmniStudio components, including OmniScripts and Cards Framework components, to the
web outside of Salesforce. This type of deployment is also called off-platform. You can use these
components in an external server with or without an active connection to a Salesforce organization. You
can deploy components to a Heroku web server or to Adobe Enterprise Manager.
Keep in mind, certain features require the connection in order to function. Be mindful of API usage, as
every call will cost an API hit to the Salesforce org. Use DataPack side-loading and batch calls to reduce
hits.
Deploying the Cards Framework to a Heroku Web Server

This topic assumes you have a Heroku server deployed and know how to upload resources to it using
development tools such as FTP and Git. You also understand AngularJS and HTML5.
1. Upload the following resources from your org to your deployment server. See Cards Framework
Required Resources.
• vlocity_core_assets.js
• $Resource.angular_strap_bundle_1_6
• $Resource.SldsAngular.js

company 1660
OmniStudio
• $Resource.cardframework_core_assets , '/latest/cardframework_assets.js'
• $Resource.cardframework_core_assets , '/latest/cardframework.js'
2. Add the downloaded resources either to your index.html file or in the page that will use Vlocity
Cards:
<script type="text/javascript" src="js/cards/vlocity_core_assets.js"></

script>
<script type="text/javascript" src="js/cards/CardFramework_Assets.js"></
script>
<script type="text/javascript" src="js/cards/SldsAngular.js"></script>
<script type="text/javascript" src="js/cards/CardFramework.js"></script>
3. Inject the vlocity and CardFramework modules into your Angular app. This example shows an
optional ForceNG for connection to Salesforce.
var app = angular.module('miniApp', ["forceng", 'vlocity',

'CardFramework']);
4. Optionally, you can set up a connected app.
a. Make sure the Callback URL is set with your application. See Create a Connected App in the
Salesforce Help.
b. Setup an OAuth Connection to Salesforce from JavaScript using forceNG.
app.run(function(force) {
force.init({
proxyURL: 'https://omniproxy.herokuapp.com'
});
force.login().then(
function (oAuth) {
/* all logged in /*
$rootScope.showCards = true;
});
});
5. Load the layouts, cards and templates, depending on your connection to Salesforce.
• With a Salesforce connection, reference the layouts inside your application, like you would inside the
org:
<vloc-layout layout-name="myLayout"><vloc-layout>
Once the connection is made, the framework will fetch the required metadata.
• Without a Salesforce connection, you need to preload multiple components and cache them so you
can reference all layouts, cards, and templates included in the sideloaded DataPack:
$http.get('datapacks/myDatapack.json').then(function(data) {
/* call the service to sideload DataPack components */
configService.loadCardframeworkDefinitions(data).then(function(result) {
$rootScope.showCards = true;
}, function(err) {

company 1661
OmniStudio
console.log('err ',err);
});
});
• Without a Salesforce connection, use REST or Sample data sources. Only Custom Actions are
supported and components must be sideloaded from a DataPack using the
configService.loadCardFrameworkDefinitions.
Adding a Vlocity Card Component to an AEM Page

To add a Vlocity Card Component (VCC) to a page in Adobe Experience Manager (AEM) page:
1. Create a page in Adobe Experience Manager. The page does not contain any components yet.
2. Open the Sidebar. Click the Toggle Sidebar button in the upper-left hand corner.
3. Click the Add Component button and type the keyword card in the Search box.
4. Drag the Vlocity Card component onto the page.

company 1662
OmniStudio
NOTE
5. Double click the component to display the Card Component that you added.
Hosting Vlocity Templates On An External Server
1. Set up the Vlocity Build tools.

2. Create your Vlocity Templates in a Salesforce org.
3. Extract the Vlocity Templates from Salesforce by setting up a job to point at the required resources.
Look at the examples posted in the Vlocity Build Tools step-by-step guide.
Use prefixes, as shown in the following query to get the templates from the org and make sure they are
active:
queries:
- VlocityDataPackType: VlocityUITemplate

company 1663
OmniStudio
Select Id, Name from %vlocity_namespace%__VlocityUITemplate__c where

Name LIKE 'card-out-%' AND %vlocity_namespace%__Active__c = true
4. At a command prompt, run:
vlocity packExport -propertyfile build.properties -job dataPacksJobs/job-

name.yaml
The templates you queried appear in the expansionPath folder in the DataPack.
5. If you need to make changes to the templates:
a. Edit the templates using your favorite IDE and store them in source control.
b. Run the packBuildFile job to compress the resources to a DataPack that will be stored in the
buildFile directory.
6. Upload the DataPack to your desired location.
7. Use the configService.loadCardframeworkDefinitions function to load your DataPack into
the Cards Framework.
Vlocity Cards Framework Reference

Base UI and Card Templates
The following tables list the base templates that are available for use with Vlocity Cards. When editing a
template, it is best practice to clone the existing template first and to edit the cloned version. For more
information on cloning templates, see Cloning a Template.
NOTE
Beginning with the Vlocity Summer '19 release, Vlocity supports Salesforce's Lightning
Web Components programming model with Vlocity Lightning Web Components. Vlocity
to LWC Cards. For base templates compatible with LWC Cards, see Base LWC Card and
Layout Templates.
NOTE
You cannot modify base Vlocity Cards authored by Vlocity. If you need to make changes to
the card, such as to the configuration settings, card states or data sources, clone the card.
See Cloning a Card Layout.
Card and Card Layout Templates

Apply Card and Layout templates in Vlocity Cards to control the information and actions that are available
to a user. Once active, the resulting Layout template becomes available in Vlocity Cards Component's

company 1664
OmniStudio
Layout dropdown. The Vlocity Cards component is available in the Community Builder and the Lightning
App Builder.
Card Layouts
Layout templates act as containers for Card templates and control how the cards display. For more
information on Layouts, see Vlocity Layouts.
To apply a Layout Template:
1. In the Layout section of a Vlocity Card, ensure the Type is set to Layout.
2. Enter a Layout Template into the Template field.

company 1665
OmniStudio
Card Layout Description Card Layout Compatible Card Templates

Template Template
Preview
card-canvas-1x- One-column container Image unavailable action-grid-card
simple-slds
action-grid-card-slds
card-active-placeholders-slds
card-active-slds
card-active-slds-VlocityTrack
card-highlight-totals
card-horiz-actions-slds
card-horiz-noActions-slds
large-card-slds

company 1666
OmniStudio

Template Template
Preview
card-canvas-1x-slds One-column container with search feature action-grid-card
card-active-slds
large-card-slds
card-canvas-3x-slds Three-column container with search feature action-grid-card
card-active-slds
card-horiz-open-slds
card-open-slds
card-simple-slds
offer-card-active-slds
card-canvas-3x- Three column card container with search action-grid-card
zones-slds feature and zones
card-active-slds
card-horiz-open-slds
card-open-slds
card-simple-slds
offer-card-active-slds

company 1667
OmniStudio

Template Template
Preview
column Simple column of cards Image unavailable action-grid-card
card-active-slds
large-card-slds
infinite-list List template with infinite scrolling for records See list-card- list-card-slds
using pagination canvas
list-card-canvas One-column container with each card's fields list-card
and actions displayed in a row
list-card-canvas-slds One-column container with each card's fields list-card-slds

and actions displayed in a row in SLDS
list-table One-column container in a table. Each card's list-table-card
fields and actions are displayed in a row.
Actions show in a vertical list.
Cards
To apply a Card Template:
1. In the Cards section of Vlocity Cards, ensure your Card is not active.
2. In the States section of Vlocity Cards, enter a Card template name into the Template field.

company 1668
OmniStudio
Card Template Description Template Compatible Card Layout Templates

Preview
action-grid-card Displays actions (icon and label) in a card-canvas-1x-slds
responsive grid format
card-canvas-1x-simple-slds
card-canvas-3x-slds
card-canvas-3x-zones-slds
column
action-grid-card-slds Displays actions (icon and label) in a card-canvas-1x-slds
responsive grid format using SLDS.
card-canvas-3x-slds
column
card-active- Displays a list of fields and an adjacent list of card-canvas-1x-slds
placeholders-slds actions along with placeholder.
card-canvas-3x-slds
column
card-active-slds Displays a list of fields and an adjacent list of card-canvas-1x-slds
actions.
card-canvas-3x-slds
column
card-active-slds- Displays a list of fields and an adjacent list of card-canvas-1x-slds
VlocityTrack actions, using SLDS with tracking. For more
information on tracking, see Vlocity Tracking card-canvas-1x-simple-slds
Service.
card-canvas-3x-slds
column
card-highlight-totals Displays entire card in single column with card-canvas-1x-slds
pagination, with four fields per page.
column
card-horiz-actions- Displays entire card in single column with card-canvas-1x-slds
slds horizontal fields. Actions display horizontally
under fields. card-canvas-1x-simple-slds
column
card-horiz-noActions- Displays entire card in single column with card-canvas-1x-slds
slds horizontal fields. Actions available only in
dropdown. card-canvas-1x-simple-slds
column

company 1669
OmniStudio
Card Template Description Template Compatible Card Layout Templates

Preview
card-horiz-open-slds Displays entire card in single column with card-canvas-3x-slds
button and label.
card-open-slds Displays one button and label in SLDS. card-canvas-3x-slds
card-simple-slds Displays list of field labels adjacent list of card-canvas-3x-slds

fields.
large-card-slds Displays entire card in a single column with a card-canvas-1x-slds
list of fields and an adjacent list of actions. In
SLDS, includes placeholders, tracking and card-canvas-1x-simple-slds
icon pattern.
column
list-card Displays fields in one row with all action icons list-card-canvas
listed on same row.
list-card-slds Displays fields in one row with all actions only list-card-canvas-slds
available in dropdown.
list-table-card Displays fields in one row with all action icons list-table
and text listed in a vertical list.
offer-card-active-slds Displays image-only button. card-canvas-3x-slds
Flyout Templates
Flyout Templates enable users to view information or access additional actions for the current record or a
child record. Similar to Cards, Flyouts are created in Vlocity Cards and use a Flyout Layout template to
contain Flyout Card Templates. Once active, the resulting Flyout becomes available in the Flyout Template
dropdown.

company 1670
OmniStudio
For more information on Flyout Templates, see Creating a Flyout.
Flyout Layout Templates

Flyout Layout templates act as containers for Flyout Card Templates and control how the Flyout Card
displays.
To apply a Flyout Layout Template:
1. In the Layout section of a Vlocity Card, ensure the Type is set to Flyout.
2. Enter a Flyout Template into the Template field.

company 1671
OmniStudio
Flyout Layout Description Template Compatible Flyout Card

Template Preview Templates
flyout-grid Simple one-column container for flyout components. flyout-grid-items
flyout-grid-slds Three-column container for flyout components in flyout-grid-items-slds

SLDS.
Overflow actions from parent card and flyout cards.

flyout-grid-actions Two-column container for overflow actions from flyout-grid-items
parent card.
flyout-grid-actions-slds One-column container for overflow actions from flyout-grid-items-slds

parent card.
flyout-grid-noActions- Three-column container for flyout components in flyout-grid-items-slds

slds SLDS.
No overflow actions from parent card.
Flyout Card Templates

To apply a Flyout Card Template:
1. In the Cards section of Vlocity Cards, ensure your Card is not active.
2. In the States section of Vlocity Cards, enter a Flyout Card template name into the Template field.

company 1672
OmniStudio
Flyout Card Template Description Preview Compatible Flyout Layout Templates

flyout-grid-items Flyout container for card See Compatible Flyout flyout-grid
items. Layout Templates
flyout-grid-actions
flyout-grid-items-slds Flyout container for card See Compatible Flyout flyout-grid-slds
items in SLDS. Layout Templates
flyout-grid-actions-slds
flyout-grid-noActions-slds
Console Card and Layout Templates

Console Card templates enable multiple records to be accessible and actionable all from the same view. In
addition to Console Card and Layout Templates, there are out of the box Layouts that contain out of the box
Cards. Console Cards also rely on embedded templates to display additional information all within one
parent layout.

company 1673
OmniStudio
For more information on the Console, see Service Console Basics.
Out of the Box Console Layouts

The Console Layouts are accessible in the Vlocity Cards landing page.

company 1674
OmniStudio
Layout Description Layout Layout Cards Card Embedded

Preview Template Templates Templates
console- Sidebar layout that console- profile- left-profile- story-card-
sidebar- displays left sidebar cards sidebar-slds account-slds slds canvas
slds and the embedded story-
card-canvas template. profile- left-account-
account-info- info-slds
slds
console- Layout for right sidebar console- acuity- acuity- left-profile-
right- cards. right- sidebar-offer- sidebar-offer- tag
sidebar- sidebar-slds card card
slds Displays offer cards
based on Vlocity profileTags
Intelligence inputs and
profile cards.
Cards for the left-profile-

tag template are
embedded in this
template.
story-slds Embedded in the console- story-card- Various Story story-card n/a
sidebar-slds template the canvas Cards
story-slds layout presents
story cards to the user
and includes sorting by
story type.
Out of the Box Console Cards

The Console Cards are accessible through the out of the box Console Layouts.
Card Description Card Card Template Layout Layout

Preview Template
acuity-sidebar- Card that displays offer links in acuity-sidebar- console-right- console-right-
offer-card the console sidebar. offer-card sidebar-slds sidebar-slds
profile-account- Displays twitter photo, left-profile-slds console- console-
slds information, and actions in sidebar-slds sidebar-slds
SLDS.
profile-account- Displays information for left-account- console- console-

info-slds console sidebar in SLDS. info-slds sidebar-slds sidebar-slds

company 1675
OmniStudio
Card Description Card Card Template Layout Layout

Preview Template
profileTags Displays the Profile component left-profile-tag console-right- console-right-
in the right sidebar. sidebar-slds sidebar-slds
Profile tags are embedded in

the console-right-sidebar-slds
template.
Cards Framework Required Resources

For Angular components, when implementing the CardFramework in your custom page, you must include
these resources, in the order given.
Resource Location Description

vlocity_core_assets.js $Resource.vlocity_core_assets, '/ A compilation of libraries and frameworks
latest/vlocity_core_assets.js' used by Vlocity, including:
• AngularJS 1.6.8
• jQuery 3.2.1
• Lodash 4.17.4
• Moment 2.17
• Angular-animate
• Angular-sanitize
• Angular-messages
• Angular-aria
• Angular-hotkeys
• CurrencyFormatter.js 1.x
• Vlocity internal providers and services:
• Vlocity.js
• RemoteActions.js
• promiseQueue.js
• localizable.js
• InteractionTracking.js
• currencyInfo
AngularStrap $Resource.angular_strap_bundle_1_6 Incorporates bootstrap directives in the
framework to be used whenever necessary.
SldsAngular $Resource.SldsAngular Angular directives that use the Salesforce
Lightning Design System
CardFramework_Assets $Resource.cardframework_core_assets , Compilation of specific libraries needed for
'/latest/cardframework_assets.js' Cards Framework functionality, including:
• ForceTK
• ForceNG
• tmhDynamicLocale
• Moment with Locales
• Moment-timezone
• Ng-Table
• SVG4Everybody
• IFrameResizer
• CometD
CardFramework.js $Resource.cardframework_core_assets , The main framework file including all the
'/latest/cardframework.js' directives, services, factories, and providers
that house the functionality

company 1676
OmniStudio
Creating a Custom Cards Apex Page

To create a custom Cards Apex page, create a Visualforce Apex page, add your Angular app to the page,
add some common scripts, and add your layout name.
1. Create a Visualforce page and set the apex:page header as follows:

sidebar="false" standardStylesheets="false"
controller="nsPrefix.CardCanvasController">
2. Add the following html tag:
<html xmlns:ng="http://angularjs.org" xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink" ng-app="hybridCPQ" class="ng-
cloak" dir="{!IF(isLanguageRTL, 'rtl', 'ltr')}">
where the ng-app tag relates to your Angular application. If you are including CPQ, you can reference
the "hybridCPQ" app directly, otherwise include your own app.
3. Add these resources to your page:
<script src="{!
URLFOR($Resource.nsPrefix__VlocityDynamicForm__vlocity_core_assets, '/
latest/vlocity_core_assets.js')}"></script>
<script src="{!
URLFOR($Resource.nsPrefix__VlocityDynamicForm__angular_strap_bundle_1_6)}">
</script>
<script src="{!$Resource.nsPrefix__VlocityDynamicForm__SldsAngular}"></
script>
<script src="{!
URLFOR($Resource.nsPrefix__VlocityDynamicForm__cardframework_core_assets,
'/latest/cardframework_assets.js')}"></script>
<script src="{!$Resource.nsPrefix__VlocityDynamicForm}"></script>
<script src="{!
URLFOR($Resource.nsPrefix__VlocityDynamicForm__cardframework_core_assets,
'/latest/cardframework.js')}"></script>
Optionally, for CPQ apps, add HybridCPQ:
<script src="{!$Resource.nsPrefix__HybridCPQ}"></script>
4. Include your layout name in the body of your page:
<vloc-layout layout-name="myLayout" ></vloc-layout>
Complete code:

company 1677
OmniStudio

sidebar="false" standardStylesheets="false"
controller="vlocity_cmt.CardCanvasController">
<html xmlns:ng="http://angularjs.org" xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"
ng-app="hybridCPQ" class="ng-cloak" dir="{!IF(isLanguageRTL, 'rtl', 'ltr')}">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<apex:stylesheet value="{!IF(isLanguageRTL,
URLFOR($Resource.vlocity_cmt__slds, '/assets/styles/salesforce-lightning-
design-system-vf.rtl.min.css'), URLFOR($Resource.vlocity_cmt__slds, '/assets/
styles/salesforce-lightning-design-system-vf.min.css'))}" />




<apex:includeScript value="/support/console/41.0/integration.js" />
<script src="{!URLFOR($Resource.vlocity_cmt__vlocity_core_assets, '/latest/
vlocity_core_assets.js')}"></script>
<script src="{!URLFOR($Resource.vlocity_cmt__angular_strap_bundle_1_6)}"></
script>
</head>
<body>
<div class="">
<!-use your layout name->
<button type="button" class="btn btn-default">Left</button>
<vloc-layout layout-name="AccountConsoleCards"
ctrl="CPQController"></vloc-layout>
</div>
<script src="{!$Resource.vlocity_cmt__SldsAngular}"></script>
<script src="{!URLFOR($Resource.vlocity_cmt__cardframework_core_assets, '/
latest/cardframework_assets.js')}"></script>
<script src="{!$Resource.vlocity_cmt__VlocityDynamicForm}"></script>
<script src="{!URLFOR($Resource.vlocity_cmt__cardframework_core_assets, '/
latest/cardframework.js')}"></script>
<script src="{!$Resource.vlocity_cmt__HybridCPQ}"></script>
var sessionId = '

company 1678
OmniStudio
{!$Api.Session_ID}';
var vlocCPQ = {
'accessToken': '{!$Api.Session_ID}
',
'staticResourceURL': {
'slds': '
{!URLFOR($Resource.vlocity_cmt__slds)}
',
}
};
</script>
</body>
</html>
</apex:page>
Backward Compatibility Support for Passing Page Params

If you pass a page parameter to a Lightning page you must use a namespace prefix, such as
params.ns_contactId, where ns represents your namespace prefix. For backward compatibility on
older Angular cards, both the page parameter with and without the namespace prefix are read, such as
params.contactId and params.ns__contactId.
Required Versions
Beginning with Vlocity Insurance and Health Summer '20.
Example URL with Parameters with Namespace Prefixes
https://org-name.lightning.force.com/lightning/r/Account/1234567890aBcdefhgp/
view?
ns__contactId=0987654321kqaBPAAY&ns__primaryContactId=0987654321kqaBPAAY
Vlocity Cards Framework Caching

Cards, card layouts, templates, custom labels, and profile data load from the VlocityMetadata partition of
the Platform Cache when the card is active and viewed from a record page or a community page. You can
clear, enable, or disable the user session cache and specific types of data from the Vlocity Platform cache.
To confirm your org has enough space allocated to the VlocityMetadata partition or to allocate more space,
see Allocating Space in the Platform Cache Partitions.
Clearing Caches
Remove stored data by clearing specific types of data from the Vlocity platform and user session caches to
get the latest available data from the database. See Clear Vlocity Platform and User Session Caches.

company 1679
OmniStudio
Enabling and Disabling Caches

Vlocity supports enabling and disabling specific caches.
Cache Type Description

User Session Cache Disable user information caching in the session cache. See Disable User Information Caching.
Future Method Calls on the Enable async calls on the Vlocity platform cache. See Enable Future Method Calls on the Vlocity
Vlocity Platform Cache Platform Cache.
Vlocity Platform Cache Disable caching across the Vlocity Cards Framework to get the latest available data directly from
the database. See Disable Vlocity Platform Cache.
Clear Vlocity Platform and User Session Caches

Remove temporarily stored data by clearing the Vlocity platform and user session caches to get the latest
available data. Cards, card layouts, templates, custom labels, and profile data load from the
VlocityMetadata partition of the Platform Cache when the card is active and viewed from a record page or
a community page.
Required Versions
Available beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20,
1. Open the Vlocity Cards tab, and click Cache Settings.
2. To clear org caches, click one or more of the Platform Org Cache checkboxes:
• Layouts: To clear cached card layouts, check this box.
• Cards: To clear cached cards, check this box.
• Templates: To clear cached card templates from the Vlocity Cards Framework, check this box.
• Custom Labels: To clear cached Custom Labels across the Vlocity Cards Framework, check this
box. To learn more about Custom Labels, see Custom Labels.

company 1680
OmniStudio
NOTE
Beginning with Vlocity Insurance and Health Vlocity Spring '20, Vlocity supports
disabling the Vlocity platform cache. See Disable Vlocity Platform Cache.
NOTE
Beginning with Vlocity Insurance and Health Vlocity Spring '20, enabling async calls
on the Vlocity platform cache. See Enable Future Method Calls on the Vlocity Platform
Cache.
3. To clear cached data specific to the logged-in user across the Vlocity Cards Framework, select the
User Profile checkbox in the Platform Session Cache column.
NOTE
The user info data cleared are: User Id, Name, LanguageLocaleKey,
LocaleSidKey, TimeZoneSidKey, UserType, UserRole.Name, ProfileId,
Profile.Name, AccountId, and ContactID.

company 1681
OmniStudio
NOTE
Beginning with Vlocity Insurance and Health Vlocity Winter '20 Minor Release
107.1.0.2, Vlocity supports disabling the user session cache. See Disable User
Information Caching.
4. Click Clear.
Disable Vlocity Platform Cache

Disable caching across the Vlocity Cards Framework to get the latest available data directly from the
database. Cards, card layouts, templates,custom labels, and profile data load from the VlocityMetadata
partition of the Platform Cache when the card is active and viewed from a record page or a community
page by the end-user.
Required Versions
Available beginning with Vlocity Insurance and Health Spring '20.
1. Go to Setup > Custom Settings, and click manage next to Card Framework Configuration.
2. Click Edit.
3. Check the Disable Cache checkbox.
4. Click Save.

company 1682
OmniStudio
Disable User Information Caching

Disable user information caching in the session cache. The Vlocity Cards Framework keeps stored user
profile data on the VlocityMetadata partition of the Platform Cache. The Cards.UserTrigger caches the
user after user information updates, and removes the cached user after the user is disabled or deleted.
Required Versions
Available beginning with Vlocity Insurance and Health Winter '20 Minor Release 107.1.0.2.
1. In your org, go to Setup > Custom Settings, and click manage next to TriggerSetup.
2. Click Edit next to Cards.UserTrigger.
3. Uncheck the Trigger On checkbox.
Enable Future Method Calls on the Vlocity Platform Cache

Enable future method calls on the Vlocity platform cache for caching to run in sync with the Vlocity Cards
Framework. Future method calls are async calls made by an Apex class.
See Future Methods.
Required Versions
Available beginning with Vlocity CME Spring '20.
1. In your org, go to Setup > Custom Settings, and click Manage next to Card Framework
Configuration.
2. Click Edit.
3. Check the Enable Future Method checkbox.
4. Click Save.
Enable and Disable Data Sources

Enable and disable data source types for an org, profile, or user level from the Card Framework
Configuration custom setting. For example, disable Apex REST, Apex Remote, and other complex data
sources for your entire org, or prevent system admins with limited permissions from using these data
sources.
Enable or Disable Data Sources for an Org

Manually enable or disable a data source from Custom Settings in your org. For example, disable Apex
REST, Apex Remote, and other complex data sources if your org does not need them. By default, all data
source types are enabled for an organization.
1. Go to Setup and select Custom Settings.

2. Type Card Framework Configuration in the Search Setup box and click Enter.

company 1683
OmniStudio
3. Click Manage.
The Card Framework Configuration Custom Settings page appears.
4. Click Edit.
The Edit Card Framework Configuration page appears.

company 1684
OmniStudio
5. Check or uncheck a checkbox for each data source that you want to enable or disable for your org and
click Save.
Enable or Disable Data Sources For a Profile or User

Manually enable or disable a data source for a specific profile or user from Custom Settings in your org. For
example, prevent system admins with limited permissions from using more complex data sources like an
Apex REST or Apex Remote.
1. Go to Setup and select Custom Settings.

2. Type Card Framework Configuration in the Search Setup box and click Enter.
3. Click Manage.
The Card Framework Configuration Custom Settings page appears.

company 1685
OmniStudio
4. Click Edit.
The Edit Card Framework Configuration page appears.
5. Check or uncheck a checkbox for each Data Source you want to enable or disable for your org and
click Save.
6. In the Setup Owner pane, click New.
7. On the Card Framework Configuration Edit page, select Profile or User from the Location list.

company 1686
OmniStudio
• If you select Profile, you create a lookup to a specific defined profile.

• If you select User, you create a lookup to a specific user.
8. Check or uncheck a checkbox for each Data Source you want to enable or disable for the selected
profile or user, and click Save.
Building a Vlocity Service Console App

Build a Vlocity Service Console app with the Salesforce Service Console framework. A Service Console
app is a configurable collection of Lightning Record Pages and components, including cards, OmniScripts,
DataRaptors, actions, and more. A Console App provides context for customer relationships, displays the
most common service requests, and launches guided interactions.
A Vlocity Service Console app enables you to manage interactions that streamline common tasks. For
example, if you are a call service agent, you can use the Vlocity interaction launcher to search accounts,
verify your customers, and use Vlocity actions to optimize different processes and improve the overall
customer experience.
This section explains how to use the Salesforce Lightning App Builder to create a Lightning Record Page
for a Vlocity Service Console app by dragging and dropping Vlocity cards and OmniStudio components into
the page.
Service Console Basics

Cards are part of the Service Console framework in Salesforce. This framework consists of the following
parts:
• Service Console Apps, which contain multiple tabs and a way to navigate between them. You create and
edit Service Console Apps in the App Manager in Setup. Each tab contains a Lightning Record Page.
• Lightning Record Pages, which contain multiple screen components that display data based on a specific
Salesforce object type, such as Accounts. You create and edit Lightning Record Pages in the Lightning
App Builder in Setup. Screen components in a Lightning page include:
• Prebuilt Salesforce Lightning Components
• Prebuilt Vlocity Lightning Components
• Cards, which display data and launch actions
Prebuilt Vlocity Service Console Apps use console navigation mode, which is also recommended for any
custom Service Console Apps that you build. This mode lets you display an object type, such as Accounts,
in a primary tab, and specific object records in subtabs. Vlocity provides Lightning components and Action
behaviors to support console navigation. You can customize, clone, and reuse these apps as needed.

company 1687
OmniStudio
This multiple-tab structure allows you to have all of your customer service information and links to actions at
your fingertips for each customer. You can work quickly through a list of customer records and follow
industry-specific guided flows.
TIP
Learn more about the Salesforce Console in the Salesforce Help. This Salesforce article
discusses console navigation, implementation, and limitations.
You can use the Lightning App Builder to quickly create and customize Lightning Record Pages for your
own Vlocity Service Console App. Components on these pages use the main platform applications: Cards
Framework, OmniScript, and DataRaptor.
• Cards Framework enables you to build, edit, and define the look and feel of cards.
• Data sources enable you to use DataRaptors to provide the information displayed on the card.
• Actions are embedded links on cards that launch guided workflows built as OmniScripts.
There are many additional components, but this section introduces the basic platform components.
A typical Lightning Record Page includes:
• A left sidebar that displays basic account information and the customer story, which is a record of
previous customer activity and interaction.
• A center card canvas that contains cards focused on different contexts.
• A right sidebar that displays dynamic information such as offers, and profile "tags" to describe
characteristics of the company, such as culture, concerns, and news.

company 1688
OmniStudio
Before you begin creating your own Vlocity Service Console app, see Installing and Activating Vlocity
Templates and Cards.
To create a simple Lightning Record Page for a Service Console app, see Building an Account Lightning
Record Page.
Add the Vlocity Interaction Launcher to a Console App

Add the Vlocity Interaction Launcher utility to a Lightning Console app. Call service agents use the
Interaction Launcher to search and verify the role of a caller. The console displays only the data and
transactions that the caller has permissions to see.
Before You Begin

• Create a Console app. See Building a Vlocity Service Console App. See Set Up the Vlocity Interaction Console.
1. From Setup in Lightning Experience, enter Apps in the Quick Find box, then select App Manager.
2. Click the dropdown next to the console app that to add Vlocity interaction launcher, and click Edit.
3. Under the Utility Items, click Add Utility Item.
4. To add a class-based or object-based Interaction Launcher, select Vlocity Interaction Launcher.

company 1689
OmniStudio
5. To add an OmniScript-based Interaction Launcher:

a. Select the Vlocity Ins OmniScript Interaction Launcher.
NOTE
To create an OmniScript-based Interaction Launcher, see Create an OmniScript-
Based Interaction Launcher.
b. In the Component Properties fields:

a. Select Interaction Launcher as Type.
b. Select the SubType of the OmniScript you wish to display, such as AccountSearch.
c. Click into the Language field, and select a language.

company 1690
OmniStudio
6. (Optional) To update the layout of your Interaction Launcher by configuring options, such as updating
the icon or enabling the scratchpad, see Update the Layout of an Interaction Launcher.
7. Click Save.
8. Click Done.
Activating the Custom Lightning Page

After you add a Primary Tab and Subtabs to the Page, activate the page so that you can share it with your
users.
You have three options for activation:
• Make the page the org default for the object.

• Make the page the default object record page for specific Lightning apps.
• Assign the page to a combination of Lightning apps, record types, and profiles.
NOTE
To see more information about Lightning page activation, see how to Activate Lightning
Experience Record Pages.
To assign this page to a specific app, record type, and profile:
1. Save the page again, and click the Activation button.

2. Click the App, Record Type, and Profile tab.

company 1691
OmniStudio
3. Click the Assign to Apps, Record Types, and Profiles button.

4. Assign the page to one of the Vlocity apps (such as the Vlocity Product Console), the Master record
type, and the System Administrator profile.
5. After activation, look up your page in the Lightning App Builder in Setup.

company 1692
OmniStudio
a.
b. Select your Vlocity app and search for an account. Verify that the three-column page appears as
you expected.
NOTE
If your Lightning Record Page does not appear, update or remove activation rules for a
conflicting Lightning Record Page. Clear your cache and open a new browser tab.
Adding a Primary Tab and Subtabs to the Page

After you add the Right Sidebar component to the page, add the following tabs and components to the
middle column of the three column page:
• Product Overview tab with a Vlocity card. (In this example, we used a demo vdo-asset-layout-grid
layout, but you must choose a layout that is active within your organization.)
• Related Lists tab with a standard Related Lists component
• Record Details tab with a standard Record Details component
1. On the App Builder Desktop tab, click the middle Add Component(s) Here area.
2. From the Lightning Components panel, drag a standard Tabs component into the middle column of
the page.

company 1693
OmniStudio
a. In the right panel, under Page > Tabs, select <First Tab> from the Default Tab picklist and click
the Add Tab button.
b. Click the new tab (it will have the same label as the tab above it) and select Custom from the Tab
Label picklist.
c. In the Custom Tab Label field, type Product Overview and click Done.
d. In the right panel, under Page > Tabs, drag the Product Overview tab up to the first tab position.
e. Click Save.
3. From the Lightning Components panel, expand the Custom Managed list, and drag a Vlocity Cards
component into the Product Overview tab.
a. In the right panel, under Page > Tabs, select a Layout from the Layout Name picklist. (In this
example, we used a demo vdo-asset-layout-grid layout, but you must choose a layout that is
active in your organization.)
b. Click Save.

company 1694
OmniStudio
4. Add a Related Lists tab.

a. Click the Product Overview tab.
b. In the right panel, under Page > Tabs, click Add Tab.
c. Click the new tab (it will have the same label as the tab above it) and select Custom from the Tab
Label picklist.
d. In the Custom Tab Label field, type Related Lists and click Done.
e. From the Lightning Components panel, drag a standard Related Lists component into the Related
Lists tab.
f. In the right panel, drag the Related Lists tab above the Details tab and click Save.

company 1695
OmniStudio
5. Add a Record Detail tab.

a. In the right panel, click Add Tab.
b. Click the new tab and select Custom from the Tab Label picklist.
c. In the Custom Tab Label field, type Record Details and click Done.
d. Click the Record Details tab in the middle panel.
e. From the Lightning Components panel, drag a standard Record Detail component into the Record
Details tab.
f. In the right panel, delete the Details tab.
You should see three tabs in the middle panel: Product Overview, Related Lists, and Product
Details.

company 1696
OmniStudio
6. Save the Lightning Page.
Now finally, it is time to activate the page so your users can see it, so go to the topic Activating the Custom
Lightning Page.
Adding a Right Sidebar Component to the Page

After you add a Left Sidebar component to the page, add the right sidebar and drag the Vlocity Lightning
Profiler component and Vlocity Cards Component Event component into the sidebar area. The Lightning
Profiler component provides real-time refresh when Profile tags are changed.
1. On the App Builder Desktop tab, click the right Add Component(s) Here area.
2. Scroll down to the Custom Managed Component section in the Lightning Components panel.
3. Click the Vlocity Cards component in the Lightning Components panel and drag it into the highlighted
insertion point on the right of your desktop.
4. On the right sidebar, under Page > Vlocity Cards, select console-right-sidebar-slds from the Layout
Name picklist.

company 1697
OmniStudio
5. Click the Vlocity Lightning Profiler component in the Lightning Components panel and drag it into the
right sidebar.

company 1698
OmniStudio
6. Click the Vlocity Cards Component Events in the Lightning Components panel and drag it into the
right sidebar beneath the Vlocity Lightning Profiler. This component provides real-time refresh when
Profile tags are changed.

company 1699
OmniStudio
7. On the right sidebar, under Pages > Vlocity Cards, enter console-right-sidebar-slds in the
Layout Name field.
8. Click Save.
Next, build page navigation by Adding a Primary Tab and Subtabs to the Page.
Adding a Left Sidebar Component to the Page

After you create the Lightning Record Page with the 3-column template, drag a Vlocity Cards component
onto the page and name the Card layout.
1. Open the Service Console on the App Builder Desktop tab. Click the left Add Component(s) Here
area.

company 1700
OmniStudio
2. Scroll down to the Custom Managed Component section in the Lightning Components panel.
3. Click the Vlocity Cards component in the Lightning Components panel and drag it into the highlighted
insertion point on the left of your desktop.
4. On the right sidebar, under Page > Vlocity Cards, select console-sidebar-slds from the Layout
Name picklist.

company 1701
OmniStudio
5. Click Save.
Next, complete the Lightning page by Adding a Right Sidebar Component to the Page.
Building an Account Lightning Record Page

Use the Lightning App Builder to create a new Lightning Record Page for Accounts.
Create a new Lightning Record Page by selecting a template, adding template components, adding primary
tabs and sub-tabs to the template, then finally activating the page.
Creating an Account Record Page with the 3-Column Template

Begin building your app by creating a new Lightning record page using the three-column template.
1. Click the Settings icon and select Setup.

company 1702
OmniStudio
2. In Setup, type app builder in the Quick Find box.

3. Select Lightning App Builder.
4. In the Lightning Pages panel, click New.
5. Select Record Page and click Next.

company 1703
OmniStudio
6. In the Label field, type LEX Account Console.

7. Select Account from the Object picklist and click Next.
8. Choose the Three Columns page template and click Finish.
9. The page appears in the Lightning App Builder.

company 1704
OmniStudio
10. Click Save.

company 1705
OmniStudio
Next, you will start configuring the page by Adding Left Sidebar Component to the Page.
Customizing an Existing Vlocity Lightning Page

This section explains how to customize an existing page. The page layout in this example uses a template
with a Header, a Tabs page, and a Right Sidebar. Use the Lightning App Builder to customize an existing
page, including adding tabs and components to the page and to the right sidebar.
For more information, see Create and Configure Lightning Experience Record Pages in the Salesforce
Help.
Editing an Existing Account Page in Lightning Experience

You can navigate to an existing Lightning Console app and edit an Account page. In Lightning Experience,
you launch the Lightning App Builder when you edit a page.
1. If you are viewing the console using Salesforce Classic, select Org Developer > Switch to Lightning
Experience.
2. Click Setup in the upper right corner and click the App Launcher in the upper left corner.

company 1706
OmniStudio
3. Click an existing app.
4. Select an Account page.

5. Select Settings > Edit Page.

company 1707
OmniStudio
The editable page opens in the Lightning App Builder.
Next, see Add a Tab and a Cards Component to the Tabs Page.

company 1708
OmniStudio
Adding a Tab and a Cards Component to the Tabs Page

In this step, you will add a Cards Component to the Tabs page. Before you can add a component, you will
have to create and name a new tab for the component. In this example, you first add an Engagement tab to
the Tabs page, and then you drag a Vlocity Cards component onto the newly created Engagement tab.
1. Add an Engagement tab to the Tabs page:
a. Select the Tabs page in the left column of the console.

b. In the Lightning App Builder, under Page > Tabs, select <First Tab> from the Default Tab picklist.
c. Click Add Tab.
d. Double-click the label on the new tab to display the Tab Label picklist.
e. In Tab Name picklist, select Engagement.
f. Click Save.
2. Add a Vlocity Cards component onto the Engagement tab:

company 1709
OmniStudio
a. Drag the Vlocity Cards component onto the Engagement tab.

b. Under Page > Vlocity Cards, select a layout from the Layout Name picklist.
c. Click Save.
Next, see Customize the Right Sidebar.
Customizing the Right Sidebar

First, add a Profile tab to the right sidebar and drag the Vlocity Lightning Profiler component onto this
tab. The Vlocity Lightning Profiler component provides a real-time refresh whenever Profile tags change.
Then add a Story component. First, add a tab and name it Story, then drag a Vlocity Cards component
onto the Story tab and select the story-slds Customer Story Layout. The Customer Story layout keeps
track of customer details for any service agent.
1. Add a Profile tab in the right sidebar:

a. Select the tabbed page in the right sidebar.
b. Click Add Tab.
c. Double-click the label on the new tab to display the Tab Label picklist.
d. Select Custom from the Tab Label picklist and type Profile in the Custom Tab Name field.
e. Click Done and click Save.

company 1710
OmniStudio
2. Add the Vlocity Lightning Profiler component to the Profile tab:

a. Drag the Vlocity Lightning Profiler component into the Profile Tab in the right sidebar.
b. Under Page > Vlocity Lightning Profiler, enter a Profiler Title.
c. Click Done and click Save.

company 1711
OmniStudio
3. Add a Story tab in the right sidebar:

a. Select the tabbed page in the right sidebar.
b. Click Add Tab.
c. Double-click the label on the new tab to display the Tab Label picklist.
d. Select Custom from the Tab Label picklist and type Story in the Custom Tab Name field.
e. Click Done and click Save.
4. Add a Vlocity Cards component into the Story tab in the right sidebar.
a. Select Page > Vlocity Cards.
b. Select story-slds from the Layout Name picklist.
The Customer Story component is displayed in the right sidebar.

company 1712
OmniStudio
c. Click Save.
NOTE
You can use the drop-down menu in the Layout Name picklist to select a different
template for your component.
Vlocity Customer Story

A Customer Story is a history of events for an Account or a Contact. Customer stories are driven by
metadata configuration. It displays a timeline of all interactions with the customer in a single, chronological
feed.

company 1713
OmniStudio
Add a Customer Story to a Page with the Story-SLDS Component

Add a Customer Story to an Account, Contact, Household, or Opportunity page layout with the story-
slds component. Display a timeline of all interactions with a customer in a single, chronological feed. See
Vlocity Customer Story.
Before You Begin

• Configure the objects displayed in the customer story. See Configure the Objects Displayed in a Customer Story.
• Activate the story-slds component. See Activate the Story-SLDS Component.
1. To add the story-slds component to a Lightning page, open an Account, Contact, Household, or
Opportunity record and click Edit Page from the Setup menu.
2. Drag the story-slds component from the list of Custom components in the Components pane onto the
canvas.
3. Click Save.
Add a New Object to the Story-SLDS Component

Clone and modify the story-slds card layout to add a new story object to the Customer Story timeline. The
Vlocity Customer Story displays a timeline of all interactions with a customer in a single, chronological feed.
Update the maximum number of records returned per story object with the pageSize parameter. See
Modify the Story List Page Limit.
1. From the Vlocity Cards home tab, click story-slds, select the checkbox next to story-slds (Version 3)
card layout., and click Clone.

company 1714
OmniStudio
2. In the Cards pane, click the clone icon on any card.
3. Enter a Name and update the Title.

4. Click Clone. The new card appears at the bottom of the Cards pane.
5. Update the ['objAPIName'] filter value to the API name of your new object.
6. In the States pane, for each state, update the Name.
7. In the Fields section, update fields to display in your story as needed.
Activate the Story-SLDS Component

To display a Customer Story on a Lightning or Community page, the story-slds component must be active.
The story-slds component displays a timeline of all interactions with a customer in a single, chronological
feed. See Vlocity Customer Story.
1. Go to the Vlocity Cards tab in your org, and search for story-slds, and click story-slds (Version 3) to
open the story card layout in the Vlocity Card Designer.
NOTE
Beginning with Vlocity Health and Insurance Summer '19, select Version 3 for an LWC
enabled story-slds. For an Angular story-slds component, select Version 2.
2. Confirm Enable LWC is selected in the Layout pane.
NOTE
If using an Angular story-slds, use story-slds (Version 2).
3. In the Cards pane, click Activate for each object you want to display in the story and disable Activate
for those you want to hide.
4. In the Layout pane, click Activate.
Add a Customer Story to a Page as a Visualforce Component

Add a Customer Story to an Account, Contact, Household, or Opportunity page layout using a Visualforce
component. Display a timeline of all interactions with a customer in a single, chronological feed. See Vlocity
Customer Story.

company 1715
OmniStudio
Before You Begin

1. Configure the objects displayed in the customer story. See Configure the Objects Displayed in a Customer Story.
2. Create the Visualforce component. See Create the Visualforce Component for a Customer Story.
1. Go to Setup > Object Manager in your org.

2. Click the Label of the object where you want to add the Customer Story.
3. Click Page Layouts.
4. Click a layout from the Page Layout Name column.
5. Select Visualforce Pages from the object palette.
6. Click Section.
7. Drag Section onto the page layout.

The Section Properties dialog box opens.

• Section Name: The section heading that appears on the record detail page, for example Customer
Story.
• Display Section Header On: Specifies where the section heading appears, for example, the Detail
Page and Edit Page.

company 1716
OmniStudio
• Layout: The layout for the section. Select 1-Column.

9. Click OK.
10. Drag one of the following items onto the new section in the page layout:
• AccountStories
• ContactStories
• HouseholdStories
• OpportunityStories
11. Click the Properties button—the wrench icon, located in the upper right corner of the section—to open
the Visualforce Page Properties dialog box.
• Enter a Height (in pixels) of at least 280px.

• Select Show Scrollbars.
12. Click OK.
13. Click Save.

company 1717
OmniStudio
Create the Visualforce Component for a Customer Story

Create the Visualforce component for a new Customer Story you want to add to a new page layout. For
example, create the Visualforce component for a new Customer Story for the Opportunity object.
Before You Begin

Configure the objects displayed in a Customer Story. See Configure the Objects Displayed in a Customer
Story.
Create the Visualforce Component
1. Go to Setup > Custom Code > Visualforce Pages.

2. Click New.
3. Enter a Label, such as OpportunityStoriesV2.
4. Copy and paste the following Apex code into the Visualforce markup section:
<apex:page standardController="ObjectAPIName" showHeader="false"

sidebar="false" > <apex:stylesheet value="{!
URLFOR($Resource.NS__bootstrap, '/bootstrap-3.2.0- dist/css/
sfboot.min.css')}"/> <NS:StoryCardComponent/></c:StoryCardComponent> </
apex:page>
5. Replace ObjectAPIName with the API name of the object to which you want to add attributes.
Replace NS with the namespace prefix of the installed package, located in Setup > Installed Packages.
6. Click Save.
What's Next
Add your new Visualforce component to a page layout. See Add a Customer Story to a Page as a
Visualforce Component.
Configure the Objects Displayed in a Customer Story

Configure Story Object Configuration when adding a Customer Story to a new page layout. For example,
create new object configurations for the Opportunity object. To import standard customer story configuration
settings from Static Resources in your org, see Import Customer Story Configuration Settings.
1. Navigate to Setup > Custom Settings in your org, and click Story Object Configuration.
2. Select Manage.
3. Select New.
4. Fill out the Story Object form. For example, for an Opportunity, enter the following data:
• Name: Opportunity_Event
• Detail Fields: Description
• Parent Object Name: Opportunity
• Has Owner: checked
• Story Object Lookup Field: WhatId
• Story Object Name: Event
• Story Object Sort Field: StartDateTime
• Summary Fields: Title:Subject,Title_Highlight:Type,Subtitle:Location

company 1718
OmniStudio
5. Click Save.
6. Click Back to List.
7. Repeat Steps 1-6 for Opportunity_Note and Opportunity_Task using the values below:
• Name: Opportunity_Note
• Detail Fields: Body
• Story Object Lookup Field: ParentId
• Story Object Name: Note
• Story Object Sort Field: LastModifiedDate
• Summary Fields: Title:Title
• Name: Opportunity_Task
• Detail Fields: Description
• Story Object Lookup Field: WhatId
• Story Object Name: Task
• Story Object Sort Field: ActivityDate
• Summary Fields: Title:Subject,Title_Highlight:Status,Subtitle:Priority,Type:Type
Customer Story Configuration

The following tables describe the settings you can configure for customer story objects. To import standard
customer story configuration settings from Static Resources in your org, see Import Customer Story
Configuration Settings.
Field Description Sample Values

Name A unique name for the configuration. We recommend ParentObject_StoryObject. • Opportunity_Event
• Account_Task
• Contact_Campaign
Parent Object

Parent Object The Object on which the Customer Story will be displayed. This is the object where you’ll • Account
Name add the Customer Story component to the page layout. • Contact
• Opportunity
• Household
Parent Object Default is Id. Enter a different Id field from the Parent Object if you want to query story AccountId
Field objects using something other than Id.

company 1719
OmniStudio
Story Object

Story Object Name The Object that will be displayed as an item within the Customer Story. • Case
• Task
• Event
• Campaign
• Opportunity
Story Object Filter The Story Object Filter is an optional filter. For example, you can filter isChild=false
events on the story object so that no child events appear on the story.
Story Object Lookup The foreign key within the Story Object that points to the Parent Object. • ContactId
Field • AccountId
If a Junction Object exists, this is the foreign key in Junction Object
pointing to the Parent Object.
Story Object Sort The field in the Story Object that determines where to place the item on • CloseDate
Field (required) the chronological timeline. Must be a Date or DateTime field. • LastModifiedTim
• StartDateTime
Sort Field Is Date By default, we assume the Story Object Sort field is DateTime. If the field • [Checked]-Date field used
is not DateTime, check this box to indicate it’s a Date field. for sort
• [Unchecked]-DateTime
used for sort
Story Object Only used for Order.
Reference Id
Has Owner If the Story Object has a record owner and you would like it displayed on • [Checked]
the card, check “Has Owner”. • [Unchecked]
Reference Object

Reference Object If the required story is not the object specified in Story Object Name, specify the required Campaign
Name story object in this field. Use the Reference Object Id to link this object and the object in
Story Object Name. For example, if the story object name is CampaignMember, but you
want to return Campaigns, use Campaign for the Reference Object Name and CampaignId
for the Reference Object Id.
Reference The object Id in story object pointing to reference object CampaignId
Object Id
Junction Object

Junction Object The relationship between the parent object and story object is many to many through the EventRelation
junction object. A nested query is formed using the Junction Object.
Junction Lookup The foreign key in the Junction Object pointing to the story object. EventId
Field
Junction Object The Junction Object Filter is an optional filter. For example, you can filter events on the Status!='Declined'
Filter story object so that only events where a contact did not decline appear on the story.

company 1720
OmniStudio
Card Details

Summary Fields The fields on the Story object to display on the card, Title:Subject,TitleHighlight:Type,Subtitle:Status
separated by commas.
Title:
Title_Highlight:
Subtitle:
Detail Fields The field displayed at the bottom of the card, under the title Description
and subtitles. Can accommodate long text fields.
Body
Navigation Contains a URL. If this field is not null, clicking on the story ResumeLink__c
card launches the URL.
Field
Name
Icon (mobile only)

Indicators The formula field for the Story Object to determine Status:StatusImageName__c,Priority:PriorityImageName__c
which icon is displayed on the card.
By default, Vlocity uses the same icons for the

following Story objects:
• Event
• Policy
• Non-Held Policy
• Claim
• Campaign
• Opportunity
When you use one of the following Story Objects, you

should specify a formula to indicate which icon to use -
as the Objects have different icons for different
statuses.
• Cases
• Orders
See Also
• Configure the Objects Displayed in a Customer Story
Import Customer Story Configuration Settings

Before updating a Customer Story Object Configuration for a new Customer Story, you can import the
standard Customer Story Object Configuration from Static Resources. Download as a JSON file to upload
to an object's home page.
1. From Setup, go to Static Resources.

company 1721
OmniStudio
2. Download DP_CUSTOM_StoryObjectConfiguration and save it as a .json file.

3. Go to the home page for the object in which you want to use the story configuration, such as the Card
or OmniScript home page, and import the JSON file.
What's Next
Configure your customer story configuration settings. See Configure the Objects Displayed in a Customer
Story.
Add a New Object to the Customer Story

The Customer Story includes default customer activities depending on your org's industry. You can also add
new story objects to the timeline. Use the Story List Page Limit custom setting to set the maximum number
of records returned per story object. See Modify the Story List Page Limit.
TIP
If person accounts are enabled, and you want to add a story object to a person account,
add a new story object as if Contact were the Parent Object. For Parent Object Name,
enter Account. For Parent Object Field, enter PersonContactId.

2. Click Story Object Configuration.
3. Click Manage.
4. Click New.
5. Enter values for these fields:
• Name: Enter the visible name of the new field, such as Opportunity_Event.
• Detail Fields: Enter an API name for the field that shows a summary of the record. For example,
Description.
• Has Owner: If this object has an owner, check the checkbox.
• Parent Object Name: Enter the name of the parent object from which to pull data, such as
Opportunity.
• Story Object Name: Enter the name of the parent's child object from which to pull data, such as
Event.
• Story Object Lookup Field: Enter the field name of the lookup field of the object set in Story
Object Name, such as WhatId.
• Story Object Sort Field: Enter the name of the field to sort on the object entered in Story Object
Name, such as StartDateTime.
• Summary Fields: Enter the fields to display in the Customer Story. Enter data as a comma-
separated list with no spaces, such as
Title:Subject,Title_Highlight:Type,Subtitle:Location.
For a complete list of field descriptions and sample values, seeCustomer Story Configuration.

company 1722
OmniStudio
6. Click Save.
What's Next
Add the new object to the story-slds card layout. See Add a New Object to the Story-SLDS Component.
Remove an Object from the Customer Story

You can remove any of the preconfigured objects from the Customer Story. The Vlocity Customer Story
displays a timeline of all interactions with the customer in a single, chronological feed. See Vlocity
Customer Story.
1. From Setup, click Develop , then click Custom Settings.

2. Click Story Object Configuration.
3. Click Manage.
4. Click Delete for the object that you want to remove.
5. When prompted, click Ok.
6. (Optional) Deactivate the object from the story-slds card layout. See Add a Customer Story to a Page
with the Story-SLDS Component.
a. Open story-slds (Version 3) from the Vlocity Cards tab.
NOTE
Beginning with Vlocity Health and Insurance Summer '19, select Version 3 for an
LWC enabled story-slds. For an Angular story-slds component, select Version 2.
b. If active, unselect Activate in the Layout pane to deactivate the card layout.
c. From the Cards pane, select an active story object card, and unselect Activate to deactivate the
card.
d. From the Layout pane, click Activate to actiavte the card layout.
Modify the Story List Page Limit

Set the number of records displayed on your Customer Story. When you add your Customer Story as a
story-slds component, you can update the pageSize parameter from the default 10 to a different number. If
the API returns no page limit, the Page Limit number set in Setup > Custom Settings > Story List Page
Limit is used instead.
Update Default Story-SLDS Component Page Limit
1. In the Vlocity Cards home tab, open the story-slds component.
NOTE
Beginning with Vlocity Health and Insurance Summer '19, select Version 3 for an LWC
enabled story-slds. For an Angular story-slds component, select Version 2.
2. If active, from the Layout pane, unselect Activate to deactivate.

company 1723
OmniStudio
3. In the Data Source, in the Input Map section, update the value of the pageSize parameter.
4. Click Activate.
Update Backup Custom Settings Page Limit

2. Click Manage next to Story List Page Limit.
3. Click Edit next to Page Limit.
4. In the Record Number Per Page field, enter the maximum number of records to return for each story
object.
5. Click Save.
Add or Modify a Customer Story Icon

In the Customer Story, each story object type has an associated icon that appears next to the title of the
story item. The icons are automatically retrieved based on the object type.
To modify the icon for a particular object type, you can update its associated LWC template. See Extending
a Template to Create a Custom LWC Card State Template.
If using the Angular story-slds (Version 2) card layout, see Creating a Template with the Template Designer.
The Vlocity Customer Story displays a timeline of all interactions with the customer in a single,
chronological feed. See Vlocity Customer Story.
Vlocity Actions
Vlocity Actions are automatically generated URLS that launch Vlocity OmniScripts, Vlocity Cards
components, web pages, or external applications. Actions are typically specific to a given object type, such
as Account, Contact, Policy, or Asset.
The Vlocity Action API returns the actions associated with an object. The icons, links, and display text
enable users to invoke the action from the object context. See Using Actions with Cards.
To configure Vlocity Actions, see Configure a Vlocity Action.
Configure a Vlocity Action

Configure a Vlocity Action to launch Vlocity OmniScripts, Vlocity Cards components, web pages, or external
applications. Actions are typically specific to a given object type, such as Account, Contact, Policy, or Asset.
1. Go to the Vlocity Actions tab.

2. Click New or select an action and click Edit.
3. On the New Vlocity Action page or Details page in edit mode, enter or update the values for these
fields:

company 1724
OmniStudio
NOTE
If a field is missing, confirm that the field is available in the Vlocity Action Layout
page layout for the Vlocity Action object.
Field Name Description

Vlocity Actions Name Required. Enter a name for the action no longer than 80 characters.
Description Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, Vlocity
Actions support entering a description for the action.
Applicable Type Required. Select the objects from which you want the action to launch. Default value is All.
Vlocity recommends selecting specific objects because the action attempts to invoke every
Applicable Type, which reduces performance.
To add values to the Applicable Type picklist, use the API name of the object, such as
Household__c. The value can be an sObject name or any string. If the action has a Filter, the
Applicable Type must be the sObject name, such as Policy__c, which is used in an SOQL
query.
Applicable User Profile To choose what action to display for a user profile, select an option from the list. Default value is
All. An admin can add other user profiles to the picklist. For example, if the current login user's
profile is Vlocity Health, only the actions where Applicable User Profile is set to All or
Vlocity Health displays.
Active To make the action visible, check this option.
Display Label Required. Enter a visible label for the action.
Display Sequence Required. Enter the sequence in which the action displays on a sub-tab or component. Lowest
number in the sequence displays first.
Display On Required. To filter where the action displays, select All, Web Client, or Mobile from the list.

company 1725
OmniStudio

Vlocity Icon To display an icon for this action, view the available Vlocity Icons and their associated class
names in the Vlocity Icons section of the action details page. Enter the class name of the icon
to display for this action. Vlocity Icons are not viewable when creating a new action on the New
Vlocity Action page.
Upload a custom icon as an attachment from the Related tab. The latest attached image loaded
(with a size less than 50 KB) is used as the custom image. If both the Vlocity icon and the
custom icon (attachment) are set, the custom icon is used. When the custom icon is not
uploaded, the Vlocity icon is used.
Open URL In To set how to open the Target URL, select Current Window or New Tab/Window. Default is
Current Window.
Link Type Required. To specify where the action is launched from, select one of these options:
• CommunityURL: Launches a Salesforce Community page.

• OmniScript: Launches an OmniScript.
• Other: Launches a specific URL.
• ConsoleCards: Launches a Salesforce Classic card.
• LEXConsoleCards: Launches a Lightning Experience Console card in a sub-tab.
• Document: Launches a Contracts Document.
• Layout: Launches a Card Layout page.
Is Seed Action Select this checkbox if the action is a Contracts Document action provided out-of-the-box. Do
not check this for a custom action. See Defining Vlocity Actions for Contracts. Seed actions are
seed data that the Vlocity Actions require for certain functionality to work. An error message
displays when you delete a seed action. A user cannot delete a seed action or clear the Is
Seed Action checkbox, but can set as inactive.
NOTE
An error message displays when you delete a seed action. A user cannot
delete a seed action or clear the Is Seed Action checkbox, but can set
as inactive.

company 1726
OmniStudio

Target URL Required. The URL to which the action navigates. Enter a URL, such as /apex/<pageName>,
or a URL with parameters. For example:
/apex/TestPolicyOmniPage?id={0}#/OmniScriptType/Policy/
OmniScriptSubType/Auto/OmniScriptLang/English/ContextId/{0}/
PrefillDataRaptorBundle/true.
IMPORTANT
For out-of-the-box Vlocity Actions, such as View Record, the Target
URL/{0} does not work outside of Salesforce Classic. To navigate to a
page in Salesforce Lightning Experience, update the URL to /
lightning/r/[ObjectName]/{0}/view, where ObjectName is the
API name of the sObject such as Account.
The {0} in the target URL represents the indexed position of a parameter in the list of
parameters in the URL Parameter field. See the URL Parameter field description.
To navigate to a Lightning or Lightning Community Page, prefix the relative URL with
ltngpage:. For example, ltngpage:/Home redirects to your community home page.
To open a Visualforce page from Salesforce's Lightning container, prefix the relative URL with
ltng. For example, ltng:/apex/CustomVFPage, redirects to the CustomVFPage.
Example Target URLs:
• /apex/NameSpace__OmniScriptUniversalPageConsole?
id={0}&OmniScriptType=VPL&OmniScriptSubType=GetPolicyAccountAgentDet
ails&OmniScriptLang=English&scriptMode=vertical&layout=lightning&Con
textId={0}&InteractionId={1}&Role={2}
• /apex/NameSpace__OmniScriptUniversalPageWHeader?id={0}#/
OmniScriptType/Policy/OmniScriptSubType/Auto/OmniScriptLang/English/
ContextId/{0}/PrefillDataRaptorBundle/true
• /apex/NameSpace__ConsoleCards?id={0}&layout=lex-layout
• /apex/NameSpace__ConsoleCards?id={0}&layout=Sample-
GetObjectFromInteraction
See Target URL and URL Parameters.

company 1727
OmniStudio

URL Parameter If the Target URL requires parameters, enter them here. The URL parameter represents the
attribute name from the Applicable Type object, such as AccountId in Contact. In the
sequence that you want to replace the parameters in the Target URL, specify parameters in a
comma separated list with no spaces.
For example, when you enter AssetId,CustomerInteractionId,Role in this field,

AssetId replaces {0}, CustomerInteractionId replaces {1}, and Role replaces {2} in
a Target URL.
See Target URL and URL Parameters.

Applicable Permission For Vlocity Winter '18 minor release 900.85.3 and later. To specify what actions display based
Name on whether permission is granted to the user's profile or one or more of the user's permission
sets, enter the name of a standard Custom Permission object. For more information about
permission sets, see Control Who Sees What in the Salesforce help.
Filter To specify what action displays for each instance of the object, create a filter using AND or OR
conditions with attributes from the Applicable Type. For example:
Applicable Type=Policy__c, Filter=PolicyType__c='Auto' AND

Status__c='Active'
This example specifies that the action shows only for active Policies where policy type is 'Auto'.
The filter condition is applicable for valid Salesforce standard and custom objects. Filter by any
field on the object. Maximum length is 255 characters.
Additional Filter Enter a filter longer than 255 characters.
State Model For contracts, specify the Contract State Model that defines the contract life cycle associated
with this action. See Defining Vlocity Actions for Contracts.
To State For contracts, specify the state associated with this action. See Configuring the Contract State
Model.
Invocation Class Name Enter Apex invocation class name and method name. The class must implement
VlocityOpenInterface/VlocityOpenInterface2. See Vlocity Interfaces and
Invocation Method Name Implementations.
Validation Class Name Enter validation class name and method name. The class must implement
VlocityOpenInterface/VlocityOpenInterface2. It is used in the Contract Document
Validation Method Name Management UI Action tool bar to display a warning message. See Vlocity Interfaces and
Implementations.
4. Click Save.
Update Filter Logic for Vlocity Actions

Vlocity Action filters and the Applicable Type setting determine which action appears for an instance of an
object. You can use AND or OR conditions with the attributes in the Applicable Type setting. For example,

company 1728
OmniStudio
Applicable Type=Policy__c, Filter=PolicyType__c='Auto' AND Status__c='Active',

means this action appears only on the Action toolbar for the Policies with policy type ='Auto' and status is
'active'.
1. Go the Vlocity Actions tab.

2. Click the down arrow for the Action to update, and click Edit.
3. In the Filter field, enter the new filter logic.
4. Click Save.
Update Profile Settings for Contract Actions

Vlocity Actions control the actions and operations that are allowed in each state on a particular Contract
Document record. Vlocity Actions also control which users can perform actions and operations.
1. Go to the Vlocity Actions tab and click the checkbox next to

2. Click the down arrow for the Add Vlocity Action, and click Edit.
3. In the Applicable User Profile picklist:
a. To prevent unauthorized users from downloading contract documents, for each authorized user,
select the user from the Available list and click the right arrow to move it to the Chosen list.
b. To ensure only authorized users can download contract documents, for each unauthorized user,
select the user from the Chosen list and click the left arrow to move it to the Available list.

company 1729
OmniStudio
4. Click Save.
5. Repeat steps 1 through 4 for the Check Out to Customize and Check Out to Customize Console
actions.
Update the Link Type for an Action

The Vlocity mobile app uses the Vlocity Action link type to filter OmniScript Actions. For more information
on OmniScript Actions, see Launching an OmniScript from an OS Action on a Card. For an LWC enabled
OmniScript, see Launching an LWC OmniScript from an OS Action on a Card.

company 1730
OmniStudio
1. Go to the Vlocity Actions tab.

2. Click the down arrow for the Action to edit, and click Edit.
3. From the Link Type picklist, select a link type.
4. Click Save.
Target URL and URL Parameters

To launch Vlocity OmniScripts, Vlocity Cards components, web pages, or external applications from a
Vlocity Action, enter an Apex page, or a URL with parameters as the Target URL. LWC components, such
as LWC OmniScripts, LWC Cards, and FlexCards, are not URL addressable and so can't be accessed
directly from a URL and must embedded on a page. See Vlocity Actions.
IMPORTANT
For out-of-the-box Vlocity Actions, such as View Record, the Target URL/{0} does not
work outside of Salesforce Classic. To navigate to a page in Salesforce Lightning
Experience, update the URL to /lightning/r/[ObjectName]/{0}/view, where
ObjectName is the API name of the sObject such as Account.
Available Visualforce Pages to Launch OmniScripts

Vlocity provides these Visualforce pages to launch OmniScripts:
• OmniScriptUniversalPage
• OmniScriptUniversalPageWHeader
• OmniScriptUniversalPageWHeaderSidebar.
• OmniScriptUniversalMobilePage (for use with Mobile only)
• OmniScriptUniveralPageConsole (for use in the Industry Console)
• OmniScriptUniversalCommunitiesPage (for use in Communities)
Formatting the Target URL

For a Target URL that launches a Vlocity Card component or a Vlocity OmniScript, the first part of the URL
is the apex page, followed by the PageName, such as /apex/<PageName>. The second part of the Target
URL is a list of parameters defined in the URL Parameters field and is available to any URL types Vlocity
Actions support, including web pages and external applications.
The following example shows how to format the URL:
/apexNS__[PageName]?id={0}#/OmniScriptType/AAA1/OmniScriptSubType/AAA2/
OmniScriptLang/AAA3/layout/[LayoutName]/ContextId/{0}/PrefillDataRaptorBundle/
[BundleName]/[verticalMode]

company 1731
OmniStudio
/apex/NS__[PageName]?id={0}#/layout=[LayoutName]
Beginning with Vlocity Version 12, an alternative URL pattern is available:
/apexNS__[PageName]?
id={0}&OmniScriptType=AAA1&OmniScriptSubType=AAA2&OmniScriptLang=AAA3&layout=[L
ayoutName]]&PrefillDataRaptorBundle=[BundleName]&scriptMode=[verticalMode]
/apex/NS__[PageName]?id={0}&layout=[LayoutName]
NOTE
While both URL patterns are valid, the advantage of the alternative pattern is that it is
mobile-friendly and enables adding additional URL parameters directly into the OmniScript
Data JSON. For example, appending &customerSLALevel=gold to the URL would add a
node to the root of the OmniScript Data JSON, such as "customerSLALevel":"gold".
Target URL Variable Descriptions

This table lists descriptions for the variables from the Target URL examples on this page:

For
NS__ Namespace of the installed package. Use when referencing a Universal Visualforce page. OmniScript,
Card

company 1732
OmniStudio

For
[PageName] Universal Visualforce page, OmniScriptUniversalPage, OmniScriptUniversalPageWHeader, OmniScript,
OmniScriptUniversalPageWHeaderSidebar, or OmniScriptUniversalMobilePage) or another Card
Visualforce page containing the OmniScript.
{0} The first parameter listed in the URL Parameters field and is often the Context Id of an OmniScript,
sObject. See URL Parameters on this page. Card
AAA1 OmniScript Type OmniScript
AAA2 OmniScript Sub Type OmniScript
AAA3 OmniScript Language OmniScript
[LayoutName] • (Optional) For OmniScript: lightning or Newport. Defines which layout theme to use. The OmniScript,
default is lightning. Card
• (Optional) For Card: Defines which card layout to use.
[BundleName] (Optional) DataRaptor Bundle name used for prefilling fields in the script. OmniScript
[verticalMode] (Optional) true or false. If true, all the steps in an OmniScript are vertically stacked. If false, all OmniScript
the steps in an OmniScript are horizontally navigated. Default is true.
URL Parameters
In a Target URL, the {0} represents the indexed position of a parameter in the list of parameters in the URL
Parameter field. The parameter is the field API name in the applicable object, such as AccountId, or ID in
Contact.
Specify the parameters as a comma-delimited string, in the sequence in which you want to replace the
parameters in the Target URL. For example, AccountId,vlocity_ins__PrimaryContactId__c, replaces {0}
in the Target URL with the AccountId, and replaces {1} in the Target URL with the
vlocity_ins__PrimaryContactId__c.
You can also use attributes from the User object, such as User.ContactId to get the Id of the current user.
NOTE
Beginning with CME Fall '18, Vlocity supports the Salesforce object edit URL format of /{3
character sobject prefix}/e'.
Example 20. URL Parameter Example

/apex/vlocity_ins__OmniScriptUniversalPage?
id={0}&OmniScriptType=AppointmentApplication&OmniScriptSubType=IndependentAgent
AppointmentApplication&OmniScriptLang=English&layout=lightning

company 1733
OmniStudio
/apex/NameSpace__ConsoleCards?id={0}&layout=lex-layout
Navigating URLs in Lightning and Lightning Community

Navigating to Lightning pages and from Lightning Containers requires the relative path to have a prefix.
To use proper URL syntax, follow these requirements :
• To use relative URLs in the Lightning Console (LEX), prefix the Target URL with ltng:, and make sure
the Open URL in value is set to New Tab / Window so that the relative URL link will open in a new
window. For example, ltng:/apex/NewLandingPage, will open the New Landing Page in a new
window.
• To redirect to a Lightning or Lightning Community Page, prefix the relative URL with ltngpage:. For
• To open a Visualforce page from Salesforce's Lightning container, prefix the relative URL with ltng:. For
Display Vlocity Actions with the Vlocity Action Toolbar

Open Cards, OmniScripts, Community pages, web pages, documents, and external applications on a
Lightning or Community record page by clicking Vlocity Action links in the Vlocity Actions Toolbar. The
Record Id of the record page and permissions granted to Vlocity Actions determine what actions display in
the Vlocity Action Toolbar.
NOTE
Because Lightning web components, such as LWC Cards and LWC OmniScripts, are not
URL addressable, you can only Angular Vlocity Cards and Angular Vlocity OmniScripts
from the toolbar.
Add the Vlocity Action Toolbar to a Lightning Record Page

Add the Vlocity Action Toolbar to a Lighting record page to open a card, OmniScript, Community page, web
page, document, or external application. For example, add the toolbar on an Account page to view all
available Vlocity Actions available to Accounts such as Update Account.
1. In your org, open a record page, such as an Account, click the Set Up icon, and click Edit Page.
2. From the Lightning components pane, drag the Vlocity Action Toolbar component from the list of
Custom - Managed components onto the canvas area where you want your toolbar to display.
3. To update properties in the Properties Pane, see Configure the Vlocity Action Toolbar.

company 1734
OmniStudio
Add the Vlocity Actions Toolbar to a Community Record Page

Add the Vlocity Action Toolbar to a Community record page to open a card, OmniScript, another
Community page, web page, document, or external application. For example, add the toolbar on an
Account page to view all available Vlocity Actions available to Accounts such as Update Account.
1. In your org, go to Service Setup > All Communities and click Builder next to the name of an existing
Community to open the Community Builder.
3. From the list of Custom Components in the Components pane, drag the Vlocity Action Toolbar to
the canvas area where you want your toolbar to display.
4. To update properties in the Properties Pane, see Configure the Vlocity Actions Toolbar on this page.
Configure the Vlocity Action Toolbar

The Vlocity Action Toolbar has optional properties you can configure. By default, the toolbar works out of
the box without configuring any properties. Add a Vlocity Action Toolbar to open Cards, OmniScripts,
Community pages, web pages, documents, and external applications on a Lightning or Community record
page by clicking Vlocity Action links in the toolbar. See Display Vlocity Actions with the Vlocity Action
Toolbar.
Record Id To enable the toolbar to automatically use the recordId of the record page it's on, leave empty. To display actions
associated with a specific record Id, enter a record Id.
Style Select a horizontal or vertical layout. Default is horizontal.
Object Type Select the objects whose actions have specific Applicable Types. Applicable Types determine the objects from
which you want the action to launch. See Vlocity Actions. For example, enter Account,Policy_c to display
Vlocity Actions that can only launch from an Account or Policy record page. Default is Home.
Display On To limit to Vlocity Actions that only display on specific platforms. Select from one of these options:
Option Description
All For actions that display on both web client and mobile.
Web Client Default. Actions display only on the salesforce web client.
Mobile For actions that display online on the mobile app.
Link Type To specify where the action is launched from, enter a comma-separated list without spaces. For example, to
display actions that launch OmniScripts and specific URLs, enter Other,OmniScript.
Type Description
CommunityURL Launches a Salesforce Community page.
OmniScript Launches an OmniScript.
Other Launches a specific URL.
ConsoleCards Launches a Salesforce Classic card.
LEXConsoleCards Launches a Lightning Experience Console card in a sub-tab.
Document Launches a Contracts Document.
Layout Launches a Card Layout page.
Community If Link Type is CommunityURL, enter the name of the Community page you created to display OmniScripts.
Page

company 1735
OmniStudio
Vlocity Conversation UI
Vlocity Conversation UI combines the familiar experience of online chat, with the robust transactional
capabilities of Vlocity’s Industry Cloud solutions. Now consumers, channel partners, and employees alike
can get work done, including account inquiries, orders, quotes, and claims, as easily as texting back and
forth with an agent. With the Conversation UI, Vlocity bridges the power of artificial intelligence and natural
language processing with an easy to use interface.
The Vlocity Conversation UI also reduces the sometimes tedious interaction patterns of many chatbots
through the integration of simple microforms, called Vlocity OmniForms. Vlocity OmniForms uses a reduced
set of design tools in Vlocity OmniScript, providing only essential input functions to minimize download size.
Vlocity OmniForm can be used to simplify structured user input and to present card-styled output in the chat
window.
The Vlocity Conversation UI is based on Vlocity Integration Procedures, a configurable transaction engine
that orchestrates natural language processors (NLP) with Vlocity’s application engines. A Vlocity Integration
Procedure is used to pass the customer’s text input to an NLP service, such as IBM Watson or Salesforce
Einstein, and then process the intent using Vlocity services. Services supported via Integration Procedures
include product configuration, policy rating, Vlocity DataRaptor functions, REST and SOAP call-outs, and
many more.
Creating the Conversation UI

Vlocity Conversation UI uses a Lightning component to invoke an Integration Procedure that renders data
within the Conversation UI. The Integration Procedure calls a natural language processor, which interprets
any input entered into the Conversation UI and sends back a response. The response renders in an
OmniForm, which the customer uses to submit information.
Setting up a Natural Language Processor

Vlocity Conversation UI uses a natural language processor to interpret a user’s text input and then
conditionally return text based on the input text received. While most natural language processors are
compatible with the Conversation UI, Vlocity recommends using IBM's Watson Assistant Tool. The
instructions for setting up a natural language processor are based on IBM's Watson Assistant. For more
information on IBM Watson Assistant, see Watson Assistant.
Setting up IBM's Watson Assistant

To set up Watson Assistant for a Conversation UI, perform the following steps:
1. Create an Account on IBM by following the instructions in Watson Assistant.

2. Create a Watson Assistant workspace in Configuring a Watson Assistant workspace.
3. Generate a New credential for your workspace. For instructions on generating New credentials, see
Service credentials for Watson services.
4. Define your Intents to handle user input. For details about Intents, see Defining Intents.
5. Define Entities to interpret the user's intentions. For more information about Entities, see Defining
Entities.
6. Create a Dialog and define the context variables that will be sent back to the Vlocity Conversation
UI's JSON. For details about Dialogs and context variables, see Dialog Overview.

company 1736
OmniStudio
Creating a Named Credential for the Conversation UI

To create a named credential for a Conversation UI, perform the following steps:
1. From Setup, go to Security Controls, then click Named Credential.

2. Click New and enter a Label, a Name, and the URL from your Watson workspace credentials. For
Identity Type, select Named Principal with an authentication protocol of password
authentication. For Username and Password, enter your Watson Service credentials.
Example image:
For more information on Named Credentials, see Defining a Named Credential.
Configuring an Integration Procedure for the Conversation UI

To configure an Integration Procedure for the Conversation UI, add an HTTP Action to send data to
Watson Assistant, an OmniForm Action to display an OmniForm, and a Response Action to handle
Watson Assistant's response data. Watson Assistant's response data is returned in the following JSON
nodes:
• Watson:context - Access context variables under this node level in your Integration Procedure. For
more information on context variables, see Setting up IBM's Watson Assistant.
• Watson:output - This node contains text that displays to the user through Conversation UI.
Connecting Conversation UI to Watson Assistant with an HTTP action

To send customer input and receive context variables, you must connect the Integration Procedure's HTTP
action to Watson Assistant. The context variables contain conditions that control when other actions in the
Integration Procedure can run. For more information, see HTTP Action.
To add an HTTP action to an Integration Procedure:
1. Create an Integration Procedure.

company 1737
OmniStudio
2. To connect to the Watson endpoint. Add an HTTP Action to the Script Structure and configuring its
settings as follows:
• Element Name: Watson
• HTTP Path: Your Watson Assistant workspace's relative URL (see the image below for
reference)
• HTTP Method: POST
• Named Credential: Your named credential
• Under Rest Options, add these two headers:
• Accept : application/json
• Content-Type: application/json
Example image:
After configuring the HTTP action, start Configuring an OmniForm Action for the Conversation UI.
Configuring an OmniForm Action for the Conversation UI

After connecting Conversation UI to Watson with the HTTP Action (see Connecting Conversation UI to
Watson Assistant with an HTTP action), configure your OmniForm Action to render an OmniForm in the
Conversation UI. OmniForm enables customers to submit forms to your database directly from the
Conversation UI without leaving the interaction. Configure an OmniForm Action after creating an
OmniForm. For more information on OmniForm, see Creating an OmniForm for Integration Procedure's
OmniForm Action.
To display an OmniForm in Conversation UI:
1. In the Integration Procedure that connects to Watson, add an OmniForm Action after the HTTP
Action.
2. Map the Type and SubType, and Language of the OmniForm to the OmniForm Action's Type and
SubType fields. For more information see, Configuring an Integration Procedure for the Conversation
UI.
Example image:

company 1738
OmniStudio
3. To control when the OmniForm renders to the user, enter one of your Watson Assistant Dialog's
context variables into the Execution Conditional Formula.
Example image:
4. (Optional) To prefill the OmniForm with data, map an Integration Procedure's Type and SubType to
your OmniForm Action's Pre IP field. For more information on how to use the Pre IP field, see Prefilling
an OmniForm with an Integration Procedure.
5. (Optional) To load data from the OmniForm to Salesforce, map an Integration Procedure's Type and
SubType to your OmniForm Action's Post IP field. For more information on how to use the Post IP
field, see Submitting OmniForm Data with an Integration Procedure.
After Configuring an OmniForm Action for the Conversation UI, begin Handling Watson Data using the
Response Action.

company 1739
OmniStudio
Handling Watson Data using the Response Action

After Configuring an OmniForm Action for the Conversation UI, set up a Response Action to handle
Watson's response data. The Response Action uses context variables received from Watson to maintain
the current state of the Vlocity Conversation UI and the Watson Assistant Dialog. The Response Action
receives output text from Watson, which it displays in the Vlocity Conversation UI.
To configure your Response Action:
1. Add a Response Action to your Integration Procedure.

2. Configure the Response Action's settings as follows:
• Response Format: JSON
• Additional Output:
• Context: %Watson:context%
• Output: %Watson:output%
Example image:
For more information on Response Actions, see Integration Procedure Actions.

3. (Optional)To prevent the Response Action from running, enter Watson Assistant Dialog's context
variables into the Execution Conditional Formula.
Example image:
Deploying the Conversation UI

There are three ways to deploy Conversation UI:
• Use Vlocity ChatBot lightning component, allowing you to launch a Conversation UI directly in your
lightning page.

company 1740
OmniStudio
• Use a combination of the Vlocity ChatBot Input lightning component and the Vlocity ChatBot Utility
lightning component to launch Conversation UI from the utility bar.
• Configure a custom Visualforce page to host the Conversation UI. For more information on how to build a
custom Visualforce page, see Creating a custom Visualforce page for the Conversation UI.
Launching the Conversation UI using the Vlocity ChatBot Component

To launch Vlocity Conversation UI from a lightning page:
1. From Lightning App Builder, select the Page that you want to edit.
2. From the Lightning components section, drag the Vlocity ChatBot component into your page.
3. Under BOT Name, select the Type and SubType that correlate to the Conversation UI's Integration
Procedure.
4. Name your Context URL Parameter. This parameter passes the record Id of the page into the
Conversation UI's Integration Procedure data JSON. Using the context URL parameter in OmniForm's
Pre IP or Post IP enables you to extract and post data. For more information on OmniForm, see
OmniForm.
5. Under Height(px), specify a height in px.
6. (Optional) Under Custom Visualforce Page, select a custom Visualforce page. For more
information on custom Visualforce pages, see Creating a custom Visualforce page for the
Conversation UI.
7. Click Save.
Example image:
Launching Conversation UI from the Utility Bar

To handle the initial input from a customer, Vlocity Conversation UI uses a Vlocity ChatBot Input component
in a Lightning app page. The Vlocity ChatBot Input component prompts the Vlocity ChatBot Utility
component to launch a Conversation UI from the utility bar. For more information on the Utility Bar, see Add
a Utility Bar to Lightning Apps.
Configuring the Vlocity ChatBot Input component

To configure the Vlocity ChatBot Input component:
1. From Lightning App Builder, select the Page that you want to edit.
2. From the Lightning components section, drag the Vlocity ChatBot Input component into your page.

company 1741
OmniStudio
3. Under BOT Name, select the Type and SubType of your Vlocity Conversation UI's Integration
Procedure.
4. Enter Placeholder Text to display in the component.
5. (Optional) Under Custom Visualforce Page, select a custom Visualforce page. For more information
on custom Visualforce pages, see Creating a custom Visualforce page for the Conversation UI.
6. Click Save.
Example image:
After configuring the Vlocity Chabot Input component, start Configuring the Vlocity ChatBot Utility
Component.
Configuring the Vlocity ChatBot Utility Component

After Configuring the Vlocity ChatBot Input component, add the Vlocity ChatBot Utility component to the
utility bar.
To configure the Vlocity ChatBot Utility Component:
1. From App Manager, select the Lightning Console App that you want to edit.
2. Under App Settings, click Utility Bar, then click Add.
3. From the Lightning components section, drag the Vlocity ChatBot Utility component into your page.
4. In the Vlocity ChatBot Utility component, enter a Label.
5. Select an SLDS icon.
6. Set the Panel Width. The recommended width is 800 px.
7. Set the Panel Height. The recommended height is 700 px.
8. Check the box next to Load in background when app opens.
9. Click Save. The following figure shows a valid configuration:

company 1742
OmniStudio
Customizing Vlocity Conversation UI

To customize the appearance of the Conversation UI, you can edit templates, submit additional parameters,
and create a custom component that modifies the Conversation UI icon.
Creating a custom Visualforce page for the Conversation UI

To add custom styling, include a custom Visualforce page with the Vlocity ChatBot lightning component or
Vlocity Input Lightning component. You can also use the Visualforce page as an endpoint without a
Lightning component.
To create a custom Visualforce page for a Conversation UI:
1. Go to Setup, and, below Develop, choose Visualforce Pages, and click New.
2. Copy the Conversation UI Visualforce code below, paste it into your Visualforce page, and click
Save.
<apex:page showHeader="false" sidebar="false" language="{!

$CurrentPage.parameters.LanguageCode}">
<apex:includeScript value="/soap/ajax/37.0/connection.js"/>
<div ng-app="VlocityChatBot" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<c:VlocityChatBotComponent />
var modules = ['vlocity-chat-bot'];
var myModule = angular.module('VlocityChatBot', modules);

company 1743
OmniStudio
</script>
</div>
<c:VFActionFunction />
</apex:page>
3. (Optional) Parameters can be appended to the Visualforce page URL when calling the Visualforce
page as a standalone page. The two parameters are:
• botName: Passes in the Type and SubType of the Integration Procedure. The syntax is: /apex/
customVFPage?botName=Type_SubType
• mode: Changes the UI styling when the parameter is set to console. The syntax is: /apex/
customVFPage?botName=Type_SubType&mode=console.
Example image:
Customizing templates for the Conversation UI

To implement custom styles for OmniForm elements, you can add custom templates to the Conversation
UI. There are three ways to add custom templates:
• Use the HTMLTemplateId property in the OmniScript designer to map individual elements to custom
templates. For more information on the HTMLTemplateId property, see Using Custom Templates.
• Use the elementTypeToHTMLTemplateMapping property located in the OmniScript designer's Script
Configuration section to map templates to all elements of a specific type. .
• Create a lightning component by copying the VlocityChatBot component code. Update the
elementTypeToHTMLTemplateMapping attribute to map element types to any custom templates that
have been created in the Vlocity Template Designer. To update the attribute, perform the following steps:
1. Locate the attribute named elementTypeToHTMLTemplateMapping.

company 1744
OmniStudio
2. Set the attribute equal to an object that maps element types to custom HTML templates. For
example, the following code would map the customText.html template to all of the text elements
displayed in the OmniForm:
elementTypeToHTMLTemplateMapping =
"{'Text':'customText.html'}"
3. Create a custom Visualforce page following the steps outlined in Creating a custom Visualforce page
for the Conversation UI.
4. Update the Visualforce page, replacing the VlocityChatBotComponent name with the name of the
lightning component you created. The line to update appears in the code as:
<c:VlocityChatBotComponent />
NOTE
If two or more styles map to the same element one will overwrite the other with priority
being based upon the order the options appear in this article.
Customizing Conversation UI's Icon

After Customizing Vlocity Conversation UI, you can customize the Conversation UI's icon.
To customize the icon that displays in the Conversation UI:
1. Create a file on your computer named CustomStyle.css.

2. Add the following code to the CustomStyle.css file:
.via-slds.via-omni .chatbot-container .vlc-chat-msg.vlc-chat-bot .vlc-chat-

icon-container .vlc-chat-icon
{ background-image: url('user.png'); background-size:

30px 30px; }
3. Replace user.png in the code with the path for your image, including the directory. For example:
background-image: url('directory/user.png');
4. Create a zip file that contains the CustomStyle.css file and any number of images.
5. Upload the zip file into Salesforce as a static resource with the name CustomStyle.
6. Return to the custom Visualforce page and update the page to include the following line:
<apex:stylesheet value="{!URLFOR($Resource.CustomStyle,
'CustomStyle.css')}"/>
OmniForm
OmniForm is an omnichannel tool that enables you to build single-step, dynamic customer interactions.
OmniForm uses a subset of OmniScript elements to accept user input, enabling customers to complete

company 1745
OmniStudio
tasks such as making a payment or updating their billing information. For information about OmniScript
elements, see Common Action Element Properties. Before using OmniForm, familiarize yourself with
OmniScript. For more information on OmniScript, see Getting Started with OmniScript.
The reduced size of OmniForm enables you to integrate OmniForm with the Vlocity Conversation UI and
the Transaction Component. For more information, see Vlocity Conversation UI and Configuring and Using
the Transaction Component.
Additionally, you can build a standalone OmniForm in a Visualforce page.
Creating an OmniForm for Integration Procedure's OmniForm Action

To create an OmniForm to map to the OmniForm Action:
1. Create and activate an OmniScript that contains a single Step:

a. Go to the Vlocity OmniScript Designer tab, and click New.
b. Create an OmniScript with a single Step element that contains OmniForm Elements.
2. Create an Integration Procedure to call the OmniForm Action:

a. Go to the Vlocity Integration Procedures tab, and click New to create an Integration Procedure.
b. Add an OmniForm Action element to your Integration Procedure, and select your OmniForm’s
Type, SubType, and Language. For more information on the OmniForm Action, see Integration
Procedure Actions.

company 1746
OmniStudio
Creating a Standalone OmniForm

To create a custom standalone OmniForm, use a VisualForce page that contains the OmniForm
component, an OmniScript to model your JSON, and an Integration Procedure to generate the OmniForm's
JSON. A standalone OmniForm cannot be integrated with Vlocity Conversation UI or the Transaction
Component. For more information on the Transaction Component, see Configuring and Using the
Transaction Component.
To create a standalone OmniForm:
1. Create a Visualforce Page:

a. Go to Setup, and, below Develop, choose Visualforce Pages, and click New.
b. Paste the OmniForm Apex Code, provided below, into your Visualforce page:

company 1747
OmniStudio
c. In the code, replace NS with the Namespace of the installed package, and click Save. For more
information on the package namespace, see Viewing the Namespace and Version of the Vlocity
Package.
2. Create and activate a single step OmniScript:
a. Go to the Vlocity OmniScript Designer tab, and click New.
b. Create an OmniScript with a single Step element that contains OmniForm Elements.

company 1748
OmniStudio
3. Create an Integration Procedure to generate the OmniForm JSON:

a. Go to the Vlocity Integration Procedures tab, and click New to create an Integration Procedure.
b. Add an OmniForm Action element to your Integration Procedure, and enter your OmniScript’s
Type and Subtype.
c. Click Preview, and then click Execute.
d. Under Debug Log, find the OmniInput JSON node and set your cursor to the right of the colon.
Highlight the text from the cursor's current position to the node's closing bracket. To see an
example of the text that you need to select, click the thumbnail below.
e. Copy your highlighted text.

company 1749
OmniStudio
4. To update your Visualforce Page with your OmniForm JSON:

a. Return to the Visualforce page you created, and click Edit.
b. Locate $scope.omniinput, and paste the OmniForm Apex code, located at the bottom of this
page, to the right of the equals sign.
c. Click Save, and preview the page.

company 1750
OmniStudio
OmniForm Apex code
<apex:page showHeader="false" sidebar="false">

<apex:includeScript value="/soap/ajax/37.0/connection.js"/>
<NS:VlocityOmniFormComponent />
var modules = ['vlocity-omni-form'];
var myModule1 = angular.module('ExampleTestApp', modules);
myModule1.controller('exampleCtrl', function($scope, ouiBaseService){
$scope.mode = "console";
$scope.omniinput = {
"OmniPrefillJSON": {},
"OmniPostAction": "",
"OmniDef": "{}"
};
$scope.omniinput.OmniDef = angular.fromJson($scope.omniinput.OmniDef);
}); // end of controller
</script>
<div ng-app="ExampleTestApp" ng-controller="exampleCtrl" class='vlocity via-
slds via-omni' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://
www.w3.org/1999/xlink">
<vlc-omni-form omni-input="omniinput" mode="mode" output="output"
offset="1" debug="debug" class="slds-grid slds-grid--vertical"></vlc-omni-form>
</div>
<NS:VFActionFunction />
</apex:page>
Customizing an OmniForm using the OmniForm Directive

The OmniForm directive is only available for modification when Creating a Standalone OmniForm. The
OmniForm directive accepts several attributes that can be used to customize your OmniForm's behavior.
The OmniForm directive is written in AngularJS 1.6.0. You can locate the directive in the Visualforce code
used to create the OmniForm, as shown in the following figure:
OmniForm Directive Attributes
Attribute Accepted Data Description Example

Name Type
mode string Changes the UI styling. The mode attribute can only be set to n/a
"console" currently.

company 1751
OmniStudio
Attribute Accepted Data Description Example

Name Type
omni-input JSON object Accepts an OmniForm data JSON object obtained by a custom OmniInput Attribute
remote action that calls an Integration Procedure. This attribute
has two-way binding.
prefill-input JSON object Prefills the OmniForm's JSON. PrefillInput Attribute
submit-params JSON object Sets the parameters that are sent to the submit button's remote SubmitParams
action. Attribute
cancel-params JSON object Sets the parameters that are sent to the cancel button's remote Canceling your
action. OmniForm
offset string This attribute's value is appended to an Id that exists in your data n/a
JSON. That way, two or more OmniForms can use JSON
generated from the same OmniScript.
output JSON object Output is a variable that stores data returned from OmniForm. Output Attribute
This attribute has two-way binding.
debug boolean When set to true, this displays the OmniForm's JSON below the
form. This allows you to see your OmniForm's data when testing.
Setting the OmniInput Attribute

The omni-input attribute can only be used with a standalone OmniForm, see Creating a Standalone
OmniForm. The omni-input attribute sets an OmniForm's data JSON by storing the JSON returned from a
custom remote action that calls an Integration Procedure. To use the omni-input attribute:
1. Go to the Visualforce page that contains your OmniForm directive.

2. Create a custom remote action that calls an Integration Procedure, and store the response under a
variable named remoteResponse.
3. Create a variable that accesses OmniInput from remoteResponse.
var myOmniInput = angular.fromJSON(remoteResponse.IPResult.OmniInput);

4. Set your omni-input attribute equal to your variable.
<vlc-omni-form omni-input=myOmniInput><vlc-omni-form>
5. Click Save, and preview your changes.
Setting a watch using the Output Attribute

The output attribute can only be used with a standalone OmniForm, see Creating a Standalone OmniForm.
The output attribute stores data that has been returned from OmniForm after Submit or Cancel has been
clicked. By default, the attribute runs when you have not specified an OmniForm action’s Post Ip field or
submit-params attribute’s inputIp, see Submitting OmniForm Data with an Integration Procedure and
Submitting Data using the SubmitParams Attribute.
To run additional methods after data is returned from an OmniScript, you can set a watch on the output to
determine if the form has been submitted or canceled. For information on watches, see $watchCollection.
The watch detects if vlcOmniFormStatus is equal to one of the following values:

company 1752
OmniStudio
• submit: submit has been clicked and the subsequent remote action has completed
• submitting: submit has been clicked
• cancel: cancel has been clicked and the subsequent remote action has completed
• cancelling: cancel has been clicked
Example 21. $watchCollection example

$scope.myoutput = {}
$scope.$watchCollection('myoutput', function(newval, oldval) {
if(!angular.equals(newValue, oldValue) && newValue) {
// submit or cancel clicked
if(newval.vlcOmniFormStatus === 'submitting' ||
newval.vlcOmniFormStatus === 'cancelling'){
}
// remote action completed
if(newval.vlcOmniFormStatus === 'submit' ||
newval.vlcOmniFormStatus === 'cancel'){
}
}
});
<vlc-omni-form output=myoutput > </vlc-omni-form>
Canceling your OmniForm

To perform additional Integration Procedure actions when you cancel the OmniForm, use the cancel-
params attribute. The cancel-params attribute can only be used with a standalone OmniForm, see
Creating a Standalone OmniForm.
The cancel-params attribute accepts an object containing the following two fields:
• extraInput: Accepts custom data that is then passed to the Integration Procedure specfied by inputIP
• inputIP: Accepts an Integration Procedure’s Type and Subtype with the following syntax:
Type_SubType
To use the cancel-params attribute:
1. Create an Integration Procedure containing actions you want to run after the OmniForm has been
canceled.
2. Create a variable, add the appropriate values, and map it to your cancel-params attribute.
Example 22. cancel-params Attribute Example

var myCancelParams = {
extraInput : {
customInputKey : "customInputValue"
},
inputIP : "IPType_IPSubType"

company 1753
OmniStudio
}
<vlc-omni-form cancel-params=myCancelParams ><vlc-omni-form>
Prefilling an OmniForm
To prefill, or populate, an OmniForm with data, use an Integration Procedure in the OmniForm before the
Step renders. If you are Creating a Standalone OmniForm, use an Integration Procedure, the prefill-input
attribute, or seed the data JSON.
Prefilling an OmniForm with an Integration Procedure

To prefill an OmniForm:
1. Create an Integration Procedure that is separate from the one containing your OmniForm Action.
2. Add a Set Values action and map its values to your OmniForm's elements. For more information on
the Set Values action, see Set Values in an OmniScript.
3. Enter response into the Set Values Response JSON Node.
4. Return to the OmniForm.

5. Add an Integration Procedure Action before the Step in the OmniForm and configure it to reference the
Integration Procedure from Step 1. The OmniForm Action will automatically run the Integration
Procedure inside of the OmniForm.
If you are Creating a Standalone OmniForm, perform these additional steps:
1. Preview the Integration Procedure, and click Execute.

2. Under Debug Log, copy the text from the OmniPrefillJSON node.

company 1754
OmniStudio
3. Return to your OmniForm Visualforce page.

4. Paste the value into the OmniPrefillJSON node.
5. Click Save, and preview.

company 1755
OmniStudio
Prefilling OmniForm by Seeding the Data JSON

To prefill an OmniForm using an OmniScript's Seed Data JSON:
1. Go to the OmniScript you used to generate the OmniForm's JSON. For more information on generating
the OmniForm's JSON, see Creating a Standalone OmniForm.
2. In the Script Configuration properties panel, click Seed Data JSON and add a new key/value pair.
1. Navigate to the Integration Procedure that generates the OmniForm JSON.

2. Preview the Integration Procedure, then click Execute.

company 1756
OmniStudio
3. Under Debug Log, find the OmniInput JSON node and set your cursor to the right of the colon.
Highlight the text from the cursor's current position to the node's closing bracket. To see an example of
the text you need to select, click the thumbnail below.
4. Return to the Visualforce page that hosts your OmniForm JSON, and click Edit.
5. Locate $scope.omniinput, and paste your code to the right of the equals sign.
6. Click Save, and preview the page.

company 1757
OmniStudio
For more information on Seeding Data JSON, see Seed Data Into an OmniScript.
Using the PrefillInput Attribute

The prefill-input attribute is only applicable when Creating a Standalone OmniForm. To prefill an
OmniForm using the prefill-input directive attribute:
1. Create a variable equal to the data JSON you want to map.
Example 23. Example Apex code for prefill-input attribute
var customprefill = {
"Text1" : "Prefill input attribute"
};
<vlc-omni-form prefill-input=customprefill ><vlc-omni-form>
2. Set the prefill-input attribute equal to the variable from the previous step.
Submitting OmniForm Data

To submit OmniForm data, add an Integration Procedure after the OmniForm's Step to call a separate
Integration Procedure to handle your data. If you are Creating a Standalone OmniForm, add an Integration
Procedure after the OmniForm's Step, or use OmniForm’s submit-params directive attribute to handle
data. For more information on OmniForm directive attributes, see Customizing an OmniForm using the
OmniForm Directive.

company 1758
OmniStudio
Submitting OmniForm Data with an Integration Procedure

To submit OmniForm data with an Integration Procedure:
1. Create an additional Integration Procedure, separate from the one containing your OmniForm Action.
2. Add actions to the Integration Procedure to handle your data. For more information on actions, see
Integration Procedure Actions.
3. Return to the OmniForm.

4. Add an Integration Procedure Action after the Step in the OmniForm and configure it to reference the
Integration Procedure from Step 1. The OmniForm Action will automatically run the Integration
Procedure that is inside of the OmniForm.
1. Preview the Integration Procedure, and click Execute.

2. Locate the OmniPostAction node and copy the node's value.

company 1759
OmniStudio
3. Return to the Visualforce page that hosts your OmniForm JSON.

4. Locate the OmniPostAction node and replace the node's value with your copied value.
5. Click Save, and preview your changes.

company 1760
OmniStudio
Submitting Data using the SubmitParams Attribute

The submit-params attribute can only be used when Creating a Standalone OmniForm. As input, the
submit-params attribute accepts an object containing the following two fields:
• extraInput: Accepts custom data that is then passed to the Integration Procedure specfied by inputIP
• inputIP: Accepts an Integration Procedure’s Type and SubType with the following syntax:
Type_SubType
To submit data using the submit-params attribute:
1. Create an Integration Procedure.

2. Add any Integration Procedure actions that you want to run after the OmniForm has been submitted.
For more information on actions, see Integration Procedure Actions.
3. Activate your Integration Procedure.
4. Return to your OmniForm Visualforce page.
5. Create a variable, add your custom values, and map it to your submit-params attribute.
Example 24. submit-params attribute example

var mySubmitParams = {
extraInput : {
customInputKey : "customInputValue"
},
inputIP : "IPType_IPSubType"
}
<vlc-omni-form submit-params=mySubmitParams ><vlc-omni-form>
Customizing OmniForm using Data JSON Attributes

Adding data JSON attributes to the OmniForm enables you to make minor modifications to your
OmniForm's appearance and behavior. For more information on the initial configuration of OmniForm, see
Creating an OmniForm for Integration Procedure's OmniForm Action.
To add a JSON attribute to the script configuration:
1. In your OmniScript, select Script Configuration.

3. Add one or more attributes beneath the closing bracket of the persistent component array.

company 1761
OmniStudio
Data JSON Attributes

Attribute Name Accepted Description Example
Data Type
displayOnly boolean When set to true, your
OmniForm displays as read-
only.
submitLabel string Sets the default text for the

submit button.
cancelLabel string Sets the default text for the

cancel button.
resetLabel string Sets the default text for the

reset button.

company 1762
OmniStudio
Attribute Name Accepted Description Example

Data Type
vlcOmniFormClose boolean When set to true, your
OmniForm closes after
submit or cancel is clicked.
OmniForm Buttons
This page contains a table describing the available OmniForm buttons.
Button Description
Submit Clicking submit, without vlcOmniFormClose being set to true, converts the OmniForm's display into a two column, read-only
view.
Cancel Clicking cancel, without vlcOmniFormClose being set to true, converts the OmniForm’s display to a read-only view.
Reset The reset button becomes visible when cancel or submit has been clicked and, when clicked, reverts the OmniForm into an
editable state.
To customize these buttons, see Customizing OmniForm using Data JSON Attributes and Customizing an
OmniForm using the OmniForm Directive.
OmniForm Elements
The following table lists the OmniScript elements that can be used in OmniForms. OmniForm must be built
using a single Step element that contains a combination of Display and Input elements.
Component Category Compatible Elements

OmniScript Display Elements All Elements
OmniScript Group Elements Step Element
OmniScript Input Elements All Elements except filter

company 1763
OmniStudio
Vlocity Interaction Launcher

The Interaction Launcher is a component of a Vlocity Interaction Console app. Contact center agents use
the Interaction Console to display a full view of the customer and perform authorized actions. For more
information on the Interaction Console, see Set Up the Vlocity Interaction Console.
The Vlocity Interaction Launcher opens when you click its label in the Utility Bar of a Console. The Vlocity
Interaction Launcher enables an agent to launch a search that starts the customer interaction. Call service
agents use the Interaction Launcher to search and verify the identity of a caller. The console displays only
the data and transactions that the caller is permitted to see. The Interaction Launcher supports LEX
console navigation to primary tabs or sub-tabs.

company 1764
OmniStudio
There are three types of Interaction Launchers:

company 1765
OmniStudio
• A class-based Interaction Launcher uses an Apex class to retrieve a search request and search
response.
• A object-based Interaction Launcher uses the fields specified in the setup to query.
• A Omniscript-based Interaction Launcher uses an Omniscript to launch an interaction flow.
From the Vlocity Interaction Launcher tab, you can create, edit, and activate the widgets that are displayed
on your Interaction Launcher. To display details about an Interaction Launcher, click its name.

company 1766
OmniStudio
Account Search Policy Holder Search
Create a Vlocity Interaction Launcher

Create one or more search widgets to add to an Interaction Launcher component to enable an agent to
launch a search that starts a customer interaction. For example, a customer service agent may launch a

company 1767
OmniStudio
search to verify the information for the primary contact of an account. Once verified, the customer agent
launches the interaction console tab to see a 360-degree view of that contact's interaction history, access
all available actions, take notes about the interaction, and complete, cancel, or resume the interaction. See
Accessing Actions and Manage Interactions with the Vlocity Interaction Wrapper.
Before You Begin

You must first download and install the Vlocity Interaction Launcher DataPack. See Download and Install an Interaction Launcher
DataPack.
Create a New Interaction Launcher Widget

1. In your org, go to the Vlocity Interaction Launcher app. Clone an existing widget or click the New
button to create a new widget.
2. In the Record Type field:
• Select Object Based to retrieve a search request and search response from specified fields of an
sObject, such as Account.
• Select Class Based to enable an Apex class to retrieve a search request and search response. See
Create a Class-based Interaction Launcher.
3. In the Name field, enter the name for the widget in upper camel case. For example,
InteractionAccount.
4. In the Label field, enter the visible name of the widget, such as Account.
5. To control the order widgets display when there is more than one widget, enter a number in the
Display Sequence field.
6. To make the widget visible in the Interaction Launcher, check the Active checkbox.
7. To enable secondary searches, configure three properties for the initial search and the secondary
search:
• In the initial search widget, check the Continue Search checkbox to indicate that a secondary
search will follow this one.
• In the secondary search widget, in the Previous Search Widget Name field, enter the name of the
initial search widget.
For example, if the initial search widget is named InteractionAccount, and the secondary search widget
is named InteractionContact, check the Continue Search checkbox for the InteractionAccount widget
and enter InteractionAccount in the Previous Search Widget Name field in the
InteractionContact widget.
8. In the Interaction Object Name field, enter an interaction record name. When the interaction between
customer agent and customer is complete, the interaction object name + 'Id', such as
CustomerInteractionId is sent to the UI to launch a console tab or sub-tab. For best practice, use
CustomerInteraction. To trigger another API name object name, enter that name.
9. In the Interaction Creation Bundle Name field, enter the name of the DataRaptor that launches once
the interaction is complete and the customer agent clicks the Launch Console button. See Create a
Customer Interaction Record With DataRaptor.

company 1768
OmniStudio
NOTE
To configure the VerifyAction that launches the Interaction Creation DataRaptor, see
Verifying Caller Identity Using the Verify Action.
10. To determine the minimum number of fields to verify from a list of optional verification fields, enter a
number in the Min # of Optional Verification Fields input field.
NOTE
If this is a class based widget, the optional verification fields are set in the class. If this
is an object based widget, see the Optional Verification Fields property on this page.
Configure Class-Based Widget Properties

If Record Type is set to Class Based, enter values for this property:
• In the Invoke Class Name field, enter the name of the Apex class, such as
GetMockupRequestSearchResults. See Create a Class-based Interaction Launcher.
Configure Object-Based Widget Properties

If Record Type is set to Object Based, enter values for these properties:

company 1769
OmniStudio
1. In the Type dropdown field, select the layout for the search results:
• Related Party: To display a three-column layout where Party Name is listed in the first column,
Source Role is listed in the second column and action buttons, such as Verify, are listed in the third
column, select this option.
• Caller Identification: To display a two-column layout where search results fields are listed in the first
column and action buttons, such as Verify, are listed in the second column, select this option.

company 1770
OmniStudio
2. In the Search Object Name field, enter the name of the object to search. For example, Asset,
Contact, or %NS%__PolicyPartyRelationship__c, where %NS% is dynamically replaced with
your Vlocity namespace prefix.
3. In the Search Field, enter the data fields necessary to perform the search. Separate multiple entries
by a comma. Make sure there are no spaces between the entries. For example,
FirstName,LastName,%NS%__ProducerNumber__c.
4. In the Results Fields, enter the fields to display in the search result. Separate multiple entries by a
comma. Make sure there are no spaces between the entries.
NOTE
The search results page paginates when more than ten results are returned.
5. In the Result Verification Fields, enter the fields to verify before the interaction continues. Separate
multiple entries by a comma. Make sure there are no spaces between the entries.
6. To filter out duplicate entries, in the Result Unique Field, enter the name of the object to use as a
filter.
For example, a search for an asset party relationship based on a party name might return duplicates
because the same party has many relationships to the same policy with different roles. However,
entering Asset.AccountId in the Result Unique Field returns search results with distinct policy
holder IDs.
7. If this search widget is a secondary search, enter the Previous Search Context Id Field of the
previous search widget, such as %NS%_AccountId.
8. To return hidden fields queried from the search object, enter field names in the Additional Result
Fields input field. Use these hidden search fields to pass information down to the interaction object.
Separate multiple entries by a comma. Make sure there are no spaces between the entries.
9. To filter search results, in the Filter input field, enter a formula where a field is checked against a value
by an operator. For example, %NS%__Role__c!='Carrier'.
10. To launch role-based actions, enter the name of an object in the Reference Object Name field.
For example, enter Asset for a Policy search. If the policy is not related to any party, a set of role-
based actions display. The reference object gets a list of role-based actions and passes the policy Id to
the actions.
11. Enter additional verification fields in the Optional Verification Fields input field. Separate multiple
entries by a comma. Make sure there are no spaces between the entries. This property works with the
Min # of Optional Verification Fields property.
For example, if there are two optional verification fields such as Name,Email, and the minimum
number of optional verification fields is 1, then the customer interaction agent needs to verify Name or
Email, not both.
12. (Optional) To update the layout of the Interaction Launcher component, see Update the Layout of an
Interaction Launcher.
What's Next
To add your Interaction Launcher to a Console app, see Add the Vlocity Interaction Launcher to a Console
App.

company 1771
OmniStudio
See Also
• Set Up the Vlocity Interaction Console
• Verify Caller Identity in an Interaction Launcher
• Configure a Secondary Search in an Interaction Launcher
• Add a Vlocity Action to an Interaction Launcher Search Widget
Update the Layout of an Interaction Launcher

The Interaction Launcher is a utility component in the Vlocity Interaction Launcher Console app. Change
the look of the Interaction Launcher component by configuring its settings.
1. In your org, go to Setup > App Manager > Vlocity Interaction Console > down arrow > Edit to open the
console app.

company 1772
OmniStudio
NOTE
If you do not see the Vlocity Interaction Console in the App Manager, see Set Up the
Vlocity Interaction Console.
2. Select Utility Items > Vlocity Interaction Launcher.

3. Under Utility Properties, update these properties:
• Label: To change the visible name of the Vlocity Interaction Launcher, enter a new label.
• Icon: To update the icon that appears next to the label, click X next to the name of the current icon,
click Choose Icon and select an icon from the list.
• Panel Width: To change the width of the Interaction Launcher component, enter a number from 1
through 1920. The default width is 320px.
• Panel Height: To change the default height of the Interaction Launcher component, enter a number
from 1 through 2560. The default height is 480px.
• Start Automatically: If the component needs time to initialize, to start loading the data when the app
first opens, select this checkbox. Otherwise, the component loads when it first opens.
4. To configure options for a class-based or object-based Interaction Launcher, under Component
Properties, update these properties:
• Tab Based Style: To display search widgets as tabs select this checkbox. By default, widgets stack
on top of each other.

company 1773
OmniStudio
Tabbed widgets.
Stacked widgets.
• Enable Scratchpad: To enable or disable the ability to take notes in the Verify Caller window, select
this checkbox.

company 1774
OmniStudio

company 1775
OmniStudio
5. To configure options for an OmniScript-based Interaction Launcher, under Component Properties,

update these properties:
• Select Layout: Select a lightning or newport theme.
• Max Height(px): Restrict the height and make the component scrollable when the content overflows.
• Scroll Offset: Update the position the OmniScript is scrolled up to when the user clicks the Next and
Previous buttons. Especially relevant when accounting for the page header.
• Custom Visualforce Page: Override the default Visualforce page that renders the layout.
• Disable Load In Page: Enable if you hit issues with the Salesforce view state size limit.
See Also
Create a Customer Interaction Record With DataRaptor

Create records once a customer interaction is complete by configuring a DataRaptor to run after users click
the Launch Console button. For example, you can create a new record from any object and populate data
collected from the interaction launcher into the record.
1. In your org, go to the Vlocity DataRaptor Designer and click New to create a new DataRaptor Load.
See Create a DataRaptor Load.
2. In the Create: Vlocity DataRaptor Bundle window, configure these properties:
• DataRaptor Bundle Name: In upper camel case, enter a name for the DataRaptor such as
CreateInteractionAccountDr. This name is used in the Interaction Creation Bundle Name
field in your Interaction Launcher widget.
• Interface Type: Select Load.
• Input Type: Select JSON.
• Output Type: Select SObject.
3. In the OBJECTS tab, click the +Add Object button to add an sObject. This is the object record an
Interaction Launcher creates at the end of an interaction. Find and select the
NS__CustomerInteraction__c object. Replace the NS variable with the namespace of the Vlocity
package you are using. For more information on finding the namespace of your package, see Viewing
the Namespace and Version of the Vlocity Package.
4. In the FIELDS tab, click the + link to add a field, from the Interaction Launcher, to populate the object:
• In the Input JSON path, enter recordId. This refers to the object record Id identified and verified in
the Interaction Launcher when the interaction is Object Based. See Create a Vlocity Interaction
Launcher.
• In the Domain Object Field, enter a field from the dropdown. This field is found on the object set in
the Input JSON path. For example, to populate the AccountId, select the NS__AccountId__c
object field.
5. To test your DataRaptor Load, in the PREVIEW tab:
• Enter JSON test data in the Input pane. For example, { "recordId":
"0013i000003eudKAAQ" }. Click the Execute button.
• In the Objects Created pane, a link to a new Customer Interaction record displays. Click on the link
to view the new record.

company 1776
OmniStudio
Add a Vlocity Action to an Interaction Launcher Search Widget

Add Vlocity Actions to a search widget in the Vlocity Interaction Launcher. For example, add an action to
the Search Results pane, or create a new Verify action by cloning an existing one.

company 1777
OmniStudio
An action added to the Search Results pane.
Before You
1. Confirm that the Vlocity Interaction Launcher Actions component is visible. See View Actions Related to an Interaction Launcher
Search Widget.
2. Create a Vlocity Action to execute from a search widget in the Interaction Launcher. See Vlocity Actions.

company 1778
OmniStudio
1. From the Vlocity Interaction Launcher tab, click an Interaction Launcher search widget to edit.
2. Click Related.
3. In the Vlocity Interaction Launcher Actions section, click New.

4. In the Name field, enter a visible name for the action, such as View Account.
5. (Optional) In the Vlocity Interaction Launcher field, update the search widget associated with the
action. By default, the current widget is selected.
6. (Optional) Enter a number in the Display Sequence field to indicate the sequence in which the action
gets displayed in the widget.
7. Click into the Vlocity Action field, and select the action to execute.
8. From the Applicable Condition dropdown, select when to display the action.
9. From the Action Type dropdown, select where to display the action. For example, select Launch to
perform the action on click of the Launch Console button after verification.
• Launch: Execute action on click of the Launch Console button after verification.
• ResultPane: Display action on the Search Results panel.
• SecondResultPane: Display action on secondary search results panel. See Configuring a
Secondary Search.
• VerificationPane: Display action on Verify Caller panel.
• VerifyAction: Execute action on click of the Verify button.
What's Next
Add the Interaction Launcher to a Console app. See Add the Vlocity Interaction Launcher to a Console App.
Set Up the Vlocity Interaction Console

With the Interaction Console, display a 360-degree view of a customer, including the authorized
transactions that a verified customer is allowed to complete. Create customer interactions from the
Interaction Console with the Vlocity Interaction Launcher. See Vlocity Interaction Launcher.

company 1779
OmniStudio
Install Console Cards

1. In your org, go to the Vlocity Cards tab by clicking the App Launcher, then clicking Vlocity Cards
under All Items.
2. Click the drop-down list to the right of the Import and select Install
CustomerInteractionConsoleCards or Install CustomerInteractionConsoleCards, depending on
which one is in your org, to import the Vlocity Cards, Vlocity Actions, UI Templates, and UI Layout used
with the Interaction Console. You can install both, if both are present.
3. Review the imported items and click Next. You are prompted that existing components will be
overwritten.
4. Unselect any component that you do not want to overwrite, confirm the items that you do want to
import, and click Next. If you find a component already in use that will be overwritten, and you want to
keep using that version, select Previous, go back to the previous window, and deselect it.
5. Click Next to start the import.
6. After import complete, activate the components by clicking Activate Later or Activate Now , then click
Done.
Update Account and Contact Objects

• Update the Account and Contact objects to display the InteractionFieldList.
a. Visit Setup > Object Manager and click to open an Account or Contact object.
b. Click Field Sets, then click InteractionFieldList.
c. Confirm that there are fields available in the In the Field Set list.
Configure Vlocity Actions ConsoleCards

1. Go to the Vlocity Actions tab and select the ConsoleCard action.
2. Depending on your Vlocity package type, do one of the following:
• For Vlocity Communications, Media, and Energy, add the following Target URL to create a static
card layout:
/apex/vlocity_cmt__InteractionConsoleCards?
id={0}&layout=Interaction_Assets
• For Vlocity Insurance , you can choose to set up a dynamic card layout that displays differently
based on the Account type.
What's Next
Create a Console app. See Building a Vlocity Service Console App.
See Also
Create a Class-based Interaction Launcher

Create a class-based interaction launcher, which uses an Apex class to get a search request and search
response. To create an object-based interaction launcher, see Create a Vlocity Interaction Launcher.

company 1780
OmniStudio
1. Create a global Apex class that implements, for example,

• vlocity_ins.VlocityOpenInterface
• OR
• vlocity_ins.VlocityOpenInterface2:
global with sharing class GetMockupSearchRequestResults implements

vlocity_ins.VlocityOpenInterface2
2. Include two methods:
a. getSearchRequest
b. getSearchResults
global Object invokeMethod(String methodName, Map < String, Object >

inputs, Map < String, Object > output, Map < String, Object > options {
Boolean success = true;

if (methodName == 'getSearchRequest') {
success = getSearchRequest(inputs, output, options);

}
if (methodName == 'getSearchResults') {
success = getSearchResults(inputs, output, options);

}
return success;
}
3. Then construct the vlocity_ins.LookupRequest interface:
vlocity_ins.LookupRequest request =
(vlocity_ins.LookupRequest) inputs.get('lookupRequest');
List<Map<String, Object>> previousSearchResults =

request.previousSearchResults;
Map<String, Object> additionalData = request.additionalData;
List<String> searchFieldList = request.searchFieldList;
searchFieldList.add('FirstName');
searchFieldList.add('LastName');
Map<String, Map<String, String>>labelTypeMap =

request.searchFieldsLabelTypeMap;
Map<String, String> newType1 = new Map<String, String> ();

company 1781
OmniStudio
newType1.put('label','First Name');
newType1.put('datatype','text');
labelTypeMap.put('FirstName',newType1);
Map<String, String> newType2 = new Map<String, String> ();
newType2.put('label','Last Name');
newType2.put('datatype','text');
labelTypeMap.put('LastName',newType2);
Map<String, Object> valueMap = request.searchValueMap;
valueMap.put('FirstName',null);
valueMap.put('LastName',null);
System.debug(' LookupRequest is '+request);
output.put('lookupRequest', request);
4. Construct the vlocity_ins.LookupResult interface (see example code below).
5. Create a Vlocity Interaction Launcher record.
6. Pick Class Based for the entry field Record Type:

company 1782
OmniStudio
7. Complete any pending information.

8. Insert the class created from step 1 (GetMockupSearchRequestResults) into the entry field Invoke
Class Name.
9. Launch the class-based interaction.
vlocity_ins.LookupResult Interface Example Code
List < String > contextIds = (List < String > ) inputs.get('contextIds');
String parentId = (String) inputs.get('parentId');
vlocity_ins.LookupRequest request =
(vlocity_ins.LookupRequest) inputs.get('lookupRequest');
String lastRecordId = request.lastRecordId; // R15 pagination support
Map < String, Object > resultInfo = (Map < String, Object > )
inputs.get('resultInfo');
Integer pageSize = 0; // R15 pagination support
Integer numRecords = 30; // R15 pagination support
// R15 pagination support
// get ClassBasedResultsPageSize from customSetting

company 1783
OmniStudio
vlocity_ins__InteractionLauncherConfiguration__c myCS =
vlocity_ins__InteractionLauncherConfiguration__c.getInstance('ClassBasedResults
PageSize');
if ((myCS != null) && (myCS.vlocity_ins__IsFeatureOn__c)) {
pageSize =
String.isNotBlank(myCS.vlocity_ins__DisplayMessage__c) ?
Integer.valueOf(myCS.vlocity_ins__DisplayMessage__c) : 10;
}
Boolean hasMore = false;
// End R15 pagination support
List < String > resultFieldList = new List < String > ();
resultFieldList.add('RelatedParty');
resultFieldList.add('Role');
List < String > verificationFieldList = new List < String > ();
verificationFieldList.add('PartyName');
verificationFieldList.add('Address');
List < String > optionalVerificationFieldList = new List < String > ();
optionalVerificationFieldList.add('Role');
optionalVerificationFieldList.add('RelatedParty');
Map < String, Map < String, String >> resultFieldsLabelTypeMap =
new Map < String, Map < String, String >> ();
Map < String, String > newType1 = new Map < String, String > ();
newType1.put('label', 'Related Party');
newType1.put('datatype', 'text');
resultFieldsLabelTypeMap.put('RelatedParty', newType1);
newType2.put('label', 'Role');
resultFieldsLabelTypeMap.put('Role', newType2);
newType3.put('label', 'Name');
resultFieldsLabelTypeMap.put('PartyName', newType3);
newType4.put('label', 'Address');
resultFieldsLabelTypeMap.put('Address', newType4);
Map < String, Object > verificationResult = new Map < String, Object > ();
String uniqueRequestName = (String) resultInfo.get('uniqueRequestName');
String drBundleName = (String) resultInfo.get('drBundleName');
String interactionObjName = (String) resultInfo.get('interactionObjName');

company 1784
OmniStudio
List < vlocity_ins.LookupResult > results = new List <

vlocity_ins.LookupResult > ();
if ((contextIds != null) && (contextIds.size() == 1) {
Map < String, Object > resultValueMap =

new Map < String, Object > ();
resultValueMap.put('RelatedParty', 'John Smith');
resultValueMap.put('Role', 'Carrier');
resultValueMap.put('PartyName', 'John Smith');
resultValueMap.put('Address', '50 Fremont, San Francisco, CA');
String recordId = 'ExternalId';
vlocity_ins.LookupResult result =
new vlocity_ins.LookupResul(resultFieldsLabelTypeMap, resultFieldList,
resultValueMap, recordId, uniqueRequestName, request, verificationResult,
verificationFieldList, drBundleName, interactionObjName);
result.setOptionalVerificationFieldList(optionalVerificationFieldList);
// R15 optional verification fields support
results.add(result);
}
else {
for (Integer k = 0; k < numRecords; k++) {
Map < String, Object > resultValueMap = new Map < String, Object > ();
resultValueMap.put('RelatedParty', 'John Smith' + String.valueOf(k));
resultValueMap.put('Role', 'Carrier');
resultValueMap.put('PartyName', 'John Smith' + String.valueOf(k));
resultValueMap.put('Address', '50 Fremont, San Francisco, CA');
String recordId = 'ExternalId' + String.valueOf(k);
vlocity_ins.LookupResult result =
new vlocity_ins.LookupResult(resultFieldsLabelTypeMap, resultFieldList,
resultValueMap, recordId, uniqueRequestName, request,
verificationResult, verificationFieldList, drBundleName,
interactionObjName);
result.setOptionalVerificationFieldList(optionalVerificationFieldList);
results.add(result);
}
}
if ((pageSize > 0) && (results.size() > pageSize)) {
List < vlocity_ins.LookupResult > resultSubSet =

new List < vlocity_ins.LookupResult > ();
// results.sort();

company 1785
OmniStudio
Integer startIndex = 0;
if (String.isNotBlank(lastRecordId)) {
for (Integer i = 0; i < results.size(); i++) {
if (results[i].recordId == lastRecordId) {
startIndex = i + 1;
}
}
}
Integer j = 0;
for (j = startIndex;
(j < results.size()) && (j < startIndex + pageSize); j++) {
resultSubset.add(results[j]);
}
if (j < results.size()) {
hasMore = true;
}
output.put('lookupResults', resultSubset);
if (hasMore) {
output.put('hasMore', hasMore);
}
// End R15 pagination support
}
else {
// Logger.db('GetExternalSearchRequestResults
// LookupResult is
// '+JSON.serializePretty(results));
output.put('lookupResults', results);
}
Create an OmniScript-Based Interaction Launcher

Create an OmniScript-based Interaction Launcher to enable an OmniScript to launch an Interaction
Launcher flow. Clone the sample OmniScript included with the Customer Interaction DataPack. See
Download and Install an Interaction Launcher DataPack.

company 1786
OmniStudio
Required Versions
Available beginning with the Vlocity Insurance and Health Winter '19.
Before You Begin

• You must install the Customer Interaction DataPack which has a sample OmniScript that must be customized to create and use
Customer Interaction records. The included OmniScript sample launches the Account record after verification. See Download and
Install an Interaction Launcher DataPack.
1. In your org, go to the Vlocity OmniScript Designer tab, and click to open the Interaction Launcher
OmniScript included in your Interaction Launcher Datapack. For example, AccountSearch.
2. Click Create Version.
3. With Script Configuration selected, in the Properties panel, leave Type as Interaction Launcher.
4. Update the SubType with a name that includes the name of the sObject, such as ContactSearch.
5. In the first OmniScript Step, update the search fields as needed. For example, if your new OmniScript
does a search for Cases, add case related fields, and update the Step name. See OmniScript Element
Reference.
6. Update the data source by changing the DataRaptor Interface name. See DataRaptor Extract Action.
7. (Optional) Customize additional elements and script configurations as needed.
8. Click Save.
9. Click Activate.
What's Next
Add your OmniScrupt-based Interaction Launcher to the Utility Bar of your Console app. See Add the
Vlocity Interaction Launcher to a Console App.
See Also
• Set Up the Vlocity Interaction Console
• Update the Layout of an Interaction Launcher
• Verify Caller Identity in an Interaction Launcher
Download and Install an Interaction Launcher DataPack

Download the VlocityInteractionLauncherSample DataPack, which contains DataRaptors, the Vlocity
Interaction Launcher, and Vlocity Actions. After installing, clone a component to easily configure your
Interaction Launcher. For example, instead of creating a new VerifyAction Vlocity Action without any
settings configured, clone one from the datapack and edit the settings as needed.
1. From Setup, in the Quick Find box, enter Static Resources.

2. Click the static resource from the available list.
• For Vlocity Insurance, click VlocityInteractionLauncherSample.
• For Vlocity Communications, Media, and Energy, click CustomerInteractionLauncherSample.
3. Click View File.
4. Copy all page content and paste it into a JSON viewer.
5. After previewing the code, click Save and select Save to disk.

company 1787
OmniStudio
6. After the file is saved, go to the Vlocity DataPacks tab and click Installed.
7. Click Import From and select From File.
8. Select the JSON file you saved and import the file in the Select File modal window. Alternatively, you
can drag and drop the DataPack JSON file onto the Select File modal window.
9. To activate the imported components, click Select All in the Select Items to Import modal window,
then click Next.
10. Review your selections in the Review Items to Import window, then click Next.
11. Activate your DataPack by clicking Activate Now. When prompted, click Next.
When activation completes, the following message is displayed.

company 1788
OmniStudio
Verify Caller Identity in an Interaction Launcher

Verify the identity of a caller in the Vlocity Interaction Launcher with the Verify Vlocity Action. Create a new
Vlocity Action or use the Verify action from the Customer Interaction Launcher datapack. See Download
and Install an Interaction Launcher DataPack.
Download and Install the Verify Action from the Interaction Launcher Sample
DataPack
• If not installed, download and install the Interaction Launcher sample datapack to install the Verify
Vlocity Action. See Download and Install an Interaction Launcher DataPack.
Create a New Verify Action
1. Clone the existing Verify action from the Interaction Launcher sample datapack.
a. Download and install the Verify action if it's not yet installed. See Download and Install an
Interaction Launcher DataPack.
b. Go to the Vlocity Actions tab in your org and click to open the Verify action.
c. Click Clone from the down arrow in the submenu.
d. Update Vlocity Actions Name.
e. Confirm that the Invocation Class Name is one from the table on this page.
f. Configure additional fields as needed. See Configure a Vlocity Action.

company 1789
OmniStudio
IMPORTANT
Link Type must be set to Verification.
g. Click Save.
2. Add the action to your search widget. See Add a Vlocity Action to an Interaction Launcher Search
Widget.
Required Invocation Class Name Options

When configuring the action, set the Invocation Class Name to one of the following classes:
• ActionProcessService creates an interaction record.

• InteractionActionProcessService creates interaction record and Interaction Topics for Policies.
• CustomInteractionActionProcessService creates interaction record and Interaction Topics for
Financial Accounts located in TSO.
• InteractionActionProcessService creates interaction record and Interaction Topics for Asset.

Add the Vlocity Interaction Launcher utility to a Lightning Console app. Call service agents use the
Interaction Launcher to search and verify the role of a caller. The console displays only the data and
transactions that the caller has permissions to see.
Before You Begin

• Create a Console app. See Building a Vlocity Service Console App. See Set Up the Vlocity Interaction Console.
1. From Setup in Lightning Experience, enter Apps in the Quick Find box, then select App Manager.
2. Click the dropdown next to the console app that to add Vlocity interaction launcher, and click Edit.
3. Under the Utility Items, click Add Utility Item.
4. To add a class-based or object-based Interaction Launcher, select Vlocity Interaction Launcher.
5. To add an OmniScript-based Interaction Launcher:
a. Select the Vlocity Ins OmniScript Interaction Launcher.

company 1790
OmniStudio
NOTE
To create an OmniScript-based Interaction Launcher, see Create an OmniScript-
Based Interaction Launcher.
b. In the Component Properties fields:

a. Select Interaction Launcher as Type.
b. Select the SubType of the OmniScript you wish to display, such as AccountSearch.
c. Click into the Language field, and select a language.
6. (Optional) To update the layout of your Interaction Launcher by configuring options, such as updating
the icon or enabling the scratchpad, see Update the Layout of an Interaction Launcher.
7. Click Save.

company 1791
OmniStudio
8. Click Done.
Accessing Actions and Manage Interactions with the Vlocity Interaction

Wrapper
Customer Interactions support accessing all available actions on a customer interaction and completing,
canceling, or resuming customer interactions with the Vlocity Interaction Wrapper component. To configure
Vlocity Actions available to the wrapper, see Configure a Vlocity Action.
Required Versions
Available beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20.
1. In your org, from the Setup menu on a record page, such as a Customer Interaction, select Edit Page.
NOTE
If you add an Interaction Wrapper to an Account or Contact page, the Interaction
Wrapper creates a Customer Interaction record through the Create Interaction
2. From the Lightning Components pane, find the Vlocity Interaction Wrapper component from the list
of Custom - Managed components and drag it to page canvas.
3. Click Save.
To perform actions related to the customer interaction:
• On a customer interaction record page, click in the search field of the Vlocity Interaction Wrapper
component, and from the list of actions, select an action to perform.

company 1792
OmniStudio
To manage the customer interaction:
1. On a customer interaction record page, click the red phone icon next to the search field.
2. To add a summary of the interaction, enter text in the Summary (optional) field.

company 1793
OmniStudio
3. In the Tasks Performed column, view the list of tracking events submitted during the interaction and
organized by object. See Cards Framework Event Tracking. To refresh the tracked events, click the
arrow button next to the Tasks Performed label.
Configure a Secondary Search in an Interaction Launcher

Configure the Vlocity Interaction Launcher to perform secondary searches determined by an initial search.
Enable the initial search widget to continue searching after verification and then specify the name of the
initial search in the secondary search widget.

company 1794
OmniStudio
Initial Search
Secondary Search
Example 25. Example

Before assisting a customer who needs to update information on their account, a customer service
representative must find the Account name, then a search by unique information such as Tax ID.
The initial search widget, called Account Name, does a search for an Account name and returns records
that match the name. If the representative finds the account, the representative then launches the second
search widget, called Account Information.
1. Go to the Vlocity Interaction Launcher tab in your org and click to open an initial search widget to use
as the widget that precedes the secondary search widget. Such as in the example on this page, if your
secondary widget is Account Information, open the Account Name widget.
2. To indicate that this widget has a secondary search, select the Continue Search.

company 1795
OmniStudio
3. Go to the Vlocity Interaction Launcher tab and open the widget that follows your initial search from
Step 1 and 2. Such as in the example on this page, if your initial search widget is Account Name,
open the Account Information widget.
4. In the Previous Search Widget Name field, enter the name of the initial search widget.
5. To provide the context for the secondary search, enter its ContextId in the Previous Search Context
Id Field. For example, enter %NS%__AccountId__c if your previous search widget's object is an
Account, such as in the Example on this page.
View Actions Related to an Interaction Launcher Search Widget

View Vlocity Actions associated with a Vlocity Interaction Launcher search widget. Actions associated with
the search widget are visible in the widget such as the default Verify and Launch actions, and any new
Vlocity Action you create and link to a widget.
Before You Begin

• Create an Interaction Launcher search widget. See Create a Vlocity Interaction Launcher.
1. From the Vlocity Interaction Launcher tab in your org, click a search widget to open.
2. Click the Related tab next to the Details tab.
NOTE
If you do not see a Related tab, see Add and Customize Tabs on Lightning Pages
Using the Lightning App Builder.
3. If a Vlocity Interaction Launcher Actions list does not exist, click Edit Page from the Setup menu.

company 1796
OmniStudio
a. Select the Related tab.

b. Drag the Related Lists component inside the Related tab.
c. Click Save.
d. To view the list of Vlocity Actions associated with your search widget, click Back, and click the
Related tab.
What's Next
Add Vlocity Actions to an Interaction Launcher search widget. See Add a Vlocity Action to an Interaction
Launcher Search Widget.

company 1797
OmniStudio
Vlocity Data Tools
Vlocity Data Tools enable you to read, write, transform, calculate, and track data in your org.
DataRaptors
A DataRaptor is a mapping tool that enables you to read, transform, and write Salesforce data. There are
four types of DataRaptor: Turbo Extract, Extract, Transform, and Load.
• Turbo Extract: Read data from a single Salesforce object type, with support for fields from related
objects. Then select the fields to include. Formulas and complex field mappings aren’t supported. See
DataRaptor Turbo Extract Overview.
• Extract: Read data from Salesforce objects and output JSON or XML with complex field mappings.
Formulas are supported. See DataRaptor Extract Overview.
• Transform: Perform intermediate data transformations without reading from or writing to Salesforce.
Formulas are supported. See DataRaptor Transform Overview.
• Load: Update Salesforce data from JSON or XML input. Formulas are supported. See DataRaptor Load
Overview.
DataRaptors typically supply data to OmniScripts, Integration Procedures, and Cards, and write updates
from OmniScripts, Integration Procedures, and Cards to Salesforce. A typical data flow is as follows:
1. OmniScript calls DataRaptor Extract to read data from Salesforce.

2. OmniScript interacts with user to capture changed and new data.
3. OmniScript calls DataRaptor Load to write data back to Salesforce.
Both Extract and Load DataRaptors can handle custom data formats. DataRaptors can access external
objects and custom metadata as well as sObjects. No special syntax or additional configuration is required.
NOTE
If you’re using releases of Vlocity before Winter 2017, download the DataRaptor Summer
'17 Manual.
NOTE
Although Apex classes can read, write, and transform data, they take longer to create and
are harder to maintain than DataRaptors. Therefore, use of DataRaptors is a best practice.

company 1798
OmniStudio
DataRaptor Turbo Extract Overview

A DataRaptor Turbo Extract retrieves data from a single Salesforce object type, with support for fields from
related objects. You can filter the data and select the fields to return. Unlike a standard DataRaptor Extract,
a DataRaptor Turbo Extract doesn't support formulas. There’s no Output tab, so you can't use mappings to
structure the output. Custom JSON, default values, attributes, and translations aren't supported.
A DataRaptor Turbo Extract has two advantages over a standard DataRaptor Extract:
• Simpler configuration
• Better performance at runtime
Create a DataRaptor Turbo Extract

To create a DataRaptor Turbo Extract, specify its name, input and output types, and permissions.
1. Go to the DataRaptor Designer tab and click New. The Create DataRaptor Interface dialog is
displayed.
2. Specify configuration settings as follows:
• DataRaptor Interface Name: Descriptive name, displayed on the DataRaptor Designer tab's list of
DataRaptors.
• Interface Type: Turbo Extract
• Input Type: JSON (for OmniScripts), XML, or Custom
• Output Type: JSON (for OmniScripts) or Custom
• Required Permission (Optional): Specifies an optional comma-separated list of Custom
Permission names. To run this DataRaptor, a user must have one of these permissions. If this setting
is blank, any user can run this DataRaptor unless a DefaultRequiredPermission is set.
If specified, this setting overrides the DefaultRequiredPermission setting, which provides a default if
no Required Permissions value is set. See Security for DataRaptors and Integration Procedures.
Custom Permissions for users are defined in Salesforce Profiles or Permission Sets. For Vlocity-
specific information about Profiles, see Overview of Profiles and Security for Vlocity.
• Description: Optional high-level overview of the DataRaptor.
3. Click Save. The designer page is displayed.
Configure a DataRaptor Turbo Extract

To configure a DataRaptor Turbo Extract, specify the object type, filters, fields to extract, and options.
1. On the Extract tab, in the topmost field, select the source Salesforce object type, for example, Contact.
2. In the next field, specify the Extract Output Path.
This value is typically the same as the source object name. It specifies the top-level JSON node in the
output.
3. Specify at least one Filter, which determines the data to be read. The item on the left is a field of the
source object type. The item in the middle is a comparison operator. The item on the right can be a
quoted literal value, an input parameter, or another field of the same source object. To filter for null
values, use the $Vlocity.NULL variable.
You can use fields in related objects in filters, such as Parent.Name, but you have to enter them
manually. For details about the notation, see Relationship Notation versus Multiple Extract Steps.

company 1799
OmniStudio
The most basic filter is Id = Id, which sets the Id of the object to an input parameter named Id.
The INCLUDES and EXCLUDES operators apply only to multi-select picklist fields. See Querying
Multi-Select Picklists in Salesforce Help.
Turbo extracts have an operator option no other DataRaptors have: IN. The IN operator lets you match
values to items in an array. For example, if the filter is Name IN Names, and the JSON input is
{"Names": ["Miller", "Torres"]}, records with Miller or Torres in their Name fields are
retrieved. To download a DataPack of this example, click here.
4. Configure optional additional filter settings by clicking the down arrow to the right of the first filter:
• AND - Add another filter and specify that both filters must be true.
• OR - Add another filter and specify that either filter can be true.
• LIMIT - Specify the maximum number of records returned. Allowed values are 1 through 2000.
For more information, see Workaround for offset 2000 limit on SOQL query in the Salesforce
knowledge base.
• OFFSET - Use with LIMIT to specify the first record on a page in a multi-page retrieval. For example,
a LIMIT of 5 requires OFFSET values of 0, 5, 10, and so on.
• ORDER BY - Sort the results by the specified field. To sort by multiple fields, specify a comma-
separated list of field names in order of precedence, for example LastName,FirstName.
You can optionally specify ASC or DESC for an ascending or descending sort. You can optionally
specify NULLS FIRST or NULLS LAST to place blank values at the beginning or end. For example,
you can sort Accounts by the number of employees, listing the companies of unknown size first and
the largest employers last. Specify the ORDER BY value NumberOfEmployees ASC NULLS
FIRST.
5. Select the fields to extract by moving them from the left list to the right list. You can enter a search
value to filter the left list. The Id field is always included in the output.
To select fields in related objects, see the next section.
6. Configure optional additional settings on the Options tab:
• Check Field Level Security: Checks the user's access permissions for the fields before executing
the DataRaptor. Enabling this setting disables the Org Cache but not the Session Cache.
• Time To Live In Minutes: If data caching is enabled, determines how long data remains in the
cache. The minimum value is 5.
• Salesforce Platform Cache Type: Enables data caching. Set to Session Cache for data related to
users and their login sessions, or to Org Cache for all other types of data. See Cache for
7. To observe the effects of caching when testing the DataRaptor Turbo Extract, go to the Preview tab
and deselect the Ignore Cache checkbox. See Cache for DataRaptors and Integration Procedures.
Related Object Fields in DataRaptor Turbo Extracts

Although a DataRaptor Turbo Extract retrieves from a single object type, you can select specific fields in
related objects.
For more information about relationship names and other relevant topics, see Relationship Queries in
Salesforce Help. DataRaptors support only child-to-parent relationship queries.
When you click the Related Objects dropdown list, relationships to other objects appear, for example:

company 1800
OmniStudio
If you select one of those relationships and click the list again, second-level relationships to other objects
appear, for example:
You can traverse up to five relationship levels.
To back up a level, click the list and select the previous level, for example:

company 1801
OmniStudio
After you’ve selected a relationship with another object, fields in that object appear in the left field-selection
list. You can enter a search value and move the fields to the right list as you would the base object fields.
Test a DataRaptor Turbo Extract

You can test the input and output of a DataRaptor Turbo Extract on the Preview tab.
1. Go to the Preview tab.

2. Specify Key/Value pairs in the Input Parameters panel.
As an alternative, you can click Edit as JSON and specify the input in JSON format.
3. To observe the effects of caching when testing the DataRaptor Turbo Extract, deselect the Ignore
Cache checkbox. See Cache for DataRaptors and Integration Procedures.
4. Click Execute.
The Response panel displays the resulting data, and the Debug Log panel displays the results of the
Salesforce queries issued by the DataRaptor.
For example, if the DataRaptor filters Accounts based on an Id, a Key/Value pair like this lets you test the
DataRaptor using a specific Account Id.
Create a DataRaptor Turbo Extract Example

A DataRaptor Turbo Extract retrieves Contacts for an Account having the specified Id.
To download a DataPack of this example, click here.
To create this example:

company 1802
OmniStudio
1. On the DataRaptor Designer tab, click New.

2. Specify a DataRaptor Interface Name.
3. Specify an Interface Type of Turbo Extract.
4. Click Save. The designer page is displayed.

5. Specify Contact as the Salesforce object and the Extract Output Path.
6. For the Filter, specify AccountId = AccountId.
7. Enter Name in the search field, and move FirstName and LastName to the right list.

company 1803
OmniStudio
8. Go to the Preview tab. If you see an Edit as Params link, click it.
9. Click Add New Key/Value Pair. Specify AccountId as the Key and an Account Id from your org as
the Value.
10. Click Execute. Note that FirstName, LastName, and Id are retrieved for each Contact.
DataRaptor Extract Overview

DataRaptor Extracts read Salesforce data and return results in JSON, XML, or custom formats. You can
filter the data and select the fields to return. Formulas, attributes, default values, and translations are
supported. Extracts typically provide OmniScripts, Integration Procedures, and Cards with the data they
require.
To define a DataRaptor extract:
1. Create the DataRaptor extract. See Creating a DataRaptor Extract

2. Configure the initial extraction. See Define the Initial Extraction.

company 1804
OmniStudio
3. Determine whether you need multiple extract steps or relationship notation. See When to Use Multiple
Extract Steps and Relationship Notation versus Multiple Extract Steps.
4. (Optional) Add data using formulas. See Use Formulas in DataRaptors.
5. Compose the output. See Defining the Output of an Extract.
6. Test the DataRaptor. See Test a DataRaptor Extract.
Create a DataRaptor Extract

To create a DataRaptor Extract, specify its name, input and output types, and permissions.
1. Go to the DataRaptor Designer tab and click New. The Create: DataRaptor Interface dialog is
displayed.
2. Specify configuration settings:
DataRaptors.
• Interface Type: Extract
• Input Type: JSON (for OmniScripts), XML or Custom
• Output Type: JSON (for OmniScripts), XML or Custom
• Required Permission: Specifies an optional comma-separated list of Custom Permission names. To
run this DataRaptor, a user must have one of these permissions. If this setting is blank, any user can
run this DataRaptor unless a DefaultRequiredPermission is set.
When an Integration Procedure calls a DataRaptor, the Required Permission setting of the
Integration Procedure overrides the Required Permission setting of the DataRaptor.
3. Click Save. The Extract tab of the designer page is displayed.
What's Next
Define the Initial Extraction
Define the Initial Extraction

On the Extract tab, you specify the Salesforce objects to be queried and the filters that determine the data
to be returned from the object. You can also specify a limit and offset for paging or a field on which to sort.
For each source object:
1. Click Add Extract Step and choose the source object from the drop-down list of objects.
2. Configure settings for the source object:
• Extract Output Path: The top-level node in the extraction step JSON where you want the data to
reside.
Best practice: When possible, name the Extract Output Path for the Salesforce object that is its
data source. This defines the first node of the Extract JSON Path field values on the Output tab.
• Filter: The comparison used to determine what data is to be read. The item on the left is a field of
the source object. The item in the middle is a comparison operator. The item on the right can be a

company 1805
OmniStudio
quoted literal value, an input parameter, another field of the same source object, or a field of a
source object in a previous extract step. To filter for null values, use the $Vlocity.NULL variable.
You can use fields in related objects in filters, such as Parent.Name, but you have to enter them
manually. For details about the notation, see Relationship Notation versus Multiple Extract Steps.
The most basic filter is Id = Id, which sets the Id of the object to an input parameter named Id.
The INCLUDES and EXCLUDES operators apply only to multi-select picklist fields. See Querying
Multi-Select Picklists in the Salesforce help.
3. Configure optional additional filter settings by clicking the down arrow to the right of the first filter:
• AND: Add an additional filter and specify that both filters must be true.
• OR: Add an additional filter and specify that either filter can be true.
• LIMIT: Specify the maximum number of records returned. Allowed values are 1 to 2000.
For more information, see Workaround for offset 2000 limit on SOQL query in the Salesforce
knowledge base.
• OFFSET: Use with LIMIT to specify the first record on a page in a multi-page retrieval. For example,
if the LIMIT is 5, the OFFSET values for successive pages would be 0, 5, 10, and so on.
• ORDER BY: Sort the results by the specified field. To sort by multiple fields, specify a comma-
separated list of field names in order of precedence, for example LastName,FirstName.
You can optionally specify ASC or DESC for an ascending or descending sort. You can optionally
specify NULLS FIRST or NULLS LAST to place blank values at the beginning or end. For example,
to sort Accounts by the number of employees, listing the companies of unknown size first and the
largest employers last, specify the ORDER BY value NumberOfEmployees ASC NULLS FIRST.
NOTE
If you need to implement paging logic for your application, you can use the filter
OFFSET setting to specify where record retrieval starts. Choose OFFSET from the
drop-down list and specify the name of a node in the input payload where the caller
maintains the offset. The offset must be an integer. Note that Salesforce imposes a
2000-record limit on queries. For details, see the Salesforce OFFSET documentation.
What's Next
When to Use Multiple Extract Steps
When to Use Multiple Extract Steps

How many extract steps you need depends on how the object types you are extracting from are related.
There are three basic scenarios: single, single with relationship notation, and multiple.
1. Extracting data from a single object type, for example, Cases, requires only one extract step.
2. Extracting data from a primary object and one or more parent objects also requires only one extract
step. An example is extracting Cases with some Account data for each Case. See Relationship
Notation versus Multiple Extract Steps.
3. Extracting data from a primary object and one or more child objects requires at least two extract steps,
one for each object type. An example is extracting an Account and all the Cases associated with that
Account.

company 1806
OmniStudio
For example, to find Cases by Case Number, you can use a filter such as CaseNumber = Number in the
extract step:
The objects are queried in the order that you specify them in extract steps, which is important for the third
scenario, when you need to use data from a previously-read object to filter a subsequent object.
For example, to find all the cases associated with a specific account, you can read the account with a basic
filter such as Id = Id in the first extract step, then read the cases with a filter such as AccountId = Acct:Id in
the second extract step. (The AccountId is a Case field; the Acct:Id is a reference to the Id field of the
Account.)
This data is read into the extraction step JSON, and the Extract Step JSON pane on the right shows the
top-level hierarchy defined by the output paths that you specify on this tab.
By default, if a value is null, no node is created for the field in the output JSON. To ensure that a node is
created, regardless of whether the field is null, go to the Options tab and check Overwrite Target For All
Null Inputs.

company 1807
OmniStudio
What's Next
Relationship Notation versus Multiple Extract Steps
Relationship Notation versus Multiple Extract Steps

Using relationship notation improves the performance of DataRaptors that retrieve data from a parent of the
primary sObject. You use this notation in the Extract JSON Paths for the parent sObject's fields instead of
adding a second sObject in the DataRaptor's Extract tab. Two examples illustrate how to use relationship
notation.
Relationship notation in DataRaptors is based on relationship queries in Salesforce. For more information
about relationship names and other relevant topics, see Relationship Queries in the Salesforce help.
DataRaptors support only child-to-parent relationship queries.
Suppose you want to retrieve Contact data that includes the name of the Account with which the Contact is
associated. (Account is a parent object of Contact.) You can use multiple extract steps or relationship
notation.
To use multiple extract steps, first define extraction steps for Contact and Account objects on the
DataRaptor's Extract tab.
Then define Extract JSON Paths for the Contact and Account fields on the DataRaptor's Output tab.

company 1808
OmniStudio
To use relationship notation, first define an extraction step for the Contact object on the DataRaptor's
Extract tab.
Then Define Extract JSON Paths for the Contact and Account fields on the DataRaptor's Output tab.
To download DataPacks of these examples, click here for the first and here for the second.
Note that the Extract JSON Path for the Name field of the Account object is Account.Name. Account is
the name of the relationship that the Contact object has with the parent Account object. The relationship
name is different from the name of the field that references the parent object, which is AccountId. Most
relationship names for standard objects follow this convention and omit the Id suffix.
If you supply a Contact Id on the Preview tab, you get the same Response for that Contact for both
DataRaptors:

company 1809
OmniStudio
{
"CompanyName": "Acme",
"LastName": "Tomlin",
"FirstName": "Leanne"
}
However, if you look in the Debug Log, you see two SOQL queries for the DataRaptor that uses multiple
extract steps:
SELECT id, accountid, firstname, lastname, name FROM Contact WHERE (Id =
'0031U00000HUob9QAD')
SELECT id, name FROM Account WHERE (Id = '0011U00000KbYZAQA3')
You see only one SOQL query for the DataRaptor that uses relationship notation:
SELECT id, firstname, lastname, account.name FROM Contact WHERE (Id =

'0031U00000HUob9QAD')
IMPORTANT
Running only one SOQL query per primary object is always noticeably faster than running
two. A DataRaptor performs processing steps for each SOQL query that it runs, and
Salesforce contributes overhead for each SOQL query as well. With one query rather than
two, you have half the overhead.
What's Next
Defining the Output of a DataRaptor Extract
DataRaptor Extract Output

To map data from the extraction step JSON to the output JSON, go to the Output tab. You can also handle
null values, attributes, translations, field-level permissions, caching, and list transforms.
1. Click +. An empty mapping is added to the list.

2. In the Extract JSON Path field, choose the source field from the extraction step JSON.
3. In the Output JSON Path field, specify the desired output path.
The Current JSON Output pane displays the structure that your output mappings specify.
Best practice: When possible, name the Extract Output Path on the Extract tab for the Salesforce object
that is its data source. This defines the first node of the Extract JSON Path field values.
You can improve DataRaptor performance for some use cases by using relationship notation in the Extract
JSON Path field. See Relationship Notation versus Multiple Extract Steps.

company 1810
OmniStudio
You can also use formulas to add output data. For details, see Use Formulas in DataRaptors and Function
Reference.
Quick Match for Output Maps
TIP
To make mapping a large number of fields easier, paste the data JSON from the calling
OmniScript or Integration Procedure into the Expected JSON Output pane, which
populates the list of paths in the Output JSON Path field.
To bulk-match, click the Quick Match button. In the Quick Match dialog, you can map fields as follows:
• Drag and drop: Drag the source sObject field from the left column to the target output field in the middle
column, or vice-versa. For an output that has no source sObject field, drag the output mapping to the
Matched Mappings column.
• Pair: Select an input field and an output field and click Pair.
• Auto Match: Click Auto Match. Fields with matching names are matched automatically.
Mappings are displayed in the right-hand Matched Mappings column.
To redefine values after they are read from Salesforce, go to the Transform Map Values section and add
key/value pairs that specify the input and output values. For example, to transform an input value of TRUE
to an output value of Y (for yes), specify KEY = TRUE and VALUE = Y.
Null Values
To specify a value to be output when the field is null, set the Default Value property. To override the default
data type, specify Output Data Type. To prevent data loss, choose compatible data types. (For example, if
a text value always contains numeric data, a numeric output type is fine. If it might contain alphabetic
characters, you must choose a textual output data type.
Null Inputs.
If the DataRaptor Extract retrieves no records, what it returns depends on the release:
• In Summer '18 and prior releases, null is returned.

• In Fall '18 and later releases, empty JSON, {}, is returned.
Object Attributes
To map object attributes, specify the attribute using its code (not its name) preceded by @. (By default,
attribute codes are assigned a GUID value when the attribute is created, and you can edit the code to

company 1811
OmniStudio
specify a human-readable value.) For example, to find out if an account is tagged as a Gold Star account,
use a DataRaptor Extract to read the Gold Star attribute:
Result:
{
"Id": "0016100001Ey84KAAR",
"GoldStarAccount": "On"
}
By default, an On-Off type attribute returns no output if its value is Off. However, you set the Default Value
property to Off to return either value.
If you need a different output value for an attribute, you can use the Transform Map Values option. For
example, for an On-Off type attribute, you can add key/value pairs that map On to true and Off to false.
JSON Data in Fields

Some fields contain JSON data. To map this data, use standard notation in the Extract JSON Path, for
example:
Object:JsonField__c:JsonNode:ChildJsonNode
Translations
To configure the DataRaptor to retrieve translated Product data, go to the Options tab and check Use
Translations. When this option is enabled, the DataRaptor returns string translations for the user's locale.
If no string translations are defined for the locale, the product data defined in the base language is returned.
For example, if the base product data is entered in English and no French string translations are defined,
users with a French locale see English product data. To specify string translations for product fields, go to
the Vlocity Product Console.
Permissions, Caching, and Other Options

You can configure additional optional settings on the Options tab:
• Check Field Level Security: Checks the user's access permissions for the fields before executing the
DataRaptor. Enabling this setting disables the Org Cache but not the Session Cache.
• Overwrite Target For All Null Inputs: Ensures that an output node is created regardless of whether a
field is null.

company 1812
OmniStudio
• Use Translations: Configures a DataRaptor to retrieve translated Product data.

• Time To Live In Minutes: If data caching is enabled, determines how long data remains in the cache.
The minimum value is 5.
users and their login sessions, or to Org Cache for all other types of data. See Cache for DataRaptors
and Integration Procedures.
List Maps
To map data into a list in the output, use the following syntax: listname|#
The listname specifies the key of the output node and the # specifies the position in the list where the
output resides. Note the pipe (|) symbol separator. The following example illustrates how to map a flat set
of input nodes to an output list.
Input JSON Mappings Output JSON

{ Thing1 中 Thinglist|1 {
"Thing1": "1", Thing2 中 Thinglist|2 "Thinglist":
"Thing2": "2", Thing3 中 Thinglist|3 [ "1", "2", "3" ]
"Thing3": "3" }
}
For more about lists in DataRaptors, see List Input for DataRaptors.
What's Next
Test a DataRaptor Extract
Test a DataRaptor Extract

You can test the input and output of a DataRaptor Extract on the Preview tab.

2. Specify Key/Value pairs in the Input Parameters panel.
As an alternative, you can click Edit as JSON and specify the input in JSON format.
3. To observe the effects of caching when testing the DataRaptor Extract, deselect the Ignore Cache
checkbox. See Cache for DataRaptors and Integration Procedures.
4. Click Execute.
The Response panel displays the resulting data, and the Debug Log panel displays the results of the
Salesforce queries issued by the DataRaptor.
For example, if the DataRaptor filters Accounts based on an Id provided by an OmniScript, a Key/Value pair
such as the following enables you to test the DataRaptor using a specific Account Id.

company 1813
OmniStudio
DataRaptor Extract Examples

DataRaptor Extract examples demonstrate object relationships, paging with data values, paging with
offsets, working with attributes, and relationship notation.
For additional examples that show how you can improve DataRaptor performance for some use cases
using relationship notation, see Relationship Notation versus Multiple Extract Steps.
Create a Basic DataRaptor Extract Example

A DataRaptor extract accepts an account Id parameter and returns the account name.
1. On the Extract tab, click Add Extract Step.

2. From the list of Salesforce objects, choose Account.
3. Set the Extract Output Path to Account and the filter to Id = InputId.
4. On the Output tab, click +.
5. Set Extract JSON Path to Account:Name.
6. Set Output JSON Path to Account:Name.
8. In the Input Parameters pane, click Add New Key/Value Pair.
9. Set Key to InputId and Value to a valid Salesforce Account object Id (which looks like this:
0016100001OBpRi)
10. Click Execute.
11. Verify that the Response pane displays a JSON structure containing the desired output. For example:
{
"Account": {
"Name" "Smith Incorporated"
}
}
Extract Data from Three Related Objects

Create a DataRaptor Extract for use by a case-handling OmniScript. The agents who handle cases need to
look up a case using the case number, and to be able to view the name of the account, the description of
the case, and all the contacts for the account.
To support the case-handling OmniScript, the DataRaptor Extract must return a JSON composed of case
details at the top level, and a list of contacts, for example:

company 1814
OmniStudio
To create this DataRaptor Extract:
1. Go the DataRaptor Designer tab and click New. The Create dialog is displayed.
2. Specify a name for the DataRaptor and configure its settings as follows:
• Output Type: JSON
3. Click Save. The DataRaptor Interface page is displayed.
4. On the Extract tab, add three extract steps with the settings shown in the following figure.

company 1815
OmniStudio
5. On the Output tab, map fields from the Extraction Step JSON to the Output JSON. To add a mapping,
click the + button. Add the mappings listed in the following table.
Extract JSON Field Path JSON Output Path

Case:Description Description
Case:CaseNumber CaseNumber
Case:AccountId AccountId
Case:Account:Name AccountName
Case:Account:Contacts:Phone Contacts:ContactPhone
Case:Account:Contacts:Name Contacts:ContactName
6. Verify that the structure displayed in the Current JSON Output panel looks like the following. The order
of fields in not important, but the structure is: you are defining a set of top-level nodes for case data,
one of which is a list of contacts.

company 1816
OmniStudio
7. To add an Age field to the Contact data, go to the Formulas tab, click Add Formula. In the Formula
field, add AGE(Case:Account:Contacts:Birthdate). In the Formula Result Path field, add
Contacts:Age.
8. On the Output tab, click the + button and add a mapping with both the Extract JSON Field Path and
JSON Output Path fields set to Contacts:Age.
9. To verify that you have mapped the formula correctly, go to the Output tab and verify that the Age field
is displayed in the Current JSON Output pane as shown below.
10. If you see an Edit as Params link, click it.

11. In the Input Parameters pane, specify a Key of Number and a Value of a CaseNumber such as
00002437. Cases are listed by number on the Cases tab.
12. Click Execute. Assuming the Case has a valid description and is associated with a valid Account that
has multiple Contacts who have Birthdate values, the response looks like the following:

company 1817
OmniStudio
Page Through Sorted Data Using Data Values

If a DataRaptor Extract is expected to retrieve a lot of records, you can use paging to retrieve a few at a
time based on field values. For example, you can page through Accounts by Id.
To set up paging based on field values:
• Use the ORDER BY setting to sort the data based on a specific field.
• Use the LIMIT setting to specify how many records to retrieve at a time.
• After retrieving each set of records, use the sort field value from the last record retrieved to retrieve the
next set.

company 1818
OmniStudio
4. On the Extract tab, specify Account as the object and Id > lastAccountId as the filter. Use the
down arrow on the right to add Id as the ORDER BY field and a LIMIT value of 2.
5. On the Output tab, map the Id and Name fields as shown.
7. In the Input Parameters pane, click Add New Key/Value Pair. Enter lastAccountId as the Key and
001000000000000 as the Value. Click Execute.

company 1819
OmniStudio
The first page of Account records is retrieved.

8. Copy the Id value from the second record in the Response to the Value field in the Input Parameters
pane, then click Execute again.
The second page of Account records is retrieved. Repeat this step to retrieve the next page.
Page Through Sorted Data Using Offsets

If a DataRaptor Extract is expected to retrieve a lot of records, you can use paging to retrieve a few at a
time based on OFFSET values. For example, you can page through Contacts by last name.
To set up paging based on OFFSET values:
• Use the LIMIT setting to specify how many records to retrieve at a time.
• Use the OFFSET setting to specify a multiple of the LIMIT value.
• Optional but recommended for predictable results: use the ORDER BY setting to sort the data based on
a specific field.

company 1820
OmniStudio
4. On the Extract tab, specify Contact as the object and DoNotCall = "false" as the filter. Use the
down arrow on the right to add LastName as the ORDER BY field, a LIMIT value of 3, and an OFFSET
value of AfterRecord.
5. On the Output tab, map the name and phone fields as shown.
7. In the Input Parameters pane, click Add New Key/Value Pair. Enter AfterRecord as the Key and 0
(zero) as the Value. Click Execute.

company 1821
OmniStudio
The first page of Contact records is retrieved.

8. Change the AfterRecord value to 3 and click Execute again.

company 1822
OmniStudio
The second page of Contact records is retrieved. Repeat this step, incrementing the AfterRecord
value by 3 each time, to retrieve the remaining pages.
Extract Account Attribute Data

A DataRaptor accepts an Account Id and returns Profile Attribute values for that Account.
Before you create this example, create and run the Account Attribute example in DataRaptor Load
Examples.
4. On the Extract tab, specify Account as the object and Extract Output Path, and Id = Id as the
filter.

company 1823
OmniStudio
5. On the Output tab, click the + icon and add the following mappings:
Extract JSON Path Output JSON Path Other Settings

Account:Id Id
Account:@GoldStarAcct GoldStarAcct Output Data Type: String
Default Value: Off

Account:@NumberOfStars NumberOfStars Output Data Type: Integer
7. In the Input Parameters pane, click Add New Key/Value Pair. Enter Id as the Key and an Account Id
from your org as the Value. Click Execute.
8. Verify that the Response pane displays a JSON structure containing the desired output. For example:
{
"Id": "0014N00001goyP8QAI",
"GoldStarAcct": "On",
"NumberOfStars": 5
}
Extract Multiple Relationship Levels and Custom Field Values

Suppose you want to retrieve Contract data that includes the Version (parent) and the name of the user
(grandparent) who created the Contract. You can use relationship notation with custom fields.
You can traverse up to five levels of relationships using relationship notation. For example, the syntax for
going up two levels is parent.grandparent.field, and for three levels, parent.grandparent.great-
grandparent.field.
For custom fields, the relationship name matches the name of the field that references the parent object,
except that the relationship name ends with __r instead of __c.
To use relationship notation:
1. Define an extraction step for the Contract object on the DataRaptor's Extract tab as follows:
2. Define Extract JSON Paths for the Contract Number, Active Contract Version Name, and Created By
Name fields on the DataRaptor's Output tab as follows:

company 1824
OmniStudio
Note that the Extract JSON Path for the Name field of the vlocity_cmt__ContractVersion__c object is
vlocity_cmt__ActiveContractVersionId__r.Name. The name of the relationship that the
Contract object has with the parent vlocity_cmt__ContractVersion__c object is
vlocity_cmt__ActiveContractVersionId__r. The second-level relationship name is
CreatedBy. Depending on your industry, the namespace might be vlocity_cmt, vlocity_ins, or
vlocity_ps.
3. Supply a Contract Number on the Preview tab. You get a Response such as this one:
{
"Creator": "Vlocity Admin",
"Version": "Version 1",
"Number": "00000105"
}
4. See the SOQL query in the Debug Log. It looks like this:
SELECT id, contractnumber, vlocity_cmt__activecontractversionid__r.name,

vlocity_cmt__activecontractversionid__r.createdby.name FROM Contract WHERE
(ContractNumber = '00000105')
Extract from Multiple Related Custom Objects

Although relationship notation is different for standard and custom fields, it is exactly the same for standard
and custom objects. This example extracts data from three custom fields of the
vlocity_cmt__CatalogProductRelationship__c SObject.
To use relationship notation:
1. On the DataRaptor's Extract tab, define an extraction step for the

vlocity_cmt__CatalogProductRelationship__c object. Filter on the vlocity_cmt__CatalogId__c field as
follows:

company 1825
OmniStudio
Note that you can use the Extract Output Path to shorten the object name for mapping.
2. Define Extract JSON Paths for the Catalog Name, Product Name, and Promotion Name fields on the
DataRaptor's Output tab as follows:
For these custom fields, the relationship names are the same as the field names except that the suffix
is __r instead of __c.
3. Supply a CatalogId on the Preview tab. You get a Response such as this one:
[
{
"PromotionName": "Two for One",
"CatalogName": "Phones"
},
{
"ProductName": "Samsung Galaxy S8 Active",
},
{
"PromotionName": "Free Case",
},
{
"ProductName": "Apple iPhone X",
}
]

company 1826
OmniStudio
4. See the SOQL query in the Debug Log. It looks like this:
SELECT id,vlocity_cmt__catalogid__c, vlocity_cmt__catalogid__r.name,

vlocity_cmt__product2id__r.name, vlocity_cmt__promotionid__r.name FROM
vlocity_cmt__CatalogProductRelationship__c WHERE
(vlocity_cmt__CatalogId__c =
'a0c6g000000Q2XcAAK')
DataRaptor Transform Overview

DataRaptor Transforms let you perform intermediate data transformations without reading from or writing to
Salesforce. Formulas are supported.
• Convert JSON input to XML output, and vice versa

• Restructure input data and rename fields
• Substitute values in fields (all DataRaptors can substitute values)
• Convert data to PDF, DocuSign, or Document Template format
DataRaptor Transforms are essential for OmniScripts that must populate a DocuSign template (see
Creating a DataRaptor Interface to Map an OmniScript to DocuSign ) or fill fields in a PDF document (see
Creating a DataRaptor Interface to Map an OmniScript to a PDF).
You can also transform data in many ways using Set Values components in Integration Procedures. See
Set Values.
Create a DataRaptor Transform

To create a DataRaptor Transform, specify its name, input and output types, and permissions.
1. Go to the DataRaptor Designer tab and click New. The Create: DataRaptor Interface dialog is
displayed.
2. Specify configuration settings as follows:
DataRaptors.
• Input Type: JSON (for OmniScripts), XML or Custom
• Output Type: JSON (for OmniScripts), XML, PDF, DocuSign, Document Template, or Custom

company 1827
OmniStudio
3. Click Save. The Transforms tab of the designer page is displayed.
What's Next
DataRaptor Transform Data Mappings
DataRaptor Transform Data Mappings

To map data from the input to the output, go to the Output tab. You can also handle null values, data types,
caching, and list transforms.
You can map data on the Transforms tab in one of two ways:
• If the input and output names match, Use Quick Match to Map Data.
• Specify each mapping individually.
Both ways apply to JSON input and output and to other input and output types.
To specify individual mappings:
1. Click +. An empty mapping is added to the list.

2. In the Input JSON Path field, specify the input path.
3. In the Output JSON Path field, specify the desired output path.
Use colons to separate path levels, for example Contact:LastName.
Restructure and Rename Data

All types of DataRaptors can restructure data and rename fields using mappings. To restructure and/or
rename a field, you map the input path to the desired output path.
The following example shows JSON input being mapped to XML output. All incoming fields are renamed.
The incoming top case fields, which are all top-level fields, are reparented under an XML node named
XCASEDETAILS. The list of contacts is unchanged. Note the difference between the representation of a list
in JSON and in XML. For details about converting between JSON and XML, see XML in DataRaptors.
For the PDF, DocuSign, and Document Template output types, output mappings are generated based on
the fields in the Target Output file you selected when you created the DataRaptor Transform.

company 1828
OmniStudio
Null Inputs.
Map Input Values to Output Values

To verify that your mappings create the desired structure, go to the Preview tab, paste sample input into the
Input pane on the left side of the screen, and click Execute. The results are displayed in the Response
pane.
To replace one value with another, open the mapping and create entries in the Transform Map Values list.
For example, if the incoming field contains TRUE or FALSE and your OmniScript requires a Y or N value,
create the following entries:
Change Output Data Types

On the Output tab, you can specify the data type of the output data. If you change the type, be sure to
choose a compatible output type. (For example, changing a numeric type to a string is fine, but changing a
string to a numeric is risky, because a string can contain non-numeric characters.) See DataRaptor Output
Data Types.
Cache Data
You can configure optional caching settings on the Options tab:
• Time To Live In Minutes: If data caching is enabled, determines how long data remains in the cache.
The minimum value is 5.
users and their login sessions, or to Org Cache for all other types of data. See Cache for DataRaptors
What's Next
Test a DataRaptor Transform
Use Quick Match to Map Data

Quick Match is a handy way to map input and output data in a DataRaptor Transform when the names
match.

company 1829
OmniStudio
NOTE
Some transforms are too complex for Quick Match. For example, see List Input for
DataRaptors.
1. Expand the Input JSON pane and paste the input data structure into it.
2. Expand the Expected JSON Output pane and paste the desired output structure into it.
3. Click Quick Match. The Quick Match window opens.
4. Click Auto Match, or drag each Input Mapping onto the desired Output Mapping.
Another option is to select an Input Mapping and an Output Mapping, then click Pair.
5. Click Save. The Quick Match window closes and the Transforms tab shows the individual mappings.
6. Look at the structure in the Current JSON Output pane. Make sure it matches the structure in the
Expected JSON Output pane.
XML in DataRaptors
In addition to JSON, DataRaptors can have XML input and output. The XML format in DataRaptors is an
unordered key/value, JSON-like structure.
To specify the order in which the elements of the XML output are serialized, populate the Expected XML
Output pane with an XML structure that is composed in the desired order.
The following example compares equivalent structures in JSON and XML.
JSON
{
"Root": {
"#text": "rootValue",
"@attribute1": "attVal1",
"#ns": "http://namespace1",
"#ns#a": "http://namespace2",
"Child": [{
"@attribute2": "attval2"
},
{
"#text": "childValue"
}
]
}
}
XML
<Root attribute1="attVal1" xmlns="http://namespace1" xmlns:a="http://

namespace2">

company 1830
OmniStudio
rootValue
<Child attribute2="attval2"></Child>
<Child>childValue</Child>
</Root>
DataRaptors that transform XML to JSON use the following conventions to handle the differences between
the formats.
Description XML JSON

Values in an input XML node are translated to <Root>rootValue</Root> {
output JSON with the key #text. "Root": {
"#text": "rootValue"
}
}
Values in an input XML node are translated to <Root attribute1="attVal1"></ {
output JSON with a key that is preceded by an Root> "Root": {
at sign (@). "@attribute1": "attVal1"
}
}
Namespaces in an input XML node are <Root xmlns="http:// {
prepended with #ns in the output JSON. namespace1" xmlns:a="http:// "Root": {
namespace2"> "#ns":"http://namespace1",
</Root> "#ns#a":"http://namespace2,
}
}
Colons, which are reserved characters in <Root:Data>data</Root:Data> {
DataRaptor mappings, are replaced by #. "Root#Data": {
"#text":"data",
}
}
Test a DataRaptor Transform

You can test the input and output of a DataRaptor Transform on the Preview tab.

2. Specify JSON or XML input in the Input panel.
3. To observe the effects of caching when testing the DataRaptor Transform, deselect the Ignore Cache
checkbox. See Cache for DataRaptors and Integration Procedures.
4. Click Execute. The Response panel displays the resulting data.
DataRaptor Transform Examples

DataRaptor Transform examples demonstrate how to convert a single item into a list with one item and how
to convert a list of objects to a list of values.
For additional DataRaptor Transform examples, see List Input for DataRaptors and Create a DataRaptor
Example with a Formula.

company 1831
OmniStudio
Convert a Single Item to a List with One Item

In some cases, a component's output that isn't in list format must pass to another component that only
accepts a list. You can use the Output Data Type setting in a DataRaptor Transform to perform this
conversion.
To create a DataRaptor Transform that puts an item in a list:
• Interface Type — Transform
• Input Type — JSON
• Output Type — JSON
3. Click Save. The Transforms tab of the DataRaptor Interface page is displayed.
4. Expand the Input JSON pane and paste the following JSON data into it:
{
"Contact": {
"Id": "0036100000423z8AAA",
"FirstName": "Amy",
"LastName": "Smith"
}
}
5. Click the + icon and add the following mapping:
• Input JSON Path — Contact
• Output JSON Path — Contacts
• Output Data Type — List<Map>
Note that you only have to create a mapping for the top-level node.
6. Expand the Current JSON Output pane. Its contents should look like this:
{
"Contacts": [
{}
]
}
7. Go to the Preview tab and click Execute. The Response should look like this:
{
"Contacts": [
{
"LastName": "Smith",
"FirstName": "Amy",
"Id": "0036100000423z8AAA"
}
]
}

company 1832
OmniStudio
Convert a List of Objects to a List of Values

You can convert a list of JSON objects (key-value pairs in braces) to a list of single values, regardless of
the length of the list. The trick is to use a formula to remove the second level of the hierarchy.
To create a DataRaptor Transform that converts a list of objects to a list of values:
• Interface Type — Transform
• Input Type — JSON
• Output Type — JSON
3. Click Save. The Transforms tab of the DataRaptor Interface page is displayed.
4. Go to the Formulas tab. In the Formula field, enter ObjectList:Property. In the Formula Result
Path field, enter FormulaList.
5. Go to the Transforms tab. Expand the Input JSON pane and paste the following JSON data into it:
{
"ObjectList": [
{
"Property": "P9034"
}
]
}
6. Expand the Expected JSON Output pane and paste the following JSON data into it:
{
"PropertyValueList": [
"P9034"
]
}
7. Click the + icon and add the following mapping:
• Input JSON Path — FormulaList
• Output JSON Path — PropertyValueList
Note that you only have to create a mapping between the top-level nodes.
8. Expand the Current JSON Output pane. Its contents should look like this:
{
"PropertyValueList": "Text"
}
9. Go to the Preview tab and paste the following JSON data into the Input pane:
{
"ObjectList": [
{

company 1833
OmniStudio
"Property": "P9034"
},
{
"Property": "P6538"
},
{
"Property": "P1234"
},
{
"Property": "P5678"
},
{
"Property": "P2345"
},
{
"Property": "P7654"
}
]
}
10. Click Execute. The Response should look like this:
{
"PropertyValueList": [
"P9034",
"P6538",
"P1234",
"P5678",
"P2345",
"P7654"
]
}
11. Add or subtract list items in the JSON data in the Input pane and click Execute again. Note that the
output changes accordingly.
DataRaptor Load Overview

DataRaptor Loads accept data in JSON, XML, or custom input formats and write the data to Salesforce
objects. Formulas and attributes are supported.
For example, when a user running a case-handling OmniScript finishes entering data and clicks Save, the
script calls a DataRaptor Load to record the data entered.
A DataRaptor Load can obtain its input data in the following ways:
• OmniScript or Integration Procedure: During execution, an OmniScript or Integration Procedure builds a

Data JSON that is populated with the data required for the business use case. When the script invokes
the DataRaptor Load, the Data JSON is sent as input.

company 1834
OmniStudio
• Interface object: Create a custom object and populate it with data for the DataRaptor Load. Use
Salesforce Bulk Loader or other load tools to insert data into the object. If you need to modify the data
before it is inserted into the object, define a preprocessor class. This approach enables you to load data
from flat files, for example. (See Interface Objects for External Data Loads)
• DataRaptor API REST call: If the DataRaptor is invoked using a POST action, the Data JSON can be
included in the payload of the call.
• Apex code: Specify the Data JSON as a parameter in the call to the DataRaptor Load.
To modify the input data, you can define formulas, transform values, and change the output data type. (See
Use Formulas in DataRaptors.) To specify how the resulting data is to be written to Salesforce objects, you
map fields from the output JSON to fields in Salesforce objects. (See Object Field Mapping.) When
invoked, the DataRaptor Load applies its mappings and formulas to the input data to create the output data,
then loads the output data into Salesforce objects according to the mappings.
Create a DataRaptor Load

To create a DataRaptor Load, specify its name, input and output types, permissions, and options.
1. Go to the Vlocity DataRaptor Designer tab.

2. Click New.
3. On the Create dialog, specify the following settings and click Save:
• DataRaptor Interface Name: Descriptive name of your choice
• Batch Size: Number of records processed per batch transaction, between 1 and 2000
• Interface Type: Load
• Input Type: Choose JSON, XML SObject, or Custom. If your DataRaptor load is called from an
OmniScript, choose JSON. If you choose sObject, select the interface object for the input data from
the dropdown list. (More information: Interface Objects for External Data Loads. For details about
custom data serialization, see Custom Input and Output for DataRaptors.)
NOTE
SObject input isn't supported in Summer '21 and later releases.
• Output Type: SObject

4. On the Objects tab, specify the Salesforce objects that you want to update.

company 1835
OmniStudio
5. On the Formulas tab, define any transformations you want to apply to the input data to add data to the
output data. For details about the functions that you can use in formulas to define transformations, see
Use Formulas in DataRaptors.
6. On the Fields tab, map the input data to the Salesforce object fields that you want to update. For more
information, see Object Field Mapping.
7. On the Options tab are optional properties you can set.
The following options are available only if the Input Type is SObject:
• Batch Size: The number of records processed per batch transaction, between 1 and 2000.
• Process Now Threshold: The number of records processed immediately, between 0 and 199.
• Preprocessor Class Name: The adapter Apex class that implements the IDRPreprocess Apex
interface.
• Delete on Success: Automatically delete bulk records after successfully bulk-loading data.
• Process Super Bulk: Process large jobs spread over multiple Salesforce Apex batch jobs without
exceeding Salesforce governor limits.
• Is Default for Interface: Specify this DataRaptor as the default bundle for the specified interface
object.
The following options are available for all DataRaptor Loads:
• Ignore Errors: Execute the DataRaptor even if errors occur, skipping only the steps having errors.
This option is useful when you know a record will fail with limited data and future steps don't rely on
previous steps.
• Rollback on Error: Don't create or update the sObjects if errors occur. For more information, see
Apex Transactions and Transaction Control in the Salesforce documentation.
• Use Assignment Rules: Use assignment rules for sObjects such as Cases that have user
assignment fields. For more information, see Set Up Assignment Rules in the Salesforce
documentation.
In Summer '19 and later releases, if emails are configured in Case assignment rules, checking this
option automatically sends emails to users when Cases are assigned.
• Overwrite Target For All Null Inputs: If an input doesn't have a value, set the corresponding output
value to NULL.
What's Next
Object Field Mapping
Object Field Mapping

You must map data from the DataRaptor Load input JSON to the target Salesforce object and field. You can
also handle data types, attributes, and default values.
1. Go to the Fields tab.

2. Click +. A new mapping is added to the list.
3. Configure the following settings:
• Input JSON Path: The key of the JSON node containing the data you want to write to Salesforce.
• Domain Object Field: The field in the sObject that you want to update.
Some fields contain JSON data. To map this data, use standard notation, for example:
Object:JsonField__c:JsonNode:ChildJsonNode

company 1836
OmniStudio
4. Repeat these steps for each field.
If you are updating multiple Salesforce objects, the designer displays a separate tab for the mappings of
each target object. See Multiple Related Object Loads (Link Mappings).
Mapping Options
To control how the update is performed, you can configure the following optional settings:
• Is Disabled: Prevents the field from being loaded.

• Upsert Key: Specifies that the field is a key for the Salesforce object being loaded. The DataRaptor uses
the value to determine whether it updates an existing record or inserts a new one. If the Upsert property
is enabled for multiple field mappings, the result is a multi-field upsert key. DataRaptor uses this key to
check the object for unique values to determine whether to create a new object or update an existing
one.
• Is Required for Upsert: Prevents an object record from being updated if this field is null.
• Is Lookup: Uses the field value to query for the specified Salesforce data, and writes the result to the
output field.
• Output Data Type: Must be compatible with the data type of the target field.
The Output Data Type setting must be compatible with the target field in Salesforce. If you configure
incompatible types, the load operation can fail. For a list of valid output types, see DataRaptor Output
Data Types.
• Default Value: Value to be loaded if the field in the DataRaptor output JSON is null. To specify an empty
string for string fields that are null, enter a pair of double quotes (""). Omit if Is Required for Upsert is
enabled.
Vlocity Attribute Data Loads

To change the value of an object attribute using a DataRaptor Load, specify the attribute using its code (not
its name) preceded by @. (An attribute is assigned a GUID value when created, but you can edit the code
to specify a human-readable value. Outside of DataRaptor Designer, Salesforce displays the GUID,
regardless of whether you override it.) To add a profile attribute to an object, enable Upsert Key for the
object Id.
In Spring '20 and later releases, in the Domain Object Field, type-ahead is supported for up to 500
attributes. For example, you can type @C to display attributes beginning with the letter C and select from the
drop-down list instead of typing the entire attribute name manually.
For example, to assign Gold Star Status to an account, set the corresponding attribute to on as follows:
Mappings:

company 1837
OmniStudio
Input JSON:
{
"Id": "0016100001Ey84K",
"GoldStarAccount": "on"
}
When assigning values to attributes, specify values that are data-type-compatible as follows:
• On-Off: To apply the attribute to the object, specify "On", true or "true". To remove the attribute from
the object, specify "Off", false, or "false".
• Three-state: Specify a negative value, a positive value, or zero.
• 1 to 5: Specify a value from one to five (1 - 5). Values less than one are treated as one, and values
greater than five are treated as five.
• TextComment: String data
Product attributes cannot be added to or modified for the Product object using DataRaptor Loads. You can
modify product attributes for the following objects:
• Asset
• CompiledAttributeOverride__c
• ContractLineItem__c
• FulfilmentRequestLine__c
• InventoryItem__c
• OpportunityLineItem
• OrderItem

company 1838
OmniStudio
• ProgramEnrollment__c
• QuoteLineItem
IMPORTANT
A DataRaptor Load cannot create a Product Attribute for a Line Item. It can only modify
existing Product Attributes for existing Line Items.
What's Next
Test a DataRaptor Load
Multiple Related Object Loads (Link Mappings)

When loading data into a sequence of objects, you can propagate data directly from one object to another
related object. For example, you can use a DataRaptor Load to support an OmniScript that creates an
Account and a Contact for the Account.
To link the Account to its Contact, the DataRaptor must perform the following sequence of operations:
1. Create the Account.

2. Create the Contact.
3. Link the Account and Contact records by populating the Contact record’s AccountId field with the Id of
the Account record.
To handle this type of relationship, link the objects in the DataRaptor Designer as follows:
1. On the Objects tab, navigate to the source object (Contact in the preceding example) and click Add
Link.
2. For each field you want to link, configure settings as follows:
• Domain object field: The source field from this object (AccountId in the preceding example).
• Linked object: Another object in the sequence (Account in the preceding example).
• Field list: The target field in the linked object (Id in the preceding example).
For example, to create a Case with a new Account and Contact associated, link the objects as shown in the
following figure. The Contact is associated with the account by AccountId, and the case is associated with
the contact by ContactId.

company 1839
OmniStudio
For an example that uses link mapping, see Create a Contact for an Existing Account.
Interface Objects for External Data Loads

To provide data from an external source (for example, a CSV file) to a DataRaptor, create an interface
object and optionally a preprocessor class. Interface objects are custom Salesforce objects.
The process is as follows:
1. Data is loaded into a Salesforce custom object using Salesforce's Data Import Wizard or a tool such as
the Salesforce Data Loader, Informatica, or Talend.
2. Loading data into the object fires an Apex trigger that calls a Vlocity DataRaptor Load.
3. The DataRaptor transforms data from the interface object as required and writes the resulting data to
other Salesforce and Vlocity objects.
Create Interface Objects

You can make external data available to DataRaptor Loads using an interface object.
NOTE
SObject input and interface objects aren't supported in Summer '21 and later releases.
1. In Salesforce, create a custom object and add fields corresponding to the data in the external source.
2. Add the following string fields to the custom object. These fields are reserved by DataRaptors for
internal use.

company 1840
OmniStudio
• DRBundleName
• DRError
• DRProgressData
• DRStatus
3. To check whether you have defined the interface object correctly, create a test DataRaptor, go to the
Objects tab, click Add Object, and verify that the custom object is displayed in the list of available
objects.
4. Add to the interface object a trigger that invokes the DataRaptor Load.
5. To ensure that your DataRaptor can access data in the interface object, load a small amount of test
data into the object and run the DataRaptor. To check whether the DataRaptor logged any errors, use
the Developer Console to query the interface object; for example:
Select DRProgressData__c, DRError__c from myObjectwhere DRStatus__c =
'Error'
6. Using the Salesforce bulk load tool or your preferred bulk load tool, import the external data into the
interface object.
You can now use the interface object in DataRaptors exactly as you use standard Salesforce objects.
TIP
If you use interface objects on an ongoing basis (as opposed to performing a one-time
bulk load), create a tab for the object so you can access it readily.
Create Preprocessor Classes for Interface Objects

To modify data before it is imported into an interface object, create an Apex class that implements the
IDRPreprocess interface. This Apex interface runs before each insert to the Interface Object.
NOTE
Preprocessor classes aren't supported in Summer '21 and later releases.
1. From Setup, click Develop, then click Apex Classes, and click New.
2. Code the Apex class. Your class must implement the IDRPreprocess global interface, as shown in the
following sample:
global interface IDRPreprocess

{
// Performed once before iterating through all uploaded objects
void bulkBeforePreprocess();
// Performed on each object

company 1841
OmniStudio
void preprocessObject(SObject so);
// Performed once after iterating through all uploaded objects

void bulkAfterPreprocess();
}
3. To configure a DataRaptor to use the preprocessor class:
a. Go to the Vlocity DataRaptor Object Interfaces (or Vlocity DataRaptor Bundles) tab and select the
DataRaptor that requires the preprocessor class.
b. In the Preprocessor Class Name field, enter the name of the preprocessor class and click Save.
Test a DataRaptor Load

You can test the results of a DataRaptor Load on the Preview tab.

2. Specify JSON input in the Input panel.
3. Click Execute.
The Objects Created panel lists the resulting objects, which are saved permanently. The Debug Log panel
displays the results of the Salesforce queries issued by the DataRaptor.
DataRaptor Load Examples

DataRaptor Load examples demonstrate formulas and object relationships, and working with attributes.
Create a Contact and Use a Formula

A DataRaptor Load creates a record in the Salesforce Contact object. A formula checks whether the
contact is over 18 years old: if so, a custom Authorized field is set to true.
The input JSON for this DataRaptor Load contains the Contact details, for example:
{
"ContactDetails": {
"Birthdate": "10/10/1954",
"LastName": "Singh",
"Telephone": "5106345789",
"FirstName": "Sanjay"
}
}
To create this example DataRaptor Load:
1. If your org Contact object does not have an Authorized field, add one (checkbox). In the following
example, the authorized field is called Authorized__c. Depending on your industry, you might need to
add a vlocity_cmt__, vlocity_ins__, or vlocity_ps__ namespace prefix.
2. Navigate to the DataRaptor Designer tab and click New. The Create: DataRaptor Interface dialog is
displayed.

company 1842
OmniStudio
3. Enter settings as follows and click Save:

• DataRaptor Interface Name: A descriptive name of your choice
4. On the Objects tab, click Add Object and choose Contact.
5. On the Fields tab, map fields from the JSON input to fields in the Salesforce Contact object as shown
in the following table.
Input JSON Path Domain Object Field

ContactDetails:Authorized Authorized__c
Depending on your industry, you might need to add a vlocity_cmt__, vlocity_ins__, or vlocity_ps__
namespace prefix.
ContactDetails:Birthdate Birthdate
ContactDetails:FirstName FirstName
ContactDetails:LastName LastName
ContactDetails:Telephone Phone
6. On the Formulas tab, click Add Formula and enter a Formula of
IF(AGE(ContactDetails:Birthdate) > 18, "true", "false") and a Formula Result Path
of ContactDetails:Authorized as shown in the following figure.

8. Paste the following test data into the Input pane on the left.
{
"ContactDetails": {
"Birthdate": "10/10/1954",
"LastName": "MyLastName",
"Telephone": "5106345789",
"FirstName": "MyFirstName"
}
}
9. Click Execute. If the load succeeds, a link to the object is displayed in the Objects Created pane, as
shown in the following figure.

company 1843
OmniStudio
10. Click the link and verify that the Authorized checkbox is checked only if the contact is over 18 years
old.
Create a Contact for an Existing Account

The following example of a DataRaptor Load creates a record in the Salesforce Contact object. A link to an
Account object record with a specific Id ensures that the new Contact is related to that Account.
The input JSON for this DataRaptor Load contains the Account Id and the Contact name, for example:
{
"AccountId": "0016100001BKL4uAAH",
"Name": {
"First": "Jane",
"Last": "Doe"
}
}
displayed.
3. On the Objects tab, click Add Object and choose Account.
4. Click Add Object again and choose Contact.
5. Click Add Link and enter settings as follows:
• Domain Object Field: AccountId
• Linked Object: 1 - Account
• Linked Object Field (after the period): Id
6. Go to the Fields tab and the Account subtab. Click the + icon and add the following mapping:
• Input JSON Path: AccountId
• Domain Object Field: Id
• Upsert Key: checked
7. Go to the Contact subtab. Add the following name mappings:

company 1844
OmniStudio
The AccountId mapping is already present.

8. On the Preview tab, test the DataRaptor using input with the same structure as the sample input
above, substituting an Account Id from your org and a name of your choice.
Add and Modify Account Attributes

A DataRaptor Load adds or modifies Profile Attributes for the account with the specified Id.
Before you create this DataRaptor Load, you must create the Profile Attributes. Follow the steps at Create
New Profile Attribute Categories and Create New Profile Attributes to create these objects:
• An Attribute Category with:

• Name — AccountLevel
• UI Control Type — On-Off
• Applicable Type — Account
• Applicable Subtype — Profile Attribute
• An Attribute Category with:
• Name — AccountStrength
• UI Control Type — 1-5 Scale
• Applicable Type — Account
• Applicable Subtype — Profile Attribute
• An Attribute in the AccountLevel Attribute Category with a Name and Code of GoldStarAcct
• An Attribute in the AccountStrength Attribute Category with a Name and Code of NumberOfStars
The input JSON for this DataRaptor Load contains the Account Id and values for the two Profile Attributes,
for example:
{
"Id": "0014N00001goyP8QAI",
"GoldStarAcct": "On",

company 1845
OmniStudio
"NumberOfStars": 5
}
displayed.
3. On the Objects tab, click Add Object and choose Account.
4. Go to the Fields tab and the Account subtab. Click the + icon and add the following mappings:
Input JSON Path Domain Object Field Other Settings

Id Id Upsert Key
GoldStarAcct @GoldStarAcct Output Data Type: String
NumberOfStars @NumberOfStars Output Data Type: Integer
5. On the Preview tab, test the DataRaptor using input with the same structure as the sample input
above, substituting an Account Id from your org and Profile Attribute values of your choice.
6. (Optional) After you create this example, you can use a DataRaptor Extract to view the data. See
Extract Account Attribute Data.
DataRaptor Best Practices

To maximize the benefits of DataRaptors, follow the best practices whenever possible.
• Create targeted DataRaptors that only extract or load the data needed for one operation.
• Use relationship notation (queries) whenever possible to pull data from other SObjects. For more
information, see Relationship Notation versus Multiple Extract Steps.
• Try to keep the number of SObjects to three or fewer.
• Ensure that all filtering and sorting (ORDER BY) operations are on indexed fields. The Id and Name
fields are always indexed. For more information, see Indexes in Salesforce Help.
• Use caching to store frequently accessed, infrequently updated data. See Cache for DataRaptors and
Integration Procedures.
To determine whether a DataRaptor or an Integration Procedure is best for your use case, see DataRaptor
or Integration Procedure?.
List Input for DataRaptors

DataRaptors can perform list transformations. For mapping input to output, DataRaptors require list input in
which every value is paired with a key.
For example, the following lists are valid, and each can be converted to the other.
List 1:

company 1846
OmniStudio
{
"Oldest": "Huey",
"Middle": "Dewey",
"Youngest": "Louie"
}
List 2:
{
"Nephews": [
{
"Name": "Huey"
},
{
"Name": "Dewey"
},
{
"Name": "Louie"
}
]
}
List 1 lacks a JSON node for the list as a whole, and each value has a different key. List 2 has its own
JSON node, and each list item has the same key.
NOTE
Loop Block components in Integration Procedures require input that is structured like List
2. The list-item key itself can contain key-value pairs. For examples, see Process Arrays
Using Loop Blocks.
To convert List 1 to List 2, use the following mappings on the Transforms tab of a DataRaptor Transform.
The |1, |2, and |3 are list position indexes.
Input JSON Path Output JSON Path

Oldest Nephews|1:Name
Middle Nephews|2:Name
Youngest Nephews|3:Name
To convert List 2 to List 1, use the reverse mappings.
To download DataPacks of DataRaptor Transforms for these mappings, click these links:

company 1847
OmniStudio
• List 1 to List 2 example

• List 2 to List 1 example
However, in the following list, values don't have keys.
List 3:
{
"Nephews": [
"Huey",
"Dewey",
"Louie"
]
}
You can convert List 1 to List 3 using the following mappings:
Input JSON Path Output JSON Path

Oldest Nephews|1
Middle Nephews|2
Youngest Nephews|3
However, you can't convert List 3 to either List 1 or List 2.
To convert List 2 to List 3, and to perform such conversions of lists of any length, see the second example
in DataRaptor Transform Examples.
See Also
• AVG, FILTER, IF, LIST, LISTMERGE, LISTMERGEPRIMARY, LISTSIZE, MAX, MIN, SORTBY, and SUM
functions in the Function Reference
• Process Arrays Using Loop Blocks in Integration Procedures
• List Merge Action in Integration Procedures
• Integration Procedure Action in Integration Procedures (the example transforms a list)
Use Formulas in DataRaptors

To add data to the output of a DataRaptor, you can define formulas. All types of DataRaptor (Turbo Extract,
Extract, Transform, and Load) support formulas. When you define a formula, you map its output to the
output JSON (for extracts and transforms) or Salesforce object field (for loads).
For details about the operators and functions that you can use in formulas, see Function Reference.
To create a formula:
1. In the DataRaptor Interface page, go to the Formulas tab.

2. Click Add Formula. An empty formula is added to the list.

company 1848
OmniStudio
3. In the Formula field, specify the desired logic. For example, to determine the total price of the items
being purchased by a customer, enter a formula such as:
SUM(Products:Price)
You can reference attributes in formulas. Use the code (not the name) preceded by @. For example:
Account:@GoldStarAccount == "On"
You can also use relationship notation in formulas to reference fields in a parent object. See
Relationship Notation versus Multiple Extract Steps.
4. In the Formula Result Path field, specify a JSON node in which to store the formula result.
5. Map the result to the final output as follows:
• Extract: Go to the Output tab and map the formula result to the output structure. Use a colon (:) to
delimit levels in the input and output paths in mappings.
• Transform: Go to the Transforms tab and map the formula result to the output structure. Use a
colon (:) to delimit levels in the input and output paths in mappings.
• Load: For each sObject that you want to update, go to its Fields tab and map the formula result to
the specific field that you want to update.
NOTE
If a variable name contains spaces or non-alphanumeric characters, enclose the variable
name in double quotes and precede it with var: in formulas. For example, if the JSON
node name is Primary Guardian, specify it in formulas as var:"Primary
Guardian".
If the name of a custom field includes special characters, sometimes you can't reference
the field in a formula.
Before Winter '20, the result of a LIST function in a formula was saved to a VLOCITY-
FORMULA-LIST node under the Formula Result Path. Beginning with Winter '20, the
result is saved directly under the Formula Result Path.
See Also
• Create a DataRaptor Example with a Formula
Create a DataRaptor Example with a Formula

The following example accepts a list of prices and uses a formula to compute the total price.
To create this DataRaptor Transform, perform the following steps:
1. Go the Vlocity DataRaptor Designer tab and click New. The Create dialog is displayed.

company 1849
OmniStudio
4. Go to the Formulas tab and click Add Formula.
5. In the Formula field, enter SUM(Products:Price).
6. In the Formula Result Path field, enter TotalPrice.
7. On the Transforms tab, expand the Input JSON pane and paste this JSON structure into it:
{
"CustomerName": "Bob Smith",
"Products": [
{
"Name": "iPhone",
"Price": 600
},
{
"Name": "iPhone Case",
"Price": 30
},
{
"Name": "Ear Buds",
"Price": 200
}
]
}
8. Expand the Expected JSON Output pane and paste this JSON structure into it:
{
"TotalPrice": 830,
"Products": [
{
"Name": "iPhone",
"Price": 600
},
{
"Price": 30
},
{
"Name": "Ear Buds",
"Price": 200
}

company 1850
OmniStudio
]
}
9. Click Quick Match. In the Quick Match window, click Auto Match, then click Save.
10. On the Preview tab, click Execute.
If you have built the example correctly, the JSON structure in the Response pane matches the
Expected JSON Output except for the order of the top-level nodes.
11. In the Input pane, change one or more of the prices, then click Execute again.
Note how the TotalPrice value changes.
See Also
• Use Formulas in DataRaptors
DataRaptor Output Data Types

Many data types can be assigned to data in the Output JSON, including boolean, currency, string, various
number and list types, and date formats.
• Boolean
• Currency: Converts to Currency using the Salesforce org's currency code.
• CurrencyRounded: Converts to Currency, rounds the number, and removes the decimals.
• Double
• Integer
• JSON: Serialize as JSON. Omit if the transform output type is JSON unless you must embed JSON in
JSON (unlikely)
• List<Double>
• List<Integer>
• List<Map>: Converts Map<String,Object> to List<Map<String, Object>>
• List<String>
• Number
• Number(3): Converts to a number with decimals where the decimal precision is specified in parentheses.
For example, the output type Number(3) would output a number with three decimals.
• Object: Deserializes a String as Map<String, Object> or List<Object>
• String
• Multi-Select: Convert to Salesforce multi-select string (semicolon-delimited list)
• Date: Details in the following table.
NOTE
If you cast a list of values to a primitive type like Double, Integer, String, or Boolean, only
the first element of the list is output.

company 1851
OmniStudio
To format output date-time values, use the date-time templates supported by Oracle Java. The format of the
input date must be ISO-compliant (YYYY-MM-DD hh:mm:ss) and the time must be GMT. Specify the format
as a string argument to the DATE() output data type, for example:
Date("EEE, d MMM yyyy HH:mm:ss Z")
Here are examples of different output formats for the same date-time value.
Format Output
Date(MM/dd/YYYY) (default) 07/04/2001
Date("yyyy.MMMMM.dd GGG hh:mm aaa") 2001.July.04 AD 12:08 PM
Date("EEE, d MMM yyyy HH:mm:ss Z") Wed, 4 Jul 2001 12:08:56 +0000
DataRaptor Developer Features

You can call DataRaptors using Apex or a REST API. You can also use custom input and output and
environment variables in DataRaptors.
DataRaptor REST API

You can invoke any type of DataRaptor using the DataRaptor REST API. To update Salesforce objects
using a DataRaptor Load, issue a POST request that includes a JSON payload that is formatted to comply
with the input that the DataRaptor load expects. To retrieve data from Salesforce, issue a GET call to a
DataRaptor Extract, specifying the Id or parameters identifying the data to be retrieved. The data is
returned in the response in JSON format.
NOTE
The Salesforce Workbench REST Explorer is a useful testing tool.
Example
POST Data
{
"bundleName" : "AccountUpload",
"objectList" : {
"Agency Information": {
"Agency Name": "Vlocity",
"Agency Address": "50 Fremont",
"Agency City": "San Francisco",
"Agency State": "CA",
"Agency Zip": "94110",
}
},

company 1852
OmniStudio
"bulkUpload" : false
}
Result
{
"createdObjectsByOrder": {
"Open Account": {
"1": [
"a10o00000022xVEAAY" ]
}
},
"createdObjectsByType": {
"Open Account": {
"Account": [
"a10o00000022xVEAAY" ]
}
},
"errors": {},
"returnResultsData": []
}
DataRaptor Extract Invocation Using GET

To retrieve data from Salesforce using a REST call, issue a GET statement that invokes a DataRaptor
Extract. To identify the data to be retrieved you can either specify the object Id or one or more parameters
to be matched. Data is returned in the response in the output JSON format that the DataRaptor Extract
creates.
Use an ID to Retrieve Data

To retrieve Salesforce data by specifying the Id, issue a GET request that invokes a DataRaptor Extract,
using a URL formatted as follows:
/services/apexrest/myOrgNamespace/v2/DataRaptor/DataRaptorName/Id
Example Request
The following request uses the Id of a Contact to retrieve all open Cases for the Contact. Note that the %20
HTML URL encoding represents a space in the DataRaptor name.
GET /services/apexrest/vlocity_cmt/v2/DataRaptor/Open%20Cases/a10o00000022xVE
Example Result
{
"Contact": {
"Contact Name" : "Dennis Reynolds",
"Case Information": [
{

company 1853
OmniStudio
"Title": "Wrong widget shipped..."},

{
"Title": "Overcharged for gizmo..."},
{
"Title": "Damaged item..."}
]
}
}
Use Parameters to Retrieve Data

To retrieve Salesforce data by passing parameters to a DataRaptor extract, issue a GET request using a
URL formatted as follows:
GET /services/apexrest/<myOrgNamespace>/v2/DataRaptor/<DataRaptorName>/?$
{Param1}=${Val1}&${Param2}=${Val2}...
Example Request
The following request passes the first and last name of a contact as input parameters to a DataRaptor
extract, which uses them to query for the cases opened by the contact.
GET /services/apexrest/vlocity_cmt/v2/DataRaptor/Open_Cases/?
FirstName=Dennis&LastName=Reynolds
DataRaptor Load Invocation Using POST

To update Salesforce data, issue a POST request with a URL formatted as follows:
/services/apexrest/vlocityNamespace/v2/DataRaptor/
In the POST data, specify the following parameters:
• bundleName: Name of the DataRaptor Load to invoke

• objectList: JSON data to be loaded. Must match the format expected by the DataRaptor Load.
• filesList: (Optional) Map of keys to base 64-encoded files.
• bulkUpload: TRUE to use batch Apex.
DataRaptor Calls From Apex

To call a DataRaptor from Apex, call the vlocity_ins.DRGlobal.processObjectsJSON() method,
specifying the name of the DataRaptor and the input data that it requires.
Specify the input as follows:
• For a JSON object, use Map<String, Object>. Set the String to the JSON key and the Object to the
JSON value.
• For an array of JSON objects, use List<Map<String, Object>>. Set the String to the JSON key and
the Object to the JSON value.
• As an alternative, you can specify the input as a string containing the JSON input required by the
DataRaptor.

company 1854
OmniStudio
For details about the methods of the DRGlobal class, which offer multiple ways to call DataRaptors, see
DRGlobal Class and Methods.
To process the results returned by a DataRaptor extract or transform in Apex, use the toJsonList()
method to deserialize the output to a Map<String, Object> or List<Map<String, Object>>. To
determine which type to use, check the data type of the response.
DataRaptor Extract or Transform Example
/* Specify DataRaptor extract or transform to call */

String DRName = 'DataRaptorName';
/* Populate the input JSON */
Map<String, Object> myTransformData = new Map<String,
Object>{'MyKey'=>'MyValue'};
/* Call the DataRaptor */
vlocity_ins.DRProcessResult result =
vlocity_ins.DRGlobal.process(myTransformData, DRName);
/* Deserialize the DataRaptor output for processing in Apex */
List<Map<String, Object>> myTransformResult = (List<Map<String,
Object>>)result.toJsonList();
DataRaptor loads return JSON containing data about the Salesforce objects that were created or updated
by the operation. To process the results returned by a DataRaptor load, deserialize the output to a map.
From the resulting map, you can extract data about the objects that were created and any errors that
occurred. The DataRaptor load example below shows how to access this data from the result map.
DataRaptor Load Example
String dataJson = '{"accountName":"Vlocity", "contractCode":"SKS9181"}';

vlocity_ins.DRProcessResult result =
vlocity_ins.DRGlobal.processObjectsJSON(dataJson, 'Create Contracts');
Map<String, Object> resultMap = result.convertToMap();
System.debug(JSON.serialize(resultMap));
/*
Process the results of the load: these methods return details about objects
affected by the DataRaptor load, plus any errors that occured
*/
Map<String, Object> createdObjectsByType = (Map<String,
Object>)resultMap.get('createdObjectsByType');
Map<String, Object> createdObjectsByTypeForBundle = (Map<String,
Object>)createdObjectsByType.get('Create Contracts');
Map<String, Object> createdObjectsByOrder = (Map<String,
Object>)resultMap.get('createdObjectsByOrder');
Map<String, Object> errors = (Map<String, Object>)resultMap.get('errors');
Map<String, Object> errorsByField = (Map<String,
Object>)resultMap.get('errorsByField');
Map<String, Object> errorsAsJson = (Map<String,

company 1855
OmniStudio
Object>)resultMap.get('errorsAsJson'); // Returns input JSON plus per-node

errors
DataRaptor Load Example with the bulkUpload Parameter

Use the processPost method if you need to pass the bulkUpload parameter to a DataRaptor Load.
String objectList = '[{"ProductCode__c": 11050665},{"ProductCode__c":

11070100}]'; // replace this with the input for your DR Load
String bundleName = 'DRLoadPrice'; // replace this with your DR name
String bulkUpload = 'true';
Map<String,Object> bodyData = new Map<String,Object>();
bodyData.put('bundleName',bundleName);
bodyData.put('bulkUpload',bulkUpload);
bodyData.put('objectList',objectList);
vlocity_cmt.DRGlobal.processPost(bodyData);
DRGlobal Class and Methods

The DRGlobal class provides multiple methods for calling Vlocity DataRaptors from Apex.
In all the method signatures shown below, the namespace is vlocity_cmt, vlocity_ins, or
vlocity_ps. The bundleName is the DataRaptor name.
For sample code, see DataRaptor Calls From Apex.
Method Names
processObjectsJSON
Signature:
static namespace.DRProcessResult processObjectsJSON(String objectList, String

bundleName)
The objectList must be a JSON String.
processObjects
Signatures:
static namespace.DRProcessResult processObjects(List<SObject> objectList)

static namespace.DRProcessResult processObjects(List<SObject> objectList,
String bundleName)
String bundleName, Map<String, Object> additionalInfo)
String bundleName, Map<String, Object> additionalInfo, Map<String, Object>
filesMap)
The first signature, which doesn't require a DRName, is only for a DataRaptor Load.

company 1856
OmniStudio
The additionalInfo is a Map that applies to every SObject, such as extra data for processing.
pprocessString
Signature:
static namespace.DRProcessResult processString(String input, String bundleName)
The input must be an XML String.
processFromApex
Signatures:
static namespace.DRProcessResult processFromApex(List<Map<String, Object>>

objectList, String bundleName, String locale)
static namespace.DRProcessResult processFromApex(Map<String, Object>
objectList, String bundleName, String locale)
These methods ignore Sharing Rules, which ensures that the DataRaptor being invoked is private. See
Sharing Rules in the Salesforce help. The locale parameter is available in Summer '20 and later releases.
process
Signatures:
static namespace.DRProcessResult process(List<Map<String, Object>> objectList,

String bundleName, String locale)
static namespace.DRProcessResult process(Map<String, Object> objectList,
String bundleName, String locale)
The locale parameter is available in Summer '20 and later releases.
processPost
Signature:
global static Map<String, Object> processPost(Map<String, Object> bodyData)
This method can only call a DataRaptor Load. No other Apex method can pass the bulkUpload
parameter to a DataRaptor. See DataRaptor Calls From Apex.
clearCacheForDataRaptor, clearCacheForAllDataRaptor
For details about these methods, see Cache for DataRaptors and Integration Procedures.
Environment Variables in DataRaptors and Integration Procedures

You can use environment variables to define Default Values and Filter Values, and in Formulas.
For example, the following filter extracts the Cases created in the last 30 days.

company 1857
OmniStudio
If you are using an environment variable as a Filter value, you must double-quote it.
Environment Variable Description

$Vlocity.TODAY Today’s date
$Vlocity.TOMORROW Tomorrow’s date
$Vlocity.NOW Current date and time
$Vlocity.N_DAYS_FROM_NOW:{N} The date the specified number of days from now
$Vlocity.N_DAYS_AGO:{N} The date the specified number of days ago
$Vlocity.NULL Null
$Vlocity.StandardPricebookId Id of the standard pricebook
$Vlocity.DocumentsFolderId Documents folder Id
$Vlocity.true or $Vlocity.TRUE Boolean TRUE
$Vlocity.false or $Vlocity.FALSE Boolean FALSE
$Vlocity.UserId Current user Id
$Vlocity.Percent Percent character. Useful for escaping % characters in URLs so they aren't mistaken for merge
field syntax.
$Vlocity.CpuTotal Apex CPU value
$Vlocity.DMLStatementsTotal Number of Data Manipulation Language statements
$Vlocity.DMLRowsTotal Number of Data Manipulation Language rows
$Vlocity.HeapSizeTotal Heap size value
$Vlocity.QueriesTotal Number of queries run
$Vlocity.QueryRowsTotal Number of query rows fetched
$Vlocity.SoslQueriesTotal Number of SOSL queries run
Custom Input and Output for DataRaptors

By default, DataRaptors handle JSON and XML data. To handle other data formats, you can configure a
DataRaptor to use a custom input or output that you implement is a custom class. For example, you can
define a DataRaptor Transform that accepts CSV-formatted data and outputs it as JSON.
Options are as follows:
• DataRaptor Load: Custom input (output is always a Salesforce object)

• DataRaptor Transform: Custom input and output
• DataRaptor Extract: Custom input and output

company 1858
OmniStudio
To configure a DataRaptor to use a custom input or output, set its type to Custom and specify the class that
contains the serialize and/or deserialize methods that perform the operation. The following figure shows a
DataRaptor Transform configured with a custom input and output.
For ease of mapping, you can paste sample input into the Expected Input and Expected Output fields.
Custom Class Implementation

To create the logic required to custom input and output, you must define a custom class that implements
VlocityOpenInterface2. For custom output, implement the serialize method. For custom input,
implement the deserialize method. You cannot rename the input and output parameters.
The following example shows the basic structure of a customer serialization/deserialization class.
global with sharing class VlocityPreprocessorClassExample implements

VlocityOpenInterface2 {
global Object invokeMethod(String methodName, Map<String,Object> input,
Map<String,Object> output, Map<String,Object> options) {
if (methodName == 'serialize') {
return serialize(input, output);
}
else if (methodName == 'deserialize') {
return deserialize(input, output);
}
return false;
}

company 1859
OmniStudio
/*
Serializes Apex objects into JSON content. return String json
*/
global Boolean serialize(Map<String, Object> input, Map<String, Object>
output) {
String jsonString = '';
// code
output.put('output', jsonString); // JSON String
return true;
}
/*
Deserializes the specified JSON string into collections of primitive
data types. return Object ((Map<String, Object>))
*/
global Boolean deserialize(Map<String, Object> input, Map<String, Object>
output) {
Map<String, Object> returnMap = new Map<String, Object>();
// code
output.put('output', returnMap); // ---> collections of primitive data
types Map<String, Object>, List<Map<String, Object>>()
return true;
}
}
The following example serializes and deserializes CSV data.
global with sharing class VlocityPreprocessorClass implements

VlocityOpenInterface2
{
Map<String,Object> output, Map<String,Object> options)
{
if (methodName == 'serialize')
{
return serialize(input, output);
}
else if (methodName == 'deserialize')
{
return deserialize(input, output);
}
return false;
}
/*
Serializes Apex objects into JSON content. return String json
Example Input:
[

company 1860
OmniStudio
{
"Column1Test": "value1.0",
"Column2Test": "value0"
},
{
"Column1Test": "value1.1sl",
"Column2Test": "value0.1"
}
]
Example Output: 'Column2,Column1\nvalue0,value1.0\nvalue0.1,value1.1';
*/
global Boolean serialize(Map<String, Object> input, Map<String, Object>
output)
{
Object inputValue = input.get('input');
String returnValue = '';
if (inputValue == null)
{
return false;
}
if (inputValue InstanceOf Map<String, Object>)
{
inputValue = new List<Object>{inputValue};
}
if (inputValue InstanceOf List<Object> &&
((List<Object>)inputValue).isEmpty())
{
List<Object> rows = (List<Object>)inputValue;
if (!rows.isEmpty())
{
Set<String> columns = ((Map<String,
Object>)rows[0]).keySet();
for (String col : columns)
{
if (String.isNotBlank(returnValue))
{
returnValue = returnValue + ',' + col;
}
else
{
returnValue = returnValue + col;
}
}
if (!columns.isEmpty())
{
returnValue = returnValue + '\n';

company 1861
OmniStudio
}
for (Integer i = 0; i < rows.size(); i++)
{
for (String col : ((Map<String,
Object>)rows[i]).keySet())
{
if (String.isNotBlank(returnValue) && !
(returnValue.length()-1 == returnValue.lastIndexOf('\n')))
{
returnValue = returnValue + ',' + ((Map<String,
Object>)rows[i]).get(col);
}
else
{
returnValue = returnValue + ((Map<String,
Object>)rows[i]).get(col);
}
}
returnValue = returnValue + '\n';
}
output.put('output', returnValue);
return true;
}
}
return false;
}
/*
Deserializes the specified JSON string into collections of primitive data
types. return Object ((Map<String, Object>))
Input: 'Column2,Column1\nvalue0,value1.0\nvalue0.1,value1.1';
Output:
[
{
"Column1Test": "value1.0",
"Column2Test": "value0"
},
{
"Column1Test": "value1.1sl",
"Column2Test": "value0.1"
}
]
*/
global Boolean deserialize(Map<String, Object> input, Map<String, Object>
output)
{
Object inputValue = input.get('input');

company 1862
OmniStudio
if (inputValue != null && inputValue InstanceOf String)

{
List<String> valueSet = ((String)inputValue).split('\n');
List<Map<String, String>> csvList = new List<Map<String, String>>();
List<String> columns = new List<String>();
for (Integer i = 0; i < valueSet.size(); i++)
{
String value = valueSet[i];
if (String.isBlank(value))
{
continue;
}
if (i == 0)
{
List<String> valSet = value.split(',');
for (Integer y = 0; y < valSet.size(); y++)
{
columns.add(valSet[y]);
}
}
else
{
List<String> valSet = value.split(',');
if (columns.size() >= valSet.size())
{
Map<String, String> rows = new Map<String, String>();
for (Integer z = 0; z < valSet.size(); z++)
{
rows.put(columns[z], valSet[z]);
}
csvList.add(rows);
}
}
}
output.put('output', csvList);
return true;
}
return false;
}
}
DataRaptor Administration
DataRaptors have additional caching, security, batch, and debug settings. You can also export and deploy
DataRaptors.

company 1863
OmniStudio
Metadata and Data Caching

DataRaptor metadata is cached for better performance if you allocate space in the VlocityMetadata cache
partition. You can configure data caching on the Options tab of DataRaptor Extracts, Turbo Extracts, and
Transforms. DataRaptor data is cached if an Integration Procedure that uses caching invokes it. See Cache
for DataRaptors and Integration Procedures.
DataRaptor Security
Security settings control a user's ability to run DataRaptors and cache data. See Security for DataRaptors
Access DataRaptor Configuration Settings

To configure a DataRaptor to run in batch mode in Salesforce Classic:
1. Go to the Vlocity DataRaptor Interfaces tab.

In releases before Summer '19, this tab was named Vlocity DataRaptor Bundles.
2. Click the name of the DataRaptor.
3. Click Edit.
4. Change settings as needed.
5. Click Save.
To configure a DataRaptor to run in batch mode in Lightning Experience:
1. Go to the Vlocity DataRaptor Interfaces tab.

In releases before Summer '19, this tab was named Vlocity DataRaptor Bundles.
2. Select Edit from the dropdown list for the DataRaptor.
3. Change settings as needed.
4. Click Save.
DataRaptor Batch, Apex, and Debug Settings

Configuration settings are as follows:
• Batch Size: The number of records processed per batch transaction.

• Process Now Threshold: Number of records processed immediately (between 0-199).
IMPORTANT
To configure a DataRaptor to run in batch mode, set the Process Now Threshold value
to -1.
• Preprocessor Class Name: Adapter Apex class that implements the IDRPreprocess Apex interface.
Used for transforming data before it’s inserted into an Interface Object.
• Delete on Success: Deletes the Interface Object records on success (meaning that all steps executed
without throwing errors). To make troubleshooting easier, disable while debugging.
• Process Super Bulk: Use batch Apex for processing. Prevents exceeding Salesforce governor limits for
complex Interface Objects.

company 1864
OmniStudio
• Ignore Errors: Ignores all errors during processing.
DataPacks for Export and Deployment of DataRaptors

To copy DataRaptors from one org to another, you export them as DataPacks, which can then be deployed.
To import or export a DataRaptor, go to the Vlocity DataRaptor tab and choose the desired option, as
shown here.
When you export a DataRaptor, Vlocity create a DataPack (which is a JSON file) in your browser's
download directory. To deploy the exported DataRaptor to the target org, copy the file to an accessible
location and import it. After you import a DataRaptor, you must activate it to be able to run it.
Cache for DataRaptors and Integration Procedures

Using a cache to store frequently accessed, infrequently updated DataRaptor and Integration Procedure
data saves round trips to the database and improves performance.
Caching of DataRaptor and Integration Procedure metadata and Integration Procedure data is available in
Summer '19 and later releases. Caching of DataRaptor data is available in Spring '20 and later releases.
You can use caching with DataRaptors in three ways:
• DataRaptor metadata is always cached if you allocate space in the VlocityMetadata cache partition as
described below.
• You can configure data caching on the Options tab of DataRaptor Extracts, Turbo Extracts, and
Transforms.
• If you call a DataRaptor from an Integration Procedure that uses caching, the DataRaptor data is cached
along with the Integration Procedure data.
You can use caching with Integration Procedures in three ways:
• You can cache metadata for the entire Integration Procedure.

• You can cache the response of the entire Integration Procedure, called top-level data. See Cache for
Top-Level Integration Procedure Data.
• You can cache the result of a specific set of steps by placing the steps inside a Cache Block. See
Enhance Performance Using Cache Blocks.
Use Cache Blocks if some parts of the Integration Procedure update data and therefore shouldn't be
cached, or if different cached data should expire at different times. For example, current weather data
changes more frequently than user session data.

company 1865
OmniStudio
You can also perform a record-level security check for cached data. See Security for DataRaptors and
Metadata Cache for DataRaptors and Integration Procedures

Before you can cache Integration Procedure and DataRaptor metadata, you must allocate space in the
VlocityMetadata cache partition. See Allocate Space in the Platform Cache Partitions. Then Integration
Procedure metadata is cached by default and DataRaptor metadata is always cached.
To disable metadata caching for an Integration Procedure, go to the Procedure Configuration and check the
Disable Definition Cache checkbox.
TIP
To test the performance benefit of metadata caching, execute the Integration Procedure in
the Preview tab with Disable Definition Cache checked and then unchecked. Compare
the Browser, Server, and Apex CPU values.
Behind this checkbox is the DisableDefinitionCache__c boolean field, which defaults to false.
Methods to Clear Metadata from the Cache

If you need to clear DataRaptor metadata from the cache, follow the instructions in this topic, but execute
one of these lines of code instead:
namespace.DRGlobal.clearCacheForDataRaptor('DataRaptorName');
namespace.vlocity.cmt.DRGlobal.clearCacheForAllDataRaptor();
If you need to clear Integration Procedure metadata from the cache, follow the instructions in this topic, but
execute this line of code instead, specifying the Integration Procedure's Type and Subtype:
IntegrationProcedureService.clearMetadataCache('Type_Subtype');

company 1866
OmniStudio
To clear all cached data for an Integration Procedure, including session cache data, org cache data, and
metadata, follow the instructions in this topic, but execute this line of code instead, specifying the
Integration Procedure's Type and Subtype:
IntegrationProcedureService.clearAllCache('Type_Subtype');
Security for DataRaptors and Integration Procedures

You can control access to DataRaptors and Integration Procedures using settings that reference Sharing
Settings and Sharing Sets or Profiles and Permission Sets.
IMPORTANT
Prior to the Summer '19 release, you might have used Salesforce Sharing Settings or Sharing Sets to
secure access to DataRaptors and Integration Procedures. This approach is still supported. If you use
caching, you must set CheckCachedMetadataRecordSecurity to true as described here.
Beginning with Summer '19, you can allow access to a DataRaptor or Integration Procedure based on the
Custom Permissions enabled in a user's Salesforce Profiles or Permission Sets. An Apex class added to
your Salesforce Org allows the Vlocity Managed Package to check user Custom Permissions. The custom
settings described here are related to this approach. Vlocity recommends using Custom Permissions in
Profiles or Permission Sets for ease of use and better performance.
For Salesforce access basics, see Control Who Sees What, Who Sees What — Overview Video, and
Salesforce Data Security Model — Explained Visually. For Vlocity-specific information about Profiles, see
Overview of Profiles and Security for Vlocity.
Sharing Settings, Sharing Sets, Profiles, and Permission Sets control access to DataRaptors and
Integration Procedures as object records. To enforce field-level security in the data that DataRaptors
access, go to the DataRaptor's Options tab and select Check Field Level Security.

company 1867
OmniStudio
IMPORTANT
A user's access to a DataRaptor or Integration Procedure includes more than the ability to
run it directly. Access also applies if an application the user is using calls the DataRaptor
or Integration Procedure.
If a user has access to a parent Integration Procedure, the parent can invoke child
Integration Procedures and DataRaptors to which the user doesn’t have direct access.
Configure DataRaptor and Integration Procedure Security Settings

You can change custom settings for DataRaptor and Integration Procedure security in Setup.
For a list of settings, see DataRaptor and Integration Procedure Security Settings.
1. Go to Setup.
• In Lightning Experience, click the gear icon and select Setup from the menu.
• In Salesforce Classic, click the user menu and select Setup from the menu.
2. In the Quick Find field, enter Custom Settings.
3. Click Custom Settings.
4. Click the letter G in the index across the top.
5. To the left of General Settings, click Manage.

company 1868
OmniStudio
6. Click New.
7. Enter a Name and a Value.
8. Click Save.
DataRaptor and Integration Procedure Security Settings

These settings affect DataRaptor and Integration Procedure security.
To configure these settings, see Configure DataRaptor and Integration Procedure Security Settings.

company 1869
OmniStudio
Setting Description Data Default

Type Value
DefaultRequiredPermission Specifies the Custom Permission a user must have to run String (none)
The Required Permission setting, which you can optionally

specify when creating a DataRaptor or Integration Procedure,
overrides this setting.
If this setting is absent or blank, all users can run any

DataRaptors or Integration Procedures that don't have Required
Permission values.
Custom Permissions for users are defined in Salesforce Profiles

or Permission Sets. For Vlocity-specific information about
Profiles, see Overview of Profiles and Security for Vlocity.
For this setting to work, the

VlocityRequiredPermissionCheck class must be
implemented. See Implement the
VlocityRequiredPermissionCheck Class.
CheckCachedMetadataRecordSecurity By default, cached data is not secured when you use Salesforce True/ False
Sharing Settings or Sharing Sets to secure access. If True, this False
setting performs a record-level security check for cached data.
This lessens the performance benefit of metadata caching
slightly. This setting isn't needed if you use Custom Permissions
to secure access.
Implement the VlocityRequiredPermissionCheck Class

For the DefaultRequiredPermission setting to work, you must implement the
VlocityRequiredPermissionCheck class manually because Salesforce handles classes in managed
and unmanaged packages differently. This class doesn't work properly if it's included in the Vlocity
managed package.
For DefaultRequiredPermission details, see DataRaptor and Integration Procedure Security Settings.
1. From Setup, in the Quick Find box, type apex.

3. Click New.

company 1870
OmniStudio

{
{
{
}
return false;
}

{
{
{
break;
}
}
}
}
5. Click Save.
Vlocity Integration Procedures are declarative, server-side processes that execute multiple actions in a
single server call. Integration procedures can read and write data from Salesforce and from external
systems (using REST calls) and can call Apex code. An Integration Procedure can be called from an
OmniScript, an API, or an Apex method, and can be a data source for a Card or FlexCard.
Integration Procedures are optimal when you need to access and transform data from third-party sources
and no user interaction is required, and moving the workload from client to server is desirable.
Integration Procedures can do some things that OmniScripts can't, the most important of which is list
processing with Loop Blocks and List Merge Actions. Integration Procedures can perform more data
processing steps than DataRaptors can, and they're more flexible than Calculation Procedures.
The following diagram shows the relationship between an OmniScript and an Integration Procedure that it
calls.

company 1871
OmniStudio
See Also
• Integration Procedure Best Practices

• DataRaptor or Integration Procedure?
• OmniScript Action Elements Reference
• Configuring an Integration Procedure Data Source
Create an Integration Procedure

To create an Integration Procedure, you must name it, configure it, define its logic, and preview how it runs.
You can also view debugging information and set options that apply only to previews.
For step-by-step details of how to build Integration Procedure examples, see the block and action topics
under Group Integration Procedure Steps Using Blocks and Integration Procedure Actions.
1. Go to the Vlocity Integration Procedures tab.

2. Click New. The New Integration Procedure screen is displayed.
3. In the Procedure Configuration section, specify the following settings:
• Integration Procedure Name: The name displayed on the Vlocity Integration Procedures tab when
you expand the Type/SubType node.
• Type and SubType: The top-level node on the Vlocity Integration Procedures tab under which you
want the Integration Procedure listed.
After providing a Name, Type, and SubType, you must click Save.

company 1872
OmniStudio
• Description: A general description of the Integration Procedure.

• Tracking Custom Data: Key/value pairs to be recorded when the Integration Procedure is executed,
if tracking is enabled.
• Include All Actions in Response: Write the results of each action to the root level of the Data JSON.
By default, results are written to the Data JSON under a node with the same name as the action.
• Rollback on Error: If an error occurs, roll back data manipulation language (DML) statements.
run this Integration Procedure, a user must have one of these permissions. If this setting is blank,
any user can run this Integration Procedure unless a DefaultRequiredPermission is set.
When an Integration Procedure calls a DataRaptor or another Integration Procedure, the Required
Permission setting of the calling Integration Procedure overrides the Required Permission setting of
the DataRaptor or Integration Procedure being called.
• Chainable and Queueable Chainable Limits: These settings control how long-running procedures are
executed when there is a risk of hitting Salesforce governor limits. For details, see Settings for Long-
Running Integration Procedures.
• Cache Configuration: These settings control caching of Integration Procedure metadata and JSON
data. See Cache for DataRaptors and Integration Procedures.
4. To define the logic for the Integration Procedure, drag blocks and actions from the palette to the
Structure panel in the Properties pane. For details about blocks, see Group Integration Procedure
Steps Using Blocks. For details about actions, see Integration Procedure Actions.
When a step executes, its results are written to the Data JSON under a node with the same name as
the step. Subsequent steps can access the data that was written to the Data JSON by preceding steps.
5. To test the Integration Procedure, click Preview. In the Input Parameter pane, specify any parameters
that must be provided by callers, then click Execute. Verify that the JSON results are composed
correctly according to the requirements of the caller.
6. To view debugging information in Preview mode, display the Error/Debug Output pane on the right side
of the Integration Procedure Designer. This pane contains the following sub-panes:
• Debug Log: Output from the execution of each step in the procedure.
• Errors: Any errors that occurred during execution.
• Options: JSON containing Boolean flags that you can set to enable or disable run-time options for
debugging. These options are for debugging only, and by default are not in effect when the
Integration Procedure is called from an OmniScript.
• isDebug: Enable/disable display of debugging information.
• chainable: Enable/disable chaining during execution, for a long-running procedure that might
exceed Salesforce governor limits. For details about chaining, see Settings for Long-Running
• resetCache and ignoreCache: Enable/disable caching features. For details about caching, see
Cache for DataRaptors and Integration Procedures.

company 1873
OmniStudio
Group Integration Procedure Steps Using Blocks

In an Integration Procedure, you can run a group of related steps as a unit inside a block to execute them
conditionally, cache them, repeat them for each item in a list, or return an error if they fail.
Integration Procedures provide these block types:
• Conditional Block — Executes the block if a specified condition is true, or treats the steps within it as a
series of mutually exclusive alternatives. This is the most basic block type.
• Cache Block — Saves the output of the steps within it to a session or org cache for quick retrieval.
• Loop Block — Repeats the steps within it for each item in an array.
• Try-Catch Block — Returns specified output or calls an Apex class if a step within it fails.
You can nest blocks within other blocks. For example, you can nest a Loop Block within a Try-Catch Block
or a Cache Block.
All blocks have one property in common: Execution Conditional Formula. If this formula evaluates to true
or is not defined, the block is executed. If it evaluates to false, the block is skipped.
Define Execution Logic Using Conditional Blocks

A Conditional Block executes in its entirety if an expression is true, executes one of a set of mutually
exclusive conditions defined in the steps it contains, or both.
To control whether an individual action executes, you set its Execution Conditional Formula to an
expression that can be evaluated as True or False. If the expression evaluates to True at run time, the step
is executed.
To conditionalize the execution of a group of actions, place them inside any block and set the Execution
Conditional Formula of the block. If the formula evaluates to True at run time, the actions in the block are
executed. If an action in a block has its own Execution Conditional Formula, it is executed only if its
formula evaluates to True at run time.
The Conditional Block is the simplest block type. Unless you check Is If Else Block, it has no inner logic. It
either executes or it doesn't according to its Execution Conditional Formula.
How to Compose IF - ELSEIF - ELSE Logic

To define a set of mutually exclusive conditions, use a Conditional Block and check Is If Else Block. For
each action in the block, specify a unique condition in its Execution Conditional Formula. The sequence
of actions is important: When the block is executed, the first action that has an Execution Conditional
Formula that evaluates to True is executed, then execution resumes with the step following the Conditional
Block. No other actions in the block execute. To configure a step that is executed if none of the preceding
steps execute, leave the Execution Conditional Formula of the last step blank. The following figure
illustrates the use of this logic to perform a different action, depending on the type of device. The
Conditional Block itself executes only when the device being processed comes from Apple, and the block
contains actions that execute only for a specific type of device. To execute multiple actions for a condition,
you can nest Conditional Blocks.

company 1874
OmniStudio
See Also
• Conditional Block Properties

• Create a Conditional Block Example with If-Elseif-Else Logic
Conditional Block Properties

These properties are unique to or function in a unique manner in Conditional Blocks. A Conditional Block
executes in its entirety if an expression is true, executes one of a set of mutually exclusive conditions
defined in the steps it contains, or both.
Execution Conditional Specifies that the entire Conditional Block runs only if this formula evaluates to true.
Formula
Is If Else Block Specifies that all actions within the block except optionally the last have mutually exclusive Execution
Conditional Formula values. If the last action has a blank Execution Conditional Formula, it runs only if
the Execution Conditional Formula values of all the other actions evaluate to false.
See Also
• Group Integration Procedure Steps Using Blocks

• Create a Conditional Block Example with If-Elseif-Else Logic
Create a Conditional Block Example with If-Elseif-Else Logic

Based on a price and a state code, an Integration Procedure calculates the sales tax and reports the total
price. For brevity, only four state codes are included: WA, OR, CA, and NV.
The Integration Procedure has these components:
• A Conditional Block, named StateSalesTaxes

• Set Values components within the Conditional Block, named IfCA, IfOR, IfWA, IfNV, and IfOtherState
• Set Values components following the Conditional Block, named CalculateTax and AssembleOutput
• A Response Action, named Response

company 1875
OmniStudio
The Structure panel looks like this:
To build this Integration Procedure:
1. From the Vlocity Integration Procedures tab, click New.

2. Provide an Integration Procedure Name, a Type, and a SubType, and click Save.
3. Drag a Conditional Block into the Structure panel, set its Element Name to StateSalesTaxes, and
check Is If Else Block.
4. Drag a Set Values component into the Conditional Block and give it the following settings:
a. Set its Element Name to IfCA.
b. Under Element Value Map, click Add Value. Set the Element Name to CASalesTax and the
Value to 0.0866.
c. Set the Response JSON Path to CASalesTax.
d. Set the Response JSON Node to SalesTax.
These Response settings copy the CASalesTax value to a top-level JSON node named
SalesTax. A top-level node isn't tied to a particular step. This allows any step to set its value. It
also allows any step to access its value using the same path, regardless of which step set its
value.
e. Set the Execution Conditional Formula to State == "CA".
5. Repeat the previous step to configure four more Set Values components inside the Conditional Block
with the following settings:

company 1876
OmniStudio
Property IfOR IfWA IfNV IfOtherState

Element Name IfOR IfWA IfNV IfOtherState
Element Value Map, Element Name ORSalesTax WASalesTax NVSalesTax DefaultSalesTax
Element Value Map, Value 0 0.0921 0.0832 0.07
Response JSON Path ORSalesTax WASalesTax NVSalesTax DefaultSalesTax
Response JSON Node SalesTax SalesTax SalesTax SalesTax
Execution Conditional Formula State == "OR" State == "WA" State == "NV" (leave blank)
6. Drag a Set Values component after the Conditional Block and set its Element Name to
CalculateTax. Under the Element Value Map, give it the following settings:
Element Name Value

Tax =(%Price% * %SalesTax%)
TaxRate =(%SalesTax% * 100)
Total =(%Price% + (%Price% * %SalesTax%))
7. Drag a Set Values component after the previous one and set its Element Name to AssembleOutput.
Click Edit as JSON and edit the ElementValueMap node as follows:
"elementValueMap": {
"Output": {
"Price": "%Price%",
"State": "%State%",
"Tax": "%CalculateTax:Tax%",
"TaxRate": "%CalculateTax:TaxRate%",
"Total": "%CalculateTax:Total%"
}
},
8. Drag a Response Action after the previous component and give it the following settings:
a. Set its Element Name to Response.
b. Set the Send JSON Path to AssembleOutput:Output.
c. Set the Send JSON Node to Output.
9. Go to the Preview tab and click Edit as JSON.
10. Paste the following input into the Input Parameters panel:
{
"Price": "250",
"State": "CA"
}
11. Click Execute. The output data has the following structure:
{
"Output": {
"Price": "250",
"State": "CA",
"Tax": 21.65,
"TaxRate": 8.66,

company 1877
OmniStudio
"Total": 271.65
}
}
12. Change Price and State values, click Execute, and see how the Output values change.
See Also
• Define Execution Logic Using Conditional Blocks

• Conditional Block Properties
Enhance Performance Using Cache Blocks

Using a cache to store frequently accessed, infrequently updated data saves round trips to the database
and improves performance. Use Cache Blocks if some parts of the Integration Procedure update data, or if
you need different cached data to expire at different times. For example, current weather data changes
more frequently than user session data.
Cache Blocks are available in Summer '19 and later releases.
It's important to allocate space in the VlocityAPIResponse cache partition and to understand how top-level
Integration Procedure caching interacts with Cache Blocks. See Cache for DataRaptors and Integration
Procedures.
A Cache Block saves the output of the steps within it to a session or org cache in the VlocityAPIResponse
cache partition for quick retrieval.
Here’s an example Cache Block configuration:

company 1878
OmniStudio
Test Options for Cache-Block Caching in Preview

When you test an Integration Procedure that includes a Cache Block in the Preview tab, you can use two
caching settings in the Options JSON section. These settings also affect top-level caching but have no
effect on the metadata cache.
• ignoreCache — Doesn't clear or save data to the cache. The default value is true. Use this setting to
test Integration Procedure steps without the possible interference of caching effects.
• resetCache — Forces data to be saved to the cache. The default value is false. Use this setting as
part of testing caching itself.
NOTE
To test caching, be sure to set ignoreCache to false. See Create a Cache Block
Example.
The Options pane on the Preview tab looks like this:

company 1879
OmniStudio
You can pass ignoreCache and resetCache as parameters when you invoke an Integration Procedure that
uses caching using a REST API. For example, you can include ?resetCache=true in the URL to force
caching. See Integration Procedure Invocation Using POST.
Cache Block JSON Nodes

An active Integration Procedure that uses a Cache Block can include the following JSON nodes in its
Debug Log output, which is visible on the Preview tab:
• vlcCacheKey — Key for any data stored in the cache

• vlcCacheResult — Included and set to true if data is retrieved from the cache
• vlcCacheEnabled — Included and set to false if the ignoreCache setting disables caching
• vlcCacheException — Any caching errors
These nodes are under the Info node for the Cache Block. For example, if the Cache Block is named
CacheBlock1, these nodes are under the CacheBlock1Info node. For example:

company 1880
OmniStudio
Apex Methods to Clear Cache Block Data

Cache-clearing methods are available in Winter '20 and later releases. If you must clear Cache Block data
from the cache, follow the instructions in this topic, but execute one of these lines of code instead:
IntegrationProcedureService.clearSessionCache('Type_Subtype', 'blockName', new

Map<String, Object>{'key' => 'value'});
IntegrationProcedureService.clearOrgCache('Type_Subtype', 'blockName', new

Map<String, Object>{'key' => 'value'});
IntegrationProcedureService.clearSessionCache('vlcCacheKey');
IntegrationProcedureService.clearOrgCache('vlcCacheKey');
You can clear all cached data for an Integration Procedure, including session cache data, org cache data,
and metadata. Follow the instructions in this topic, but execute this line of code instead, specifying the
For example, execute the following code if:
• You want to clear a Cache Block key in the Org Cache

• The Type_Subtype parameter for the Integration Procedure is LastNames_Cached
• The Cache Block is named CacheContacts
• The cache key you want to clear is ContactLastName
• The key's value is Smith
IntegrationProcedureService.clearOrgCache('LastNames_Cached', 'CacheContacts',
new Map<String, Object>{'ContactLastName' => 'Smith'});

company 1881
OmniStudio
The following example clears the session cache using a vlcCacheKey value:
IntegrationProcedureService.clearSessionCache('2032076016a1745801061oc');
See Also
• Cache Block Properties

• Create a Cache Block Example
Cache Block Properties

These properties are unique to or function in a unique manner in Cache Blocks. Use Cache Blocks if some
parts of the Integration Procedure update data and therefore shouldn't be cached, or if different cached
data should expire at different times.
Salesforce Platform Specifies the cache type:
Cache Type
• Session Cache — For data related to users and their login sessions
• Org Cache — For all other types of data
Time To Live In Determines how long data remains in the cache. The minimum value is 5. Default and maximum values
Minutes depend on the cache type:
• Session Cache — The default value is 5. The maximum value is 480, equivalent to 8 hours. However, the
cache is cleared when the user's session expires.
• Org Cache — The default value is 5. The maximum value is 2880, equivalent to 48 hours.
Top-level caching overrides Cache Block caching for the duration of the top-level Time To Live In Minutes
value.
Cache Keys Configurable Key/Value pairs to be stored in the cache. Enter a Key and set the Value to the response of an
Action within the Cache Block. The value can use merge field syntax, percentage signs on either side of the
node name, to access that response. Cache keys are available, or scoped, only within the Cache Block.
Cache Block Output Configurable Key/Value pairs to be available to subsequent Integration Procedure steps. Enter a Key and set
the Value to the response of an Action within the Cache Block. The value can use merge field syntax,
percentage signs on either side of the node name, to access that response.
Refresh Cache If the formula evaluates to true, forces data to be saved to the cache.
Conditional Formula
Ignore Cache If the formula evaluates to true, neither clears nor saves data to the cache.
Conditional Formula
Add to Cache If the formula evaluates to true, saves data to the cache. If false, does not cache data.
Conditional Formula
Fail On Step Error If this box is checked in a step within the Cache Block and that step fails, no data is cached.
See Also
• Enhance Performance Using Cache Blocks

• Create a Cache Block Example
Create a Cache Block Example

An Integration Procedure accepts a list of first or last names and retrieves Contacts having those names. A
Cache Block improves Contact retrieval performance.

company 1882
OmniStudio
This Integration Procedure also includes a Loop Block; see Process Arrays Using Loop Blocks.
This Integration Procedure has these components:
1. A Cache Block, named CacheBlock1

2. A Loop Block within the Cache Block, named LoopBlock1
3. A DataRaptor Extract Action within the Loop Block, named ExtractContact
4. A Response Action, named ResponseAction

3. Drag a Cache Block into the Structure panel and give it the following settings:
Property Value
Salesforce Platform Cache Type Org Cache
Time To Live In Minutes 5
Cache Keys contactId set to %ExtractContact:Contact:Id%
contactName set to %ExtractContact:Contact:Name%

Cache Block Output LoopBlock1 set to %LoopBlock1%
4. Drag a Loop Block inside the CacheBlock and give it the following settings:
Property Value
Loop List names
Additional Loop Output ExtractContact set to %ExtractContact%

company 1883
OmniStudio
5. Create the DataRaptor Extract that the DataRaptor Extract Action calls, name it ExtractContactName,
and give it the following settings:
Tab Settings
Extract A Contact extract step set to Contact Name LIKE name
Output A mapping from Contact:Id to Contact:Id
A mapping from Contact:Name to Contact:Name
If you aren't sure how to create a DataRaptor Extract, see the examples in DataRaptor Extract
Examples.
6. Drag a DataRaptor Extract Action inside the Loop Block and give it the following settings:
Property Value
Element Name ExtractContact
DataRaptor Interface ExtractContactName
Data Source names:name
Filter Value name
7. Drag a Response Action below the Loop Block and give it the following settings:
Property Value
Send JSON Path CacheBlock1
8. To test this Integration Procedure, on the Preview Tab, click Edit as JSON and provide input with the
following structure:
{
"names": [
{
"name": "Miller"
},
{
"name": "Torres"
}
]
}
To demonstrate performance most effectively, specify common and/or many names.

9. Click Execute and note the resulting Browser, Server, and Apex CPU values.
10. Open the Options pane and change the ignoreCache value to false.

company 1884
OmniStudio
11. Click Execute again. This step populates the cache, so the resulting Browser, Server, and Apex CPU
values should be similar to the previous values.
12. Click Execute a third time. This step uses the cached values, so the resulting Browser, Server, and
Apex CPU values should be noticeably less than the previous values.
13. To see the vlcCacheKey and vlcCacheResult nodes, open the Debug Log and scroll to the
CacheBlock1Info node.
See Also
• Cache Block Properties
• Enhance Performance Using Cache Blocks
Process Arrays Using Loop Blocks

A Loop Block iterates over the items in a data array, enabling the Actions within it to repeat for each item.
For example, in Vlocity Communications, Media, and Energy, without a Loop Block, adding four products to
a cart would require running four separate Remote Actions. But one Remote Action within a Loop Block can
add all four products.
Loop Blocks are available in Spring '19 and later releases.

company 1885
OmniStudio
The array input to the Loop Block is processed so that each iteration receives only one item in the array.
For example, suppose the array input looks like this:
{
"Products": {
"Ids": [
{
"Id": 1
},
{
"Id": 2
}
]
}
}
Each iteration of the Loop Block would receive input that looks like this:
{
"Products": {
"Ids": {
"Id": 1
}
}
}
The iteration input is the data to which Actions within the Loop Block have access.
To configure a Loop Block:
1. Drag a Loop Block into the structure panel.

2. In the Loop Block property field labeled Loop List, enter the name of a JSON node that contains an
array of data. For example, entering Products:Ids provides a list of Ids to the Action. The JSON
node name does not need to be entered with merge field syntax.
3. Add any Action that needs to iterate over the array and pass the full the path of the array to the action.
For example, if the Loop List is set to an array named Products:Ids that contains key-value pairs of
Ids, the full path in the action would be Products:Ids:Id.
For more information on Actions, see Integration Procedure Actions.
NOTE
The Integration Procedure stops running and returns a response of { "Success":
"False" } if an Action that has Fail on Step Error checked fails.
4. Under the Loop Block property field labeled Loop Output, click Add Key/Value Pair to add Key-Value
pairs to set the response. The value field uses merge field syntax, meaning the node name of the
response set between two percentage signs, for example, %ResponseData:Names%.

company 1886
OmniStudio
5. (Optional) Add Conditional Logic to define when the Loop Block runs. For more information on
Conditional Logic, see Define Execution Logic Using Conditional Blocks.
For additional Loop Block examples, see Integration Procedure Action, Enhance Performance Using Cache
Blocks, and Cache for Top-Level Integration Procedure Data.
See Also
• Loop Block Properties

• Create a Loop Block Example that Retrieves Names
• Create a Loop Block Example that Creates Contacts
• Create a Loop Block Example that Concatenates List Items
Loop Block Properties

These properties are unique to or function in a unique manner in Loop Blocks. A Loop Block iterates over
the items in a data array, enabling the Actions within it to repeat for each item.
Loop List Accepts a JSON node containing an array.
Loop Output Configurable Key/Value pairs to be available to subsequent Integration Procedure steps. Enter a Key and set the
Value to the response of an Action within the Loop Block. The value can use merge field syntax, percentage signs
on either side of the node name, to access that response. By default, if no Key/Value pairs are specified, a
response of { "success": "OK" } is returned for each item processed in the array.
Use this property with care. It returns the data you request for every iteration. If the Loop Block iterates 1000
times, it returns 1000 responses. This property is most useful for debugging or returning a limited dataset.
Execution Controls whether the Loop Block executes based on an expression that evaluates to true or false.
Conditional
Formula
See Also

Create a Loop Block Example that Retrieves Names

An Integration Procedure accepts last names and returns the full names of all Contacts having the specified
last names.
1. An optional Set Values component, named SetValues1

2. A Loop Block component, named LoopBlock1
3. A DataRaptor Extract Action component within the Loop Block, named DataRaptorExtractAction1

company 1887
OmniStudio
4. A DataRaptor Extract that uses the LIKE operator to find names similar to those in the input, named
ExtractFirstNames
5. A Response Action, named ResponseAction1

3. Provide input with the following structure, using last names of your choice:
{
"names": [
{
"Name": "Miller"
},
{
"Name": "Torres"
}
]
}
You can provide this input to the Integration Procedure in one of two ways:
• In the Preview tab. Click Edit as JSON and paste it into the Input Parameters area.
• In a SetValues component that you drag into the Structure panel. Click Edit as JSON and paste it
into the elementValueMap node, replacing the default node value of {}.
4. Drag a Loop Block into the Structure panel and give it the following settings:

company 1888
OmniStudio
Loop List Set this value to names if the input is in the Preview tab, or to SetValues1:names if the input is in a
SetValues component.
Additional Loop Set the Key to DataRaptorExtractAction1 and the Value to %DataRaptorExtractAction1% to
Output return all iterations of data generated by the DataRaptor Extract Action component.
5. Create the DataRaptor Extract that the DataRaptor Extract Action calls, name it ExtractFirstName, and
give it the following settings:
Tab Settings
Extract A Contact extract step set to Contact LastName LIKE Name
Output A mapping from Contact:FirstName to Name:First
A mapping from Contact:LastName to Name:Last
Examples.
6. Drag a DataRaptor Extract Action component within the Loop Block and give it the following settings:
DataRaptor Interface Set this value to ExtractFirstName.
Input Parameters: Set this value to names:Name if the input is in the Preview tab, or to SetValues1:names:Name if the
input is in a SetValues component.
Data Source
Input Parameters: Set this value to Name.
Filter Value
7. Drag a Response Action below the Loop Block and check Return Full Data JSON.
8. Click Execute on the Preview tab. The output should look something like this:
{
"response": {},
"ResponseAction1Status": true,
"LoopBlock1": [
{
"DataRaptorExtractAction1": {
"Name": [
{
"Last": "Miller",
"First": “Tom”
},
{
"Last": "Miller",
"First": “Sally”
}
]
},
"DataRaptorExtractAction1Status": true,
"LoopBlockIterationStatus": true,

company 1889
OmniStudio
"LoopBlockIterationIndex": 1
},
{
"DataRaptorExtractAction1": {
"Name": [
{
"Last": "Torres",
"First": “Maria”
},
{
"Last": "Torres",
"First": “Ricardo”
}
]
},
}
],
"LoopBlock1Status": true,
"options": {
"chainable": false
},
"names": [
{
"Name": "Miller"
},
{
"Name": "Torres"
}
]
}
See Also
Create a Loop Block Example that Creates Contacts

An Integration Procedure accepts an Account Id and an array of first and last names and creates new
Contacts for the specified Account. It also includes a step that deletes these Contacts, which you can
optionally disable.

company 1890
OmniStudio
1. An optional Set Values component, named SetValues1

2. A Loop Block component, named LoopBlock1
3. A DataRaptor Post Action component within the Loop Block, named CreateContact
4. A DataRaptor Load that creates a new Contact for an existing Account, named NewContactForAccount
5. A Delete Action component within the Loop Block, named DeleteContact

3. Provide input with the following structure, using names of your choice:
{
"Contacts": [
{
"Name": {
"First": "John",
"Last": "Doe"

company 1891
OmniStudio
}
},
{
"Name": {
"First": "June",
"Last": "Doe"
}
}
]
}
You can provide this input to the Integration Procedure in one of two ways:
• In the Preview tab. Click Edit as JSON and paste it into the Input Parameters area.
• In a SetValues component that you drag into the Structure panel. Click Edit as JSON and paste it
into the elementValueMap node, replacing the default node value of {}.
Loop List Set this value to Contacts if the input is in the Preview tab, or to SetValues1:Contacts if the input is
in a SetValues component.
Additional Loop Set the Key to CreateContact and the Value to %CreateContact% to return all iterations of data
Output generated by the DataRaptor Post Action component.
5. To create the DataRaptor Load that the DataRaptor Post Action calls, create the second example in
DataRaptor Load Examples and name it NewContactForAccount.
6. Drag a DataRaptor Post Action component within the Loop Block and give it the following settings:
Name Set this value to CreateContact.
DataRaptor Set this value to NewContactForAccount.
Interface
Additional Input Set the first Key to AccountId and its value to %AccountId%, or to %SetValues1:AccountId% if the
input is in a SetValues component.
Set the second Key to Name and its value to %Contacts:Name%, or to %SetValues1:Contacts:Name%
if the input is in a SetValues component.
7. Drag a Delete Action component within the Loop Block and give it the following settings:
Name Set this value to DeleteContact.
Delete SObject: Set this value to Contact.
Type
Delete SObject: Set this value to %CreateContact:Contact_1:Id%.
Path To Id
8. Drag a Response Action below the Loop Block and check Return Full Data JSON.
9. Click Execute on the Preview tab. The output should look something like this:

company 1892
OmniStudio
{
"response": {},
"LoopBlock1": [
{
"CreateContact": {
"ActualTime": 793,
"CpuTime": 537,
"Contact_2": [
{
"UpsertSuccess": true,
"Id": "0034N00001qh5hVQAQ",
"LastName": "Doe",
"FirstName": "John"
}
],
"Account_1": [
{
"Id": "0016100001BKL4uAAH"
}
],
"error": "OK",
"responseType": "SObject"
},
"DeleteContactStatus": true,
"CreateContactStatus": true,
},
{
"CreateContact": {
"ActualTime": 1262,
"CpuTime": 799,
"Contact_2": [
{
"Id": "0034N00001qh5hWQAQ",
"LastName": "Doe",
"FirstName": "June"
}
],
"Account_1": [
{

company 1893
OmniStudio
"Id": "0016100001BKL4uAAH"
}
],
"error": "OK",
},
"DeleteContactStatus": true,
"CreateContactStatus": true,
}
],
"LoopBlock1Status": true,
"SetValues1": {
"Contacts": [
{
"Name": {
"Last": "Doe",
"First": "John"
}
},
{
"Name": {
"Last": "Doe",
"First": "June"
}
}
],
"AccountId": "0016100001BKL4uAAH"
},
"SetValues1Status": true,
"options": {
"chainable": false
}
}
See Also


company 1894
OmniStudio
Create a Loop Block Example that Concatenates List Items

An Integration Procedure concatenates the values of items in a list. In this case, it creates an underscore-
separated String of QuoteLineItem Ids.
1. A Set Values component before the Loop Block, named InitString

2. A Loop Block, named LoopBlock1
3. A Set Values component within the Loop Block, named ConcatListItem
4. A Set Values component after the Loop Block, named TrimUnderscore

3. Drag a Set Values component into the Structure panel and give it the following settings:
Element Name Set this value to InitString.

company 1895
OmniStudio
Element Value Map, Element Name Click Add New Value and assign an Element Name of Blank.
Element Value Map, Value Leave this property blank.
Response JSON Path Set this value to Blank.
Response JSON Node Set this value to ConcatString.
This component creates an initially empty top-level JSON node named ConcatString. A top-level
node isn't tied to a particular step. This allows any step to set its value. It also allows any step to
access its value using the same path, regardless of which step set its value.
4. Drag a Loop Block into the Structure panel and give it a Loop List value of QuoteLineItems:Ids.
5. Drag a Set Values component into the Loop Block and give it the following settings:
Element Name Set this value to ConcatListItem.
Element Value Map, Click Add New Value and assign an Element Name of Concat.
Element Name
Element Value Map, Assign the following Value:
Value
=%ConcatString% + "_" + %QuoteLineItems:Ids:Id%
This formula concatenates the top-level ConcatString node and the current list value.
Response JSON Path Set this value to Concat.
Response JSON Node Set this value to ConcatString.
In combination with the Value formula, this adds the current list value to the top-level
ConcatString node.
6. Drag a Set Values component below the Loop Block and give it the following settings:
Element Name Set this value to TrimUnderscore.
Element Value Map, Element Name Click Add New Value and assign an Element Name of Trim.
Element Value Map, Value Assign a Value of =SUBSTRING(ConcatString,1).
7. Drag a Response Action below the last Set Values component and give it the following settings:
Send JSON Path Set this value to TrimUnderscore:Trim.
Send JSON Node Set this value to Output.
9. In the Input Parameters panel, provide input with the following structure:
{
"QuoteLineItems": {
"Ids": [
{
"Id": "0QL3h000000VF04GAG"
},
{

company 1896
OmniStudio
"Id": "0QL3h000000VEvlGAG"
}
]
}
}
10. Click Execute. The output should look something like this:
{
"Output": "0QL3h000000VF04GAG_0QL3h000000VEvlGAG"
}
See Also
Handle Errors Using Try-Catch Blocks

A Try-Catch Block lets you "try" running the steps inside it and then "catch" the error if a step fails.
Try-Catch Blocks are available in Summer '19 and later releases.
To set up a Try-Catch Block:
1. Drag a Try-Catch Block into the Structure panel and make sure its Fail on Block Error checkbox is
checked.
2. Configure the "catch" behavior — what the Try-Catch Block will do if a failure occurs. You can choose
one or both of these options:
• Under Failure Response, specify a key-value pair to return as the response. The value can be a
formula. In Spring '20 and later releases, the value can include merge fields.
• Under Custom Failure Response, specify a Remote Class and a Remote Method to execute an
Apex class. The Apex class must implement VlocityOpenInterface.
3. Drag substeps into the Try-Catch Block, and make sure the Fail on Step Error checkbox is checked
for each step that must trigger the "catch" behavior if it fails.
You can optionally specify a Failure Condition Formula, which evaluates to TRUE if a specific step
has failed to execute successfully.
See Also
• Try-Catch Block Properties
• Create a Try-Catch Block Example
• Create a Try-Catch Block Example with a Formula
Try-Catch Block Properties

These properties are unique to or function in a unique manner in Try-Catch Blocks. A Try-Catch Block lets
you "try" running the steps inside it and then "catch" the error if a step fails.

company 1897
OmniStudio
Fail on Block Error Specifies that if the Try-Catch Block fails, the entire Integration Procedure fails.
Failure Response A response to return if the Try-Catch Block fails. The value can be a formula.
A Try-Catch Block can have both a Failure Response and a Custom Failure Response.
Custom Failure A Remote Class and Remote Method of an Apex class to execute if the Try-Catch Block fails. The Apex class
Response must implement VlocityOpenInterface.
See Also
• Handle Errors Using Try-Catch Blocks

Create a Try-Catch Block Example

An Integration Procedure creates and deletes a Contact with the specified LastName and returns an error
message if the LastName is blank.
1. A Try-Catch Block, named TryCatchBlock1

2. A DataRaptor Post Action, named DataRaptorPostAction1
3. A Delete Action, named DeleteAction1

company 1898
OmniStudio

3. Drag a Try-Catch Block into the Structure panel and give it the following settings:
a. Under Failure Response, click Add Key/Value Pair. Set the Key to failureResponse and the
Value to You must provide a last name.
b. Make sure the Fail on Block Error checkbox is checked.
4. Create the DataRaptor Load that the DataRaptor Post Action component calls:
a. Give it a DataRaptor Interface Name of CreateContact and an Interface Type of Load.
b. On the Objects tab, click Add Object and select Contact.
c. On the Fields tab, click the + icon and enter LastName as both the Input JSON Path and the
Domain Object Field.
If you aren't sure how to create a DataRaptor Load, see the examples in DataRaptor Load Examples.
5. Drag a DataRaptor Post Action component into the Try-Catch Block and give it the following settings:
a. Set the DataRaptor Interface to CreateContact.
b. Make sure the Fail on Step Error checkbox is checked.
6. Drag a Delete Action component after the Try-Catch Block. Under Delete SObject, set the Type to
Contact and the Path To Id to %DataRaptorPostAction1:Contact_1:Id%.
7. Drag a Response Action into the Structure panel as the last component and check the Return Full
Data JSON checkbox.
8. Go to the Preview tab and test the Integration Procedure:
a. Under Input Parameters, click Add New Key/Value Pair.
b. Set the Key to LastName and the Value to any name you like.
c. Click Execute.
The output should look something like this:
{
"response": {},
"DeleteAction1": [
{
"errors": [],
"success": true,
"id": "0034N00001rNgqqQAC"
}
],
"DeleteAction1Status": true,
"TryCatchBlock1": null,
"TryCatchBlock1Status": true,
"DataRaptorPostAction1": {
"ActualTime": 626,
"CpuTime": 345,
"Contact_1": [
{

company 1899
OmniStudio
"Id": "0034N00001rNgqqQAC",
"LastName": "Aristotle"
}
],
"error": "OK",
},
"DataRaptorPostAction1Status": true,
"options": {
"queueableChainable": false,
"ignoreCache": true,
"resetCache": false,
"chainable": false
},
"LastName": "Aristotle"
}
9. Make the Value blank and click Execute again. The output should look something like this:
{
"result": {
"failureResponse": "You must provide a last name."
},
"success": false
}
See Also

Create a Try-Catch Block Example with a Formula

An Integration Procedure finds Contacts with the specified Name and returns an error message if none are
found. Because returning no records normally isn't considered a failure, the DataRaptor Extract Action
within the Try-Catch Block includes a Failure Condition Formula.
1. A Try-Catch Block, named TryCatchBlock1

2. A DataRaptor Extract Action, named DataRaptorExtractAction1

company 1900
OmniStudio

3. Drag a Try-Catch Block into the Structure panel and give it the following settings:
a. Under Failure Response, click Add Key/Value Pair. Set the Key to failureResponse and the
Value to Name not found.
In Spring '20 and later releases, you can set the Value to Name %Name% not found.
b. Make sure the Fail on Block Error checkbox is checked.
4. Create the DataRaptor Extract that the DataRaptor Extract Action component calls:
a. Give it a DataRaptor Interface Name of GetContactName and an Interface Type of Extract.
b. On the Extract tab, click Add Extract Step and select Contact. Specify the path and filter
Contact Name LIKE Name.
c. On the Output tab, click the + icon and enter Contact:Name as the Extract JSON Path and
ContactName as the Output JSON Path.
Examples.
5. Drag a DataRaptor Extract Action component within the Try-Catch Block and give it the following
settings:
a. Set the DataRaptor Interface to GetContactName.
b. Make sure the Fail on Step Error checkbox is checked.
c. Specify ISBLANK(DataRaptorExtractAction1) as the Failure Condition Formula.
6. Drag a Response Action after the Try-Catch Block and check the Return Full Data JSON checkbox.
7. Go to the Preview tab and test the Integration Procedure:
a. Under Input Parameters, click Add New Key/Value Pair.
b. Set the Key to Name and the Value to any first or last name you like.

company 1901
OmniStudio
c. Click Execute.
If at least one Contact with that Name is found, the output should look something like this:
{
"response": {},
"TryCatchBlock1": null,
"DataRaptorExtractAction1": [
{
"ContactName": "Amy Argent"
},
{
"ContactName": "Amy Smith"
}
],
"options": {
"chainable": false
},
"Name": "Amy"
}
8. Change the Value to an uncommon name (or make it blank) and click Execute again. The output
should look something like this:
{
"result": {
"failureResponse": "Name Murgatroyd not found."
},
"success": false
}
See Also


To compose an Integration Procedure, you add actions that run sequentially. These actions can set data
values, perform functions, call DataRaptors, invoke Apex classes, send emails, invoke REST endpoints,
run other Integration Procedures, and more.

company 1902
OmniStudio
To add an action, drag it from the palette into the Structure panel, then configure its properties. You can
edit, rename, move, and delete actions. You can also use blocks to group actions for conditional execution,
caching, list processing, and error handling.
For details about specific Integration Procedure actions, see the topics for the actions.
See Also
• Create an Integration Procedure
• Group Integration Procedure Steps Using Blocks
Common Integration Procedure Action Properties

To compose an Integration Procedure, you add a sequence of actions. To configure an action, you set the
action's properties. Standard properties that exist in most or all actions are listed here. All properties are of
the String data type unless otherwise noted.
For details about the properties of specific actions, see the topics for the actions.
Element Name Label of script element
Send JSON Path Trims the incoming JSON to the specified path before the action is executed. See Manipulate JSON with the
Send/Response Transformations Properties.
Send JSON Node Reparents the incoming JSON under the specified node. See Manipulate JSON with the Send/Response
Transformations Properties.
Response JSON After the action is executed, trims the output JSON to the specified path. See Manipulate JSON with the
Path Send/Response Transformations Properties.
Response JSON Reparents the output JSON under the specified node. To delimit the path, use colons; for example -
Node level1:level2:level3. See Manipulate JSON with the Send/Response Transformations Properties.
Send Only Additional If checked, accepts only the data in the Additional Input property.
Input
Additional Input Additional key/value pairs to be included in the input data JSON. Values can include formulas and merge
fields.
Return Only If checked, returns only the data in the Additional Output property.
Additional Output
Additional Output Additional key/value pairs to be returned in the output data JSON. Values can include formulas and merge
fields.
Send Only Failure If checked, returns only the Failure Response if the action fails.
Response
Failure Response Key/value pairs to be returned in the output data JSON if the action fails. Values can include formulas and
merge fields.
Execution Specifies a formula that runs before the step is executed. If the formula returns TRUE, the step is executed. If
Conditional Formula the formula returns FALSE, the step is not executed. If no formula is specified, the step is executed.

company 1903
OmniStudio
Failure Conditional Specifies a custom failure condition that runs after the step is executed.
Formula
For example, if a DataRaptor Extract Action doesn't find any records, this isn't normally considered an error,
but you can use a Failure Conditional Formula to specify this condition. See the second example under
Handle Errors Using Try-Catch Blocks.
If the formula returns TRUE, execution of the step has failed and any key/value pairs configured in the Failure
Response list are added to the data JSON. For example, if the following JSON is returned:
{
"Result": {
"ErrorCode": "ERR-123",
"Success": "FALSE"
}
}
...the following settings catch the error and add the error code to the data JSON:
• Failure Conditional Formula: Result:Success == 'FALSE'

• Failure Response:
• Key: ErrorCode
• Value: %StepName:Result:ErrorCode%
Fail On Step Error If set to TRUE, the Integration Procedure ends if this step fails.
Chain On Step Allows the action to run in its own Salesforce transaction. This can slow performance but will decrease the
likelihood of exceeding the Salesforce governor limits. For more information, see Settings for Long-Running
Additional Chainable Specifies a key-value pair that is sent in the response. The value field accepts merge field syntax.
Response
Action Message Sends a message to the user if this is the first Action Message in the Integration Procedure or if this action is
chained. Useful for long-running actions.
Internal Notes Descriptive text that only someone who is viewing the Integration Procedure in the Vlocity Integration
Procedure app sees.
Set Values
The Set Values action sets values in the data JSON of an Integration Procedure literally, using merge fields,
or using formulas. This action has many uses. The example includes the most common uses.
Uses of Set Values Actions Example

The Integration Procedure that demonstrates Set Values uses restructures, concatenates, and performs
simple calculations on input data. All of its components are Set Values actions except the last, which is a
Response Action.
This example Integration Procedure has the following structure:

company 1904
OmniStudio
To create the Integration Procedure, go to the Vlocity Integration Procedures tab and click New. Provide an
Integration Procedure Name, a Type, and a SubType, and click Save.
To create each component, drag a Set Values instance into the Structure panel and edit its first Element
Name property. For the last component, drag in a Response Action instead.
The input data has the following structure:
{
"Name": {
"LastName": "Smith"
},
"Finances": {
"GrossIncome": "100000",
"Expenses": "60000"

company 1905
OmniStudio
}
}
Inputs: Rename Nodes in the Input Data

This component shortens and simplifies the input JSON nodes. Set its Element Value Map as follows:
Element Name Value

FirstName %Name:FirstName%
LastName %Name:LastName%
GrossIncome %Finances:GrossIncome%
Expenses %Finances:Expenses%
LocationData: Add Literal Values

This component adds literal values, which are useful for testing or for specifying data that doesn't
change.Set its Element Value Map as follows:
Element Name Value

Location San Francisco
Code 2345
TextWithCode: Concatenate Literal Values and Merge Fields

This component shows how to concatenate a literal string with a merge field. Set its Element Value Map as
follows:
Element Name Value

LocationCode Code is %LocationData:Code%
Note that the %LocationData:Code% merge field retrieves data from the previous component,
LocationData.
DeptArray: Define an Array

This component defines an array, or list of values. A later component will retrieve a value from the array. To
set up an array, click Edit as JSON and edit the ElementValueMap node as follows:
"Departments": [
"Sales",
"Development",
"Support",
"Training"
]
},
AfterTax and CalculateNet: Perform Simple Calculations Using Formulas

These components calculate after-tax income using multiplication and net income using subtraction. Note
that each operator has spaces before and after it. Set the Element Value Map of AfterTax as follows:

company 1906
OmniStudio
Element Name Value

AfterTaxIncome =%Inputs:GrossIncome% * 0.7
Set the Element Value Map of CalculateNet as follows:
Element Name Value

NetIncome =%AfterTax:AfterTaxIncome% - %Inputs:Expenses%
ConcatName: Concatenate Two Merge Fields

This component combines first and last names to form full names. Set its Element Value Map as follows:
Element Name Value

FullName =%Inputs:FirstName% + " " + %Inputs:LastName%
Note how a literal space is included.
RetrieveDept: Use a Function and Retrieving an Array Value

This component uses the IF function. It also uses listnode|listnumber notation to retrieve array
values. Set its Element Value Map as follows:
Element Name Value

Department =IF(%Inputs:FirstName% = "John",%DeptArray:Departments|2%,%DeptArray:Departments|3%)
This component assigns a Department value of Development to anyone named John and a Department
value of Support to anyone not named John. Note that the second equal sign has spaces before and after
it.
CalcFirstOfThisMonth: Perform a Complex Date Calculation

This component uses four nested date functions to return the first day of the current month. Set its Element
Value Map as follows:
Element Name Value

FirstOfThisMonth =ADDDAY(EOM(ADDMONTH(TODAY(),-1)),1)
AssembleOutput: Create the Structure of the Output Data

This component creates a JSON structure for the transformed data. To set up the structure, click Edit as
JSON and edit the ElementValueMap node as follows:
"Output": {
"FullName": "%ConcatName:FullName%",
"Department": "%RetrieveDept:Department%",
"AfterTaxIncome": "%AfterTax:AfterTaxIncome%",
"NetIncome": "%CalculateNet:NetIncome%",
"Location": "%LocationData:Location%",

company 1907
OmniStudio
"LocationCode": "%TextWithCode:LocationCode%",
"FirstOfThisMonth": "%CalcFirstOfThisMonth:FirstOfThisMonth%"
}
},
Response: Return the Output Data

This component returns the output data to the entity that called the Integration Procedure. Set one property
as follows:
Send JSON Path Response JSON Node

AssembleOutput Output
What's Next
Test the Integration Procedure that Sets Values
See Also
• Set Values Properties
Set Values Properties

These properties are unique to or function in a unique manner in Set Values actions. The Set Values action
sets values in the data JSON of an Integration Procedure literally, using merge fields, or using formulas.
Element Value Map: Element Name The JSON node for which value is to be set.
Element Value Map: Value The value to assign to the JSON node. Options:

• Literal value
See Also
• Set Values
• Common Integration Procedure Action Properties
Test the Integration Procedure that Sets Values

After you have created the Integration Procedure that demonstrates Set Values action uses, the final step is
to test it.

{
"Name": {

company 1908
OmniStudio
"LastName": "Smith"
},
"Finances": {
"GrossIncome": "100000",
"Expenses": "60000"
}
}
4. Click Execute. The output data has the following structure:
{
"Output": {
"FullName": "John Smith",
"Department": "Development",
"AfterTaxIncome": 70000,
"NetIncome": 10000,
"Location": "San Francisco",
"LocationCode": "Code is 2345",
"FirstOfThisMonth": "2020-02-01"
}
}
See Also
• Set Values
Assert Action
The Assert Action compares the expected and actual results of a Test Procedure using an expression that
evaluates to true or false. You can use environment variables in the Assert Conditional Formula to test
performance.
See Also
• Assert Action Properties

• Test Procedures: Integration Procedures for Unit Testing
• Environment Variables in DataRaptors and Integration Procedures
Assert Action Properties

These properties are unique to or function in a unique manner in Assert Actions. The Assert Action
compares the expected and actual results of a Test Procedure using an expression that evaluates to true or
false.
Assert Conditional Expression that tests results of previous steps and evaluates to true or false. If the result is false, the
Formula assertResult for the Assert Action is set to false. This sets the testResult for the Test Procedure to
failed.

company 1909
OmniStudio
Assert Failure Message that explains why the test failed.
Message
Fail Test On Assert If checked, the Test Procedure stops and returns the result of the transaction if the Assert Conditional
Formula evaluates to false.
If not checked, the Test Procedure continues running even if the Assert Conditional Formula evaluates to
false.
See Also
• Assert Action
• Environment Variables in DataRaptors and Integration Procedures
Batch Action
The Batch Action runs a Vlocity Scheduled Job with a Data Source Type of Data Input, Query, List Input,
or No Input. A Vlocity scheduled job calls either another Integration Procedure or a
VlocityOpenInterface.
NOTE
Batch Actions aren't supported in the Summer '21 release.
The format of the input that the Scheduled Job sends to the Integration Procedure or
VlocityOpenInterface it invokes differs based on the Is Input As List and Batch Size job fields. The
original input to the Batch Action is passed in under a vlcInputMap JSON node.
For example, suppose the job has a Data Source Type of Query and a query that selects Accounts. And
suppose in the Batch Action's input you specify a Key of CompanyName and a Value of Acme. If Is Input As
List is not checked in the job configuration, the input that the Scheduled Job sends looks like this:
{"Id": "00161000015IvYnAAK", "vlcInputMap": {"CompanyName": "Acme"}}
If Is Input As List is checked and the Batch Size is 1 in the job configuration, the input looks like this, with
a records node for the list:
{"records": [{"Id": "00161000015IvYnAAK"}], "vlcInputMap": {"CompanyName":

"Acme"}}
If Is Input As List is checked and the Batch Size is 2, the input looks like this, again with a records node
for the list:

company 1910
OmniStudio
{"records": [{"Id": "00161000015IvYnAAK"}, {"Id": "001610000050IKQAA2"}],

"vlcInputMap": {"CompanyName": "Acme"}}
If the Data Source Type is List Input, see the following example for an explanation of the input that the
Scheduled Job sends to the Integration Procedure.
TIP
If the Data Source Type is set to List Input or if Is Input As List is checked, the input
must be in list format even if the list contains only one item. DataRaptor Extracts that
return a list with one item often convert it to a single object. To convert a single object back
into a list, you can use the first example in DataRaptor Transform Examples.
The Integration Procedure doesn't wait for the job that its Batch Action calls to finish. However, the Batch
Action returns the Id of the Apex batch job in the ApexJobId node of the Integration Procedure's output
JSON.
See Also
• Batch Action Properties

• Workflow for Batch Action Example
• Batch Jobs for Integration Procedures and Vlocity Open Interfaces
• Vlocity Scheduled Job Fields
Batch Action Properties

These properties are unique to or function in a unique manner in Batch Actions. The Batch Action runs a
Vlocity Scheduled Job with a Data Source Type of Data Input, Query, List Input, or No Input. A Vlocity
Scheduled Job calls either another Integration Procedure or a VlocityOpenInterface.
Select Scheduled Job Specifies the job to run. Only active jobs are listed.
Input List Key For invoking a Vlocity Scheduled Job with a Data Source Type of List Input. Specifies the JSON node in the
input that contains the list.
Available in Spring '20 and later releases.

Batch Options (Optional) Specifies Key/Value pairs to be passed to the job as parameters, such as chainable true or
parameters needed by the Integration Procedure or VlocityOpenInterface.
Is Batch Chainable? (Optional) Specifies whether the Integration Procedure that the job calls is chainable. See Settings for Long-
Running Integration Procedures.
See Also
• Batch Action

company 1911
OmniStudio
Workflow for Batch Action Example

One Integration Procedure uses a Batch Action to invoke a Vlocity Scheduled Job, which invokes a second
Integration Procedure on a schedule.
To build this example:
1. Create a DataRaptor Load that creates new Contacts for an existing Account.
To perform the first step, create the second example under DataRaptor Load Examples and name it
NewContactForAccount.
2. Create the Integration Procedure to Be Invoked. This Integration Procedure calls the DataRaptor Load.
3. Create the Vlocity Scheduled Job that Invokes the Integration Procedure you just created.
4. Create the Integration Procedure that Invokes the Vlocity Scheduled Job.
5. Test the Integration Procedure that Invokes the Vlocity Scheduled Job.
See Also
• Batch Action
• Batch Action Properties
• Batch Jobs for Integration Procedures and Vlocity Open Interfaces
• Vlocity Scheduled Job Fields
Create the Integration Procedure to Be Invoked

The second step in creating the Batch Action example is to create the Integration Procedure to be invoked.
1. Go to the Vlocity Integration Procedures tab and click New.

2. Give the Integration Procedure the following settings:
Setting Value
Integration Procedure Name CreateContactsForAccount
Type Documentation
SubType CreateContactsForAccount
3. Click Save.
4. Drag a DataRaptor Post Action component into the Structure panel.
5. Set the DataRaptor Interface to NewContactForAccount.
6. Check Send Only Additional Input.
7. Under Additional Input, click Add Key/Value Pair. Specify a Key of AccountId and
a Value of %vlcInputMap:AccountId%.
You must include the vlcInputMap node because the AccountId isn't part of the input list.
8. Click Add Key/Value Pair again. Specify a Key of Name and a Value of %Name%.
You don't include the vlcInputMap node because the Name is an item in the input list.
9. Drag a Response Action component into the Structure panel below the DataRaptor Post Action and
check Return Full Data JSON.

company 1912
OmniStudio
10. Click Procedure Configuration, then click Activate Version.
What's Next
Create the Vlocity Scheduled Job that Invokes the Integration Procedure
See Also
Create the Vlocity Scheduled Job that Invokes the Integration Procedure
The third step in creating the Batch Action example is to create the Vlocity Scheduled Job that invokes the
1. Go to the Vlocity Scheduled Jobs tab and click New.

If you can't find this tab, see Create a Custom Object Tab in the Salesforce help.
2. Specify the following settings:
If you don't see these fields, see the Customize Record Details with Page Layouts Trailhead module.
Setting Value
Name Run DR Load
Active (checked)
Batch Size 2
Data Source Type List Input
Frequency Hourly
(A Frequency value isn't required if you invoke a Scheduled Job using a Batch Action, but it is required if
you run the job by itself.)
Job Queue Low
Process Name Documentation_CreateContactsForAccount
Process Type Integration Procedure
Email Address List (your email)
Send Email On Finish
3. Click Save.
What's Next
Create the Integration Procedure that Invokes the Vlocity Scheduled Job
See Also
Create the Integration Procedure that Invokes the Vlocity Scheduled Job
The fourth step in creating the Batch Action example is to create the Integration Procedure that invokes the
Vlocity Scheduled Job.

company 1913
OmniStudio
3. Drag a Batch Action component into the Structure panel.
4. Set Select Scheduled Job to Run DR Load.
5. Set the Input List Key to Contacts.
6. Under Additional Input, click Add Key/Value Pair. Specify a Key of AccountId and
a Value of %AccountId%.
7. Drag a Response Action component into the Structure panel below the Batch Action and check Return
Full Data JSON.
What's Next
Test the Integration Procedure that Invokes the Vlocity Scheduled Job
See Also
Test the Integration Procedure that Invokes the Vlocity Scheduled Job
The fifth and final step in creating the Batch Action example is to test the Integration Procedure that invokes
the Vlocity Scheduled Job.
1. Go to the Preview tab in the invoking Integration Procedure.

2. In the Input Parameters panel, provide input with the following structure, using an Account Id and
names of your choice:
{
"Contacts": [
{
"Name": {
"First": "John",
"Last": "Doe"
}
},
{
"Name": {
"First": "June",
"Last": "Doe"
}
}
]
}
3. Click Execute.
The Scheduled Job calls the Integration Procedure twice. The first time, the job sends this input:
{"Name":{"First":"John","Last":"Doe"},"vlcInputMap":
{"AccountId":"0016100001BKL4uAAH","Contacts":[{"Name":
{"First":"John","Last":"Doe"}},{"Name":{"First":"June","Last":"Doe"}}]}}

company 1914
OmniStudio
Note that the first list item is extracted and listed separately from the full Batch Action input under the
vlcInputMap node.
The second time, the job sends this input:
{"Name":{"First":"June","Last":"Doe"},"vlcInputMap":
{"AccountId":"0016100001BKL4uAAH","Contacts":[{"Name":
{"First":"John","Last":"Doe"}},{"Name":{"First":"June","Last":"Doe"}}]}}
Note that the second list item is extracted.

4. Check your email. You should see an email with a subject such as Apex Job Completed:
7074N00007LP8kYQAT. The Id in the subject is for the Vlocity Scheduled Job record.
5. Go to the Contacts tab.
6. Change the List View from Recently Viewed to All Contacts.
7. Type each of the Contact names in the Search field to verify that they were created.
See Also
Calculation Action
A Calculation Action invokes the specified calculation procedure and returns the results to the Integration
Procedure.
See Also

• Workflow for Calculation Action Example
• Integrating OmniScript with Vlocity Calculations
Calculation Action Properties

These properties are unique to or function in a unique manner in Calculation Actions. A Calculation Action
invokes the specified calculation procedure and returns the results to the Integration Procedure.
Remote Class Set to namespace.PricingMatrixCalculationService, where namespace is vlocity_cmt,
vlocity_ins, or vlocity_ps.
Remote Method Set to calculate.
Configuration Name Set to the calculation procedure name.
Remote Options: (Optional) Set to true to include the calculation procedure input in the calculation procedure output,
includeInputs which is useful for building pricing data.
See Also

company 1915
OmniStudio
Workflow for Calculation Action Example

An Integration Procedure invokes a calculation procedure, which invokes a calculation matrix. The matrix
applies a 15% discount to a quoted amount for an age between 16 and 24 and a GPA of 3.0 or greater.
1. Create the GoodStudentDiscountEligibility Calculation Matrix.

This is the first task in example under Matrix Action.
2. Create the GoodStudentDiscountCalculation Calculation Procedure.
3. Create the Integration Procedure That Invokes the Calculation Procedure.
See Also
Create the GoodStudentDiscountCalculation Calculation Procedure

The GoodStudentDiscountCalculation calculation procedure calls the GoodStudentDiscountEligibility
calculation matrix, which applies a 15% discount to a quoted amount for an Age between 16 and 24 and a
GPA of 3.0 or greater.
1. From the Vlocity Calculation Procedures tab, click New.

2. In the New Calculation Procedure window, choose Declarative, then click Next.
3. In the Calculation Procedure Name box, type GoodStudentDiscountCalculation.
4. Click Save. The record page for the new calculation procedure opens.
5. If you don't see a GoodStudentDiscountCalculation V1 link, click the Related tab.
6. Click the GoodStudentDiscountCalculation V1 link. This is version 1 of the calculation procedure.
7. Click Add Variable to add the following variables:
Name Data type Precision

Birthdate Date (none)
Age Number 0
GPA Number 2
QuoteAmount Currency 2
QuoteAmountAdjusted Currency 2
8. Click Add Constant to add the following constants:
Name Data type Precision Value

Discount Percent 0 15
One Number 0 1
9. Create the first step:
a. Click Add Step and select Calculation.
b. In the inputs field, type and then select the following series of elements:
AGE ( Birthdate )

company 1916
OmniStudio
c. In the outputs field, type and then select Age.

10. Create the second step:
a. Click Add Step and select Matrix Lookup.
b. In the Matrix Name field, type and then select GoodStudentDiscountEligibility.
Note that the matrix inputs and outputs are filled in for you.
11. Create the third step:
b. In the inputs field, type and then select QuoteAmount.
c. In the outputs field, type and then select QuoteAmountAdjusted.
d. Check the Include in Calculation Output box.
12. Create the last step:
b. In the inputs field, type and then select the following series of elements:
QuoteAmount * ( One – Discount )
c. Check the Conditional Step box.
d. In the Enter Condition field, type and then select Qualified(GoodStudentDiscountEligibility).
e. In the outputs field, type and then select QuoteAmountAdjusted.
f. Check the Include in Calculation Output box.
When you're done, the steps should look like this:
13. Click Save Calculation Procedure. In the Save successful pop-up, click OK.
14. Scroll to the top. If you don't see the Enabled checkbox, click Edit.
15. Click the pencil icon to the right of the Enabled checkbox and check the box.
16. Click Save.

company 1917
OmniStudio
17. (Optional) Click the Simulation or Simulate tab and test the calculation procedure.
What's Next
Create the Integration Procedure That Invokes the Calculation Procedure
See Also
Create the Integration Procedure That Invokes the Calculation Procedure

The example Integration Procedure calls the GoodStudentDiscountCalculation calculation procedure and
returns its result.

3. Drag a Calculation Action component into the Structure panel.
4. In the Calculation Name property, type GoodStudentDiscountCalculation.
Do not edit any other Calculation Action properties.
5. Drag a Response Action component into the Structure panel and give it the following settings:
Property Value
Send JSON Path CalculationAction1:output:calculationResults:QuoteAmountAdjusted
Send JSON Node QuoteAmount
7. In the Input Parameters panel, provide the following input:
{
"Input": {
"GPA": "3.5",
"Birthdate": "01/01/2000",
"QuoteAmount": "1000"
}
}
8. Click Execute. The output should look like this:
{
"QuoteAmount": 850
}
9. Set the Age and GPA to different values, click Execute, and observe the results.
See Also

company 1918
OmniStudio
Chatter Action
The Chatter Action creates a Chatter post and sends it to a Chatter feed.
See Also
• Chatter Action Properties

• Find the Id of a Community
• Workflow for Chatter Action Example
Chatter Action Properties

These properties are unique to or function in a unique manner in Chatter Actions. All properties except
Markup Type support merge fields. The Chatter Action creates a Chatter post and sends it to a Chatter
feed.
To obtain the Id for the Mentioned User Id, Subject Id, Image Id, or File Id property, go to the object's
record page and select the Id from the URL.
Community Id Id of the Community to which to post.
Mentioned User Id User Id to mention in the post. Can be a single value or a JSON list.
Markup Type Leave blank or select Bold, Italic, or Underline to determine the style of the Text property.
Subject Id (Required) Id of the object that has the Chatter feed. Can be any object that supports Chatter feeds, such as
Account, Contact, User, or Group.
Image Id Id of a File object to be used as an image for the post. Can be a single value or a JSON list.
File Id Id of a File object to be included as an attachment to the post. Can be a single value or a JSON list.
Text Text of the post. Can include merge fields and HTML markup.
See Also
• Chatter Action
• Find the Id of a Community
Find the Id of a Community

To find the Id of a community, you must run a query in the Developer Console.
1. In Lightning Experience, click the gear icon. In Salesforce Classic, click the user menu. In either case,
select Developer Console from the menu.
2. Click the Query Editor tab near the bottom of the Developer Console window.
3. Enter the following query in the Query Editor pane:
SELECT Id,Name FROM Network
The Ids and Names of all the Communities in the org are listed.
4. Find the Name of the Community, then copy its Id.

company 1919
OmniStudio
Workflow for Chatter Action Example

An Integration Procedure sends a Chatter post to a user. This post includes text, an image, and mentions of
two other users.
1. Collect Ids for the Chatter Post.

2. Create the Integration Procedure with the Chatter Action.
See Also
• Chatter Action
• Chatter Action Properties
Collect Ids for the Chatter Post

Before you can create the Integration Procedure example with the Chatter Action, you must collect the Ids
needed for assembling the Chatter post.
1. Go to the People tab.

2. Go to the record pages of three users and get their Ids from the browser URL.
Each Id looks something like this: 00561000000hjm3AAA.
3. Choose which user will receive the Chatter post.
This user’s Id will be the Subject Id of the Integration Procedure's Chatter Action. You will return to this
user’s record page later to verify that the user received the Chatter post.
4. Go to the Files tab, click Upload Files, and upload an image file of your choice.
5. Select View File Details from the down-arrow menu for that file.
6. While on the file's detail page, get the Id from the browser URL.
What's Next
Create the Integration Procedure with the Chatter Action
See Also
• Chatter Action
Create the Integration Procedure with the Chatter Action

After you collect the Ids needed for assembling a Chatter post, you can create an Integration Procedure
that sends a Chatter post to a user. The example post includes text, an image, and mentions of two other
users.
1. Go to the Vlocity Integration Procedures tab. Click New.

2. Provide a Name, Type, and SubType for the Integration Procedure. Click Save.
3. Drag a Chatter Action into the Structure panel. Assign these properties:

company 1920
OmniStudio
Property Value
Subject Id %SubjectId%
Mentioned User Id %UserIdList%
Image Id %ImageId%
Markup Type Italic
Text Here is the picture I mentioned. It has the Id %ImageId%.
4. Drag a Response Action into the Structure panel and check Return Full Data JSON.
5. Go to the Preview tab. Click Edit as JSON.
6. Paste JSON with this structure into the Input Parameters pane, substituting the Ids you collected in the
first set of steps:
{
"ImageId": "06961000005R9q1AAC",
"UserIdList": [
"0054N0000041jEvQAI",
"0054N0000041qUlQAI"
],
"SubjectId": "00561000000hjm3AAA"
}
7. Click Execute.
8. Go back to the People tab, then to the record page of the user you chose to receive the Chatter post.
9. Scroll down to the Chatter pane and click the Refresh icon to see the latest Chatter post.
See Also
• Chatter Action
DataRaptor Extract Action

The DataRaptor Extract Action calls the specified DataRaptor Extract to read data from Salesforce and
returns it to the Integration Procedure.
For Integration Procedure examples that include at least one DataRaptor Extract Action, see Process
Arrays Using Loop Blocks and Handle Errors Using Try-Catch Blocks.
See Also
• DataRaptor Extract Action Properties

• DataRaptor Extract Overview
DataRaptor Extract Action Properties

These properties are unique to or function in a unique manner in DataRaptor Extract Actions. The
DataRaptor Extract Action calls the specified DataRaptor Extract to read data from Salesforce and returns it
to the Integration Procedure.

company 1921
OmniStudio
DataRaptor Interface Name of DataRaptor Extract to run
DataRaptor Input Parameters: Data Source Name of data JSON node containing value to filter on
DataRaptor Input Parameters: Filter Value Value to match to qualify as an input parameter
Ignore Cache Disables caching in the DataRaptor Extract.
See Also

DataRaptor Post Action

The DataRaptor Post Action calls a DataRaptor Load (post) to write data to Salesforce.
For Integration Procedure examples that include at least one DataRaptor Post Action, see Process Arrays
Using Loop Blocks and Handle Errors Using Try-Catch Blocks.
Although a DataRaptor post action primarily creates or updates sObjects, it also produces JSON output,
which you can view in the Debug log on the Preview tab. This is important when subsequent Integration
Procedure steps need to reference the sObjects.
In the JSON response returned by a DataRaptor post, node names are appended with the sequence
number of the DataRaptor step that created them. For example:
{
"Contact_1": [{
"Id": "0036A000002PeaAQAS",
"LastName": "Smith",
"UpsertSuccess": true
}],
"Attachment_2": [{
"Id": "00P6A000000EJ3RUAW",
"Name": "angular-route.min.js",
"ParentId": "0036A000002PeaAQAS",
"UpsertSuccess": true
}]
}
If the DataRaptor name is CreateContact, you can reference the Id of Contact_1 in the example using the
merge field %CreateContact:Contact_1:Id%.
See Also
• DataRaptor Post Action Properties


company 1922
OmniStudio
DataRaptor Post Action Properties

These properties are unique to or function in a unique manner in DataRaptor Post Actions. The DataRaptor
Post Action calls a DataRaptor Load (post) to write data to Salesforce.
DataRaptor Interface Name of DataRaptor post to run.
See Also

DataRaptor Transform Action

A DataRaptor Transform Action calls the specified DataRaptor Transform to execute transformations on the
Data JSON and returns the transformed data.
See Also
• DataRaptor Transform Action Properties

• Create a DataRaptor Transform Action Example
• DataRaptor Transform Overview
• DataRaptor Output Data Types
DataRaptor Transform Action Properties

These properties are unique to or function in a unique manner in DataRaptor Transform Actions. A
DataRaptor Transform Action calls the specified DataRaptor Transform to execute transformations on the
Data JSON and returns the transformed data.
DataRaptor Interface Name of the DataRaptor transform to run.
Ignore Cache Disables caching in the DataRaptor Transform.
See Also

Create a DataRaptor Transform Action Example

An Integration Procedure calls a DataRaptor Transform that calculates a sum and returns it.
1. Create the DataRaptor Transform example described in Use Formulas in DataRaptors and name it
DRFormula1.

company 1923
OmniStudio

4. Drag a DataRaptor Transform Action component into the Structure panel and give it the following
settings:
Property Value
DataRaptor Interface DRFormula1
Send JSON Path Input
5. Drag a Response Action component into the Structure panel below the DataRaptor Transform Action
Property Value
Send JSON Path DataRaptorTransformAction1:TotalPrice
Note that the DataRaptor Transform output is wrapped in a DataRaptorTransformAction1 node,

from which only the TotalPrice sub-node is selected.
Send JSON Node TotalPrice
{
"Input": {
"Products": [
{
"Name": "iPhone",
"Price": 600
},
{
"Price": 30
},
{
"Name": "Ear Buds",
"Price": 200
}
]
}
}
Note that this is the same as the input for the DataRaptor Transform except that the entire structure is
wrapped in an Input node, which matches the Send JSON Path value of the DataRaptor Transform
Action.

company 1924
OmniStudio
{
"TotalPrice": 830
}
9. In the Input pane, change one or more of the prices, then click Execute again.
Note how the TotalPrice value changes.
See Also
DataRaptor Turbo Action

A DataRaptor Turbo Action calls the specified DataRaptor Turbo Extract to read data from Salesforce and
returns it to the Integration Procedure.
The DataRaptor Turbo Action is exactly the same as the DataRaptor Extract Action in how it works. The
only difference is the type of DataRaptors the DataRaptor Interface property lists. For Integration
Procedure examples that include at least one DataRaptor Extract Action, see Process Arrays Using Loop
Blocks and Handle Errors Using Try-Catch Blocks.
See Also
• DataRaptor Turbo Action Properties

DataRaptor Turbo Action Properties

These properties are unique to or function in a unique manner in DataRaptor Extract Actions. A DataRaptor
Turbo Action calls the specified DataRaptor Turbo Extract to read data from Salesforce and returns it to the
DataRaptor Interface Name of DataRaptor Turbo Extract to run
DataRaptor Input Parameters: Data Source Name of data JSON node containing value to filter on
DataRaptor Input Parameters: Filter Value Value to match to qualify as an input parameter
Ignore Cache Disables caching in the DataRaptor Turbo Extract.
See Also
• DataRaptor Turbo Action

Delete Action
Enable users to delete one or more sObject records by using the Delete Action. Use an Object's Record Id
to determine which record to delete. Vlocity recommends using a merge field in the Path to Id field that
refers to an Id or a list of Ids in the data JSON.
To delete records with the Delete Action:

company 1925
OmniStudio
1. Preview the OmniScript and identify the JSON path for the record. For example, this data JSON
contains a list of Accounts:
{ "Account": { "accId": ["001f400000EPQ8o", "001f400000BAkbn"] } }

2. In the Delete Action properties, click Add sObject to Delete.
3. In the Type column, select an Object.
4. In the Path to Id field, enter the JSON path for the record id using merge field syntax. Using the
Account example, the path to delete the array of Account ids is: %Account:accId%.
5. Preview the OmniScript and use a test record's id to test the functionality.
For Integration Procedure examples that include a Delete Action, see Process Arrays Using Loop Blocks
and Handle Errors Using Try-Catch Blocks.
Delete Action Properties

This page contains information on Delete Action Properties.
Type Type of sObject record to delete. For example, Account is a Type of sObject.
Path to Id Path to the JSON node that contains the Id or list of Ids of the records to delete. Supports merge
syntax.
All Or None When checked, the operation fails if any of the records are not deleted.
Entity Is Deleted Message Message that displays when a record is deleted.
Delete Failed Message Message that displays when the action fails to delete a record.
Invalid Id Message Message that displays when an invalid Id is sent to the Delete Action.
Configuration Error Message Message that displays when the Delete Action has a configuration error.
Confirm Controls whether the modal displays.
Confirmation Dialog Message The Confirmation Modal's message text. The default message text is Are you sure? This
action cannot be undone.
Confirm Label Button label for the Confirmation Modal's confirm action.
Cancel Label Button label for the Confirmation Modal's cancel action.
Related Topics
• Confirming Record Deletion

• Displaying Messages from a Delete Action
DocuSign Envelope Action

The DocuSign Envelope Action emails a set of documents for signing.
See Also
• DocuSign Envelope Action Properties

• Using the DocuSign Envelope Action to Email Documents for Signature

company 1926
OmniStudio
DocuSign Envelope Action Properties

These properties are unique to or function in a unique manner in DocuSign Envelope Actions. The
DocuSign Envelope Action emails a set of documents for signing.
DocuSign Templates Templates for the documents you want signed. See Preparing a DocuSign Template for OmniScript.
Recipients After you add a template, specify the Signer Name, Signer Email, and Template Role for each recipient.
Signer Name and Signer Email support merge fields. Template roles are configured during template setup.
Email Body Body text for the email requesting signatures.
Date and Time Formats Specify the format for display of date and time values. (More information)
See Also
• DocuSign Envelope Action

Email Action
An Email Action sends the specified email. You can either specify all the email field values or use a
Salesforce email template.
See Also
• Email Action Properties

• Create an Email Action Example with Specified Fields
• Workflow for Email Action Example with Template
Email Action Properties

These properties are unique to or function in a unique manner in Email Actions. An Email Action sends the
specified email. You can either specify all the email field values or use a Salesforce email template.
Many of the properties support either literal values or merge fields, which let you pass in an input or a value
from another step.
Use Template If checked, uses a Salesforce email template. Also determines which other properties are available.
To Email Address List Specifies the recipients in the TO field of the email. Click Add Recipient to add each email address. Can
accept an array of up to 100 addresses.

CC Email Address List Specifies the recipients in the CC field of the email. Click Add Recipient to add each email address. Can
accept an array of up to 25 addresses.

BCC Email Address Specifies the recipients in the BCC field of the email. Click Add Recipient to add each email address. Can
List accept an array of up to 25 addresses.

company 1927
OmniStudio
Email Subject Specifies the email subject line.

Email Body Specifies the body of the email.

Set HTML Body Determines whether the Email Body should be read as plain text (not checked) or HTML (checked).
Available if Use Template is not checked.

Org Wide Email Specifies the sender in the FROM field of the email. This is assumed to be an email that represents the
Address entire org. If not specified, the default sender is the user that invoked the Integration Procedure. See
Organization-Wide Email Addresses in the Salesforce help.

Select Email Template Specifies the Salesforce email template. Enter the sObject Id, then select the template from the drop-down
list.

Email Target Object Id Specifies the Id of a Contact, User, or Lead with an email address.

What Id If you specify a Contact in the Email Target Object Id field, this property can further ensure that merge
fields in the template contain the correct data. See the Salesforce Email API documentation for more
information.

Save As Activity If checked, saves the email as an activity record on the recipient’s page in Salesforce.

Content Versions Specifies the Id of a ContentVersion sObject that is included as an attachment.
Select Document Specifies the Attachment sObjects to add to the email.
Attachments
Attachment List Specifies a node in the data JSON that contains a list of attachment Ids.
See Also
• Email Action
Create an Email Action Example with Specified Fields

An Integration Procedure accepts email, subject, and message input parameters and uses them to
compose and send an email.


company 1928
OmniStudio
3. Drag an Email Action component into the Structure panel.

4. In the Email Action, remove the check from the Use Template setting.
5. Give the Email Action the following settings. Click Add Recipient to add to the address list.
Property Value
TO EMAIL ADDRESS LIST %email%
Email Subject %subject%
Email Body %message%
6. Go to the Preview tab and click Add New Key/Value Pair three times. Specify the following input
parameters:
Key Value
email (your email address)
subject Test Email
message This is a test.
If you prefer to specify JSON input, click Edit as JSON and paste in this code, substituting your email:
{
"subject": "Test Email",
"message": "This is a test."
}
7. Click Execute. You should receive a Test Email from your org in a few minutes.
See Also
• Email Action
Workflow for Email Action Example with Template

An Integration Procedure uses an Email Template and includes the sent email in the recipient's Activities
list. No Email Templates exist by default, so this example includes steps for creating one.
1. Create the Email Template.

2. Select an Email Recipient.
3. Create the Integration Procedure with the Email Action.
4. Test the Integration Procedure with the Email Action.

company 1929
OmniStudio
See Also
• Email Action
Create the Email Template

Create the email template that the Email Action example uses.
1. Go to the Email Templates tab, and click New Email Template.

2. In the Email Template Name field, type Simple Email Template.
3. Type any text you like in the Subject and HTML Value fields.
For example, the Subject could be Hello and the HTML Value could be Just saying hello.
4. Click Save. The Email Template's page opens.
5. While on the Email Template's page, copy the Id from the URL, for example 00X4N000000aCE5UAM.
What's Next
Select an Email Recipient
See Also
• Email Action
Select an Email Recipient

Select the Id of the Contact to whom the email in the Email Action example is sent.
1. Go to the Contacts tab.

2. Find a Contact that has an email address, or add an email address to a Contact.
3. While on the Contact's page, copy the Id from the URL, for example 0036100000423z8AAA.
What's Next
Create the Integration Procedure with the Email Action
See Also
• Email Action
Create the Integration Procedure with the Email Action

After you create the email template and select the recipient, you can create an Integration Procedure that
sends an email to a Contact.

company 1930
OmniStudio
3. Drag an Email Action component into the Structure panel.
4. Make sure the Use Template box is checked.
5. Copy the Email Template Id into the Select Email Template field.
6. A drop-down list appears with an item that looks like this: Simple_Email_Template_1580943234381.
Select the list item. The list item replaces the Id in the field.
7. In the Email Target Object Id field, type %contact%.
8. Check the Save As Activity box.
What's Next
Test the Integration Procedure with the Email Action
See Also
• Email Action
Test the Integration Procedure with the Email Action

After you have created the Integration Procedure with the Email Action, your final task is to test it.
1. Go to the Preview tab and click Add New Key/Value Pair.

2. Specify contact as the Key and the Contact Id that you copied previously as the Value.
3. Click Execute. This sends the email.
4. Go back to the Contacts tab. Select the Contact to whom you sent the email to open their page.
If the Contact record page includes an Activities component, you should see the email in the list of
activities after you click Refresh. For example:

company 1931
OmniStudio
5. If the Contact record page doesn't include an Activities component, you can add one:
a. If you're using Salesforce Classic, click Switch to Lightning Experience.
b. Click the gear icon and select Edit Page.
c. Drag an Activities component from the list on the left onto the page canvas.
d. Click Save, then click Back to return to the Contact's page.
The Activities component appears on the Contact's page and lists the email you sent.
See Also
• Email Action
HTTP Action
The HTTP Action executes a REST call and returns its results to the Integration Procedure.
See Also
• HTTP Action Properties

• Workflow for HTTP Action Example

company 1932
OmniStudio
HTTP Action Properties

These properties are unique to or function in a unique manner in HTTP Actions. The HTTP Action executes
a REST call and returns its results to the Integration Procedure.
HTTP Path URL to call. For Apex REST actions, you can use merge fields to set this property.
NOTE
Beginning with Vlocity Spring '19, you can pass percentage signs in the URL by
replacing the percentage sign in the Path with the variable $Vlocity.Percent.
HTTP Method GET, POST, PUT, or DELETE

Named Credential Salesforce named credential required for endpoint
REST Options: HTML header settings specified as key/value pairs
Header
REST Options: URL parameters specified as key/value pairs
Params
Encode URI Enable to HTML-encode the URL
Send Body Enable to send Body contents for a POST action
Timeout How long in milliseconds to wait for a response
Client Certificate For two-factor authentication, the name of the client certificate to be used.
Name
Debug Logging: Specifies information to be added to the Preview tab's Debug Output pane before or after the action is
attempted. You can log values from PropertySetMap and the following merge fields:
Pre Action Logging
and Post Action • Pre-action: %endpoint% and %body%
Logging • Post-action: %stepName + 'Info'% and %stepName + 'Info:Content-Type'%
For example:
%stepName + 'Status'%
Retry Count Number of times to retry action when it fails
XML Escape Enable to remove XML escapes from an XML response.
Response
See Also
• HTTP Action
Workflow for HTTP Action Example

An Integration Procedure retrieves the astronomy picture of the day from NASA using NASA's publicly
available REST API.

company 1933
OmniStudio
1. Add NASA as a Remote Site.

2. Get an API Key from NASA.
3. Create the Integration Procedure with the HTTP Action.
See Also
• HTTP Action
Add NASA as a Remote Site

To be able to invoke NASA REST APIs from your org, you must add NASA as a Remote Site.
1. From Setup, in the Quick Find box, type remote, then click Remote Site Settings.
3. For the Remote Site Name, enter NASA.
4. For the Remote Site URL, enter https://api.nasa.gov.
5. Click Save.
What's Next
Get an API Key from NASA
See Also
• HTTP Action
Get an API Key from NASA

You must specify an API key every time you invoke a NASA REST API. You can get this key from NASA.
1. Go to https://api.nasa.gov.
2. Enter your First Name, Last Name, and Email, then click Signup.
3. Copy the the response and save it to a text file. It looks something like this:
Your API key for [email protected] is:

YbbMNWeWX2BqxoPKXEiWWcKMgNlUHhHXgqWG5XBt
You can start using this key to make web service requests. Simply pass
your key in the URL when making a web request. Here's an example:
https://api.nasa.gov/planetary/apod?
api_key=YbbMNWeWX2BqxoPKXEiWWcKMgNlUHhHXgqWG5XBt
For additional support, please contact us. When contacting us, please tell
us what API you're accessing and provide the following account details so
we can quickly find you:

company 1934
OmniStudio
Account Email: [email protected]

Account ID: b4345628-22cd-4a1d-b610-3d9ec5ba95fd
You will need your API key to run the Integration Procedure.
4. (Optional) To see the types of data you can retrieve from NASA, click Browse APIs.
What's Next
Create the Integration Procedure with the HTTP Action
See Also
• HTTP Action
Create the Integration Procedure with the HTTP Action

After you configure NASA as a Remote Site and get a NASA API key, you can create and run the example
Integration Procedure, which retrieves the astronomy picture of the day.

3. Drag an HTTP Action component into the Structure panel and give it the following settings:
a. Set its HTTP Path to https://api.nasa.gov/planetary/apod.
b. Set its HTTP Method to GET.
c. Expand the REST OPTIONS section and click Add Param.
d. Under Params, set the Key to api_key and the Value to %ApiKey%.
4. Drag a Response Action component into the Structure panel below the HTTP Action and give it the
following settings:
a. Set its Send JSON Path to HTTPAction1.
b. Set its Send JSON Node to PictureInfo.
5. Go to the Preview tab and click Add New Key/Value Pair.
6. Set the Key to ApiKey and the Value to your NASA API key, for example
YbbMNWeWX2BqxoPKXEiWWcKMgNlUHhHXgqWG5XBt.
{
"PictureInfo": {
"url": "https://apod.nasa.gov/apod/image/2006/Eclipse-under-
bamboos1024c.jpg",
"title": "Eclipse under the Bamboo",
"service_version": "v1",
"media_type": "image",
"hdurl": "https://apod.nasa.gov/apod/image/2006/Eclipse-under-
bamboos.jpg",
"explanation": "Want to watch a solar eclipse safely? Try looking down

company 1935
OmniStudio
instead of up, though you might discover you have a plethora of images to
choose from. For example, during the June 21st solar eclipse this
confusing display appeared under a shady bamboo grove in Pune, India.
Small gaps between close knit leaves on the tall plants effectively
created a network of randomly placed pinholes. Each one projected a
separate image of the eclipsed Sun. The snapshot was taken close to the
time of maximum eclipse in Pune when the Moon covered about 60 percent of
the Sun's diameter. But an annular eclipse, the Moon in silhouette
completely surrounded by a bright solar disk at maximum, could be seen
along a narrow path where the Moon's dark shadow crossed central Africa,
south Asia, and Ch",
"date": "2020-06-26",
"copyright": "Somak Raychaudhury"
}
}
8. (Optional) Paste the url or hdurl value into your browser and view the picture.
See Also
• HTTP Action
Integration Procedure Action

The Integration Procedure Action runs a subordinate Integration Procedure.
To specify that the subordinate Integration Procedure runs asynchronously, as a Salesforce future method
(which can return no data to the calling Integration Procedure), select Remote Options and enter
useFuture: as a key and true as its value. When you run the Integration Procedure, you can see the future
call in the debug log. To pass in data as key/value pairs, use the Additional Input property.
See Also

• Workflow for Integration Procedure Action Example
Integration Procedure Action Properties

These properties are unique to or function in a unique manner in Integration Procedure Actions. The
Integration Procedure Action runs a subordinate Integration Procedure.
Integration Procedure Specifies the Integration Procedure to be run in the format Type_Subtype.
Disable Chainable If checked, disables the Chainable settings of the subordinate Integration Procedure. Doesn't affect the
Queueable settings. Unchecked by default.
This property is available in Winter '20 or later releases.

Remote Options Specifies additional properties for the Integration Procedure as key/value pairs.

company 1936
OmniStudio
Additional Input Specifies additional data for the Integration Procedure as key/value pairs.
See Also

Workflow for Integration Procedure Action Example

Parent and child Integration Procedures transform a list of paired values into a list of keys and values.
Together the parent and child Integration Procedures transform this input:
{
"InputList": [
{
"Key": "serial_number",
"Value": "ABC1234"
},
{
"Key": "install_date",
"Value": "20200101"
}
]
}
To this output:
{
"OutputList": [
{
"serial_number": "ABC1234"
},
{
"install_date": "20200101"
}
]
}
1. Create the Child Integration Procedure.

2. Create the Parent Integration Procedure.

company 1937
OmniStudio
See Also

Create the Child Integration Procedure

The child Integration Procedure renames a JSON node to the value of another JSON node and has only
one component, a Response Action.

2. Give the Integration Procedure the following settings:
Setting Value
Integration Procedure Name ValueToKey
Type Documentation
SubType ValueToKey
3. Click Save.
4. Drag a Response Action into the Structure panel and give it the following settings:
Setting Value
Send JSON Path Value
Send JSON Node %Key%
5. Click Procedure Configuration, then click Activate Version.
What's Next
Create the Parent Integration Procedure
See Also

Create the Parent Integration Procedure

The parent Integration Procedure iterates through a list and calls the child Integration Procedure for each
list item.
The parent Integration Procedure has these components:
• A Loop Block component named LoopBlock1

• An Integration Procedure Action component within the Loop Block named IntegrationProcedureAction1
• A Response Action named ResponseAction1

company 1938
OmniStudio
To create the parent Integration Procedure:

Setting Value
Loop List InputList
Additional Loop Output IntegrationProcedureAction1 set to %IntegrationProcedureAction1%
4. Drag an Integration Procedure Action within the Loop Block and give it the following settings:
Setting Value
Integration Procedure Documentation_ValueToKey
Send JSON Path InputList
5. Drag a Response Action below the Loop Block and give it the following settings:
Setting Value
Send JSON Path LoopBlock1:IntegrationProcedureAction1
Send JSON Node OutputList
8. In the Input Parameters panel, provide input with the following structure:
{
"InputList": [
{
"Key": "serial_number",

company 1939
OmniStudio
"Value": "ABC1234"
},
{
"Key": "install_date",
"Value": "20200101"
}
]
}
{
"OutputList": [
{
"serial_number": "ABC1234"
},
{
"install_date": "20200101"
}
]
}
See Also

Intelligence Action
The Intelligence Action provides input to and runs a Vlocity Intelligence Machine.
For Vlocity Intelligence information, see Vlocity Intelligence. For general property information, see Common
Integration Procedure Action Properties.
Machine Developer Specifies the name of the Intelligence Machine.
Name
Input Data Specifies values for the Input Parameters of the Intelligence Machine. Typically these are:
• ContextId — The Id of the person to whom the Intelligence Resources are directed. This is typically a
Contact, but it can be any sObject that supports Profile Attributes.
• pageSize — The number of Intelligence Resources to present to the person. This is optional. The default is
2.
Items to Rank Path Specifies the JSON path to the list of Intelligence Resources that the Intelligence Machine can offer the user.
This is optional. By default all applicable Intelligence Resources are presented.
Example: Create an Intelligence Machine and an Integration Procedure to Run It

To download DataPacks for this example:

company 1940
OmniStudio
• Click here for the Intelligence Machine, Intelligence Resource, Attribute Category, and Attribute
• Click here for the DataRaptor Load
• Click here for the Integration Procedure
The following example presents a discount coupon to Gold Star Accounts. The high-level steps to build this
example are:
1. Create a Profile Attribute Category and Attribute.

2. Create a DataRaptor Load and apply the Attribute to an Account.
3. Create an Intelligence Resource and reference the Attribute.
4. Create an Intelligence Machine and assign weights to the Attribute Category.
5. Create an Integration Procedure and retrieve the Resource for the Account.
To perform the first two steps above, see the third example in DataRaptor Load Examples.
IMPORTANT
Be sure to Preview the DataRaptor Load with a GoldStarAcct value of On and save the
Account Id you use. You will need this Id to test the Integration Procedure.
To create the Intelligence Resource:
1. Create a file and name it DiscountCoupon. The extension doesn't matter.

This can be an image, text, or PDF file. Making it look like a coupon is optional.
2. Go to the Vlocity Intelligence Resources tab and click New.
3. Give the new resource the following settings:
• Name — Discount Coupon
• Is Active — checked
• Effective Date — Today's date
4. Click Save.
5. On the Discount Coupon page, in the Headline field, type Discount Coupon.
6. Under Training Attributes, click ACCOUNTLEVEL, then click GoldStarAcct.
7. Click Upload Image.
8. Browse for the file you created and click Open. When the Edit window appears, click Save.
To create the Intelligence Machine:
1. Go to the Vlocity Intelligence Machines tab and click New.

2. For the Intelligence Machine Name and the REST Resource Name, type Gold Account Offers.
3. Click Save.
4. On the Gold Account Offers page, click in the Select a Resource field.

company 1941
OmniStudio
5. Select Discount Coupon from the list and click the + icon to add it.
6. Go to the WEIGHTINGS tab.
7. Click in the Select a Category field and select AccountLevel from the list.
8. Use the sliders to assign the following activity weights: View 80, Accept 60, Reject 40, Decay 20.
To create the Integration Procedure:

3. Drag an Intelligence Action component into the Structure panel.
4. In the Intelligence Action, specify a Machine Developer Name of Gold Account Offers.
5. Under Input Data, click Add Key/Value Pair. Specify a Key of ContextId and a Value of
%AccountId%.
6. Drag a Response Action into the Structure panel. Set the Send JSON Path to
IntelligenceAction1.
8. Under Input Parameters, click Add New Key/Value Pair. Specify a Key of AccountId.
9. For the Value, specify the Id of the Account to which you applied the GoldStarAcct Attribute.
10. Click Execute. The Response should look something like this:
[
{
"targetObjectType": null,
"targetObjectKey": null,
"virtualResourceId": null,
"virtualResourceData": null,
"rejectLast": null,
"rejectDecay": 0,
"acceptLast": null,
"acceptDecay": 0,
"viewLast": null,
"viewDecay": 0,
"currentMachine": "Gold Star Offers",
"contextId": "0016g00000BtNb1AAF",
"info": null,
"attachment": {
"DiscountCoupon": "00P6g000002TJnlEAG"
},
"formattedAggregatedScore": 0,
"aggregatedScore": 0,
"componentScores": [
{
"scoreParameters": [],
"scaledScore": 0,
"normalizedScore": 0,

company 1942
OmniStudio
"rawMaxScore": 0,
"rawMinScore": 0,
"rawMultiplier": 1,
"rawScore": 0,
"scoringComponentName": "VqScoringImplProfileMatch"
}
],
"resource": {
"vlocity_ins__IsActive__c": true,
"vlocity_ins__Headline__c": "Discount Coupon",
"vlocity_ins__EffectiveDate__c": "2020-02-10T08:00:00.000Z",
"SystemModstamp": "2020-02-11T22:07:37.000Z",
"LastModifiedById": "0056g000003eBMaAAM",
"LastModifiedDate": "2020-02-11T22:07:37.000Z",
"CreatedById": "0056g000003eBMaAAM",
"CreatedDate": "2020-02-11T22:07:23.000Z",
"Name": "Discount Coupon",
"IsDeleted": false,
"OwnerId": "0056g000003eBMaAAM",
"Id": "a5o6g000000MOd5AAG"
}
}
]
List Merge Action

The List Merge Action merges multiple lists by matching values of specified list item JSON nodes. A basic
merge matches node names exactly. An advanced merge matches nodes that have different names and/or
reside at different levels in the incoming lists.
TIP
The inputs to a List Merge Action must each be in list format even if the list contains only
one item. DataRaptor Extracts that return a list with one item often convert it to a single
object. To convert a single object back into a list, you can use the first example in
DataRaptor Transform Examples.
For more list processing options, see List Input for DataRaptors and the AVG, FILTER, IF, LIST,
LISTMERGE, LISTMERGEPRIMARY, LISTSIZE, MAX, MIN, SORTBY, and SUM functions in the Function
Reference.
To match nodes that have different names and/or reside at different levels in the incoming lists, click
Advanced Merge and specify settings for the nodes to be matched, as follows:

company 1943
OmniStudio
• List Key: Enter the name of the JSON list node where the node to be matched resides.
• Matching Path: Enter the path within the list to the node to be matched.
• Matching Group: Specify the same number for all nodes you want to match.
NOTE
Older versions have a Normalize Key setting instead of a Matching Group setting, and
you must specify the same key for each matching node. This key is only for matching and
doesn't appear in the output.
For example, the following figure shows how to match first and last names from two incoming lists in which
the nodes have different names.
See Also
• List Merge Action Properties

• Workflow for List Merge Action Examples
List Merge Action Properties

These properties are unique to or function in a unique manner in List Merge Actions. The List Merge Action
merges multiple lists by matching values of specified list item JSON nodes.
Merge Lists Specifies the order in which lists are merged. If a list contains a value for a key that was populated by an earlier
Order list, the later entry overwrites the earlier one.

company 1944
OmniStudio
Merge Fields The name of the JSON nodes that must match for entries to be merged. To specify nodes below the top level of the
JSON structure, use colon-delimited paths. By default, the nodes in both lists are assumed to have identical names
and reside at the same level. If you do not specify merge fields, the lists are merged into a single list but nodes with
matching keys are not merged. To match a value that resides in a JSON list, append |index to its path. For
example, to match value1 in the list2 list below, specify list1:node1:node2:list2|1 as the merge field.
{
"list1": {
"node1": {
"node2": {
"list2": [
"value1",
"value2"
]
}
}
}
}
Advanced Matches nodes that have different names and/or reside at different levels in the incoming lists. See List Merge
Merge Action.
NULL is a Valid When merge fields are all null, specifies whether to treat them as matching.
Matching Value
when Merging
Has Primary Lets you specify an allowlist of keys to be retained in the output.
Primary List (Optional) Allows the list of entries to be retained after the merge is performed. If you specify a primary list, only
Key entries from that list are retained in the output.
Filter List Specifies a formula that is run on each node of the list to determine if it remains in the list. If FormulaResult returns
Formula TRUE after evaluating a node, the node is retained; otherwise the node is removed. For example, you can specify
nodename != "" to remove null values from a list.
Dynamic Output By default, all nodes are returned. To return a specified subset of the result nodes, add a node to the input JSON
Fields and set its value to a comma-separated list of the desired node names. Do not use spaces in this list. Set this
property to the name of the node containing this list of node names.
Sort By Specifies one or more keys on which the output list is sorted.
Update Field Enables you to assign a value or specify a formula that can evaluate and conditionally replace values in the output
Value list. To specify a formula, precede the expression with "=". For example, to replace blank first or last names with
"None Specified," add the entries shown in the following figure.
For more information, see Function Reference.
See Also
• List Merge Action


company 1945
OmniStudio
Workflow for List Merge Action Examples

Three Integration Procedures with List Merge Actions demonstrate a basic list merge, an advanced list
merge, and a list merge with dynamic output fields. Each example builds on the previous example.
To build these examples:
1. Create a Basic List Merge Example.

2. Create an Advanced List Merge Example.
3. Create a List Merge Example with Dynamic Output Fields.
See Also
Create a Basic List Merge Example

The first Integration Procedure retrieves all Contacts with the same AccountId in two lists, one containing
addresses, the other birthdates. It then merges the two lists into one.
1. A DataRaptor Extract Action component named DRExtractAddresses

2. A DataRaptor Extract Action component named DRExtractBirthdates
3. A List Merge Action named ListAction1
4. A Response Action named ResponseAction1

company 1946
OmniStudio
1. Create the DataRaptor Extract that the DRExtractAddresses component calls. Name it GetAddresses
Tab Settings
Extract A Contact extract step set to contact AccountId = id
Output The following mappings:
• contact:Id to contact:id
• contact:FirstName to contact:firstName
• contact:LastName to contact:lastName
• contact:MailingStreet to contact:street
• contact:MailingCity to contact:city
• contact:MailingState to contact:state
Examples.
2. Create the DataRaptor Extract that the DRExtractBirthdates component calls:
a. Clone the GetAddresses DataRaptor and name the clone GetBirthdates.
b. On the Output tab, delete the city, state, and street mappings.
c. Add a mapping from contact:Birthdate to contact:birthdate.
5. Drag the first DataRaptor Extract Action component into the Structure panel. Give it an Element Name
of DRExtractAddresses and a DataRaptor Interface of GetAddresses.
6. Drag the second DataRaptor Extract Action component into the Structure panel below the first. Give it
an Element Name of DRExtractBirthdates and a DataRaptor Interface of GetBirthdates.
7. Drag a List Merge Action component into the Structure panel below the second DataRaptor Extract
Action component. Give it the following settings:
Setting Values
MERGE LISTS ORDER DRExtractAddresses:contact
DRExtractBirthdates:contact
MERGE FIELDS id
SORT BY lastName
firstName
8. Drag a Response Action component below all the others. Give it a Send JSON Path of ListAction1
and a Send JSON Node of contactMerge.
9. On the Preview tab, in the Input Parameters pane, click Add New Key/Value Pair. Enter id as
the Key and an Account Id from your org as the Value.
{
"contactMerge": [
{

company 1947
OmniStudio
"birthdate": "1975-10-03",
"street": "300 Broadway",
"state": "FL",
"city": "Orlando",
"lastName": "Jones",
"id": "0036100001E5xrWAAR",
"firstName": "Cathy"
},
{
"birthdate": "1976-10-04",
"street": "400 Washington Blvd",
"state": "AZ",
"city": "Phoenix",
"id": "0036100001E5xrvAAB",
"firstName": "Doug"
},
{
"birthdate": "1973-10-01",
"street": "100 Main Street",
"state": "CA",
"city": "San Francisco",
"lastName": "Smith",
"id": "0036100001E5xqnAAB",
"firstName": "Albert"
},
{
"birthdate": "1974-10-02",
"street": "200 Second Street",
"state": "OR",
"city": "Portland",
"id": "0036100001E5xr2AAB",
"firstName": "Ben"
}
]
}
What's Next
Create an Advanced List Merge Example
See Also


company 1948
OmniStudio
Create an Advanced List Merge Example

The next Integration Procedure is a modified version of the previous example. Instead of matching list items
using Id fields, it uses the Advanced Merge feature to match first and last names.
1. Create a Basic List Merge Example.

2. Clone the GetBirthdates DataRaptor and name it GetBirthdates2. On the Output tab, change the
Output JSON Path values from contact:firstName to contact:FN and from
contact:lastName to contact:LN.
3. In the Integration Procedure, in the DRExtractBirthdates component, change the DataRaptor Interface
to GetBirthdates2.
4. In the Integration Procedure, in the List Merge Action, check Advanced Merge and add the following
rows to the Advanced Merge Map table:
List Key Matching Path Matching Group

DRExtractAddresses:contact firstName 1
DRExtractBirthdates:contact FN 1
DRExtractAddresses:contact lastName 2
DRExtractBirthdates:contact LN 2
5. On the Preview tab, click Execute. The output should look something like this:
{
"contactMerge": [
{
"LN": "Jones",
"FN": "Cathy",
"birthdate": "1975-10-03",
"state": "FL",
"city": "Orlando",
"id": "0036100001E5xrWAAR",
},
{
"LN": "Jones",
"FN": "Doug",
"birthdate": "1976-10-04",
"state": "AZ",
"city": "Phoenix",
"id": "0036100001E5xrvAAB",
"firstName": "Doug"
},

company 1949
OmniStudio
{
"LN": "Smith",
"FN": "Albert",
"birthdate": "1973-10-01",
"state": "CA",
"id": "0036100001E5xqnAAB",
},
{
"LN": "Smith",
"FN": "Ben",
"birthdate": "1974-10-02",
"state": "OR",
"city": "Portland",
"id": "0036100001E5xr2AAB",
"firstName": "Ben"
}
]
}
What's Next
Create a List Merge Example with Dynamic Output Fields
See Also

Create a List Merge Example with Dynamic Output Fields

The final Integration Procedure is a modified version of the previous example. It uses Dynamic Output
Fields to eliminate the duplicate FN and LN JSON nodes from the output.
1. Create an Advanced List Merge Example.

2. In the List Merge Action, give the Dynamic Output Fields setting a value of include.
3. On the Preview tab, in the Input Parameters pane, click Add New Key/Value Pair. Enter include as
the Key and birthdate,street,state,city,lastName,firstName,id as the Value. Note
that only commas, and not spaces, separate the node names.

company 1950
OmniStudio
{
"contactMerge": [
{
"birthdate": "1975-10-03",
"state": "FL",
"city": "Orlando",
"id": "0036100001E5xrWAAR",
},
{
"birthdate": "1976-10-04",
"state": "AZ",
"city": "Phoenix",
"id": "0036100001E5xrvAAB",
"firstName": "Doug"
},
{
"birthdate": "1973-10-01",
"state": "CA",
"id": "0036100001E5xqnAAB",
},
{
"birthdate": "1974-10-02",
"state": "OR",
"city": "Portland",
"id": "0036100001E5xr2AAB",
"firstName": "Ben"
}
]
}
See Also


company 1951
OmniStudio
Matrix Action
The Matrix Action calls a calculation matrix with specified inputs and returns the result to the Integration
Procedure.
See Also
• Matrix Action Properties

• Workflow for Matrix Action Example
• Calculation Matrices
Matrix Action Properties

These properties are unique to or function in a unique manner in Matrix Actions. The Matrix Action calls a
calculation matrix with specified inputs and returns the result to the Integration Procedure.
Matrix Input Parameters: Data Source Name of a data JSON node in the Integration Procedure that contains a value to pass to the
calculation matrix
Matrix Input Parameters: Filter Value Name of the corresponding calculation matrix input parameter that accepts the value
Matrix Name Calculation matrix name
Remote Options Additional options to pass to the calculation matrix
Default Matrix Result Value to return if the calculation matrix returns null
See Also
• Matrix Action
Workflow for Matrix Action Example

An Integration Procedure invokes a calculation matrix. The matrix applies a 15% discount to a quoted
amount for an age between 16 and 24 and a GPA of 3.0 or greater.
1. Create the GoodStudentDiscountEligibility Calculation Matrix.

2. Create the Integration Procedure That Invokes the Calculation Matrix.
See Also
• Matrix Action
• Matrix Action Properties

company 1952
OmniStudio
Create the GoodStudentDiscountEligibility Calculation Matrix

Before you can create the Integration Procedure example with a Matrix Action, you must create
the GoodStudentDiscountEligibility calculation matrix that it calls. This matrix returns a Qualified value of
true for an Age between 16 and 24 and a GPA of 3.0 or greater.
1. From the Vlocity Calculation Matrices tab, click New.

2. In the New Vlocity Calculation Matrices window, choose Standard.
Some Vlocity versions don't present this choice.
3. In the Calculation Matrix Name box, type GoodStudentDiscountEligibility.
4. Click Save. The record page for the new matrix opens.
5. On the record page, click the Related tab.
6. Click the GoodStudentDiscountEligibility V1 link. This is version 1 of the matrix.
7. In the Table section, click Add Header three times. Enter the following information for each header:
Header Name Header Type Data Type Matrix Display Order

Age Input Number Range 1
GPA Input Number Range 2
Qualified Output Boolean 3
8. Click Save Data, then click Edit Data.
9. In the resulting table, enter the following values:
Age GPA Qualified

15 2 false
15 3 false
16 2 false
16 3 true
25 2 false
25 3 false
For details about how number ranges work, see Numeric Ranges in Calculation Matrices.
10. Click Save Data again.
11. Click the pencil icon to the right of the Enabled checkbox and check the box.
12. If the Priority setting has no value, enter a value of 1.
13. Click Save. The finished matrix version looks like this:

company 1953
OmniStudio
What's Next
Create the Integration Procedure That Invokes the Calculation Matrix
See Also
• Matrix Action
• Create a Calculation Matrix Manually
Create the Integration Procedure That Invokes the Calculation Matrix

An Integration Procedure calls the GoodStudentDiscountEligibility calculation matrix and returns its result.

3. Drag a Matrix Action component into the Structure panel.
4. From the Matrix Name drop-down list, select GoodStudentDiscountEligibility.
5. Add the following Matrix Input Parameters:
Data Source Filter Value

Age Age
GPA GPA
Property Value
Send JSON Path MatrixAction1:Qualified
Send JSON Node Qualified

company 1954
OmniStudio
8. In the Input Parameters panel, add the following Key/Value pairs:
Key Value
Age 23
GPA 3.2
{
"Qualified": "true"
}
10. Set the Age and GPA to different values, click Execute, and observe the results.
See Also
• Matrix Action
OmniForm Action
The OmniForm Action launches the specified OmniForm.
For pre-processing actions to be executed before the OmniForm is displayed, add one or more Integration
Procedure steps before the step that contains the OmniForm. For post-processing, add a single Integration
Procedure step following the OmniForm step. The post-processing step is executed when the user clicks
Submit.
Type Determines the Salesforce tab on which the script is listed.
Sub Type Determines how the script displays on the tab’s child menu
Language The language of the OmniForm. If the language is "Multi-Language," you must specify the target language by creating a
LanguageCode key/value pair in Remote Options. You can specify the language code using a merge field, which enables
the caller to configure the language dynamically, as shown in the following figure.
See Also
• OmniForm
Remote Action
A Remote Action calls the specified Apex class and method. You can also pass in invocation options and
data.

company 1955
OmniStudio
If the data a Remote Action returns isn't in Map<String, Object> format, an Integration Procedure or
DataRaptor might not be able to process it. You can convert the data in one of these ways:
• In the Remote Action, under Remote Options, add a Key named reserialize with a Value of true.
• In a subsequent Set Values step, use the RESERIALIZE function on the Remote Action's output.
For information about related functions such as DESERIALIZE and SERIALIZE, see the Function
Reference.
An error message that begins with Invalid conversion from runtime type String often
indicates a need to reserialize data.
See Also
• Remote Action Properties

• Workflow for Remote Action Example
Remote Action Properties

These properties are unique to or function in a unique manner in Remote Actions. A Remote Action calls
the specified Apex class and method. You can also pass in invocation options and data.
Remote Class Vlocity Open Interface Class
Remote Method Vlocity Open Interface Method
Remote Options Additional class invocation options
Additional Input Data passed to the method
See Also
• Remote Action
Workflow for Remote Action Example

An Integration Procedure uses a Remote Action to call an Apex class and demonstrate how to reserialize
data.
To download a DataPack of this example, click here. The DataPack does not include the Apex class.
1. Create the TestReserializeApex Class.

2. Create the Integration Procedure with the Remote Action.
3. Test the Integration Procedure with the Remote Action.

company 1956
OmniStudio
See Also
• Remote Action
Create the TestReserializeApex Class

Before you can create the Integration Procedure example, you must create the TestReserializeApex
Apex class that it calls.

3. Click New.
@JsonAccess(serializable='always')
global with sharing class TestReserializeApex implements
vlocity_ins.VlocityOpenInterface2 {
Map<String,Object> output, Map<String,Object> options) {
return output.put('result', new TestReserialize());
}
@JsonAccess(serializable='always')
global public class TestReserialize {
global public String name = 'Dave Smith';
}
}
Replace vlocity_ins with the namespace for your org if necessary. Depending on your industry, the
namespace is vlocity_ins, vlocity_cmt, or vlocity_ps.
Also note the use of the JsonAccess annotation on the class and method.
5. Click Save.
What's Next
Create the Integration Procedure with the Remote Action

company 1957
OmniStudio
See Also
• Remote Action
Create the Integration Procedure with the Remote Action

An Integration Procedure retrieves and reserializes the value of a name variable from the
TestReserializeApex Apex class.
• A Remote Action, named ReserializeApex

• A Set Values component, named ReserializeApexFunction
• A Set Values component, named MyName
• A Response Action, named ResponseAction1

3. Drag a Remote Action component into the Structure panel and give it the following settings:
Property Value
Element Name ReserializeApex
Remote Class TestReserializeApex

company 1958
OmniStudio
Property Value
Remote Method random
Remote Options, Key reserialize
Remote Options, Value false
A Remote Method value is required, but it can be anything, because this Integration Procedure
doesn't invoke a method.
A step in the test of this Integration Procedure will ask you to change the Remote Options Value.
Property Value
Element Name ReserializeApexFunction
Element Value Map, Element Name result
Element Value Map, Value =RESERIALIZE(%ReserializeApex%)
Response JSON Path result
Response JSON Node ReserializeApex
5. Drag another Set Values component into the Structure panel and give it the following settings:
Property Value
Element Name MyName
Element Value Map, Element Name Full Name
Element Value Map, Value %ReserializeApex:result:name%
6. Drag a Response Action component into the Structure panel and check the Return Full Data JSON
checkbox.
What's Next
Test the Integration Procedure with the Remote Action
See Also
• Remote Action
Test the Integration Procedure with the Remote Action

After you have created the example Integration Procedure with the Remote Action, the final task is to test it.
1. Go to the Preview tab and click Execute. The output should look like this:
{
"response": {},
"vlcchainableStepDepth": 0,
"MyName": {
"Full Name": "Dave Smith"

company 1959
OmniStudio
},
"MyNameStatus": true,
"ReserializeApexFunctionStatus": true,
"ReserializeApex": {
"result": {
"name": "Dave Smith"
},
"errorCode": "INVOKE-200",
"error": "OK"
},
"ReserializeApexStatus": true,
"options": {
"chainable": false
}
}
Note that this Integration Procedure successfully passes the value of the name variable in the Apex
class to its Full Name node.
2. Go to the Properties tab, select the ReserializeApexFunction component, and click Active to remove
the check. This turns off reserialization.
3. Go to the Preview tab and click Execute again. The output should look like this:
{
"response": {},
"MyName": {
"Full Name": ""
},
"result": {
},
"error": "OK"
},
"options": {
"chainable": false

company 1960
OmniStudio
}
}
Note that the Full Name node has no value.

4. Go to the Properties tab, select the ReserializeApex component, and change the Remote Options
Value to true. This enables reserialization in a different way.
5. Go to the Preview tab and click Execute a third time. The output should look like this:
{
"response": {},
"MyName": {
"Full Name": "Dave Smith"
},
"error": "OK",
"result": {
}
},
"options": {
"chainable": false
}
}
Note that the Full Name node has a value again.
See Also
• Remote Action
Response Action
The Response Action ends an Integration Procedure and returns data to the entity that called it. It can also
add data to the data JSON or end conditionally. Response Actions are useful for debugging Integration
Procedures.
Response Actions are also useful for trimming the data response. For specific trimming strategies, see

company 1961
OmniStudio
For Integration Procedure examples that include at least one Response Action, see Process Arrays Using
Loop Blocks, Handle Errors Using Try-Catch Blocks, and Integration Procedure Action.
See Also
• Response Action Properties
Response Action Properties

These properties are unique to or function in a unique manner in Response Actions. The Response Action
ends an Integration Procedure and returns data to the entity that called it.
Additional Output Key/value pairs to add to data JSON. Can merge other data. To specify a level below the top level for a key/
value pair, use a colon-delimited path in the Key field. For example:
Key Field: Key1:Key2
Resulting JSON:
{
"Key1":
{
"Key2": "Value"
}
}
Return Only Enable to discard data other than the key/value pairs defined as additional output. If you enable this option,
Additional Output disable Return Full Data JSON.
Return Full Data Enable to return entire data JSON. If you enable this option, disable Return Only Additional Output.
JSON
Response Headers To add data to the response header, add key/value pairs to this property. To override the HTTP status code
returned in the header, create a key named StatusCode and assign it a valid HTTP response value.
Execution Conditional Ends the Integration Procedure only if the specified condition is true.
Formula
See Also
• Response Action
Integration Procedure Best Practices

To maximize the benefits of Integration Procedures, follow the best practices whenever possible.
• Use Integration Procedures for all data calls to Salesforce.

• Use a Response Action to trim the data and only return what is needed. For specific trimming strategies,
see Manipulate JSON with the Send/Response Transformations Properties.
• Use multiple Response Actions with different Execution Conditional Formulas to allow an Integration
Procedure to exit early under appropriate conditions.
• Use caching to store frequently accessed, infrequently updated data. See Cache for DataRaptors and
• To run data operations asynchronously, call Integration Procedures using these settings:

company 1962
OmniStudio
• Use Future — Use when the calling OmniScript or Integration Procedure doesn't need a response and
completion time is not critical.
• Invoke Mode: Fire and Forget — Use instead of Use Future when the calling OmniScript must invoke
the Integration Procedure immediately.
• Invoke Mode: Non-Blocking — Use to run the Integration Procedure immediately while continuing the
user interaction of the calling OmniScript. A response is returned when the Integration Procedure is
complete.
For more information about these settings, see Common Action Element Properties, Integration
Procedure Action, and Integration Procedure Action.
To determine whether a DataRaptor or an Integration Procedure is best for your use case, see DataRaptor
or Integration Procedure?.
Cache for DataRaptors and Integration Procedures

Using a cache to store frequently accessed, infrequently updated DataRaptor and Integration Procedure
data saves round trips to the database and improves performance.
Caching of DataRaptor and Integration Procedure metadata and Integration Procedure data is available in
Summer '19 and later releases. Caching of DataRaptor data is available in Spring '20 and later releases.
You can use caching with DataRaptors in three ways:
• DataRaptor metadata is always cached if you allocate space in the VlocityMetadata cache partition as
described below.
• You can configure data caching on the Options tab of DataRaptor Extracts, Turbo Extracts, and
Transforms.
• If you call a DataRaptor from an Integration Procedure that uses caching, the DataRaptor data is cached
along with the Integration Procedure data.
You can use caching with Integration Procedures in three ways:
• You can cache metadata for the entire Integration Procedure.

• You can cache the response of the entire Integration Procedure, called top-level data. See Cache for
Top-Level Integration Procedure Data.
• You can cache the result of a specific set of steps by placing the steps inside a Cache Block. See
Enhance Performance Using Cache Blocks.
Use Cache Blocks if some parts of the Integration Procedure update data and therefore shouldn't be
cached, or if different cached data should expire at different times. For example, current weather data
changes more frequently than user session data.
You can also perform a record-level security check for cached data. See Security for DataRaptors and
Metadata Cache for DataRaptors and Integration Procedures

Before you can cache Integration Procedure and DataRaptor metadata, you must allocate space in the
VlocityMetadata cache partition. See Allocate Space in the Platform Cache Partitions. Then Integration
Procedure metadata is cached by default and DataRaptor metadata is always cached.

company 1963
OmniStudio
To disable metadata caching for an Integration Procedure, go to the Procedure Configuration and check the
Disable Definition Cache checkbox.
TIP
To test the performance benefit of metadata caching, execute the Integration Procedure in
the Preview tab with Disable Definition Cache checked and then unchecked. Compare
the Browser, Server, and Apex CPU values.
Behind this checkbox is the DisableDefinitionCache__c boolean field, which defaults to false.
Methods to Clear Metadata from the Cache

If you need to clear DataRaptor metadata from the cache, follow the instructions in this topic, but execute
one of these lines of code instead:
namespace.DRGlobal.clearCacheForDataRaptor('DataRaptorName');
namespace.vlocity.cmt.DRGlobal.clearCacheForAllDataRaptor();
If you need to clear Integration Procedure metadata from the cache, follow the instructions in this topic, but
execute this line of code instead, specifying the Integration Procedure's Type and Subtype:
IntegrationProcedureService.clearMetadataCache('Type_Subtype');
To clear all cached data for an Integration Procedure, including session cache data, org cache data, and
metadata, follow the instructions in this topic, but execute this line of code instead, specifying the

company 1964
OmniStudio
Cache for Top-Level Integration Procedure Data

Using a cache to store frequently accessed, infrequently updated Integration Procedure data saves round
trips to the database and improves performance. You can cache all the data for an Integration Procedure,
as described here, or you can use a Cache Block to cache only part of it.
Caching of top-level Integration Procedure data is available in Summer '19 and later releases.
It's important to allocate space in the VlocityAPIResponse cache partition and to understand how top-level
Integration Procedure caching interacts with Cache Blocks. See Cache for DataRaptors and Integration
Procedures.
To configure top-level caching for an Integration Procedure, go to the Procedure Configuration and set the
Salesforce Platform Cache Type and Time To Live In Minutes properties. See Configure Top-Level
Caching for an Integration Procedure.
NOTE
If an Integration Procedure that has top-level caching enabled fails, its data isn’t cached.
Options in Preview for Top-Level Caching

When you test an Integration Procedure that uses top-level caching in the Preview tab, you can use two
caching settings in the Options JSON section. These settings control top-level data and have no effect on
the metadata cache.
• ignoreCache — Doesn't clear or save data to the cache. The default value is true. Use this setting to
test Integration Procedure steps without the possible interference of caching effects.
• resetCache — Forces data to be saved to the cache. The default value is false. Use this setting as
part of testing caching itself.
NOTE
To test caching, be sure to set ignoreCache to false. See Create a Top-Level Caching
Example.
The Options pane on the Preview tab looks like this:

company 1965
OmniStudio
You can pass ignoreCache and resetCache as parameters when you invoke an Integration Procedure that
uses caching using a REST API. For example, you can include ?resetCache=true in the URL to force
caching. See Integration Procedure Invocation Using POST.
Top-Level Caching JSON Nodes and REST Headers

If top-level caching is configured and the Integration Procedure is active, the Integration Procedure JSON
can include the following nodes under the root node:
• vlcCacheKey — Key for any data stored in the cache

• vlcCacheResult — Included and set to true if data is retrieved from the cache
• vlcCacheEnabled — Included and set to false if the ignoreCache setting disables caching
• vlcCacheException — Any caching errors
These nodes are returned as headers if you invoke an Integration Procedure that uses top-level caching
using a REST API. See Integration Procedure Invocation Using POST.
Methods for Clearing Top-Level Data

If you must clear top-level Integration Procedure data from the cache, follow the instructions in this topic,
but execute one of these lines of code instead:
IntegrationProcedureService.clearSessionCache('Type_Subtype', new Map<String,

Object>{'key' => 'value'});
IntegrationProcedureService.clearOrgCache('Type_Subtype', new Map<String,

Object>{'key' => 'value'});
IntegrationProcedureService.clearSessionCache('vlcCacheKey');

company 1966
OmniStudio
IntegrationProcedureService.clearOrgCache('vlcCacheKey');
You can clear all cached data for an Integration Procedure, including session cache data, org cache data,
and metadata. Follow the instructions in this topic, but execute this line of code instead, specifying the
For example, execute the following code if:
• You want to clear data in the Org Cache

• The Type_Subtype parameter for the Integration Procedure is LastNames_Cached
• The key you want to clear is ContactLastName
• The key's value is Smith
IntegrationProcedureService.clearOrgCache('LastNames_Cached', new Map<String,

Object>{'ContactLastName' => 'Smith'});
The following example clears the session cache using a vlcCacheKey value:
IntegrationProcedureService.clearSessionCache('2032076016a1745801061oc');
Configure Top-Level Caching for an Integration Procedure

To configure top-level caching for an Integration Procedure, go to the Procedure Configuration and set the
Salesforce Platform Cache Type and Time To Live In Minutes properties.
1. Go to the Procedure Configuration.

2. In the Cache Configuration section, set the Salesforce Platform Cache Type to one of the following:
• Blank — For no caching
• Session Cache — For data related to users and their login sessions
• Org Cache — For all other types of data
Behind this drop-down is the IsCacheable__c picklist.

3. Specify a value for Time To Live In Minutes. This setting determines how long data remains in the
cache. The minimum value is 5. Default and maximum values depend on the cache type:

company 1967
OmniStudio
• Session Cache — The default value is 5. The maximum value is 480, equivalent to 8 hours. The
cache is cleared when the user's session expires regardless of this value.
• Org Cache — The default value is 1440, equivalent to 24 hours. The maximum value is 2880,
equivalent to 48 hours.
Top-level caching overrides Cache Block caching for the duration of the top-level Time To Live In
Minutes value. Top-level and Cache Block data is cleared when the Integration Procedure is
deactivated regardless of this value.
4. Click Activate Version. Top-level caching occurs only if the Integration Procedure is active.
See Also
• Cache for Top-Level Integration Procedure Data
Create a Top-Level Caching Example

An Integration Procedure accepts a list of first or last names and retrieves Contacts having those names.
Top-level caching to the VlocityAPIResponse partition improves Contact retrieval performance.
This Integration Procedure also includes a Loop Block; see Process Arrays Using Loop Blocks.
This Integration Procedure has these components:
1. A Loop Block, named LoopBlock1

2. A DataRaptor Extract Action within the Loop Block, named ExtractContact
3. A Response Action, named ResponseAction

company 1968
OmniStudio

3. In the Procedure Configuration, set the Salesforce Platform Cache Type to Org Cache.
4. Drag a Loop Block component into the Structure panel. Give the Loop Block the following settings:
Property Value
Loop List names
Additional Loop Output ExtractContact set to %ExtractContact%
5. Create the DataRaptor Extract that the DataRaptor Extract Action calls, name it ExtractContactName,
Tab Settings
Extract A Contact extract step set to Contact Name LIKE name
Output A mapping from Contact:Id to Contact:Id
A mapping from Contact:Name to Contact:Name
Examples.
6. Drag a DataRaptor Extract Action inside the Loop Block and give it the following settings:
Property Value
Element Name ExtractContact
DataRaptor Interface ExtractContactName
Data Source names:name
Filter Value name
7. Create the Response Action below the Loop Block and give it the following settings:
Property Value
Send JSON Path LoopBlock1:ExtractContact
Response JSON Node Contact
8. In the Procedure Configuration, click Activate Version.
9. On the Preview Tab, click Edit as JSON and provide input with the following structure:
{
"names": [
{
"name": "Miller"
},
{
"name": "Torres"
}
]
}
To demonstrate performance most effectively, specify common and/or many names.

company 1969
OmniStudio
10. Click Execute and note the resulting Browser, Server, and Apex CPU values.
11. Open the Options pane and change the ignoreCache value to false.
12. Click Execute again. This step populates the cache, so the resulting Browser, Server, and Apex CPU
values should be similar to the previous values.
13. Click Execute a third time. This step uses the cached values, so the resulting Browser, Server, and
Apex CPU values should be noticeably less than the previous values. In addition, Cached
Response: true appears after the performance metrics.
Error Handling in Integration Procedures

You can configure the conditions for success or failure of an Integration Procedure action or group of
actions. You can also configure error logging.
In each step, you can set the following properties:
• Failure Conditional Formula: Specify a formula that evaluates to TRUE if the step has failed to execute
successfully. See the second example in Handle Errors Using Try-Catch Blocks.
• Fail On Step Error: Enable this option to terminate the Integration Procedure if the conditional formula
determines that the step has failed.
NOTE
An action that returns a list cannot use returned data in its Failure Conditional Formula.

company 1970
OmniStudio
To configure conditions and behavior for the success and failure of a group of actions, you can use a Try-
Catch Block. See Handle Errors Using Try-Catch Blocks.
To add debugging information to the Data JSON, use Response Actions. For details, see Response Action.
HTTP actions add details about the results of the call to the Data JSON ElementNameInfo node as
follows:
• Response headers, for example, Content-Type

• Status of the response
• Status code, for example, 200
See Also
• Enable Error Logging

• Send Data to the Error Log
Enable Error Logging

In Winter '20 and later releases, you can write Integration Procedure errors to Vlocity Error Log Entry
SObject records by setting ErrorLoggingEnabled to true. ErrorLoggingEnabled is a Custom Setting under
General Settings.
1. Go to Setup.

company 1971
OmniStudio
6. Click New.
7. Enter a Name of ErrorLoggingEnabled and a Value of true.
8. Click Save.
See Also
• Error Handling in Integration Procedures

• Send Data to the Error Log
Send Data to the Error Log

By default, the input to a failed step is sent to the InputData__c field in a Vlocity Error Log Entry SObject
record. You can send data to a different Vlocity Error Log Entry field if a step fails.
1. In the step, under Failure Response, click Add Key/Value Pair.

2. Enter a Key that matches the name of the Vlocity Error Log Entry field without the __c suffix.
For example, to send data to the ErrorMessage__c field, set the Key to ErrorMessage.
This name-matching procedure also works for any custom fields you add to the Vlocity Error Log Entry
SObject. For example, if you add a custom field named LongTextMessage__c, use a Failure Response
Key of LongTextMessage.
3. For the Value, enter text that describes the error, such as Name not found.
4. To view Vlocity Error Log Entry SObject records, you can:
• Go to Tabs in Setup, and create a new Custom Tab for the Vlocity Error Log Entry SObject. For
details, see Create a Custom Object Tab in the Salesforce help.

company 1972
OmniStudio
• Create a Lightning Record Page for Vlocity Error Log Entry records. Follow the instructions in
Building an Account Lightning Record Page, but apply them to the Vlocity Error Log Entry SObject
instead of the Account SObject.
See Also
• Error Handling in Integration Procedures

• Enable Error Logging
Environment Variables in DataRaptors and Integration Procedures

You can use environment variables to define Default Values and Filter Values, and in Formulas.
For example, the following filter extracts the Cases created in the last 30 days.
If you are using an environment variable as a Filter value, you must double-quote it.
Environment Variable Description

$Vlocity.TODAY Today’s date
$Vlocity.TOMORROW Tomorrow’s date
$Vlocity.NOW Current date and time
$Vlocity.N_DAYS_FROM_NOW:{N} The date the specified number of days from now
$Vlocity.N_DAYS_AGO:{N} The date the specified number of days ago
$Vlocity.NULL Null
$Vlocity.StandardPricebookId Id of the standard pricebook
$Vlocity.DocumentsFolderId Documents folder Id
$Vlocity.true or $Vlocity.TRUE Boolean TRUE
$Vlocity.false or $Vlocity.FALSE Boolean FALSE
$Vlocity.UserId Current user Id
$Vlocity.Percent Percent character. Useful for escaping % characters in URLs so they aren't mistaken for merge
field syntax.
$Vlocity.CpuTotal Apex CPU value
$Vlocity.DMLStatementsTotal Number of Data Manipulation Language statements
$Vlocity.DMLRowsTotal Number of Data Manipulation Language rows
$Vlocity.HeapSizeTotal Heap size value
$Vlocity.QueriesTotal Number of queries run
$Vlocity.QueryRowsTotal Number of query rows fetched
$Vlocity.SoslQueriesTotal Number of SOSL queries run

company 1973
OmniStudio
External Objects in Integration Procedures

Integration Procedures support Salesforce External Objects. The external data can come from any source
that can be accessed using a REST endpoint. The returned data can be rendered as JSON or XML.
Here's how it works:
1. In Salesforce, you perform an operation against the Vlocity external object, for example, in Apex code,
in a report, or by issuing a SOQL query.
2. The Vlocity external object handler calls the Integration Procedure that implements the external object,
passing in a JSON payload that contains details about the request.
3. Based on the contents of the JSON payload, the Integration Procedure accesses the external data
using, for example, REST endpoints or DataRaptor calls, and returns JSON or XML results.
4. The Integration Procedure returns its results to the Vlocity external object handler in an intermediate
format.
5. The Vlocity handler transforms the results into a JSON payload and returns them to the caller.
The following diagram illustrates the process.
The advantage of this approach to accessing external data is that it is completely declarative, no code
required. Note that, while the external object functions as a single object, your Integration Procedure can
recruit data from multiple sources.
Query-Handling Logic in the Integration Procedure

To indicate the type of operation being requested of the Integration Procedure, the Vlocity handler sets a
"Context" entry in the input JSON. To define the actions for handling each type of query in your Integration
Procedure, set the actions' Execution Conditional Formula field (for example: Context = "QueryAll"). The
following list describes the values passed in the Context node for each type of request, with SOQL
examples and the corresponding JSON payload sent to the Integration Procedure.
QueryAll: SELECT returning all rows (no WHERE clause)
Example query: SELECT ExternalId FROM myExternalObject;
Corresponding JSON input: {"Context":"QueryAll"}
Query: SELECT with WHERE clause
Example query: SELECT ExternalId FROM vlocity_dev__ContactsList__x WHERE

ExternalId = '59f0f91a51280e0012c90584';

company 1974
OmniStudio
Corresponding JSON input: {"Input":

[{"ExternalId":"59f0f91a51280e0012c90584"}],"Context":"Query"}
Upsert: Update a row (if ExternalId is specified) or create a row (if ExternalId is omitted).
Example query (UPDATE): INSERT INTO myExternalObject (Name, Mobile...) VALUES

("Davidov Spruth", "415-607-9865"...)
Corresponding JSON input: {"Input":[{"Name":"Davidov

Spruth","Mobile":"415-607-9865","CreateDate":"2017-10-25T20:50:34.188Z","Work":
"415-232-6365","ExternalId":"59f0f91a51280e0012c90584","Email":"[email protected]"
}],"Context":"Upsert"}
Delete: Delete specified rows.
Example query: DELETE FROM myExternalObject WHERE ExternalId =

'"'59f0f91a51280e0012c90584'"';
Corresponding JSON input: {"Input":

[{"ExternalId":"59f0f91a51280e0012c90584"}],"Context":"Query"}
To access the external data to handle the query, define HTTP actions that call the REST endpoints that
perform the required operations. If the results returned from the endpoint require further processing, create
and call DataRaptor Transforms that perform the required transformations.
Query Result Format

To return results from the Integration Procedure to the query, structure the output JSON as follows:
SELECT queries: Return an array of nodes with names that correspond to the table columns defined for
the external object. For example:
[{
"Work": "415-232-6365",
"Mobile": "415-607-9865",
"CreateDate": "2017-10-25T20:50:34.188Z",
"Name": "Davidov Spruth",
"ExternalId": "59f0f91a51280e0012c90584",
"ExternalLookup": "59f0f91a51280e0012c90584",
"AccountIndirectLookup": "123"
},
{
"CreateDate": "2017-10-25T21:49:41.633Z",
"Name": "Mike Wormwood",
"ExternalId": "59f106f5e928870012f2b0a0",

company 1975
OmniStudio
},
{
"Work": "33-555-1212",
"Mobile": "33-879-0610",
"CreateDate": "2017-10-25T20:59:18.657Z",
"Name": "Tom Sor",
"ExternalId": "59f0fb26e928870012f2b09e",
}
]
UPDATE and DELETE queries: Return the external Id of the object affected in a node named "ExternalID";
for example:
{
"ExternalId": "59efa135ba8e960012a3e8a5"
}
If the query does not succeed, return a node named "errorMessage" containing details about the problem
that occurred.
See Also
• Implement an External Object in an Integration Procedure
Implement an External Object in an Integration Procedure

To access external data, you can define an Integration Procedure that implements a Salesforce External
Object.
1. Create an Integration Procedure. For Type, specify VlocityExternalObject. For Subtype, specify the
desired name for the external object.
2. In the Procedure Configuration section, define table and column settings. These are the same settings
you can configure on the Salesforce External Object tab. For detailed information, refer to the
Salesforce documentation: Define External Objects and External Object Relationships.
3. Click Activate.
4. In Salesforce, go to the External Data Source tab and navigate to the VlocityExternalObject data
source. Click Validate and Sync.
If the operation succeeds, your new external object is now listed on the page.

company 1976
OmniStudio
See Also
• External Objects in Integration Procedures
Test Procedures: Integration Procedures for Unit Testing

An Integration Procedure that performs a unit test is a Test Procedure. You can use a Test Procedure to
unit test almost anything an Integration Procedure can invoke, such as a DataRaptor, a Calculation Matrix,
an Apex class, or another Integration Procedure.
Using Test Procedures and the test framework, you can:
• Add Debugging Data to Test Procedure Event Tracking.

• Provide sample input to the entity being tested using a Set Values component.
• Mock responses of specific steps if the entity being tested is an Integration Procedure.
• Compare expected and actual results using an Assert Action component.
• Use the IDX Workbench Desktop Application to run Test Procedures.
• Review Integration Procedure Event Tracking data generated as a result of the tests.
After a Test Procedure finishes, its transaction is rolled back. This lets you run tests that create sObjects
without affecting the database.
How you organize your Test Procedures is up to you. For example, you can test the same DataRaptor
multiple times using different inputs, or you can test several different DataRaptors using the same Test
Procedure.
When to Mock Integration Procedure Components

When you use a Test Procedure to test another Integration Procedure, you can simulate, or mock, the
responses of some of the components in the testing Integration Procedure or the Integration Procedure
being tested. For example, you can mock a component that would normally retrieve a credit score, using a
hard-coded score for testing. This has no effect on how the Integration Procedure normally runs when it
isn't being tested.
To mock a component that returns a single value, scroll to the bottom of the Procedure Configuration and
specify a Key/Value pair under Mock Responses Map. The Key must be the Name of a component, and the
Value can be literal text or a merge field.
To mock a component with a more complex response, go to the Procedure Configuration and click Edit as
JSON, then edit the mockResponseMap node. For example, the following JSON code mocks a Set Values
component named IfOtherState that sets a DefaultSalesTax value:
"mockResponseMap": {
"IfOtherState": {
"DefaultSalesTax": 0.06
}
}
The following component types must be mocked in the testing Integration Procedure or the Integration
Procedure being tested. Mocking other component types is permitted but not required.

company 1977
OmniStudio
Component Reason for Mocking

Batch Action Because it runs asynchronously, the response isn't available.
If an Integration Procedure is called by a Test Procedure, any Batch Actions it includes are not invoked.
DocuSign Envelope Action The response to the delivered email isn't available.
Email Action The response to the delivered email isn't available.
HTTP Action Salesforce has specific requirements for testing HTTP callouts.
HTTP Callouts in Called Apex Classes

If a Test Procedure or an Integration Procedure being tested includes a Remote Action, and the Apex class
the Remote Action invokes includes an HTTP callout, then you must ensure that the HTTP callout isn't part
of the test. To do this, edit the Apex class and enclose the HTTP callout in an if
(IntegrationProcedureService.isTest == false) statement, for example:
if (IntegrationProcedureService.isTest == false) {
HttpRequest request = new HttpRequest();
request.setMethod('GET');
request.setEndpoint('http://example.com');
Http httpCall = new Http();

HttpResponse response = httpCall.send(request);
}
Workflow for Test Procedure Example

A Test Procedure tests a calculation performed by another Integration Procedure.
1. Enable the Vlocity Tracking Service for Integration Procedures. See Enable Tracking for Vlocity
Components and Add Debugging Data to Test Procedure Event Tracking.
2. Create the Integration Procedure to be tested. See Create a Conditional Block Example with If-Elseif-
Else Logic.
3. Mock a Response in the Tested Integration Procedure.
4. Create an Example Test Procedure.
5. Run the Test Procedure from IDX Workbench. See Run Test Procedures.
High-level steps 3 and 4 are described here.
See Also
• Assert Action
• Assert Action Properties

company 1978
OmniStudio
Mock a Response in the Tested Integration Procedure

Before you create the example Test Procedure, add a Mock Response Map to the Integration Procedure to
be tested.
1. Go to the Vlocity Integration Procedures tab and open the Integration Procedure to be tested.
2. If the Integration Procedure is active, click Deactivate Version so you can edit it.
3. In the Procedure Configuration, click Edit as JSON.
4. Edit the mockResponseMap node as follows:
"mockResponseMap": {
"IfOtherState": {
"DefaultSalesTax": 0.06
}
}
5. Click Edit in Property Editor.
6. Click Activate Version. The Integration Procedure to be tested must be active.
See Also
• Workflow for Test Procedure Example

Create an Example Test Procedure

After you mock a response in the Integration Procedure to be tested, create the Test Procedure that tests a
calculation it performs.
The Test Procedure has these components:
• A Set Values component, named IPInput

• An Integration Procedure Action component, named TestIP
• An Assert Action, named AssertTotal
• A Response Action, named TestResponse
A Response Action isn't required, but it's useful for testing the Test Procedure. After you have verified that
the Test Procedure works, you can deactivate or delete it.

company 1979
OmniStudio
To create the Test Procedure:

3. Scroll to the bottom of the Procedure Configuration and check Is Test Procedure.
Property Value
Element Name IPInput
Element Value Map: Price 250
Element Value Map: State NY
Response JSON Node IPInput
5. Drag an Integration Procedure Action component into the Structure panel and give it the following
settings:
Property Value
Element Name TestIP
Integration Procedure Name you gave the Integration Procedure to be tested, described in Define Execution Logic Using
Conditional Blocks. If you downloaded the DataPack, the name is Documentation_IPCondBlock1.
Send JSON Path IPInput
6. Drag an Assert Action component into the Structure panel and give it the following settings:
Property Value
Element Name AssertTotal
Assert Conditional Formula TestIP:Output:Total == 265
Assert Failure Message Calculation is incorrect.

company 1980
OmniStudio
Property Value
Element Name TestResponse
Return Full Data JSON (checked)
After you have verified that the Test Procedure works, you can deactivate this component.
8. Go to the Preview tab and click Execute. The output should look like this:
{
"response": {
"testResult": "success"
},
"TestResponseStatus": true,
"AssertTotal": {
"assertFailureMessage": "Calculation is incorrect.",
"variableData": {
"TestIP:Output:Total": 265
},
"assertConditionalFormula": "TestIP:Output:Total == 265",
"assertResult": true
},
"AssertTotalStatus": true,
"TestIP": {
"testResult": "success",
"Output": {
"Price": 250,
"State": "NY",
"Tax": 15,
"TaxRate": 6,
"Total": 265
}
},
"TestIPStatus": true,
"IPInput": {
"Price": 250,
"State": "NY"
},
"IPInputStatus": true,
"options": {
"useQueueableApexRemoting": false,
"chainable": false

company 1981
OmniStudio
}
}
9. (Optional) In the IPInput component, change the Price, or change the State to WA, OR, NV, or CA.
Then return to the Preview tab and click Execute again. Note how the output changes.
10. To prepare for running the Test Procedure:
a. In the TestResponse component, click Active to remove the check.
b. In the Procedure Configuration, click Activate Version. IDX Workbench only runs active Test
Procedures.
See Also
• Workflow for Test Procedure Example

Integration Procedure Invocation

You can invoke Integration Procedures from other OmniStudio tools such as OmniScripts and Cards. You
can also invoke Integration Procedures from Apex classes, batch jobs, REST APIs, or Salesforce flows.
NOTE
A Vlocity Action can't call an Integration Procedure directly. However, a Vlocity Action can
call an OmniScript or an Apex class, each of which can call an Integration Procedure.
Integration Procedure Invocation from Apex

You can invoke an Integration Procedure from Apex code in two ways using the
IntegrationProcedureService class in the Vlocity managed package.
Integration Procedure Call Example 1
class IntegrationProcedureService {
/*
procedureAPIName - the Type_SubType of Procedure or the OmniScript__c.Id
input - The payload / initial data in the DataJSON for the Procedure
*/
public static Object runIntegrationService(String procedureAPIName,
Map<String, Object> input, Map<String, Object> options);
/*
VlocityOpenInterface2 implementation:
methodName - the Type_SubType of Procedure or the OmniScript__c.Id -
procedureAPIName above
input - The payload / initial data in the DataJSON for the Procedure
output - will return Response in output.put('result', RESPONSE)

company 1982
OmniStudio
*/
public Object invokeMethod(String methodName, Map<String, Object> input,
Map<String, Object> output, Map<String, Object> options);
}
Integration Procedure Call Example 2
/* Initialize variables */
String procedureName = 'Type_SubType';
Map<String, Object> ipInput = new Map<String, Object> ();
Map<String, Object> ipOutput = new Map<String, Object> ();
Map<String, Object> ipOptions = new Map<String, Object> ();
/* Populating input map for an Integration Procedure.

Follow whatever structure your VIP expects */
String orderId = '80100000000abcd';
ipInput.put('orderId', orderId);
/* Call the IP via runIntegrationService,

and save the output to ipOutput */
ipOutput = (Map<String, Object>)
vlocity_cmt.IntegrationProcedureService.runIntegrationService(procedureName,
ipInput, ipOptions);
System.debug('IP Output: ' + ipOutput);
See Also
• IntegrationProcedureService
Integration Procedure Unit Testing from Apex

You can set up a test class in Apex and use it to call and test an Integration Procedure. You must mock
HTTP Action responses.
The following is an example unit test of an Integration Procedure:
@isTest(seeAllData=true)
global with sharing class TestVlocityIntergationProcedure
{
static testMethod void testVip()
{
Map<String, Object> response = (Map<String,
Object>)namespace.IntegrationProcedureService.runIntegrationService('Type_Subty
pe',
new Map<String, Object>{
'AccountName' => 'Vlocity'
}, new Map<String, Object>());

company 1983
OmniStudio
System.assertEquals('[email protected]', response.get('ContactEmail'));
}
}
Note these features of the example:
• You must use Salesforce's seeAllData property on the @isTest annotation. This ensures that the unit
test sees the Vlocity SObject data in the org.
• The method that runs the Integration Procedure is
IntegrationProcedureService.runIntegrationService.
• The namespace is vlocity_cmt, vlocity_ins, or vlocity_ps.
• The Type_Subtype parameter specifies the Integration Procedure to test.
Salesforce has specific requirements for testing HTTP callouts. Therefore, HTTP Actions require special
handling.
In Fall '19 and later releases, you can set the mock HTTP response of an Integration Procedure using the
following Vlocity global method:
IntegrationProcedureServiceTest.setMockHttpResponse(HttpResponse response)
This is required because when an Integration Procedure runs, the Vlocity Managed Package makes the
HTTP callout internally.
The following is an example unit test of an Integration Procedure that includes an HTTP Action:
global with sharing class TestVlocityIntergationProcedure
{
static testMethod void testVipWithHttpCallout()
{
HttpResponse res = new HttpResponse();
res.setHeader('Content-Type', 'application/json');
res.setBody('{"ContactEmail":"[email protected]"}');
res.setStatusCode(200);
namespace.IntegrationProcedureServiceTest.setMockHttpResponse(res);

pe',
}
}

company 1984
OmniStudio
In Winter '20 and later releases, if an Integration Procedure includes more than one HTTP Action, you can
set the mock HTTP responses using the following Vlocity global method:
IntegrationProcedureServiceTest.setMockHttpResponseByUrlOrActionName()
Using the Element Name of the HTTP Action is often easier. However, for some HTTP Actions, such as one
within a Loop Block, you might have to specify the URL. If you specify the URL, it must be the exact URL
you are calling. If it is a NamedCredential, it follows the pattern callout:NamedCredentialName.
The following is an example unit test of an Integration Procedure that includes two HTTP Actions:
global with sharing class TestMockHttpIP
{
static testMethod void testVipWithHttpCallout()
{
HttpResponse res1 = new HttpResponse();
res1.setHeader('Content-Type', 'application/json');
res1.setBody('{"ContactEmail":"[email protected]"}');
res1.setStatusCode(200);
namespace.IntegrationProcedureServiceTest.setMockHttpResponseByUrlOrActionName(
'GetContactsHttp', res1);
HttpResponse res2 = new HttpResponse();

res2.setHeader('Content-Type', 'application/json');
res2.setBody('{"ContactEmail":"[email protected]"}');
res2.setStatusCode(200);
namespace.IntegrationProcedureServiceTest.setMockHttpResponseByUrlOrActionName(
'callout:MyContactInfo2', res2);

pe',
System.assertEquals('[email protected]',
response.get('Action2Response'));

company 1985
OmniStudio
}
}
Integration Procedure Invocation from REST APIs

You can use either a GET or a POST call to run an Integration Procedure and retrieve the result. The only
difference is that a GET call can't include a JSON request body.
For an example, see Invoke a Chainable Integration Procedure with REST Calls.
NOTE
In JSON, curly braces are literal, but in REST notation, curly braces represent variables.
Integration Procedure Invocation Using GET

To get JSON data for an Integration Procedure, issue a GET call. You can include inline values and query
parameters, but you can't pass in JSON data.
Use a URL formatted as follows:
/services/apexrest/{namespace}/v1/integrationprocedure/{Type}_{SubType}/
Specify the Type and SubType of the Integration Procedure. You can also send HTTP headers as options.
To pass input data in a GET call, you can specify URL parameters. You can't specify a JSON request body.
If you need to specify a JSON request body, use a POST call instead.
In the following example, an Integration Procedure that creates cases requires a Contact name and returns
the Id of the newly created case. The Contact name is specified in the URL. Note that the HTML code %20
represents the space between the first and last names.
GET
/services/apexrest/vlocity_ins/v1/integrationprocedure/Create_Cases/?
Contact=Dennis%20Reynolds
Example Result:
{
"Case": {
"Id": "0036100001HDn3QAAT"
}
}
There are two ways to pass parameters to the Integration Procedure in the URL:

company 1986
OmniStudio
• Parameter/value pairs
• Inline values in the URL path
The syntax is as follows:
{inlinevalue1}/{inlinevalue2}/?{Param1}={Value1}
For example, the following URL:
/services/apexrest/vlocity_cmt/v1/integrationprocedure/IP_Rest/Apple/Phones/?
product=iPhoneX
...sends this input to the Integration Procedure:
{
"options": {
"Path1": "Apple",
"Path2": "Phones",
"product": "iPhoneX",
"isDebug": "true"
}
}
Values passed in the path are added under the options node, with keys named PathN.
You can also set Integration Procedure options such as chainable or queueableChainable using a
REST API. For example:
chainable=true
Integration Procedure Invocation Using POST

To post JSON data to an Integration Procedure, issue a POST call. You can also include inline values,
query parameters, and a JSON request body.
Use a URL formatted as follows:
Specify the Type and SubType of the Integration Procedure. You can also send HTTP headers as options.
To pass input data in a POST call, you can specify either a JSON request body or URL parameters.
In the following example, an Integration Procedure that creates cases requires a Contact name and returns
the Id of the newly created case. The Contact name is specified in a JSON request body.
POST
/services/apexrest/vlocity_ins/v1/integrationprocedure/Create_Cases/

company 1987
OmniStudio
POST JSON Data:
{
"Contact":"Dennis Reynolds"
}
Example Result:
{
"Case": {
"Id": "0036100001HDn3QAAT"
}
}
There are two ways to pass parameters to the Integration Procedure in the URL:
• Parameter/value pairs
• Inline values in the URL path
The syntax is as follows:
{inlinevalue1}/{inlinevalue2}/?{Param1}={Value1}
For example, the following URL:
/services/apexrest/vlocity_cmt/v1/integrationprocedure/IP_Rest/Apple/Phones/?
product=iPhoneX
...sends this input to the Integration Procedure:
{
"options": {
"Path1": "Apple",
"Path2": "Phones",
"product": "iPhoneX",
"isDebug": "true"
}
}
Values passed in the path are added under the options node, with keys named PathN.
You can also set Integration Procedure options such as chainable or queueableChainable using a
REST API. For example:
chainable=true

company 1988
OmniStudio
Integration Procedure Invocation from Salesforce Flow

To call an Integration Procedure from a Salesforce Flow, create a Salesforce Flow component by defining a
class using the Salesforce Developer Console, as shown in the following example. Note that the class must
have the @InvocableMethod annotation.
global with sharing class IntegrationProcedureInvocable {

@InvocableMethod(label = 'Integration Procedure')
global static List < IntegrationProcedureOutput >
runIntegrationServiceInvocable(List < IntegrationProcedureInput > input) {
System.debug(LoggingLevel.Error, JSON.serialize(input));
IntegrationProcedureOutput result = new IntegrationProcedureOutput();
result.output = JSON.serialize(
IntegrationProcedureService.runIntegrationService(
input[0].procedureAPIName,
new Map < String, Object >
{
'Id' => input[0].input
},
new Map < String, Object > ()));
System.debug(LoggingLevel.Error, JSON.serialize(result));
return new List < IntegrationProcedureOutput >
{
result
};
}
global class IntegrationProcedureInput
{
@InvocableVariable(label = 'Procedure Name') global String procedureAPIName;
@InvocableVariable(label = 'Input') global String input;
}
global class IntegrationProcedureOutput
{
@InvocableVariable(label = 'Output') global String output;
}
}
After defining the class, you can use the resulting flow component in the Salesforce Flow Designer to call
Integration Procedures. Drag the component from the list to the flow and set its properties as follows.
General Settings: Set Name and Unique Name to descriptive names for the instance of the component in
the flow.
Input Settings
• Procedure Name: Specify the Integration Procedure to be run using this format: Type_SubType (note the
underscore).

company 1989
OmniStudio
• Input: For each input variable required by the Integration Procedure, choose Variable and specify the
name of the input variable using the following format: {!variableName}
Output Settings: For each variable that is returned by the Integration Procedure, choose Variable and
specify the name of the output variable using the following format: {!variableName}
Batch Jobs for Integration Procedures and Vlocity Open Interfaces

The Vlocity batch framework lets you run an Integration Procedure or VlocityOpenInterface on a schedule.
Typical use cases are a recurrent billing cycle or a scan for insurance policies that come up for renewal in
the next 60 days. When a job is run, it sends its input to an Integration Procedure or Apex method that
processes the records.
NOTE
Batch jobs aren't supported in the Summer '21 release.
The input can be one of the following:
• Null: The Integration Procedure or VlocityOpenInterface finds data using its Actions or methods.
• SOQL query: The result of a static query is the input.
• JSON data with merge fields: The Integration Procedure is called by a business process that has
contextual data, such as an OmniScript, and is queued immediately rather being scheduled.
To define the jobs to be run, you add records to the Vlocity Scheduled Job custom object. To launch
scheduled jobs, you can:
• Run the Vlocity batch framework

• Launch jobs programmatically
• Use a Batch Action in an Integration Procedure
The following sections describe these tasks in detail.
Batch Framework Initialization

The Vlocity batch framework launches the jobs that are defined in the Vlocity Scheduled Job custom object.
To start the Vlocity batch framework, you must execute Apex code, which creates an instance of the
framework and invokes its start method.
VlocityBatchFramework batchFramework = new VlocityBatchFramework();

batchFramework.startBatchScheduler('<frequency>');
These commands create a CronTrigger (scheduled job) with the name VlocityScheduledJob.
The Frequency parameter specifies how often the batch framework checks for jobs to launch. To ensure
that jobs are executed on the desired schedule, specify a frequency greater than or equal to that of the

company 1990
OmniStudio
highest-frequency job. For example, if you have a job that is scheduled to run hourly, specify hourly or 15
minutes for the batch framework frequency. Note that the timing of job execution is controlled entirely by
the batch framework, and jobs might not be executed at precise intervals.
Programmatic Job Invocation

Use VlocityBatchFramework methods to start scheduled jobs. You can start all jobs, multiple jobs, or a
single job. You can also invoke an Integration Procedure or VlocityOpenInterface as a job.
To start all scheduled jobs immediately, invoke the

VlocityBatchFramework.startScheduledJobs() method using anonymous Apex, omitting any
parameters, as follows:
VlocityBatchFramework.startScheduledJobs();
To start a single scheduled job immediately, invoke the

VlocityBatchFramework.startScheduledJob() method using anonymous Apex, specifying the ID
for the job you want to run. For example:
VlocityBatchFramework.startScheduledJob('a3Zf4000000J81v');
To start multiple scheduled jobs immediately, invoke the

VlocityBatchFramework.startScheduledJobs() method using anonymous Apex, specifying a list
of IDs for the jobs that you want to run. For example:
VlocityBatchFramework.startScheduledJobs(new List<Id>{'a3Zf4000000J81v',
'a3Zf4000000IwIU'});
The batch framework also enables you to programmatically invoke any Integration Procedure or
VlocityOpenInterface as a job. The methods for starting batch jobs are as follows:
VlocityBatchFramework.startIntegrationProcedureBatch(String
integrationProcedureKey, List<Object> input, new Map<String, Object> options);
VlocityBatchFramework.startOpenInterfaceBatch(String classMethod, List<Object>
input, new Map<String, Object> options);
To start an Integration Procedure job from Apex, issue the following command:
VlocityBatchFramework.startIntegrationProcedureBatch({integration procedure
key}, input list, options map);
For example:
VlocityBatchFramework.startIntegrationProcedureBatch('VlocityBatchFramework_Val
idateAccountBillingStreet', accounts, new Map<String, Object>{'isInputAsList'
=> true, 'batchSize' => 20});
To start an asynchronous Apex job that runs the invokeMethod of a specified class, issue the following
command:

company 1991
OmniStudio
VlocityBatchFramework.startOpenInterfaceBatch({ Class name . method name },

input list, options map);
For example:
VlocityBatchFramework.startOpenInterfaceBatch('VlocityBatchFrameworkTestOI4.upd
ateStatus', accounts, new Map<String, Object>{'isInputAsList' => false,
'batchSize' => 20});
To chain scheduled jobs that run Integration Procedures, provide the IDs of the jobs and include a
chainable option that is set to true:
startScheduledJobs(new Map<String, Object>{‘vlocityScheduledJobIds’ => new

List<String>{‘JobId’, 'JobId2'}, new Map<String, Object>{'chainable' => true});
For example:
VlocityBatchFramework.startScheduledJobs(new Map<String,
Object>{'vlocityScheduledJobIds' => new List<String>{'a3Zf4000000T7A1',
'a3Zf4000000T7A6'}}, new Map<String, Object>{'chainable' => true});
You can specify the following options in the options map when invoking a job programatically. See above for
details.
• batchSize
• chainable: Only jobs containing Integration Procedures are chainable.
• isInputAsList
• jobQueue
The following methods enable you to manage job execution programmatically:
• getCurrentBatchJobs(): Returns AsyncApexJobs that are not "Aborted", "Completed", or "Failed".

• abortBatchJobs(): Aborts all AsyncApexJobs named "VlocityBatchFramework".
• getScheduledBatchJob(): Returns a CronTrigger named "VlocityScheduledJob".
• abortScheduledBatchJob(): Tries to abort the CronTrigger named "VlocityScheduledJob".
Vlocity Scheduled Job Fields

To create batch jobs, go to the Vlocity Scheduled Jobs tab. For each job you want to schedule, add a
record by clicking New. Then specify the settings you need in the Vlocity Scheduled Job fields.
• Name: Give the job a descriptive name.

• Active: Set to true if the job is to be executed when scheduled. To disable execution, set to false.
Note that if an error occurs when the query is executed, the batch framework sets this field to false.
• Batch Size: Specifies the maximum number of records processed by an instance of the job.
For example, if you specify a batch size of 20 and the query returns 100 records, the job is run five times,
processing 20 records each time. Default is 1.
• Data Source Type: Valid values are No Input, Data Input, or Query. Spring '20 and later versions also
support List Input.

company 1992
OmniStudio
If the Data Source Type is Query, at least one row must be returned for the job to run.
• Data Source Spec: Specifies the data for the batch job, which must correspond to the Data Source
Type:
• No Input: The Integration Procedure or VlocityOpenInterface doesn’t require input data.
• Data Input: The Integration Procedure or VlocityOpenInterface expects JSON data with merge
fields. For information about merge fields, see Merge Fields.
Note that in this case the Integration Procedure or VlocityOpenInterface is placed in the batch
queue immediately after it is called because it is dependent on data from the process that calls it.
Therefore the Frequency property is ignored.
• List Input: The Integration Procedure or VlocityOpenInterface expects a list in JSON format. For
an example, see Batch Action.
• Query: A query retrieves the data required by the Integration Procedure or VlocityOpenInterface.
Example query:
SELECT Id, Name FROM Account WHERE Id IN (%mergeData:Id%) LIMIT 2

• Description: Describes the job.
• Email Address List: Specify a list of comma-separated email addresses that receive emails when Send
Email On has a specified value. If no email has been entered and Send Email On has a specified value,
an email is sent to the user that runs the job. Do not put spaces after the commas that separate the
emails. Example email response:
Batches Processed: 1
Number Of Errors: 1
Total Batches: 1
Status: Completed
• Send Email On:
• Error: Sends an email when a batch job error occurs.
• Finish: Sends an email when any batch job finishes regardless of whether an error occurred.
• Success: Sends an email when any batch job finishes successfully.
• Frequency: Required. Specifies how often the job is executed. Valid values are:
• None: Jobs that run as a Next Scheduled Job must have their frequency set to None so that they
only run after the initial job has completed.
NOTE
The --None-- and None values are not the same. The --None-- value indicates that
the Frequency setting is not set. The None value specifies that the job is not on a
schedule.
• 15 Minutes
• Hourly
• Daily
• Weekly
• Monthly

company 1993
OmniStudio
• Yearly
• Is Input As List: Specifies whether the data from the Query is sent as a list of Maps under a response
node or as an individual record in a Map. Example input:
• Unchecked:
{"BillingStreet":"1 Market St","Id":"001f400000FPZiQAAX"},

{"BillingStreet":"50 Fremont","Id":"001f400000FPZjTAAX"},...}
• Checked:
"records":[{"BillingStreet":"1 Market St","Id":"001f400000FPZiQAAX"},

{"BillingStreet":"50 Fremont","Id":"001f400000FPZjTAAX”}]
Do not check Is Input As List if the Data Source Type is List Input.
• Job Queue: Select High, Medium, Low, or None (default). This setting is used to group jobs for
execution. Jobs with the same priority are launched together. To optimize performance, minimize the
number of high priority jobs.
• Next Scheduled Job: Enter the name of a different scheduled job that will run as a child of the initial
scheduled job, but in a separate transaction, once the initial scheduled job finishes.
NOTE
The scheduled job that runs as a child of the initial scheduled job must have its
Frequency set to None so that it only runs after the initial job has completed.
• Process Name: The process to run. For Integration Procedures, specify Type_Subtype. For a
VlocityOpenInterface, specify ClassName.MethodName.
• Process Type: Specify either Integration Procedure or Vlocity Open Interface.
• Wrap Up Process Name: Enter the name of a different process that will run as a child of the initial
process, in the same transaction, once the initial process finishes. In the underlying code, this runs in the
finish() method of the framework. For Integration Procedures, specify Type_Subtype. For a
VlocityOpenInterface, specify ClassName.MethodName.
• Wrap Up Process Type: Specify either Integration Procedure or Vlocity Open Interface.
A Configured Job
The screenshot below shows an example of a record that defines a scheduled job.

company 1994
OmniStudio
The following fields are used by the job scheduler:
• Apex Job ID: Unique identifier for internal use. Do not edit.
• Global Key: Unique identifier for internal use. Do not edit.
• Last Run DateTime: Last time the job was executed.
• Last Run Error Message: If the query fails, contains the full SOQL exception.
• Next Run DateTime: Next scheduled run. Maintained by the batch framework; can be edited to specify
the next time the job is to be run.
Error Handling
If the Data Source Type or Frequency is not set, or if the Data Source Spec format is incorrect, then the
Active checkbox is unchecked (set to false) and the Last Run Error Message field contains an error
message describing what went wrong.
Configuration and SOQL query errors are returned in the Last Run Error Message field. The batch
framework does not catch or report errors that occur in the Integration Procedure or Apex method invoked.
If an error is caught, Last Run DateTime and Next Run DateTime are not updated.

company 1995
OmniStudio
Settings for Long-Running Integration Procedures

You can use chainable and queueable chainable settings to avoid hitting Salesforce governor limits when
invoking long-running Integration Procedures. You can also chain on one or more specific long-running
steps.
Beginning with Vlocity Insurance and Vlocity Health Summer 2018, by default, all the actions in an
Integration Procedure run in a single transaction. If the transaction exceeds a Salesforce governor limit,
Salesforce ends the transaction and the Integration Procedure fails. You cannot set a limit that exceeds the
maximum imposed by Salesforce. For details about governor limits, see the relevant Salesforce topic.
To mitigate this problem, use settings at both these levels:
• Enable chaining from the OmniScript or parent Integration Procedure action that calls the long-running
• Optionally set limits that trigger chaining in the long-running Integration Procedure itself using the settings
described here.
When chaining is enabled and an Integration Procedure step exceeds a governor limit, its interim results
are saved and the step is continued in a separate transaction. Because the step runs in its own transaction,
it does not contend for resources with other steps in the Integration Procedure, so it's less likely to hit
governor limits.
To maximize performance, steps are chained only when they hit governor limits. If no limits are exceeded,
all the steps in the Integration Procedure run in a single transaction. When steps are chained, the
performance of the Integration Procedure can be adversely affected by the need to break up the execution
into chunks that do not exceed the governor limits and the need to store interim results.
In Summer '19 and later releases, you can increase Salesforce governor limits by allowing a chainable step
to start a queueable job, which runs as an Async Apex Job. These jobs have higher CPU, SOQL, and Heap
size limits than regular transactions do. However, while this helps to ensure that governor limits aren't
exceeded, it can reduce performance.
For Developer Edition and Trial orgs, the maximum stack depth for chained jobs is 5, which means that you
can chain jobs four times. This limit of 5 includes the initial parent queueable job. See Queueable Apex in
the Salesforce help.
For an example, see Invoke a Chainable Integration Procedure with REST Calls.
Chainable and Queueable Chainable Settings

To configure limits below the Salesforce defaults, edit the Chainable Configuration and Queueable
Chainable Limits settings in the Integration Procedure's Procedure Configuration section. To disable
checking for a limit, leave it blank. If you disable checking for a limit and a step exceeds the Salesforce
limit, the Integration Procedure fails.
Chainable settings are as follows:
• Chainable Queries Limit: Maximum number of SOQL queries that can be issued. The default maximum
is 100.

company 1996
OmniStudio
• Chainable DML Statements Limit: Maximum number of Data Manipulation Language (DML) statements
that can be issued. The default maximum is 150.
• Chainable CPU Limit: Maximum CPU time on the Salesforce servers. Default maximum is 10,000
milliseconds.
• Chainable Heap Size Limit: Memory used to store data during transaction processing. The default
maximum is 6 MB.
• Chainable DML Rows Limit: Maximum number of records that can be processed as a result of DML
statements, Approval.process, or database.emptyRecycleBin. Default maximum is 10,000.
• Chainable Query Rows Limit: Maximum number of rows that a SOQL query is permitted to retrieve.
The default maximum is 50,000.
• Chainable SOSL Queries Limit: Maximum number of SOSL queries that can be issued. Default
maximum is 20.
• Chainable Actual Time: Number of seconds an Integration Procedure can run before chaining occurs to
avoid reaching the Salesforce Concurrent Request Limit. No default.
NOTE
Chainable Queries Limit, Chainable Query Rows Limit, and Chainable SOSL Queries
Limit work within a managed package but not outside of it. For example, if a Remote
Action runs queries outside the package, these don't count toward the limits.
Queueable Chainable settings, available in Summer '19 and later releases, are as follows:
• Queueable Chainable Heap Size Limit: Memory used to store data during transaction processing. The
default maximum is 12 MB.
• Queueable Chainable CPU Limit: Maximum CPU time on the Salesforce servers. The default maximum
is 60,000 milliseconds.
• Queueable Chainable Queries Limit: Maximum number of SOQL queries that can be issued. Default
maximum is 200.
Queueable Chainable settings override their Chainable equivalents if both are set.
How to Call a Chainable or Queueable Chainable Integration Procedure

To enable chaining for an Integration Procedure that is called from an OmniScript, open the Integration
Procedure action that calls the Integration Procedure and check the Chainable checkbox. To enable
chainable steps to start queueable jobs, also check the Queueable checkbox. See Integration Procedure
Action.
If you are calling an Integration Procedure from a REST API, you can set the chainable or
queueableChainable option to true. See Invoke a Chainable Integration Procedure with REST Calls.
A parent Integration Procedure can disable the Chainable settings of a child Integration Procedure that it
calls. See Integration Procedure Action.

company 1997
OmniStudio
The Chain on Step Setting

To enable chaining for a particular long-running step in an Integration Procedure, check its Chain On Step
setting. When the Integration Procedure is called with chaining enabled, and a limit is reached, the step
runs in its own transaction.
Chain On Step is not required for chaining to occur. If no step has Chain On Step applied, chaining occurs
at the step at which the Integration Procedure's resource use approaches governor limits or a chainable or
queueable chainable setting.
If your Integration Procedure has a DataRaptor Post action followed by an HTTP action, enable Chain On
Step for the DataRaptor Post action to avoid the following Salesforce error: You have uncommitted work
pending. Please commit or rollback before calling out.
Chainable and Queueable Chainable Settings in Preview

To enable the Chainable and/or Queueable Chainable settings when testing an Integration Procedure using
the Preview tab, expand the Options pane and set one or more of these options:
• chainable: If true, enables the Chainable settings for testing.

• queueableChainable: If true, enables the Queueable Chainable settings for testing.
• useQueueableApexRemoting: If true, limits the amount of time the Apex CPU runs by starting a
queueable job with no chaining.
The Action Message Property in the Calling OmniScript

To view the progress of a chained Integration Procedure when debugging the OminScript that calls it, set
the Action Message property of the chained steps in the Integration Procedure. The text you enter in the
Action Message field can be viewed in the Debug pane of the OmniScript Designer, as shown in the
following figure.

company 1998
OmniStudio
JavaScript Code to Call Chainable Integration Procedures

OmniScripts and parent Integration Procedures that call chainable Integration Procedures handle the
transactions automatically. However, if you call a chainable Integration Procedure from a Lightning Web
Component, you need to include code that handles the intermediate responses.
To see what the intermediate responses look like, see Invoke a Chainable Integration Procedure with REST
Calls.
Here is a way to structure JavaScript code to handle these responses:
function runChainable(options) {
options.isDebug = vm.isDebug;
remoteActions.testIntegrationProcedure(ipId, inputData,
options).then(function(response) {
responseHandler(response);

company 1999
OmniStudio
});
}
function responseHandler(response) {
if (typeof(response) === 'string') {
response = JSON.parse(response);
}
if (response &&
response.vlcIPData &&
response.vlcStatus === 'InProgress') {
runChainable(response);
} else {
// handle IP response
}
}
Invoke a Chainable Integration Procedure with REST Calls

A chainable Integration Procedure is split into multiple transactions to avoid hitting Salesforce governor
limits. Using a REST API is the easiest way to see the partial responses each transaction returns before the
Integration Procedure completes.
Before You Begin

1. To ensure you can use curl commands on your computer, in a terminal window, type curl -help. If curl is available, you see a
long list of curl options.
2. Determine the namespace that Integration Procedures in your org use, either vlocity_ins, vlocity_cmt, or vlocity_ps.
3. Create this Integration Procedure example or import its DataPack: Create a Try-Catch Block Example with a Formula.
4. Get the session ID for your current login to your org. See Set Up Authorization in Salesforce's REST API Developer Guide.
1. Open the Integration Procedure example in your org. If you imported the DataPack, it's listed under
Documentation/IPTryCatch2.
2. In the Preview tab, try different Name input parameter values until you find one that returns more than
one record but not many. An ideal Name value returns two names.
3. In the Procedure Configuration, click Deactivate Version if the Integration Procedure is active so you
can edit it. Set the Chainable Query Rows Limit to a value low enough to cause chaining.
For example, if the Name value in the previous step returns two records, a Chainable Query Rows
Limit value of 1 results in two transactions. If the Name value in the previous step returns six records,
a Chainable Query Rows Limit value of 2 results in three transactions.
4. Go to the DataRaptorExtractAction1 component and check its Chain on Step property.
5. Go back to the Procedure Configuration and click Activate Version.
6. In a terminal window, enter a curl command in this format, all on one line:
curl -X POST -H 'Authorization: Bearer session_id' -H 'Content-Type:

application/json' -H 'chainable:true' --data-raw '{"Name":"Name"}' https://
ap1.salesforce.com/services/apexrest/namespace/v1/integrationprocedure/
Type_SubType

company 2000
OmniStudio
For example, if the Name is Jones, the namespace is vlocity_ins, the Type is Documentation,
and the SubType is IPTryCatchF2, your curl command looks like this:
curl -X POST -H 'Authorization: Bearer 00Dnn000000nnnn!ARUAQLt ...

QqodNY3' -H 'Content-Type: application/json' -H 'chainable:true' --data-
raw '{"Name":"Jones"}' https://ap1.salesforce.com/services/apexrest/
vlocity_ins/v1/integrationprocedure/Documentation_IPTryCatchF2
A session ID is a very long String. In this example, the session ID is truncated for clarity.
TIP
You can assemble the curl command in a text editor and copy it into the terminal
window.
7. Examine the response. It looks like this:
{
"vlcUseQueueableApexRemoting": false,
"vlcMessage": null,
"vlcIPData": "dc3e1986-2f7c-0871-e968-28eb63e11820",
"vlcStatus": "InProgress"
}
NOTE
Integration Procedure Preview handles chaining automatically, so you never see this
type of response.
8. Add a header for the vlcIPData to the curl command and enter it. For example:
curl -X POST -H 'Authorization: Bearer 00Dnn000000nnnn!ARUAQLt ...

QqodNY3' -H 'Content-Type: application/json' -H 'chainable:true' --data-
raw '{"Name":"Jones"}' -H 'vlcIPData:dc3e1986-2f7c-0871-e968-28eb63e11820'
https://ap1.salesforce.com/services/apexrest/vlocity_ins/v1/
integrationprocedure/Documentation_IPTryCatchF2
9. Examine the response. If it contains another vlcIPData value, repeat the previous step with the new
vlcIPData value. Keep repeating with each new vlcIPData value until the response looks like this:
{
"response": {},
"Name": "Jones",
"options": {
"Accept": "*/*",
"X-B3-SpanId": "ee09609f22d890e1",

company 2001
OmniStudio
"CipherSuite": "ECDHE-RSA-AES256-GCM-SHA384 TLSv1.2 256-bits",

"User-Agent": "curl/7.64.1",
"X-B3-Sampled": "0",
"Host": "ap1.salesforce.com",
"X-B3-TraceId": "ee09609f22d890e1",
"chainable": "true",
"X-Salesforce-SIP": "42.42.42.42",
"Content-Type": "application/json"
},
"DataRaptorExtractAction1": [
{
"ContactName": "John Jones"
},
{
"ContactName": "June Jones"
}
],
"TryCatchBlock1": null
}
This response is an example of what you get when the Integration Procedure is complete.
Continuation in Long-Running Calls

To support long-running HTTP calls, Salesforce provides Apex Continuations. If your OmniScript calls
Integration Procedures that call long-running actions, you can enable continuation.
Options are as follows:
Long-running HTTP actions: Check Use Continuation for the Integration Procedure action.
Remote actions: Implement a class that extends the VlocityContinuationIntegration class with the following
methods:
• invokeMethod: A single dispatcher that, based on an input parameter, dispatches requests to an

action-specific invocation method.
• An action-specific invocation method: A method that allocates and populates a continuation object,
issues an asynchronous HTTP request for the remote action, and returns results to the caller.
The following example illustrates the methods that you need to implement to support continuation for long-
running-remote actions. You can use this approach to support long-running HTTP actions, too.
global with sharing class ExampleContinuationForOSAndIP extends

vlocity_namespace.VlocityContinuationIntegration {
global override Object invokeMethod(String methodName, Map < String, Object >
inputMap, Map < String, Object > outMap, Map < String, Object > options) {

company 2002
OmniStudio

try {
// the custom methods can have any customized signature, but you *must*
pass in the "options" parameter
if (methodName.equals('myLongRunningCalloutMethod')) {
// Returns Continuation Object
return myLongRunningCalloutMethod1(5, options);
} else if (methodName.equals('myCallback')) {
myCallback(inputMap, outMap, options);
} else {
result = false;
}
} catch (System.Exception e) {
result = false;
}
return result;
}
// You can have other parameters, but make sure you always pass in
Map<String, Object> options
private Object myLongRunningCalloutMethod(Integer count, Map < String, Object

> options) {
// Make a normal HTTP Request. Any HTTP Request can be made as a
Continuation call
String url = 'https://node-count.herokuapp.com/' + count;
HttpRequest req = new HttpRequest();
req.setMethod('GET');
req.setEndpoint(url);
// Create a Continuation for the HTTP Request

Continuation con = new Continuation(60);
// Set Continuation info for OmniScript

con.continuationMethod = 'myCallback';
String label = con.addHttpRequest(req);
VlocitySetAsyncCallbackState(con, label, options);
// Set Continuation info for Integration Procedure

options.put('continuationState', label);
options.put('continuationCallback', 'myCallback');
// Return the Continuation Object

return con;
}

company 2003
OmniStudio
// This method does NOT return the Continuation Object

// It returns the response to OmniScript, therefore needs to set outMap.
private Object myCallback(Map < String, Object > inputMap, Map < String,
Object > outMap, Map < String, Object > options) {
// This is how you access the state and labels passed by the Continuation
Object. You can maintain more complex State.
Object state = inputMap.get('vlcContinuationCallbackState');
Object labels = inputMap.get('vlcContinuationCallbackLabels');
HttpResponse response = Continuation.getResponse((String) state);

Integer statusCode = response.getStatusCode();
if (statusCode >= 2000) {

// Handle error case. See Salesforce Continuation documentation for details.
}
// This map is returned to OmniScript or Integration Procedure

outMap.put('myLongRunningCalloutMethod2Response', response.getBody());
return null;
}
}
Each callback method in the chain returns all the Continuation data available from the Salesforce
Continuation feature. The following example shows how to access Continuation data.

If your state is a custom Apex class, the 'state' object returned by

inputMap.get('vlcContinuationCallbackState') is a Map<String, Object>, which means its contents cannot be
directly cast using
(CustomApexWrapperClass)inputMap.get('vlcContinuationCallbackState'). Instead, the
returned object must be serialized to JSON and then deserialized and cast to its correct class. For example:
CustomApexWrapperClass wrap =
(CustomApexWrapperClass)JSON.deserialize(JSON.serialize(state),
CustomApexWrapperClass.class);
This approach permits any data that is written to the VlocitySetAsyncCallbackState to be retained and used
as by its custom Apex class.
Make a Long-Running Remote Call Using VlocityContinuationIntegration

To support long-running remote calls, Vlocity supports the use of the Salesforce Continuation object. The
VlocityOpenInterface2 interface and VlocityContinuationIntegration class support normal
Remote Calls and Remote Calls that use the Continuation Object. For the new Apex classes, don’t use
VlocityOpenInterface.

company 2004
OmniStudio
For more information on the SFDC Continuation object, see the following Salesforce documentation:
• Process for Using Asynchronous Callouts

• Apex Continuations: Asynchronous Callouts from Visualforce Pages
To make a remote call using the Salesforce Continuation object and extending the
VlocityContinuationIntegration class:
1. Create an Apex class that extends the VlocityContinuationIntegration class.

This class implements VlocityOpenInterface2.
2. Implement the callback method in the invokeMethod. For more information, refer to the sample class
at the end of this topic.
3. For the method that returns the Continuation Object, call the method
VlocitySetAsyncCallbackState before the return.
con.continuationMethod = 'customcallback'; // implemented in invokeMethod

VlocitySetAsyncCallbackState(con, con.addHttpRequest(req), options);
4. For the last callback method in the chain that returns the response back to OmniScript, use the
following code to get the state of the Continuation Object and system labels.

5. The 'state' Object returned from inputMap.get('vlcContinuationCallbackState') must be a
Map<String, Object> with contents that can’t be directly cast using
(CustomApexWrapperClass)inputMap.get('vlcContinuationCallbackState'). Instead,
the returned object must be serialized to JSON and then deserialized and cast to its correct class. For
example:
CustomApexWrapperClass wrap =
(CustomApexWrapperClass)JSON.deserialize(JSON.serialize(state),
CustomApexWrapperClass.class);
This approach permits any data written to the VlocitySetAsyncCallbackState to be retained and
used as its custom Apex class.
Example 26. Sample Class VlocityContinuationIntegrationTest.cls

// Sample Apex class for making Remote Call in OmniScript
// (1) Create a custom Apex class which extends
VlocityContinuationIntegration, for a Vlocity managed package,
// need to include the Namespace prefix - NS.VlocityContinuationIntegration
// (2) implement invokeMethod, return type is Object (a) in the Continuation
Object case, return Continuation Object
// (b) in the normal case, you can return Boolean
global with sharing class VlocityContinuationIntegrationTest extends
VlocityContinuationIntegration
{

company 2005
OmniStudio
global override Object invokeMethod(String methodName, Map<String, Object>

inputMap, Map<String, Object> outMap, Map<String, Object> options)
{
try
{
// the custom methods can have any customized signature, but
// PLEASE MAKE USRE YOU ALWAYS PASS IN options
if(methodName.equals('Continuation1'))
{
// this returns Continuation Object
return Continuation1(10, inputMap, outMap, options);
}
else if(methodName.equals('Continuation2'))
{
return Continuation2(8, options);
}
else if(methodName.equals('customcallback'))
{
customcallback(inputMap, outMap, options);
}
// other methods to handle normal Remote Call
else
{
result = false;
}
}
catch(System.Exception e)
{
// System.log ...
result = false;
}
return result;
}
// You can have other parameters as well, but make sure you always pass in
Map<String, Object> options
private Object Continuation1(Integer count, Map<String, Object> inputMap,
Map<String, Object> outMap, Map<String, Object> options)
{
// THIS IS A SAMPLE TO CALL HEROKU NODE SERVICE
// Make an HTTPRequest as we normally would
// Remember to configure a Remote Site Setting for the service!
String url = 'https://node-count.herokuapp.com/'+count;
>HttpRequest req = new HttpRequest();

company 2006
OmniStudio
// Create a Continuation for the HTTPRequest

//
// Please set up callback method here
// (1) Include this callback method in the above invokeMethod, refer to
// else if(methodName.equals('Continuation2'))
// (2) methodName is CASE SENSITIVE
con.continuationMethod = 'Continuation2';
// The following method MUST BE CALLED
// params:
// (1) first parameter = Continuation Object
// (2) second parameter = WHATEVER YOU WANT TO SET THE state parameter of
the CONTINUAION Object
// https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/
apexcode/apex_continuation_process.htm
// (3) third parameter = options
// what it does:
// restructure the state property of the Continuation Object to be passed
to the next Callback
// con.state is a Map, which contains:
// (a) vlcContinuationCallbackState - the state you want to set, in this
example, con.addHttpRequest(req)
// (b) vlcContinuationCallbackLabels - labels, refer to
// https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/
apexcode/apex_continuation_process.htm
// Return it to the system for processing
return con;
}
// callback for the first Continuation
// Returns Continuation Object
// This is to show you how to serialize multiple long running remote calls
private Object Continuation2(Integer count, Map<String, Object> options)
{
// EXAMPLE
// Make an HTTPRequest as we normally would
// Remember to configure a Remote Site Setting for the service!
String url = 'https://node-count.herokuapp.com/'+count;
HttpRequest req = new HttpRequest();
// Create a Continuation for the HTTPRequest
// (1) This callback method should be included in the above invokeMethod,
refer to above
// else if(methodName.equals('customcallback'))

company 2007
OmniStudio
con.continuationMethod = 'customcallback';
// The following line has to be called
// Return it to the system for processing
return con;
}
// Last callback method
// This does NOT return Continuation Object
// This will return the response back to OmniScript, therefore need to set
outMap
private Object customcallback(Map<String, Object> inputMap, Map<String,
Object> outMap, Map<String, Object> options)
{
// This is how you access the state and labels passed by the Continuation
Object
// EXAMPLE
HttpResponse response = Continuation.getResponse((String)state);
Integer statusCode = response.getStatusCode();
if (statusCode >= 2000)
{
// System.log ...
}
// This goes back to OmniScript
outMap.put('continuousResp', response.getBody());
return null;
}
}
Security for DataRaptors and Integration Procedures

You can control access to DataRaptors and Integration Procedures using settings that reference Sharing
Settings and Sharing Sets or Profiles and Permission Sets.
IMPORTANT

company 2008
OmniStudio
Prior to the Summer '19 release, you might have used Salesforce Sharing Settings or Sharing Sets to
secure access to DataRaptors and Integration Procedures. This approach is still supported. If you use
caching, you must set CheckCachedMetadataRecordSecurity to true as described here.
Beginning with Summer '19, you can allow access to a DataRaptor or Integration Procedure based on the
Custom Permissions enabled in a user's Salesforce Profiles or Permission Sets. An Apex class added to
your Salesforce Org allows the Vlocity Managed Package to check user Custom Permissions. The custom
settings described here are related to this approach. Vlocity recommends using Custom Permissions in
Profiles or Permission Sets for ease of use and better performance.
For Salesforce access basics, see Control Who Sees What, Who Sees What — Overview Video, and
Salesforce Data Security Model — Explained Visually. For Vlocity-specific information about Profiles, see
Overview of Profiles and Security for Vlocity.
Sharing Settings, Sharing Sets, Profiles, and Permission Sets control access to DataRaptors and
Integration Procedures as object records. To enforce field-level security in the data that DataRaptors
access, go to the DataRaptor's Options tab and select Check Field Level Security.
IMPORTANT
A user's access to a DataRaptor or Integration Procedure includes more than the ability to
run it directly. Access also applies if an application the user is using calls the DataRaptor
or Integration Procedure.
If a user has access to a parent Integration Procedure, the parent can invoke child
Integration Procedures and DataRaptors to which the user doesn’t have direct access.
Configure DataRaptor and Integration Procedure Security Settings

You can change custom settings for DataRaptor and Integration Procedure security in Setup.
For a list of settings, see DataRaptor and Integration Procedure Security Settings.
1. Go to Setup.

company 2009
OmniStudio
6. Click New.
7. Enter a Name and a Value.

company 2010
OmniStudio
8. Click Save.
DataRaptor and Integration Procedure Security Settings

These settings affect DataRaptor and Integration Procedure security.
To configure these settings, see Configure DataRaptor and Integration Procedure Security Settings.
Setting Description Data Default

Type Value
DefaultRequiredPermission Specifies the Custom Permission a user must have to run String (none)
The Required Permission setting, which you can optionally

specify when creating a DataRaptor or Integration Procedure,
overrides this setting.
If this setting is absent or blank, all users can run any

DataRaptors or Integration Procedures that don't have Required
Permission values.
Custom Permissions for users are defined in Salesforce Profiles

or Permission Sets. For Vlocity-specific information about
Profiles, see Overview of Profiles and Security for Vlocity.
For this setting to work, the

VlocityRequiredPermissionCheck class must be
implemented. See Implement the
VlocityRequiredPermissionCheck Class.
CheckCachedMetadataRecordSecurity By default, cached data is not secured when you use Salesforce True/ False
Sharing Settings or Sharing Sets to secure access. If True, this False
setting performs a record-level security check for cached data.
This lessens the performance benefit of metadata caching
slightly. This setting isn't needed if you use Custom Permissions
to secure access.
Implement the VlocityRequiredPermissionCheck Class

For the DefaultRequiredPermission setting to work, you must implement the
VlocityRequiredPermissionCheck class manually because Salesforce handles classes in managed
and unmanaged packages differently. This class doesn't work properly if it's included in the Vlocity
managed package.
For DefaultRequiredPermission details, see DataRaptor and Integration Procedure Security Settings.

company 2011
OmniStudio

3. Click New.

{
{
{
}
return false;
}

{
{
{
break;
}
}
}
}
5. Click Save.

company 2012
OmniStudio
Add Integration Procedure Components to an Upgraded Org

To use new components after upgrading an org, add Integration Procedure components to the OmniScript
Element Type picklist. This article describes the process of adding components and provides a list of the
added components by release.
To add a new Integration Procedure component:
1. Click Setup.
2. In the Quick Find/Search box enter Object, and click Object Manager.
3. Click Vlocity OmniScript Element.
4. Click Fields & Relationships.

company 2013
OmniStudio
5. Click the Type Picklist.
6. Scroll down to the Values section, and click New.
7. Enter the new Element name to the picklist, and click Save.
See Also
• New Integration Procedure Components by Release

company 2014
OmniStudio
New Integration Procedure Components by Release

New Integration Procedure components are listed by the release in which they were introduced, with links
to the Release Notes.
Package Version Element

Vlocity Insurance Summer '20 Release Notes Assert Action
Vlocity Insurance Spring '20 Release Notes Chatter Action
Vlocity Insurance Spring '20 Release Notes DataRaptor Turbo Action
Vlocity Health Summer '19 Release Notes, Vlocity Insurance Summer '19 Release Notes, Vlocity Batch Action
Vlocity Health Summer '19 Release Notes, Vlocity Insurance Summer '19 Release Notes, Vlocity Cache Block
Vlocity Health Summer '19 Release Notes, Vlocity Insurance Summer '19 Release Notes, Vlocity Try Catch Block
Vlocity Insurance and Vlocity Health Spring '19 Release Notes, Vlocity Communications, Media, and Loop Block
Energy Summer '19
Vlocity Insurance and Vlocity Health Summer 2018, Vlocity Communications, Media, and Energy Fall Conditional Block
'18
Vlocity OmniScript Summer 2018 CME , Vlocity OmniScript Spring 2018 INS OmniForm
Vlocity OmniScript Summer 2018 CME , Vlocity OmniScript Spring 2018 INS Delete Action
Vlocity OmniScript Winter 2018 INS Intelligence Action
Vlocity OmniScript Winter 2018 INS List Action
Vlocity Digital Interaction Platform Summer 2017 DataRaptor Transform
Action
Vlocity Digital Interaction Platform Summer 2017 Matrix Action
Vlocity Digital Interaction Platform Summer 2017 Integration Procedure Action
Vlocity Digital Interaction Platform Summer 2017 Response Action
Vlocity Digital Interaction Platform V14 Email Action
See Also
• Add Integration Procedure Components to an Upgraded Org
DataRaptor or Integration Procedure?

DataRaptors read or write Salesforce SObject data or perform single-step data transformations. Integration
Procedures can interact with many types of data and process it in multiple steps. For some use cases, a
single DataRaptor is sufficient. Integration Procedures usually call one or more DataRaptors and are more
flexible and powerful. Use these guidelines to help you determine which to build.
Use a single DataRaptor if:
• You need to read data from SObjects or write data to SObjects, but not both.
• The SObjects you need to read from or write to have a defined relationship. For example, Accounts and
Contacts have a relationship because a Contact can have an AccountId value.
• You only need to work with JSON or XML data. No SObjects are involved.

company 2015
OmniStudio
• You can perform any needed filtering, calculation, or reformatting of data values using one or a series of
formulas.
• You can make any needed changes to the data structure by mapping input JSON nodes to output JSON
nodes.
Use an Integration Procedure if:
• You need to both read from and write to one or more SObjects, which means you need to call at least two
DataRaptors.
• The SObjects you need to read from and/or write to have no defined relationship.
• Transforming your data can't be done using formulas alone. For example, different conditions determine
whether some filtering or calculations are performed at all.
• JSON node mappings aren't straightforward and/or require a series of steps.
• You need to read from or write to multiple data source types, such as SObjects, CSV files, external
objects, Apex classes, and so on.
• You need to perform actions such as calling a REST API, sending an email, merging lists, handling
errors, and so on.
See Also
• DataRaptor Best Practices
• Integration Procedure Best Practices
Calculation Procedures and Matrices

A calculation procedure is a series of calculations performed on matrix lookups and user-defined variables
and constants. A calculation matrix is a table that looks up information using multiple input dimensions and
returns the corresponding output value.

company 2016
OmniStudio
Figure 26. Calculation Procedures and Matrices
Calculation procedures and matrices can automate the creation of complex quotes. Together these can
guide a customer or agent through a series of questions, pull data from various sources, and present one or
more customized quotes or eligibility determinations. These can be quotes or eligibility determinations for:
• An individual health insurance plan via a website to a customer

• A term life quote via an agent
• A volume discount on an order
• A permit or application fee
• A person applying for benefits or services
Calculation procedures and matrices accept input from a Salesforce form, REST API, and OmniScript (in
the data JSON). Inputs can come from more than one source. The output can be a proposal or PDF, or
data for populating an OmniScript, form, list, JSON structure, or REST API request.
Calculation Example for Life Insurance Quote

To provide an accurate quote, an agent must know a person’s age, home ZIP code, and whether they
smoke. First, a form prompts for the needed data, from an agent or web self-service. When the form is
submitted, a calculation procedure defined for that form runs. The first procedure step is a Matrix Lookup,
which looks across the matrix input fields—Smoker, ZIP, and Age—to find the corresponding output (Rate).

company 2017
OmniStudio
After the first procedural step, the second procedural step runs. Tis step takes the Rate that is the output of
the first procedural step, divides it by a constant, and outputs the Monthly Rate. Subsequent steps can
perform additional math on the data submitted—Smoker, ZIP, Age—or use inputs from other data sources,
such as policies currently held, or current health status, to perform additional calculations and return a
variety of quotes.
Calculation Matrices
Calculation matrices are one of the key elements of a Vlocity rating engine. Vlocity uses calculation
matrices to look up inputs, match them to outputs, and provide the outputs to calculation procedures.

company 2018
OmniStudio
Vlocity offers three styles of calculation matrices you can use based on your business needs:
• Standard Calculation Matrices — Has characteristics common to all calculation matrices, including input
columns, output columns, and versions.
• Grouped Calculation Matrices — Allows grouping of matrix rows by a key such as geographic region or
age.
• Row-Versioned Calculation Matrices — Allows versions to apply to specific rows rather than the entire
matrix.
IMPORTANT
You can't create calculation matrices that are both grouped and row-versioned.
It's more important than ever that you plan out your calculation matrix structure before you
start creating your matrices in Vlocity. Once you choose the type of a calculation matrix,
you can't change it.

company 2019
OmniStudio
CAUTION
You can let people modify calculation matrices based on user profiles. In your Vlocity
sandbox and development orgs, it may be useful to let several user profile groups modify
calculation matrices.
But modifying calculation matrices in a production environment can have severe

consequences on the rates you get for insurance products. We recommend that you limit
the number of people who can modify production calculation matrices to only essential
administrators.
Standard Calculation Matrices

All calculation matrices have the characteristics that standard calculation matrices have. Other types have
characteristics that standard calculation matrices lack. All calculation matrices have input columns, output
columns, and versions.
A calculation matrix is a Vlocity rating table that is structured and stored as follows:
• One input column or a set of input columns

• Input column header names must match inputs, such as attributes and remote options
• Each input or set of inputs must be unique
• Vlocity stores all input column header names and all input data in one JSON
• One output column or a set of output columns
• Outputs and sets of outputs don't need to be unique
• Vlocity stores all output column header names and all output data in one JSON

company 2020
OmniStudio
You can have multiple versions of the same calculation matrix enabled at the same time. Vlocity uses the
start date/time, end date/time, and priority (highest number is highest priority, so 2 is higher priority than 1)
to determine which version of the matrix to use.
If the start date/time of one version of a calculation matrix overlaps the end date/time of another calculation
matrix, you can set priorities on them to enable Vlocity to determine which one to use. If a call to a
calculation matrix specifies an effective date, Vlocity uses that date to find the correct matrix. If a date isn't
specified, Vlocity uses today as the effective date.
The call to the calculation matrix finds the right hash, matches the input, unpacks the output JSON, finds
the correct output, and returns it.
Grouped Calculation Matrices

You can create groups of calculation matrices, and subgroups within each group.
Grouped calculation matrices have several benefits:
• Grouped calculation matrices are designed to work best for insurance carriers that have lots of matrices
which are almost exactly alike: same input headers and same output headers.
• Grouped calculation matrices improve management and reduce size requirements.

company 2021
OmniStudio
• Vlocity uses only one SOQL query to query a group of matrix versions.
• Insurance carrier staff members who keep the calculation matrix data up to date can create and enable
new versions of a matrix without touching any other versions.
However, grouped matrices have some limitations. Each matrix in a group must have all the same input
and output column headers.
Example 27. Property and Casualty Sample Use Case

An auto insurance carrier has different insurance rates for different jurisdictions (such as states). The
carrier needs to manage each jurisdiction separately, but they don't want to have to create a separate
calculation for each jurisdiction (because all the calculations are the same).
So this carrier creates a different calculation matrix for each state it offers insurance within, using
Jurisdiction as the Group Key.
All the input and output headers are the same, only the values differ. Each state's calculation matrix can be
updated at a different time, and new versions can be activated at different times.
Example 28. Group Health Sample Use Case

Each provider in a health insurance carrier's network has a different fee schedule, and these fee schedules
must be updated throughout the year as providers change or renew their contracts with the carrier.
The Group Key for this calculation matrix is ProviderFeeSchedule, and each version of the calculation
matrix is for a specific provider.
At execution time, Vlocity uses the group key to find the correct grouped calculation matrix, and the
provider code to pick the correct version of the matrix.
Row-Versioned Calculation Matrices

If you're wrangling large calculation matrices that can't be sectioned cleanly into groups and subgroups, you
can create calculation matrices that are versioned by row.
For example, you've got a matrix that creates a rating factor per ZIP (postal) code, which includes all ZIP
codes in the United States. You want to be able to update ZIP codes individually or in small groups. This
situation calls for a row-versioned calculation matrix.
Each row of this kind of calculation matrix gets assigned a start date when the matrix is created.
At execution time, Standard and Grouped Matrices both pull matrices by version, start date, end date, and
priority at the calculation matrix level. In a row-versioned matrix, this all goes out the window.
At execution time, Vlocity checks the Start Date and End Date of each row in the row-versioned calculation
matrix. If dates overlap on two versions of a row, the calculation uses the version with the highest Priority
specified.
But Vlocity does still use the versions to manage the rows in a row-versioned calculation matrix.

company 2022
OmniStudio
When you update row-versioned calculation matrices, you can include changes to the rows that you need
to update only. Vlocity uploads only the changed rows and shares the unchanged rows with both versions
of the matrix.
What Vlocity does when you update rows is a little bit complicated. Here's how it works.
First Version
The first version of a row-versioned calculation matrix looks almost the same as a standard calculation
matrix. But some data is stored slightly differently by Vlocity. The Start Date / Time you enter is assigned to
each row of the matrix individually.
Second Version
Your second version of the CSV file can be the whole matrix that includes new and changed rows. Or your
CSV can contain only the new and changed rows.
When you upload the second version, you give the new version of the matrix a different Start Date / Time.
Vlocity gives all the new and changed rows in this version the new Start Date / Time.
Vlocity does not copy the unchanged rows to the new version of the calculation matrix. Instead, it shares
the rows from version 1 of the matrix with version 2. That way, the unchanged rows are stored only once,
which saves storage space.
NOTE
Vlocity shares rows only when both versions are enabled.
For example, if version 1 of a calculation matrix is not enabled, its row will not be shared
with version 2.
You still see all the rows, both the rows shared from version 1 and the new and changed rows of version 2
when you view version 2.
You can also create a second version of the calculation matrix and manually change rows rather than
upload them in a CSV. This works best if there are only a couple of changes required.
Third Version and Beyond

You upload version 3 the same as you did version 2, and give it a different Start Date / Time than version 1
or version 2. Vlocity gives all the new and changed rows this Start Date / Time.
Vlocity does not copy the unchanged rows from previous versions. Instead, it shares rows from all previous
version with the new version. So if you've uploaded version 3, you will see unchanged rows stored in
version 1, rows changed in version 2 but not version 3 stored in version 2, and new and changed rows
stored in version 3 only.

company 2023
OmniStudio
Deleted Rows
In a scenario where you've got three versions of a row-versioned calculation matrix, here's what happens
when you delete different rows from different versions:
• Action: In version 3, delete a row that you updated in version 3 that first existed in version 2.
Result: Vlocity shares the version 2 row in version 3 of the matrix. The version 3 row is deleted.
• Action: In version 3, delete a row that has existed unchanged since version 1.
Result: The row disappears from version 3 of the matrix. The row remains unchanged in version 1 and
version 2.
Ways to Create a Standard Calculation Matrix

A standard calculation matrix isn't part of a group, and doesn't have row versioning. You can create a
standard calculation matrix in three different ways.
• Upload a CSV file

To save time and reduce errors when configuring complex matrices with a lot of data, create a CSV file
containing the data and upload it to the matrix.
• Manually create the matrix in Vlocity
For a simple matrix with a small amount of data, enter the data manually.
• Create a new version of an existing matrix (recommended when possible)
Create a new version of an existing matrix, and change its data manually or by uploading a CSV file
containing revised data.
CAUTION
Once you've chosen Standard as the record type of a calculation matrix, you can't change
it. Choose wisely.
Prepare a CSV File to Upload to a Calculation Matrix

You must take specific steps to configure CSV files for uploading to populate a calculation matrix.
IMPORTANT
Starting in the CME Summer '18 release, the following limits are supported:
• Input and output rows: 12,752 total characters (max)

• Columns: Approximately 500 (max) depending on amount of data in columns.
• Rows displayed: 2000 (max)

company 2024
OmniStudio
Before you start the upload, follow the guidelines below to make sure that your CSV file is formatted for use
as a calculation matrix.
1. Add a header name to each column.

Make your headers short and easy to read and understand. Column headers get imported with the
CSV data, which means you don't have to rename them all in Vlocity if they're well named in the CSV
file.
• For input columns, give each column a name that you'll use as an input variable.
This makes it possible for Vlocity to correctly pass in input variables when a matrix lookup calls a
calculation matrix.
• Whenever possible, create consistent column names for input columns.
This makes it possible for an input JSON to provide one input variable that can be used by multiple
matrix lookups in a calculation procedure.
For example, for two CSV files you plan to use as matrices in a single calculation procedure, name
the input column for liability limit liabilityLimit in both CSV files.
• For output columns, enter unique column names that you will use as output variables in calculation
procedures.
TIP
When it's time to update a calculation matrix with new data--like every time a
government makes a change to its insurance regulations--you can do it with a CSV
file. Vlocity is smart enough to scan your CSV file for new rows and changed data in
existing row. Only those new and changed rows get uploaded, which vastly reduces
the amount of time an upload takes, especially for huge matrices.
You must make sure that all column header names exactly match those in the current
calculation matrix.
2. Create rows.
Each row must include a unique combination of input values.
Multiple rows can contain the same output value or combination of values for different input values.
When you build ranges, each set of values must have the same range values. For example, if the
following conditions are true:
• Ranges are 1, 20, and 300 for input 1.
• Ranges are a, b, and c for input 2.
Here's how the table is formatted:
input1 input2 output1

1 a 0.1
1 b 0.2
1 c 0.3
20 a 0.4
20 b 0.5

company 2025
OmniStudio
input1 input2 output1

20 c 0.6
300 a 0.7
300 b 0.8
300 c 0.9
Here's a more realistic example showing a CSV file that will become a calculation matrix for car values,
to be used to rate auto policies:
Upload a CSV File to Create a Calculation Matrix

You can upload a CSV file to create a new calculation matrix. You can also upload a CSV file to an existing
calculation matrix, such as a new version of an existing matrix, to update and add to the headers and data.
For details, see Prepare a CSV File to Upload to a Calculation Matrix.
To create a calculation matrix by uploading a CSV file:

company 2026
OmniStudio
1. On the Vlocity Calculation Matrices page, click New.

2. On the New Vlocity Calculation Matrices window, choose Standard.
3. Enter a Calculation Matrix Name.
Choose a simple name for your calculation matrix. Vlocity adds the calculation matrix name to column
header names and uses the combination in calculation procedures.
Leave the rest of the fields on this window blank.
4. (Optional) If you plan to use a wildcard column, enter the following:
• Wildcard Column: The name of the column that can have a wildcard entered as a user value.
• Wildcard Value: The value a user can enter that's the wildcard.
Be sure to add the Wildcard Value to its column in the CSV file.
5. Click Save.
6. To open the detail page, click the version that you just created.
TIP
If you're importing a CSV file into an existing calculation matrix, make sure that
column header names in the CSV file match exactly with the column header names in
the calculation matrix. CSV column header names that don’t match any existing
columns are added to the calculation matrix as new columns.
7. In the Table section, click Upload CSV.

8. When the Upload CSV window opens, click Choose File.
9. Select the file, click Open, then click Upload.
10. Set the Header Type of each column. The Header Type defines the column mapping.
• Input: The column gets data for the calculation.
• Output: The column returns data from the calculation.
NOTE
You must map all the Header Types: set each Header Type to Input or Output.
11. Select a Data Type for each column from this list:
• Text
• Number
• Currency
• Percent
• Boolean
• Number Range
• Text Range
The Data Type defaults to Text for all newly-uploaded columns.
12. Click Save Data.
13. To see the data rows, click Edit Data.
14. Review your table in Vlocity to be sure that it's all correct. To learn how to edit headers and data, see
Review and Edit a Calculation Matrix.

company 2027
OmniStudio
To see columns that have errors, click Show Errors Only. (The button toggles to Show All Rows after
you click it.)
16. If your organization has an approval process set up for calculation matrices, click Submit for
Approval.
17. After the calculation matrix is approved, or if your organization doesn't approvals and you're ready to
use this calculation matrix, enable the calculation matrix.
Click the pencil icon to the right of the Enabled checkbox.
Select Enabled.
IMPORTANT
You can't disable an enabled calculation matrix, and you can't edit headers or data on
an enabled calculation. Be sure before you click Enabled.
Create a Calculation Matrix Manually

If a calculation matrix has only a few rows of data, it might be easier to create it manually.
1. On the Vlocity Calculation Matrices list page, click New.

2. On the New Vlocity Calculation Matrices window, choose Standard.
3. In the Calculation Matrix Name box, enter the name for the calculation matrix.
Choose a simple name for your calculation matrix. Vlocity adds the calculation matrix name to column
header names and uses the combination in calculation procedures.
Leave the rest of the fields on this window blank.
5. Click Save.
6. Click the version of the matrix that you just created.
7. In the Table section, click Add Header.
• Name is the column header name.
• Header Type defines the column mapping. Select Input if the column gets data for the calculation.
Select Output if the column returns data from the calculation.
• Data Type specifies the type of data stored in the column:
• Text
• Number
• Currency
• Percent
• Boolean
• Number Range
• Text Range

company 2028
OmniStudio
IMPORTANT
Do not change the Data Type of an existing header unless you have no other
choice. When you change the Data Type, the data in the column can be corrupted,
requiring you to re-enter all the data.
• Matrix Display Order defines the column number (sequence).

9. Repeat steps 5 and 6 to define the rest of the column headers.
11. Click Edit Data to enter values into the columns.
12. Enter a value into each data field in each column.
NOTE
You must enter data in every data field. You cannot enable a calculation matrix that
contains empty data fields.
13. When you're done editing, click Save Data.

Approval.
Select Enabled.
IMPORTANT
You can't disable an enabled calculation matrix, and you can't edit headers or data on
an enabled calculation. Be sure before you click Enabled.
Create a New Version of an Existing Calculation Matrix

It's a lot quicker to clone an existing version of a calculation matrix than it is to create a new matrix from
scratch. Cloning copies all the headers and data.
1. From the Calculation Matrix list page, click the name of the matrix. Then click the version of the matrix
you want to clone.
2. Click the down-arrow at the top right of the calculation matrix detail page and choose Create New
Version.
Vlocity opens the new version of the calculation matrix. It includes the following:
• A unique name composed of matrixName vX where X is the new version number
• A new version number
• The same start date as the previous version
• The same end date (or lack of end date) as the previous version

company 2029
OmniStudio
• All the same data as the previous version
NOTE
If you create a new version of the matrix with over 1,500 rows, only the row headers
are copied into the new version. You must re-upload the data into the new version.
If there are fewer than 1,500 rows, all data is copied into the new version.
The new version does not include a Priority number, and is not enabled.
3. To update the headers and data in the matrix, Upload a CSV File or Review and Edit the Calculation
Matrix.
4. Set new Start Date/Time and End Date/Time for the new matrix.
a. When you enter a Start Date/Time for the new version of the matrix, set it to the date/time when
the previous version ends.
Or
Set a Start Date/Time before the End Date/Time of the previous version and set Priority numbers
for both matrices so Vlocity can choose the correct matrix when it's called.
b. Enable the new matrix when it's ready, even if the Start Date/Time is in the future. Vlocity won't
use the new enabled matrix until the Start Date/Time is reached.
5. Enter a Priority number.
When Vlocity finds more than one enabled calculation matrix that matches the call being handled, it
chooses the calculation matrix with the highest priority. For example, if two enabled calculation
matrices have Priority set to 1 and 2, Vlocity uses the calculation matrix that's set to Priority 2.
Approval.
Select Enabled.
NOTE
You can't directly disable an enabled calculation matrix, and you can't edit headers or
data on an enabled calculation. Be sure before you click Enabled!
If you need to modify or replace an enabled calculation matrix, you can create and
enable a new version of the calculation matrix, and assign it a higher priority number
than the old matrix.
Workflow for Creating a Grouped Calculation Matrix

You can create a calculation matrix that's part of a group of matrices. You create grouped calculation
matrices so that a calculation procedure (or another calling process) can search all the matrices using only
one SOQL query. This speeds up Vlocity processing and frees up SOQL queries for other purposes.

company 2030
OmniStudio
Versions in a grouped matrix can have different effective dates.
To create a grouped calculation matrix:
1. Make sure your groups of matrices can follow all these rules:
• Identical input and output column headers
• Contain at least one and maximum two common input dimensions
• Input variable ranges must all be the same
• The Group Key and Sub Group Key cannot be range inputs
The Group Value and Sub Group Value are usually text inputs, such as a jurisdiction code or a
product code.
2. Create a Grouped Calculation Matrix.
3. Populate the Rest of the Matrices in the Group.
Create a Grouped Calculation Matrix

Created grouped calculation matrices can be a bit tricky. Hang in there!

2. On the New Vlocity Calculation Matrices window, choose Group.
5. Enter a Group Key. (Required)
You'll only do this once per group.
6. Enter a Sub Group Key. (Optional)
You'll do this only once per subgroup.
7. Click Save.
8. Click the name of the Matrix Version you just created.
9. Enter a Group Value.
10. If you're using subgroups, enter a Sub Group Value.
11. (Optional) You can add and change the following:
• Name
You can change the name of this matrix version to something more descriptive.
• Priority
• Version Number
• Start Date/Time
• End Date/Time
After you've made your changes, click Save.
12. Still on the matrix version page, click Upload CVS. See Upload a CSV File to Create a Calculation
Matrix.
If you're creating this group of matrices by hand in Vlocity, click Add Headers.

company 2031
OmniStudio
Populate the Rest of the Matrices in the Group

After you've created the first matrix in a group, you can create as many other group members as you need.
TIP
We call matrix group members Versions.
To add a new member (version) matrix:
1. On the Calculation Matrix group page, click the Related tab.

2. Next to Vlocity Calculation Matrix Versions, click New.
3. Enter a Name for this matrix.
5. Change the Version Number to a number different from all the other Version Numbers of the existing
matrices in this group.
6. Add any of the following optional information:
• Start Date / Time
Defaults to the date and time you create this member matrix.
• End Date / Time
Defaults to no value.
• Group Key Value
Enter a value for the Group Key you entered when you created this group.
• Sub Group Key Value
Enter a value for the Sub Group Key if you're using Sub Groups.
• Priority
This one's important if you plan to eventually have more than one version of each member matrix in
this group. For example, if you have two member matrices that have overlapping Start Dates and
End Dates, set a Priority so Vlocity knows which member matrix to use when called.
7. Click Save.
Workflow for Creating a Row Versioned Calculation Matrix

Creating the first version of a row-versioned calculation matrix follows most of the same steps as creating a
standard calculation matrix. Then, as you need to make changes to these matrices, you can upload new
individual rows. This creates new versions of the replaced rows with new start dates and end dates.
Be sure that your CSV file is set up to support row-level versioning. To learn how, see Prepare a CSV File
to Upload to a Calculation Matrix.

company 2032
OmniStudio
IMPORTANT
You can't add row-level versioning to an existing matrix that lacks it, because overlapping
effective dates cause errors.
To create and manage a row-versioned calculation matrix:
1. Create a Row Versioned Calculation Matrix.

2. Upload New Versioned Rows.
3. Delete Versioned Rows.
4. Delete an Entire Matrix Version.
Create a Row Versioned Calculation Matrix

The first step is to create the row-versioned matrix and choose how to add data.

2. On the New Vlocity Calculation Matrices window, choose Row-Versioned.
4. (Optional) If you plan to use a wildcard column (available in Winter '20 and later releases), enter the
following:
5. Click Save.
6. Click the name of the Matrix Version you just created.
7. Still on the matrix version page, choose one of these options:
• If you're uploading data from a .csv file, click Upload CVS. See Upload a CSV File to Create a
Calculation Matrix.
• If you're creating this matrix by hand, click Add Headers.
IMPORTANT
Once you've enabled your calculation matrix version, the headers are locked. You won't be
able to change them again.
Upload New Versioned Rows

You must create a new version of a row-versioned calculation matrix before you upload new data from
a .csv file.

company 2033
OmniStudio
1. Make sure the CSV is in good shape. Most importantly, make sure all the column headers in the .csv
file are identical to the headers in the existing calculation matrix.
See Prepare a CSV File to Upload to a Calculation Matrix.
2. On the calculation matrix you're updating, click the Related tab.
3. Under Vlocity Calculation Matrix Versions, click New.
• Name: Enter a name for this version of this calculation matrix.
TIP
Choose a name that makes it easy to understand the contents of this version of the
calculation matrix. For example, CalcMatrix_ChangedRows12-24 or
CalcMatrix_ChangedRowsForWesternStates2020.
• Version Number: Enter a unique version number for this calculation matrix version. This version
number does not relate to the row versions, but Vlocity needs it as a unique identifier for each matrix
version uploaded.
• Enabled: Select this checkbox to enable this version of the calculation matrix.
• Start Date / Time: Enter the start date for the new and updated rows.
IMPORTANT
The Date field is mandatory for row-versioned calculation matrices.
• End Date / Time: Enter the end date for the new and updated rows.
TIP
If you need to update rows with an end date that's not today, don't delete the rows.
Instead, create a .csv file that includes only the rows you want to set an End Date
for.
• Priority: Enter a unique priority number that calculation procedures can use to prioritize which in
which order to search calculation matrices.
NOTE
Don't enter anything into the End Date / Time fields unless you're updating rows
specifically to give them an end date. In row-versioned calculation matrices, Vlocity
sets end dates behind the scenes. If you enter specific end dates, you may get
unpredictable results.
5. Click Save.
6. Click the name of the matrix version you just created.

company 2034
OmniStudio
7. Click Upload CSV.

8. Choose your new CSV file, then click Upload.
9. Review the matrix.
Delete Versioned Rows

You can delete individual rows from a row-versioned calculation matrix.
TIP
You don't have to delete rows from matrices to make Vlocity's row-versioning work. You
can leave existing rows in place. When the matrix is called, the row with the most recent
Start Date is used.
To delete a single row from a version of a calculation matrix:
1. Open the calculation matrix.

2. Deselect the Enabled checkbox if this matrix is enabled.
3. On the Related tab, open the version of the calculation matrix you want to delete a row from.
4. In the header, click the pencil beside Enable.
5. Deselect Enable, then click Save.
6. Find the row you want to delete.
7. Click the trash can icon at the right side of the row to be deleted.
8. On the message that appears, click OK.
9. Click Save Data.
Delete an Entire Matrix Version

You can delete all the data from a specific version of a row-versioned calculation matrix.
CAUTION
Don't delete all data from any calculation matrix version unless you're absolutely sure you
need to. This action can cause problems with calculation procedures that use data from
the calculation matrix.
1. Open the calculation matrix.

2. On the Related tab, open the version of the calculation matrix you want to delete.

company 2035
OmniStudio
3. Click Delete Data.

4. On the message that appears, click OK.
5. Click Save Data.
Wildcards in Calculation Matrices

Starting in Winter '20, you can make it possible for calculation procedures and other Vlocity features that
call calculation matrices to use a wildcard in place of a value for one column.
For example, you've got a calculation matrix that contains insurance ratings for thirty of these states in the
United States. Because you don't have separate ratings for the other twenty states but you want your
calculation procedure to find a value for those states, you make the State column into a wildcard-enabled
column.
You set up your wildcard column when you first create your calculation matrix. So you need to know the
exact name of the column and the value of the wildcard.
For the State example, the column name and value can be:
• Wildcard Column: state

• Wildcard Value: ALL
Wildcard columns work in standard, grouped, and row-versioned calculation matrices.
Search in a Calculation Matrix

You can search for specific values in a calculation matrix that has many rows.
1. Find the column or columns for which you want to restrict values.
2. Enter the value you're looking for into the field next to the magnifying glass.
NOTE
Don't use wildcards when you search in a matrix. Use exact values.
3. Click the Search button above the columns.

Vlocity displays the matrix rows containing the specified value in the selected column.
4. If your search returns no results, note the following:
• By default, Vlocity returns only the first 2000 results of your search.
• For multi-column searches, Vlocity searches one column at a time, in order.
You can enter search parameters into multiple columns and click Search. Vlocity searches the first
column, then uses the second parameter to search the results from the first column.
5. To improve search results:
• Set the General Setting CalculationMatrixRowPrettify = true (if it's set to false).
1. To set this setting, go to Setup > Custom Settings > General Settings > Manage.
2. Either add the setting manually, or if it exists already, edit it.
• For calculation matrices created before the Summer '19 release, click the Update JSON button
before you search.

company 2036
OmniStudio
Download Calculation Matrix Data to a CSV File

You can download all or part of the data in a calculation matrix.
To download all the data, navigate to the version of the calculation matrix that you need to download and
click Download CSV. The CSV file containing the whole calculation matrix downloads to your computer.
To download part of a matrix:
1. Navigate to the version of the calculation matrix that you want to download.
2. Find the column or columns for which you want to restrict values.
3. Enter the value you're looking for into the field next to the magnifying glass.
4. Click the Search button above the columns.
5. Click Download CSV.
The CSV file containing the search results downloads to your computer.
Edit and Delete Matrix Data

You can edit and delete the data in a calculation matrix if you haven't enabled it yet.
1. Click Edit Data.

2. Change data in any field.
3. To delete a whole row, click the trashcan icon at the far right of the row that you want to delete.
4. To delete all the data from a matrix but leave the headers in place, click Delete Data, then click OK to
confirm.
5. To delete all headers and data, click Delete All, then click OK to confirm.
6. Click Save Data.
Edit Matrix Headers

You can change the names and data types of the column headers in a calculation matrix.
1. Click Edit Headers.

2. Change names and fields in any header.
• Name is the column header name.
• Header Type defines the column mapping. Select Input if the column gets data for the calculation.
Select Output if the column returns data from the calculation.
NOTE
You can't use a split-limit attribute as an Output in a calculation matrix.
• Data Type specifies the type of data stored in the column:

• Text
• Number
• Currency
• Percent

company 2037
OmniStudio
• Boolean
• Number Range
• Text Range
IMPORTANT
Do not change the Data Type of an existing header unless you have no other
choice. When you change the Data Type, the data in the column can be corrupted.
If the data becomes corrupted, reimport the CSV file to overwrite the corrupted data.
• Matrix Display Order defines the column number (sequence).

3. To delete a column, including its data, from the matrix, click Remove Column at the bottom of the
column header.
4. To add a header, click Add Header.
Fill out the header as described in step 2.
5. Click Save Data.
Disable a Calculation Matrix

To disable a calculation matrix, edit its End Date/Time.
1. Open the version of the calculation matrix that you want to disable.
2. In the details section, click the pencil icon to the right of End Date/Time.
3. Set the End Date/Time to the date and time that you want the matrix to be disabled.
4. Click Save.
Ranges in Calculation Matrices

A range takes a number or text value and assigns it to groups that you've defined. You can use numeric
ranges and alphabet ranges in Vlocity Calculation Matrices. For example, if age is a component of your
pricing, you can use a numeric range to map the applicant's age to the correct age group.
Age Today Assigned to Age Group

17 or younger Age Group 0
18 to 24 Age Group 1
25 to 29 Age Group 2
30 to ... ...
Numeric Ranges in Calculation Matrices

When you configure numeric ranges for a matrix, values below the lowest level that you configure are
treated as the lowest value, and values above the highest value that you configure are treated as the
highest value configured for the matrix.
In the following example, the numeric range is defined in the Input column. The Age Range Band describes
how values are treated: all values below 18 fall into the first band, values that are 18 or higher and below 25

company 2038
OmniStudio
fall into the second band, and so on. For example, for age 48, the matrix returns an Age Range Band of 6.
For age 22, it returns an Age Range Band of 1.
When you have multiple inputs that include range, define identical ranges for each variable value. For
example:

company 2039
OmniStudio
Collating by Alphabetic Ranges (Example)

Suppose you want to assign Contacts into one of three buckets by last name such that:
• I = Contacts whose last names begin with A-I

• J = Contacts whose last names begin with J-R
• S = Contacts whose last names begin with S-Z
Set up the matrix as follows:

company 2040
OmniStudio
Added Dimensions in the Matrix

You might want to look up additional dimensions in the Matrix. For example, to look up Age Range Band by
gender, create two rows for each age: one for Male applicants, the other for Female applicants. Additional
dimensions require additional rows.
Calculation Procedures Overview

A Calculation Procedure is a series of calculations performed using matrix lookups and user-defined
variables and constants. A calculation procedure can call Apex classes for pre- and post-calculation custom
logic. Calculation procedures are part of pricing rules.
There are two types of calculation procedures:
• Class-based: Pricing logic is written in an Apex class.

• Declarative: Pricing logic is implemented using matrix lookups, variables, constants, and basic math
operations.

company 2041
OmniStudio
Declarative calculation procedures are associated with DataRaptor mappings. Declarative calculation
procedures use DataRaptors to read and save data from Salesforce objects. You can add variables from
the DataRaptor extract, such as Original Price (Currency) and Quantity (Number). For example, you can
add a currency variable named UnitPrice as a calculation output that can be used in a DataRaptor load to
update a field in a Salesforce object.
A calculation procedure can use two types of steps.
• Matrix: If you have enabled Calculation Matrices, a calculation procedure can include a Calculation Matrix
in the calculation steps. For more information about Calculation Matrices, see Calculation Matrices.
• Formula: For example, you can specify the UnitPrice variable as output. If you are using DataRaptor
mappings, the calculation procedure output variable name must match the DataRaptor Load input
variable name
Each step in a Calculation Procedure can have a condition that must be met in order for the step to be
executed. See Conditional Steps For Calculation Procedures.
In the Preprocessor Class Name section of the calculation procedure, you must specify the class that
implements a nameSpace.VlocityOpenInterface calculation method.
To include the output from a calculation step in the final output, select Include in output.
Use Cases for Calculation Procedures

Here are ways to set up the possible use cases for calculation procedures that use or don't use attribute-
based pricing or volume-based pricing.
Case 1 — No attribute-based pricing or volume-based pricing across multiple line items:
• Define the input DataRaptor filter on the OrderItem.

• Use a DataRaptor Extract for input and a DataRaptor Load for output.
Case 2 — Attribute-based pricing, but no volume-based pricing across multiple line items:
• You cannot specify the DataRaptor input in the Calculation Procedure.

• A preprocessor is required to format the input data and attribute information for use in the Calculation
Matrix.
• In the unmanaged package, an Apex class named CalcProcPreProcessor formats the DataRaptor
input as required to support attributes in the Calculation Matrix.
• A custom setting—CPPreProcObjectDRBundle—specifies the name of the input DataRaptor that the
preprocessor uses.
• The object must be Opportunity, Order, or Quote.
Case 3 — Attribute-based pricing and volume-based pricing across line items:
• You cannot specify the input or output DataRaptors in the Calculation Procedure.
• A preprocessor is required to format the input data for use in the Calculation Matrix.
• A postprocessor is required to evaluate the quantities across all lines in the header object.

company 2042
OmniStudio
• Two Apex classes—CalcProcPreProcessor and CalcProcPostProcessor—are provided in the

unmanaged package.
• Custom settings define the name of the input DataRaptor that the preprocessor uses and the output
DataRaptor that the postprocessor uses.
• CPPreProcObjectDRBundle
• CPPostProcObjectDRBundle
• The object must be Opportunity, Order, or Quote.
Use Apex to Define Pricing Logic

To use Apex to define pricing logic, create a class-based Calculation Procedure. The Calculation Procedure
name and action class name must be the same as the name of the Apex class. (To define pricing logic
without using an Apex class, create a declarative Calculation Procedure.)
To create a Calculation Procedure:
1. Go to the Vlocity Calculation Procedures tab.

2. Click New.
3. From the Record Type of new record picklist, select Class Based.
4. Click Continue.
5. In the Calculation Procedure Name field, enter a name for the procedure.
6. In the Description box, enter a brief description.
7. Click Save.
Clone a Calculation Procedure

The Clone action button isn't present for calculation procedures by default, but you can add it. When you
clone a calculation procedure, you're cloning all of its versions, steps, variables, and constants.
By default, the new (cloned) calculation procedure does not have any versions set to Enabled. You have to
manually enable one of the versions to use it.
Any calculation matrices used by the calculation procedure are not cloned.
In Salesforce Lightning, you add a Clone button to the Calculation Procedure object, then add the button to
the Calculation Procedure page layout:
1. Go to Setup > Object Manager > Vlocity Calculation Procedure > Buttons, Links, and Actions.
3. Enter a Label and a Name for the button.
4. In Display Type, choose either Detail Page Button or Detail Page Link.
5. Choose a Behavior.
Recommended: Display in existing window with sidebar.
6. In Content Source, choose Visualforce Page.
7. In Content, choose CalculationProcedureCloner.
8. Click Save.
9. Go to Setup > Object Manager > Vlocity Calculation Procedure > Page Layouts.

company 2043
OmniStudio
10. Choose the layout.

11. In the top pane, choose Buttons, then drag the Clone button onto the page layout.
Recommended location: The Vlocity Calculation Procedure Detail > Custom Buttons area.
12. Click Save.
13. After you have added the button, you can clone a calculation procedure:
a. Go to the Vlocity Calculation Procedures list page and click the calculation procedure that you
want to clone.
b. Click the Clone button.
TIP
If you can't see the Clone button on your screen, click the gray down-arrow at the
top right of the page and select Clone.
c. In the New Vlocity Calculation Procedure window, enter a name for your new calculation
procedure, then click Save.
See Also
• Declarative Calculation Procedures
Variables and Constants in Calculation Procedures

You must create variables, constants, and matrices before you can use them in a Calculation Procedure.
After you create them, they will be available to use in Calculation Procedures.
The following are a few guidelines for using variables in Calculation Procedures:
• Create a variable for every value in the calculation.

• A variable to the right of the equals sign (=) means that the equation output will be assigned as the
variable value.
For example, x + y = variable means the value of variable is now the sum of x + y.
• A variable to the left of the equals sign (=) means that the current value of the variable is part of the
calculation.
For example, x + variable = y means the value of y is now the sum of x plus the current value of
the variable.
• A variable keeps the value assigned to it until another operation changes its value. For example:
x = 2
y = 3
variable = 0
variable = 0
Step 1: x + y = variable // 2 + 3 = 5. variable = 5

Step 2: y + y = variable // 3 + 3 = 6. variable = 6
Step 3: variable + y = variable // 6 + 3 = 9. variable is now 9.
Step 4: variable + variable = variable // 9 + 9 = 18. variable is now 18.

company 2044
OmniStudio
See Also
• Add Variables and Constants
Conditional Steps For Calculation Procedures

For each step in the Calculation Procedure, you can define a condition that must be met in order for the
step to be executed. The step is only executed when the condition is met.
To specify a condition, check Conditional Step and enter the condition for the step. If the condition
compares a variable with a constant, the constant must be defined in the Constant section.
Functions for Calculation Procedures

The following functions are supported in calculation procedures.
Function Description Example

ADDDAY Adds the specified number of days to the ADDDAY("1999-01-01",100) returns "1999-04-11 00:00:00"
specified date and returns the resulting date.
ADDMONTH Adds the specified number of months to the ADDMONTH("1999-01-01",100) returns "2007-05-01
specified date and returns the resulting date. 00:00:00"
ADDYEAR Adds the specified number of years to the ADDYEAR("1999-01-01",100) returns "2099-01-01 00:00:00"
specified date and returns the resulting date.
AGE Returns the age for the specified birthdate. AGE(Account:Contact:Birthdate)
AGEON Given a birth date, returns the age on a AGEON(Account:Contact:Birthdate,TODAY()).
specified date
DATEDIFF Returns the number of days between two DATEDIFF("1900-01-01","2000-01-01") returns 36524
specified dates. If the first date is greater than
the second date, the value is returned as a DATEDIFF("2000-01-01","1999-01-01") returns -36524
negative number.
DATEDIFF(Account:Cases:CreatedDate,TODAY()) returns the
number of days a case has been open
EOM For a specified date, returns the date of the last EOM(Account:CaseReturns the month of the specified date as
day of the month. an integer. s:CreatedDate)
MONTH For a specified date, returns the month as an MONTH("1999-01-11") returns 1
integer (1-12).
ROUND Rounds the specified number or expression. By ROUND(3.1415 * 3) = 9.42
default, results are rounded to two decimal
places, but you can specify the desired number ROUND(3.1415 * 3, 0) = 9
of decimal places for the result.
You can also use the UP, DOWN, HALF_UP,

HALF_DOWN, and HALF_EVEN parameters to
refine the rounding results.
FLOOR Returns a number rounded down to the nearest FLOOR(2.5) returns 2, which is 2.5 rounded down to the
integer, towards zero if negative. nearest integer.
UP Use with ROUND to specify that the rounding ROUND(2.572, 2, UP) returns 2.58
result is rounded up (away from zero).
DOWN Use with ROUND to specify that the rounding ROUND(2.572, 2, DOWN) returns 2.57
result is rounded down (towards zero).

company 2045
OmniStudio

HALF_UP Use with ROUND to specify that the rounding ROUND(2.575, 2, HALF_UP) returns 2.58
result is rounded towards the nearest neighbor
(up or down) unless the neighbors are
equidistant, in which case it rounds up.
HALF_DOWN Use with ROUND to specify that the rounding ROUND(2.575, 2, HALF_DOWN) returns 2.57
result is rounded rounded towards the nearest
neighbor (up or down) unless the neighbors are
equidistant, in which case it rounds down.
HALF_EVEN Use with ROUND to specify that the rounding ROUND(2.57, 1, HALF_EVEN) returns 2.6, which is rounded
result is rounded rounded towards the nearest up to the nearest even one-decimal place.
neighbor (up or down) unless the neighbors are
equidistant, in which case it rounds to the
nearest even neighbor.
Behaves as for ROUND HALF_UP if the digit to

the left of the discarded fraction is odd; behaves
as for ROUND HALF_DOWN if it is even.
CEILING Rounds a number up to the nearest integer, CEILING(2.5) returns 3, which is 2.5 rounded up to the nearest
away from zero if negative. integer.
SQRT Calculates the square root of a value. SQRT(12 * 3) returns 6
TODAY Returns today's date
YEAR Returns the year of the specified date as an YEAR("1999-01-11") returns 1999
integer.
For looping procedures: PREVIOUS
For aggregation steps, the following functions are supported.

AVG Average of list of values. AVG(1,2,3,4,5,6,7,8,9,10) returns 5.5
MAX Maximum value in a list of values. MAX(1,2,3,4,5,6,7,8,9,10) returns 10
MIN Minimum value in a list of values. MIN(1,2,3,4,5,6,7,8,9,10) returns 1
SUM Returns the sum of a list of values SUM(1,2,3,4,5,6,7,8,9,10) returns 55
Declarative Calculation Procedures

Declarative calculation procedures are a key component of the ratings engine. Along with calculation
matrices, calculation procedures are the key components of any or ratings engine. Calculation procedures
take an input JSON and run through a series of matrix lookups (calling values from calculation matrices)
and calculations to calculate ratings for policy products.

company 2046
OmniStudio
Calculation procedures can calculate coverage premiums, insured party premiums, insured item premiums,
and insurance policy premiums. Calculation procedures can calculate attribute-based prices for products.
To learn more about rating, see Rating Procedures.
NOTE
Beginning with the Summer '19 release, declarative calculation procedures support:
• Grouped calculation matrices

• Row-versioned calculation matrices
What's in a Calculation Procedure

A well-formed calculation procedure contains the following elements:
• Constants
All the constants you need for each calculation step
• Variables
Input variables, all the variables you need for each calculation step and the group key and subgroup key
if you're calling a group of matrices all the variables in calculation matrices you call in matrix lookup steps
• Calculation steps, including:
• Calculations
Each calculation required to get to the correct result of the whole calculation procedure
• Matrix lookups
Finds one or more variable values in calculation matrices, based on one or more variable inputs
• Aggregation steps (optional)
If this calculation procedure will handle an array of inputs, aggregation steps will perform calculations
over the output sets.

company 2047
OmniStudio
How Calculation Procedures Work in Context
OmniScripts, Integration Procedures, and other Vlocity processes can call a calculation procedure. The
calculation procedure takes a JSON that gives the calculation procedure the ingredients it needs to
complete its calculation.
Calculation procedures can take a single input, a single set of inputs, or multiple arrays of inputs.
Here's an example of a single set of input values, as passed in by a JSON:
{
"input": {
"opMVRPoints": "0",
"opAccidentPoints": "0",
"driverGoodStudent": "N",
"driverMaritalStatus": "M",
"driverGender": "M",
"driverYrsExp": "14",
"driverMileage": "7500",
"driverUse": "Business"
}
}
The calculation procedure runs through all its steps once for a single input or single array of inputs. It
returns a calculation or array of calculations. The output JSON for the calculation procedure that processed
this input is:
{
"output": [
{
"calculationResults": [
{

company 2048
OmniStudio
"driverCCD": 1.11,
"driverCOLL": 0.92,
"driverMED": 0.91,
"driverUM": 0.92,
"driverBIPD": 0.86,
"autoSafeDriver__driverSafe": "Y",
"ID": "input"
}
],
"aggregationResults": {}
}
]
}
Because the calculation procedure did not have any aggregation steps, there are no aggregation results in
the output JSON.
How Aggregation Works in Calculation Procedures

When you add aggregation steps to your calculation procedure, the calculation procedure puts together the
results of each run through itself, performs operations on them, then outputs the results of the operations.
Here's what that looks like:
For example, in a simple case, the calculation procedure needs to calculate a group premium based on a
census. Each census member has a set of input values that's passed to the calculation procedure. The

company 2049
OmniStudio
calculation procedure runs all of its calculation steps for each member, resulting in an output (premium) for
each member. So now it's got an array of outputs. To sum the premiums of all the members of the census,
an aggregation step sums all the premium output variables.
NOTE
The aggByKey functionality in the following example is available in Vlocity Insuranceand
Vlocity Health only.
In a more complex scenario, an auto insurance calculation procedure must calculate a premium per
instance of car and driver. For example, a user needs to rate out a policy for two cars—a Toyota Prius and
a Tesla Model S. The Prius is driven by Roger and Amy, and the Model S is driven by Amy and Steve. The
calculation procedure needs to calculate and aggregate results separately for the Prius and for the Model
S.
In this case:
• instanceKey = car+driver
• aggByKey = carModel
To complete this calculation with aggregation, the calculation procedure uses aggByKeys. When the
calculation procedure receives aggByKeys as an input, it runs through the aggregation steps once per
aggByKey. Here's what that looks like:

company 2050
OmniStudio
So for the example above, the calculation procedure groups the results of its four calculation step runs into
two subsets: one for the instances for the Prius and another for the instances for the Model S. Then it runs
the aggregation steps twice: once for the Prius and again for the Model S. The calculation procedure
returns two aggregation results—one for each vehicle.
You don't need to add aggByKeys and instanceKeys to your calculation procedure as variables. As long as
the aggByKey option and includeInputKeys option are set correctly in the services, the
getRatedProduct and repriceProduct services will pass the keys in automatically as part of the input
JSON.
Preprocessor and Postprocessor Classes

These are Apex classes that you can use if you have to massage your input data or output data before and
after it's processed by a calculation procedure. See Preprocessor Class Example.
If you think you need to use preprocessor classes or postprocessor classes, please contact your Vlocity
representative to verify that your use case requires that you write these classes. (We have a lot of tools that
are easier and more configurable now, and some of those might work better for you.)
Workflow for Creating a Calculation Procedure

To create a calculation procedure, you set up the overall configuration, add variables and constants, add
steps, and test.
1. Set Up a Calculation Procedure.

company 2051
OmniStudio
2. Add Variables and Constants.

3. Add Calculation Steps.
4. Add Matrix Lookups.
5. Add Aggregation Steps.
6. Test a Calculation Procedure.
Set Up a Calculation Procedure

Before you can create calculation procedure steps, you must configure the calculation procedure as a
whole.
1. On the Vlocity Calculation Procedures list page, click New.

2. Enter a Calculation Procedure Name, then click Save.
3. In the Vlocity Calculation Procedure Versions list, click the name of the version you just created.
4. To complete the header, click Edit.
In the Vlocity Calculation Procedure Version Detail header, enter the following information:
• Start Date Time: The day and time Vlocity will start using this calculation procedure.
• End Date Time: The day and time Vlocity will stop using this calculation procedure.
• Enabled: Select to enable this calculation procedure and locks it. Note: You can't edit a calculation
procedure that's enabled.
• Priority: The priority Vlocity gives this calculation procedure if a call matches more than one enabled
calculation procedure. The higher the priority number, the higher Vlocity ranks it. For example, if
Vlocity finds two matching calculation procedures, RatingCalc with Priority = 1 and RatingCalc with
Priority = 2, Vlocity uses the calculation procedure with Priority = 2.
• Version Number: Change if you want to give this calculation procedure a different version number.
• Enable Looping: Select to enable this as a looping calculation procedure.
To learn more about looping calculation procedures, see Using Looping in Calculation Procedures.
• Looping Specification: If you selected Enable Looping, enter a looping specification here.
5. Click Save.
Add Variables and Constants

All calculation procedures require constants, variables, or both.
NOTE
You can't use the same name for a variable that you use for a constant. Variables and
constants use the same namespace.
Here's how you add both variables and constants:
1. Add variables:
a. In the Variables and Constants section, click +Add Variable.

company 2052
OmniStudio
b. Enter variable data:

• Name: A unique name for the variable.
• Data Type: Choose one from the list.
• Precision: Optional. Enter the level of precision you want Vlocity to adhere to for this variable.
For example, enter 0.25 to make this variable's value precise to the nearest quarter of an
integer. For a dollar value example, enter 10 to make the variable precise to the nearest $10.
Enter 0 if this calculation procedure must use the precise value of this variable, with no slippage.
• Default Value: Optional. Enter a value if this calculation procedure requires a value for this
variable (it can't use a null).
If you don't enter a default value, Vlocity sets this variable to null if no value is entered for the
variable.
NOTE
Before you enter output variables, check the calculation matrices this calculation
matrix will use.
An input variable that requires a user input cannot be used as an output variable.
2. Add constants:
a. In the Variables and Constants section, click +Add Constant.
b. Enter the constant data:
• Name: A unique name for the constant.
• Data Type: Choose one of the available types.
• Precision: Optional. Enter the level of precision you want Vlocity to adhere to for this constant.
For example, enter 0.25 to make this constant's value precise to the nearest quarter of an
integer. For a dollar value example, enter 10 to make the constant precise to the nearest $10.
Enter 0 if this calculation procedure must use the precise value of this constant, with no
adjustment.
• Value: The value of this constant.
3. Click Save Calculation Procedure.
See Also
• Variables and Constants in Calculation Procedures
Add Calculation Steps

A calculation step includes one or more mathematical operations and/or functions.
1. On the Procedure Calculation tab of the calculation procedure's page, scroll down to the Calculation
Steps section.
2. Click + Add Step
3. Select Calculation.
4. In the first field, enter a constant or a variable, then press Return.
5. Enter an operator and press Return. Choose from the following operators:

company 2053
OmniStudio
• + (plus sign)
• – (minus sign)
• * (asterisk)
• / (backslash)
• ^ (caret)
• ( (open parentheses)
• ) (closed parentheses)
6. Enter the next item and press Return.
7. Keep entering operators and items until you've completed the calculation.
8. To make this calculation step conditional, select Conditional Step.
Enter the condition that will invoke this calculation step.
9. To include the calculation output in the calculation output data, select Include in Calculation Output.
See Also
• Functions for Calculation Procedures

Add Matrix Lookups

A matrix lookup step calls a calculation matrix, supplying input to the matrix and returning its output.
1. In the Calculation Steps area, click Add Step.

2. Select Matrix Lookup.
3. In the Matrix Name field, enter the name of the calculation matrix.
After you select the calculation matrix, the calculation step displays the matrix inputs and outputs. The
system adds all columns to the Variables section. Vlocity grays out variables it adds for matrix lookups,
so you can't accidentally modify or delete them.
A link to the calculation matrix also appears on the calculation step.
4. To make this calculation step conditional, select Conditional Step.
Enter the condition that will invoke this matrix lookup.
5. To include the matrix lookup output in the calculation output data, select Include in Calculation
Output.
Add Aggregation Steps

If the input to the calculation procedure is an array—for example, multiple family members are applying for
insurance and want to view the total premium—the calculation procedure runs for each input. Using an
aggregation step, you can aggregate the procedure results and execute additional calculations on the
aggregated result.
1. On the Vlocity Calculation Procedure Version Detail page, scroll down to the Pricing Calculation
section.
2. In the Aggregation Step area, click Add Step.

company 2054
OmniStudio
3. Select Aggregation.
4. In the first field, enter one of the following operators:
• SUM
• AVG
• MIN
• MAX
5. Enter the variable to be aggregated enclosed in parentheses. For example, (price).
6. In the second field, enter a variable to represent the aggregated variable. For example, totalPrice.
7. Create all the other aggregation steps you need to complete the aggregation.
Test a Calculation Procedure

We recommend that you use the Simulator tab to test the calculation procedure you just created before
going on to create other calculation procedures, Integration Procedures, or OmniScripts.
1. On the calculation procedure page, click the Simulate tab.

2. Enter or change the information in the available fields.
3. To see only the end results of the calculation, click Simulate Final Step.
Vlocity shows the results of the final calculation step. It also shows the Input JSON (with all the values
you entered in step 2 of the test) and the Output JSON.
OR
4. To see the results of every calculation step you entered and the final result, click Simulate All Steps.
Vlocity shows the results of every step in the calculation procedure, the variables of all the values for
each step, the Input JSON, and the Output JSON.
TIP
If you tried Simulate Final Step and didn't get the correct result, do Simulate All Steps
then examine the results starting with the first step to see which calculation step isn't
working right.
Create a New Version of a Calculation Procedure

It's much quicker to create a new version of an existing calculation procedure than it is to create a new
version from scratch. When you create a new version, all the details, variables, constants, calculations,
matrix lookups, and aggregation steps are cloned from the previous version.
1. Open the version of the calculation procedure you want to clone, then click Create New Version. You
may have to click the gray down-arrow at the top right of the window to find this link.
The clone includes all the details, variables, constants, and calculation steps (calculations and matrix
lookups) from the previous version. But the new version is not set to enabled.
2. To make changes to the calculation procedure details, click Edit at the top right.
a. Change detail values such as the Start Date/Time and End Date/Time.
b. Click Save.

company 2055
OmniStudio
3. To make changes to the variables and constants:

a. Click into a variable or constant to change its data.
b. To delete a variable or constant, click the trashcan icon to the right of the specific item.
c. Click Save Calculation Procedure.
4. To make changes to calculations and matrix lookups:
a. Click into either calculation field to delete, add, or change items and operators in it.
b. Click into either matrix lookup field to change the matrix or the resulting variable.
c. Click the trashcan icon to the right of any calculation or matrix lookup to delete it.
5. To make changes to aggregation steps:
a. Click into either aggregation field to delete, add, or change items and operators in it.
b. Click the trashcan icon to the right of any aggregation step to delete it.
The Looping Feature in Calculation Procedures

Looping calculations take a starting point, an endpoint, and an interval. At run time, the calculation
procedure runs in a loop from start to end per interval. Each run uses the same input variables, plus an
index variable that you can use in the calculation.
Calculation procedures support looping calculations starting in the Vlocity Insurance Winter '18 Major
Release.
For example, you can create a looping calculation procedure for a life insurance policy. The looping
calculation procedure calculates the policy value for each year from the current age of the policy holder to
the policy holder's age at the end of the policy term. The calculation takes a current age (35 years), end
age (65 years), and an interval of 1 to calculate on an annual basis. The calculation runs, looping 30 times.
All input variables remaining constant, but the index starts at 35 and increments by one through 65. The
output shows the user the value of the policy each year from the start date to the end of the term.
To set up looping, see Configure a Calculation Procedure for Looping.
Index Variable
The index variable becomes available when you set Enable Looping on the Calculation Procedure
Version. To add it to calculation steps, type index in a calculation step.
When a calculation procedure has looping set up and enabled, it increments index based on the looping
Interval variable (whatever you've named it), from looping start until looping end. You can then use
index to change the calculation on each looping pass. For example, you can add it to an Age to increment
the value of Age for each loop.
NOTE
The system-provided index variable does not show up in the list of variables. You don't
need to create it.

company 2056
OmniStudio
In this example, calculation step 3 is set up to calculate the year of the policy, looping per interval (one
year). Step 4 calculates the age of the policy holder, looping per interval (one), starting with the policy
holder's age at the start of the policy.
PREVIOUS Function
You can use the PREVIOUS function to get the previous looped iteration's result. The calculation step can
use this function to access a previous iteration's variable results and calculate it with other variables.
PREVIOUS accepts the following:
• Variable name
Usually set up as a constant of type Text
• previousIterator
The index of the previous iteration result set from which to get the value for the variable
• ITERATION
System-provided variable for accumulated results
In this example, the PREVIOUS function uses previous iterations to calculate the cash value of the policy
per iteration (one).
Example 1: Calculation Procedure Simulation

For this example, the term = 2 (years), the start = 0 (year zero of the term), and the increment = 1 (year).

company 2057
OmniStudio
The output JSON for this simulation is:
{
"output": [
{
"calculationResults": [
{
"index": 0,
"intervalNumber": 0,
"deathBenefit": 3000,
"deathBenefitGuaranty": 3000,
"cashValue": 0,
"intervalDividend": 0,
"cashInvestment": 2995.83,
"cashInsurance": 4.17,
"deathProbability": 0.00139,
"currentMortality__currentDeathProbability": 0.002402,
"currentAge": 47,
"intervalDate": "2017-12-07",
"endAge": 52,
"ID": "input"
},

company 2058
OmniStudio
{
"index": 1,
"deathBenefit": 5995.83,
"cashValue": 2995.83,
"intervalDividend": 0,
"currentAge": 48,
"endAge": 52,
"ID": "input"
},
{
"index": 2,
"deathBenefit": 8992.35,
"cashValue": 5992.35,
"intervalDividend": 44.94,
"currentAge": 49,
"endAge": 52,
"ID": "input"
}
],
"aggregationResults": {}
}
]
}
Example 2: OmniScript
In this example, the looping calculation procedure is added to an OmniScript as a Calculation Action.

company 2059
OmniStudio
The looping calculation creates a list of results. You can display these results in a format of your choice. In
the example below, a custom template displays the results in a table that shows the values of the policy
year over year (incremented by 1).

company 2060
OmniStudio
Configure a Calculation Procedure for Looping

Make sure that your calculation procedure UI is set up for looping calculations, then configure looping
variables.
1. From the App Launcher, go to the Vlocity Calculation Procedures tab.

2. Select your calculation procedure from the list. On the record page, click the Related tab.
3. Click the name of the Calculation Procedure Version you're using.
4. Click the gear icon and select Edit Object.
A new browser tab opens and you are in Setup, in the Object Manager, and on the Vlocity Calculation
Procedure Version page.
5. Select Page Layouts, then select the page layout you're using.

company 2061
OmniStudio
6. Drag the following items from Fields onto the Vlocity Calculation Procedure Version Detail section:
• Enable Looping
• Loop Specification
7. Click Save.
8. Return to the browser tab for the Calculation Procedure Version you're using and refresh the browser.
9. Click the pencil icon for the Enable Looping field and check the Enable Looping box.
10. In the Loop Specification field, type a JSON value in this format:
{"loopingStart":"StartVariableName","loopingEnd":"TermVariableName","loopin
gInterval":"IntervalVariableName"}
The values must match the names of the variables you will set in the calculation procedure in the next
step.
For example:
11. Click Save.

12. In your calculation procedure, create three variables with a Data Type of Number and a Precision of 0.
The names must match the variables you set in the Loop Specification in the previous step.
For example:

After looping is configured, you can create calculation steps using the index variable and the
PREVIOUS function. See The Looping Feature in Calculation Procedures.
Preprocessor Class Example

The following example shows the typical structure of a preprocessor Apex class for a declarative
Calculation Procedure.
global with Sharing class PricingCalculationPreProcessExample implements

VlocityOpenInterface {

company 2062
OmniStudio
public Boolean invokeMethod(String methodName, Map<String,Object> inputMap,

Map<String,Object> outMap, Map<String,Object> options) {
try{
if(methodName == 'calculate') {
calculation(inputMap, outMap, options);
}
}catch(Exception e){
logger.err(e);
success=false;
}
return success;
}
private static void calculation(Map<String,Object> inputMap,

Map<String,Object> outMap, Map<String,Object> options){
Logger.dbg('in preprocess input map is '+inputMap);
for(String key : inputMap.keySet()){
if(key == 'ABCD1234'){
Object realData = inputMap.get(key);
Map<String, Object> real = (Map<String, Object>) realData;
for(String key1 : real.keySet()){
if(key1=='Payor_code'){
real.put('Payor_code', 'kpf');
}
}
}
}
Logger.dbg(' in preprocess after conversion, input map is '+inputMap);
}
Vlocity Intelligence
Vlocity Intelligence is a system composed of Resources, Attributes, and Intelligence Machines. A Vlocity
Intelligence Machine reviews the attribute profile data from Contacts, Accounts, Interactions, or any
standard or custom object, and applies learning algorithms to that data to determine the most appropriate
resources to present to your clients.
This feature can help you better understand how your customers respond, to make your marketing and
client support efforts more effective. For example, while a contact center agent is answering a customer’s
question about their cable service, the agent can be presented with material to assist in upselling the
customer to a new Professional Sports package based on the customer’s interest in football and baseball.

company 2063
OmniStudio
You can add any important item you want to present to your customers as an Intelligence Resource.
Resources can be OmniScripts, help articles, documents with promotional content, and more. After a user
views the Resource, the user can accept or reject it. Vlocity Intelligence ranks the User Profile Attributes
which are likelier to accept or reject certain Intelligence Resources based on the Views, Accepts, and
Rejects of the Intelligence Resource's Profile Attributes.
IMPORTANT
Beginning December 31, 2020, Salesforce will end support for Vlocity Intelligence. We
believe we can offer customers better options for recommending actions and offers
through a tighter integration with Salesforce Einstein.
The feature will not be included in any renewals beyond September 1st, 2020. Existing
customers may continue to use Vlocity Intelligence if installed. However, it will not be
supported after the end of 2020 and new releases thereafter will not include the feature.
Editions affected: All existing releases of:
• Vlocity Insurance
• Vlocity Health
• Vlocity Communications
• Vlocity Media
• Vlocity Energy
• Vlocity Public Sector
Get Started with Vlocity Intelligence

To get started with Vlocity Intelligence, you must determine what you want your customers to see based on
which characteristics customers have.
1. First, determine which items you want to get in front of your clients, such as products, offers,
knowledge articles, OmniScripts, documents, etc. These items are added to your Intelligence
Resources. (For more information, see Add New Intelligence Resources.)
2. Next, consider what attributes apply to the audience you are targeting and what resources you’re trying
to deliver to them. Even if your theory ends up being incorrect, Vlocity Intelligence is smart enough to
learn from the real-life responses and adapt by applying the correct attributes to the resource or object.
For example, your company might want to run a promotion offering clients tickets to sporting events. To
get started, add the games that you are offering.
3. After you Add New Intelligence Resources, determine which tickets to offer to which clients. You decide
to offer tickets based on the client's favorite sports and where the client lives.
4. Next, Add a New Attribute Category for Favorite Sport, and one for Location. The Vlocity Intelligence
Machine reviews the attributes for the client and displays the best tickets for a client based on those
attributes. If a client's favorite sport is Basketball and the client lives in the Bay Area, offer them

company 2064
OmniStudio
the Warriors Tickets resource, which shares the Basketball and Bay Area attributes.
However, if the client's geographic region is Los Angeles County, offer them the Lakers
Tickets resource.
Add New Intelligence Resources

Intelligence Resources are items of value that you want to get in front of your target, such as promotional
content, products, help content, new offers, and OmniScripts. When calling the Vlocity Intelligence API, the
resources are what gets ranked and returned.
To add Intelligence Resources, go to the Vlocity Intelligence Resources tab and click the New button.
The Target Object Type and the Target Object Key determine where the link of the resources goes when
it is clicked. For example, If you use Vlocity Action, the Target Object Type is VlocityAction and the Target
Object Key is the action's name. If the resource is a Product, the Target Object Type is Product2 and the
Target Object Key is the record ID of the Product.
By choosing "Query" for the Data Source, you can create a Virtual Resource. Virtual Resources function as
a single resource that can load additional records based on the specified query. The query is defined under
the resource's Data Source, and supports the use of merge fields, for example, Select Name, Id,
CustomField__c from Product2 where CategoryCode like '%ProductCat%'.
Resources can be active or inactive, so if you have time sensitive or seasonal promotions, you can mark
them inactive when they are no longer offered. These dates can be specified using Effective Date and
Expiration Date.
After creating the resource, you can view and edit details from the resource's page. This page enables you
to edit the appearance of the resources that display on the Card Layout. The image below shows a Card
Layout using Vlocity Intelligence.
Headline and Sub-Title displays on the Card when viewing the resource. The description is displayed under
the name.
Under the Images section, upload the image you you want displayed on the Card Layout. See Display
Resources on the Card Layout for more information.

company 2065
OmniStudio
Under the Training Attributes section, enter the initial data about the targets for this resource. For
example, if your resource is targeted towards customers looking to insure art purchases, add attributes for
art collector snd people with a noted concern about theft.
As the resource is viewed, accepted, or rejected, the data for this section is updated: the Intelligence
Machine learns which Profile Attributes are most likely to accept the Resource and adapts accordingly. To
view this behavior, go to the Activity section.
Use Vlocity Actions with Vlocity Intelligence Resources

To determine the steps to be taken after the resource is viewed, use Vlocity Actions with the Vlocity
Intelligence Resources. Next steps can include launching an OmniScript, visiting an external page, viewing
a product detail page, or executing code.
When you Add New Intelligence Resources, the Target Object Type and the Target Object Key specify
where the link of the Resources goes. For details about actions, see Configuring Vlocity Actions.
Vlocity Actions
Vlocity Actions are automatically generated URLS that launch Vlocity OmniScripts, Vlocity Cards
components, web pages, or external applications. Actions are typically specific to a given object type, such
as Account, Contact, Policy, or Asset.
The Vlocity Action API returns all the Actions that are associated with an object. The display text, icons, and
links can be displayed to enable the user to invoke the Action in the object context. See also Using Actions
with Cards.
To configure Vlocity Actions:
1. Go the Vlocity Actions tab.

2. Click New or select an Action and click Edit.
3. On the Vlocity Action Details page, enter the following information and click Save.

Vlocity The name of an action.
Actions Name
Active To display the action, set to True.
Applicable Select one or more objects from which the action can launch. Default value is All, By default, the action
Type attempts to invoke every Applicable Type, which adversely affects performance.
To add values to the Applicable Types picklist, use the API name of the object, for example:
Household__c. The value can be a Sobject name or any string. This value is used in the Action page to
match the objType parameter in ActionComponent. (If the action is using a Filter, the Applicable
Type must be the SObject name because it is used in an SOQL query, for example: Policy__c.)
Applicable This field determines what actions to display for a user profile. Default value is All. An admin can add other
User Profile user profiles to the picklist. For example, if the current login user's profile is Vlocity Health, only the actions
with Applicable User Profile = All Or Vlocity Health appear.
Active Check to make the action visible.
Display Enter the text to be displayed as the label for the action.
Label

company 2066
OmniStudio

Display The sequence to display the action on a sub-tab or component. Highest sequence number appears first.
Sequence
Display On Specifies the platforms on which the action is displayed. The pick list values are All, Web Client or
Mobile.
Vlocity Icon Scroll down to view the available Vlocity Icons and their associated class names. Enter the class name of the
icon to be displayed for this action.
You can upload a custom icon as an attachment from the Related tab. The latest attached image loaded
(with a size less than 50 KB) is used as the custom image. If both the Vlocity icon and the custom icon
(attachment) are specified, the custom icon is used. When the custom icon is not uploaded, the Vlocity icon
is used.
Open URL In Select Current Window or New Tab/Window to indicate where to open the target URL.
Link Type Pick list values depend on where the action is being launched from. Link Types include :
• CommunityURL—Launches a Salesforce Community page.

• OmniScript—Launches an OmniScript.
• Other—Launches a specific URL.
• ConsoleCards—Launches a Salesforce Classic card.
• LEXConsoleCards—Launches a Lightning Experience Console card in a subtab.
• Document—Launches a Contracts Document.
• Layout—Launches a Card Layout page.
Is Seed Seed actions are considered "seed data" that the Actions framework requires for certain functionality to work.
Action If a user tries to delete a seed action, an error message is displayed. A user cannot delete a seed action or
clear the Is Seed Action checkbox, but they can set them as inactive. The seed action checkbox is
automatically checked for certain types of Vlocity Actions that are imported into an org.
NOTE
Select this checkbox if the action is a built-in Contracts Document action. Do not
check this flag for a custom action. See Defining Vlocity Actions for Contracts.
Target URL The URL the action navigates to. It can be a simple URL, such as /apex/<pageName>, or a URL with
parameters, for example:
/apex/TestPolicyOmniPage?id={0}#/OmniScriptType/Policy/OmniScriptSubType/Auto/
OmniScriptLang/English/ContextId/{0}/PrefillDataRaptorBundle//true.
The parameter format is {0} or {1} and so on.
To navigate to a Lightning or Lightning Community Page, prefix the relative URL with ltngpage:. For
To open a Visualforce page from Salesforce's Lightning container, prefix the relative URL with ltng. For
Example Target URLs:
• /apex/NameSpace__OmniScriptUniversalPageWHeader?id={0}#/OmniScriptType/Policy/
OmniScriptSubType/Auto/OmniScriptLang/English/ContextId/{0}/
PrefillDataRaptorBundle//true
• /apex/cards_cme__ConsoleCards?id={0}&layout=lex-layout
• /apex/NameSpace__ConsoleCards?id={0}&layout=Sample-GetObjectFromInteraction
For more information, see Target URL and URL Parameters.

company 2067
OmniStudio

URL Specifies the attribute name in Applicable Type object, for example, AccountId in Contact. Used with
Parameter Target URL, if the Target URL requires parameters.You can specify the parameters in a comma-delimited
string, in the sequence that you want to replace the parameters in the Target URL.
For example, "AccountId, Id" replaces {0} in Target URL with value of Applicable Type's AccountId
value, and replaces {1} in Target URL with value of Applicable Type's Id value.
For more information, see Target URL and URL Parameters.

Applicable For Vlocity Winter '18 minor release 900.85.3 and later. This field determines what actions to display, based
Permission on whether permission is granted to the user's profile or one or more of the user's permission sets. Enter the
Name name of a standard Custom Permission object. For more information about permission sets, see Control
Who Sees What in the Salesforce help.
Filter Combined with Applicable Type, this field determines what action is displayed for each instance of the
object. You can use AND or OR conditions using attributes in Applicable Type. For example:
Applicable Type=Policy__c, Filter=PolicyType__c='Auto' AND Status__c='Active'
This example specifies that the action is displayed only for active Policies with policy type ='Auto'. The filter
condition is applicable only for a valid Salesforce object. You can filter by any field on the object.
Additional For a filter that is longer than 255 characters.
Filter
State Model The Contract State Model that defines the contract life cycle associated with this action. See Defining Vlocity
Actions for Contracts.
To State The state associated with this action. Vlocity states are used in Contract object. See Configuring the
Contract State Model.
Invocation These fields store Apex invocation class name and method name. The class must implement
Class Name VlocityOpenInterface/VlocityOpenInterface2. See Vlocity Interfaces and Implementations.
Invocation
Method Name
Validation These fields store validation class name and method name. The class must implement
Class Name VlocityOpenInterface/VlocityOpenInterface2. It is used in the Contract Document Management
UI Action tool bar to display a warning message. See Vlocity Interfaces and Implementations.
Validation
Method Name
Add Profile Attributes

For Vlocity Intelligence to function, you must apply attributes that characterize profiles. For example, a
target might have the Profile Attributes of High Net Worth, Art Collector, and Theft Concerns.
Based on these attributes, the Vlocity Intelligence Machine can determine that they are the perfect
candidate to attend a seminar on insuring fine art pieces.
You can apply Profile Attributes in the following ways:
• Manually Add Attributes to Any Object.

• Import using APIs.
• Use Attribute Assignment Rules to automatically add attributes based on specified criteria.
Display Attributes on an Object Page

You can add an Attributes component to the Visualforce page for any object that supports attributes. For
example, you can display Attributes that capture information about Opportunities.

company 2068
OmniStudio
To add Attributes to an object page by creating your own Visualforce component for that object, perform the
following steps in Salesforce Classic:
1. From Setup, type Pages in Quick Find, then click Visualforce Pages.
2. Click New.
3. Add a Label and Name, for example, OpportunityAttributesPage.
4. Check the box labeled Available for Lightning Experience, Lightning Communities, and the
mobile app.
5. In the Visualforce markup section, add the following code:
<apex:page showheader="false" sidebar="false"

standardcontroller="ObjectAPIName">
<apex:stylesheet value="{!URLFOR($Resource.NS__bootstrap, '/
bootstrap-3.2.0-dist/css/sfboot.min.css')}">
<NS:SegmentComponent > </NS:SegmentComponent>
</apex:stylesheet>
</apex:page>
6. Replace ObjectAPIName with the API name of the object to which you want to add Attributes, for
example, Opportunity.
7. Replace NS with the Namespace prefix of the installed package, which is located in Setup > Installed
Packages. If there is no namespace, omit the NS instances and the colons that follow.
8. Click Save.
9. Click Visualforce Pages again to return to the list of pages.
10. Next to the new page, click Security.
11. Grant access to the profiles that need access to the new page, then click Save.
12. Navigate to the page for the object. For example, go to the Opportunities tab and click one of the
Opportunity names.
13. Select Edit Layout.
14. In the Layout Editor, scroll the pane at the top left that begins with Fields, Buttons, Custom Links,
and so on until you see Visualforce Pages.
15. Click Visualforce Pages.
16. Drag your new Visualforce component onto the layout.
17. Click Save.
Create New Profile Attribute Categories

The type of attribute is defined at the Attribute Category level. Attributes Categories must created before
you can add attributes to the category. Typically, Profile Attributes are used with Vlocity Intelligence and can
be automatically assigned (see Use Attribute Assignment Rules). See Create New Profile Attributes.
Attributes can be Product Attributes or Profile Attributes. Product attributes are used with Policy Product
Management.
To create a new attribute category:
1. On the Vlocity Attributes Designer tab, click New.

company 2069
OmniStudio
2. In the Name field, enter the attribute category name.

For example, Number of Bedrooms.
3. In the Display Sequence field, enter a number to indicate the sequence in which the category is
displayed on the record detail page or Housing Listing.
4. In the Code field, enter a unique code for the category. The code is not visible in the user interface.
5. Select the UI Control Type for the attributes in the new category.
Each attribute category has a specific user interface control type for its attributes:
• Select On-Off to add or remove attributes from categories.
• Select 3-State to set attributes to positive, neutral, or negative.
• Select 1-5 Scale to set attributes to a number from 1 to 5.
• Select Text Comment to add text to attributes.
• Select Multi-Select for housing filters.

6. From the Applicable Types list, select the objects for which the new category is valid.
For example, you might want a Personal Interests category on Contacts, but not Accounts. If the
category is valid for all objects, select Any.
When creating housing filters, select Any.
7. From the Applicable Subtype picklist, select one of the following:
• For Profile record attributes, select Profile Attribute.To enable private profile attributes, check User
Attributes Created Private. For more information, see Create Private Profile Attributes.
• For Product record attributes, select Product Attribute. Use product attributes with Product Policy
Management.
• For attributes for housing filters, select Inventory Item.
8. Update the Color Code, which determines the category tag color. Enter the color code as a Hex value.
9. Click Save.
Create New Profile Attributes

Attributes act like tags that provide more information about the entity in the profile. Typically, Profile
Attributes are used with Vlocity Intelligence and can Use Attribute Assignment Rules. Product attributes are
used with Policy Product Management.
The type of attribute is defined at the category level. You must have an existing Attribute Category to add
the new attributes to. See Create a New Attribute Category.
To add an attribute to a category:
1. On the Vlocity Attribute Categories tab, display all attributes.

company 2070
OmniStudio
2. Click the category to which you want to add the attribute.

3. To create the new attribute, go to the platform-appropriate page or dialog box, as follows:
If you're using Do this

Salesforce Lightning Experience 1. Click Related.
2. Click Attributes.
3. Click New.
Salesforce Classic (Aloha) In the Attributes related list, click New Vlocity Attribute.
4. In the Attributes section, click +Add New Attribute.

• In the Name field, enter a name for the attribute.
• In the Code field, enter a unique code for the attribute. DataRaptors use the code instead of the
name.
• Select Filterable to enable filtering on this attribute in the housing listing.
• Select Configurable to enable the user to configure the attribute.
• Select Cloneable to enable the user to clone the attribute.
• Select Active to activate the attribute.
• Select Private to make the attribute visible only to the attribute's owner. See Create Private Profile
Attributes for more information.
6. After the new attribute is created, you can add assignment rules by clicking +Add New Assignment
Rules. See Use Attribute Assignment Rules for more information on automatically assigning attributes.
Create a Vlocity Intelligence Machine
Add a Vlocity Intelligence Machine

After you Come Up With Your Plan, Add New Intelligence Resources, and Add Profile Attributes, you can
create your Intelligence Machines from the Vlocity Intelligence Machines tab. Click on the New button,
and enter a name for the machine and a unique name in the REST Resource Name. The REST Resource
Name will be used in generating an APEX REST endpoint.
After the new machine is added, you can associate the appropriate resources and attributes with this
machine.
You can specify the attribute categories that have the highest impact on the rating of the resources to be
displayed. For more information on how category weight determines which resources are displayed, see
Ranking Intelligence Resources.

company 2071
OmniStudio
Rank Intelligence Resources

Resources are scored based on the number of matching Target Profile Attributes between the object or
interaction and the Resource. The Category Weight of each Attribute is added to the score for each match.
For example, if you increase the Category Weight for an Attribute Category called Phone Manufacturer
that contains attributes like Apple, Android, or Samsung, the resources with attributes in that Attribute
Category have a greater impact on the overall score.
Configure Card Layout to Display Resources

To display resources on the console, you must configure the card layout.
1. On the Details page, click the Edit icon.

2. Click the Custom Console Components link. On this page, you can configure the side panels to be
displayed on the console.
3. Under the Right Sidebar section, add a custom component. Select Visualforce Page as the type and
enter ConsoleRightSidebar_slds for Component.
4. Go to the Vlocity Cards tab.
5. Click the console-right-sidebad_slds link.
6. In the Endpoint section, specify the Intelligence Machine that displays the resources, the target object,
and how many resources you want displayed on the page. Use the following syntax:
/services/apexrest/vlocityinsdemo/v1/acuity/MachineName?
contextId={{params.id}}&pageSize=NumberOfOffersToDisplay
Add Attributes Automatically Using Attribute Assignment Rules

Attribute Assignment Rules enable profile attributes used in Vlocity Intelligence Machines to be added or
removed automatically when certain conditions are met. For example, you can create a High Net Worth
attribute that is added when a person’s portfolio exceeds $500,000 or an At-Risk Client attribute that is
added when a client opens more than three support cases during a month.
Types of Attribute Assignment Rules

There are three types of Attribute Assignment Rules: Formula, Field, and Tracking Formula.
• Use Formula rules with formulas that includes data from the object record being processed. For more
information, see Use Formulas With Attribute Assignment Rules.
• Use Field rules when setting the attribute value to the specified field's value on the SObject Record being
processed. For more information, see Use Field Values With Attribute Assignment Rules.
• Use Tracking Formula rules when a formula includes VlocityTrackingEntry__c data that is related to the
Salesforce object that is being processed. Tracking Formulas can be used to apply an attribute in
response to actions taken during a Vlocity Interaction. For more information, see Vlocity Intelligent
Interactions.
Create Attribute Assignment Rules

To create rules for auto-assigning attributes, perform the following steps:

company 2072
OmniStudio
1. Go to the Vlocity Attributes tab.

2. Click Attribute Category.
3. Select the attribute for which you want to define a rule.
4. Click +Add New Assignment Rule
5. For SObjectTypes, select the objects to which you want to apply the attribute.
6. Select the Type of rule. See Types of Attribute Assignment Rules for more information.
7. To activate the rule, check the Active box.
Use Field Values With Attribute Assignment Rules

Use Field Attribute Assignment Rules when applying data from an account to its attributes.
For example, to apply the Billing State of the Account to an attribute called "State," set the Service of your
Attribute Assignment Rule to:
BillingState
Use Formula Type Attribute Assignment Rules

Formulas support comparisons and basic math operations performed on matrix lookups.
Formulas support the following operators:
• &&
• AND
• ||
• OR
• >
• >=
• <
• <=
• =
• ==
• !=
• <>
• LIKE
• NOT LIKE
• +
• -
• *
• /
• %
• ^
Formulas support the following functions:
• ABS

company 2073
OmniStudio
• AVG
• COUNTQUERY
• IF
• MAX
• MIN
• QUERY
• SUM
All tokens in the formula, except ones in quotation marks, must be separated by a space, including
parenthesis and commas.
Variable names in formulas cannot contain spaces. Replace spaces with underscores. For example,
change "Last Name + ',' + First Name" to "Last_Name + ',' + First_Name"
To add the Medicaid Eligible attribute to a contact if they are 65 or older, use the following formula
when creating your Attribute Assignment Rule:
Age >= 65
To change the contact's Market Segment attribute to Super Affluent if the income field is from
$250,000 to $500,000, use the following formula when creating your Attribute Assignment Rule:
AnnualIncome >= 250000 && AnnualIncome <= 500000
To mark accounts that have a sum of order greater than 100,000 as a Key Client, use the following
formula when creating your Attribute Assignment Rule:
SUM ( CompletedOrders , OutstandingOrders) >= 100000
To identify a client with a brand preference, use the following formula when creating your Attribute
Assignment Rule:
AssetType == "Phone" && Manufacturer LIKE "Apple"
You can apply Apple as an attribute and modify the impact that attribute has on certain resources where
brand is a factor. For more information, see Ranking Intelligence Resources.
Vlocity Intelligent Interactions

Vlocity Intelligent Interactions help you make the smartest choices for your clients based on the interactions
you have with them. Because Intelligent Interactions are based on live feedback from the client, the
resulting offers update quickly, according to the conversation that you are having with your client.
Vlocity Intelligent Interactions use a Tracking Formula type for Attribute Assignment Rules. Tracking
Formulas have the same syntax as Assignment Rules, but your Tracking Formula checks the related
Tracking Entries for the Salesforce object.
A tracking entry is the record of a single action that occurs during a Vlocity Interaction. Below is the JSON
of a sample tracking entry:

company 2074
OmniStudio
{"UserId": "00561000000hjm3AAA","TrackingService": "Cards", "CardElement":

"Effective Term","TrackingEvent": "Field"}
For example, if you have noticed that customers who ask about their effective term are often having trouble
with payment, you can create a tracking formula to add an attribute of Payment Difficulty that
displays a resource on available extensions or discounts. Use the following tracking formula when creating
your Attribute Assignment Rule:
TrackingEvent == "Field" AND Card Element == "Effective Term"
Apply Attribute Assignment Rules to Existing Records

To apply new Attribute Assignment Rules to all existing records, you must invoke an Apex method.
1. Log in to Salesforce.
2. Browse to the Developer Workbench and log in with your credentials.
3. For the Jump to option, select Apex Execute from the list.
4. Enter the following code in the text box and click Execute:
vlocityinsdemo.VFActionFunctionController.invokeServiceRun( 'AttributeAssignmen
tRuleService', 'createBatch', '{"sObjectType":"SObjectType"}', '{}');
Advanced Vlocity Intelligence Topics
Export and Import Vlocity Intelligence Machines

Vlocity Intelligence Machines can be exported from one environment and imported into another using
DataPacks.
To export a Vlocity Intelligence Machine, perform the following steps:
1. Go to the Vlocity Intelligence Machines tab.

2. Select the machine that you want to export.
3. From the selected machine's Detail page, click the Export button. (If the Export button, is not
displayed add it to the page layout by clicking the Edit Layout link.)
The Intelligence Machine is exported, including the attributes and resources used in the machine. The
resulting DataPack can be imported into another org from the Vlocity DataPacks tab. For more information
on importing, see Import a DataPack.
Importing a DataPack
Before importing a DataPack, go to Vlocity Cards and Vlocity OmniScript Designer to deactivate any
layouts that could be affected by the import. You may also need to deactivate any Vlocity Templates that
could be affected by the import.

company 2075
OmniStudio
NOTE
When importing and exporting data, the maximum file size is 2MB.
To import a DataPack:
1. Go to the Vlocity DataPacks tab.

2. Click Installed.
3. From the Import From list, select From File.

The Select File dialog box opens.
4. Click Browse to find the DataPack to import.
5. Click Next.
The Select Items to Import dialog box opens.
6. Select the items to import and click Next.
7. Review the items to import and click Next.
8. Click Activate Now.
The Select Items to Activate dialog box opens.
9. Select the components to activate.
10. Click Next.
11. Click Done.

The Expression Engine is an APEX-based formula builder used across multiple areas in Vlocity, including
OmniScripts, DataRaptors, and Integration Procedures. Underwriting and Eligibility Rules also use the
formula builder. These rules require a server call following a state change or request.
The OmniScript formula builder and attribute rules use a client-side JavaScript expression engine that is
evaluated in the browser and allows for fast, real-time applications.
For information on operators, functions, and formula syntax, see Function Reference.
For more information on the syntax of the OmniScript formula builder, see Creating Formula Fields in an
OmniScript.

company 2076
OmniStudio
Formula Overview
The formula builder that is available in DataRaptors and Integration Procedures, and in Vlocity Intelligence,
eligibility rules, underwriting rules, state rules, and calculation procedures enables you to use functions to
define calculations required by your business logic.
For example, an insurance product might insure only art pieces that were created before a specified year.
You can define an eligibility rule that uses a formula to evaluate the item's creation date attribute, as shown
in the figures below.
For information on operators, functions, and formula syntax, see Function Reference. For information on
eligibility rules, see Creating Eligibility Rules.
Use Formulas in DataRaptors

To add data to the output of a DataRaptor, you can define formulas. All types of DataRaptor (Turbo Extract,
Extract, Transform, and Load) support formulas. When you define a formula, you map its output to the
output JSON (for extracts and transforms) or Salesforce object field (for loads).
For details about the operators and functions that you can use in formulas, see Function Reference.
To create a formula:
1. In the DataRaptor Interface page, go to the Formulas tab.

2. Click Add Formula. An empty formula is added to the list.
3. In the Formula field, specify the desired logic. For example, to determine the total price of the items
being purchased by a customer, enter a formula such as:
SUM(Products:Price)
You can reference attributes in formulas. Use the code (not the name) preceded by @. For example:

company 2077
OmniStudio
Account:@GoldStarAccount == "On"
You can also use relationship notation in formulas to reference fields in a parent object. See
Relationship Notation versus Multiple Extract Steps.
4. In the Formula Result Path field, specify a JSON node in which to store the formula result.
5. Map the result to the final output as follows:
• Extract: Go to the Output tab and map the formula result to the output structure. Use a colon (:) to
delimit levels in the input and output paths in mappings.
• Transform: Go to the Transforms tab and map the formula result to the output structure. Use a
colon (:) to delimit levels in the input and output paths in mappings.
• Load: For each sObject that you want to update, go to its Fields tab and map the formula result to
the specific field that you want to update.
NOTE
If a variable name contains spaces or non-alphanumeric characters, enclose the variable
name in double quotes and precede it with var: in formulas. For example, if the JSON
node name is Primary Guardian, specify it in formulas as var:"Primary
Guardian".
If the name of a custom field includes special characters, sometimes you can't reference
the field in a formula.
Before Winter '20, the result of a LIST function in a formula was saved to a VLOCITY-
FORMULA-LIST node under the Formula Result Path. Beginning with Winter '20, the
result is saved directly under the Formula Result Path.
See Also
• Create a DataRaptor Example with a Formula
Formula Syntax for Insurance Rules

You use formulas when you Create Eligibility Rules, Create Underwriting Rules, or Create State Transition
Rules. See Using the Expression Engine for more information. Formulas for insurance rules must return
TRUE or FALSE.
The syntax for formulas in insurance rules is:
productCode.attributeCode with operators and/or literals and/or functions
For details about the functions and operators that you can use in formulas, see the Function Reference.

company 2078
OmniStudio
Function Reference
You can use the following operators and functions in DataRaptors and Integration Procedures, and in
Vlocity Intelligence, eligibility rules, underwriting rules, state rules, and calculation procedures.
Supported Operators
Logical operators:
&& AND || OR > >= < <= = == != <> + - * / % ^
String operators:
• LIKE — True if the left-hand side contains the right-hand side. For example, "ABC" LIKE "A" returns
true.
• NOTLIKE — True if the left-hand side does not contain the right-hand side. For example, "ABC"
NOTLIKE "A" returns false.
• ~= — Performs a case insensitive comparison. For example, "ABC" ~= "abc" returns true. Introduced
in Summer '20.
Make sure to include a space before and after an operator.
Supported Functions
Functio Return Example
n s
ABS Absolut ABS(-1) returns 1
e value
of the
specifie
d
number
ADDDA Adds ADDDAY("1999-01-01",100) returns "1999-04-11 00:00:00"
Y the
specifie
d
number
of days
to the
specifie
d date
and
returns
the
resultin
g date.

company 2079
OmniStudio
ADDM Adds ADDMONTH("1999-01-01",100) returns "2007-05-01 00:00:00"

ONTH the
specifie
d
number
of
months
to the
specifie
d date
and
returns
the
resultin
g date.
ADDYE Adds ADDYEAR("1999-01-01",100) returns "2099-01-01 00:00:00"
AR the
specifie
d
number
of years
to the
specifie
d date
and
returns
the
resultin
g date.
AGE Returns AGE(Account:Contact:Birthdate)
the age
for the
specifie
d
birthdat
e.
AGEON For a AGEON(Account:Contact:Birthdate,TODAY()) (same as AGE).
specifie
d
birthdat
e,
returns
the age
on the
specifie
d date

company 2080
OmniStudio
AVG Averag AVG(1,2,3,4,5,6,7,8,9,10) returns 5.5

e of list
of You can use AVG on a JSON array. For example, AVG(List:Item) returns 4 for the following sample data:
values.
{
"List": [
{
"Item": 3
},
{
"Item": 4
},
{
"Item": 5
}
]
}
BASEU Returns BASEURL()
RL the
base
URL of
the Org.
A
paramet
er is not
required
.
CEILIN Rounds CEILING(2.5) returns 3, which is 2.5 rounded up to the nearest integer.
G a
number
up to
the
nearest
integer,
away
from
zero if
negativ
e.
CONCA Returns CONCAT(Contact:FirstName, " ", Contact:LastName)
T the
concate
ntation
of the
specifie
d
strings.
COUNT Returns COUNTQUERY ( "SELECT COUNT() FROM Case WHERE AccountId = '{0}'" , Id )
QUERY the
number
of rows
that
meet
the
WHER
E
clause
criteria.

company 2081
OmniStudio
Custom Execute CustomFunction('Statistics.calcStdDev',DataPoints)

Functio sa
n('clas custom
s.meth function
od',inp defined
ut) in the
method
of an
Apex
class.
See
Sample
Apex
Code
for a
Custom
Functio
n.
If the
input
includes
a LIST
function
, the
LIST
part of
the
input is
saved
to
a VLOC
ITY-
FORMUL
A-
LIST k
ey. See
List
Input in
Custom
Functio
ns.
Availabl
e in
Vlocity
Health
and
Insuran
ce
Spring
'21 and
later
release
s.

company 2082
OmniStudio
DATEDI Returns DATEDIFF("1900-01-01","2000-01-01") returns 36524

FF the
number DATEDIFF("2000-01-01","1999-01-01") returns -36524
of days
DATEDIFF(Account:Cases:CreatedDate,TODAY()) returns the number of days a case has been open
betwee
n two
specifie
d dates.
If the
first
date is
greater
than the
second
date,
the
value is
returne
d as a
negativ
e
number.
DATETI Convert DATETIMETOUNIX('11/30/2016 07:15:34') returns 1480490134000
METOU sa
NIXC DateTi
me
value to
epoch
(the
number
of
second
s
elapsed
since
1/1/197
0).

company 2083
OmniStudio
DESER Convert DESERIALIZE("{\"key\":\"value\"}")

IALIZE( sa
String JSON returns { "key": "value" }
) String
LIST(DESERIALIZE("[{\"key\":\"value\"},{\"key2\":\"value2\"}]"))
into a
JSON returns [ { "key": "value" }, { "key2": "value2" } ]
object.
If the
data is
in list
format,
use the
DESER
IALIZE
function
inside
LIST
the
function
.
Availabl
e in
Winter
'20 and
later
release
s.
DOWN Use ROUND(2.572, 2, DOWN) returns 2.57
with
ROUND
to
specify
that the
roundin
g result
is
rounded
down
(toward
s zero).
EOM For a EOM(Account:Cases:CreatedDate)
specifie
d date,
returns
the date
of the
last day
of the
month.
EXIST( Returns EXIST(rentDwelling.dwBusUse, 'office')
search true if
List, the
target specifie
Value) d target
value is
found in
the list.

company 2084
OmniStudio
FILTER Filter a FILTER(LIST(InputList), 'LastName == "Smith"')

list of
JSON FILTER(LIST(data(PromotionProducts), 'productCode == "' + ConnectionProdCode + '"')
objects
and
return
the
subset
that
matche
s the
specifie
d
conditio
ns.
Support
ed only
for
DataRa
ptor
Transfo
rms.
FLOOR Returns FLOOR(2.5) returns 2, which is 2.5 rounded down to the nearest integer.
a
number
rounded
down to
the
nearest
integer,
towards
zero if
negativ
e.

company 2085
OmniStudio
FORMA Accepts FORMATDATETIME("2019-02-02T00:00:00")

TDATE a date
TIME or FORMATDATETIME("2018-12-30T00:00:00.000000Z","yyyy-MM-dd'T'HH:mm:ss.SSSZ")
datetim
e
SObject
field or
a
datetim
e string
and
returns
a
formatte
d
datetim
e string.
A string
input
must be
in one
of these
formats:
• 2019-
02-02
T00:0
0:00
• 2018-
12-30
T00:0
0:00.
0000
00Z
You can
supply
an
optional
output
formatti
ng
paramet
er using
Simple
DateFor
mat
notation
.
Specifyi
ng GMT
times is
recomm
ended.
These
are
convert
ed to
the
user's

company 2086
OmniStudio
time
zone.
The
default
time is
00:00:0
0 GMT.
The
default
date is
01-01-1
970, so
specifyi
ng a
complet
e date
is
strongly
recomm
ended.

company 2087
OmniStudio
FORMA Formats FORMATDATETIMEGMT("2018-12-30T00:00:00.000000Z","America/New_York","yyyy-MM-

TDATE datetim dd'T'HH:mm:ss.SSSZ")
TIMEG e data
MT as
FORMA
TDATE
TIME
does,
but also
convert
s from
the
specifie
d time
zone to
GMT.
If no
time
zone
name
paramet
er is
specifie
d, the
default
is the
current
user’s
time
zone.
For a
list of
time
zone
names,
see the
List of
tz
databas
e time
zones
Wikiped
ia page.
If no
output
format
paramet
er is
specifie
d, the
default
output
format
is yyyy-
MM-
dd'T'HH
:mm:ss.
SSSZ.

company 2088
OmniStudio
HALF_ Use ROUND(2.575, 2, HALF_DOWN) returns 2.57

DOWN with
ROUND
to
specify
that the
roundin
g result
is
rounded
rounded
towards
the
nearest
neighbo
r (up or
down)
unless
the
neighbo
rs are
equidist
ant, in
which
case it
rounds
down.

company 2089
OmniStudio
HALF_ Use ROUND(2.57, 1, HALF_EVEN) returns 2.6, which is rounded up to the nearest even one-decimal place.
EVEN with
ROUND
to
specify
that the
roundin
g result
is
rounded
rounded
towards
the
nearest
neighbo
r (up or
down)
unless
the
neighbo
rs are
equidist
ant, in
which
case it
rounds
to the
nearest
even
neighbo
r.
Behave
s as for
ROUND
HALF_
UP if
the digit
to the
left of
the
discard
ed
fraction
is odd;
behave
s as for
ROUND
HALF_
DOWN
if it is
even.

company 2090
OmniStudio
HALF_ Use ROUND(2.575, 2, HALF_UP) returns 2.58

UP with
ROUND
to
specify
that the
roundin
g result
is
rounded
towards
the
nearest
neighbo
r (up or
down)
unless
the
neighbo
rs are
equidist
ant, in
which
case it
rounds
up.
GENER Generat GENERATEGLOBALKEY(SUB)
ATEGL es a
OBALK global Returns a value such as SUB-4c6aaba3-88e4-13f3-fe07-afa756f31e92
EY key that
can be
used as
an Id in
a
DataPa
ck. If
you
include
an
optional
paramet
er, it is
prefixed
to the
key.

company 2091
OmniStudio
IF(expr Evaluat IF(InputDate < "2000-01-01", "20th Century", "21st Century")

ession es the
, express IF(phones:brand == "Apple", phones:name, null)
trueRe ion. If
IF(SUBSTRING(price,0,1) == "$", SUBSTRING(price,1), price)
sult, true,
falseR returns IF(DriverAge >= 25,IF(FriendsReferred >= 2, true, false),IF(GPA >= 3.0, true, false))
esult) the first
result
value, if
false,
returns
the
second.
You can
use IF
to filter
a list.
The
second
exampl
e filters
an input
list of
phones
to an
output
list of
only
Apple
phones.
The
third
exampl
e
remove
s an
initial
dollar
sign if it
is
present,
leaving
a
number
that can
be used
in
calculati
ons.
The
fourth
exampl
e
demons
trates
nesting
of IF
function
s.

company 2092
OmniStudio
Drivers
under
25
qualify
for a
discoun
t if
they’re
good
student
s, and
drivers
over 25
qualify if
they
refer
two or
more
friends.

company 2093
OmniStudio
InvokeI Calls an InvokeIP ('Auto_Renewal', INPUT('assetId', 123456), 'AnOutPutKey')

P Integrati
('IP_Na on
me', Proced
INPUT(' ure for
Key', formula
Value), s with
INPUT(' comple
Key', x use
Value). cases.
..,
'Outpu Takes
tKey') the
'IP_Na
me' in
the
format
Type_S
ubType.
Takes
one or
more
INPUT('
Key',Val
ue)
pairs as
inputs
to the
Integrati
on
Proced
ure.
The
'Output
Key' is
the IP
Respon
se
Action
output
JSON
key to
get the
resultin
g value.
ISBLAN Returns ISBLANK('Marty') returns false
K true if
the
argume
nt is
blank,
false if it
is not.

company 2094
OmniStudio
ISNOT Returns ISNOTBLANK('Marty') returns true

BLANK true if
the
argume
nt is not
blank,
false if it
is.
LIST Encaps
ulates
the
argume
nt as a
list, for
calling
function
s that
require
input in
list
format.

company 2095
OmniStudio
LISTME Merges LISTMERGE("Id", LIST(CurrentAccounts), LIST(ArchivedAccounts), LIST(ProspectiveAccounts))

RGE("m any
erge_k number
ey1"[,... of lists,
"merge combini
keyN"], ng
LIST(Li entries
st1), ... when
LIST(Li the
stN)) values
of the
specifie
d keys
matche
s.
Specify
the
keys as
a
comma-
separat
ed list
of
quoted
key
names,
and
specify
lists
using
the
LIST
function
. If lists
contain
identical
ly-
named
nodes
that
contain
different
values,
subseq
uent
values
overwrit
e earlier
values
in the
result
list. The
output
contain
s all the
keys
from all
the lists.

company 2096
OmniStudio
LISTME Identica LISTMERGEPRIMARY("FirstName,LastName", LIST(ListMerge1), LIST(ListMerge2), LIST(ListMerge3))

RGEPR l to
IMARY( LISTME
"merge RGE,
_key1"[ except
,..."mer that the
gekeyN output
"], list
LIST(Li contain
st1), ... s only
LIST(Li the
stN)) keys
from the
first list.
Useful,
for
exampl
e, when
you
have a
list of
qualifie
d
product
s that
you
want to
augmen
t with
data
from
related
lists, but
you do
not
want
any
product
s from
the
related
lists
added
to the
output.

company 2097
OmniStudio
LISTSI Returns LIST(6,7,8,9,10) returns 5

ZE the
number You can use LISTSIZE on a JSON array. For example, LISTSIZE(NameList) returns 3 for the following
of items sample data:
in the
{
list.
"NameList": [
To test {
for an "FirstName": "Aaron",
empty "LastName": "Xavier"
list, use },
the {
ISBLAN "FirstName": "Zellie",
K "LastName": "Xavier"
function },
. {
"FirstName": "Mike",
"LastName": "Smith"
}
]
}
MAX Maximu MAX(1,2,3,4,5,6,7,8,9,10) returns 10
m value
in a list You can use MAX on a JSON array. For example, MAX(List:Item) returns 5 for the following sample data:
of
{
values.
"List": [
In {
Vlocity "Item": 3
Health },
and {
Insuran "Item": 4
ce },
Spring {
'21 or "Item": 5
later, }
this ]
function }
no
longer
works
for
Strings.

company 2098
OmniStudio
MAXST Returns MAXSTRING("Amy","Ziggy") returns "Ziggy"

RING the last
string
alphabe
tically.
Availabl
e in
Vlocity
Health
and
Insuran
ce
Spring
'21 and
later
release
s.
MIN Returns MIN(1,2,3,4,5,6,7,8,9,10) returns 1
the
lowest You can use MIN on a JSON array. For example, AVG(List:Item) returns 3 for the following sample data:
in a list
{
of
"List": [
values
{
"Item": 3
},
{
"Item": 4
},
{
"Item": 5
}
]
}
MONT Returns MONTH("1999-01-11") returns 1
H the
month
of the
specifie
d date
as an
integer.
NOTEX Returns NOTEXIST(rentDwelling.dwBusUse, 'office')
IST(se true if
archLi the
st, specifie
target d target
Value) value is
not
found in
the list.

company 2099
OmniStudio
NOW Returns NOW()

the
current NOW("yyyy-MM-dd'T'HH:mm:ss.SSSZ")
date
and
time in
the
user's
time
zone.
You can
supply
an
optional
formatti
ng
paramet
er using
https://
docs.or
acle.co
m/
javase/
7/
docs/ap
i/java/
text/
Simple
DateFor
mat.htm
l
notation
.
You can
use
NOW to
specify
dates
and
times
relative
to the
current
date
and
time.

company 2100
OmniStudio
ORDER Returns ORDERITEMATTRIBUTES(80146000002I7dO)

ITEMAT the
TRIBUT attribute
ES(Ord s of the
eritem order
id) item in
key-
value
pairs.
OrderIte
mId
must be
specifie
d as a
paramet
er.
Output
Format:
List<Ma
p<Strin
g,Objec
t>>
QUERY Execute QUERY ("SELECT Name FROM Account WHERE BillingState ='CA'")
sa
SOQL You can also pass in values. For example:
query
QUERY( "SELECT AccountId FROM User WHERE Id = '{0}'",$Vlocity.UserId )
that
returns
a JSON
list of
values.
The
query
cannot
retrieve
more
than
one
column.

company 2101
OmniStudio
RESER Equival See Remote Action.

IALIZE( ent to
String SERIAL
) IZE(DE
SERIAL
IZE()).
Convert
s data
into
generic
Map<St
ring,
Object>
format.
Useful
in
Remote
Actions
for
converti
ng Apex
class
output
so that
Integrati
on Proc
edures
and
DataRa
ptors
can
accept
it.
Availabl
e in
Winter
'20 and
later
release
s.

company 2102
OmniStudio
ROUN Rounds ROUND(3.1415 * 3) = 9.42

D the
specifie ROUND(3.1415 * 3, 0) = 9
d
number
or
express
ion. By
default,
results
are
rounded
to two
decimal
places,
but you
can
specify
the
desired
number
of
decimal
places
for the
result.
You can
also
use the
UP,
DOWN,
HALF_
UP,
HALF_
DOWN,
and
HALF_
EVEN
paramet
ers to
refine
the
roundin
g
results.

company 2103
OmniStudio
SERIAL Convert SERIALIZE({ "key": "value" })

IZE(js sa
onObje JSON returns "{\"key\":\"value\"}"
ct) object
SERIALIZE(LIST([ { "key": "value" }, { "key2": "value2" } ]))
into a
JSON returns "[{\"key\":\"value\"},{\"key2\":\"value2\"}]"
string. If
the data
is in list
format,
use the
LIST
function
inside
the
SERIAL
IZE
function
. Note
how it
differs
from
TOSTRI
NG.
Availabl
e in
Winter
'20 and
later
release
s.

company 2104
OmniStudio
SORTB Sort a SORTBY(LIST(NameList), 'LastName', 'FirstName')

Y list of
JSON Sample data:
objects
{
by
"NameList": [
specifie
{
d
"FirstName": "Aaron",
nodes.
"LastName": "Xavier"
By
},
default,
{
perform
"FirstName": "Zellie",
s an
"LastName": "Xavier"
ascendi
},
ng sort.
{
To sort
"FirstName": "Mike",
descen
"LastName": "Smith"
ding,
}
specify
]
:DSC.
}
Support
ed only
for
DataRa
ptor
Transfo
rms.
Syntax:
SORTB
Y(LIS
T(Inpu
tList)
,
'key1'
,
'key2'
...,
[:DSC]
)
SQRT Calculat SQRT(12 * 3) returns 6
es the
square
root of a
value.

company 2105
OmniStudio
STRIN Returns STRINGINDEXOF("This is the test String","test") returns 12

GINDE the
XOF(St position
ring, index of
substr a
ing) substr
ing in
the
given
String
. The
first
position
is zero.
If the
substr
ing is
not
present,
the
value
returne
d is -1.

company 2106
OmniStudio
SUBST Returns The following examples operate on this input:

RING(S the
tring, portion { "input": "The quick brown fox jumped over the lazy dog." }
startI of the
String SUBSTRING(input) returns the entire String
ndex,e
ndInde that SUBSTRING(input,32) returns "the lazy dog."
x) begins
at the SUBSTRING(input,"lazy") returns "lazy dog."
startI
ndex SUBSTRING(input,0,9) returns "The quick"
and
ends at SUBSTRING(input,10,19) returns "brown fox"
the
endInd SUBSTRING(input,"q","n") returns "quick brow"
ex. The
optional
startI
ndex
and
endInd
ex can
be
Strings
or
integers
. For
integers
, the
first
position
is zero.
If the
startI
ndex is
not
found,
the first
position
is used.
If the
endInd
ex is
not
found,
the last
position
is used.

company 2107
OmniStudio
SUM Returns SUM(1,2,3,4,5,6,7,8,9,10) returns 55

the sum
of a list You can use SUM on a JSON array. For example, AVG(List:Item) returns 12 for the following sample data:
of
{
values.
"List": [
{
"Item": 3
},
{
"Item": 4
},
{
"Item": 5
}
]
}
TODAY Returns TODAY()
today's
date. TODAY("yyyy-MM-dd'T'HH:mm:ss.SSSZ")
You can ADDDAY(EOM(ADDMONTH(TODAY(),-1)),1) returns the first day of the current month
use
ADDDAY(EOM(ADDMONTH(TODAY(),0)),1) returns the first day of next month
TODAY
to CONCAT(YEAR(ADDYEAR(TODAY(),1)),"-01-01") returns the first day of next year
specify
dates
relative
to the
current
date.
TOSTRI Convert TOSTRING(3.0) returns "3.0"
NG(dat s any
a) input to TOSTRING([4,5]) returns "4,5"
a literal
TOSTRING({ "key": "value" }) returns "{key=value}"
String.
Note TOSTRING([ { "key": "value" }, { "key2": "value2" } ])
how it
differs returns "{key=value}, {key2=value2}"
from
SERIAL
IZE in
the way
it
convert
s JSON
data.
Availabl
e in
Winter
'20 and
later
release
s.

company 2108
OmniStudio
UNIXD Given a UNIXDATETOTIME('1480490134000')

ATETO Unix
TIME epoch returns "2016-11-30T07:15:34.000Z"
value,
returns
the
corresp
onding
DateTi
me.
UP Use ROUND(2.572, 2, UP) returns 2.58
with
ROUND
to
specify
that the
roundin
g result
is
rounded
up
(away
from
zero).

company 2109
OmniStudio
VALUE Returns For the following sample input data:

LOOKU the
P(Star value of {
tNode, a JSON "Data": {
NodeVa node "Name": {
r, referenc "FirstName": "Thomas",
NodeVa ed by "MiddleName": "Alva",
r ,,,) another "LastName": "Edison"
JSON }
node. },
This "GetGroup": "Name",
lets you "GetField": "FirstName"
dynami }
cally
VALUELOOKUP(Data, GetGroup, GetField) returns "Thomas"
specify
the VALUELOOKUP(Data:Name, GetField) also returns "Thomas"
node to
retrieve VALUELOOKUP(Data, GetGroup) returns the contents of Name
from.
The
StartN
ode
paramet
er must
be a
hard-
coded
node. It
can be
a path
such as
Data:Na
me.
Each
NodeVa
r
paramet
er must
be an
input
node
with the
name of
another
node as
its
value.
If more
than
one
NodeVa
r is
specifie
d, the
previou
s
NodeVa
r
defines

company 2110
OmniStudio
the
starting
node for
the next
NodeVa
r. You
can
retrieve
any
number
of
levels.
YEAR Returns YEAR("1999-01-11") returns 1999
the year
of the
specifie
d date
as an
integer.
Workflow for Creating Custom Functions

You can add custom functions for use in formulas using Apex.
NOTE
In Vlocity Health and Insurance Spring '21 and later releases, you can use the
CustomFunction function instead. See Function Reference.
1. Create the Apex Code for the Custom Function.

For an example, see Sample Apex Code for a Custom Function.
2. Define the Metadata for the Custom Function.
3. Handle any LIST input. See List Input in Custom Functions.
4. Test the Custom Function.
Create the Apex Code for the Custom Function

To implement a custom function, define an Apex class and add a method to the class that contains the
function logic.
1. Go to Setup.
2. In the Quick Find box, enter apex.
4. Note the Namespace Prefix in use under the Version Settings tab (for example, vlocity_cmt).
5. Click New.
6. Enter the Apex code in the Apex Class tab.
7. Click Save.

company 2111
OmniStudio
See Also
• Workflow for Creating Custom Functions

• Sample Apex Code for a Custom Function
Sample Apex Code for a Custom Function

An Apex class implements a customer function containing methods for a SPLIT() function and a SUM()
function. Note that the class and invokeMethod must be global. Note also the use of the namespace in
the interface reference.
global class CustomFunctionImplementation implements

vlocity_cmt.VlocityOpenInterface
{
/*
inputs - arguments - List<Object> of passed in arguments
output - result - The result of the Function being called. Supports
single Object values, List<Object> or Map<String, Object>
*/
global Boolean invokeMethod(String methodName, Map<String, Object> inputs,
Map<String, Object> output, Map<String, Object> options)
{
// SUM Returns a single value
if (methodName == 'sum')
{
List<Object> arguments = (List<Object>)inputs.get('arguments');
output.put('result', sum(arguments));
}
/*
Split Returns a Map<String, Object of values. Not all functions
will be able to handle Map<String, Object> results,
so be careful when using these functions.
In a DataRaptor Transform step returning a Map<String, Object>
from a Formula will result in applying that Map to the
JSON Data at the FormulaResultPath. See https://
vlocity.atlassian.net/wiki/display/RAP/Transforms
*/
else if (methodName == 'split')
{
List<Object> arguments = (List<Object>)inputs.get('arguments');
output.put('result', split(arguments));
}
return true;
}
Double sum(List<Object> arguments)
{
Double result = 0;

company 2112
OmniStudio
for(Object token : arguments)

{
if (token != null)
{
result += (Double)token;
}
}
return result;
}
Map<String, String> split(List<Object> arguments)
{
Map<String, String> result = new Map<String, String>();
String toSplit = (String)arguments[0];
String splitter = (String)arguments[1];
List<String> splitList = toSplit.split(splitter);
for (Integer i = 0; i < splitList.size(); i++)
{
if (arguments.size() > i+2)
{
result.put((String)arguments[i+2], splitList[i]);
}
else
{
result.put('Split'+i, splitList[i]);
}
}
return result;
}
}
See Also
Define the Metadata for the Custom Function

You must define the metadata required for a custom function in Salesforce.
NOTE
In release Vlocity Health and Insurance Spring '21 or later, you don't need to perform this
task. Just use the CustomFunction function. See Function Reference.

company 2113
OmniStudio
1. Go to Setup.
2. In the Quick Find box, enter custom.
3. Click Custom Metadata Types.
4. Click Function Definition.
5. Click Manage Function Definitions.
6. Click New.
7. Specify settings as follows:
• Label: The function name displayed in the list on the Function Definitions tab.
• Function Definition Name: The unique function name used by the API and managed packages, and
which you use in formulas. The name must begin with a letter and use only alphanumeric characters
and underscores. The name cannot end with an underscore or have two consecutive underscores.
• ClassName: The Apex class containing the method that implements the logic for the function.
• Method Name: The method that implements the logic for the function.
8. To support the Apex code in the example above, you must add two function definitions with the
following settings:
• SUM
• Label: SUM
• Function Definition Name: SUM
• ClassName: CustomFunctionImplementation
• Method Name: sum
• SPLIT
• Label: SPLIT
• Function Definition Name: SPLIT
• ClassName: CustomFunctionImplementation
• Method Name: split
9. Click Save.
See Also
List Input in Custom Functions

If an input to your custom function is of the type List<Object>, the input is saved to a VLOCITY-
FORMULA-LIST key. To retrieve the input, use code that retrieves this key.
For example:
static List<Map<String, Object>> CUSTOMFUNCTION(List<Object> inputs)

{
List<Object> listInput = ((Map<String, Object>)inputs[0]).get('VLOCITY-
FORMULA-LIST');
Object variableInput = inputs[1];
// Rest of Function
}

company 2114
OmniStudio
See Also
Test the Custom Function

To verify that you have configured the custom function correctly, go to the Vlocity DataRaptor Designer
Formula tab, add a formula, and type the first letter of the function name. The list of available functions is
displayed, and if your configuration is correct, your function is listed.
For example, you can create a DataRaptor to test the SUM function:
1. Go to the Vlocity DataRaptor Designer and click New.

2. Set the Interface Type to Transform and the Input Type and Output Type to JSON. Click Save.
3. Go to the Transforms tab and provide the following Input JSON:
{
"a": 2,
"b": 3
}
4. Go to the Formulas tab and click Add Formula.
5. Enter SUM(a, b) in the Formula field and total in the Formula Result Path.
6. Go to the Transforms tab, click Quick Match, and click Auto Match.
7. Go to the Preview tab and click Execute. The Response should look like this, although the items might
be in a different order:
{
"a": 2,
"b": 3,
"total": 5
}
See Also
Vlocity Tracking Service

The Vlocity Tracking Service is an event-tracking service that captures details of actions that users perform.
You can use the service to track any type of event. For example, you can track the time it takes to complete
the steps in an OmniScript to identify process improvements.

company 2115
OmniStudio
The Tracking Service writes data to the Tracking Entry object: VlocityTrackingEntry__c. Vlocity
components, includingVlocity Intelligence, Vlocity OmniAnalytics, OmniScripts, Cards Framework, and
Integration Procedures, can call the Tracking Service. The Tracking Entry object contains the custom fields
to ensure the service works, and you can add fields to hold additional data you want to track.
The Vlocity Tracking Service class receives JSON data and writes it to the Tracking Entry object. The class
matches JSON keys to Salesforce custom field names and writes the JSON values to the field values. For
example, the class writes the value held in the JSON key ElapsedTime to the custom field
ElapsedTime__c.
This diagram shows how an out-of-box OmniScript would use the Tracking Service.
Enable Tracking for Vlocity Components

You can enable tracking for Vlocity components by configuring triggers.
To configure triggers for custom fields, see Event Tracking for Custom Fields.

company 2116
OmniStudio
1. Go to Setup.
4. Click the letter T in the index across the top.
5. To the left of Trigger Setup, click Manage.
6. Click New.
7. Enter one of the following settings in the Name field.
Vlocity Component Type Trigger Name

OmniScripts Track.OmniScript
Integration Procedures Track.IntProc
Cards Track.CardFramework
Track.CardPreview
Intelligence Track.Acuity
You can enable tracking for specific events of specific component types. For example, to enable only
StepActionTime events for OmniScripts, create a Track.OmniScript.StepActionTime trigger.
You can enable tracking for specific Integration Procedures using a trigger of the format
Track.Type_SubType. For example, if the Type is CheckContact and the SubType is CreditScore,
the trigger name would be Track.CheckContact_CreditScore. When one Integration Procedure
calls another, and you enable tracking only in the calling Integration Procedure, events in the called
Integration Procedure are also tracked.
8. Check the Trigger On box.
9. Click Save.
10. Repeat steps 6 through 9 for each trigger you want to add.
Vlocity Components Event Tracking

Tracking data is stored in the VlocityTrackingEntry__c object. Some data, listed here, is tracked for
all components and event types. Vlocity OmniAnalytics tracks many additional fields for all of its events.
You can also add custom fields to the data being tracked.
NOTE
If you track a large amount of data, manage space consumption by implementing an
archiving policy for the tracking object.
The following data is tracked for all events:

company 2117
OmniStudio
• Tracking Event or Name: Event type, for example StepActionTime or Error

• User Id: User who triggered the event
• Context Id: The value of the Context Id node in the Data JSON
• Data: Data JSON of the tracking call
• Interaction Message
• Salesforce Session Token: Slightly masked Salesforce session token for the user
• Customer Interaction Token: Unique identifier for events logged for a single session
• Timestamp: Time of the event
• Tracking Service: The service that logged the event
• Vlocity Acuity Resource: Intelligence resource
• Vlocity Interaction: Interaction Id
• Vlocity Interaction Token: Unique token used as an identifier to associate events logged for a single
session.
See Also
• Vlocity OmniAnalytics Event Tracking
• OmniScript Event Tracking
• Integration Procedure Event Tracking
• Event Tracking Data for Cards Framework
• Event Tracking for Custom Fields
Vlocity OmniAnalytics Event Tracking

OmniAnalytics tracking data is stored in the VlocityTrackingEntry__c object. Some data is tracked for all
event types of all OmniAnalytics components: FlexCards, OmniScripts, and Integration Procedures.
The following data is tracked for all OmniAnalytics events:
• Action Container Component: Component type, either FlexCard, OmniScript, or Integration Procedure
• Action Container Global Key
• Action Container Name: Name of FlexCard, OmniScript, or Integration Procedure
• Action Container Version
• Action Element Type: Component type or component action type
• Action Target Name: Component referenced by the action
• Action Target Type: Type of component referenced by the action
• Action Target Version
• Business Category: Metadata attribute of the action that categorizes its business purpose
• Business Event: Metadata attribute of the action that categorizes its business purpose
• Name: Event that populated the step, such as Card Load, Card Unload, UI Action, or Mouse Click
• Primary Account: Primary Account to which the event pertains based on the configuration of the parent
UI component
• Primary Asset: To which the event pertains
• Primary Case: To which the event pertains
• Primary Contact: To which the event pertains

company 2118
OmniStudio
• Primary Lead: To which the event pertains

• Primary Opportunity: To which the event pertains
• Primary Order: To which the event pertains
• Primary Product: To which the event pertains
• Primary Promotion: To which the event pertains
• Primary Quote: To which the event pertains
• Tracking Category: Either UI or Server
• Tracking Version
The following data is tracked for Test Procedures if the OmniAnalyticsTrackingDebug custom setting is set
to true:
• Error Code
• Error Message
• Error Occurred
• Request Payload
• Response Payload
NOTE
If you track a large amount of data, manage space consumption by implementing an
archiving policy for the tracking object.
See Also
• Vlocity OmniAnalytics Overview
OmniScript Event Tracking

For OmniScripts, the following events are tracked. For Outcome events, the user's SaveForLater and
Cancel events are logged by default. To configure the value logged for a Done action, set its Outcome
property.
Event Data Tracked

company 2119
OmniStudio
OmniAnalytics OmniScript Events • Action Container Id

• Action Container Type
• Action Container SubType
• Action Element Name
• Action Element Label
• Action Execution Mode
• Elapsed Time (OS Step Load and UI Action only)
• Instance Identifier
• Load Duration (not all events)
• Ready Time (not all events)
• Request URL
• Save For Later Minutes (not all events)
• Start Time (except OS Cancel and UI Action)
• Step Wait Time (not all events)
• Tracking Group
StepActionTime • OmniScript Id: The Id of the OmniScript__c sObject containing the OmniScript definition
• Context Id: Context Id value from the OmniScript Data JSON
• OmniScript Type
• OmniScript SubType
• Language
• Element Type
• Element Name
• Element Label
• Element Step Number
• Elapsed Time
Outcome • Elapsed Time
• Element Label
• Element Name
• Element Step Number
• Element Type
• OmniScript Context Id
• OmniScript Id
• OmniScript Language
• OmniScrip tSubType
• OmniScript Type
• Outcome: Cancel, Save, or the outcome configured for a Done action element.
• TrackingEvent: Outcome
Integration Procedure Event Tracking

For Integration Procedures, the following events are tracked. When one Integration Procedure calls
another, and you enable tracking only in the calling Integration Procedure, events in the called Integration
Procedure are also tracked.
To track events for specific Integration Procedures, see Enable Tracking for Vlocity Components.
Tracking Event Data Tracked

company 2120
OmniStudio
All Integration Procedure Events • CpuTotal

• DMLRowsTotal
• DMLStatementsTotal
• HeapSizeTotal
• OmniScriptId: The Id of the OmniScript__c sObject containing the definition of the
Integration Procedure
• OmniScriptType
• OmniScriptSubType
• OmniScriptVersion
• ParentInteractionToken: The VlocityInteractionToken from the calling OmniScript or
parent Integration Procedure.
• QueriesTotal
• QueryRowsTotal
• SoslQueriesTotal
• TestBatchUniqueKey: identifier for a group of test invoked together, with Preview suffix if
run in Preview, included only for Test Procedures
• TestUniqueKey: identifier for a single test invocation, included only for Test Procedures
• TrackingService: set to IntProc
Test Procedure events if • Error Code
OmniAnalyticsTrackingDebug is true • Error Message
• Error Occurred
• Request Payload
• Response Payload
OmniAnalytics Integration Procedure • Action Container Type
Events • Action Container SubType
• Action Element Name
• Action Element Label
• Action Execution Mode
Assert • assertConditionalFormula
• assertFailureMessage
(Only tracked for Test Procedures)
• assertResult
• ElementName
• StepDebugInfo: included if the OmniAnalyticsTrackingDebug custom setting is set to
true
• variableData: data that is compared with the assertConditionalFormula
Error • Action
• assertConditionalFormula: included only for Test Procedures
• assertFailureMessage: included only for Test Procedures
• assertResult: included only for Test Procedures
• ErrorTime
• StepDebugInfo: included if the OmniAnalyticsTrackingDebug custom setting is set to
true
• variableData: data that is compared with the assertConditionalFormula, included only for
Test Procedures
StepActionTime • ElapsedTime
• ElementName
• ElementResult
• ElementStepNumber
• ElementType
• StepResult
TestResult • TestStatus: Success or Failed
(Only tracked for Test Procedures)

company 2121
OmniStudio
Add Debugging Data to Test Procedure Event Tracking

When you run a Test Procedure in the Preview tab, JSON data for debugging is included in the Errors/
Debug Output pane. To include this debugging data in VlocityTrackingEntry__c object records under
the StepDebugInfo JSON node, you can set the value of the OmniAnalyticsTrackingDebug custom
setting to True.
NOTE
Although OmniAnalytics manages the data collection, the Test Framework uses the data.
The OmniAnalyticsTrackingDebug custom setting is not dependent on the
OmniAnalyticsEnabled custom setting.
1. Go to Setup.

company 2122
OmniStudio
6. Click New.
7. Enter a Name of OmniAnalyticsTrackingDebug and a Value of True.
8. Click Save.
Cards Framework Event Tracking

The Vlocity Tracking Service is an event-tracking service that can capture details about how Vlocity users
interact with the Cards Framework.
Preview Event Tracking in the Cards Designer

Typically, administrators who are tracing Cards Framework triggers want to track only runtime events. The
Cards Framework includes a Track.CardPreview trigger for Card Designer Preview tracking entries,
which you can disable to screen out preview events.
NOTE
If your org does not include the Track.CardPreview trigger, you can create it. See
Enable Tracking for Vlocity Components.

company 2123
OmniStudio
Track.CardPreview trigger state in Custom Settings Trigger Setup Tracking entries generated for the Card Designer
Preview
Absent No
Present but off No
Present but the Track.CardFramework trigger is absent or off No
On and the Track.CardFramework trigger is on Yes
Event Tracking Data for Cards Framework

For the Cards Framework, events tracked are OmniAnalytics Card Events, initTracking, initCardFramework,
initLayout, selectCard, performAction, trackField, and Resolution.
The following data is logged for all Card events:
• Salesforce Session Token

• Vlocity Interaction Token
• User ID
• Timestamp
The following table lists events and event-specific data logged for user interaction with the Cards
Framework:
Event Data Tracked

OmniAnalytics Card Events • Action Container Id
• Component State
• Data Fetch Duration
• Data Request Start Time
• Data Request End Time
• Instance Identifier
• Load Duration
• Ready Time
• Request URL
• Tracking Group
initTracking Context ID
initCardFramework Context ID
initLayout • Card Name
• Context ID
• Layout Info
• Layout Name
• Layout Version
selectCard • ID
• Interaction Topic ID
• Name
• Policyholder
performAction • Context ID
• ID
• Interaction ID
• Role

company 2124
OmniStudio
trackField • ElapsedTime
• EntityLabel
• EntityName
• Field Value
Resolution None
(End tracking)
Vlocity Intelligence Event Tracking

For Vlocity Intelligence, View, Accept, and Reject events are tracked.
Event Data Tracked

View • CurrentMachine: Name of the Intelligence Machine
• ResourceId: ID of resource being tracked
• AggregatedScore
• ScaledRawScore
• Ranking
Accept • CurrentMachine: Name of the Intelligence Machine
• AggregatedScore
• ScaledRawScore
• Ranking
Reject • CurrentMachine: Name of the Intelligence Machine
• AggregatedScore
• ScaledRawScore
• Ranking
See Also
• Vlocity Intelligence
Event Tracking for Custom Fields

For Integration Procedures and OmniScripts, you can add your own custom fields to the data stored by the
Tracking Service. In Summer '20 and later releases, you can add custom fields to FlexCards as well.
The name of the custom field, minus the trailing __c, must match the key of the corresponding node in the
incoming data JSON. For example:
• Custom field added to VlocityTrackingEntry__c object: MyTrackingField__c

• Corresponding Data JSON key: MyTrackingField
Add the JSON key/value pairs to the Tracking Custom Data list in the component. This list is located:
• In the Setup panel of the FlexCard

• In the Procedure Configuration of the Integration Procedure
• In the Script Configuration of the OmniScript

company 2125
OmniStudio
NOTE
If space is a concern, be sure to monitor the size of the tracking object and delete
unneeded records as required.
Tracking Session Interaction Id

To associate all the events tracked for a single session, the tracking system logs an Interaction Id that is
unique for the session. To provide this Id from an OmniScript or Integration Procedure, add a key/value pair
to the Tracking Custom Data field in the Configuration section.
For example:
CustomerInteractionId: %InteractionId%
To provide the Interaction Id in a REST call, specify it as a parameter:
/apex/DFOmniScriptUniversalPageConsole?id={0}&OmniScriptType=Policy
%20Servicing&OmniScriptSubType=Payment
%20Extension&OmniScriptLang=English&scriptMode=vertical&layout=lightning&Contex
tId={0}&InteractionId={1}&Role={2}
Tracking Data Preprocessor

Before the tracking service executes its own logic, it calls any interface implementations named
TrackOmniScript or TrackCard, enabling you to preprocess tracking data. For example, this
implementation uses the customer ID submitted by an OmniScript to add customer detail to the event data.
global class VlocityDemoTrackOmniscript implements

vlocity_cmt.VlocityOpenInterface {
global Boolean invokeMethod( String methodName, Map<String,Object>
inputMap, Map<String,Object> outMap, Map<String,Object> options ) {
string errors = 'OK';
try {
if( methodName == 'processTracking' ){
processTrackingEvent( (List<Map<String,
Object>>)inputMap.get('trackingDataList'), outMap );
}
} catch ( Exception e ) {
errors = e.getMessage();
success = false;
System.debug( '##### errors: ' + errors );
}
return true;
}

company 2126
OmniStudio
/**
* Process the tracking events
*/
void processTrackingEvent( List<Map<String, Object>> trackingDataList,
Map<String, Object> outMap ){
// Get the current users Id from the input JSON...
Id userId = (Id)trackingDataList[0].get('UserId');
// Get the users details to add to the tracking data...
User currentUser = [SELECT Id, FirstName, LastName, Profile.Name,
UserRole.Name FROM User WHERE Id = :userId];
// Iterate through the tracking entries and add the User's details...
for ( Map<String, Object> trackingEvent : trackingDataList ){
trackingEvent.put( 'UserFirstName', currentUser.FirstName );
trackingEvent.put( 'UserLastName', currentUser.LastName );
trackingEvent.put( 'UserProfile', currentUser.Profile.Name );
trackingEvent.put( 'UserRole', currentUser.UserRole.Name );
}
outMap.put( 'trackingDataList', trackingDataList );
}
}

company 2127
OmniStudio
Vlocity Lightning App and Community Builder

Components Reference
Managed Vlocity Lightning Components are available out-of-the-box in the Lightning App Builder and
Community Builder. They appear in the Components panel under Custom - Managed in the Lightning App
Builder and under Custom Components in the Community Builder.
The components are different from custom Lightning web components and generated Lightning web
components. These Lightning web components may appear in the Components panel under Custom in
the Lightning App Builder and under Custom Components in the Community Builder. For more information
on Vlocity Lightning Web Components, see Vlocity Lightning Web Components.
Component Description Builder Reference

Name
Vlocity Action Displays Vlocity Actions on a Lightning or Community page Lightning App Display Vlocity Actions
Toolbar according to the Record Id present on the page. with the Vlocity Action
Toolbar
Vlocity Renders a Calculation Procedure on a Lightning App n/a
Calculation Calculation Procedure Version page to enable configuration
Procedures of the Calculation Procedure Version’s steps. The
component is not configurable and picks up the
Calculation Procedure Version’s ID internally.
Vlocity Cards Renders a Card on a page. • Community Adding a Vlocity Card to
• Lightning App a Lightning or
Community Page
Vlocity Cards Displays cards that refresh when profile attributes on the • Community Reloading a Card
Component page are modified. • Lightning App Layout After Updating
Events Profile Attributes
Vlocity Cards Enables contact agents to display a full view of the customer Lightning app Vlocity Interaction
Interaction and perform authorized actions. Launcher
Launcher
Vlocity ChatBot The ChatBot component opens a Vlocity Conversation UI on Lightning App Launching the
a lightning page. Conversation UI using
the Vlocity ChatBot
Component
Vlocity ChatBot The ChatBot Input component accepts user input to launch Lightning App Launching Conversation
Input the Vlocity Conversation UI from the Vlocity ChatBot Utility. UI from the Utility Bar
Vlocity ChatBot The ChatBot Utility component is invoked by the ChatBot Lightning App Launching Conversation
Utility Input component to launch Vlocity Conversation UI from the UI from the Utility Bar
Utility Bar.
Vlocity Graph Display a Relationship Graph with nodes. • Community Use the Vlocity Graph
• Lightning App Component Editor
Vlocity Access all available actions on a customer interaction and Lightning App Accessing Actions and
Interaction complete, cancel, or resume customer interactions. Manage Interactions
Wrapper with the Vlocity
Interaction Wrapper

company 2128
OmniStudio
Component Description Builder Reference

Name
Vlocity Lightning The Lightning Profiler component enables you to apply Lightning App Adding Profile Attributes
Profiler profile attributes to a record from the record detail page. to a Lightning or
Community Page
Vlocity LWC The Vlocity LWC OmniScript Wrapper component uses URL • Lightning App Launch an LWC
OmniScript parameters to determine which OmniScript opens and what • Community OmniScript with LWC
Wrapper information to pass into the OmniScript. OmniScript Wrapper
Vlocity Displays an OmniScript. By default, the record Id is passed Community Launching OmniScript
OmniScript into the OmniScript as a ContextId even if one is not from a Community or
specified. Lightning Record Page
Vlocity Enables OmniScript to render Knowledge Base articles Lightning App Opening Knowledge
OmniScript outside of the OmniScript. Base Articles Outside of
Knowledge Base a Classic OmniScript
Vlocity OS Use this component in place of the Vlocity OmniScript Lightning App Configuring the Vlocity
Player Component when a Vlocity Card is used to invoke the OS Player Lightning
OmniScript. Component
Vlocity Power Displays all Actions relevant to a Lightning Record page, or Lightning App Access Actions in a
Launcher all Actions available by default to a Lightning page, in a Type Lightning Page with the
Ahead. Power Launcher
Component
Vlocity Timeline Display a Relationship Graph that shows the timeline of the • Community Use the Vlocity Graph
Relationships from past to present. • Lightning App Component Editor

company 2129

Vlocity OmniStudio Documentation

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

Vlocity OmniStudio Documentation

Uploaded by

Copyright:

Available Formats

OmniStudio

OmniStudio Basics ..................................................................................................................... 2

Vlocity User Interaction Tools ...................................................................................................... 36

© 2021 Vlocity LLC, a Salesforce

Classic OmniScript Designer .................................................................................... 956

© 2021 Vlocity LLC, a Salesforce

Download and Install an Interaction Launcher DataPack .......................................... 1787

Vlocity Data Tools .................................................................................................................. 1798

© 2021 Vlocity LLC, a Salesforce

Declarative Calculation Procedures ......................................................................... 2046

© 2021 Vlocity LLC, a Salesforce

© 2021 Vlocity LLC, a Salesforce

What's New in OmniStudio

OmniStudio Enhancements, Vlocity Health and Insurance Spring '21

Hello OmniStudio, Farewell Vlocity Digital Interaction Platform

Here’s a quick summary of the key terminology changes.

WE USED TO SAY... NOW WE SAY...

© 2021 Vlocity LLC, a Salesforce

Download FlexCard LWCs

Where: Available in Spring '21 and later releases.

Why: Download FlexCard LWCs to debug and inspect issues.

• Download a FlexCard LWC from the FlexCard Designer.

View Notification to Update Remote Site Settings

Where: Available in Spring '21 and later releases.

Use User Locale to Format the Field Element

Where: Available in Spring '21 and later releases.

© 2021 Vlocity LLC, a Salesforce

Use an Absolute Date on a Field Element

Where: Available in Spring '21 and later releases.

Set a Chart Element's Aspect Ratio or Height

Where: Available in Spring '21 and later releases.

• Add a Chart to a FlexCard

Add an Apex Class Permissions Checker

Where: Available in Spring '21 and later releases.

© 2021 Vlocity LLC, a Salesforce

Limit User Acces to a FlexCard or Classic Card in a Managed Package

Where: Available in Spring '21 and later releases.

Limit User Access to a Card Layout in a Managed Package

Add an Apex Class Permissions Checker

Where: Available in Spring '21 and later releases.

Limit User Acces to a FlexCard or Classic Card in a Managed Package

Where: Available in Spring '21 and later releases.

Limit User Access to a Card Layout in a Managed Package

© 2021 Vlocity LLC, a Salesforce

Deploy OmniScripts to Adobe Experience Manager

• Run LWC OmniScripts Outside of Salesforce with LWC OmniOut

Formulas and Functions

© 2021 Vlocity LLC, a Salesforce

List Items with |n Syntax in Formulas

• List Input for DataRaptors

© 2021 Vlocity LLC, a Salesforce

ParentInteractionToken in Integration Procedure Tracking Entry

OmniStudio Tracking Service

Automatic OmniScript and Integration Procedure Activation

© 2021 Vlocity LLC, a Salesforce

Vlocity Lightning Web Components

© 2021 Vlocity LLC, a Salesforce

Added OmniScript Element Support

Element LWC Behavior Angular Behavior

Added Property Support

Property LWC Behavior Angular Behavior

Added Functionality Support

© 2021 Vlocity LLC, a Salesforce

Functionality LWC Behavior Angular