Layout Code Examples

The JavaScript code in this document helps you find typical solutions for your custom UI based on the APS JS API. The examples below implement the recommended widget layouts and widget hierarchy illustrated in the Widget Hierarchy section.

Messages

Applications can display and remove messages using the aps/Message module within the aps/MessageList container.

Get more details at Widget description.

RUN DEMO

require(["aps/load", "aps/ready!"],
function(load) {
    "use strict";
    load(["aps/PageContainer", [
        ["aps/Message", {
            description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit: 1. sed do eiusmod tempor 2. incididunt ut labore et dolore magna aliqua.",
            type: "danger"
        }, [
            ["aps/Output", {content: "Insert aps/Output if an HTML code is needed: 1. sed do eiusmod tempor 2. incididunt ut labore et dolore magna aliqua." }]
        ]
        ],
        ["aps/Message", {
                description: "Warning! This is description with a button",
                type: "warning"
            },
            [
                ["aps/Button", {
                    iconClass: "fa-refresh",
                    autoBusy: false,
                    title: "Reload",
                    onClick: function() {
                        alert('action');
                    }
                }]
            ]
        ],
        ["aps/Message", {
            description: "Success: This is description",
            type: "success"
        }],
        ["aps/Message", {
            description: "Info: This is description of message",
            type: "info"
        }],
        ["aps/Message", {
                description: "There is a lack of resources",
                closeable: false,
                type: "warning"
            },
            [
                ["aps/Button", {
                    type: "primary",
                    iconClass: "fa-shopping-cart",
                    autoBusy: false,
                    title: "Upgrade",
                    onClick: function() {
                        alert('action');
                    }
                }]
            ]
        ]
    ]]);
});

List Switcher

An aps/ListSwitcher container allows a user to select one of forms to present a list of resources, either in aps/Grid or aps/Tiles format.

Get more details at Widget description.

RUN DEMO

require(["aps/load",
	"aps/Memory",
	"dojox/mvc/at",
	"aps/ready!"
], function (load, Memory, at) {
	// Common data source
	var data = [
	// Array contents starts from here
// Array contents ends here
	}];

	// Make data source Stateful
	var store = new Memory({
		data: data,
		idProperty: "aps.id"
	});
	// Make Grid layout
	var gridlayout = [{
		"name": "Name VPS",
		"field": "info.title"
	}, {
		"name": "Disk space",
		"field": "params.disk"
	}, {
		"name": "RAM",
		"field": "params.ram"
	}, {
		"name": "CPU",
		"field": "params.cpu"
	}];
	// Make List Switcher
	load(["aps/ListSwitcher",
	{
		store: store,
		labelAttr: "info.title"
	},
	// First view mode - 'aps/Tiles'
	[
		["aps/Tiles", [
			["aps/Tile",
			{
				title: at("rel:info", "title"),
				gridSize: "md-6"
			}, [
				["aps/FieldSet", [
					["aps/Gauge",
					{
						label: "Disk Space",
						gridSize: "md-4 xs-12",
						maximum: 1000,
						legend: "${value} of ${maximum} GB",
						value: at("rel:params", "disk")
					}],
					["aps/Gauge",
					{
						label: "RAM Space",
						gridSize: "md-4 xs-12",
						maximum: 1024,
						legend: "${value} of ${maximum} MB",
						value: at("rel:params", "ram")
					}],
					["aps/Gauge",
					{
						label: "CPU Power",
						gridSize: "md-4 xs-12",
						maximum: 1000,
						legend: "${value} of ${maximum} MHz",
						value: at("rel:params", "cpu")
					}]
				]]
			]]
		]],
		// Second view mode - 'aps/Grid'
		["aps/Grid",
		{
			rowsPerPage: 2,
			columns: gridlayout
		}, []]
	]]);
});

Widget List

An aps/WidgetList container is the most useful to present a dynamic list of panels, each containing output and input widgets. Typically, the container maps to a uniform data store with properties arranged in rows. In this case, each panel maps to its own row.

Get more details at Widget description.

RUN DEMO

