Configure Lists Views, Detail Tabs and Action Menus

Overview

Web Access respects the Product 360 domain model definition, i.e. the Repository. That means, that meta information, such as field types, mandatory flags, etc. directly affect the Web UI. Having that said, many parts of the UI are built by referencing repository entities and fields and bring them in the desired structure and order. Since version 7 this composition of repository elements can be done declarativeley

The following elements are be customized declaratively:

  • All list views for the root entities like items, products, variants, tasks, structures and multimedia documents

  • Most of the subentity list views, like prices, items/variants of the product, references

  • All simple detail tabs like header, texts, change information

  • Action menus for items, products, variants, tasks and structures list views

Declarative customization is not (yet) possible for

  • Navigation area on the left

  • Special detail tabs like media attachments, classification

Declarative Customization Area

During Product 360 server bootstrap (more precisely: when starting the very first Web session) the following folder structure is created in the server configuration area:

images/download/attachments/270868051/configurationArea.PNG

The directory /webdefinitions is the place where all customized definition files are loaded from. Initially, this folder only contains a readme file and XML schema files. The subdirectory /default contains all definition files. These files are updated on each server start.

To customize a list view or detail tab, copy the corresponding definition file from the /default subdirectory into the /webdefinition root directory. Then apply the desired changes to the copy of the file.

Never change the content of the /default directory as all your changes will be lost after the next server restart.

A typical list of default definition files looks like this. (This may vary depending on your system setup, like 2pp/3pp and the repository configuration):

images/download/attachments/270868051/configurationDefaultArea.PNG

Make Changes to XML Configuration Files

To customize any of the default configuration files follow these steps:

  1. Copy the file to be changed from /default into the upper /webdefinitions directory and open it using your favorite XML editor (XSD Schema support!). Please see table below to find the correct file.

  2. Change the file, e.g. add another field, another field definition or change the order of definitions

  3. Run one of the following actions to apply changes

    1. Login as Administrator and call "Reset Application" (since version 7.1)

      images/download/attachments/270868051/resetApplication.png
    2. When having access to the server console, run OSGi command "hpmwReset"

      images/download/attachments/270868051/hpmwReset.png
    3. Connect to server via JMX (e.g. with jconsole from the Java-bin directory) and call the MBean hpmwReset in package com.heiler.ppm.web

      images/download/attachments/270868051/hpmwResetJmx.PNG
    4. Restart the server

After step 3 you'll have to relogin and the changes should be applied. In case of undesired behaviour please check the server log file.

Example Definitions

Please refer to the following pages for a comprehensive list of example definitions for list views and detail tabs

List of Customization Areas

Filename(s)

Version Info

Purpose

Products/Items/Variants

article.detailoverview.xml, product.detailoverview.xml, variant.detailoverview.xml

Detail preview next to thumbnail in detail form.

images/download/attachments/270868051/article.detailoverview.png

article.detailtab.xml, product.detailtab.xml, variant.detailtab.xml

All custom detail tabs, e.g. Header, Text, Prices.images/download/attachments/270868051/article.detailtab.PNG

article.listmodel.xml, product.listmodel.xml, variant.listmodel.xml

The default list definitions for the master list view.

images/download/attachments/270868051/article.listmodel.png

article.prices.purchase.listmodel.xml

< 7.1.00

Purchase price list for price tab for items. Replaced with *.detailtab.xml with 7.1.00.images/download/attachments/270868051/purchaseprice.PNG

article.prices.selling.listmodel.xml, product.prices.selling.listmodel.xml, variant.prices.selling.listmodel.xml

< 7.1.00

Selling price list for price tab. Replaced with *.detailtab.xml with 7.1.00.images/download/attachments/270868051/sellingprice.PNG

article.reference.form.xml, product.reference.form.xml, variant.reference.form.xml

Popup form to create or edit references.

images/download/attachments/270868051/article.reference.form.png

article.references.listmodel.xml, product.references.listmodel.xml, variant.references.listmodel.xml

List definitions to load references for reference tab. All definitions for products,
items (and variants) references are merged into a single table.

images/download/attachments/270868051/product.references.listmodel.png

article.quality.status.listmodel.xml, product.quality.status.listmodel.xml, variant.quality.status.listmodel.xml

> 7.1.00

List definition for quality status detail tab.

images/download/attachments/270868051/article.quality.status.listmodel.png

