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