Multiple Layouts
Description
The Multiple Layouts pane appears in the List Builder if the 'Has Multiple Layouts' property is checked on the List Properties pane.
Layout Properties
Layout name
Specify the layout name.
Friendly name
The friendly name is displayed in the 'Layout Picker' which allows you to swap layouts at run-time.
Default layout
Specify if this is the Default Layout that should be shown when the List is initially displayed.
Type
Defines the layout type. The layout can be one of the following types:
- Type
- Description
- Column
The layout will be divided into multiple columns.
- Freeform
Layout is defined using HTML and Client-side templates. Freeform also supports creating a 'snaking' layout.
- Kanban
A special List type to display a 'Kanban' style display. In a Kanban list, rows can be dragged-and-dropped into various categories.
Show column titles
Specify if column titles should be shown in the layout. This property is only available if the layout Type is Column.
Freeform type
This property is only available if the Type is Freeform. The Freeform type how list items are rendered in the List. Choices include:
- Freeform Type
- Description
- Vertical
List items are rendered top to bottom in a vertical list.
- Horizontal
List items are rendered right to left in a horizontal list.
- Snaking
List items are rendered left to right, top to bottom in a "snaking" layout. The number of items in each row is determined by the List control's width and Item width.
Item width
The Item width defines the width of a List item. This property is only available if the layout Type is Freeform and the Freeform type is set to either Vertical or Snaking.
You can specify an explicit dimension for the item height (e.g. 300px, 1in, etc.), or you can use the keyword fill, followed by an optional modifier.
If the fill keyword is used, the List item will fill the entire height of the List.
You can specify a modifier to indicate that the List item should not fill the entire height of the List. You specify an explicit value (e.g. 40px, .5in) by which the List item is less than the List height.
For example, if you set the height to fill-10px, the List item will be 10px less than the height of the List.
Item height
The Item height defines the height of the row (i.e. List item) for a Freeform layout. If this property is left blank, the height is automatically sized to fit the content in the List row.
YOu can specify an explicit item height (e.g. 300px, 1in, etc.) or use the keyword fill followed by an optional modifier to define the height of the list item. See Item width above for more information about the fill keyword.
Kanban settings
A Kanban List is used to display List data organized into multiple categories. Records can be reordered within a category or moved from one category to another using a drag-and-drop action. The Kanban settings property is used to configure the Kanban categories, class names, in-line styles, and more.
The settings for configuring the Kanban layout are identical to the Kanban settings found on the List Properties tab. See List Layout Kanban settings to learn more.
List item class name
Specify an optional class to apply to each item in the List.
List item hover class name
Specify an optional class to apply when mouse hovers over each item in the List.
List item selected class name
Specify an optional class to apply when a List item is selected.
List item in-line style
List item in-line style property.
Has list item footer
Specify if each item (row) in the list has a free-form footer section
List item footer
Specify the HTML for the footer that appears under each List Item (i.e. each row in the list).
You can use the <listObject>.rowExpander() method to toggle the open state of the List item footer, or to explicitly open or close it.
List item footer initial state
Specify the initial state of the List Item footer. Choices include Open, Closed.
Content class name
CSS Class for container for all list items.
Client-side group breaks
Specify if the Layout has client-side group breaks. The following options are available:
- Option
- Description
- <Use Default>
Use the group breaks defined on the List Properties tab.
- Custom-for this Layout
Define group breaks that apply only to this layout.
- None
No group breaks.
Group breaks definition
The Group breaks definition defines the group break(s) for the List layout. This property is identical to the Group breaks definition property found on the List Properties tab.
See the List's Group breaks definition to learn more about defining group breaks.
Has scroll settings overrides
Specify if this Layout has custom scroll properties that override the global settings for this List. Scroll settings include 'snap' (to scroll in discrete amounts), and momentum scrolling. Has scroll settings overrides is equivalent to the Custom scroll properties on the List Properties tab.
Scroll Settings Overrides
Scroll settings for the list layout can be customized if Has scroll settings overrides has been checked. By default, the List uses momentum scrolling. The Scroll Settings Overrides allow you to turn off momentum scrolling and/or enable 'snap' scrolling, which can be used to ensure the whole list record is always visible and prevent the display of partial records.
The properties below are the same as the Custom Scroll Settings on the List Properties tab (which are exposed after checking the List's Custom scroll properties property on the List Properties tab.)
Has momentum scrolling
If checked, the List control will use momentum scrolling. Momentum scrolling allows the user to scroll down the list by "flicking" the list up or down. It is recommended to turn momentum scrolling off if X axis - scroll in discrete amounts or Y axis - scroll in discrete amounts are enabled.
X axis - scroll in discrete amounts
When drag-scrolling on the x axis, should scrolling occur in discrete amounts? For example, you might want to scroll the list by 50px at a time so that no partial rows are displayed.
X axis - snap size
Specify the 'step' amount - the discrete amount by which the List is scrolled. You can specify a value in pixels, or a percentage (e.g. 100%). When you specify a percentage, the percentage is of the 'viewport' size. For example, if the 'viewport' in which the List is displayed is 300px wide, then setting the snap size to 100% is the same as setting it to 300px.
X axis - scroll offset
Specify the size in pixels by which scrolling if offset.
Y axis - scroll in discrete amounts
When drag-scrolling on the Y axis, should scrolling occur in discrete amounts? For example, you might want to scroll the list by 50px at a time so that no partial rows are displayed.
Y axis - snap size
Specify the 'step' amount - the discrete amount by which the List is scrolled. You can specify a value in pixels, or a percentage (e.g. 100%). When you specify a percentage, the percentage is of the 'viewport' size. For example, if the 'viewport' in which the List is displayed is 300px wide, then setting the snap size to 100% is the same as setting it to 300px.
Y axis - scroll offset
Specify the size in pixels by which scrolling if offset.
Videos
List Control - Multiple Layouts
When you design a List control, you can specify multiple Layouts. A Layout is just the manner in which the data in the List is shown. You can switch from one layout style to another at run-time.
See Also