(Example) Create and Run a Form-Based App with an Existing AgilePoint Data Entity (Modern)

This example shows how to create and run a form-based app that uses an entity in AgilePoint NX Data Entities as its data source in the Modern Add an App Experience.

Background and Setup

Video: Form-Based App (Modern)

Video: Know Your App Builder IDE (Modern)

Prerequisites

Good to Know

Step 1: Create a Form-Based App

The first step is to create a form-based app that uses an entity in AgilePoint NX Data Entities as its data source.

How to Start

  1. Click App Builder.

    Build Apps screen

Procedure

  1. On the App Explorer screen, click Add App.

    Add App button
  2. On the What type of app would you like to build? screen, click Form-Based App.

    What type of app would you like to build? screen
  3. Click Next.
  4. On the How will people identify your app? screen, in the App Name field, enter Customer Request App.

    What type of app would you like to build? screen
  5. In the Category field, select Customer Service.

    What type of app would you like to build? screen
  6. Click Next.
  7. On the Do you want to create widget form (not typical)? screen, click Not Required.

    Do you want to create widget form (not typical)? screen
  8. Click Next.
  9. On the Where do you want to store the data for your app? screen, select Data Entities.

    Where do you want to store the data for your app?
  10. Click Next.
  11. On the How do you want to set up your entity? screen, in the Data Source Name field, enter CustomerRequestEntity.

    How do you want to set up your entity? screen
  12. In the Primary Entity list, select Customer Request.

    Configuration tab
  13. Click the Fields tab.

    Fields tab
  14. On the Fields tab, select these fields and deselect the other fields:
    • Customer Id
    • Date Of Birth
    • EmailId
    • First Name
    • Gender
    • Last Name

    Fields tab
  15. Click Next.
  16. On the Anything else right now? screen, click Next.

    Anything else right now? screen
  17. On the Who can access your app? screen, click Next.

    Who can access your app? screen

    The Sit back and relax while we configure your app screen opens.


    Sit back and relax while we configure your app screen
  18. On the Information screen, click OK.

    Information screen

    The eForm Builder opens the Form Settings screen for the Create form, New Customer Request.


    Form Settings screen

Step 2: Create an eForm

Create an eForm in the eForm Builder.

Good to Know

Procedure

  1. On the Form Settings screen, click General tab.

    Form Settings screen
  2. On the General tab, in the Form Title field, enter Customer Details.

    Form Settings General tab
  3. To save the changes, click Close Screen Close Screen icon.

    The eForm Builder opens the eForm.


    Customer Details Form screen

Step 3: Add Form Controls to the eForm

Add form controls to the eForm.

Good to Know

  • In a form-based app, form controls are mapped to fields from the data model in the associated data source. In this example, the form controls are mapped to fields in the associated entity.

Procedure

  1. On the Data Model screen, in the dataSource list, drag the FirstName variable onto your eForm.

    Customer Details screen
  2. Drag the LastName variable onto your eForm.

    Customer Details Last Name screen
  3. Drag the DateOfBirth variable onto your eForm.

    Customer Details Date of Birth screen
  4. Drag the Gender variable onto your eForm.

    Customer Details Gender screen
  5. Drag the EmailId variable onto your eForm.

    Customer Details Email ID screen

Step 4: Publish the App

Publish the app so users can run it.

Procedure

  1. On the Save quick menu, click Save and Check In Save and Check In icon.

    Save and Check In screen

    The eForm Builder closes, and the App Explorer opens.


    Application Explorer screen
  2. On the Application Explorer screen, click the Update Customer Request form.

    Configuration for the Update form is required before you can publish the app. This example uses an Update form that is the same as the Create form. However, you can change it if necessary.


    Application Explorer Update Customer Request screen
  3. On the Information screen, click Yes.

    Information screen
  4. On the Save quick menu, click Save and Check In Save and Check In icon.

    Save and Check In screen

    The eForm Builder closes, and the App Explorer opens


    Application Explorer screen
  5. On the Application Explorer screen, click Publish.

    Application Explorer Publish screen
  6. On the Information screen, click Check In.

    Information screen
  7. On the Check In Pending Changes screen, click Check In.

    Check In Pending Changes screen
  8. On the Publish App screen, click Publish.

    Publish Application screen
  9. On the Information screen, click Close Screen Close Screen icon.

    For information about app permissions, refer to Change App Permissions (App Builder).


    Information screen

    The eForm Builder opens the Application Explorer screen.


    Application Explorer Opens screen

Step 5: Start the App

After your app is published, you can run it.

Procedure

  1. On the AgilePoint NX Portal, click Work Center.

    Work Center screen
  2. On the Work Center screen, click My Apps.

    My Application screen
  3. On the My Apps screen, click Customer Request App.

    Customer Request App
  4. The View form shows. This is the screen where users can add or change records in the app.

    Customer Request Form

Step 6: Complete the eForm

Complete the eForm.

Procedure

  1. On the My First Form-Based App screen, click Add Add icon.

    My First Form Based Application screen
  2. On the Customer Details Form screen, in the First Name field, enter Jane.

    Customer Details Form screen
  3. In the Last Name field, enter Jackson.

    Customer Details Form Last name screen
  4. In the Date Of Birth field, select 09/04/1990 from the calendar.

    Customer Details Form Date of Birth screen
  5. In the Gender field, enter Male.

    Customer Details Form Gender screen
  6. In the EmailId field, enter jane.jackson@gmail.com.

    Customer Details Form Email ID screen
  7. Click Submit.

    The View form shows. the name you entered in the records list.


    View Form screen

Step 7 (Optional): Change the eForm Data

Optionally, you can change the data you entered in the Create form.

Good to Know

  • This step uses the Update form that was configured in the Publish step. In this example, the Update form looks the same as the Create form, but behind the scenes, they are different eForms. You can change the Update form if necessary.

Procedure

  1. Select the record with the value Jane.

    Update Form screen
  2. Click Edit Edit icon.

    Update Form Edit screen
  3. In the First Name field, change the value to John.

    Customer Details screen
  4. Click Submit.

    The View form shows the data in the records list with the new value, John.


    View Form screen