You are viewing the documentation for Blueriq 17. Documentation for other versions is available in our documentation directory.

Introduction

The Material theme is a front-end theme for the Blueriq Runtime based on Angular using the Blueriq Angular framework. The Material theme replaces the MVC UI Themes.

We introduced this theme to be able to:

  • decouple the frontend from the runtime so that development is easier and more flexible
  • use market standard technology so that we build on widely used, proven technology with a large community
  • set the customer in control for developing its own branding.

This theme can be used either as a kickstarter to base your theme on and extend it or to use as a reference implementation to know how to build such a theme for Blueriq.


Table of contents

Version

Since Blueriq 11.1 we do deliver a Milestone release of the theme in every minor version so customers could have a first look and can provide feedback. Since Blueriq 11.7 Blueriq Material theme has become the default theme.

Library
@blueriq/material

latest




Blueriq Material Theme

What is Material Design?

The Material theme is based on Material Design components for Angular. Material Design is created by Google and is more like a style guide for UI designs.

Quote: What is Material Design
 Google's design language and concept is based around the paper and ink process of traditional design and is intended to facilitate the best possible user experiences on Android devices. In particular it is used to denote, clearly for users, which parts of the screen can be used as touch interfaces with the operating system or applications.


Versions

Since Blueriq 11.1 we deliver Milestone versions of the Blueriq Material theme. Please see future releases of Blueriq 11 to get updated on new features added to the theme in each milestone. As long as the Material theme version is of type Milestone you should not use it in production environments. The purpose of Milestone versions are to give customers a chance to get an early look an provide feedback.

Enable the Material theme in the Blueriq Runtime

For Milestone usage you can activate the new theme by providing these properties to the application.properties of the Blueriq Runtime

### Angular material theme ###
blueriq.angular.active-themes=material
blueriq.angular.themes.material.template-group-file=UI/angular/material.stg
blueriq.angular.themes.material.template-name=redirect

After setting these properties and restarting the Blueriq Runtime you can start a project in the newly added theme by selecting it in the Blueriq Runtime Development Dashboard



The following deployment of the Material theme is advised: Angular#AngularinProduction

Blueriq Material Design as a kickstarter for a custom theme

For further details on how to achieve this please check out:

2 Comments

  1. Daan Rijkers

    From Blueriq 13.0 and upwards, when using the proposed value for the 'blueriq.angular.themes.material.template-group-file'-property, the runtime will give an error saying: "Could not find 'UI/mvc/v2/material.stg'."

    In Blueriq 13 the material.stg has been moved, and so the value of the property should be set to 'UI/angular/material.stg'.


  2. Peter Artz

    Changed the location of the stg on this wiki page. We had the same issue but did not see the comment from Daan immediately.

Didn't find the answer you were looking for? Try the advanced search!