Skip to content

Template

Templates allow you to create a structure or framework of the page that can be utilized for creating a web app view page. Map a template to the web app view configurations.

There are two types of templates in the platform:

  • Internal: Internal templates allow you to design the template structure.
  • External: External templates are those templates that are created using JS files and uploaded.

Viewing Templates List

  1. Go to Main Menu > Management > Theme And Template Management.
  2. Click the expand arrow of the left side menu to expand the left menu panel and view the categories within.

  3. Click Template. The list of Templates available for the organization appears on the center panel.

    Templates List

Creating a New Template

  1. Go to Main Menu > Management > Theme And Template Management > Template. The list of all Templates appears.

  2. Click Create New (top-right). Create Template appears on the right panel.

    Creating New Template

  3. Enter details as explained below.

    Field Description
    Name* Enter a name for the Template.
    Application Type* Select the required application type. Web App is default.
    Application Type
    CSS Files Type the name of the CSS file and select the appropriate file. Select multiple CSS files and it will be listed in the field.
    JS Files Type the name of the JS file and select the appropriate file. Select multiple JS files and it will be listed in the field.
    Icon - Click inside the dotted area below the icon . The Explorer window opens. Select the required icon file from any folder.
    Icon
    Or
    - Drag an icon - from any location/folder - into the marked area.
    - Image file formats supported are PNG, JPEG, and JPG.
    After uploading the icon, Download and Remove are displayed along with the icon file name (file name of the uploaded image).
    Icon
    - Click Download to download the icon.
    - Click Remove to remove the icon
    To update a new icon, remove the icon and repeat the steps mentioned above.
    Description Enter description about the Template configuration.

  4. Click More.

    Template details

  5. Enter your code for the template in the editor. The code should be in the HTML format. Copy and paste your custom HTML code into the editor.

    Mandatory code

    Sample template code
    Sample template code

    Note

    There are some mandatory codes from the platform side that are to be included in the template file as indicated in the above images. These are default CSS that is loaded when you drag and drop a component to the designer.

  6. Click Create. The Template gets created and it gets listed in the Template section.

Viewing and Editing Template

  1. Go to Main Menu > Management > Theme And Template Management > Template. A list of all Templates appears.

  2. Click a Template name card. The properties appear on the Property panel on the right side.

    Viewing Template details

  3. Click More on the bottom right to view the template design details.

    Template design details

  4. Edit the details in the code (in HTML) as needed. Write template code details using the predefined system variables.

  5. Click Save to save the details (or click Cancel to discard the changes and return to the previous page)

Importing a Template

Import a Template package into the Template section.

  1. Go to Main Menu > Management > Theme And Template Management > Template. The list of all Templates appears.

    Import template

  2. On the upper right click Import.

    Importing template - file selection

  3. Click Choose File and select the file (in .pkg format) that you want to import. The selected template details appear.

    Import template options

    Note

    When you import a template all the associated files also get imported to the platform.

  4. Click Import. A Success message appears on successful import of the file.

    Import Template success message

  5. Click Close. The file is imported to the platform.

Exporting a Template

  1. Go to Main Menu > Management > Theme And Template Management > Template. The list of all Templates appears.

    Exporting Template

  2. Click Export. The template file is exported (downloaded) to your local system.

    Or hover over the template name card and click three dots (More Actions) to click Export.

    Exporting the template in More Actions

Deleting a Template

  1. Go to Main Menu > Management > Theme And Template Management > Template. The list of all templates appears.

  2. Click the Template name that you want to delete. Delete appears on the bottom right.

    Delete option

    Or hover over the template name card and click three dots (More Actions) to click Delete.

    Delete option in More Actions

  3. Click Delete. The template gets deleted.

Publishing the Template

Publish a template for utilizing that template. You cannot edit a template in the Published Template section.

  1. Go to Main Menu > Management > Theme And Template Management > Template. A list of all Templates appears.

  2. Click the Template name that you want to publish. Publish appears on the bottom right.

    Publish option

    Or hover over the template name card and click three dots (More Actions) to click Publish.

    Publish option in More Actions

  3. Click Publish. The Template gets published. When you publish a Template, the published Template appears on the Template > Published Templates section with the same name.

    Warning

    If you publish a Template that is already published, it will overwrite the already existing published Template. The Published Templates will be available in the platform for utilization.

Viewing Published Template List

  • Go to Main Menu > Management > Theme And Template Management > Published Template. A list of all published Templates appears.
    Published Templates

Viewing Details About Published Template

  1. Go to Main Menu > Management > Theme And Template Management > Published Template. A list of all published Templates appears.
  2. Click a Template name. The details of the published Template appear on the About Published Template on the right side.

  3. Double-click the Template name card (or click More). The code details of the template appear.

    Published Template details

  4. Click Cancel to close the template details.

Using Templates in Web Apps

Templates can be utilized in Web App Views. You need to publish the templates for accessing it in the web apps.

  1. Go to Main Menu > App Studio > Create App > Web App – Create Web App.

    Templates in Web Apps Configuration

    In the Create Web App configurations, the Theme And Template section lists all the themes and templates created in the Management > Theme And Template Management > Published Template.

  2. Select the required template for creating the web app. The selected template gets applied to the view.