Add Conditions to a Flexcard Element (Managed Package)

For the managed package runtime, display or hide data based on the value of a data field. For example, display an alert icon or supplemental text for escalated Cases. Apply conditions to any element listed in the Build panel of the Flexcard Designer.

This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

Applying conditions to a state works differently than with other elements. See Add Conditions to a Flexcard State (Managed Package).

Beginning Winter '22, apply conditions to an action on an event listener or individual actions on the Menu element.

Important

Applied conditions are visible in Preview only.

1. From the Flexcards tab, click a version of a Flexcard to open the Flexcard Designer.
2. Depending where you add a condition, perform one of the following tasks.

   • To add a condition to an element, select the element from the canvas and click +Add New next to Conditions in the Properties panel.

   • To add a condition on an action on an event listener, click Setup, click + Add New in the Event Listener section, and click +Add New next to Conditions.

   • To add a condition to an action on a Menu element, select a Menu element on the canvas. In the Properties panel select an action to edit (or click + Add New Action), and click +Add New next to Conditions.

3. (Optional for conditions applied to an Element) Beginning Winter '22, deselect the Preload Conditional Component checkbox to improve performance on conditional elements.

   By default, all elements on a Flexcard are preloaded. They’re added to the rendered HTML and, if the condition is false, are hidden with CSS. See Disable Preload on Conditional Elements (Managed Package).

   If the condition returns false, the element isn’t rendered in the HTML.
4. Click + Add Condition.
5. Create basic conditions.
   1. Click Data Field, and from the list of data fields, select a data field to filter.
      For example, select Status for a Case record.
   2. To define the relationship between the data field and a value, select the Operator from the dropdown, such as =.
   3. In the Value field, enter the value to check against. For example, enter Escalated. Variables aren’t supported.

      Only the Parent.attr context variable is supported for conditions on a State element in a child Flexcard.

      

      Note

      To check against an empty value, enter undefined as the Value or leave Value blank.

   4. If adding another condition, click + Add Condition and select AND or OR between conditions.

      Select AND if all conditions must be met. For example, Status is Escalated and Priority is High.

      

      Note

      If you have only one condition, that condition must be met to display cards.

      Select OR if any condition can be met. For example, Status is Escalated or Priority is High.

      

      Note

      If you have only one condition, that condition doesn’t need to be met to display cards.

6. If needed, build nested conditions.
   1. Click + Add Group after creating a condition.
   2. Click + Add Condition and enter values for all fields for each condition.
   3. Select AND or OR from the dropdown between conditions.

• Disable Preload on Conditional Elements (Managed Package)
  For the managed package runtime, improve performance on Flexcards with conditional elements by removing hidden elements from the Document Object Model (DOM), or the rendered HTML. By default, all elements on a Flexcard are preloaded, which means they’re added to the DOM and then, if the condition is false, are hidden with CSS. The element's HTML is still rendered.
• Flexcards Conditions Properties (Managed Package)
  For the managed package runtime, the properties for conditions are configurable for all elements in the Properties panel in the Flexcard Designer. Conditionally display Flexcard elements based on the value of a data field.