Welcome to Part 4 where we give access to Accounts information
In this step, you create a second screen flow that gives your users access to account information. The first screen lists your company's accounts. When users click a list item in this screen, they'll open a detail screen that shows them some basic information about the account itself and list of the opportunities that belong to it. As you did previously, you'll use the QuickStarts to build this screen flow
The Designer provides you with different ways to add screens to an app. Previously, you used Application Screens in the navbar to add the Opportunities screen. Here, you'll add a screen using the Properties Inspector for the Application Menu component.
- In the Properties Inspector for the Application Menu component, click Menu Item.
- Complete the Create Screen wizard as follows:
- In the Landing Screen page, choose Simple Screen and then click Next.
Accountsin the Screen Title screen and then click Next.
- In the Content screen, choose List and then click Next, Finish
- Click Accounts in the Preview. Then click Go to Screen in the Properties Inspector.
Now lets put some data in the list
Previously, you enabled the dashboard components to display data using the Data Mapper tool. In this (and subsequent) steps, you'll use the QuickStarts. These wizards not only allow you to add data to your UI, but enable you to build entire screen flows.
To add data to the accounts list:
Back in the Designer, the Accounts list displays in the Preview showing mock data.
To add data to the accounts list:
- In the Properties Inspector for the List component, click the QuickStart icon.
- Click the Add Data Quickstart.
- In the Layout page, choose Title, Subtitle.
- Choose Account as the business object.
- Map the Account business object fields to the List Component as follows and then click Next.
- Drag name to the Title field.
- Drag city, state, country and region into the Subtitle field.
- We're not going to filter this data, so click Finish in the Query page.
Now In this step, you add a screen that lets your users see the opportunities that belong to a selected account along with some high-level information about the account itself.
- Click Add a Detail Screen.
- Choose Simple Screen with Summary.
Accountin the Screen Title field and then click Next.
- Choose List and then click Next.
- Click Finish.
- Click Go to Detail Screen.
- Open the Components Palette and then select the Card Component.
- Drag the Card component into the Summary Panel in the Preview
- In the Properties Inspector, click the Properties tab
- In the Properties Inspector for the Card component, clear the Graphic and Detail Section options. Select the Subtitle 1, and Subtitle 2 options.
- Open the QuickStart menu, choose Add Data and then choose Account. Click Next.
- In the Data tab, map the fields as follows and then click Next.
- You need to filter the data by the Account ID (aid) so that users can see the opportunity details that belong to an account. MAX has volunteered the aid from the parent screen (Accounts), so click Finish.
- Resize the summary pane:
- Double-click the Account screen header in the Preview.
- In the Properties Inspector, click Custom and then decrement the size to 100.
- Next, add data to the List component:
- Select the List component in the Preview or in the breadcrumbs trail
- If the QuickStarts panel doesn't appear, click QuickStarts and then click Add Data.
- You need all of the list fields for the account details, so choose the default layout and then click Next.
- In the Data Source page, click Opportunity.
- You'll see the mapped data when you change the Icon field type from a graphic to a status meter. You'll do that after you filter the data in the next step.
- You need to filter the data by the Account ID (aid) to allow users to see the opportunity details that belong to an account. Because the aid parameter belongs to the Accounts screen, click the Parent Screen category. Next, drag aid into the Aid field in the Query Parameters section of the screen. Click Finish.
- In the Preview, select the Icon field
- Change the icon field from an image to a status meter. The list data displays.
OK we are done adding screens and this blog post.
In the next post we will cover off Navigation and Testing !