Column-set widget
The column-set widget contains other rich-media items. This widget places each of these items in a separate column, so that they are separated vertically when displayed.
Example
Properties
Property |
Description |
Data type |
---|---|---|
|
Unique identifier of this widget. |
string |
type
|
Rich-media type, which is always ColumnSet . |
string |
Column properties
Property |
Description |
Data type |
---|---|---|
|
Alignment of items within this column, which is one of: |
enum |
|
Array of rich-media widgets in this column. |
string |
|
Array of values for top , right, bottom, and left padding, in pixels. |
string |
|
Column width, which is a number between 1 to 12 , where 12 is the maximum available column width. |
integer |
Code sample
var obj = { "widgetType": "form", "nodes": [{ "id": "widget1", "controls": { "0": { "type": "Heading", "text": "This is heading", "level": 2 }, "1": { "type": "ColumnSet", "containerSpace": 5, "columns": [{ "type": "Column", "width": 10, "items": [{ "type": "Heading", "text": "Payment Details", "level": 3, "context": { "textAlign": "left" } }, { "type": "ColumnSet", "spaceAround": [5, 5, 5, 5], "columns": [{ "type": "Column", "width": 8, "items": [{ "type": "Paragraph", "text": "Gates Foundation" }, { "type": "Paragraph", "text": "XXXX-XXXX-XXXX-1268" }, { "type": "ColumnSet", "columns": [{ "type": "Column", "width": 6, "items": [{ "type": "Paragraph", "text": "01/19" } ] }, { "type": "Column", "width": 6, "items": [{ "type": "Paragraph", "text": "555" } ] } ] } ] }, { "type": "Column", "width": 4, "align": "top", "items": [{ "type": "Image", "src": ["https://via.placeholder.com/60"], "size": { "width": 60, "height": 60 } } ] } ] } ] }, { "type": "Column", "width": 2, "align": "middle", "items": [{ "type": "Paragraph", "text": "lorrel ipsum lorrel " } ] } ] } } } ] }