Exercise - Create a form

Completed

Scenario

The finance and operations apps developer is asked to create a new form for the Fleet Management company. The company wants a simple page to enter customer information. They want the form to pull fields from the CustTable element.

Create a new project

  1. Close Microsoft Edge, and finance and operations in the Lab environment.
  2. Right-click Visual Studio and select Run as administrator.
  3. Select Continue without code.
  4. To ensure the correct applications suite is referenced, select Dynamics 365 in the Extensions menu.
  5. Select Model management > Update model parameters.
  6. In the Model name field, select Fleet Management.
  7. Select Next.
  8. Select the following models, by selecting the checkmark next to the model. Any models that are already selected should remain selected.
    • ApplicationCommon
    • ApplicationFoundation
    • ApplicationPlatform
    • ApplicationSuite
    • ContactPerson
    • Currency
    • GeneralLedger
    • Ledger
    • Personnel
    • Retail
    • Tax
  9. Select Next until the form closes.
  10. Open the File menu and select New > Project.
  11. In the Create a new project dialog box, if you don't see Finance Operations in the Recent project templates list, search for it, and then select Next.
  12. In the Configure your new project dialog box, enter FleetManagementFormProject in the Project name field.
  13. Select Create.
  14. To ensure the correct applications suite is referenced, select Dynamics 365 in the Extensions menu.
  15. Select Options.
  16. Under the Dynamics 365 node on the left pane, select Projects.
  17. Ensure that the check boxes for Organize projects by element type and Synchronize database on build for newly created project are selected already. If they are not, then do so.
  18. Select OK.

Create a form

  1. In the Solution Explorer window, right-click the project FleetManagementFormProject (ISV).
  2. Select Add > New Item.
  3. Under Dynamics 365 Items select User Interface.
  4. On the middle pane, select Form.
  5. Enter FleetCustomersForm in the Name field.
  6. Select Add. The FleetCustomersForm form opens in the form designer window.

Screenshsot of the FleetCustomersForm form in the form designer window.

Add a pattern and data source to the form

  1. In the form designer window, right-click the Design node of the Simple List on the right pane.
  2. Select Apply pattern > Simple List.
  3. On the left pane of the form designer window, right-click the Data Sources node.
  4. Select New Data Source.
  5. With the new item DataSource1 selected, right-click and select Properties.
  6. In the Properties window in the bottom right of the screen, select CustTable from the drop-down menu, or simply type it in for the Table property,.
  7. Select the Save icon in the ribbon.

Build the simple list form pattern

  1. Click in the bottom Pattern pane of the form designer. You need an ActionPane, Group, and Grid to complete the form pattern.

  2. On the right pane of the form designer, right-click the Design of the Simple List node .

  3. Select New > Action Pane.

  4. With the new Action Pane node selected, go to the Properties window and change the Name property to ActionPane.

  5. Collapse the ActionPane node to keep the right pane of the design node simplified.

  6. Select Save.

  7. Right-click the Design node of the Simple List on the right pane of the form designer.

  8. Select New > Group.

  9. With the new group selected, go to the Properties window and change the Name property to Filters.

  10. Select Save.

  11. Right-click the Filters node on the right pane of the form designer.

  12. Select Apply pattern > Custom and Quick Filters.

  13. Right-click the Filters node on the right pane of the form designer again.

  14. Select New > QuickFilter.

  15. With the new QuickFilter selected, go to the Properties window and change the Name property to QuickFilter.

  16. On the right pane of the form designer, collapse the Filters node.

  17. Select Save.

    Screenshsot of the QuickFilter property.

  18. Right-click the main Design node on the right pane of the form designer.

  19. Select New > Grid.

  20. With the new Grid selected, change the Name property in the Properties window to MainGrid.

  21. On the left pane of the form designer, under the Data Sources node, and under the CustTable node, expand the Fields node.

  22. Select and drag the Party, SalesGroup, CustGroup, and AccountNum fields from the Fields node onto the MainGrid node on the right pane.

  23. Select Save.

    Screenshsot of the AccountNum fields.

  24. Perform a build by right-clicking the project FleetManagementFormProject (ISV) in the Solution Explorer window and then selecting Build.

Preview the form in a browser

  1. After the build is completed without errors, right-click the form FleetCustomersForm in the Solution Explorer window.
  2. Select Set as Startup Object.
  3. Select Ctrl + F5 or select Start in the ribbon to begin running the project. Microsoft Edge opens to display the newly created form (this can take a couple of minutes).
  4. Add a few records to the form by selecting the New button in the Action Pane.

Screenshsot of the FleetCustomersForm page.