Creating a Card Layout Using Card Designer (Managed Package)

For the managed package runtime, create a card layout to build visual components to your customer interactions by adding data, enabling actions, and using custom or Vlocity templates to determine the look and feel.

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

Note

Beginning with the Vlocity Summer '19 release, Vlocity supports Salesforce's Lightning Web Components programming model with Vlocity Lightning Web Components. Vlocity Lightning Web Components include components, functionalities, and templates exclusive to LWC Cards. To enable LWC on a card layout, see Creating an LWC Card Layout (Managed Package).

To create a card layout:

1. Open the Vlocity Card tabs, and click New.
2. Enter a unique Layout Name and follow Vlocity required naming conventions and best practices. See Card and Card Layout Naming Conventions (Managed Package).
   

   Note

   Beginning with Vlocity Insurance and Health Spring '20, when creating a card or layout, the name and author must only contain underscores and alphanumeric characters. It must be unique, begin with a letter, not include spaces, not end with an underscore, and not contain two consecutive underscores. Existing layout names and card names are automatically updated to make them compliant. New cards and layouts can not be saved without following these naming requirements.

3. Select Layout from the Layout Type dropdown.
   

   Note

   To create a Flyout, see Creating a Flyout (Managed Package).

4. (Optional) Update the author in the LayoutAuthor field. See Understanding the Author of a Card Layout (Managed Package).
5. In the Template dropdown list, select a template, such as card-canvas-3x-slds to display cards in a 3 column layout. See Base UI and Card Templates (Managed Package).
6. Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, Vlocity Cards supports limiting user access to a card layout by entering a comma-separated list of custom permissions in the Required Permissions field. For example, enter Can_Edit_Card,Can_View_Card to only allow users with at least one of these custom permissions to see the card layout. If this field is left empty, any user can see the layout. See Custom Permissions.
7. To configure card layout attributes, click the Add Session Variables button to enter a variable Name and Value. For example, the layout template cardCanvasLayout has a configurable attribute called title, which adds a title to the top of the layout. Enter title in the Name field and a value for the title such as List of Accounts in the Value field.
8. Select a data source for the layout in the Data Source field.

   The data source holds the master query that returns results in a JSON structure for cards in the layout. For example, you might query every policy associated with an account, then create a card for each policy type. For more information on how to configure a data source and to see a complete list of data sources, see Configuring Data Sources.

   

   Note

   Cards can have data sources different from the layout data source.

9. After configuring your data source, to test data returned, click the +Add Test Variables button in the Test Data Source Settings section. Enter values for these properties:

   • Name: Enter the name of the variable to test, such as params.id. This gets the ID in a page parameter for a record, such as an account record ID.

   • Value: Enter the value of the variable. For example, the account ID found in the URL parameter of an account record.

10. To use metatags to enable search engine optimization (SEO) options in your metadata, click +Add Metatags. The metatags feature enables the layout to write metatags to a page header. Available card metatags are:

    • author

    • description

    • keywords

    • viewport

    The metatags are inserted after a layout or card loads, whether or not the data source is set.

    Vlocity recommends that you replace metatags with the same name. Do not duplicate metatags. Web crawlers ignore duplicate tags.

11. Click View Data to display the query results in JSON.
12. Click Activate.
    After editing a layout, activate it before you leave the Card Designer. If you attempt to use an inactive layout, the layout throws this error: Error: There is no active instance of Layout Name: layout.