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,
[email protected]).
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.

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

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

FlexCards
Exercise Guide

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

Meet the Data Source Wizard

Requirements
“As a service agent, I'd like to view information about a customer account.”

Create a new FlexCard using the wizard, which prompts the data source setup.

Prerequisites
● None

Tasks
1. Create a FlexCard and Configure its Data Source
2. Explore the FlexCard Designer’s UI

Time
● 10 mins

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

FlexCards
Exercise Guide

Task 1: Create a FlexCard and Configure its Data Source

1. Access the OmniStudio FlexCards Designer.

a. Click the App Launcher .

b. Select the OmniStudio App.

c. Open the dropdown menu and select OmniStudio FlexCards.

2. Use the Data Source wizard to create a new FlexCard.

a. Click New to create the FlexCard. Fill in the fields as follows:

Property Value Notes

Name teamAccount Names can only contain underscores and

alphanumeric characters. It must be unique,
begin with a letter, have no spaces, not end
with an underscore, and can’t have two
consecutive underscores.

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

FlexCards
Exercise Guide

You cannot edit a FlexCard name after you

create it. To change it, you must clone the
FlexCard.

Title Leave this as-is This defaults to what you enter in the Name
field.

Theme Lightning The two themes are Newport and Lightning.

Keep this as Lightning.

Is Child Card Because this is a parent FlexCard, leave as-is.

Author The author defaults to Avoid non-ASCII characters and spaces to

your company name. ensure URLs don’t have characters like %20.
Follow the same naming
conventions as for the Especially avoid the apostrophe (‘) such as in a
Name. If naming name (e.g. D’Angelo). You can’t change the
conventions aren’t author once you click Save at the end of the
followed, an error wizard process. To change it, you must clone
prompts you to fix it. the FlexCard.

b. Click Next.

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

FlexCards
Exercise Guide

NOTE:

The combination of the FlexCard Name and Author must be unique in your
Org. For example, if importing a FlexCard with the same name and author of a
current FlexCard, you will be asked if you want to overwrite the current
FlexCard in your org.

3. Select the data source type.

A FlexCard has one data source. As you add fields and other elements to the canvas,
the values for the fields come from the data source you select

a. Select Integration Procedures.

b. Click Next.

4. Select and configure the data source.

a. Click in the Name field to open a dropdown list, then select

team_getAccountContactDetails.

Start typing a part of the name to more easily select from a filtered list.

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

FlexCards
Exercise Guide

b. This is an integration procedure with stub data, not live data. Click + Add
under Input Map and enter the following information:

Property Value Notes

Key AccountId The name of this variable is arbitrary, but it's

best practice to always be explicit about the
information you're sending between
OmniStudio tools. Here you want to explicitly
say that you’re sending an AccountId to the
Integration Procedure.

Value {recordId} The piece of data you're sending with the

variable name is the Record Id from this layout.

The merge field syntax for a FlexCard layout is

{VARIABLE NAME}.

c. Click Next. If the Next button is greyed out and inactive, reselect
team_getAccountContactDetails in the Name field and then click Next.

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

FlexCards
Exercise Guide

5. Configure the inputs and confirm the test data is entering your JSON.

a. Locate the TABLE and JSON tabs under Test Response.

b. Click the JSON tab.

c. Confirm the data has two different nodes: A Contact node with first name,
last name, email, phone number, title, and Contact RecordId, and an Account
node with account name, website, account phone, primary contact name,
and postal code as well as Account RecordId.

At this stage, we’re working with stub, or mock, data, not live data. Once you switch
to live data, you’ll add a test value and fetch it. Since you haven’t linked live data yet,
the TEST PARAMETERS are not needed now. This is used to preview your FlexCard
with different parameters using real data.

6. Trim the JSON node to only provide Account data to the card.

Best practice is to only pass on the data that you need to use to a card. The FlexCard
data source is retrieving both Account and Contact data. Because you’re creating an
Account-focused card, there’s no need to bring the Contact data into the JSON for
the card.

a. Click in the Result JSON Path field and select [“Account”].

