FlexCards

Exercise Guide

Display Data and Actions on a FlexCard

NOTE:
Did you sign up for a special OmniStudio Developer Edition org already? You’ll
need one to do the steps in this guide. If not, use the link to fill out the form
and have an org delivered to your inbox. The Exercise Guide in the first unit of
this module has more detailed steps for this process if you need them.

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

After creating a new FlexCard, add elements to display data.

Prerequisites
● Meet the Data Source Wizard

Tasks
1. Add and Style Block Elements
2. Add Text, Icon, and Menu Elements
3. Populate Elements in the FlexCard

Time
● 35 mins

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

FlexCards
Exercise Guide

What You Will Build

Task 1: Add and Style Block Elements

1. Go to the OmniStudio FlexCards tab.

2. In the Search/Find in page box, type the keyword team.

3. From the search results, expand teamAccount. You created this FlexCard in the
previous exercise in Meet the Data Source Wizard.

4. Click teamAccount (Version 1).

5. Add Block elements to the canvas and configure them.

a. Go to the Build panel. Drag a Block element to the canvas.

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

FlexCards
Exercise Guide

b. In the Properties panel, enter Account in the Element Name field.

c. Go to the Style panel.
d. Under DIMENSIONS, toggle Responsive to enable it.

With responsiveness enabled on an element, set the width to change as the

viewport width changes. The responsive sizing of elements is mobile-first.
Sizing starts at the smallest viewport breakpoint until the next wider viewport
overrides it.

e. Adjust the element widths as follows:

Viewport Size Size

Large 5

Medium 5

f. Enter 350 in the Minimum Height field. Entering a number without a unit
defaults to the px unit.
g. Enter 375 in the Maximum Height field.

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

FlexCards
Exercise Guide

h. Scroll down to the APPEARANCE section.

i. In the Border Type dropdown, select Top, Right, Bottom, and Left. The
dropdown shows 4 Options selected.

j. Scroll down to the ALIGNMENT section. Notice the Padding Type and
Padding Style defaults to around:x-small and there are no defaults set for
Margin Type and Margin Size.

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

FlexCards
Exercise Guide

k. Select a Bottom Margin Type and set the Margin Size to Medium. Click the +
button.
l. Select a Horizontal Margin Type and set the Margin Size to x-Large. Click the
+ button.

NOTE: The Margin settings may not be immediately visible in the Properties
pane, but you can see them applied on the Canvas.

m. Scroll down to the CUSTOM CSS section. To add a box shadow to the Block
element, copy and paste the below CSS to the Inline CSS Styles field:

box-shadow:5px 5px 5px grey;

border: 1px solid #cccccc;

Note the sample styling is automatically replaced.

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

FlexCards
Exercise Guide

n. Click the Clone icon next to the trashcan to clone the Account block.

o. In the Properties panel for the new block, rename the Element Name to
Weather.

The FlexCard now looks like the image below.

p. Click the Preview button.

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

FlexCards
Exercise Guide

Task 2: Add Text, Icon, and Menu Elements

Adding data fields to a FlexCard canvas

There are three ways to add a data field to a state on the canvas that displays data returned
from the data source. All are located in the Build panel:

● Field element – This is a “blank” field that is completely customizable.

● Text element – This combines text and parsed merge fields to display on a FlexCard.

● Fields list – Click Fields to view the list of available data fields. These fields are
populated from the data source.

1. Build the header for the Account Details.

a. Click Design to return to the Design view.

b. From the Build panel, drag a Block element inside the Account block.

NOTE: If you are having trouble placing the block inside the Account block,
position your mouse along the top center of the block and release when you
see the blue line inside it.

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

FlexCards
Exercise Guide

c. Change the Element Name to Icon Header

d. Drag an Icon element inside the Icon Header block.

e. Drag a Text element below the Icon element inside the Icon Header block.

2. Add the data fields and a menu element for the Account Details.

a. Drag a Text element to below the Icon Header block. Make sure it is outside
the Icon Header block, but still inside the Account block.

You will know if you dragged it into the right place by the name of the block.
The element name will say Icon Header-Text if you dragged it into the Icon
Header block but will say Account-Text if you dragged it into the Account
block.

TIPS:
If you’re having trouble placing an element on the canvas, such as inside or
outside of a Block element, try selecting an element on the canvas so it’s
highlighted, then use that to guide you when placing a new element.

If you don’t place it correctly the first time, move the elements around on the
canvas after they’ve been placed. Note that the element name doesn’t change
after you move it to the canvas, it keeps the name you enter or the name
automatically generated depending on its placement.

b. Clone the Text element three times.

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

FlexCards
Exercise Guide

c. Drag a Menu element from the Build panel to between the top two Text
elements.

d. Click the Preview button. Click Action Debugger. This allows you to trace the
flow of data from the data source into the FlexCard.

e. You will populate the elements with account data next, so make sure the data
is being brought in from the Integration Procedure you configured. Locate the
first entry for Datasource and expand it. This is the datasource for the
Account block.

f. You will populate the elements with account data next, so make sure the data
is being brought in from the Integration Procedure you configured. Note the
dataSource type is “IntegrationProcedures”. Below it you see the name
team_getAccountContactDetails.

g. Expand response. Verify the stub account data is being pulled.

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

FlexCards
Exercise Guide

You’re ready to populate the icon and text fields.

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

FlexCards
Exercise Guide

