Laying out a coach or coach view using the grid layout

You can layout a coach or coach view by using cells in a grid.

About this task

The grid layout is where you can arrange content using grids, containers, and cells.

A grid is a container that is 12 units wide. The actual width of each unit is variable and depends on the screen size. Within a grid, you can have containers and cells. A container groups related cells. Cells are placeholders for content. Containers and cells can be from 1 to 12 units wide. If the container does not have at least one cell, the Designer removes it. In the following diagram, the grid is the outermost line. The grid contains a single cell and a container with an additional two cells.

The line for the grid surrounds everything. A single cell is to the left and a container with two cells in it on the right.

If the total width of the cells in a grid is 12, the grid forms a complete row. When you edit a cell in a complete row, the Designer tries to preserve the complete row by automatically resizing other cells. That is, if you delete a cell, another cell expands to occupy the space. Similarly, if you add a cell to the left or right of another cell, a cell shrinks to fit the new cell. However, there is a minimum size of 3 for new or automatically resizing cells. In this case, the Designer moves the end cell to form a new row. When you are editing a grid that has less or more than 12 units, the Designer does not automatically resize cells. The limit of 12 units applies regardless of the number of containers within a grid.

In addition to adding a cell to the left or right of another cell, you can add a cell above or below it. A grid does not have a vertical limit. However, having too many vertically stacked cells results in a user interface that requires users to do a lot of scrolling.

On the General page of the Properties tab, you can set the grid layout properties that are described in the following table.

Table 1. Grid layout properties
Property Description
Horizontal span Specifies the number of horizontal units that a selected grid cell or container occupies in a grid. A grid is a maximum of 12 horizontal units wide. You can specify a number from 1 to 12. If you increase or decrease the horizontal span, the width of the selected grid cell or container will increase or decrease on the right side of its current position.
Visibility Specifies whether a grid cell or container is displayed or hidden in a grid. This property has the following options:
  • Show: Displays a selected grid cell or container.
  • Hide: Hides a selected grid cell or container, but lists it in the Invisible Items section of the palette. You can re-display a hidden grid cell or container by selecting it in the palette and then selecting Show.
Orientation Specifies whether the layout items in a selected grid cell are laid out horizontally or vertically. This property has the following options:
  • Horizontal: Arranges the layout items beside each other in a horizontal line.
  • Vertical: Arranges the layout items on top of each other in a vertical stack.
Horizontal alignment Controls the horizontal alignment of layout items in a selected grid cell. This property has the following options:
  • Left: Aligns the layout items at the left of the horizontal space.
  • Center: Aligns the layout items at the center of the horizontal space.
  • Right: Aligns the layout items at the right of the horizontal space.
Note: Horizontal alignment is not available for layout items in a selected grid cell unless the orientation is horizontal.
IBM BPM version 8570 cumulative fix 2017.03Vertical alignment IBM BPM version 8570 cumulative fix 2017.03Controls the vertical alignment of content in a selected container or grid cell, such as the grid cells in a container or the layout items in a grid cell. This property has the following options:
  • Top: Aligns the content at the top of the vertical space.
  • Middle: Aligns the content at the middle of the vertical space.
  • Bottom: Aligns the content at the bottom of the vertical space.
Note: Vertical alignment is not available for layout items in a selected grid cell unless the orientation is horizontal.
Control ID Specifies an alphanumeric identifier that uniquely identifies a selected layout item. This ID can be used to locate items in JavaScript and advanced preview artifacts.

To lay out a coach or coach view using the grid layout, use the instructions in the following procedure.

Procedure

  1. In the palette, select Grid.
  2. Drag one of the grid patterns from the palette onto the canvas. Depending on which grid pattern you selected, the canvas displays a grid with one or more cells in it.
  3. Modify the layout by doing any of the following actions:
    • Add a grid above or below existing grids.
    • Add a cell to a grid or container. If there are more than 12 units of cells in the grid, the new cell wraps to the next line.
    • Delete a cell from a grid. If the grid is a complete row, the cell or container to the right expands to occupy the space of the deleted cell. The content of the deleted cell is removed.
    • IBM BPM version 8570 cumulative fix 2017.03Change the vertical alignment of the grid cells in a selected container.
    • Change the orientation of a grid cell.
    • If the orientation of a grid cell is horizontal, change the alignment of the layout items in a selected grid cell:
      • Horizontal alignment
      • IBM BPM version 8570 cumulative fix 2017.03Vertical alignment
    • Resize a cell or container by dragging its right border. The cell or container to the right correspondingly expands or contracts. However, the minimum that it will automatically contract is 3 units. If the cell or container reaches this minimum, it flows instead to the next row.
    • Hide a cell or container by changing its Visibility property. The layout no longer displays it but the palette lists it as an invisible item that you can select.
    • Delete a grid or container. The content of the deleted grid or container, including cells and cell content, is removed.
  4. Click Save or IBM BPM version 8570 cumulative fix 2017.03Finish Editing.

Results

You can flip between the content and the grid layout to put content into the cells and adjust the cells accordingly.

Example

Say you want to create a layout that has a header and footer, a navigation area on the left, a central work area that typically displays forms, and an area to the right that displays meta data about the form.
  1. Start by adding the Header Footer grid template to the layout.
    The Header Footer grid template has three cells stacked vertically
  2. Because you want items in the header and footers to be arranged horizontally to each other, click the change layout direction button in the center of the cell for the header and footer cells.
    The top and bottom cells now arrange their content horizontally. These cells now have an extra button to align the content.
  3. Select the center cell and then select the Add icon to the right of the cell. When you hover over the icon, the boundary displays where you are adding a cell. Add a third cell to the row.
    There are now three cells in the middle row.
    If you go too far to the right, the boundary will include all three cells and you will add a large cell to the right. If you add this cell by accident, select it and press the Delete key.
  4. To make more room for the middle cell, hover over the right border of the left cell until you see the double arrow cursor.
    Cursor is now a double arrow on the boundary between the two cells in the row.
    Drag the border. As you start to drag, you see the unit grid. Drag the border to the second unit.
    The grid shows the 12 units as vertical stripes. The boundary of the first cell has moved to the second unit, which makes the cell much narrower. The center cell expands to fill the space.
    .
  5. Save your changes. The layout is now ready for content so click Content. The cell borders display until you add content to them.
    The cells are displayed in the layout as gray squares in the layout.
Parent topic: Creating user interfaces