Forms & Tasks Designerπ π§¨
Elements
Side Panel
3 min
the side panel element creates a collapsible overlay drawer that slides in from the side of the form when triggered it is a space efficient pattern for surfacing supplementary information, contextual actions, or secondary form sections without navigating away from the main form or cluttering the primary layout the panel can be opened by the user clicking its trigger button (opensidepanelbuttontext) or programmatically via the open() method β and closed via the close() method or by clicking outside (closeonclickoutside) an optional overlay (hassidepaneloverlay) dims the background when the panel is open, focusing user attention on its contents key use cases β’ displaying record history or audit trail in a panel without leaving the form β’ showing help documentation, instructions, or field level guidance on demand β’ surfacing a secondary action form (e g , 'add attachment') without a full page change β’ programmatically opening the panel when a specific event occurs (e g , clicking a data row) β’ using closeonclickoutside for panels that should dismiss easily vs forcing explicit close runtime api β attributes in procesio forms all attributes below are accessible and modifiable at runtime via the element's data model in procesio forms the open() and close() methods can also be called programmatically api name description type default notes opensidepanelbuttontext label on the button that triggers the panel to open string β β sidepaneltitle title shown in the side panel's header area string β β hassidepaneloverlay if true, shows a dimmed overlay behind the panel boolean false β closeonclickoutside if true, clicking outside the panel closes it boolean β β visible controls overall element visibility boolean true β name unique element name string β β id unique element id string β β programmatic methods api name description type default notes open() programmatically opens the side panel method β call from js or event close() programmatically closes the side panel method β call from js or event
