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:

1. 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.

2. 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:

1. Click the  icon on the top right corner of the Google Chrome browser window.
2. Select More tools > Developer tools.

3. To enable the device toolbar in the main browser page, click the  icon, as shown in the following image:

   

4. 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:

   

5. 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:

   

6. 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