Horizontal Layout

Horizontal Layout is a layout container coach view that creates a section in which you can arrange layout elements side by side horizontally. When Horizontal Layout is bound to a list, the horizontal section repeats for each item in the list, which results in a format that is similar to a table.

Horizontal Layout and Vertical Layout are among the controls that are most commonly used to design a user interface. Used in conjunction, the Horizontal and Vertical Layout controls provide the majority of the flow layout capabilities, which you can use to design complex user interfaces.

Tip: Typically, the Horizontal Layout and Vertical Layout controls in the BPM UI toolkit are used in conjunction with the Collapsible Panel. Their corresponding control in the deprecated Responsive Coaches toolkit is the Section.

Configuration properties

Set or modify configuration properties for Horizontal Layout, such as appearance, responsive, and performance properties, in the Configuration properties tab.

Screen size: A configuration property that has the Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value. If you are using the Process Designer desktop editor (deprecated), you are setting the value for the large screen size. The other screen sizes inherit this value.

Theme definitions: Theme definitions specify the colors and styles for a control and determine the appearance of the control. You can preview the look and feel of controls in the theme editor. See Themes.

The appearance configuration properties for Horizontal Layout are shown in the following table:

Table 1. Appearance configuration properties for Horizontal Layout
Appearance configuration property	Description	Data type
Layout flow	The layout of the controls: Horizontal Horizontal Inline Scroll Horizontal Tight Horizontal Auto-Wrap Vertical Vertical Tight	`String`
Horizontal alignment	The horizontal alignment of the controls in the layout: Justified Left Center Right Note: Justified does not work well in combination with the Horizontal Inline Scroll and the Horizontal Auto-Wrap layout flow. If you use this combination, you might see unexpected results.	`String`
Vertical alignment	The vertical alignment of the controls in the layout. This property applies only to horizontal layout flows. Top Middle Bottom	`String`
Width	Specifies the width of the control. You can specify the width in `px` (pixels), `%` (percent), or `em` units. For example, `50px`, `20%`, or `0.4em`. If no unit type is specified, then `px` is assumed.	`String`
Height	Specifies the height of the control in `px` (pixels) or `em` units. If no unit type is specified, then `px` is assumed.	`String`

The responsive configuration properties for Horizontal Layout are listed in the following table:

Table 2. Responsive configuration properties for Horizontal Layout
Responsive configuration property	Description	Data type
Responsive sensor	(Optional) The identifier of the responsive sensor control that contains this layout. If omitted, the nearest sensor in the parent container is used.	`Boolean`
Behavior	Specifies how the section must behave based on the box factors that are defined in the responsive sensor. Box factor name: The name of the responsive sensor box factor to which these attributes apply. Child layout: The layout you can use with the specified box factor. Vertical Vertical Tight Horizontal Horizontal Inline Scroll Horizontal Tight Horizontal Auto-Wrap Child alignment: The alignment you can use with the specified box factor: Justified Left Center Right Child width: Widths of child controls that you can use with this box factor. For example, `60%`. Note that you can specify more widths for the controls that are included in the layout. For example, `80%`, `20%`. Visibility: The visibility settings you can use with the specified box factor. Visible None Hidden Width: The section width you can use with the specified box factor. Height: The section height you can use with the specified box factor. CSS style: The CSS styles you can apply to the specified box factor. CSS class: The CSS classes you can add to the specified box factor.	`ResponsiveBehavior[]`

You can also control the content responsiveness by nesting your horizontal layout in a Responsive Sensor control.

The performance configuration properties for Horizontal Layout are listed in the following table:

Table 3. Performance configuration properties for Horizontal Layout
Performance configuration property	Description	Data type
Async loading	Improves the UI experience for large data sets at the expense of a slower overall row-loading time once the section starts loading. This property is used only when the section is bound to a list.	`Boolean`
Async batch size	Specifies the number of rows that are loaded synchronously in an asynchronous batch. Use this property to optimize the synchronous and asynchronous loading performance. This property is used only when the section is bound to a list.	`Integer`

Example

In the web Process Designer, add a Horizontal Layout control to your coach layout, which you will use as a container control. Inside the container, place three Panel controls, which you can name Work Categories, Claim Type, and Elements. Set the configuration properties for each control as follows.

For Horizontal Layout: Under Appearance, set Layout flow to Horizontal, Horizontal alignment to Justified, Vertical alignment to Top, and Width to 750px. Leave Height blank.
For Work Categories: Under Appearance, set Color style to Warning, and Width to 350px.
For Claim Type: Under Appearance, set Color style to Success, and Width to 350px.
For Elements: Under Appearance, set Color style to Danger, and Width to 350px.

When you run the coach, the result shows three panels of the same height and width, and arranged side by side within the horizontal section: Work Categories is yellow for Warning, Claim Type is green for Success, and Elements is red for Danger.

Events

Set or modify the event handlers for the control in the Events tab. You can set events to be triggered programmatically or when a user interacts with the control. For information about how to define and code events, see User-defined events.

Horizontal Layout has the following types of event handlers:

On load: Activated when the page loads. For example:
```
me.setWidth("100%");
```
On responsive update: Activated when the section is resized according to the screen size of a device.

Depending on the specific event, you can use JavaScript logic to modify the effects of the control. More information on using events with controls is found in the topic User-defined events.

Methods

For the methods that are available for Horizontal Layout, see the Horizontal Layout JavaScript API.

Additional resources

For information about how to create a coach, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see Coach view properties.