FlexCards

Exercise Guide

Before You Begin

Did you sign up for a special OmniStudio Developer Edition org already? You’ll need one to
do the steps in this guide. Here’s how to request one if this is your first time completing an
OmniStudio module:
1. Sign up for a free Developer Edition org with OmniStudio.
2. Fill out the form.
a. For Email, enter an active email address.
b. For Username, enter a username that looks like an email address and is
unique, but it doesn't need to be a valid email account (for example,
yourname@omnistudiotrails.com).
c. After you fill out the form, click Sign me up. A confirmation message appears.
3. When you receive the activation email (this might take about 10 minutes), open it
and click Verify Account.
4. Complete your registration by setting your password and security challenge question.
Tip: Write down your username, password, and login URL for easy access later.

You are logged in to your Developer Edition and you can begin practicing.

Set Up Remote Site Settings for FlexCards

1. Click the App Launcher , and then select the OmniStudio App.
2. Click the “Gear” icon to go to Setup. This opens a new tab.
3. Return to the previous tab, open the dropdown menu, and select OmniStudio
FlexCards.

© Copyright 2021 Salesforce.com, inc. All rights reserved. 1

FlexCards
Exercise Guide

4. Click Warnings. The Warnings message displays, showing the URLs needed in
Remote Site Settings for Lightning web components to work correctly in FlexCards.

5. Return to the Setup browser tab. In the Quick Find box, search for Remote Site
Settings and click to open it.
6. Return to the tab with the Warnings message and copy the URL ending in
lightning.force.com.
7. In the Remote Site Settings tab, click Edit next to the Remote Site ending in
lightning.force.com.
8. Paste the URL you copied over the URL in the Remote Site URL field, then click Save.
9. Click Remote Site Settings to return to the list.
10. Click Edit next to the Remote Site ending in visual.force.com.
11. Return to the tab with the Warnings message and copy the URL ending in
visual.force.com. Copy the URL.
12. Paste the URL you copied over the URL in the Remote Site URL field, then click Save.
13. Return to the tab with the Warnings message. Close the modal window and refresh
the tab. The Warnings button is now gone.

Update Session Settings

1. Return to the browser tab with Setup open.
2. In the Quick Find enter session and select Session Settings.
3. Scroll up the page and clear the checkbox next to Use Lightning Web Security for
Lightning web components. (The checkbox should be blank.)
4. Scroll back down and click Save.

© Copyright 2021 Salesforce.com, inc. All rights reserved. 2

FlexCards
Exercise Guide

Deploy OmniScripts

1. From the OmniStudio app, open the Object dropdown menu and select
OmniScripts.
2. Activate the following OmniScripts: team/editAccount, team/editContact,
team/editCase, and team/updateAccountPrimaryContact.

You can activate the OmniScript without opening it by first expanding it, clicking the
arrow to the far right of the row with the starter version, and then selecting
Activate>OK.

© Copyright 2021 Salesforce.com, inc. All rights reserved. 3

FlexCards
Exercise Guide

Build a FlexCard with External DataRequirements

“As a service agent, I'd like to view weather and weather forecast information for the
account's location and see alerts of any hazardous weather conditions.”

Create a FlexCard that displays the current weather using a data source outside of
Salesforce. Then add a flyout action to display 5-day weather forecast data in a datatable.

Prerequisites
● None

Tasks
1. Configure the Data Source for the Weather Child FlexCard
2. Add and Style an Image Element
3. Create a Child FlexCard with a Datatable for Forecast Data
4. Configure the Flyout Action for the 5-Day Forecast

Time
● 25 mins

© Copyright 2021 Salesforce.com, inc. All rights reserved. 4

FlexCards
Exercise Guide

What You Will Build

Task 1: Configure the Data Source for the Weather Child FlexCard

1. Create a child FlexCard for the weather.

a. In the OmniStudio FlexCards tab, type team in the Search bar.

