Adaptive Dashboards Scenarios
Adaptive dashboards leverage adaptive design so that your Users can view key metrics in real time from any device or browser window. Use these fictional scenarios to learn how adaptive dashboards can improve your user experience and streamline your design process.
Scenario: Optimizing a Portal Dashboard for Smartphones
Curtis and Christine work at the River T Corp. organization:
- Christine is the Design Team Lead who is responsible for visualizing and implementing the overall design of the River T. Corp Portal. She assigns design tasks to her team members.
- Curtis is a Content Designer who reports to Christine.
In the weekly design team meeting, Christine discusses feedback she received regarding the Facilities dashboard.
The Facilities dashboard is a Portal dashboard that was designed for the facilities department. It uses Widgets to present department-specific information in real time to the facilities team. Members of the facilities team are often on their feet as they move around River T. Corp fulfilling requests and providing general maintenance, so they usually access the Facilities dashboard from their smartphones. The team is required to scroll vertically and horizontally in order to view all of the Widgets on the Facilities dashboard, which makes using the dashboard cumbersome. To improve the user experience, Christine assigns a task to Curtis to design a new adaptive layout for the Facilities dashboard.
The smartphones that the Facilities team uses were issued by River T. Corp, and the device model has a screen resolution of 1440 x 2560 physical pixels with approximately 570 dots-per-inch (DPI). Curtis starts by converting the smartphone's screen resolution to device-independent pixels (DIP). Using the DIP conversion formula, Curtis determines that the screen resolution is 360 x 640 device-independent pixels.
Refer to Defining Adaptive Layout Properties Using Device-Independent Pixels for details about converting between DPI and DIP.
With these measurements in mind, Curtis is ready to begin designing the layout so that it is optimized for the smartphone screen. Other Portal dashboards may also need to be optimized for the 360 x 640 screen size, so Christine directs Curtis to save the new layout as an adaptive layout preset. As the design team optimizes other Portal dashboards for smartphones, they can use the adaptive layout preset to automatically populate the properties for each layout.
Curtis starts by opening the CSM Desktop Client and then opening the Dashboard Editor. He selects the Facilities dashboard and selects the Edit button 
to open the Dashboard Editor.
To create a new adaptive layout, Curtis selects the Create New button 
and defines the following adaptive layout properties:
| Property | Value |
|---|---|
| Name | Smartphone Layout |
| Description | Use this Layout to design dashboards that are optimized for a smartphone screen in portrait orientation. |
| Width | 360 |
| Height | 640 |
| Icon |  |
| Guide Color | Orange |
With the dialog window still open, Curtis selects Save As Preset. The set of properties is saved in the Adaptive Layout Preset Manager so that it can be reused for other dashboards.
Curtis selects OK and then makes design changes in the Dashboard Editor so that all widgets fit within the Smartphone Layout boundaries. The changes that Curtis makes to the Smartphone Layout do not affect the other adaptive layouts that already exist for the dashboard. Christine confirms the changes and gives Curtis permission to publish the Blueprint.
When a member of the facilities team opens the Facilities dashboard on a smartphone, CSM recognizes the display size and automatically renders the Smartphone Layout for an optimal user experience.
Scenario: Optimizing Additional Dashboards for Smartphones Using an Adaptive Layout Preset
The River T. Corp facilities team is impressed with the Facilities dashboard as it is displayed on their smartphones, so Christine decides to similarly optimize the HR dashboard.
Christine assigns a task to Curtis to design a new adaptive layout for the HR dashboard with identical dimensions to the Smartphone Layout that he created for the Facilities dashboard. Curtis can save time on this task by using the adaptive layout preset that he defined earlier.
Curtis starts by opening the CSM Desktop Client and then opening the Dashboard Manager. He selects the HR dashboard and clicks the Edit button to open the Dashboard Editor. Then, he clicks the Create New button to create a new layout.
In the Create Layout dialog, Curtis clicks the Ellipses button 
to select an adaptive layout preset. The Adaptive Layout Preset Manager opens. He navigates to the folder where he saved the Smartphone Layout, selects it, and clicks OK. The Create Layout dialog is automatically populated with the preset properties, which were defined to match the smartphone screen dimensions in portrait orientation.
Curtis selects OK and then makes design changes in the Dashboard Editor so that all widgets fit within the Smartphone Layout boundaries. The changes that Curtis makes to the Smartphone Layout do not affect the other adaptive layouts that already exist for the dashboard. Christine confirms the changes and gives Curtis permission to publish the Blueprint.
When a member of the HR team brings up the HR dashboard on a smartphone, CSM recognizes the display size and automatically renders the Smartphone Layout for an optimal user experience.