Page History
This page consists of all that needs to be done to migrate from MVC to the Material Theme
| Table of Contents |
|---|
Presentation styles
(TODO: removed presentation styles)For many presentation style a more broader name has been chosen, so its usage can be more versatile. For instance the presentation style 'Transparent' currently is used to display containers background as transparent but could also be used to display other components as transparent
Below you see a list of all the legacy presentation styles and their new counterparts. The old legacy presentation styles will become deprecated in Blueriq 12.0
Legacy Presentation Style
Presentation Style
Warning Is used to change the background color and color of a text item. Styles Autocomplete
LargeText
AlignRight
Horizontal
Styles
Radio
Animation
StatisticPie
StatisticBar
StatisticDoughnut
StatisticRadar
StatisticLine
StatisticPolar
toggle Toggle Styles
icon_exclamation_sign
Styles
info
Styles icon_remove
Styles
_circle
Styles icon_time
Styles icon_warning_sign
Styles icon_signout
Styles icon_file
Styles
_pdf
Styles
image
| Type | New |
|---|
| (Material) | Legacy (MVC) | Description | Section | |
|---|---|---|---|---|
| General | Button | - | Is used whenever something is displayed as a link and it must be displayed as button instead. (for instance: Document link) | Styles |
| FlatButton | button_link | Is used to display buttons without having a border and a transparent background | Styles | |
| Introduction | - | Displays containers as transparent with a small image in the top left corner | Styles | |
| Transparent | - | Displays containers as transparent. | Styles | |
| Accent | - | Displays buttons with a secondary chosen color. Can be used versatile. | Styles | |
| Tertiary | - | Displays buttons with a tertiary chosen color. Can be used versatile. | Styles |
| Autocomplete | - | Can be used on a single-valued domain-list to have auto completion on a select. Can be used in combination with multi-valued attributes to have a auto completion on a chiplist | Styles | |
| LargeText | memo |
| Displays a input field as text-area | Styles | |
| AlignRight | align_right |
Displays a container relative to its parent container on the right. | Styles | ||
| Horizontal | options_horizontal | Displays the content of a container horizontally. Display the domain as horizontal |
options. | Styles |
| Vertical |
| options_vertical | Display the domain as vertical |
options. | Styles | |
| Animation | animate |
| Can be used to animate statistic charts (like pie, bar etc.) | Styles | |
| StatisticPie | pie |
| Displays a pie chart | DashboardStyles | |
| StatisticBar | bar |
| Displays a bar chart | DashboardStyles | |
| StatisticDoughnut | doughnut |
| Displays a doughnut chart | DashboardStyles | |
| StatisticRadar | radar |
| Displays a radar chart | DashboardStyles | |
| StatisticLine | line |
| Displays a line chart | DashboardStyles | |
| StatisticPolar | polar |
| Displays a polar chart | DashboardStyles |
| Switch | toggle | Displays a checkbox as a slide toggle | Styles | |
| Weight<number> Example: Weight7 | - | Within a `Horizontal` container, children can have presentation styles like `Weight<number>` If you have a child with `Weight3` and another child with `Weight1`, the total weight number would be 4. The first child will take 3/4th of the available horizontal space and the second child would take 1/4th. | DashboardStyles | |
| Icons | OnlyIcon | only_icon | Displays only a icon when used on a button. | Style |
| icon_exclamation_circle *1 |
| icon_ |
| exclamation_sign | A font Awesome icon; can be used in buttons and containers as prefix for display name | Styles |
| icon_info_circle *1 |
| icon_info_sign | A font Awesome icon; can be used in buttons and containers as prefix for display name | Styles |
| icon_times *1 |
| icon_remove |
| A font Awesome icon; can be used in buttons and containers as prefix for display name | Styles | |
| icon_times_circle *1 |
| icon_remove_circle | A font Awesome icon; can be used in buttons and containers as prefix for display name | Styles |
| icon_clock_o*1 |
| icon_time | A font Awesome icon; can be used in buttons and containers as prefix for display name | Styles |
| icon_exclamation_triangle*1 |
| icon_warning_sign | A font Awesome icon; can be used in buttons and containers as prefix for display name | Styles |
| icon_sign_out*1 |
| icon_signout | A font Awesome icon; can be used in buttons and containers as prefix for display name | Styles |
| icon_file_o*1 |
| icon_file |
| A font Awesome icon; can be used in buttons and containers as prefix for display name | Styles | |
| icon_file_pdf_o*1 |
| icon_file_ |
| A font Awesome icon; can be used in buttons and containers as prefix for display name | Styles | |||
| icon_file_image_o*1 | icon_file_image | A font Awesome icon; can be used in buttons and containers as prefix for display name | Styles |
*1 : These icons represent font-awesome icons. This is without the prefix icon_ x and the lower-dash are upper-dash. Example:
- Fontawesome icon:
exclamation-signin studio becomes in Encore becomes:icon_exclamation_sign
Content Styles
TODO - changed/added/removed content styles + counterparts old/new (if any)In the MVC dashboards were always displayed on full screen. This now has been changed to by default always be responsive.
If you desire to have the same behavior you must add the following content style to your page: fullFor completeness, these are all the possibilities:
| Library | New Presentation Style | Description |
|---|---|---|
| BlueriqTheme | Responsive | The width of the content on the page is dependent on the width of the window. (default) |
| BlueriqTheme | Small | The content on the page is narrow. (maximum width is 512 pixels) |
| BlueriqTheme | Medium | The content on the page is medium. (maximum width is 768 pixels) |
| BlueriqTheme | Large | The content on the page is large. (maximum width is 1024 pixels) |
| BlueriqTheme | Full | Content on the page should take the full width. |
Modeling best practices
In this paragraph we describe some situations that have to be modeled differently.
Roles and widgets
Setting: a dashboard body with a dashboard row container having two containers for different roles. Each container holding one or more widgets. Each widget has a different role.
Previously: When logging in into the runtime with a specific role, the role triggers the right widget and filters out the other containers.
New: The new Blueriq Theme is acting closer to the model. So it tries to show the containers between the row and the widget, which is correct behavior. This behavior results in some space on the runtime. To change this behavior you should model it with setting the role to the main container (in this case DashboardBehandelaar and DashboardAanvrager) instead of on the widget. This gives you the right appearance.
Consider a dashboard structure like depicted in the image at the right. In this picture you see some widgets that are shown if the role match.
If all individual widgets in a column should not be shown, either by assigning a role to them or by adding a precondition that evaluates to FALSE, the MVC frontend would recognize this and ignore the column that has no widgets. The new Blueriq Theme, however, follows the model more closely and the columns will be rendered, without widgets inside them (resulting in extra space). This might be unwanted.
If you encouter such an issue migrating to the new Blueriq Theme, you need to change your model. You can add the role or the precondition on a higher container, in this case DashboardBehandelaar and DashboardAanvrager.
Column weights vs. column widths
Consider a dashboard structure like at the right.
The MVC layout defined a 12 column grid where dashboard columns could be mapped to. When the column widths added up to less than 12, empty space would be rendered. When it added up to more than 12, the column would be wrapped to a new line. The new Blueriq Theme uses a different model and it will render all columns inside of a dashboard row horizontally. It uses a weight system to determine the width of the columns. A column of weight 2 will be twice as wide as a column of width 1. if you need blank space, you can add an empty column with the specified width. Note that if your weights add up to 12, the same behaviour as in MVC will occur.
In the new theme, another way is supported. The columns container can be assigned the content style 'dashboard_column'. Additionally, a presentation style of 'WeightX' can be assigned to indicate the weight. Weights can be any number, as they are relative to each other. A column with weight 70 will be rendered twice as wide as a column with weight 35. It is preferred to use Weight presentation styles over content styles.
For backwards compatibility we support both methods, but note that the number will be interpreted as a weight instead of a width.
Behavior
Here is a sum up of some important behavior in the Material theme. Some of these might not differ from the MVC but are important to know
- Empty container component will show no HTML and takes care of all containers that have when all the following conditionconditions apply:TODO
- No children exist AND
- No Iconicon attached AND
- No display name
- TODO
- specified
- The Material Theme provides different URLs to start flows and shortcuts. They are described in the ApiDocs.
Overview
Content Tools