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:
Settings |
Description |
Level |
|||
---|---|---|---|---|---|
System |
Custom Layout |
Dynamic Attribute |
User Preference
|
||
EnableCustomLayout |
A global setting to enable/disable Custom Layout Feature:
Administration -> Master Data Management -> Setting Boolean |
x |
|
|
|
EnableFluidView |
This setting is to enable/disable fluid view for a custom layout or at User Preference level.
This setting can be found at the Custom Layout Overview and User Preference (when Configurator Pagination Mode is enabled)
FluidView applies to products that are with or without Custom Layout |
|
x |
|
x (Highest priority) |
AttributeValueOptionThreshold |
The threshold number for Dynamic Attribute (DA) values to display with/without scroll bar.
This setting can be found at the Custom Layout Overview and User Preference (when Configurator Pagination Mode is enabled)
It is applied to both single and multiple value selection UI control. |
|
x |
|
x (Highest priority) |
DA Enumerable Single Value Control/ DA Enumerable Multi Value Control |
To set the control for each DA (i.e. radio buttons and check boxes)
|
|
|
x |
|
List of UI Controls Supported by Configurator
Below is the list of UI controls supported:
No |
Control |
Data Type |
Example |
---|---|---|---|
1. |
Text field |
String, Number |
Existing |
2. |
Boolean selector |
Boolean |
Existing |
3. |
Date Selector |
Date |
Existing |
4. |
Text field with Currency Selector |
Number/Currency |
Existing |
5. |
Single Value Select Drop Down |
String, Number |
Existing The select value options will be populated when the user clicks on the attribute. |
6. |
Multi Value Select Drop Down |
String, Number |
Existing |
7. |
Number Selector |
Number |
New
|
8. |
Open Display Single Value Select Radio Box* |
String |
New |
9. |
Open Display Multiple Value Select Check Box* |
String |
New |
10. |
Multi-line String Control |
String |
New |
* The Open Display UI Control is suitable for attributes with less select value options.
Steps to setup
- 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
- 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.
- Active – The settings to activate / de-activate a custom layout.
- Enable Configurator Fluid View – The setting to enable / disable fluid view by default for a custom layout.
- 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:
- 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.
Comments
0 comments
Article is closed for comments.