Task 3: Populate Elements in the FlexCard

1. Populate the Account Header.

a. Click Design to return to the Design view.

b. Select the Icon element in the Icon Header block.

c. Configure the properties in the Properties panel as follows:

Field Value
Element Name Icon

Type Salesforce SVG

Icon utility:company

Size Large

Variant Inverse

d. Delete the text in the Extra Class field. The icon didn’t disappear, you only
changed its color to white against a white background.

e. Select the Text element in the Icon Header block. Locate TEXT PROPERTIES
in the Properties panel.

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

FlexCards
Exercise Guide

f. Click in the DIV line where it says Edit me! This is placeholder text. Delete it.

g. Leave your cursor in the DIV line so it’s selected. This is the field for the
account name, so it must be large and prominent. Put the merge field for the
account name here.

h. Select AccountName from the Fields menu. This populates the DIV line with
the merge field for the account name.

i. Select Heading Large from the Styles menu. Go to Styles > Headers >
Heading Large.

TIP:
If you do not see the Styles menu, click the two dots (the More menu) to the
right of Div.

The fields in this menu are all pulled from the data source you configured with the wizard.
When working with Text elements, find the fields pulled in by the data source in this menu.

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

FlexCards
Exercise Guide

j. If you have not already done so, click the More menu. Highlight the
merge field and bold it.

k. Click the Text color menu and set the text color White. Make sure you
select Text Color and not the Background color menu.

The Icon Header block now looks empty. Don’t worry — you’ll soon see the icon and header
again.

2. Configure the Primary Contact field.

a. Select the Text element under the Icon and Header block.

b. In the Properties panel, delete the placeholder text Edit me!

c. Make a second DIV line for the label to this field. Press Return/Enter on your
keyboard.

d. In the top line, enter Primary Contact for the field label.

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

FlexCards
Exercise Guide

e. Go to the Styles menu and click to expand the menu.

f. Go to Body then select Uppercase.

g. Click in the second DIV line.

h. Select AccountPriContact from the Fields menu. The merge field

{AccountPriContact} populates in the line.

i. Select the merge field {AccountPriContact}, then click the More menu
button.

j. Set the font size to 12pt.

k. Now select the label PRIMARY CONTACT. Set the font size to 10pt.

Repeat these steps for the remaining three Text fields.

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

FlexCards
Exercise Guide

3. Configure the Phone field.

a. Select the Text element under the Menu element. It has Text-3 in its name.

b. Configure it as follows:

Field Value
Edit Me! Delete and enter a new line

Top Line (label) Phone

Top Line (label) Styles > Body > Uppercase

Top Line (label) Font size 10pt

Bottom Line (node) Fields > AccountPhone

Bottom Line (node) Font size 12pt

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

FlexCards
Exercise Guide

4. Configure the Website field.

a. Select the Text element under Phone.

b. Configure it as follows:

Field Value

Edit Me! Delete and enter a new line

Top Line (label) Website

Top Line (label) Styles > Body > Uppercase

Top Line (label) Font size 10pt

Bottom Line (node) Fields > AccountWebsite

Bottom Line (node) Font size 12pt

5. Configure the Postal Code field.

a. Select the Text element under Website.

b. Configure it as follows:

Field Value
Edit Me! Delete and enter a new line

Top Line (label) Postal Code

Top Line (label) Styles > Body > Uppercase

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

FlexCards
Exercise Guide

Top Line (label) Font size 10pt

Bottom Line (node) Fields > AccountPostalCode

Bottom Line (node) Font size 12pt

6. Configure the Menu element to add multiple actions to the FlexCard.

In this task, configure a menu of actions on the Account Details FlexCard using the
Menu element you added earlier.

a. Select the Menu element.

b. In the Properties panel, configure the following fields:

Field Value
Element Name Menu

Label Menu

Icon utility:down

Enable Overflow ✔
Dropdown Position Right

Dropdown Size xx-Small

Variant Neutral

Icon Position Left

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

FlexCards
Exercise Guide

Icon Size Small

7. Add an Omniscript Action to the menu to edit the account.

To add actions to the menu, use the + Add New Action button at the bottom of the
Properties panel.

a. Click + Add New Action.

b. Configure the Action Properties as follows:

Field Value
Label Edit Account

Icon action:new_account

Icon Position Right

c. Expand Action and configure the additional properties as follows:

Field Value
Action Type Omniscript

Omniscript team/editAccount/English

Context ID {AccountId}

Open Target In New Tab/Window

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

FlexCards
Exercise Guide

d. Click Save.

Once you save the action, find it in the Properties panel at the end of MENU PROPERTIES
and above the Conditions section.

8. Add an OmniScript Action to the menu for updating the account’s primary contact.
a. Click + Add New Action.
b. Configure the Action Properties as follows:

Field Value
Label Change Contact

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

FlexCards
Exercise Guide

Icon action:change_owner

Icon Position Right

Action Type OmniScript

team/UpdateAccountPrimaryContact/
Omniscript
English

ContextId {AccountId}

Open Target In New Tab/Window

c. Click Save.

Before you start styling the elements, preview the FlexCard.

9. Confirm the menu displays in Preview.

a. Click the Preview button in the FlexCard header.
b. Click the dropdown menu arrow. You see both actions you added to the
menu.

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

FlexCards
Exercise Guide

Notice the fields are very close together. This is because the elements are not yet
styled.

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