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 https://signifikant.atlassian.net/wiki/spaces/ASKB/pages/2667020308/A+presentation+setting+is+not+activated+despite+trigger+and+page+gets+messed+up?src=search
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. <Trigger kit="true"/> |
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. <Trigger property="HasNodes" value="true"/> <Trigger property="Specifications[Code=Model]" value="Pro"/> |
Global properties
Global properties may be used in the properties attribute of a trigger.
Available in version 5.2 and later.
RequestContext – the full request context. DateTime Now – date and time now TimeSpan Time – time now DateTime Date – date now DateTime UtcNow – utc now TimeSpan UtcTime – utc time DateTime UtcDate – utc date User – user (server user object) HasProxyUser – if has proxy user ProxyUser – proxy user (server user object) UserSettings – user settings object DataCulture DataCultureCode DisplayCulture DisplayCultureCode DocumentCulture DocumentCultureCode Order – the (integration order) HasOrder – if has order Market – market code Presentation – the top presentation. Only some properties of the presentation object is available (name, identity, pid, basetype, typeand some few more) Url – request url UrlScheme – the scheme of the url (http / https) Environment – e.g. Product, Staging, Test, Development Catalogue – The catalogue (context). Full object. Not always available. PartModule – The part module (context). Full object. Not always available. PartModuleRow – The part module row (context). Full object. Not always available. Node – The catalogue node (context). Full object. Not always available. Bulletin – The bulletin (context). Full object. Not always available. SubCatalogue– The sub / inline catalogue (context). Full object. Not always available
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.
<Presentation id="start" class="start"> <Trigger label="start"/> <Identity display="hidden"/> <Name display="header" tag="h1"/> <Description display="header" tag="h3"/> <Image display="header" as-background="true" class="hero-image" backdrop="full"/> </Presentation>
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 | |
NodeView | To control start 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. <!-- Will add html attribute like presentation-type="Kit" --> <HtmlAttribute name="presentation-type" property="Presentation.Type.Code"/> <!-- Will add html attribute like presentation-region="EMEA" --> <HtmlAttribute name="presentation-region" property="Presentation.Specifications[Code=Region]"/> In version 5.1.8 and later. | name property |
MainLayout | To control mail layout behaviour as NavigationBar. | See separate article |
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 - Configuring 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.
Check the <Presentation id="empty" template="default"> in profile.default.config for a full list.
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
<Presentation> <!-- identity format --> <IdentityFormat pattern="\b(?'a'\d{4})(?'b'\d{4})(?'c'\d{2})\b" format="${a} ${b} ${c}$'"/> <!-- partnumber format --> <PartNumberFormat pattern="\b(?'a'\d{4})(?'b'\d{4})(?'c'\d{2})\b" format="${a} ${b} ${c}$'"/> </Presentation>
label is used to print a label over the information, and refers to a key text (see Custom texts and available languages) .
Example
<!-- Identity will display in the header with css tag h2 and formatted according to the regex --> <Identity display="header" tag="h2" format="identity"/> <References display="body" label="RelatedStuff"/>
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
<Image display="body" as-background="true" max-count="1"> <!--Image will get this resolution by the server before it is sent to web browser --> <Size width="300" height="225"/> </Image>
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
<Presentation template="catalogue" class="product view"> <Trigger base-type="Catalogue"/> <!-- Group catalogue description, highlighted properties and the toolbar together in one div with class greyarea --> <Description display="body" group="greyarea" group-order="1"/> <HighlightedProperty display="body" group="greyarea" group-order="1"/> <Toolbar display="body" group="greyarea" group-order="1"/> </Presentation>
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.
<Layout display-id="header" class="hero content-v-bottom"/>
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.
<Presentation template="default" class="product">
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.
<Presentation template="default">
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.
<PresentationSettings> <!-- For parts use the template "part". --> <Presentation template="part"> <Trigger base-type="Part"/> <HighlightedProperty id="Number" order="1"/> </Presentation> </PresentationSettings>
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 - Configuring 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.
Ensure to check the profile.default.config file in AppData before changing the templates. Note! Changes should not be made in profile.default.config but in profile.config for the specific site.
<Templates> <!-- Format is defined in profile.default.config. In this case redefine formatting if identity and part number. Define a new format for identity. The id option is used to both define where the rule is applied (in this case in identity) and to give it a name so that it can be reused. --> <Format id="identity" pattern="\b(?'a'\d{4})(?'b'\d{4})(?'c'\d{2})\b" format="${a} ${b} ${c}$'"/> <!-- Now part number formatting is changed. In this case we just reuse the template defined above. --> <Format id="partnumber" template="identity"/> <!-- Change the default behaviour of nodes. --> <Node id="default"> <Identity format="identity"/> <PartNumber format="partnumber"/> </Node> <!-- Change the template for parts. --> <Presentation template="part"> <Identity display="hidden"/> </Presentation> </Templates> <PresentationSettings> <!-- For parts use the template "part". --> <Presentation template="part"> <Trigger base-type="Part"/> <HighlightedProperty id="Number" order="1"/> </Presentation> </PresentationSettings>