Using Adaptive Layouts
Use Adaptive Layouts to enhance the user experience and streamline your design process for Forms and Dashboards. Explore OOTB Adaptive Layouts and Adaptive Layout Presets to get started using the feature.
When working with Adaptive Layouts, Users 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 determining the number of Adaptive Layouts to design and the properties for each layout, consider the use cases. Ask yourself which devices your Users commonly use to interact with the Form or Dashboard. For example, 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 Out-of-the-Box (OOTB) Adaptive Layouts for most Portal Forms and Dashboards that target the screen dimensions of handheld devices and tablets. 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 defined below:
| Property | Value |
|---|---|
|
Name |
Small |
|
Width |
414 |
|
Height |
975 |
|
Minimum Width |
9 |
|
Guide Color |
Red |
| Property | Value |
|---|---|
|
Name |
Tablet |
|
Description |
Note: This layout is optimized for portrait orientation.
|
|
Width |
767 |
|
Height |
1400 |
|
Minimum Width |
0 |
|
Guide Color |
Cornflower Blue |
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 |
Small |
|
Description |
Portal Form size for handheld devices |
|
Width |
414 |
|
Height |
975 |
|
Minimum Width |
0 |
|
Guide Color |
Red |
| Property | Value |
|---|---|
|
Name |
Embedded |
|
Description |
Embedded form size for the Small parent layout Note: Refer to
Embedded Form Controls
for more information about the behavior of Embedded Forms in Adaptive Layouts.
|
|
Width |
361 |
|
Height |
425 |
|
Minimum Width |
0 |
|
Guide Color |
Red |
| Property | Value |
|---|---|
|
Name |
Small Embedded |
|
Description |
Note: Refer to
Embedded Form Controls
for more information about the behavior of Embedded Forms in Adaptive Layouts.
|
|
Width |
361 |
|
Height |
240 |
|
Minimum Width |
0 |
|
Guide Color |
Red |
| Property | Value |
|---|---|
|
Name |
Tablet |
|
Description |
Note: This layout is optimized for portrait orientation.
|
|
Width |
767 |
|
Height |
1000 |
|
Minimum Width |
0 |
|
Guide Color |
Cornflower Blue |