Sitecore 9 Forms – Custom Expander for Form Components in FormDesigner

Out of box Sitecore provides 4 expanders as listed below to accommodate the Form Components in Sitecore 9.

Basic
Lists
Security
Structure

FormDesigner Design Pane showing Default Expanders

To create our own Expander to accommodate custom/OOTB components we need to do the following

Create a Folder in Master Database

Create a folder in master database to contain the components which need to appear under the expander. Later we need to provide the id of the folder in the core database to loop through the items it contain.

Create a Expander

Create a custom Expander using the Expander Parameter using Sitecore Rocks in the core database in the following path set the following properties in the appearance section of the item

/sitecore/client/Applications/FormsBuilder/Pages/FormDesigner/PageSettings/InfoTabControl/Design/PageSettings

IsOpen – Specifies whether the expander is open by default

IsExtraFieldsLinkShown – Gives More,Less toggle links when there are a large number of fields in a expander

Headertext – Title for the Expander in DesignPane

IsVisible – Specifies whether the control is visible

IsCollapsible – Shows the toggle button for the Expander

Visual Style – Set the visual style to contextpane

Create a Draggable

Create a Custom Draggable using the DraggableElementList using Sitecore Rocks in the core database in the following path and set the following properties

 /sitecore/client/Applications/FormsBuilder/Pages/FormDesigner/PageSettings/InfoTabControl/Design/PageSettings

Appearance Section

IsVisible – Specifies whether the control is visible

Data Section

Database – Provide the name of the database from which the folder containing form components must be retrieved

StaticData – Provide the folder id in the master database from where the form components should be retrieved

Add to Presentation Details of Design Item

Add the above created expander(requires no placeholder) and draggable(add it to placeholder {ExpanderName}.Body) in the presentation details of design item shown below using Sitecore Rocks.

/sitecore/client/Applications/FormsBuilder/Pages/FormDesigner/PageSettings/InfoTabControl/Design

Finally we can see our custom expander in the FormDesigner design pane