Creating a responsive web layout
BMC Helix Platform 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 the mobile device browsers such as smart phones, 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 on of the widths supported by each size. For example, smart phones typically require Small or X-Small widths.
Size Identifier Modal View Width Responsive wrapping occurs at X-Small 450px Small 650px 575px Medium 800px 767px Large 1024px 991px X-Large 1200px 1199px X-X-Large 1600px 1599px
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 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 drop down, 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.