In the previous articles, 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.
It's time to create a brand new screen featuring a new object: the Grid object.
Create New Screen
Click the vertical ellipsis of the Cars app, and select Manage link.
In your App Manager for your Cars app, you’ll see your existing screen (New Car) and an option to Create Screen. Click it.
Give the new screen a name: Cars List.
For the base table, keep the default of the Cars table.
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.
Click Create. You’ll be taken to the Design Mode for this screen.
Click on Section1 and change its Caption to secList.
Since we don’t want users to see this caption, uncheck Show Header/Title Bar.
Change the padding of SectionList to 1x for left, right, top, and bottom.
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.
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.
Change the caption to “GridCar”.
Again, we don’t want our users to see this object labeled as “grid”, so click on it, then under Settings, click Hide Caption.
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.
On GridCar, click the down arrow and from the menu, 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).
The columns properties menu will display only one column 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 Driver. This will actually display the name from the Contacts table. Click Add another column.
A list of fields show up on the right panel. Select ContactName field to add it.
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.
Repeat step 2 to 4 to add the following fields:
Column: CarName | Caption: Car Name
Column: CarMake | Caption: Make
Column: LicensePlate | Caption: Plate # Considering this field is not that wide, set the width of this column to 10%.
Column: IsActive | Caption: Active Considering this field will either be yes or no, set the width of this column to 10%.
Click Close to return to the Design Mode.
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 clicking the Hide On Phone check box in the column properties.
And we’re good! We’ve now set up our column headers which 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.