Salesforce Docs Portal

Creating a Template with the Template Designer (Managed Package)

For the managed package runtime, customize the layout of a card state or card layout by creating custom templates for Omniscript elements or Cards Framework components with the Vlocity Template Designer.

To customize a template that already exists, see

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

Cloning a Template (Managed Package).

To create a new template:

  1. In your org, go to the Vlocity Templates tab, and click New to open the Template Designer.
  2. In the Template Name field, enter the name of your new template.
  3. To organize your templates into categories, click into the Template Type field to select from the available options, or enter the name of a new type.
  4. In the Template Author field, enter an author name that describes the team creating the content. The default author name is Vlocity Internal.
  5. Click Done.
  6. Enter your code in the code editors:

    • HTML: Enter your HTML here.

    • CSS: Enter your CSS and SASS styles here. Vlocity recommends using SASS.

    • JS: Enter your AngularJS here.

    To learn how the Template Designer supports HTML, CSS, SASS, and AngularJS, click Help.

    Help button
  7. (Optional) Click Edit to configure the following attributes and features of your template:
    Edit button

    • Description: Enter the description of your template.

    • Sample: Enter sample JSON data to preview your template. For example, add data for a card template from the card layout's data source.

      Sample section

    • Add Zone: Click to organize the display of your template by zones. For example, separate the header, body, and footer of your template into sections.

      Sample code Zones

    • Add Placeholder: Click to insert fields in your template. For example, add a Title to a card state to display when certain conditions are met.

      Sample code Placeholders
  8. Click Save.
    Note
    Note

    The asterisk next to the name of the template indicates that the template is not saved. To make changes save automatically, select the Auto Save checkbox in Settings. See Template Designer (Managed Package).

    Asterisk
  9. (Optional) To preview the template, click Preview. The template must have sample data in the Sample field of the Edit tab.