You are viewing the documentation for Blueriq 13. 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

TypeNew (Material)Legacy (MVC)DescriptionSection
GeneralButton-Is used whenever something is displayed as a link and it must be displayed as button instead. (for instance: Document link)Styles

FlatButtonbutton_linkIs used to display buttons without having a border and a transparent backgroundStyles

Introduction-Displays containers as transparent with a small image in the top left cornerStyles

Transparent-

Displays containers as transparent.
Can be used versatile.

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

LargeTextmemoDisplays a input field as text-areaStyles

AlignRightalign_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.
For single valued fields, radio buttons are used and for multi-valued fields checkboxes are used.

Styles

Verticaloptions_vertical

Display the domain as vertical options.
For single valued fields, radio buttons are used and for multi-valued fields checkboxes are used. 

Styles

AnimationanimateCan be used to animate statistic charts (like pie, bar etc.)Styles

StatisticPiepieDisplays a pie chartDashboardStyles

StatisticBarbarDisplays a bar chartDashboardStyles

StatisticDoughnutdoughnutDisplays a doughnut chartDashboardStyles

StatisticRadarradarDisplays a radar chartDashboardStyles

StatisticLinelineDisplays a line chartDashboardStyles

StatisticPolarpolarDisplays a polar chartDashboardStyles

SwitchtoggleDisplays a checkbox as a slide toggleStyles

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
IconsOnlyIcononly_icon

Displays only a icon when used on a button.
No caption will be shown.

Style

icon_exclamation_circle *1icon_exclamation_signA font Awesome icon; can be used in buttons and containers as prefix for display nameStyles

icon_info_circle *1icon_info_signA font Awesome icon; can be used in buttons and containers as prefix for display nameStyles

icon_times *1icon_removeA font Awesome icon; can be used in buttons and containers as prefix for display nameStyles

icon_times_circle *1icon_remove_circleA font Awesome icon; can be used in buttons and containers as prefix for display nameStyles

icon_clock_o *1icon_timeA font Awesome icon; can be used in buttons and containers as prefix for display nameStyles

icon_exclamation_triangle *1icon_warning_signA font Awesome icon; can be used in buttons and containers as prefix for display nameStyles

icon_sign_out *1icon_signoutA font Awesome icon; can be used in buttons and containers as prefix for display nameStyles

icon_file_o *1icon_fileA font Awesome icon; can be used in buttons and containers as prefix for display nameStyles

icon_file_pdf_o *1icon_file_pdfA font Awesome icon; can be used in buttons and containers as prefix for display nameStyles

icon_file_image_o *1icon_file_imageA font Awesome icon; can be used in buttons and containers as prefix for display nameStyles


*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-sign in 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: full
For completeness, these are all the possibilities:

LibraryNew Presentation StyleDescription
BlueriqThemeResponsiveThe width of the content on the page is dependent on the width of the window. (default)
BlueriqThemeSmallThe content on the page is narrow. (maximum width is 512 pixels)
BlueriqThemeMediumThe content on the page is medium. (maximum width is 768 pixels)
BlueriqThemeLarge

The content on the page is large. (maximum width is 1024 pixels)

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




Horizontal containers

In the new Blueriq theme, you can add the presentation style 'Horizontal' to a container. As a result, the children of the container will be displayed side-by-side. By default, each child will have the same width. This can be controlled by adding a presentation style 'weightX' to a child. For explanation on weights see above.



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.
  • No labels