The blank view supports a responsive layout for different screen sizes based on display type. Four display types are supported for the blank view: Desktop, Laptop, Tablet Landscape and Tablet Portrait. The two basic layout elements in the blank view are rows and columns. You can drag and drop these elements from the Components palette:
Row: Rows act as containers for columns. You can move or delete existing rows, and you can also nest one or more rows inside a column if that column is either empty or already contains one or more rows.
Column: Once a row has been added, you can drag and drop one or more columns into that row. You can delete columns and their contents by clicking on the thick top border and then clicking the trash can icon. You can also drag a column (and their contents) by its thick top border to different positions in the layout.
Note: Dragging any other component into a row from the elements available for data management, editors, charts, scheduling, navigation, and custom automatically creates a column for it if you have not already dragged and dropped one.
Use the display type preview at the top right of the toolbar to view the results of any changes to the layout.
Setting properties for a layout row
You can access a row's properties by clicking the thick border labeled ROW at the top of the row. The properties for a row are:
Authorization: Provides an Allowed Roles property to specify roles to authorize authenticated users access to the components in this row. Clicking Allowed Roles displays a list of user roles that you can use to determine the authorization of authenticated users to access the components in the row at run time. You can choose only from roles that are defined for the view. To know more about using roles, see Using roles to authorize user access.
CSS Class List: The CSS classes that need to be applied to the view. The classes must be defined in the view's style.css file, which can be opened and edited by clicking the Edit CSS button in the View Styles pane on top.
Setting properties for a layout column
You can access a column's properties by clicking the thick border labeled COL at the top of the column. The properties for a column are:
Authorization: Provides an Allowed Roles property to specify roles to authorize authenticated users access to the component in this column. Clicking Allowed Roles displays a list of user roles that you can use to determine the authorization of authenticated users to access the component in the column at run time. You can choose only from roles that are defined for the view. To know more about using roles, see Using roles to authorize user access.
Column widths: You can specify, or change the width (Column span) of the column for each screen size. There are 12 "slots" available for columns in each row, and a column can take up one or more slots. For example, you can have 12 columns that span one slot each, or three columns that span four slots each.
Note that the Tablet Landscape width is required and will be used for all screen sizes unless you enter a different width for the other screen sizes (Desktop, Laptop, and Tablet Portrait).
CSS Class List: The CSS classes that need to be applied to the view. The classes must be defined in the view's style.css file, which can be opened and edited by clicking the Edit CSS button in the View Styles pane on top.
Hide on: You can hide a column on a given screen size by selecting the checkbox for that screen width. You can use this feature to provide more details on larger screens while minimizing the content shown for smaller devices.
Row: Rows act as containers for columns. You can move or delete existing rows, and you can also nest one or more rows inside a column if that column is either empty or already contains one or more rows.