Technical documentation - Presentation settings in version 5
- Mattias Löfstrand
- Filip Skröder
- Thomas Sandström
This article describes the presentation settings in version 5.0 and later. It is the top description, while selected areas as used in, cross sales and references are described in its own articles.
This article is valid from version 5.0 and later and describes the new user interface introduced in version 5.0.
The old user interface is still supported in version 5.0, but is discontinued from version 5.1.
Page overview and placement options
The main layout is divided into several sections at top, a main-body and a main-footer. The main-body is used for the content while the other areas are used for main functions.
Presentations
The main body is where presentations are drawn, according to image below. Each presentation may be configured to place information in different areas using PresentationSettings. The full width of the body area is 1500 px (default). If browser is more than 1500 px, the sides takes up remaining (equal) width. If browser height is more than content height, blank area is inserted to push down the footer to the bottom (stiped in image below).
The body is divided into three areas, bodyleftside, body and bodyrightside. But only the areas which have objects in them are actually drawn on the screen which results in three possible “columns” of the body. The widths of the body areas are:
1 column visible: 100%
2 columns visible: 50% 50%
3 columns visible: 30% 40% 30%
On small screens, such as mobiles, the areas is stacked, according to image below. All areas take full screen width, and the height of each area is determined by its content.
Nested presentations
Presentations may also be drawn inside other objects. This is the case when presentations are drawn in quick search results, a presentation is shown on a node, in order preview/order page, in quick navigation or as references. When a presentaiton is shown inside such an area, the presentation will use the below layout.
The three outer columns widths, left-side, body, right-side, are as following:
1 column visible: 100%
2 columns visible: 50% 50%
3 columns visible: 30% 40% 30%
The three inner columns, bodyleftside, body, bodyrightside, widths use the same strategy for widths:
1 column visible: 100%
2 columns visible: 50% 50%
3 columns visible: 30% 40% 30%
Leftside, rightside, bodyleftside, bodyrightside can be made take full height so the header/footers in inside them.
Examples of nested presentation layouts
Below are several different layouts for a nested layout.
Layout | Description | Content |
|---|---|---|
The default layout for a nested presentation. | Body: Identity, part number, name, image | |
Quick navigation layout for a presentation. | Body: Identity, part number, name | |
Reference and Quick order layout for a presentation. | Body: Identity, part number, name | |
Search layout for a presentation. | Body: Identity, part number, name, description |
Presentation
Settings for different views may be controlled by the Presentation tag in PresentationSettings. The settings in the <Presentation> will be applied if all conditions in the <Trigger> tag are met.
<PresentationSettings>
<Presentation template="default" class="product">
<Trigger base-type="Catalogue"/>
<Layout display-id="header" class="hero content-v-bottom"/>
<Identity display="header" tag="h3"/>
<Name display="header" tag="h1"/>
<Description display="header" tag="h3" />
</Presentation>
</PresentationSettings>Attributes
Presentation tag have the below attributes.
Attribute | Usage |
|---|---|
id | Given id for this setting. |
template | A named template for the setting. Templates are defined in profile.default.config. |
class | Css class which will be added to presentation pages. |
remember-scroll | If scroll position is remembered (when pressing back in browser). Setting can be useful in catalogues used for large number of wareparts or similar. Default is false. This setting is valid on catalogue presentations only and from version 5.1 and later. |
Trigger
A Trigger is a condition determining if the settings shall be applied. There may be several triggers in a Presentation and in such case all triggers have to be met.
<PresentationSettings>
<Presentation template="default">
<Trigger base-type="Catalogue"/>
<Trigger label="start"/>
<!-- Whatever settings for start catalogue -->
</Presentation>
</PresentationSettings>
Warning! Comments, tags or even white space between starting <Presentation> and the <Trigger> tag is not allowed.
See A presentation setting is not activated despite trigger and page gets messed up
Warning! If you write a trigger that have no conditions or only faulty conditions, the trigger will always trigger/match.
A Trigger may have several options
Trigger option | Description |
|---|---|
base-type | A base type for a presentation e.g. Part, Catalogue, Part assembly. |
label | The label value found on presentations. Can be set in Manager. |
label-regex | A regex for the label. <Trigger label-regex="fixit|accessories"/> |
identity | The identity value found on presentations. Can be set in the Manager. |
persistent-identity | The persistent-identity value found on presentations. Can be set in the Manager. |
type | The code of a presentation type. |
kit | If kit is checked on a part assembly. |
id | Database id of a presentation. |
permission | List of permissions that may trigger. |
property | The name of a presentation property or a global property. Often used together with value or has-value option. |
Global properties
Global properties may be used in the properties attribute of a trigger.
Information objects in a presentation
The information objects on a presentation correspond to the information found in the Manager. The information objects may be controlled through a few tags.
XML tag | Usage | Attributes |
|---|---|---|
Identity | To control how identity on a presentation is shown. | display tag label-tag format group group-order |
Name | To control how name on a presentation is shown. | display tag label-tag format group group-order |
Description | To control how description on a presentation is shown. | display tag label-tag format group group-order |
PartNumber | To control how part number on a part is shown. | display tag label-tag format group group-order |
Image | To control how image on a presentation is shown. | display as-background max-count group group-order |
Properties | To control how properties as specifications on a presentation is shown. | display tag label-tag backdrop show-all-count group group-order |
HighlightedProperties | To control how highlighted properties as highlighted specifications on a presentation is shown. | display tag backdrop group group-order |
Node | To control catalogue when user has moved into a node or nodes in a NodeView | Version 5.2. empty-action “hide” will hide node in NodeView if emtpy “disable” will dim and make node not clickable in NodeView if empty |
NodeView | To control gallery of a catalogue | Version 5.1: display label label-tag class |
Replacement | To control how replacements on a part is shown. | display label-tag group group-order |
Bulletins | To control how bulletins on a presentation is shown. | display label label-tag class group group-order |
CrossSales | To control cross sales. See separate article. | display label-tag group group-order |
FavouritesPreview |
| display label-tag group group-order displayCount Introduced in version 5.1. See separate article. |
Filters | To control how filters are displayed | display label label-tag class group group-order |
FitsIn | To display which products the presentation fits in. Useful as a short form of UsedIn and for SEO. Introduced in version 5.1. | display |
Footnotes | To control how footnotes on a presentation is shown. | display label label-tag class group group-order |
HtmlAttribute | To add attributes which can be used in css. In version 5.1.8 and later. | name property |
MainLayout | To control mail layout behaviour as NavigationBar. | See separate article |
NoteIcon | To control how note icons are shown on notes. | display tag class group |
OrderHistoryPreview | To present a preview of latest orders. | display label-tag group group-order displayCount Introduced in version 5.1. See separate article. |
OrderStatisticsSettings | To control statistics. See separate article. | display label-tag group group-order |
PartOptions | To control how part options are painted. In version 5.1 and later | display label-tag group group-order |
References | To control how references on a presentation is shown. | display label label-tag class group group-order |
SearchSettings | To control statistics. See separate article. | display label-tag |
Title | To present title of presentation in h1 tag of the page. Used for SEO. Introduced in version 5.1. | display |
Toolbar | To control how toolbar on a presentation is shown. | display group group-order |
UsedIn | To control used in section. See separate article. | display label-tag group group-order |
OrderStatisticsSettings | To control statistics. See separate article. | display label-tag group group-order |
Widgets | To add widgets in a presentation or asset. In version 5.1 and later | display label-tag class group group-order See separate article. |
Also see Technical documentation - Tables and used-in in web viewer version 5.0 and later , Technical documentation - Carousel , Technical documentation - Configuring up-sales/cross sales/top sales , Technical documentation - Canvas Search and Technical documentation - References for details on more complex objects.
class attribute on an XML tag will add a class to the css on the object. Example:
display contains the following options:
hidden - do not show
collapsed - for lists as used in and bulletins collapse under an expandable header
toolbar - for bulletins, footnotes, references, place in toolbar of a presentation
<placement> - each possible place according to the overview above.
tag will set the stated css tag on the object (from site.variables.less)
label-tag will set stated css tag on the header of the object. This is used for more complex objects which has a header text as used in or cross sales.
format is used to control formatting of numbers as identity and part number. Default formatting may be set for identity and part number
label is used to print a label over the information, and refers to a key text (see Custom texts and available languages) .
Example
as-background is used on images to make the image a background image.
size is used on images to set the scaling of the image on the server side. Image will then get this resolution by the server. Note that image still may be drawn at a different size based on css.
Example
group and group-order is used to place information together in a group using a div and the group name will be a css class. Different groups will be sorted according to order, but take care to set the same group-order to all elements in the same group. This feature can be used to both group information and to apply different styling on the information. group and group-order is available in version 5.1 and later.
Example
Layout
The Layout tag is used to define the layout for a presentation from a set of predefined layouts. Using css it can be overridden.
Option display-id refers to the areas of the layout. E.g display-id=”header” is used to control the layout of the header. Option class is used to apply different layouts for that area.
display-id option | Available classes | Usage |
|---|---|---|
header | hero | Will make header contain a hero image with full width. |
header | content-v-bottom | Will make information in the header appear in the content-v-bottom area. |
Class
A set of predefined classes exist to help with basic styling.
Classes which may be used
Class | Usage |
|---|---|
product | A standard class for paining catalogues used as products pages. |
start | A standard class for painting catalogues that are index or navigation pages. It may also be suitable for parts or document browsing pages. |
Templates
From start each presentation gets a default appearance. These default appearances are considered templates and are located in the profile.default.config file in AppData. There are several templates available.
It is possible to both define new and change existing templates. This is how to use a template and make changes to it for presentation type part.
Available templates
Templates exist for presentations and for other graphical objects. The templates are also the default behaviour for that object.
Template for presentations | Description |
|---|---|
default | How a presentation will be presented if no other choice made. |
part | Template for a part, when showing on the screen |
catalogue | Template for a catalogue, when showing on the screen |
part-assembly | Template for a part-assembly, when showing on the screen |
document | Template for a document, when showing on the screen |
content-set | Template for a content-set, when showing on the screen |
index | Template intended for start catalogue |
empty | Template which is empty, all turned off |
preview | Template for showing a presentation as a preview / nested presentation |
quick-order | Template for parts when shown in quick order search result |
order-cart | Template for parts when shown in order cart |
quick-navigation | Template for presentation when shown in quick navigation field |
kit | Template for how kits are shown |
Templates for other graphical objects exist.
Template for graphical object | Description |
|---|---|
Node | A catalogue page displays nodes on many places. There are several Nodes templates which shows how nodes are shown in various places on a catalogue page. |
NodesView | Templates for how several nodes are displayed in a view in the gallery or table of a catalogue. |
Order-cart | Templates for the order-cart |
UsedIn | How the used in list is displayed Technical documentation - Tables and used-in in web viewer version 5.0 and later |
Carousel | How a default carousel behaves. See Technical documentation - Carousel |
CrossSales | How CrossSales is displayed. Technical documentation - Configuring up-sales/cross sales/top sales |
Redefining templates
All templates are defined in the file profile.default.config located in AppData. In this file it is possible to find how the default presentations are configured and what templates exist.