In the previous article, we created a screen to add a new car in our Cars app.
However, before we put in functionality to add a new car, we should have a screen to view the cars we added. No point in adding a car if we can't even see we added it.
It's time to create a brand new screen featuring a new object: the Grid object.
Create New Screen
1. Click the vertical ellipsis ( ⋮ ) of the Cars app, and select Manage link.
2. In your Screens Manager for your Cars app, you’ll see your existing screen (New Car) and an option to Create Screen. Click it.
3. Give the new screen a name: Cars List.
4. For the base table, keep the default of the Cars table.
Note: You can choose any table you want for this screen, but the table you choose will inform what fields are available to be dragged into the screen during Design Mode.
5. Click Create. You’ll be taken to the Design Mode for this screen.
6. Click on Section1 and change its Caption to secList.
Grid for Car List
Now it’s time to drag in a grid object which will be used to list the cars in the database.
1. Click the + icon at the top of the right menu to bring up Insert Controls. From the list of objects, drag the Grid into secList.
2. Change the caption to “GridCar”.
Your grid is now technically added to the screen, but of course it has no parameters or data so it’s still pretty useless.
The new grid you created is automatically attached to the Cars table, because this is the base table for the screen. If you were to view the page, however, you wouldn't see data in GridCar because we haven't defined which fields to display. (You also wouldn't see anything because there isn't any data in the table, but we will fix that too!)
1. On GridCar, click the down arrow and from the menu and choose Columns. This will open a menu that will allow us to set up the number of fields we want to appear in our grid (each column will have its own header, like a spreadsheet).
2. The columns defined for this table only has one by default - the RecordID column (which is hidden as soon as the screen is loaded). But you can add more columns from here too! Let’s start by adding a column to display the Contact. This will actually display the name from the Contacts table. Click Add another column.
3. A list of fields show up on the right panel. Select ContactName field to add it.
4. You’ll see the type, field name and caption are all auto-filled. Let’s change the caption to read Driver, since that will be the column header displayed to users.
5. Repeat step 2 to 4 to add the following fields:
- CarName - Caption: Car Name
- CarMake - Caption: Make
- LicensePlate - Caption: Plate # (Considering this field is not that wide, set the width of this column to 10%).
- IsActive - Caption: Active (Considering this field will either be yes or no, set the width of this column to 10%).
6. Click Close to return to the Design Mode.
Note: If you’re building an app you know is going to be used primarily on smartphones, Method best practice says it’s better to only show the most important fields in a grid rather than absolutely everything (in this case, maybe only Driver and Car Name). Method offers you the option to hide additional fields when the screen is loaded on a phone, which means they’d still be visible if you load the screen on your home computer. Do this for any field by unchecking the Show - On Mobile check box in the column properties.
Coming up next...
The grid has been created and we've set up the columns to determine what information will be displayed in the grid.
In the next mission, we're going to set up the Navigation section of your screen.