SPARK Layout Capabilities

The SPARK Toolkit offers easy to use layout sections/containers to allow content to be arranged precisely according to simple or complex layout requirements. The various layout features of the SPARK toolkit provide control over horizontal and vertical alignment, width and height control, content auto-wrapping behavior, flow or table-style layout, and responsive behavior.

Important: The links below for the various layout-related controls will take you to their respective layout sections/containers Knowledge Base articles where you will find more detailed information on appearance, and behavior configuration options.

Basic Containers

Basic Containers allow for simple layouts as well as complex layouts.  Note that in order to create more complex views in some of these basic containers, you may need to nest in a layout container, such as a horizontal or vertical layout.  

Well - The Well container is a useful section for creating an accented background with vibrant colors.  The layout related options available for the Well are vertical alignment, padding, border radius, width, and height.

Panel - The Panel container has a body where controls can be nested inside of it.  The layout related options available for the Panel are width and body height.  Body height is the height of the body not including the header or footer.  The Panel section and can also be used with the Panel Header and Footer

Collapsible Panel - The Collapsible Panel container has a body where controls can be nested inside of it.  The Collapsible Panel container has the ability to collapse and expand.  The layout related options available for the Collapsible Panel are width and height (the height obviously only applies to the panel in its non-collapsed state).

Tab Section -The Tab Section container allows for controls to be nested in tabs.  In order to place multiple controls in each tab, place a Horizontal or Vertical Layout inside of the Tab Section container.   The height of the Tab Section container is typically the height of the currently displayed content.


Stack - The Stack section container switches between content based on the currently selected pane.  The height of the Stack Section container is typically the height of the currently displayed content.

Modal Section - The Modal Section container typically contains a Panel or Well, which act as a modal dialog.

Note: You have to set visibility to none (not even hidden) at first or it will show by default.

Layout Containers

Layout Containers can be used for repeating content as well as layout flow (wrap, scroll, etc.) and complex layouts

Horizontal - The Horizontal layout container is among the most common controls used for designing a user interface.  Horizontal Layouts are also capable of repeating list objects providing them capability similar to tables.

Vertical - Same as Horizontal above except the layout is vertical.

The Horizontal and Vertical Layout containers provide the bulk of the “Flow layout” capabilities in the SPARK Toolkit and allow precise control on width, height, horizontal, vertical alignment, content wrapping, inline and vertical scrolling.

Horizontal and Vertical Layout containers can be combined together to create very sophisticated layouts.

Note: The Vertical/Horizontal distinction with the controls is really only for Process Designer. At runtime, it is the “Layout Flow” configuration option, not the type of layout control, that determines how the content in the layout actually flows.

Table Layout/Row/Cell - The Table Layout/Row/Cell layout containers are used when you want to have a table layout. The layout related options available for the Table Layout/Row/Cell are border spacing and border collapse.  Like the HTML <table> tag the Table Layout/Row/Cell uses <tr> table rows (Table Layout Row) and <td> table data (Table Layout Cell) to create a table.  To have cells that span many columns and rows use Table Layout Cells nested inside of Table Layout Rows.

You can use colspan and rowspan attributes to make cells span more than one column or row.

The HTML attributes for the Table Layout Cell with the "rowspan" text above are as follows:

The HTML attributes for the Table Layout Cell with the "colspan" text above are as follows:

This is the table layout result at runtime:

Horizontal Split - The Horizontal Split layout container has the ability to split panes into sections.  The layout related options available for the Horizontal Split container are height, and pane specs.  Within the Pane Specs configuration option you are able to adjust the size, collapsed size, splitter thickness, and handle location for the Horizontal Split layout container.


Layout responsiveness trigger is based on the width of the screen. 

While both the Responsive Sensor and Page Layout Cell/Col/Row (deprecated) provide adjustments to the user interface depending on the device sizes, the Responsive Sensor allows developers more control over the layout.

Responsive Sensor - The layout containers themselves (Horizontal and Vertical layout containers for example) do not know how to manage responsiveness on their own, you need to use a Responsive Sensor to control responsiveness, meaning nest a Horizontal or Vertical layout inside of a Responsive Sensor. When the responsive behavior is not met, the default appearance is displayed.

Page Layout Cell/Col/Row (deprecated) - Bootstrap-style layout, uses 12 invisible columns on the page, for example if displayed as a row you wanted 50% of the page you'd use 6/12.

Note: The responsiveness characteristics of these controls are driven by the width of a browser window (or the display width of the device showing the content). As such, they are not meant to be used in a reusable Coach view. This is because the UI developer that created the Coach view cannot predict how other BPM UI developers may lay out the Coach View when they use it in their own BPM UIs - meaning that the responsive behavior would only be accurate if the Coach View was laid out to take up the entire width of the screen.


Was this article helpful?
3 out of 3 found this helpful