require(["aps/load", "dojox/mvc/getStateful", "dojox/mvc/at", "aps/ready!"],
function (load, getStateful, at) {
	"use strict";
	var model = new getStateful({
		"identifier": "id",
		"items": [{
			id: "1",
			email: "max@parallels.com",
			user: "Max"
		}, {
			id: "2",
			email: "tim@parallels.com",
			user: "Tim"
		}]
	});
	load(["aps/PageContainer", [
		["aps/WidgetList",
		{
			showAddRemove: false,
			children: at(model, "items")
		}, [
			["aps/Panel",
			{
				title: "New User"
			}, [
				["aps/FieldSet", [
					["aps/TextBox",
					{
						label: "Email",
						required: true,
						value: at("rel:", "email")
					}],
					["aps/TextBox",
					{
						label: "Name",
						value: at("rel:", "user")
					}]
				]],
				["aps/Toolbar", [
					["aps/Button",
					{
						autoBusy: false,
						label: _("One More User"),
						iconClass: "fa-plus",
						isDefault: true,
						onClick: function () {
							alert("Add action");
						}
					}],
					["aps/Button",
					{
						autoBusy: false,
						_relToUser: at("rel:"),
						label: _("Remove User"),
						iconClass: "fa-times",
						onClick: function () {
							alert("Remove action");
						}
					}]
				]]
			]]
		]]
	]]);
});

Toolbar

An aps/Toolbar container is used to arrange a set of aps/Button widgets in a row.

Get more details at Widget description.

RUN DEMO

require(["aps/load", "aps/ready!"], function (load) {
	load(["aps/PageContainer", [
		["aps/Toolbar", [
			["aps/Button",
			{
				type: "primary",
				iconClass: "fa-plus",
				//disabled: true,
				timeout: 1000,
				busyLabel: "All in One",
				//autoBusy: false,
				title: "All in One"
			}],
			["aps/Button",
			{
				type: "default",
				title: "Default"
			}],
			["aps/Button",
			{
				type: "primary",
				title: "Primary"
			}],
			["aps/Button",
			{
				type: "success",
				title: "Success"
			}],
			["aps/Button",
			{
				type: "info",
				title: "Info"
			}],
			["aps/Button",
			{
				type: "warning",
				title: "Warning"
			}],
			["aps/Button",
			{
				type: "danger",
				iconClass: "fa-close",
				title: "Danger"
			}],
			["aps/Button",
			{
				type: "link",
				iconClass: "fa-external-link",
				title: "Link",
				autoBusy: false
			}]
		]]
	]]);
});

Grid

An aps/Grid container is a powerful tool to present a list of resources in a table with filtering and sorting capabilities. Typically, it contains an aps/Toolbar to process resources selected individually or in a group.

Get more details at Widget description.

RUN DEMO

