Model the app

The Business Application diagram allows you to model your application graphically and implement it for use. Wizards generate the code and create forms.

In this task, you work with the Business Application diagram provided by the BAM. It shows the flow of your program.

  1. Go to Project > src > Applicationflow and open the appflow.4ba file.
    This is your Business Application (BA) diagram, which shows the flow of your program. It includes one program entity (Main) and one CRUD form entity (form).
  2. Right-click on the form entity, select Rename, and change the name to "Account".
  3. Right-click on the blank diagram and select New > CRUD Form. Rename the new form entity to "Orders".
  4. Right-click the Account entity, and select Add Relation To. Drag the arrow from the Account to the Orders entity to create a relation between the forms.
    Figure: Defining a master-detail relationship between forms

    This figure is a screenshot of a master-detail relationship being defined between the forms in the Business Application diagram.
  5. Select File > Save all.

Implement the master form

From the BA diagram, implement the CRUD form from database, and select fields from the table.

  1. In appflow.4ba, right-click the Account entity and select Implement CRUD Form from Database.
  2. Select the officestore database and the account table. Select the first ten fields and use the single right arrow to add these fields to the Selected Fields list.
    Figure: New Form from Database wizard Column selection

    This figure is a screenshot of New Form from Database wizard Column selection.
  3. Click Next.
  4. Set Number of fields to 1, and click Finish.
    Figure: New Form from Database wizard container selection

    This figure is a screenshot of New Form from Database wizard Container selection. The "Number of fields" property is highlighted and set to 1.

    The fields are added to the form, contained in a grid container.

  5. Edit the labels on the form (right-click on each label, select Edit Text).
    Figure: Account form with edited labels

    This figure is a screenshot of the Account.4fdm form, with the labels reading User ID, Email, First name, Last name, Status, Address, Address, City, State, and Zip Code.
  6. Using Save As, save the form in the $ProjectDir/src directory and insert it in the project under the src/Entities node.
    Figure: Saving the form

    This figure is a screenshot of the Save As dialog, where the form is saved as "C:\MobileBAMForms\src\Account.4fdm" and is included in the project under "Project/src/Entities".
  7. Select File > Save all.

Implement the detail form

From the BA diagram, implement a CRUD form from database for the detail form. Set the relation properties between the master and detail form.

  1. In appflow.4ba, right-click on the Orders entity and select Implement CRUD Form from Database.
  2. Add fields from the Orders table:
    1. Select the officestore database and the orders table.
    2. Select these fields: orderid, userid, orderdate, totalprice, and creditcard.
    3. Use the single right arrow to add these fields to the Selected Fields list.
    4. Click Next.
  3. Select Table for the container, and click Finish.
  4. Using Save As, save the form in the $ProjectDir/src directory and insert it in the project under the src/Entities node.
  5. Select the relation between the Account and Orders entities and set the following properties.
    1. Under Filter, set Source Field to account.userid and Destination Field to orders.userid.
    2. Under Source UI Settings , set Action to orders.
    3. Under Functionality , select disable Add, disable Modify, and disable Delete.
    Figure: Defining a relationship between the master and detail form

    This figure shows a screenshot of a relationship being defined between the master and the detail form.
  6. Select File > Save all.

Implement the edit form

Add an edit form to edit the order detail.

A user may want to edit an order and expects to be able to tap (double click) the row to go to a form populated with the selected record. This is achieved in the mobile app by creating a form similar to the Orders form but with a Grid layout instead of a Table.

  1. In appflow.4ba, right-click on the blank diagram and select New > CRUD Form. Rename the form entity to "EditOrder"
  2. Right-click on the EditOrder entity and select Implement CRUD Form from Database.
  3. Add fields from the Orders table:
    1. Select the officestore database and the orders table.
    2. Select these fields: orderid, userid, orderdate, totalprice, and creditcard.
    3. Use the single right arrow to add these fields to the Selected Fields list.
    4. Click Next.
  4. Set Number of fields to 1, and click Finish.
  5. Using Save As, save the form in the $ProjectDir/src directory and insert it in the project under the src/Entities node.
  6. Create a relation between Orders and EditOrder entities. Right-click on the Orders entity and select Add Relation to. Drag the arrow from Orders to EditOrder.
  7. Select the relation between the Orders and the EditOrder entity and set the following properties:
    1. Under Filter, set both Source Field and Destination Field to orders.orderid.
    2. Under Source UI Settings , set Action to open_EditOrder_form.
    3. Under Functionality , select disable Add.
    4. Under MODIFY Behavior , set both On accept and On cancel to Exitform.
    Figure: Defining a relation between Orders and EditOrder forms

    This figure shows a screenshot of a relation being defined between the Orders and the EditOrder form.
  8. Double-click on the Orders entity to open it in Form Designer. Specify the action to be triggered when a row is tapped:
    1. Select the table container in the form.
      Tip:

      Use the Form Structure view to select the table called officestore1.

    2. In the Property view, select the Miscellaneous > doubleClick property, and enter open_EditOrder_form.
  9. Select File > Save all.

Implement the program

From the BA diagram, implement the program module.

  1. Right-click the Main program entity and select Implement Program.
  2. Using Save As, save the program file as Main.4prg in the $ProjectDir/src directory, and insert it in the project under the Main_prg node. This file is used to generate the source code for the main function. Click OK to close the Save As dialog.
  3. Select File > Save all.