You are here:
Add Elements to a Flexcard (Managed Package)
For the managed package runtime, add data fields, states, actions, and other elements to your Flexcard. Style an element and configure its properties in the Flexcard Designer.
This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.
Beginning Winter '22, add Input elements on a Flexcard to enable users to enter data or select from a list of options you provide. Configure an action to update the data source with the user selected data.
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 (Managed Package).
Before You Begin
-
Create a Flexcard, and configure basic settings and a data source. See Create a Flexcard (Managed Package).
-
Configure Setup options as needed. See Flexcard Setup Reference (Managed Package).
- From the Flexcards tab, click a version of a Flexcard to open the Flexcard Designer.
-
(Optional) To adjust the width of the canvas while building your Flexcard, select
a size from the canvas size dropdown. See Flexcards Element Responsiveness (Managed Package).
-
To add an element to a state from the Build panel, perform one of these tasks:
-
To add an element from a search:
-
In the search field, enter the name of an element, such as Action. You can also search for a specific Field element generated from your data source and available in the Fields section of the Build panel. For example, if your data source returns data field named Email, search for the Email Field element.
-
Drag the element from search results into a state on the canvas.
-
-
To add an element from the lists of available elements:
-
To add data fields, perform one of these tasks:
-
Click Fields, to view 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 on the canvas.
-
-
To add a display component such as an Action, drag the element from the Elements list into a state on the canvas. See Flexcards Display Elements Reference (Managed Package).
-
Beginning Winter '22, to add an input component such as a Typeahead, drag the element from the Inputs list into a state on the canvas. See Flexcards Input Elements Reference (Managed Package).
-
NoteWhen you drag an element next to another element, it takes up the remaining width 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 takes up the remaining 2 columns. See Flexcards Element Responsiveness (Managed Package).
-
-
To configure the element, click the element to update its properties from the
Properties panel.
TipTo easily distinguish between elements, update the Element Name. When you hover over or click an element on the canvas, the element name is viewable in a blue tab with white text.
Beginning with the Summer '21 release, hover over the element to see its name.
-
(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.
NoteTo make the width of the element responsive to the viewport, see Create Responsive Elements on a Flexcard (Managed Package).
- (Optional) To style your element, click Style to open the Style panel, and see Style Flexcard Elements (Managed Package).
- (Optional) To add conditions that must be met for the element to display, see Add Conditions to a Flexcard Element (Managed Package).
-
(Optional) To add another state, drag the State element from the
Elements list in the Build panel onto the canvas, and
follow steps 4 through 7. See Add a State to a Flexcard (Managed Package).
Note
Each Flexcard has a default state that can’t be deleted.
- To rearrange, duplicate, or delete elements, see Arrange, Duplicate, and Remove Elements on a Flexcard (Managed Package).
What’s next: Preview your Flexcard. See Preview a Flexcard (Managed Package).
- Flexcards Common Display Element Properties (Managed Package)
For the managed package runtime, 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.
