Grid Component UDRs

The following section explains the UDRs that can be used to create a grid component.

Grid UDR

The Grid UDR is the first UDR that is required to make a layout with rows and columns.

The following fields are included in the Grid UDR:

Field

Description

Field

Description

attributes (map<string,string>)

This field may contain extra attributes to be added.

cssClasses (list<string>)

This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap.

For example, to align all components in the middle text-center can be added.

id (string)

This field may contain the id of the component

rows (list<GridRowUDR>)

This field contains a list of GridRow UDRs.

GridColumn UDR

The GridColumn UDR is used to create a column inside a GridRow.

To design the grid there is a width field that can have a value from 1-12. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Width indicate the number of template columns to span (example, 4 spans four out of 12, so this column will take 33.3% width of the total number of columns). Actual width on page are set in percentages so you always have the same relative sizing. See example:

The following fields are included in the GridColumn UDR:

Field

Description

Field

Description

attributes (map<string,string>)

This field may contain extra attributes to be added.

breakPoint (string)

This field may contain a break point that is widths that determine how your responsive layout behaves across device or viewport sizes. Possible values are:
sm (small >= 576px),
md (medium >= 768px),
lg (large >=992px),
xl (extra large >= 1200px) and
xxl (extra extra large >=1400px)

Please read more on Bootstrap.

components (list<ComponentUDR>)

This field contain a list of child components, the components that will present in the column.

cssClasses (list<string>)

This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap.

id (string)

This field may contain the id of the component

width (int)

This field may contain a width value. Possible values are 1-12.
There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Width indicate the number of template columns to span (e.g., 4 spans four out of 12, so this column will take 33.3% width of the total number of columns). Actual width on page are set in percentages so you always have the same relative sizing.
Default is auto, the column will take as much as it get.

GridRow UDR

The GridRow UDR is used to create a grid row with one or many columns.

The following fields are included in the GridRow UDR:

Field

Description

Field

Description

columns (list<GridColumnUDR>)

This field contain a list of GridColumn UDRs.

cssClasses (list<string>)

This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap.