Use Adaptive Layouts

Use Adaptive Layouts to enhance the user experience and streamline your design process for forms and dashboards.

When you work with Adaptive Layouts, you can manually define a layout or select an Adaptive Layout Preset to use pre-defined dimensions. Use presets to create Adaptive Layouts with the same properties across different forms or dashboards.

When you determine the number of Adaptive Layouts to design and the properties for each layout, consider the use cases. Which devices do your users commonly use to interact with the form or dashboard? If your company issues devices to your users, look up the dimensions for the device model before you begin designing.

OOTB Adaptive Layouts

CSM provides OOTB Adaptive Layouts for most CSM Portal forms and dashboards that target the screen dimensions of handheld devices and tablets. CSM Portal forms and dashboards that include the OOTB layouts switch to the appropriate layout at the defined breakpoints. Use the layouts as-is, edit them, delete them, or create your own Adaptive Layouts within the Form Editor or Dashboard Editor. The default properties for the OOTB Adaptive Layouts are:

Forms

Property	Value
Name	Mobile
Width	414
Height	142
Minimum Width	375
Color	Blue

Property	Value
Name	Tablet Form Header
Description	This layout is optimized for portrait orientation.
Width	1024
Height	142
Minimum Width	768
Color	Red

Property	Value
Name	Base Layout
Description	Layout generated by the system during upgrade or validation processing.
Width	1440
Height	142
Minimum Width	1025
Color	Green

Dashboards

Property	Value
Name	Mobile View
Width	414
Height	2200
Minimum Width	375
Color	Orange

Property	Value
Name	Tablet View
Description	This layout is optimized for portrait orientation.
Width	1024
Height	1800
Minimum Width	768
Color	Red

Property	Value
Name	Base Layout
Description	Layout generated by the system during upgrade or validation processing.
Width	1600
Height	982
Minimum Width	1600
Color	Green

OOTB Adaptive Layout Presets

CSM provides the following OOTB Adaptive Layout Presets, available in the Adaptive Layout Preset Manager. Use these OOTB presets as-is, edit them, delete them, or create your own using the Form Editor or the Dashboard Editor.

Property	Value
Name	Base Layout
Description	Layout generated by the system during upgrade or validation processing.
Width	390
Height	800
Minimum Width	0
Color	Green

Property	Value
Name	Embedded
Description	Embedded form size for the Small parent layout. See Managing Controls and Widgets in Adaptive Layouts.
Width	361
Height	425
Minimum Width	0
Color	Red

Property	Value
Name	Small
Description	Portal form size for handheld devices.
Width	414
Height	1052
Minimum Width	0
Color	Red

Property	Value
Name	Small Embedded
Description	See Managing Controls and Widgets in Adaptive Layouts.
Width	361
Height	240
Minimum Width	0
Color	Red

Property	Value
Name	Tablet
Description	This layout is optimized for portrait orientation.
Width	767
Height	1000
Minimum Width	0
Color	Cornflower Blue

Property	Value
Name	Tablet Form
Width	1024
Height	900
Minimum Width	0
Color	Red