Page: About Screens and Views
Page: About Screens and Views
Page: Creating Screens and Views Tutorials
Page: Display Your Data
Page: ListBuilder Functions
Page: Managing Views
Page: Upload Handling
Page: Creating Screens
Page: Pop-ups and Pop-overs
Page: Upload Status Screen
Page: View Functions
Display Your Data
In the previous article, Connect to Data, you connected to a data source and created an entity for that data source so that the data can be accessed by your app. The next steps is to update your app to access this data source and display its data.
In this article, you will:
- Create a List, Summary, and Find screen from your entity.
- View data in the List screen.
- Navigate to Summary and Find screens.
You can also watch a video tutorials on connecting to data sources in AppStudio. The pagelists the available video tutorials on connecting to data sources.
Create a List, Summary, and Find screen from your entity
Every screen in AppStudio is associated with an entity. In this exercise, you create three screens from the contacts entity:
- List screen - lets you display multiple items from the data in the contacts entity in a list of rows and columns. List screens support additional data layouts as well.
- Summary screen - displays detailed information about a single item in the entity. The Summary screen created in this exercise is actually a screen of type Form, that is named Summary.
- Find screen - lets you search for items in the entity.
When AppStudio creates these screens, it also creates one view for each screen. Remember that a screen itself does not control what appears to the user. You must add a view to a screen to lay out the visual aspects of the app.
To create a List, Summary, and Find screen:
- Start AppStudio and load the Hello World app.
- Right click on the contacts entity in the Entity Navigator.
- Select Create screens for > Default to create the List, Summary, and Find screens. The new screens appear in the Application Explorer area of AppStudio, under Screen Workflows > Default > contacts:
AppStudio also creates a view associated with each screen. The screens and their associated view have the same name:
- List Screen: the screen and view are named contacts List
- Summary Screen: the screen and view are named contacts Summary
- Form Screen: the screen and view are named contacts Find
- In AppStudio, click Screen Workflows > Default in the toolbar. The Screen Navigator appears in the Workspace.
The three new screens appear on top of each other, in the upper-left corner of the Screen Navigator. Click on each screen and drag it so you can see each screen. To select a screen, single-click on it, and release the mouse button. Then click and drag the screen.
Alternatively, select the Arrange Screens icon in the Screen Navigator toolbar to arrange the screens.
View data in a List screen
Now that you have added screens and views to the app, modify your app so that you can view the data. In this exercise, you add a new Button control to the app that navigates to the List screen.
To navigate to your screens:
- In the Application Explorer of AppStudio, open the Home view by navigating to Views > Form > Home and double clicking on Home.
- Select the Toolbox button in the lower-left corner of AppStudio. Make sure the Controls icon is selected in the Toolbox area.
- Add an Empty Space control below the Hello World button control.
- Add a new Button control under the new Empty Space control.
- Click on the new Button control. Its properties appear in the Properties panel of AppStudio.
- Set the following properties of the Button control:
- Label: Show Contacts
- Screen Alignment: Center
- Action: Navigation
- Target Screen: contacts List (Default)
- Target View: contacts List
- Save your app.
- Refresh the app in your simulator. Click the Show Contacts button to see a raw list of contact data:
Navigate to Summary and Find screens
Now that you have viewed your data, you narrow down the data down, and add navigation to screens that show a summary of the data and also search the data.
To add Summary and Find screens:
- In the Application Explorer, open the contacts List view by navigating to Views > List > contacts List and double clicking on contacts List. The contacts List view appears in AppStudio.
- Select and delete all of the Column controls in the left panel of the view, except ContactID, PrimaryAccountName, FirstName, and LastName (the first four columns). The view appears as shown below:
- Save the app.
- Refresh the app in a simulator.
- Click on the Show Contacts button. The List screen appears showing all the items in the contacts entity. This view shows only the PrimaryAccountName, FirstName, and LastName columns. The ContactID column is hidden.
- Click on a row in the List screen. The Summary screen appears and shows all the contact's details, including data that is not in the List screen.
- Go back to the List screen.
- Access the Find screen:
- On an Android device, click the magnifying glass icon to perform a search using the Find screen.
- On a BlackBerry device, use the menu button to open the Find screen.
On an iOS device, click the magnifying glass button.
Where to next