OmniStudio Concepts

Saba Fatima
6 min readJun 3, 2022

--

With the acquisition of Vlocity, Salesforce now offers core platform with industry specific models and solutions.

These are managed packages that are added to the existing Salesforce solutions.

Here are the fundamental concepts of omnistudio.

The model covers the concepts including Flex Cards, Flex Card Designer, Omniscripts, Data Source Wizard, Data Raptors, Integration Procedures etc.

Flex Cards :

FlexCard Designer :::

Header and Canvas

The header is where you view metadata and perform actions related to your FlexCard

Build your FlexCard by dragging elements onto the canvas.

In Design view, test the responsiveness of your FlexCard with the viewport dropdown, shows how flexcard appears on tablet, mobile, desktop etc.

To build your FlexCard, drag Fields and Elements onto the canvas.

Properties Panel

When you select an element on the canvas, configure the element’s properties from the Properties panel

Style Panel

Use the Style panel (1) to style your FlexCard elements and update their appearance in real time. This panel has settings for configuring backgrounds, sizes, borders, padding, margins, height, fonts, and responsiveness.

Setup Panel

You configure multiple settings when you create a FlexCard using the data source. For existing FlexCards, go to the Setup panel (1) to update these settings or configure more settings.

  • Update your Data Source.
  • Apply custom permissions to limit access to your FlexCard.
  • Track Custom Data on elements with tracking enabled.
  • Enable Multi-Language Support, set Session Variables, and create Event Listeners.

A Session Variable is a special type of variable that allows us to store values from data sources or external systems and access them globally on a FlexCard.

An Event Listener is a function that ‘listens’ or waits for an event to occur and performs an action in response.

Preview and Publish

Preview your FlexCard in real time to test its design and functionality.

Data Source Wizard :::

When you create a FlexCard, the Data Source Wizard walks through a series of steps.

Define the FlexCard.

→ This step lets you configure basic settings such as the name, title, author, description, and theme for the FlexCard. You can also set this FlexCard as a child card so it can be embedded in other FlexCards.

→Naming Conventions for the Name and Author

FlexCards have strict naming conventions for their names and authors.

→Title

The title lets us find the generated FlexCard Lightning web component in the Lightning App Builder and Community Builder.

→Theme

There are two options for the FlexCard theme. Select Lightning to use Salesforce Lightning Design System (SLDS) or Newport to use the Newport Design System. Newport is a CSS framework tool for designers and web developers to easily restyle all OmniStudio components in a single place and generate a custom, optimized CSS file that can be used in all future pages.
When you save the FlexCard, you will no longer be able to edit the name, author, or theme. If you need to complete edits, clone the FlexCard and update these settings when you create the clone.

Select the data source type.

→A FlexCard displays data from a Salesforce object or an external database, or it displays sample (mock) data.

types of data sources you can use:

Apex REST

Apex Remote

Custom uses sample JSON to set up a FlexCard with temporary data

SOQL Query

SOSL Search

Streaming API

You can also use OmniStudio data tools such as :

DataRaptor

Integration Procedures

Select the data source.

→our choice of data source type determines the properties that display for the data source itself

Configure the data source inputs.

→This page lets you add test variables so you can preview the FlexCard using real data. You view test response and performance metrics from the data source, and preview the data returned in JSON format before you start building the FlexCard.

Display Data and Actions on a FlexCard :::

There are several types of actions available.

Fundamentals of OmniScripts

An OmniScript gives customers a guided path for completing a business process and serves as a configurable way of creating a seamless customer experience

OmniScript is a declarative scripting tool you create with clicks, not code. Using the OmniScript Designer.

OmniScripts are not restricted to OmniStudio Interaction Consoles for agents to use. You can deploy them on any device and any channel, such as a mobile device, or a consumer portal.

OmniScripts Have Modular Architecture -An OmniScript’s look and feel (frontend) is separated from its functionality (backend). OmniScripts separate the JavaScript Object Notation (JSON) metadata structure (1), the stylesheets (2), and the data (3) from each other.

Display Data from Multiple Data Sources-

Rebrand OmniScripts to Suit Your Customers-You change the appearance of an OmniScript two ways. First, by using custom Lightning stylesheets to determine whether the guided interaction has a horizontal or vertical mode, branding, or any other aspects you wish to see. Second, by using the Newport Design System (NDS). NDS includes a complete set of customizable, global styles and is a Cascading Style Sheets (CSS) framework. It lets designers and web developers easily restyle all of their OmniStudio components in a single place and generate a custom, optimized CSS file that can be used in all future pages. It can even be used for non-OmniStudio and non-Salesforce pages.

OmniScript Designer

You access the OmniScript Designer by opening an OmniScript via the OmniStudio app (formerly called Vlocity Digital Studio).

Another type of Group element, Type Ahead Blocks, includes a combination of functionality that provides autocomplete and search.

Here are the scenarios for using the other data input options.

The OmniScript uses a parser to match the JSON that comes from the Integration Procedure to the inputs in the OmniScript based on element names.

An OmniScript’s Type, Subtype, and Language gives an OmniScript its unique identity. Only one active OmniScript may have the same Type, SubType, and Language at any time.

Data Raptors :::::::

Extracting External Data with Integration Procedure:::::

When you want to extract data from an external source, use an API key to pull the data and then transform it before it returns to the tool (FlexCard or OmniScript) that called the Integration Procedure.

OmniScripts with Branching ::::::

Set Values elements prevent users from moving forward if they haven’t taken an action, and Set Errors elements make users return to a previous step if they make a mistake.

for a Set Errors element to work, you need three properties.

Element Error Map — Tells the system which element displays the error message.

Value field — Defines the instructional text you display.

Conditional View — Defines when the element fires.

OmniStudio Data Tools and Internal Data:::::

The r. creates a relationship query within the Salesforce Object Query Language (SOQL) query of the DataRaptor to pull any field of the related Contact sObject.

Extract Tab

In the Extract tab, specify the sObject you want the DataRaptor to query, set the filters that determine the data retrieved from the object, and specify the fields to extract.

Output Tab

In the Output tab, you map data from the extract step JSON to the output JSON.

Preview Tab

You can test the input and output of the DataRaptor using the Preview tab.

When you configure the DataRaptor Extract Action in the OmniScript’s Type Ahead Block, you need to set two input parameters.

A Filter Value (2) that presents matches based on what the end user enters into a specified element.

--

--