Step 3: Lookup Form Data

The third step is to edit your custom lookup form to add a data grid to show a data set so that you understand the fundamental form and data relationship concepts.

It is expected that this step will take no more than 10 minutes of your time.

Open your Lookup Form

Open App Studio, then open the Forms configurator as you did in step 1.

Edit

Edit your form using the Edit button in the grid row:

Design

Click the design button to open form designer.

Consume Data in your Lookup Form

Your lookup form, only has one panel. We will now add a grid component and connect it to your data source:

Components

Click on the components section of the tools:

Grid

You should see a Grid component. Drag this into your panel:

Once the grid has been dropped, the grid will be shown:

Edit Grid Properties

Click on the Grid component which opens the Component Properties: Grid modal popup, however the system will then prompt you immediately to connect a data source with the prompt: "You should add a single 'Read' data source request to pull data into your component":

Choose Data Source Request

Locate the data source request you created in step 2 and click the Select button:

The selected data source request will appear in the Data Sources tab:

Apply

Apply your changes to close the properties popup.

Save

Save your changes using the form designer Save button top right.

Configure Grid Data

Click on the Grid component on your form to re-open the Component Properties: Grid modal popup. This time the Grid tab is visible:

Population

The population tab shows how the grid is populated. Leave it to Form Loaded so that it will populate itself when the form loads.

Columns

The columns tab will show all of the columns with the same name as the fields returned by the ReST API. API's typically talk about fields and records, but data grids talk about columns and rows.

Up, Down and Delete Buttons

These buttons to the left of the column list respectively allow the selected column to be moved up, down, or removed.

Column Properties

The column properties allow you to format each column. The only thing you should change is for the Image_URL column, set the Image Size to be 48 x 48.

Apply

Use the Apply button to apply your changes to the grid.

Save

Save your changes using the form designer Save button top right.

Publish and Test

Publish your changes and test your application.

Because you are designing using App Studio, your changes are already published and ready for you to test.

Open Form from History Menu

When you last opened your first lookup form, it should be visible in the History menu from where you can click it to re-open your lookup form:

Your lookup form should display showing your grid and all of the data from the ReST API data source you configured in step 2: