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.

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. 1 column visible: 100%

2. 2 columns visible: 50% 50%

3. 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. 1 column visible: 100%

2. 2 columns visible: 50% 50%

3. 3 columns visible: 30% 40% 30%

The three inner columns, bodyleftside, body, bodyrightside, widths use the same strategy for widths:

1. 1 column visible: 100%

2. 2 columns visible: 50% 50%

3. 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 Left side: Image
	Reference and Quick order layout for a presentation.	Body: Identity, part number, name Body footer: Highlighted properties Left side: Image
	Search layout for a presentation.	Body: Identity, part number, name, description Footer: Highlighted properties Left side: Image

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.

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>

A Trigger may have several options

<Trigger label-regex="fixit|accessories"/>

<Trigger kit="true"/>

<Trigger property="HasNodes" value="true"/>
<Trigger property="Specifications[Code=Model]" value="Pro"/>

Global properties

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>

<!-- 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]"/>

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.

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.

Class

A set of predefined classes exist to help with basic styling.

<Presentation template="default" class="product">

Classes which may be used

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.

Templates for other graphical objects exist.

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.

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

Related articles

• Page:
  Technical documentation - Tables and used-in in web viewer version 5.0 and later
• Page:
  Technical documentation - Favourites function
• Page:
  Technical documentation - Presentation settings in version 5
• Page:
  Technical documentation - Widgets
• Page:
  Technical documentation - PageMetaData and PageTitle