Out of box Sitecore provides 4 expanders as listed below to accommodate the Form Components in Sitecore 9.
- Basic
- Lists
- Security
- Structure

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
