Custom Layouts

Introduction

The Custom Layout allows the administrators to re-organise the product configuration layout information (Group, Sub-Group, the position of the group, subgroup, and dynamic attributes) coming from ERP/IMC model (SSC/ IMC configurable product, Classified product). It is also supported to add new custom UI control for the dynamic attributes in a Custom Layout.

For example:

• Number selector

• Single Value Select Radio Box (Including Boolean selector for string)

• Multi-Value Select Check Box

Before the product release of 1904, all the dynamic attributes showing on the product configuration page are rendered in a Grid View and all of them are in similar size.

In product release 1904, Fluid View is introduced together with a Custom Layout. It is a new Control that adjusts its width according to the length of the dynamic attribute value to utilize space. Each row can potentially have a more dynamic attribute displayed.

Configuration Settings

The table below listed the available settings for the Custom Layout with description:

List of UI Controls Supported by Configurator

Below is the list of UI controls supported:

* The Open Display UI Control is suitable for attributes with less select value options. 

Steps to setup 

1. Ensure the EnableCustomLayout is enabled from Administration→ Master Data Management→ Setting Boolean for Custom Layout to reorganize the layout of the product configurator.

       2. Create a new Custom Layout from Model → Custom Layouts

     3. The image below shows the Overview of a Custom Layout

1. Name - The name of the custom layout is read-only once the custom layout is created. This is because the name is using in the lookup table Custom_Layout as Custom Layout ID to match with the Product ID.
2. Active – The settings to activate / de-activate a custom layout.
3. Enable Configurator Fluid View – The setting to enable / disable fluid view by default for a custom layout.
4. Value Option Threshold – The threshold value for the characteristic’s values to display with/without scroll bar.

      4. Attribute Tab - To select the list of dynamic attributes from the Model and add into the Custom Layout.

The system lists the dynamic attributes as shown below after the selected DAs being added into the Custom Layout. The position of the DA can be defined here, and it will be used to re-order the position of the attributes on the product configurator.

The column Custom Control is Available indicates ‘Yes’ if the DA is Enumerable and/or Multivalue, which means the DA is available to apply custom UI control on it. The detail of the DA is viewable by clicking on the DA itself. The DA detail page shows only the selected properties on the DA, full detail of the DA can be viewed from the model→Attributes.

The property DA Enumerable Single Value Control / DA Enumerable Multi Value Control shows the available custom UI controls which are supported to the DA. If a custom UI control is selected, the system will apply the custom UI control to the DA when the product mapped to a Custom Layout.

Example of Default Single Value Control vs Custom Single Value Control:

Example of Default Multi Value Control vs Custom Multi Value Control:

        5. Group / Sub Group Tab – To create a new group and subgroup in order to group the attributes. Any attribute found in the product model (SSC or IMC configurable product) but does not define in the custom layout will show in a general group at the end of all groups defined in a custom layout.

Example:

1. A new group is created. The position of the group can be defined on the column Position. Clicks on the localization icon to update the label for the localization supported by the system.

     2. Two (2) Sub Groups are created for the Group. The position of the subgroup can be defined at the             Column Position.

      3. The list of attributes defined in a subgroup with the position defined at the Dynamic Attributes.

      6. Product Tab - To add the product into the Custom Layout. The product within the Custom Layout will apply with the settings set in the Custom Layout. One (1) product can only add to a Custom Layout.

The mapping of the product with Custom Layout is stored in the System table ‘Custom_Layout’

       7. Localization Tab - To update the localization label for Custom Layout

       8. Add the product into a quote and open the configuration page to view the custom layout.

The images below show the layout of a product configurator, with custom layout and without customer layout.

Below shows the product configuration layout with Custom Layout applied The Default Group contains the DAs found in the product model but does not define in a custom layout.

Below shows the product configuration layout rendered from the knowledge base.

The below screen shows the product configuration layout with Custom Layout applied and the Fluid View is enabled.

If the fluid view setting is disabled on the custom layout but it is enabled from the user preference, the setting on the user preference will overwrite the settings from the custom layout.