Layouts

Builtin layouts

By default, the following layouts are provided:

"Available layouts"

Vertical

Display filters as a vertical bar:

"Vertical"{: .center

Horizontal

Display filters as an horizontal bar. For instance, it fits nicely with 'Combo' filter templates.

"Horizontal"

Layout options

"Horizontal layout options"

Setting Description Default value
Preferred number of cards per row Specifiy the preferred number of filters to display per row when the required width space is available. The Web Part will always adjust the number of possible filters to display depending the available width. It means that if you set this value to '3' but you display the Web Part in small column, only 1 filter will be displayed. 3

Panel

Display filters as an side panel. Useful to gain space on the page.

"Panel"

Layout options

"Panel layout options"

Setting Description Default value
Button label to display The label to display to open the panel. "Show filters".
Panel header text The label to display to in the panel header. "Filters".
Modal If enabled, the panel will be modal (you can't select elemtns outside the panel). True.
Light dismiss If enabled, dismiss the panel when click outside. True.
Panel size The filter panel size to display. Small (right)

Debug

The 'debug' layout allows you to see all relevant data used by filter templates during render.

"Debug"

The template context object exposes the following properties:

{
    "filters": "<Current filters to display in the UI (selected/unseslected)>",
    "selectedFilters": "<The current submitted filters>",
    "instanceId": "<The Web Part instance ID>",
    "theme": "<Current theme variables>",
    "strings": "<Localized strings that can be used in the Web Part>",
    "selectedOnce": "<Flag indicating if a filter value has been selected at least once by the use>",
    "properties": "<The filter Web Part properties>"
}

Custom

The 'custom' layout is the minimal layout to start with if you want to create your own customized UI from scratch. You can also start from an existing layout.

"Custom"

Updating a builtin layout (ex: 'Horizontal', 'Vertical', etc.) will automatically switch the selected layout to 'Custom' with your modifications as content. All previous custom layout content will be overwritten.

"Custom edit"

You have also the ability to use an external .html file to centralize your customizations. This file must be stored in an accessible location for uses (ex: a SharePoint document library with 'Read' permissions for concerned users).

"External file"

Unless you specify an external file, the template content is stored in the Web Part property bag.

Updating the layout HTML template is a good option for minor UI updates (Ex: add a link, update colors, etc.). For more control over the UI, you may want to use the extensibility library feature