Create a custom layout¶
Custom layouts are only supported for the 'Search Results' Web Part. You can't add custom layout for the 'Search Filters' Web Part.
Layout creation process¶
Same as data source, the layout creation process comes in three distinct steps:
- Create the layout class (i.e. define the property pane options).
- Create the HTML template associated to that layout.
- Register the layout information for discovery.
Create the layout¶
- In your extensibility library project, create a new
- Create an interface for your layout properties, typically the ones you want to persist in the Web Part property bag. Layout properties are isolated from the other general Web Part properties under the property
layoutPropertiesin the property bag object.
BaseLayoutabstract class using your properties interface:
Implement your layout logic according to the available methods and properties.
BaseLayout - Methods¶
||The initialization method of your layout (ex: initialize your properties, etc.). You can perform asynchronous calls here. This method will be called when the layout is instanciated by the main Web Part.|
||Returns the property pane fields to display when your layout is selected. These are regular SPFx property fields and groups. Layout properties are isolated from the other general Web Part properties under the property
||The method will be called when a property pane value is updated. The main Web Part in
BaseLayout - Properties¶
||The Web Part properties in the property bag. Corresponds to the isolated
Create the HTML template file (Handlebars)¶
In your extensibility library project, create a new
custom-layout.html HTML file. A layout template is split into two distinct parts:
template part, containing the HTML markup to display your data once fetched. This part is mandatory to display your data.
placeholder part, containing the HTML markup to display as placeholder while the data are getting fetched. This part is optional.
In a template, you must use Handlebars expressions to access and display your data.
Example: iterating through all items
Register layout information¶
The next step is to fill information about your new layout. In the library main entry point (i.e. the class implementing the
IExtensibilityLibrary in interface) return a new
ILayoutDefinition object in the
getCustomLayouts() method using these properties:
||The friendly name of your layout that will show up in tiles.|
||An Office UI Fabric icon for your layout.|
||An unique internal key for your layout.|
||The layout type (
||The template HTML content as string. Use a
||A service key used to instanciate your layout class. Builtin or custom data layouts are instanciated dynamically using SPFx service scopes.|