product.items.listmodel.xml, product.variants.listmodel.xml, variant.items.listmodel.xml

List definition that shows the children ArticleType-based entities of the selected entity
in a detail tab.

product.items.listmodel.xml only applies to 2pp mode.

product.variants.listmodel.xml and variants.items.listmodel.xml only apply to 3pp mode. images/download/attachments/270868051/product.items.listmodel.png

Media Assets

document.detailoverview.xml

Detail media asset preview next to thumbnail in detail form.

images/download/attachments/270868051/document.detailoverview.png

document.detailtab.xml

All custom detail tabs for media assets e.g. Header, Detail.images/download/attachments/270868051/document.detailtab.png

media.assignment.form.xml

Picker window to assign a media asset to an existing product/variant/itemimages/download/attachments/270868051/media.assignment.form.png

media.hlr.details.xml

Media asset detail popup for Heiler Classic Provider (HLR)

images/download/attachments/270868051/media.hlr.details.png

media.hmm.details.xml

Media asset detail popup for Informatica Media Manager (HMM)

media.reference.form.xml

Picker window to assign an item/variant/product to an media asset.

images/download/attachments/270868051/media.reference.form.png

media.variants.xml

Detail area under the media gallery on product/variant/item media tab.

images/download/attachments/270868051/media.variants.png

Structures

structure.detailoverview.xml

Detail preview next to thumbnail in detail form for structure groups.images/download/attachments/270868051/structure.detailoverview.png

structure.detailtab.xml

All custom detail tabs for structures, e.g. Header, Text.images/download/attachments/270868051/structure.detailtab.png

structure.features.listmodel.xml

List definition of detail tab showing structure group's features.

images/download/attachments/270868051/structure.features.listmodel.png

structure.products.listmodel.xml

List definition for detail tab showing assigned products or items to a structure group.
structure.products.listmodel.xml only applies to 2/3-pp mode
structure.items.listmodel.xml only applies to 1pp mode

images/download/attachments/270868051/structure.products.listmodel.png

structure.quality.status.listmodel.xml

> 7.1.00

List definition for quality status detail tab for structures.

Tasks

task.create.form.xml

Detail form for task creation popup window.

images/download/attachments/270868051/task.create.form.png

task.edit.form.xml

> 7.1.00

Detail form for edit task detail view.

images/download/attachments/270868051/task.edit.form.png

task.listmodel.xml

List definitions for task main list.

images/download/attachments/270868051/task.listmodel.png

Action menus

menu.actions.list.article.xml, menu.actions.list.product.xml, menu.actions.list.structure.xml, menu.actions.list.task.xml, menu.actions.list.variant.xml

>=8.0

Action menus for items, products, variants, tasks and structures lists.

images/download/attachments/270868051/Items_action_menu.png

Special

article.gdsn.hierarchy.listmodel.xml

Fields that are shown in GDSN hierarchy view for items. If multiple fields are specified,
they are separated with a "-".

images/download/attachments/270868051/gdsnHierarchyView.png

article.kits.listmodel.xml

List definition for kits and components detail tab list.

Q&A

Here are some hints based on common issues and provided feedback:

Debugging

In case of something doesn't work as expected please check the server log file .out.log. Also it might be helpful to enable DEBUG logs for everything related to parsing the XML files. This can be done in log4j.xml in server configuration folder by adding these lines:

<category name="com.heiler.ppm.web.common.definition">
<priority value="DEBUG"/>
</category>

Referencing Fields and Logical Keys

When referencing a field or an entity type, always use the identifier from the custom section of Product 360 repository. Only for logical keys, the type name is needed.

Please also note, that logicalKey element is only needed if

  • No default value is provided in repository

  • A different value than the default value should be used

For example the following list definition references a price field:

<definition i18NKey="%table.config.full.en" identifier="article.table.config.full.en" rootEntity="Article">
<field identifier="Article.SupplierAID" sortable="true"/>
<field align="e" identifier="ArticlePriceValueSales.Amount" sortable="true"/>
</definition>

Although the price field as multiple logical keys, this is a valid expression as all logical keys have a default in the repository. In this case, the net customer price for EUR with the validity of "now" will be displayed.

To display a price of another type, only the deviant logical key needs to be specified, e.g.

