Themes¶

Introduction to Themes¶

Themes are the style part of the page. The Theme files allow you to create themes that can be utilized within the organization. You can define the themes in the drag-and-drop designer.

There are two types of themes in the platform:

Internal: Internal themes allow you to design the theme by providing the colors and styles.

External: External themes are those themes that are created using JS files and uploaded. For Views currently there are Default theme, Light theme, and Light Dark theme. You can use any external library files from bootstrap or any other repo and upload the whole structure as external theme. Along with library files, you can create and use your own CSS and Javascript that overrides any particular scenario as applicable.

Viewing Themes List¶

1. Click the Burger menu on the top-left of the Platform.

2. Click Management.

   
   3. Click Theme And Template Management and then click the expand arrow of the left side menu to expand the left menu panel and view the categories within. 4. Click Themes. The list of themes available for the organization appears on the center panel.

   
   

Creating a New Theme¶

From the designer, the combination of CSS and JS is taken and loaded as the theme.

1. Click the Burger menu and navigate to Management > Theme And Template Management > Theme. The list of all themes appears.

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

   
   

3. Enter details as explained below.

   Field	Description
   Name*	Enter a name for the Theme.
   Display Name*	Enter a display name for the theme.
   Type*	Select the theme Type. External : To upload external theme files (library files. E.g., bootstrap files). When you choose the type as External, Library CSS Files, Library JS files, CSS Files, and JS files selection fields appear for selecting the external files. Library CSS and JS files are those theme files that you upload in the Management > Resource Library . Library CSS Files : Click and select the required CSS files. Type the file name to view the path of the file and you can select the required files. Library JS Files : Click and select the required JS files. CSS File : Select the required CSS files. The scenario in this file will override the scenario in the Library CSS File as applicable. JS File : Select the required JS Files. The scenario in this file will override the scenario in the Library JS File as applicable. - The order of the files uploaded is important as the content of a file will override the applicable content in the previous files. Internal : To design a theme using the platform theme builder (Upcoming).
   Icon	- Click inside the dotted area below the icon . The Explorer window opens. Select the required icon file from any folder. 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). - 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 a description of the theme.

4. If you select type as external, click Create to create the theme. If you select type as internal, design the theme and then click Create to create the theme.

The theme gets created and it gets listed in the Theme section.

Viewing and Editing Theme¶

1. Click the Burger menu and navigate to Management > Theme And Template Management > Theme. The list of all themes appears.

2. Click a Theme name card. The details appear on the Property panel on the right side.

   
   

Exporting a Theme¶

1. Click the Burger menu and navigate to Management > Theme And Template Management > Theme. The list of all themes appears.

2. Click the Theme name that you want to export. Export appears on the bottom right.

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

   !The Export option in More Actions](./Themes_V6.1_2.1/image16.png "The Export option in More Actions")
   

3. Click Export. The theme gets exported to your local system.

Importing a Theme¶

You can import the package into the Themes section.

1. Click the Burger Menu on the left of the Platform logo and navigate to Management > Theme And Template > Theme. The list of all Themes in the platform appears.

   
   

2. On the upper right click Import.

   
   

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

   
   

   • Override All: Select Override All to override all the existing themes.

4. Click each accordion section to view the details of all the files that are associated with this theme. It means that when you import a theme all the associated files also get imported to the platform.

5. Click Import. A Success message appears on successful import of the file.
6. Click Close. The file is imported to the platform.

Publishing the Theme¶

You can publish a theme for utilizing that theme. You cannot edit a theme in the Published Theme section.

1. Click the Burger menu and navigate to Management > Theme And Template Management > Theme. The list of all themes appears.

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

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

   
   

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

Deleting Theme¶

1. Click the Burger menu and navigate to Management > Theme And Template Management > Theme. The list of all themes appears.

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

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

   
   

3. Click Delete. The theme gets deleted.

Viewing Published Theme List¶

• Click the Burger menu and navigate to Management > Theme And Template Management > Published Theme. The list of all published themes appears.

  
  

Viewing Details of Published Theme¶

1. Click the Burger menu and navigate to Management > Theme And Template Management > Published Theme. The list of all published themes appears.

2. Click a theme name. The details of the published theme appear on the About Published Theme on the right side.

   
   

Downloading Published Theme CSS / JS Files¶

You can download the CSS and JS files that are uploaded for the theme.

1. Click the Burger menu and navigate to Management > Theme And Template Management > Published Theme. A list of all published themes appears.

2. Click a theme name. The details of the published theme appear on the About Published Theme on the right side. The list of all CSS files and JS files selected will appear along with a download icon adjacent to it.

   
   

3. Click the download icon of the file that you need to download. The file gets exported to your local system.

Theme Utilization Web App Views¶

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

1. Click the Burger menu and navigate to App Studio > Create App > Web App – Create Web App.

   
   

   Info

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

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