Adaptive Forms Scenarios

Adaptive Forms leverage adaptive design so that your Users can quickly view and submit Forms from any device or client window. Use these fictional scenarios to learn how adaptive Forms can improve your user experience and streamline your design process.

Scenario: Optimizing the Incident Portal Form for Tablets

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.

River T Corp. recently rolled out 500 tablets for their sales team. In the weekly design team meeting, Christine discusses feedback she received regarding the Incident Portal Form. When accessing the Form on the tablet in portrait orientation, the Customer is required to scroll vertically and horizontally in order to complete all of the required Fields and submit the Incident. To improve the user experience, Christine assigns a task to Curtis to design a new Adaptive Layout for the Incident Portal Form.

Curtis starts by converting the tablet's screen resolution to device-independent pixels (DIP). The screen resolution is 1200 x 1920 physical pixels with approximately 283 dots-per-inch (DPI). Using the DIP conversion formula, Curtis determines that the tablet's screen resolution is 600 x 960 device-independent pixels.

Refer to Defining Adaptive Layout Properties Using Device-Independent Pixels for details about converting between DPI and DIP.

With these measurements confirmed Curtis is ready to begin designing the layout so that it is optimized for the tablet screen. Other Forms may also need to be optimized for the 600 x 960 screen size, so Christine directs Curtis to save the new layout as an Adaptive Layout Preset. As the design team optimizes other Forms for tablets, they can use the Adaptive Layout Preset to automatically populate the properties for each layout.

Curtis opens CSM Administrator and creates a new Blueprint. He selects the Incident Business Object and changes the current View to Portal Default. He clicks Edit Form to open the Form Editor.

To create a new Adaptive Layout, Curtis clicks the Create New button and defines the following Adaptive Layout properties:

Property	Value
Name	Tablet Layout
Description	Use this Layout to design Forms that are optimized for the tablet screen in portrait orientation.
Width	600
Height	960
Icon
Guide Color	Yellow

With the dialog window still open, Curtis clicks Save As Preset. The set of properties is saved in the Adaptive Layout Preset Manager so that it can be reused for other Forms.

Curtis selects OK and then makes design changes in the Form Editor so that all fields fit within the Tablet layout boundaries. The changes that Curtis makes to the Tablet layout do not affect the other adaptive layouts that already exist for the form. Christine confirms the changes and gives Curtis permission to publish the Blueprint. When a member of the sales team brings up the form, CSM recognizes the display size and automatically renders the Tablet layout for an optimal user experience.

Scenario: Optimizing Additional Forms for Tablets Using an Adaptive Layout Preset

The River T. Corp sales team is impressed with the Incident Portal Form as it is displayed on their tablets, so they ask Christine to similarly optimize the Knowledge Article Portal Form.

Christine assigns a task to Curtis to design a new Adaptive Layout for the Knowledge Article Portal Form with identical dimensions to the Tablet Layout that he created for the Incident Portal Form. Curtis can save time on this task by using the Adaptive Layout Preset that he defined earlier.

To start, Curtis creates a new Blueprint. He opens the Knowledge Article Form using the Portal Default View in the Form Editor. Then, he clicks the Create New button to create a new layout. The Create Layout dialog opens.

In the 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 Tablet Layout, selects it, and clicks OK. The Create Layout dialog is automatically populated with the Preset properties, which were defined to match the tablet screen dimensions in portrait orientation.