You are viewing the documentation for Blueriq 17. Documentation for other versions is available in our documentation directory.
This page consists of all that needs to be done to migrate from MVC to the Material Theme
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 legacy presentation styles will become deprecated in Blueriq 12.0
| 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 containers in a horizontal manner. Renders the domain as horizontal options. | Styles | |
| Vertical | options_vertical | Renders 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_pdf | 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:icon_exclamation_sign
Content Styles
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
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 when all the following conditions apply:
- No children exist AND
- No icon attached AND
- No display name specified
- The Material Theme provides different URLs to start flows and shortcuts. They are described in the ApiDocs.
Overview
Content Tools