In this document:
Control panel of the management platform responds to the two different formats by applying one of the following CSS classes when respectively the md or xs device mode is detected:
ccp-md
ccp-xs
Compare UI in two modes:
In the md mode, a screen can display several views. In the following example, it contains:
Navigation panel
Add New Users view
Notification panel
In the xs mode, the same views are displayed in different screens that a user has to switch to:
Note
In the xs mode, the menu icon on top right is used to switch to the navigation panel.
By default, all widgets are aligned in a single column, since the default definition for a JS component
is gridSize: "md-12 xs-12"
.
Recall, an aps/Grid widget usually contains definition of the following components.
aps/Toolbar
with aps/ToolbarButton
widgets inside it.
columns
of different types influencing the responsiveness:
type: "resourceName"
marks the column that will be rendered as a link directing a user to the view
whose ID is specified by the apsResourceViewId
property of the grid.
type: "icon"
indicates status of the object presented by a row.
type: "label"
has no affect on the md mode, but is used in the xs mode as the title of tile elements
as described later.
Warning
A column of this type can contain text only, it should not contain any variables.
selectionMode:"multiple"
or selectionMode:"single"
forces
the grid to display the first column with check-boxes or radio-buttons respectively for row selection.
Some buttons in a toolbar may require selection of at least one row - requireItems
or requireSingleItem
.
Transformation from the md mode to the xs mode complies with the following rules:
Toolbar transforms as follows:
The buttons that require row selection by means of the requireItems:true
or requireSingleItem:true
property are missed out.
The other buttons are placed in a single column.
A table looks like a set of tiles aligned in a single column. Each tile presents a single object and contains the following components:
Title is assigned the value from one of the following columns (the highest priority on top):
The column with type label
The column with type resourceName
The first column in the grid
The values from the other grid columns are displayed in a list below the title.
Neither selectionMode:"multiple"
nor selectionMode:"single"
has any effect, that is they do not force
the grid to display check-boxes or radio-buttons for selection.
All properties are arranged in two columns if the mobileLayout
property is undefined.
The first column of type icon indicates the object status.
In the following example, the server state, either “Stopped” or “Running”, is visualized
through a column of type icon
.
Initial code:
{ field: "state", name: "State" },
Updated code:
{ field: "state", name: "State", type: "icon",
renderCell: function(row, state) {
return new Status({
status: state,
useIcon: true,
statusInfo: {
Stopped: {
"label": "",
"type": "danger"
},
Running: {
"label": "",
"type": "success"
}
}
});
}
},
In aps/Tiles
containers, tiles in a row are auto-aligned by height in the md mode, but not aligned in the xs mode.
In mobile devices, that is in the xs mode, the navigation panel looks differently and breadcrumbs are wrapped into an arrow that allows a user to get to the upper navigation level.