require(["aps/load", "aps/Memory", "aps/Switch", "aps/DropDownButton", "aps/Output", "aps/Status", "aps/TextBox", "aps/DateTextBox", "aps/Gauge", "aps/Spinner", "aps/Password", "aps/ready!"],
function (load, Memory, Switch, DropDownButton, Output, Status, TextBox, DateTextBox, Gauge, Spinner, Password) {
	var testStore = new Memory({
		data: [
// Array contents starts from here
// Array contents ends here
	]});

	load(["aps/PageContainer", [
	//---------------------------------------------
	["aps/Grid",
	{
		id: 'grid',
		//selectionMode: 'single',
		rowsPerPage: 3,
		//showPaging: false,
		//showFilterToggle: true,
		//mobileLayout: "grid",
		//short
		//onRowClick: function () {},
		columns: [{
			name: 'Name',
			field: 'first_name',
			type: 'label',
			nowrap: true,
			filter: {
				title: "Name"
			}
		}, {
			name: 'E-Mail',
			field: 'email',
			filter: {
				title: "Long E-Mail filter name"
			}
		}, {
			name: 'Shown for mobile',
			field: "disk_space",
			hideFor: 'md',
			renderCell: function (row, state) {
				switch (row.id) {
				default:
					return new Gauge({
						label: "Disk Usage",
						legend: "${value} GB used of ${maximum} GB",
						maximum: 500,
						value: state
					});
					break;
				case 1:
					return new Status({
						status: 'disabled'
					});
					break;
				}
			}
		}, {
			name: 'Phone',
			field: 'phone',
			nowrap: true
		}, {
			name: "Widgets List",
			field: "disk_space",
			description: "Hidden for mobile",
			align: 'right',
			hideFor: 'xs',
			renderCell: function (row, state) {
				switch (row.id) {
				case 1:
					return new Output({
						value: "Output text"
					});
					break;
				case 2:
					return new Status({
						status: "loading",
						statusInfo: {
							loading: {
								"label": "Expired",
								"type": "warning"
							}
						}
					});
					break;
				case 3:
					return new Gauge({
						legend: "${value} value of ${maximum} maximum",
						minimum: 0,
						maximum: 500,
						value: state
					});
					break;
				case 4:
					return new TextBox();
					break;
				case 5:
					return new Password({
						value: "Password"
					});
					break;
				case 6:
					return new Spinner({
						value: "100"
					});
					break;
				case 7:
					return new DateTextBox();
					break;
				case 8:
					var cn = new DropDownButton({
						label: 'Actions',
						items: [{
							type: "default",
							label: "Default action"
						}, {
							type: "primary",
							label: "Primary action"
						}, {
							type: "success",
							label: "Success action"
						}, {
							type: "info",
							label: "Info action"
						}, {
							type: "warning",
							label: "Link action with long long text"
						}, {
							type: "separator"
						}, {
							disabled: true,
							label: "Disabled action"
						}]
					});
					return cn;
					break;
				case 9:
					return new Switch({
						status: "on",
						onClick: function () {
							this.set("status", "off");
						}
					});
					break;
				default:
					return new Output({
						alertType: 'danger',
						value: 'Output danger'
					});
					break;
				}
			}
		}],
		sort: {
			attribute: 'name',
			descending: true
		},
		store: testStore
	}]
	//---------------------------------------------
	]]);
});

Tiles

Similar to aps/Grid, an aps/Tiles container is used to present a list of resources, but for this purpose it must include aps/Panel containers.

Get more details at Widget description.

Tiles with Radio Buttons and Checkboxes

RUN DEMO

require([
	"aps/load",
	"aps/Memory",
	"aps/Status",
	"aps/ready!"
	],
	function(load, Memory, Status) {
    load(["aps/PageContainer", [
            ["aps/Tiles", {
                    title: "Radio Tiles",
                    selectionMode: 'single',
                    required: true
                },
                [
                    ["aps/Tile", {
                            title: 'Service Plan 1',
                            gridSize: 'md-4'
                        },
                        [
                            ["aps/Output", {
                                value: "Lorem ipsum dolor sit amet, consectetur adipisicing"
                            }]
                        ]
                    ],
                    ["aps/Tile", {
                            title: 'Service Plan 2',
                            gridSize: 'md-4'
                        },
                        [
                            ["aps/Output", {
                                value: "Sed do eiusmod tempor incididunt ut labore et"
                            }]
                        ]
                    ],
                    ["aps/Tile", {
                            title: 'Service Plan 3',
                            gridSize: 'md-4',
                            info: new Status({
                                status: "custom",
                                statusInfo: {
                                    custom: {
                                        label: "New",
                                        type: "warning"
                                    }
                                }
                            })
                        },
                        [
                            ["aps/Output", {
                                value: "Lorem ipsum dolor sit amet, consectetur adipisicin"
                            }],
                            ["aps/Container", [
                                ["aps/Status", {
                                    status: "custom",
                                    statusInfo: {
                                        custom: {
                                            label: "Free Trial Available",
                                            type: "warning"
                                        }
                                    }
                                }]
                            ]]
                        ]
                    ]
                ]
            ],
            ["aps/Tiles", {
                    title: "Checkbox Tiles",
                    selectionMode: 'multiple'
                },
                [
                    ["aps/Tile", {
                            title: 'Package 1',
                            gridSize: 'md-3'
                        },
                        [
                            ["aps/Output", {
                                value: "Lorem ipsum dolor sit amet, consectetur"
                            }]
                        ]
                    ],
                    ["aps/Tile", {
                            title: 'Package 2',
                            gridSize: 'md-3',
                            info: new Status({
                                status: "custom",
                                statusInfo: {
                                    custom: {
                                        label: "New",
                                        type: "warning"
                                    }
                                }
                            })
                        },
                        [
                            ["aps/Output", {
                                value: "Lorem ipsum dolor sit amet"
                            }],
                            ["aps/Container", [
                                ["aps/Status", {
                                    status: "custom",
                                    statusInfo: {
                                        custom: {
                                            label: "Free Trial Available",
                                            type: "warning"
                                        }
                                    }
                                }]
                            ]]
                        ]
                    ],
                    ["aps/Tile", {
                            title: 'Package 3',
                            gridSize: 'md-3',
                            disabled: true
                        },
                        [
                            ["aps/Output", {
                                value: "Lorem ipsum dolor sit amet, consectetur adipisicing elit"
                            }]
                        ]
                    ],
                    ["aps/Tile", {
                            title: 'Package 4',
                            gridSize: 'md-3'
                        },
                        [
                            ["aps/Output", {
                                value: "Lorem ipsum dolor sit amet, consectetur adipisicing"
                            }]
                        ]
                    ]
                ]
            ]
        ]]
    );
});

