...

...

...

Table of contents

Subpages

Getting started

Blueriq provides an API for interacting with a Blueriq session and obtaining page changes, see UI REST API for documentation on all endpoints and their request/response bodies. This section describes the theming possibilities that may be used to let Blueriq serve a context-dependent page, configured according to the theme/language settings of e.g. shortcuts.

Key benefits MVC UI

Modern web application architecture

• Provides clean separation of concerns (SoC)

• Easy integration with JavaScript frameworks

• Enables the full control over the rendered HTML

• Less server load

Better User experience

• Single page
• Partial updates
• More responsive user experience
• Easy integration with UI libraries
• Responsive web design

Guidelines

The following guidelines are advised while developing a custom theme for the Blueriq MVC UI.

• Single page oriented application design
  • Separate content in small relevant blocks of information, only deliver relevant and valuable content.
  • Use conditions to show only context relative information
    
    
• Page model size constraints
  • A large page model can have significant impact on the performance of the frontend. It is especially advised that lists/tables, which have a large page model representation, are limited to 10-20 items per page.
  • The performance on mobile devices strongly differs per device, having a small page model is even more important here.

Initial Page

Both default Blueriq themes come with an initial page (forms.stg and dashboard.stg). 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.

The default initial pages are HTML files which are created using the StringTemplate template engine. The main template file is expected to:

• Be a template group file (.stg), meaning multiple templates can be used and referred to.
• Have the context parameter, the name of the main template can be configured.

The context parameter can contain the following properties:

• theme: The name of the current theme
• apiBasePath: The path to the root of the web api
• webResourcePath: The path to the root of the webresources
• extensions: The extension context with the following properties:
  • cssExtensionUrls: List of custom css files
  • jsExtensionUrls: List of custom javascript files
• sessionId: The id of the current session
• currentPage: Content object of the current page
• currentPageJson: Current page serialized in json form
• isDevelopmentMode: Indicator whether the development mode is activated.
• sessionTimeout: session timeout in milliseconds

After the initial page is loaded the MVC UI retrieves its data via the REST API. This data is transformed using the KnockoutJS MVC framework.

Configuration

...

mvc.themes=forms,dashboard
mvc.forms.templateGroupFile=UI/mvc/forms.stg
mvc.forms.templateName=main
mvc.dashboard.templateGroupFile=UI/mvc/dashboard.stg
mvc.dashboard.templateName=main
mvc.developmentMode=true

...