Page History

A custom MVC UI theme can be created if the use of default Blueriq themes is not desired.

Introduction

The MVC UI has two default themes (bootstrap3 and bootcards) and has support for custom made themes. A theme is basically a set of files and some configuration that consists of the following components:

...

...

The base of a theme is the index file from which the main page is built. Blueriq uses a template engine called StringTemplate to  to make server properties available in the client.

...

The index file is the starting point of a custom theme and is a StringTemplate template that follows a certain structure. For full details on the StringTemplate syntax and usage please check the official official documentation. The purpose of the initial page is to load all the required resources (e.g. JavaScript or CSS files) and to provide a base layout.

...

First the delimiters to use around StringTemplate variables are set to "$" instead of the default "<" ">" delimiters to be able to use variables within HTML. StringTemplate uses a function call to generate the template: main(context). The context object that is passed with this function call contains all properties as described above. In the function body (between "<<" and ">>") the actual index page is placed, which is a full HTML page.

...

Save the custom index file as a a .stg file  file so it is recognized by StringTemplate.

...

Installing your custom theme is easily done by putting all files in the 

Java

1. Create a a UI/mvc folder in  folder in 

   Include Page
   _ConfigLocation _ConfigLocation

    and put the custom index file (for example example custom_dashboard.stg) here.
2. Create a webresources/mvc folder in 

   Include Page
   _ConfigLocation _ConfigLocation

    and put the JavaScript and CSS files here (optionally in /js and  and /css sub  sub folders).
3. Add a configuration section for your custom theme to to 

   Include Page
   _PropertiesFileJava _PropertiesFileJava

    in 

   Include Page
   _ConfigLocation _ConfigLocation

    root, as described in the Configuration section below.

.NET

1. Create a UI/mvc folder in the Configuration folder in the .NET webapp installation and put the custom index file (for example custom_dashboard.stg) here.Create a webresources/mvc folder in the 

Configuration

...

...

Configuration

In order to configure your theme so it will be known by the Runtime several properties must be set. The following example shows properties for registering a theme named "custom_dashboard" in both Java and .NET:

...

...

 <ui>
  <mvc developmentMode="false">
	<themes>
	  <theme name="custom_dashboard" templateGroupFile="UI/mvc/custom_dashboard.stg" templateName="main"/>
	</themes>
  </mvc>
</ui>

The mvc.themes or  or name property specifies the name for the theme which will be displayed in the Runtime theme selector. The other two properties specify which StringTemplate index file should be used and which StringTemplate function should be called to render the index page (see "Creating the index file" above). The path to the index file is relative to either the JAR/DLL or the