Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Warning
titleDeprecated

MVC UI is deprecated from Blueriq 11.0. The alternative for the MVC UI support is to only use the UI REST API  endpoints.

 


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

...

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:

...


DescriptionLocation
Index fileStringTemplate index file

JAR or

Include Page
_ConfigLocation
_ConfigLocation

Web resourcesJavaScript, CSS, images, etc.

JAR or

Include Page
_ConfigLocation
_ConfigLocation

Configuration

Properties in the

Include Page
_PropertiesFileJava
_PropertiesFileJava
file

Include Page
_ConfigLocation
_ConfigLocation

Getting started

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

A default Blueriq index page is injected with a template context that features the following properties:

Variable TypeDescription
context.sessionId
string
Blueriq Session ID of the current Blueriq session
context.theme
string
Current theme of the Blueriq session
context.webResourcesBasePath
string

Location from root where web-resources are located

context.apiBasePath
string

Relative path of API endpoints, always "../api/"

context.currentPage
{ [elementKey: string]: Element }
Full pageModel, see REST Page Models
context.developmentMode
boolean
Indicates if developmentMode is active or not
context.sessionTimeout
integer
Session timeout in seconds

Creating the index file

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 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.

...

  1. Create a UI/mvc folder in 
    Include Page
    _ConfigLocation
    _ConfigLocation
     and put the custom index file (for 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 /css sub folders).
  3. Add a configuration section for your custom theme to 
    Include Page
    _PropertiesFileJava
    _PropertiesFileJava
     in 
    Include Page
    _ConfigLocation
    _ConfigLocation
     root, as described in the Configuration section below..

...

  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.
  2. 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:

...

Info

Working with multiple themes is possible by adding comma separated theme names to the mvc.themes property..

...

Code Block
languagetext
titleProperties for registering a custom theme in .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 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 

Include Page
_ConfigLocation
_ConfigLocation
/Configuration folder. When a file name is specified which is located in 
Include Page
_ConfigLocation
_ConfigLocation
/Configuration and that is already loaded from a JAR, the file from 
Include Page
_ConfigLocation
_ConfigLocation
/Configuration will be used and the file from the JAR/DLL will be overridden.