Adding a State to a Card (Managed Package)

For the managed package runtime, add card states to display data fields from the card or card layout data source, to present different interactions and layouts based on specified conditions, to add actions, and to add flyouts to display additional information about a record. For example, for cards displaying past due policy information, use a card state template, and display actions, fields, and flyouts different from those on cards displaying information for active policies in good standing.

1. In your org, click the App Launcher, click Vlocity Cards, and click a version of a card layout to open the Card Designer.
2. In the Cards pane, click the black arrow on a card to expand it.
3. In the States pane, click + Add State.
   

   Tip

   When adding multiple states with similar settings, click the Clone State icon to create a copy of the card state. The cloned card state appears below the original card state.

4. (Optional) To create a card state to display when there are no records available, select the Blank Card State checkbox. For example, if an Account or Contact does not have an insurance policy, create a state with a card-open-slds template to display a linked action to add a policy.
5. (Optional) Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, if your card is LWC enabled, select the Custom LWC checkbox to embed any Vlocity Lightning Web Component inside an LWC card state. See Embedding a Vlocity Lightning Web Component Inside an LWC Card State (Managed Package)
6. In the Name field, enter the name of the state, such as Active Policy.
   

   Note

   The state Name is for internal use and does not appear on the card.

7. Select a card state template:

   • To select a card state template for an Angular card:

     • Select a template from the Template dropdown, such as card-active-slds. See Base UI and Card Templates (Managed Package).

   • To select a card state template for an LWC enabled card:

     • Select a template from the State LWC dropdown, such as card-active-state. See Base LWC Card and Layout Templates (Managed Package).

   

   Note

   If you want to display data fields, only actions, or both, choose the appropriate template. Some card templates display only actions, only data fields, and both.

   For example:

   • Select card-active-slds for an active card, such as a policy card that displays policy information and related actions.

   • Select card-open-slds for a Blank Card State, such as a policy card that only displays a Create New Policy action link for an Account or Contact without a policy.

8. (Optional) If the selected template has a placeholder, see Adding a Placeholder to a Card State (Managed Package).
   

   Note

   Your card state template must have a placeholder merge field. See Creating a Placeholder (Managed Package).

9. To add data fields:

   1. Select a field from the Fields dropdown, and click Add.

      

      Note

      Fields come from the layout data source unless the card has its own data source.

      

      Important

      If you do not see a list of available data fields, click View Data in the Card pane or the Layout pane, whichever has the data source configured.

   2. (Optional) To enter a field not listed in the dropdown, but that does exist in your data source, select <<Custom Field>>, and click Add For example, if the current record used in the Test Data Source Settings does not have a Description in the JSON schema, but is available in the associated Omnistudio Data Mapper, the new field may not display in the Fields list.

   3. (Optional) If you selected <<Custom Field>> from the Fields dropdown, in the first column, enter the name of the field, such as ['Policy Description'].

   4. To update the field type, in the middle column, delete the default string, and choose from the available types in the picklist. For example, if the field is a date, select date.

   5. To update the visible label of the field, in the last column, enter a label. For example, if the field is ['Created Date'], enter Policy Created.

10. (Optional) To add actions to the card state, see Using Actions with Cards (Managed Package).
11. (Optional) To add a flyout to display additional information about the record displayed on the card, see Adding a Flyout to a Card State (Managed Package) or Creating an LWC Flyout (Managed Package).
12. (Optional) To set conditions that must be met for the card state to be visible, see Adding Conditions to a Card State (Managed Package) .
13. To preview the card, and check that card states are working as expected, click the Preview tab.
14. Click Activate on each card.

• Adding Conditions to a Card State (Managed Package)
  For the managed package runtime, set conditions to determine which card state is displayed on a layout or to change appearance based on conditions. For example, on a card that displays policy information, one card state shows action links to update profile and account information for all policies, while another card state includes a renew action link if the policy is about to expire.