--- schema_version: "1" id: f275f1ec1e5c1c53243c3b2bbe2abadfd7edb3f79944d68bbf8ace96727f3af2 title: Creating a Template with the Template Designer (Managed Package) collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_creating_a_template_with_the_template_designer.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_creating_a_template_with_the_template_designer.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 15a77540668de24939cfd92460052c07ec28cda20c386af084c6de4b8d191b58 description: 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. products: - Omnistudio release: "264" --- # 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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US). [Cloning a Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_cloning_a_template.htm&release=264.0.0&type=5 "For the managed package runtime, edit a template without overriding existing code and settings by cloning an Omniscript element or Cards Framework component template with the Template Designer."). 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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/template_designer_help_link.png) 7. (Optional) Click **Edit** to configure the following attributes and features of your template: ![Edit button](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/edit_template_designer_template.png) - **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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/template_sample.png) - **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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/zone_html.png) ![Zones](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/template_add_zone.png) - **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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/html_placeholder.png) ![Placeholders](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/edit_add_placeholder.png) 8. Click **Save**. ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png) 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)](https://help.salesforce.com/s/articleView?id=xcloud.os_template_designer.htm&release=264.0.0&type=5 "For the managed package runtime, Vlocity Templates provide the structure for Omniscript elements and Cards Framework components, such as a layout that includes the associated cards and card states. The template enables you to work directly with HTML to provide organizational structure, CSS/SASS to provide style, and AngularJS to loop through data from data sources."). ![Asterisk](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/save_template.png) 9. (Optional) To preview the template, click **Preview**. The template must have sample data in the **Sample** field of the **Edit** tab. - **[Import a Template with the Template Designer (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_creating_a_template_with_the_template_designer_1.htm&release=264.0.0&type=5)** For the managed package runtime, import a Vlocity Template from a DataPack.