Creating a responsive web layout
BMC Helix Innovation Studio is rendered with a responsive layout in browsers. In responsive layouts, the components wrap vertically when the width of the browser's viewport is not sufficient to display them as laid out in the View designer. This feature is useful on mobile device browsers such as smartphones, tablets, and so on. To preview the design, you can also simulate the layouts on various devices.
Several out-of-the-box view components adjust their layouts based on their width. For example, the tab panel uses an accordian layout and the record grid uses a card layout. A button bar adapts to the dropdown list of buttons.
The responsive layout is mainly controlled by the following components:
- Container view components with multi-column—A container has other view components within it. Typically, when the view is displayed, the view components are stacked vertically and the components are all wrapped. They appear as a table with one component per row. You can specify multiple columns within the container. This displays the components side-by-side, provided there is sufficient width for the container when it is displayed at runtime. The Row Wrap property controls the layout of multi-column containers based on the width of the view.
- Blades and Dialogs—The size of a docked or centered modal view determines the way the blades and dialogs are displayed. Responsive web layouts have fixed width. If the width of the web layout is less than the view itself, the view spans the browser width.
Component sizes—The widths (in pixels) that cause components to wrap, depend on the sizes specified for Row Wrap and Open View. The following table provides information about the widths supported by each size. For example, smartphones typically require Small or Extra Small widths.
Size Identifier
Modal View Width
Responsive wrapping occurs at
Extra Small
450px
Small
650px
576px
Medium
800px
768px
Large
1024px
992px
Extra Large
1200px
1200px
Extra Extra Large
1600px
1500px
To configure the responsive web layout
To control the size of the layout, perform the following steps:
- Add a container to a view definition and set the Row wrap property.
The Row wrap property controls the layout of multi-column containers based on the width of the view. The default value is Small. When you decrease the width of the view to a width less than the selected Row wrap value of 576 pixels, each container column after the first one wraps onto a new line. For more information and procedure on creating a layout by using Containers, see Creating-a-layout-using-Containers. Define the size of a docked or centered modal view. For example, 800px. If the width is less than the view itself, the view spans the browser width. For more information, see To define size of the modal using the Open View action.
The following image shows an example of specifying the size of a view:
To preview device sizes with your desktop browser
The following example demonstrates how to preview your device sizes by using the Google Chrome browser on a desktop:
- Click the
icon on the top right corner of the Google Chrome browser window. - Select More tools > Developer tools.
To enable the device toolbar in the main browser page, click the
icon, as shown in the following image:
To change the width and layout of the browser window, drag the border of the browser.
By default, the browser page is in responsive mode, which means that you can manipulate the width of the browser window and also change the layout. For example, when the width of the page is narrow, all components are wrapped vertically, as shown in the following image:
To simulate the device sizes or orientation changes on a mobile browser, use the device controls.
For example, to observe the layout for an Apple iPad in landscape orientation, from the Responsive list, select iPad, and click the
icon, as shown in the following image:
- To return to the normal mode of the browser, exit the developer tools.
Related topics
Defining-the-user-interface-through-view-definitions
Creating-or-modifying-view-definitions
Creating-a-layout-using-Containers
Creating-a-view-for-a-record-instance-by-using-record-editor
Creating-a-tabular-view-of-record-instances-by-using-a-record-grid