(Example) Configure the Data Grid Form Control

This example shows how to configure the Data Grid form control.

Background and Setup

Result

This example shows how to configure the Data Grid form control in the Sales Invoice Request form to populate the data from a Microsoft Excel file to the Invoice Items field. At runtime, the eForm shows the data from the Excel file in a Data Grid form control.


Sales Invoice Request form

Prerequisites

Good to Know

  • The Sales Invoice app creates an invoice for a product sale.

    For the use case in this example, when the Sales Invoice Request form opens, it populates the information from a Microsoft Excel file to the Invoice Items field, which uses a Data Grid form control.

  • In the version of the Sales Invoice app released on May 1, 2018, the eForms use the Subform (Legacy) form control for the Invoice Items field. In this example, the Subform (Legacy) form control is replaced with the Data Grid form control.

Step 1: Configure the Data Grid Form Control with a Lookup

First, configure the Data Grid form control with the lookup to populate data from the Microsoft Excel file at runtime.

How to Start

  1. Click App Builder.

    Click App Builder
  2. On the App Builder Home screen, click All Apps.

    Click All Apps
  3. On the All Apps screen, on the Sales Invoice app, click Edit Edit icon.

    Click Edit
  4. On the App Details screen, hover over the Sales Invoice Request form, and click Edit Edit icon.

    Click Edit
  5. On the Sales Invoice Request form, in the Advanced Controls tab, drag a Data Grid Data Grid icon form control onto your eForm.

    Drag Auto Lookup Control

Procedure

  1. On the Sales Invoice Request form, put your cursor over the Data Grid form control, and the form control toolbar shows.

    Data Grid Form Control Toolbar
  2. Click Edit Properties Edit Properties icon.

    Edit Properties icon
  3. On the Field Settings - Data Grid screen, delete the default label name from the Label field.

    In this example, the form has a label for this field. The label name for this field is not required.


    Label Field
  4. Click the Configure tab.

    Configure tab
  5. On the Configure tab, in the List Type field, select Lookup List.

    Select List Type
  6. On the Lookup Source field, select the lookup that use to populate data to the Data Grid form control.

    In this example, the lookup name is Sales Invoice Items. For information about how to create the Sales Invoice Items lookup, refer to (Example) Configure an Auto-Lookup Form Control with Microsoft Excel.


    Select Lookup Source
  7. To show the options to add, change, or delete records at runtime, select these fields:
    • Allow Add
    • Allow Delete
    • Allow Edit

    Select Fields
  8. To save the changes, click Close Screen Close Screen icon.
  9. On the Sales Invoice Request form, expand the Data Grid form control to the width to show on the eForm.

    Expand Data Grid Form Control

Step 3: (Optional) Run the App

Next, run the app.

For more information, refer to My Apps screen

How to Get the App

This example is based on the Sales Invoice app from the AgilePoint NX App Store. Use this procedure to get the app.

Prerequisites

Good to Know

  • This procedure is optional. It is provided so you can test the example with an out-of-the-box app.
  • This is part of the Background and Setup procedures, but many users preferred this step to appear after the example, not before it.

Procedure

  1. Click App Store.

    App Store
  2. In the CATEGORY section, click Sales.

    App Store screen
  3. Click the Sales Invoice app.

    Sales Invoice screen
  4. On the Sales Invoice screen, click Add.

    Sales Invoice screen
  5. On the Trust App screen, click Trust it.
  6. Click Return to site.