Tiles with Custom Styles

RUN DEMO

require([
        "aps/load",
        "aps/Memory",
        "aps/Status",
        "aps/ready!"
    ],
    function(load, Memory, Status) {
        load(["aps/PageContainer", [
            ["aps/Tiles", {
                    title: "Service Tiles"
                },
                [
                    ["aps/Tile", {
                            id: 'custom-1',
                            title: 'Service Title',
                            hint: '#Subscription Name',
                            iconName: '/ppanel-theme/images/logos/panel-logo.png',
                            //backgroundImage: '/UI-Kit/TEMP/ServiceTiles/0.png',
                            //fontColor: '#fff',
                            //backgroundColor: '#40a79c',
                            serviceDescription: 'This tile have not any font and background colors, yea it is default style for not branded tiles',
                            state: 'inactive',
                            info: new Status({
                                status: "trial",
                                statusInfo: {
                                    trial: {
                                        label: 'Free Trial Available',
                                        icon: "fa-clock",
                                        type: 'warning'
                                    }
                                }
                            }),
                            onClick: function() {
                                this.set('state', 'inProgress');
                                this.set('serviceDescription', 'Ohh, this is serviceDescription text for inProgress state. Usually it need for short description about timeline');
                                setTimeout(function() {
                                    dijit.registry.byId('custom-1').set('state', 'ready');
                                    dijit.registry.byId('custom-1').set('serviceDescription', '');
                                }, 2000);
                            },
                            buttons: [{
                                title: "Button",
                                iconClass: "fa-plus",
                                autoBusy: false
                            }]
                        },
                        [
                            ["aps/UsageInfo", {
                                value: 14,
                                maximum: 100,
                                textFirstNumber: '${value}',
                                description: 'Total',
                                showPie: false
                            }]
                        ]
                    ],
                    ["aps/Tile", {
                            state: 'inactive',
                            id: "custom-2",
                            title: "Custom Tile 2",
                            iconName: '/ppanel-theme/images/logos/panel-logo.png',
                            backgroundImage: '/_images/tile-composition-direction.png',
                            fontColor: '#fff',
                            backgroundColor: '#c00',
                            serviceDescription: 'This tile have not any font and background colors, yea it is default style for not branded tiles',
                            onClick: function() {
                                this.set('state', 'inProgress');
                                this.set('serviceDescription', 'Ohh, this is serviceDescription text for inProgress state. Usually it need for short description about timeline');
                                setTimeout(function() {
                                    dijit.registry.byId('custom-2').set('state', 'ready');
                                    dijit.registry.byId('custom-2').set('serviceDescription', '');
                                }, 2000);
                            },
                            buttons: [{
                                title: "Button",
                                iconClass: "fa-plus",
                                autoBusy: false
                            }]
                        },
                        [
                            ["aps/FieldSet", [
                                ["aps/Output", {
                                    gridSize: "md-6 xs-6",
                                    label: "Label",
                                    value: "Output text"
                                }],
                                ["aps/Status", {
                                    gridSize: "md-6 xs-6",
                                    label: "Label",
                                    status: "custom",
                                    statusInfo: {
                                        custom: {
                                            label: "Status text",
                                            type: "warning"
                                        }
                                    }
                                }]
                            ]]
                        ]
                    ],
                    ["aps/Tile", {
                            state: 'ready',
                            title: "Default Tile",
                            iconName: '/ppanel-theme/images/logos/panel-logo.png',
                            info: new Status({
                                status: "trial",
                                statusInfo: {
                                    trial: {
                                        label: 'Expired',
                                        icon: "fa-clock",
                                        type: 'danger'
                                    }
                                }
                            }),
                            onClick: function() {
                                alert("Tile action");
                            },
                            buttons: [{
                                title: 'Action Button',
                                items: [{
                                    iconClass: "fa-cog",
                                    title: 'View Settings',
                                    onClick: function() {
                                        alert("Action 1");
                                    }
                                }, {
                                    iconClass: "fa-minus-circle",
                                    title: 'Disable Widget',
                                    onClick: function() {
                                        alert("Action 2");
                                    }
                                }]
                            }]
                        },
                        [
                            ["aps/FieldSet", [
                                ["aps/Status", {
                                    label: "Label",
                                    status: "custom",
                                    statusInfo: {
                                        custom: {
                                            label: "Status text",
                                            type: "danger"
                                        }
                                    }
                                }]
                            ]]
                        ]
                    ]
                ]
            ]
        ]]);
    });

