Set Up Conditions to a Flexcard Element

Apply conditions to Flexcards elements to show only relevant information to your users based on data field values. For example, on a Flexcard that summarizes the terms of a contract, only show reminder text when the contract renewal date is within a defined range.

1. From the App Launcher, find and select Flexcards.
2. Expand a Flexcard and select a version.
3. If needed, deactivate the Flexcard for editing the Flexcard.
4. Select the element to update.
5. Access the conditions settings depending on the element:
   • For non-action elements, open the element’s properties.
   • For actions on a menu element, add an action from the element’s properties.
   • For actions on an event listener, in the Setup options, add an event listener, and then select the action.
6. Under Conditions, add a condition.
7. For best performance, deselect Preload Conditional Component.
   By default, Omnistudio preloads all conditional elements on a Flexcard and adds them to the Document Object Model (DOM) or the rendered HTML. If the condition isn’t met, Omnistudio hides them with the CSS but still renders the element’s HTML. Preloading all elements and hiding those elements can add unnecessary wait time for the user to complete their task.

   For the block element, the Preload Conditional Component is enabled by default to ensure that all elements within the block load correctly.

8. Select a data field to evaluate, an operator, and a value to check against.
   1. To check against an empty value, enter undefined as the value or leave it empty.
   2. You can’t use a variable as the value, except for the Parent.attr context variable for a state element in a child Flexcard.
9. If needed, add more conditions and operators between the conditions.
10. If needed, build nested conditions by adding groups of conditions.

    A group is similar to enclosing a series of tests in parentheses in a programming language. For example, you want to add a condition for high priority cases that are either escalated or have an account whose revenue is above 500000. To do so, create two condition groups connected by an OR operator as [Priority = High AND IsEscalated = true] OR [Priority = High AND AnnualRevenue > 500000].

11. Save your changes.

Turn Off Preloading Conditional Components

You have a list of cases that your customer service reps can show or hide as needed. The Case object has a ShowInfo boolean field, set to false by default.

Your rep manages about 100 cases. If you hide the cases by using conditions, Omnistudio loads all the cases even if your rep doesn’t see them on the Flexcard, leading to potential performance issues.

Instead, display the case ID, status, and creation date. Wrap all other case information in a block element and hide it with a condition that displays the block only when ShowInfo is true. ShowInfo is a boolean value that comes from your data source and is set to false by default. Disable the Preload Conditional Component property.

• 1. Group all other case information in a block element.

  2. On the Flexcard, add the case ID, the status, and the creation date.

  3. To hide the block by default, add this condition:

     • Data Field: ShowInfo

     • Operator: =

     • Value: true

  4. Deselect Preload Conditional Component.

  5. Add two action buttons that your rep uses to control the display of the case information:

     • Show Case Info: Add a condition so that the button is visible when ShowInfo is false. When the rep clicks the button, the Flexcard updates ShowInfo to true.

     • Hide Case Info: Add a condition so that the button is visible when ShowInfo is true. When the rep clicks the button, the Flexcard updates ShowInfo to false.

  6. Deselect Preload Conditional Component for both actions.

  7. Preview the Flexcard.

For each case, the Show Case Info button is visible, and the Case Info block is hidden. When you inspect the code in your browser, confirm that the HTML code for the Case Info block and the Hide Case Info button aren't rendered.