b. The JSON tab below now only displays Account data.

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

FlexCards
Exercise Guide

c. Click Save. The new FlexCard is created and its Canvas is visible.

Task 2: Explore the FlexCard Designer’s UI

Now that your FlexCard is created, you are ready to work on the FlexCard Canvas and build
it using elements. Before that, get familiar with the FlexCard Designer user interface (UI).

1. Explore the Header and Canvas.

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

FlexCards
Exercise Guide

a. In the Header, you’ll see basic metadata about your FlexCard, such as the
Author, Current Version, Status, and Last Modified date and time.

The Author tells who created the FlexCard. Current Version tells what version
of the FlexCard you’re in. The Status tells you whether the FlexCard is active.
You can only make changes to an inactive FlexCard. The Last Modified field is
when this version was last worked on.

b. The Canvas is where you build your FlexCard. You drag elements from the
Build panel onto the canvas.

You can also perform actions to your FlexCard in the Header with control
buttons, such as toggle between Design view and Preview, create a New
Version, Export the FlexCard, Clone, Activate or Deactivate, and configure
Publish Options.

There is also a Help button, where you can access a list of links to resources,
called In-Product Help.

2. When you create a new FlexCard, it already has an Active state and the Build panel is
open. Explore the Build panel.

a. Notice the long list of elements split into three sections: Fields, Display, and
Inputs. Expand the list of display and input elements. To build on the canvas,
you select and drag from these lists on to the FlexCard State. Click the small
question mark next to any of the elements to view In-Product Help on
them.

b. Drag an Action display element from the Build panel to the canvas. Notice
that after you drag an element to the canvas, it triggers a switch from the
Build panel to the Properties panel.

c. Return to the Build panel. Drag a Currency input element to below the
action.

d. Return to the Build panel. Drag a Field display element to below the input
element.

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

FlexCards
Exercise Guide

3. Explore the Properties panel.

Properties is where you configure element properties when an element is selected

on the Canvas. What you see in the panel depends on the Element type. Use Field
and Action elements for a comparison.
a. Verify the Field element you just added to the canvas is selected and the
Properties panel is open.

b. When a Field element is selected, you can change the field name, add a field
label, enter placeholder text, select the field type, and add a condition that
determines when the field displays.

c. Tooltips are small popover windows that give you in-line information about
specific properties. Hover over the tooltip icon to view them.

d. Select the Currency element. View the Properties panel.

e. Notice that an input element has a few more properties to configure than a
Field element due to the nature of its functionality. For example, you have to
link it to the correct data coming into the card. You can also set custom
attributes.

f. Select the Action element. View the Properties panel.

g. Notice that an Action element has a lot more properties to configure than a
Field element due to the nature of its functionality. For example, you can set
the action type, select an icon for the action, select the target, and where you
want the target opened.

4. Go to the Style panel. This is where we customize the look and feel of your FlexCard
by styling elements using a user interface (UI) to choose and configure the text color,
borders, and backgrounds, sizes and padding of fonts and entire elements, and
make elements responsive.

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

FlexCards
Exercise Guide

a. Scroll through the panel and note the sections: DIMENSIONS, APPEARANCE,
and ALIGNMENT.

b. The CUSTOM CSS section is for custom design needs. You can create and
apply custom CSS here, including CSS classes with an in-product code editor.

5. Explore the Setup panel.

a. Go to the Setup panel. Update or change the data source here at any time.

b. Scroll down to the DATA SOURCE section. You selected and configured your
data source with the wizard.

When you replace the stub data in the selected Integration Procedure, you
will return to the Setup panel to use the test parameters and make sure
everything is properly connected.

TIPS:
If in doubt about how to use a feature or what to put in a field, look for the
or .

6. Remove the Action and Field elements from the FlexCard.

a. With the Action element selected, click the trashcan / bin icon to remove it.
Be careful not to remove the state.

Each FlexCard has a default Active state. States display records that we specify
using elements. Add a State element to the FlexCard canvas to present
different interactions and layouts based on specified conditions.

b. Remove the Field and Currency elements the same way.

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