b. Locate teamStarterWeather (version 1) and open it. The data source, image,
and flyout action have not been completed, but the elements have been
styled already by the team.

© Copyright 2021 Salesforce.com, inc. All rights reserved. 5

FlexCards
Exercise Guide

c. Click Clone to clone and rename the FlexCard.

d. Rename it to teamWeather. Click Clone.

2. Select and configure the data source.

a. Go to the Setup panel and note OmniScript Support is selected. This means
the card can be embedded in an OmniScript.

b. Scroll to DATA SOURCE.

c. Select Integration Procedures as the Data Source Type.

d. In the Name field, select team_getWeatherDetails.

e. Click + Add New under Input Map (do this twice) and enter the following
variables:

Key Value
Days 5
AccountId {recordId}

3. Confirm the stub weather data is entering your JSON.

a. Click the Save & Fetch. Go to the JSON tab.

b. Confirm the data has two different nodes: A Forecast node with date,
condition, Hi/Lo Temp in °F and °C, and a Current node with condition,
City/State and Temp °F and °C.

© Copyright 2021 Salesforce.com, inc. All rights reserved. 6

FlexCards
Exercise Guide

NOTE: The FlexCard the team made is set to Fahrenheit. If you prefer using
Celsius, select the Temperature field and change it in the Properties panel.

4. Trim the JSON node to only provide the current weather data to the card.

a. Click OK.

b. In the Result JSON Path field, select [“Current”].

c. Click Save & Fetch again and verify you only see the Current node with the
current weather stub data.

d. Click OK.

e. The fields on the canvas are now populated with the stub data.

© Copyright 2021 Salesforce.com, inc. All rights reserved. 7

FlexCards
Exercise Guide

Task 2: Add and Style an Image Element

1. Add an Image element using a URL.

a. Select the Weather Image block in the canvas. It’s above the weather data
you just populated.

b. Go to the Build panel and drag an Image element to the Image block.

c. While in the Properties panel, locate the Image Source field. Read the
tooltip. Clicking the magnifying glass opens the Image Source window.

You can upload an image, select an image from your org’s libraries, or enter
the URL of an image. Uploaded images are saved to your org’s library of
documents for reuse.

d. Click the magnifying glass next to the Image Source field.

e. Click in the field Select an Image from Content Document.

f. Select weatherbannerActive (Version:1) from the list.

© Copyright 2021 Salesforce.com, inc. All rights reserved. 8

FlexCards
Exercise Guide

g. Click Save.

h. Change the image Size to Large.

i. Click Preview.

The remaining element in this FlexCard is for the flyout action. Leave this alone for now,
you’ll come back to it after you create the flyout FlexCard, which is next.

© Copyright 2021 Salesforce.com, inc. All rights reserved. 9

FlexCards
Exercise Guide

What You Will Build

Task 3: Create a Child FlexCard with a Datatable for Forecast Data

You’ll now create the child FlexCard to enter in the Flyout field in the teamWeather
FlexCard.

1. Create a new child FlexCard.

a. In the OmniStudio FlexCards tab, type team in the Search bar.

© Copyright 2021 Salesforce.com, inc. All rights reserved. 10

FlexCards
Exercise Guide

b. Locate teamStarterWeatherForecast (version 1) and open it. The data

source and data table have not been completed, but the icon has already
been formatted by the team.

c. Click Clone to clone and rename the FlexCard.

d. Rename it to teamWeatherForecast. Click Clone.

2. Select and configure the data source.

a. Go to the Setup panel and scroll to DATA SOURCE.

b. In the Data Source Type field, select Integration Procedures.

c. In the Name field, select team_getWeatherDetails.

d. Click + Add New under Input Map (do this twice) and enter the following
variables:

Key Value
Days 5
AccountId {recordId}

e. Click the Save & Fetch button. Verify the stub data displays in the JSON tab.
You see two nodes: “Forecast” and “Current”.

