Lab - Extend a form and add controls

  • 25 minutes

Read this first - before you start the lab!

Important

For this lab, you CANNOT sign in with your own credentials. Use the following steps to sign in to your lab environment with the correct credentials.

  1. Ensure that you are signed in to Microsoft Learn.

  2. Select Launch VM mode or Sign in to launch VM mode in this unit.

  3. In the Resources tab on the lab side bar, select the T icon next to Password in the MININT box, to have the administrator password for the Virtual Machine entered for you.

    Screenshot of the administrator password.

  4. Select Enter.

  5. Microsoft Edge will open. Wait for it to navigate to the Sign in page for finance and operations.

  6. On the Microsoft Sign in page in finance and operations, place your mouse cursor into the Username field.

  7. On the Resources tab of the lab side bar, below the Azure portal heading, select the T icon next to Username, then press Enter.

    Screenshot of the Username field and the Sign in dialog box that appears.

  8. Your mouse cursor will now be in the Password page.

  9. On the Resources tab of the lab side bar, below the Azure portal heading, select the T icon next to select Password, then press Enter.

    Screenshot of the Password field the Enter password dialog box that appears.

  10. Don't stay signed in or store the password on the virtual machine.

  11. Select Accept in the Permissions requested page.

    Screenshot of the Permissions requested page.

  12. To see the lab instructions, select the Instructions tab on the lab side bar.

You can now begin your work on this lab.

Scenario

The finance and operations apps developer has been asked by the Fleet Management company to adjust the appearance and functionality of the Customers page in the Fleet management module. To speed up internal processes, the company wants a tab added to the Action Pane with a button that links to the page so they can enter a free text invoice.

Create a new project

  1. Minimize the Microsoft Edge window.
  2. Select Run as administrator to open Visual Studio.
  3. Select Yes in the Do you want to allow this app to make changes to your device? Window
  4. Select Continue without code to open the Visual Studio.
  5. Go to Dynamics 365 in the Extensions menu in the ribbon in Visual Studio.
  6. Select Model management > Update model parameters.
  7. Select the Fleet Management Model name from the model drop-down list.
  8. Select Next.
  9. Ensure the following models are referenced by selecting the checkmark next to the model:
    • Application Suite
    • Application Foundation
    • Application Common
    • Application Platform
    • Contact Person
    • Currency
    • General Ledger
    • Ledger
    • Personnel
    • Retail
    • Tax
  10. Select Next.
  11. Select Finish.
  12. Open the File menu and select New > Project.
  13. Ensure that Finance Operations is selected in the left pane, and then select Next.
  14. In the Configure your new project dialog box enter FleetManagementFormProject in the Project name field.
  15. Select Create.
  16. Open Dynamics 365 in the Extensions menu.
  17. Select Options.
  18. Under the Dynamics 365 node on the left pane, select Projects.
  19. Select the check boxes for Organize projects by element type and Synchronize database on build for newly created project.
  20. Select OK.

Extend the FMCustomer form

  1. In the search bar, in the Application Explorer window, expand the AOT > User Interface > Forms nodes.
  2. Select the FMCustomer form.
  3. Right-click the FMCustomer form and select Create extension. An element named FMCustomer.FleetManagement will be added to your FleetManagementFormProject in the Solution Explorer window.
  4. Rename the object FMCustomer.Extension.
  5. Double-click the FMCustomer.Extension form in the Solution Explorer window to open it in the form designer window.
  6. Select Save in the ribbon to save your progress.

Add a tab, button group, and button to the Action Pane control

  1. On the right Design pane of the form designer, right-click the ApplicationBar (Action Pane) control.
  2. Select New > Action Pane Tab. A new control has been added named FormActionPaneTabControl1 (Action Pane Tab).
  3. Select the FormActionPaneTabControl1 (Action Pane Tab) heading.
  4. In the Properties window, enter InvoicingTab for the Name property and Invoicing for the Caption property.
  5. On the Design pane, right-click the InvoicingTab (Action Pane Tab) control and select New Button Group.
  6. Select the FormButtonGroupControl1 (Button Group) heading.
  7. In the Properties window, enter CustomersButtonGroup for the Name property and Customers for the Caption property.
  8. On the Design pane, right-click the CustomersButtonGroup (Button Group) control and select New > Menu Item Button.
  9. In the Properties window, for the Menu Item Name property, select CustFreeInvoiceNew from the drop-down list.
  10. Right-click the FMCustomer.Extension form in the Solution Explorer window.
  11. Select Set as Startup Object.
  12. Perform a build by right-clicking FleetManagementFormProject in the Solution Explorer window and then selecting Build.
  13. Run your form to view it in a browser window by selecting Debug > Start Without Debugging from the ribbon. You can also use Ctrl + F5.
  14. In the browser window, select the INVOICING tab on the Action Pane and then select Free text invoice. You should be taken to the page to enter a free text invoice for the selected customer in the FMCustomer.Extension page.

Now close the lab environment

  1. Select the Next button in the bottom-right corner of the side bar.
  2. Select Leave in the pop-up window that appears.