You are viewing the documentation for Blueriq 15. Documentation for other versions is available in our documentation directory.
It is possible to put presentations style on various elements, e.g. containers, buttons, attributes, etc. A presentation style changes the manner in which the content is presented to the user. It does not change the content itself, or the structure of the page. A good example is emphasizing a piece of text. For this the TextEmphasis presentation can be used. This presentation style shows the intent of the business engineer, and the styling can react to this by for example making the text bold. On a project you may decide to not only make the piece of text bold, but also change the font size and color for creating the emphasis. By using such presentation styles, a consistent way of presenting content through-out the application is achieved.
Presentation Styles are not meant to be combined with each other. A style should unambiguously indicate how an element should be presented. Multiple presentation styles would easily conflict each other.
Note that some presentation styles are for interaction and domain elements, the other (larger) part for documents.
Document Presentation Styles
To model a document often presentation styles are needed. Presentation styles change the manner in which the content is presented to the user. A good example is emphasizing a piece of text, which can be done with presentation style TextEmphasis. The following list presents the supported presentation styles.
Blueriq comes with an example project "Documents" that contains a variety of presentation styles divided over three example documents. You can run this project and generate the documents to see the possibilities. When you find presentation styles that you want to use in your own project, you can open the Documents project in the studio to see how to apply them to get the desired effect.
| Library | Name | Description | Associated Content Style |
|---|---|---|---|
| AquimaPresentationStyles | BoxEmpty | An empty rectangular box (tick box). This requires FontAwesome. | |
| AquimaPresentationStyles | BoxTicked | A ticked rectangular box (tick box). This requires FontAwesome. | |
| AquimaPresentationStyles | Center | Centers the content of the content item. | |
| AquimaPresentationStyles | Dotted | Sets horizontal line to show as dots. To be used only with HorizontalLine. | |
| AquimaPresentationStyles | Field | Formats the horizontal space that the content item takes with low placed dots. Used for (empty) forms. | |
| AquimaPresentationStyles | Heading_No_Heading_Numbering | Removes the numbering of a heading with content style Heading[X] | Heading[X] |
| AquimaPresentationStyles | LeftAligned | Left aligns the contents of the content item. | |
| AquimaPresentationStyles | LineSpacingExtra | Increases the space between lines in a paragraph | |
| AquimaPresentationStyles | ListBullet | Formats a list as a bulleted list. | |
| AquimaPresentationStyles | ListCapital | Formats a list with capital letters for enumeration. | |
| AquimaPresentationStyles | ListCommaSeperated | Formats a list as a comma separated list. | |
| AquimaPresentationStyles | ListDash | Formats a list as a dashed list. | |
| AquimaPresentationStyles | ListLetter | Formats a list with letters for enumeration. | |
| AquimaPresentationStyles | ListLetterPeriod | Formats a list with letters for enumeration, period at the end. | |
| AquimaPresentationStyles | ListNoSign | Formats a list without any sign in front of the items. | |
| AquimaPresentationStyles | ListNumber | Formats a list as a numbered list. | |
| AquimaPresentationStyles | ListNumberEmphasis | Formats a list as a numbered list with emphasis. | |
| AquimaPresentationStyles | ListPlus | Formats a list with plus signs for enumeration. | |
| AquimaPresentationStyles | ListPlusMinus | Formats a list with plus-minus signs for enumeration. | |
| AquimaPresentationStyles | ListRoman | Formats a list as a roman numbered list. | |
| AquimaPresentationStyles | Maintain_Space | Spaces are not ignored | |
| AquimaPresentationStyles | NewLine | Forces a new line | |
| AquimaPresentationStyles | Page | Shows current page number. | |
| AquimaPresentationStyles | PageFromTo | Shows current number and total number of pages. | |
| AquimaPresentationStyles | PageTo | Shows total number of pages. | |
| AquimaPresentationStyles | RightAligned | Right aligns the contents of the content item. | |
| AquimaPresentationStyles | Rule_Dashed | Presents a HorizontalLine dashed _ _ _ _ _ | HorizontalLine |
| AquimaPresentationStyles | Rule_Dotted | Presents a HorizontalLine dotted .......... | HorizontalLine |
| AquimaPresentationStyles | Rule_Double | Presents a HorizontalLine double ======= | HorizontalLine |
| AquimaPresentationStyles | Rule_Solid | Presents a HorizontalLine solid _______ | HorizontalLine |
| AquimaPresentationStyles | Rule_Groove | Presents a HorizontalLine as groove (3D effect carved, the opposite of ridge). | HorizontalLine |
| AquimaPresentationStyles | Rule_Ridge | Presents a HorizontalLine as ridge (3D effect like it is coming out of the page, the opposite of groove). | HorizontalLine |
| AquimaPresentationStyles | Table_Brd, TableRow_Brd, TableCell_Brd | Displays a border around the table (unlike _Kdr, which displays borders throughout the whole table). | Table, TableRow, TableCell |
| AquimaPresentationStyles | Table_Kdr | Displays borders throughout the whole table (unlike _Brd, which displays a single border for a cell, row or table). | Table |
| AquimaPresentationStyles | TableCell_Automatic_Count | Displays a number in eachTableCell with this style, starting with 1 in the first cell and counting automatically. | TableCell |
| AquimaPresentationStyles | TableRow_BottomLine | Displays just the bottom line of a tablerow border. | TableRow |
| AquimaPresentationStyles | TextAttribute | Style for attributes. | Attribute |
| AquimaPresentationStyles | TextChanged | Style for changed text is green and underlined. | |
| AquimaPresentationStyles | TextExplanation | Style for explanation text is underlined. | |
| AquimaPresentationStyles | TextHeading | Style for a heading text is bold. | |
| AquimaPresentationStyles | TextHeadingBig | Style for a big heading text is bold with larger fontsize. | |
| AquimaPresentationStyles | TextQuestionHelp | Style for question help text is italic. | |
| AquimaPresentationStyles | TextQuestionTitle | Style for question title text is bold. | |
| AquimaPresentationStyles | TextRemoved | Style for removed text is red and strikethrough. | |
| AquimaPresentationStyles | TextSmall | Style for small text has smaller fontsize. | |
| AquimaPresentationStyles | TextStandard | Standard style for text. | |
| AquimaPresentationStyles | TextSubscript | Small text placed low. | |
| AquimaPresentationStyles | TextSuperscript | Small text placed high. | |
| AquimaPresentationStyles | TextTransparent | Text rendered invisible. Typically used to create whitespace that is the same size as other, visible, text. | |
| AquimaPresentationStyles | TextUnderlined | Text underlined. Deprecated, consider using the TextEmphasisSubtle presentation style |
Interaction Presentation Styles: Angular front-end
It is possible to put presentations style on various elements, e.g. containers, buttons, attributes, etc. A presentation style changes the manner in which the content is presented to the user. It does not change the content itself, or the structure of the page (Content style). A good example is emphasizing a piece of text. For the the TextEmphasis presentation can be used. This presentation style shows the intent of the business engineer, and the styling can react to this by for example making the text bold. On a project you may decide to not only make the piece of text bold, but also change the font size and color for creating the emphasis. By using such presentation styles, a consistent way of presenting content through-out the application is achieved.
Type | Name | Can be applied to | Description | Legacy (MVC) | Library |
|---|---|---|---|---|---|
| Accent | Button | Displays buttons with a secondary chosen color | - | BlueriqTheme | |
| AlignRight | Container | Displays a container relative to its parent container on the right. | align_right | BlueriqTheme | |
| AllOptionsVisible | Attribute | Displays the options in a multivalued field with domain as checkboxes. | BlueriqTheme | ||
| Animation | Can be used to animate statistic charts (like pie, bar etc.) | animate | BlueriqTheme | ||
| Autocomplete | Attribute with value list | 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 | - | BlueriqTheme | |
| General | Button | Button document_link | Is used whenever something is displayed as a link and it must be displayed as button instead. (for instance: Document link) | - | BlueriqTheme |
| Danger | TextItem Inline text | AquimaLibrary | |||
| DatepickerMaterial | Date attribute | ||||
| Disabled | Button Attribute | AquimaLibrary | |||
| DoNotShowSearch | Lists | BlueriqTheme | |||
| FlatButton | Button | Is used to display buttons without having a border and a transparent background | button_link | BlueriqTheme | |
| Horizontal | Container Attribute with value list | Displays the content of a container horizontally. Display the domain as horizontal options. | options_horizontal | BlueriqTheme | |
| Info | TextItem Inline text | AquimaLibrary | |||
| Introduction | Container | Displays containers as transparent with a small image in the top left corner | - | BlueriqTheme | |
| LargeText | String attribute | Displays a input field as text-area | memo | BlueriqTheme | |
| Password | String attribute | Add the password style on a string field that you will use as a password field to obscure the text in the input box. | password | BlueriqTheme | |
| Primary | Button document_link (only in combination with Button) | AquimaLibrary | |||
| StatisticPie | For use with the AQ_Statistic* container types | Displays a pie chart | pie | BlueriqTheme | |
| StatisticBar | For use with the AQ_Statistic* container types | Displays a bar chart | bar | BlueriqTheme | |
| StatisticDoughnut | For use with the AQ_Statistic* container types | Displays a doughnut chart | doughnut | BlueriqTheme | |
| StatisticRadar | For use with the AQ_Statistic* container types | Displays a radar chart | radar | BlueriqTheme | |
| StatisticLine | For use with the AQ_Statistic* container types | Displays a line chart | line | BlueriqTheme | |
| StatisticPolar | For use with the AQ_Statistic* container types | Displays a polar chart | polar | BlueriqTheme | |
| Succes | TextItem Inline text | AquimaLibrary | |||
| Switch | Boolean attribute | Displays a checkbox as a slide toggle | toggle | BlueriqTheme | |
| Tertiary | Button document_link (only in combination with Button) | Displays buttons with a tertiary chosen color. | - | BlueriqTheme | |
| TextEmphasis | TextItem Inline text | With this presentation style you emphasize a piece of text. In the default styling this will render the text bold. | AquimaLibrary | ||
| TextEmphasisSubtle | TextItem Inline text | With this presentation style you subtly emphasize a piece of text. In the default styling this will render the text underlined. | AquimaLibrary | ||
| TextEmphasisIntense | TextItem Inline text | With this presentation style you intensely emphasize a piece of text. In the default styling this will render the text italic. | AquimaLibrary | ||
| Transparent | Container | Displays containers as transparent. | - | BlueriqTheme | |
| Warning | TextItem Inline text | BlueriqTheme | |||
| Weight<number> Example: Weight7 | Container that has a dashboard_column Content Style Elements in a container with Presentation Style Horizontal | 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. | - | BlueriqTheme | |
| Icons | OnlyIcon | Button | Displays only a icon when used on a button. | only_icon | BlueriqTheme |
| icon_exclamation_circle *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name | icon_exclamation_sign | AquimaPresentationStyles | ||
| icon_info_circle *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name | icon_info_sign | AquimaPresentationStyles | ||
| icon_times *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name | icon_remove | AquimaPresentationStyles | ||
| icon_times_circle *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name | icon_remove_circle | AquimaPresentationStyles | ||
| icon_clock_o *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name | icon_time | AquimaPresentationStyles | ||
| icon_exclamation_triangle *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name | icon_warning_sign | AquimaPresentationStyles | ||
| icon_sign_out *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name | icon_signout | AquimaPresentationStyles | ||
| icon_file_o *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name | icon_file | AquimaPresentationStyles | ||
| icon_file_pdf_o *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name | icon_file_pdf | AquimaPresentationStyles | ||
| icon_file_image_o *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name | icon_file_image | AquimaPresentationStyles |
*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-signbecomes in Blueriq Studio:icon_exclamation_sign - To create a new presentation style for a Fontawesome icon in Blueriq Studio, copy the name of the icon you want and replace the Font awesome prefix 'fa fa-' with 'icon_' and replace all hyphens (-) with an underscore (_)
Fontawesome
The version of fontawesome that is bundled with Blueriq is 4.4.0. There is no separate documentation page for this version, see https://fontawesome.com/v4/icons/ for the documentation about 4.7.0.
When selecting an icon check to see if it is introduced in version 4.4.0 or lower.
Overview
Content Tools