f. Click Ok.

g. To trim the data that’s returned to only the forecast, click in the Result JSON
Path and select [“Forecast”].

h. Click Save & Fetch again and confirm only Forecast data appears. Click Ok to
return to the FlexCard.

3. Add a Datatable element to display the 5-day forecast data.

a. Select the 5-Day Forecast block.

b. In the Build panel drag a Datatable element inside the 5-Day Forecast block.

c. Select the Edit icon to configure the table.

© Copyright 2021 Salesforce.com, inc. All rights reserved. 11

FlexCards
Exercise Guide

4. Configure the Date and Hi/Lo Temperature fields in the datatable.

a. Change the Type of the date field to Date. This sets the format of the data to
DD-MM-YYYY.

b. Note there are two lines for different HiLoTemp fields: Celsius and Fahrenheit.
Discard the field for the unit you don’t want to use by clicking the trashcan /
bin icon to the right of the line.

c. Update the Field Label for the Hi/Lo Temp field to Hi/Lo Temp °F or Hi/Lo
Temp °C. To display a degree symbol on a Mac, use shift+option+8. For a PC,
use ASCII code 0176.

NOTE: If the degree symbol doesn’t display now or in future, try clearing the
label field and typing it in again, or try inserting a space between the symbol
and C/F, for example, Temp ° F.

© Copyright 2021 Salesforce.com, inc. All rights reserved. 12

FlexCards
Exercise Guide

d. Click Save.

The datatable looks like the below when you finish. Don’t worry that you can’t
see the data populated. The Design view doesn’t show data in a table, but
Preview does.

5. Bold the labels in the table header.

a. Go to the Style panel and scroll to DATATABLE. Locate Table Head.

b. Enter bold in the Font Weight field.

c. Scroll to ALIGNMENT and set Text Align to Left. (This will ensure the headers
and text in the table are aligned in the same way.)

d. Preview the FlexCard. You see the table five times for the 5 days you entered
in the Input Map. A new FlexCard has Repeat Records enabled by default.

© Copyright 2021 Salesforce.com, inc. All rights reserved. 13

FlexCards
Exercise Guide

This means the data loops through records. When you want to display data
that doesn’t need to be looped through and displayed as a list, disable this
feature. Datatables already loop over and list multiple records, so disable it.

e. Return to the Design mode and go to the Setup panel.

f. Expand Repeat Options and disable Repeat Records.

g. Preview again. You see just the one datatable now.

h. Click Activate.

There is no need to configure Publish Options, as this is a child FlexCard in

the teamWeather flyout action.

© Copyright 2021 Salesforce.com, inc. All rights reserved. 14

FlexCards
Exercise Guide

Task 4: Configure the Flyout Action for the 5-Day Forecast

1. Configure the flyout action.

a. Return to the teamWeather FlexCard. Refresh the screen. This will ensure the
new child card is an option for the Action element.

b. Select the Action element and change the Element Name to Forecast in
the Properties panel.

c. Fill in the fields as follows:

Property Value Notes

Label Get 5-Day Forecast

Icon standard:forecasts

Display as Button
✓
Under Display As
Outline Brand
Button

Action Type Flyout

Flyout Type Child Card

If the card isn’t visible,

Flyout teamWeatherForecast confirm you activated it
and refresh the page.

Open Flyout in Modal

d. Go to the Style panel. Locate the Color field for the Label. Enter #3A6D9D as
the label color.

e. Scroll to the Icon Color field. Enter #3A6D9D as the icon color.

2. Preview the FlexCard to confirm the table appears correctly.

a. Preview the FlexCard.

b. Click the Get 5-Day Forecast button to view the forecast table. Verify all the
fields are populating in the FlexCard.

© Copyright 2021 Salesforce.com, inc. All rights reserved. 15

FlexCards
Exercise Guide

© Copyright 2021 Salesforce.com, inc. All rights reserved. 16