<definition i18NKey="%table.config.full.en" identifier="article.table.config.full.en" rootEntity="Article">
<field identifier="Article.SupplierAID" sortable="true"/>
<field align="e" identifier="ArticlePriceValueSales.Amount" sortable="true">
<logicalKey identifier="ArticlePriceType.LK.Type" value="5"/>
</field>
</definition>

Display Media Asset Thumbnail in Table

The default installation contains the list definitions FULL (EN) and FULL (DE) where the first column displays a thumbnail of the item/product. If the thumbnail is not displayed as expected, please check the corresponding XML file article.listmodel.xml or product.listmodel.xml.

For the thumbnail column, all three logical keys (language, quality and media asset type) need to be set correctly. The default definition references only language and quality and uses the default media asset type from the repository. To specify an alternative media asset type, the field definition should look like this:

<field caption="%web.client.item.table.thumbnail" identifier="ArticleMediaAssetDocument.ImageIdentifier" sortable="true" width="40">
<logicalKey identifier="ArticleMediaAssetDocumentType.LK.Language" value="English"/>
<logicalKey identifier="ArticleMediaAssetDocumentType.LK.Quality" value="Internet image"/>
<logicalKey identifier="ArticleMediaAssetMapType.LK.MediaAssetType" value="thumbnail"/>
</field>

Display Media Asset Thumbnail in Form

Entity thumbnail can be specified like this (possible logical keys same as in table definition):

<fieldGroup displaySectionWidget="true" subEntityId="ArticleMediaAssetDocument">
<mediaField identifier="ArticleMediaAssetDocument.ImageIdentifier" thumbnailType="original"/>
<logicalKey identifier="ArticleMediaAssetMapType.LK.MediaAssetType" value="Standard image"/>
<logicalKey identifier="ArticleMediaAssetDocumentType.LK.Quality" value="Html document"/>
<logicalKey identifier="ArticleMediaAssetDocumentType.LK.Language" value="Language independent"/>
</fieldGroup>

Possible values for thumbnailType attribute is small, normal, big, preview, original(default value).

Display tool-tip in Table

The default installation contains tool-tip enabled for the fields which have rich-text and/or multi-line enabled. For example, Long description fields.

images/download/attachments/270868051/image2019-6-4_0-22-52.png

It is also possible to enable or disable tool-tips for other fields. An optional Field Param can be added in the repository to enable or disable the tool-tip for a particular field. The Field Param name is showTooltipInWebTable and it can accept true or false.

images/download/attachments/270868051/image2019-6-4_0-27-31.png

Renaming the localization strings

In-order to rename Lists Views, Detail Tabs and Action Menus, it is important to understand the relationship between the Lists Views, Detail Tabs and Action Menus xml and their corresponding i18n properties file.

E.g. Detail Tabs

  • product.detailtab.xml → ProductDetailtab.properties, ProductDetailtab_en.properties, ProductDetailtab_de.properties, etc

    • Such *.detailtab.xml holds any tab created using form definition, like "All texts", "Change information", etc.

    • Renaming of such tabs needs to be done in (*)Detailtab.properties and more language specific files

  • product.detailtab.custom.xml → ProductDetailtabCustom.properties, ProductDetailtabCustom_en.properties, ProductDetailtabCustom_de.properties, etc

    • Such *.detailtab.custom.xml holds any tab created using custom tab definition, like "References", "Items of the product", etc.

    • Renaming of such tabs needs to be done in (*)DetailtabCustom.properties and more language specific files.

  • product.detailtab.parameterized.xml → ProductDetailtabParameterized.properties, ProductDetailtabParameterized_en.properties, ProductDetailtabParameterized_de.properties

    • Such *.detailtab.parameterized.xml holds any tab created using parameterized tab definition, like "Characteristics", "Preview", etc.

    • Renaming of such tabs needs to be done in (*)DetailtabParameterized.properties and more language specific files.

Similarly, the list views and action menus are also localized in similar naming convention.

Setting default 'Filter By' field to 'All Columns ' in the main table search of Web UI

In general, the default 'Filter By' field is selected as the field which is the first column of the List view.

There is also an option in 'Filter By' drop-down stating "All columns" which the users can select. It will run the search across all fields present in the List view.

In order to have "All columns" as the default on the web client, we have introduced new preferences quickSearch.allColumns.preSelected =false

By default, preference is set to false. In case the user wants to see the default as "All columns" then this preference needs to be set true.

You can change it by going into plugin_customization.ini and changing com.heiler.ppm.web.common/quickSearch.allColumns.preSelected