Tiles with various Resource Presentation

RUN DEMO

require([
        "aps/load",
        "aps/Memory",
        "aps/Status",
        "aps/ready!"
    ],
    function(load, Memory, Status) {
        load(["aps/PageContainer", [
            ["aps/Tiles", {
                    title: "Tiles Examples"
                },
                [
                    ["aps/Tile", {
                            title: "Usage Info Tile",
                            gridSize: "md-4",
                            isBusy: true,
                            hint: "#APPLICATION 1",
                            onClick: function() {
                                alert("Tile action");
                            }
                        },
                        [
                            ["aps/UsageInfo", {
                                textPrefix: 'Pre',
                                textFirstNumber: 'X',
                                textSecondNumber: 'Y',
                                textSuffix: 'Unit',
                                description: 'Text #1',
                                hint: 'Text #2',
                                showPie: false
                            }]
                        ]
                    ],
                    ["aps/Tile", {
                            title: "Usage Info Tile",
                            gridSize: "md-4",
                            hint: "#APPLICATION 2",
                            onClick: function() {
                                alert("Tile action");
                            }
                        },
                        [
                            ["aps/UsageInfo", {
                                textPrefix: 'Pre',
                                textFirstNumber: 'X',
                                textSecondNumber: 'Y',
                                textSuffix: 'Unit',
                                description: 'Text #1',
                                hint: 'Text #2',
                                value: 50
                            }]
                        ]
                    ],
                    ["aps/tiles/PieTile", {
                        title: "PieTile",
                        gridSize: "md-4",
                        maximum: 100,
                        value: 91,
                        legend: "${value}GB of ${maximum}GB used"
                    }],
                    ["aps/Tile", {
                            gridSize: "md-6 xs-12",
                            title: "Tile 50%",
                            onClick: function() {}
                        },
                        [
                            ["aps/FieldSet", [
                                ["aps/Output", {
                                    gridSize: 'md-4 xs-6',
                                    label: "Output",
                                    description: "Description",
                                    value: "Output text value"
                                }],
                                ["aps/Gauge", {
                                    gridSize: 'md-4 xs-6',
                                    label: "Gauge",
                                    description: "Description",
                                    legend: "${value} value of ${maximum} maximum",
                                    minimum: 0,
                                    maximum: 10,
                                    value: 7
                                }],
                                ["aps/Status", {
                                    gridSize: 'md-4 xs-6',
                                    label: 'Status',
                                    description: "Description",
                                    status: "custom",
                                    statusInfo: {
                                        custom: {
                                            label: "Custom Status",
                                            icon: "fa-circle-o",
                                            type: "success"
                                        }
                                    }
                                }],
                                ["aps/Switch", {
                                    gridSize: 'md-4 xs-6',
                                    label: "Switch",
                                    description: "Description",
                                    status: "on",
                                    onClick: function() {
                                        this.set("status", "off");
                                    }
                                }],
                                ["aps/Container", {
                                        gridSize: 'md-8 xs-12',
                                        label: "Outputs Inline"
                                    },
                                    [
                                        ["aps/Output", {
                                            alertType: "success",
                                            value: "Success,"
                                        }],
                                        ["aps/Output", {
                                            alertType: "info",
                                            value: "Info,"
                                        }],
                                        ["aps/Output", {
                                            alertType: "warning",
                                            value: "Warning,"
                                        }],
                                        ["aps/Output", {
                                            alertType: "danger",
                                            value: "Danger"
                                        }]
                                    ]
                                ]
                            ]]
                        ]
                    ],
                    ["aps/Tile", {
                            title: "Tile 25%",
                            gridSize: "md-3 xs-12",
                            onClick: function() {},
                            buttons: [{
                                label: "Pay Now",
                                iconClass: "fa-shopping-cart",
                                type: "warning"
                            }]
                        },
                        [
                            ["aps/UsageInfo", {
                                value: 199.99,
                                precision: 2,
                                textPrefix: '$',
                                textFirstNumber: '${value}',
                                description: 'Outstanding Invoices',
                                showPie: false
                            }],
                            ["aps/Container", [
                                ["aps/Status", {
                                    status: "custom",
                                    statusInfo: {
                                        custom: {
                                            label: "2 day left",
                                            type: "warning"
                                        }
                                    }
                                }]
                            ]]
                        ]
                    ],
                    ["aps/Tile", {
                            title: "Tile 25%",
                            gridSize: "md-3 xs-12",
                            onClick: function() {}
                        },
                        [
                            ["aps/Container", [
                                ["aps/Status", {
                                    status: "custom",
                                    statusInfo: {
                                        custom: {
                                            label: "myotherwebsite.com",
                                            icon: "fa-check",
                                            type: "success"
                                        }
                                    }
                                }]
                            ]],
                            ["aps/Container", [
                                ["aps/Status", {
                                    status: "custom",
                                    statusInfo: {
                                        custom: {
                                            label: "wordpress.myotherwebsite.com",
                                            icon: "fa-minus",
                                            type: "danger"
                                        }
                                    }
                                }]
                            ]]
                        ]
                    ]
                ]
            ]
            //---------------------------------------------
        ]]);
});

