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
Name
|
Mobile
|
Width
|
414
|
Height
|
142
|
Minimum Width
|
375
|
Color
|
Blue
|
Name
|
Tablet Form Header
|
Description
|
This layout is optimized for portrait
orientation.
|
Width
|
1024
|
Height
|
142
|
Minimum Width
|
768
|
Color
|
Red
|
Name
|
Base Layout
|
Description
|
Layout generated by the system during
upgrade or validation processing.
|
Width
|
1440
|
Height
|
142
|
Minimum Width
|
1025
|
Color
|
Green
|
Dashboards
Name
|
Mobile View
|
Width
|
414
|
Height
|
2200
|
Minimum Width
|
375
|
Color
|
Orange
|
Name
|
Tablet View
|
Description
|
This layout is optimized for portrait
orientation.
|
Width
|
1024
|
Height
|
1800
|
Minimum Width
|
768
|
Color
|
Red
|
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.
Name
|
Base Layout
|
Description
|
Layout generated by the system during
upgrade or validation processing.
|
Width
|
390
|
Height
|
800
|
Minimum Width
|
0
|
Color
|
Green
|
Name
|
Small
|
Description
|
Portal form size for handheld devices.
|
Width
|
414
|
Height
|
1052
|
Minimum Width
|
0
|
Color
|
Red
|
Name
|
Tablet
|
Description
|
This layout is optimized for portrait
orientation.
|
Width
|
767
|
Height
|
1000
|
Minimum Width
|
0
|
Color
|
Cornflower Blue
|
Name
|
Tablet Form
|
Width
|
1024
|
Height
|
900
|
Minimum Width
|
0
|
Color
|
Red
|