CloudBlue Commerce API
Last updated 03-Apr-2024
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.
In this document:
Messages¶
Applications can display and remove messages using the aps/Message module within the aps/MessageList container.
Get more details at Widget description.
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 a format to present a list of resources, either
in aps/Grid or aps/Tiles format.
Get more details at Widget description.
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 tool 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.
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.
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.
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¶
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¶
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¶
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.
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.
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"
}]
]]);
});