Exercise: Building Layouts

Scenario
The screen to collect customer information is long and does not look good on a desktop screen.

You have been assigned the task to convert the screen and make it look similar to the mockup
below.
Approach
In the section rule add a new layout group. Configure the layout group to use accordion and then
add other layouts to attain the desired design. In the next lesson, we will be updating the
background color for which will impact the accordion.
Note: You need to add a new version of the UPlusApp ruleset for your exercise solutions since all
existing versions are locked.

Procedure
1. Create a new Account Opening case.

2. Use Live UI to identify the section for the first screen. To start Live UI, click the Live UI link in
the footer of Designer Studio. The section is called CollectInformation and is in the uplus-
UPlusApp-Work-AccountOpening class.

3. Add a Layout Group to the CollectInformation section.

4. Set the format to Accordion.

5. Add the existing dynamic layouts for Personal Information, Contact Information and
Identification data to the layout group.

Note: Details have been removed from the screenshot.

6. Click the Gear icon on the Personal information layout and set the Layout format to Inline
grid triple on the General tab.

The layout should now look something like this.

7. Configure sections as shown in the screenshot below. That is, add a dynamic layout with the
title Contact Information and inline grid double format. Drag the Account address and
Telephone information layouts into it. The layout then needs to be updated to look like this.
 Move the City field to between the state/province and postal code.

8. Change the Telephone information layout to inline grid double so that the numbers appear
beside each other. Add stacked layouts for the primary and secondary phone numbers so
that the number appears below the type.

 
9. For the identification data drag the username, password, confirm password and mother’s
maiden name into the layout and set the layout format to inline grid triple. It should then
look like this.

10. Create a new case and verify that the screen looks like the mock-up.