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
id	Unique identifier of this widget.	string
type	Rich-media type, which is always ColumnSet.	string

Column properties

Property	Description	Data type
align	Alignment of items within this column, which is one of: top(default) | middle | bottom.	enum
items	Array of rich-media widgets in this column.	string
spaceAround	Array of values for top , right, bottom, and left padding, in pixels.	string
width	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 "
                                }
                            ]
                        }
                    ]
                }
            }
        }
    ]
}