Example of Using the Grid Layout Group Theme
This topic gives one example of using the grid layout group theme. You might use this feature differently, depending on your business model.
The product administrator has created a product called Car that has four attributes: Manufacturer, Model, Color, and Year. The administrator wants to display the attributes Manufacturer and Model grouped together in the first row, and the attributes Color and Year grouped together in the second row.
To use the Grid Layout Group Theme
Select the desired group.
In the Group Theme pick applet, make sure that the Group Theme is GridLayout Group Theme JS.
Note: If the GridLayout Group Theme JS is not available within the Group Theme pick applet, then manually create a record within the Group Theme pick applet and map it to the eCfgGroupGridLayoutJS file.In the Group Item List applet, create the attribute controls.
Create the attribute control for Manufacturer by completing the necessary fields as described in the following table.
Field Value Name
Enter Manufacturer.
Type
Select Attribute.
Sequence
Enter 1.
UI Control
Select Edit Box for Attribute JS.
Create the attribute control for Model by completing the necessary fields as described in the following table.
Field Value Name
Enter Model.
Type
Select Attribute.
Sequence
Enter 2.
UI Control
Select Edit Box for Attribute JS.
Create the attribute control for Color by completing the necessary fields as described in the following table.
Field Value Name
Enter Color.
Type
Select Attribute.
Sequence
Enter 3.
UI Control
Select Edit Box for Attribute JS.
Create the attribute control for Year by completing the necessary fields as described in the following table.
Field Value Name
Enter Year.
Type
Select Attribute.
Sequence
Enter 4.
UI Control
Select Edit Box for Attribute JS.
Select the Properties Detail tab.
In the explorer display of the product, expand UI Options.
Select the desired Group and create a new record in the Properties list by completing the necessary fields as described in the following table.
Field Comments Name
Enter NumofCol.
Value
Enter 2.
In the explorer display of the product, expand the desired group.
Select Control Item.
Click the Properties tab.
Select the Manufacturer Control Item and create a new record in the Properties list by completing the necessary fields as described in the following table.
Field Comments GridBegin
Enter {1,1}.
GridEnd
Enter {1,2}.
Select the Model Control Item and create a new record in the Properties list by completing the necessary fields as described in the following table.
Field Comments GridBegin
Enter {1,3}.
GridEnd
Enter {1,4}.
Select the Color Control Item and create a new record in the Properties list by completing the necessary fields as described in the following table.
Field Comments GridBegin
Enter {2,1}.
GridEnd
Enter {2,2}.
Select the Year Control Item and create a new record in the Properties list by completing the necessary fields as described in the following table.
Field Comments GridBegin
Enter {2,3}.
GridEnd
Enter {2,4}.
When the product administrator validates the model, attributes Manufacturer and Model will be displayed in the first row and attributes Color and Year will displayed in the second row. Note that each control is processed and rendered to the grid table sequentially; from each side of the grid table, from start to end. The sequence is decided by Group Item sequence.