Panel

The aps/Panel module is used to create a universal container to show and edit multiple properties of a resource.

Get more details at Widget description.

RUN DEMO

require(["aps/load", "aps/Memory", "aps/Status", "dojox/mvc/StatefulArray", "aps/ready!"],
function (load, Memory, Status, StatefulArray) {

	load(["aps/PageContainer", [
	//---------------------------------------------
	["aps/Panel",
	{
		title: "Panel"
	}, [
		["aps/FieldSet", [
			["aps/Gauge",
			{
				gridSize: 'md-3',
				label: "Gauge",
				description: "Description",
				legend: "${value} value of ${maximum} maximum",
				minimum: 0,
				maximum: 10,
				value: 7
			}],
			["aps/Output",
			{
				gridSize: 'md-3',
				label: "Output",
				description: "Description",
				value: "Output text value"
			}],
			["aps/TextBox",
			{
				gridSize: "md-3",
				label: "TextBox",
				description: "Description",
				placeholder: "Enter data",
				legend: "Unit",
				required: true
			}],
			["aps/Password",
			{
				gridSize: "md-3",
				label: "Password",
				description: "Description",
				required: true
			}],
			["aps/DateTextBox",
			{
				gridSize: "md-3",
				label: "DateTextBox",
				description: "Description",
				placeholder: "Enter data",
				required: true
			}],
			["aps/Spinner",
			{
				gridSize: "md-3",
				label: "Spinner",
				description: "Description",
				placeholder: "Enter data",
				legend: "Unit",
				minimum: 1,
				maximum: 3,
				required: true
			}],
			["aps/ComboBox",
			{
				gridSize: "md-3",
				label: "ComboBox",
				description: "Description",
				placeholder: "Enter data",
				store: new Memory({
					data: [{
						name: "Washington"
					}, {
						name: "Florida"
					}, {
						name: "California"
					}]
				}),
				required: true
			}],
			["aps/Select",
			{
				gridSize: "md-3",
				label: "Select",
				description: "Description",
				options: [{
					label: "WA",
					value: "Washington",
					disabled: true
				}, {
					label: "FL",
					value: "Florida",
					selected: true
				}, {
					label: "CA",
					value: "California"
				}],
				required: true
			}],
			["aps/CheckBox",
			{
				gridSize: "md-2",
				label: "CheckBox",
				description: "Description",
				hint: "Hint text",
				required: true
			}],
			["aps/RadioButton",
			{
				gridSize: "md-2",
				label: "RadioButton",
				description: "Description",
				hint: "Hint text",
				required: true
			}],
			["aps/Status",
			{
				gridSize: "md-2",
				label: 'Status',
				description: "Description",
				status: "custom",
				statusInfo: {
					custom: {
						label: "Custom Status",
						icon: "fa-circle-o",
						type: "success"
					}
				}
			}],
			["aps/Button",
			{
				id: "tooltip",
				gridSize: "md-2",
				label: "Button",
				description: "Description",
				type: "primary",
				iconClass: "fa-plus",
				title: "Button"
			}],
			["aps/Switch",
			{
				gridSize: "md-2",
				label: "Switch",
				description: "Description",
				status: "on",
				onClick: function () {
					this.set("status", "off");
				}
			}],
			["aps/Tooltip",
			{
				connectId: ["tooltip"],
				label: "Tooltip text shown on mouseover for linked ID"
			}],
			["aps/TextArea",
			{
				gridSize: "md-6",
				label: "TextArea",
				description: "Description",
				placeHolder: "Enter data",
				rows: 3,
				required: true
			}],
			["aps/MultiSelect",
			{
				gridSize: "md-6",
				label: "MultiSelect",
				description: "Description",
				titleLeft: "Available",
				titleRight: "Selected",
				store: new Memory({
					data: [{
						id: "array1",
						name: "Washington"
					}, {
						id: "array2",
						name: "Florida"
					}, {
						id: "array3",
						name: "California"
					}]
				}),
				values: new StatefulArray([0]),
				labelAttr: "name"
			}],
			["aps/Pie",
			{
				gridSize: "md-4",
				label: "Pie (simple)",
				description: "${percent}% Usage",
				maximum: 200,
				value: 129.12,
				legend: "of ${maximum}GB Disc Space"
			}],
			["aps/UsageInfo",
			{
				gridSize: "md-4",
				label: "UsageInfo (full)",
				textPrefix: 'Pre',
				textFirstNumber: 'X',
				textSecondNumber: 'Y',
				textSuffix: 'Unit',
				description: 'Text #1',
				hint: 'Text #2',
				maximum: 100,
				value: 38
			}],
			["aps/UsageInfo",
			{
				gridSize: "md-4",
				label: "UsageInfo (example)",
				textPrefix: '$',
				textFirstNumber: '${value}',
				textSecondNumber: 'month',
				textSuffix: 'PRO Service Plan',
				description: '$${maximum}/year',
				hint: 'if renew subscription today',
				maximum: 199.99,
				value: 19,
				showPie: false
			}]
        ]]
	]]
	//---------------------------------------------
	]]
);});

Container

On the topmost level of UI structure, an aps/Container is used only to show some data by means of aps/Output widgets. In the other cases, it arranges several widgets in a line under a common title.

Get more details at: Widget description.

RUN DEMO

require([
	"aps/load",
	"aps/ready!"
], function (load) {
	"use strict";
	load(["aps/PageContainer", [
		["aps/Container",
		{
			title: "Page Section Title"
		}, [
			["aps/Output",
			{
				content: "Used to add page description with a Container title or without it."
			}]
		]],
		["aps/Panel",
		{
			title: "Panel"
		}]
	]]);
});