User Interface Design For Microsoft Dynamics 365 for Operations

Introduction to User Interface Design

Programming the user interface is a requirement of new development within Microsoft Dynamics 365 for Operations (MyDyn365).  This article explores user interface elements that are used to view, interact, and review data. In this case, we try possibilities using a familiar tool, the Magic 8 Ball^®.  The Magic 8 Ball (made by Mattel) is a mysterious device that provides solutions to all of life’s questions with a simple shake of the ball. Beneath the murky blue netherworld, there are many more choices than expected. Our example builds upon previous articles were we covered database manipulation and X++ control statements.  This expands upon those ideas and finishes them up with a user interface that not only operates the Magic 8 Ball; it also adds a new feature of saving the results.

Setup

For our process, we will need a table to store the results of our Magic 8 Ball iterations.  This project will also have a new model dependency in order to incorporate the extension of the Fleet Management menu in the demonstration image.

Table Creation

1. Open Visual Studio as an administrator and open the
2. Right-click the project and select Add > New Item.
3. Select Data Model > Table.
4. Enter CrazyLuckyResults for the name and click Add.
5. From the Application Explorer, under the Data Types node, expand Extended Data Types.
6. Drag Name over to the CrazyLuckyResutls fields twice.
7. Rename the first Name field Question and the second one Result.
8. Save all and click Build.
9. Ensure that there are no errors. If you have an error, resolve and rebuild.

Update Model Dependency

1. Select the Dynamics 365
2. Open Model Management > Update model parameters.
3. Select CrazyLucky and click Next.
4. Select FleetManagement.
5. Click Next.
6. Click Finish.

The Query

We will need to query the data from the results table.  We can then use this query as a data source for our form.

Query Creation

1. Right-click the project and select Add > New Item.
2. Select Data Model > Query.
3. Enter CrazyLuckyResults for the name and click Add.
4. From the Solution Explorer, drag the CrazyLuckyResults table to the Data Sources area of the query.
5. Select the CrazyLuckyResults data source and set the Dynamics Fields property to Yes.
6. Save all and Build.
7. Ensure that there are no errors. If you have an error, resolve and rebuild.

The User Interface Design

For our user interface, we will need to create a simple list page for the user interaction. In addition, it displays the results each time for review.

Create the Form and Apply a Pattern

1. Right-click the project and select Add > New Item.
2. Select User Interface > From.
3. Enter CrazyLuckyResults for the name and click Add.
4. From the Solution Explorer, drag the CrazyLuckyResults query to the Data Sources area of the form.
5. Click Design in the right-hand frame of the Form
6. Right-click and select Design > Apply pattern > Simple List. This will list the missing components needed for your form pattern below.
7. Right-click and select Design > New > Action Pane.
8. Right-click and select Design > New > Group.
9. Right-click and select Design > New > Grid.
10. Right-click FormGroupControl1 (Group) | Pattern <select>.
11. Select Apply pattern > Custom and Quick Filters.
12. Right-click FormGroupControl1 (Group) | Pattern: Custom and Quick Filters.
13. Select New > QuickFilter.
14. Drag the Question and Result fields from the Crazy Lucky Results (left side) to the FormGridControl1(Grid) (right side), as shown below.
15. Save all and click Build.
16. Ensure that there are no errors. If you have an error, resolve and rebuild.

Create the Menu Items

1. Right-click the project and select Add > New Item.
2. Select User Interface > Display Menu Item.
3. Enter CrazyLuckyResults for the name and click Add.
4. Right-click the CrazyLuckyResults menu item and select properties.
5. Select CrazyLuckyResults for Object.
6. Scroll up for Label.
7. Type Crazy Lucky Results Decision Maker in the Label
8. Save all and click Build.
9. Ensure that there are no errors. If you have an error, resolve and rebuild.
10. Right click the project and select Add > New Item.
11. Select User Interface > Action Menu Item.
12. Enter Eightball for the name and click Add.
13. Right-click the CrazyLuckyResults menu item and select properties.
14. Select Class for Object Type.
15. Select Eightball for Object.
16. Scroll up for Label.
17. Type Use the Magic 8 Ball in the Label
18. Save all and click Build.
19. Ensure that there are no errors. If you have an error, resolve and rebuild.

Extend the Menu

1. In the Application Explorer, search for Fleet Management.
2. Under Menus, right-click the Fleet Management
3. Select Create Extension

Note: If this is not available, see instructions for Update Fleet Management model dependency above.

Adding the Menu Items

1. Right-click Extension and click Open.
2. Expand the Rentals
3. Drag the CrazyLuckyResults Display menu item to the Rentals
4. Right-click the CrazyLuckyResults form and click Open if it is not already open.
5. Right-click FormActionPaneControl1 (ActionPane) and click New > Button Group.
6. Drag the Eightball Action menu item to the FormActionPaneControl1 (ActionPane) as shown below.
7. Save all and click Build.
8. Ensure that there are no errors. If you have an error, resolve and rebuild.

The Code

The code is the part that creates the dialog box for our use.  To ensure that all of the code from previous articles is cohesive, I have included the entire class in the screen shots below.

Changing the Code

1. Open the Eightball
2. Ensure that it matches the following example.
3.  Save all and click Build.
4. Ensure that there are no errors. If you have an error, resolve and rebuild.

Review the Results

Now the fun begins. You can now interact with your Magic 8 Ball in the User Interface.  If you are unfamiliar with the process, here is a quick process sheet.

Browsing the Form

1. Open Dynamics 365 for Operations.
2. Click Show navigation pane.
3. Open the Fleet Management
4. Click the Crazy Lucky Result Decision Maker menu item under Rentals.
5. Click Use the Magic 8 Ball.
6. Enter your question and click OK.
7. Review the results.
8. Refresh the form for previous results.

Conclusion

This article explored the key aspects of the user interface design MsDyn365 for the Magic 8 Ball. First, we set up the operation we created a table for our list page so that we could have the results set saved each time. Next, we created a query to retrieve the information from our table.  Finally, we designed the user interface interaction so that there were forms and buttons to navigate. In addition, there was the Eightball class that we had created in earlier articles, only this time we added a dialog box for a popup experience from the Use the Magic Eightball button pointed to our class. All along this allowed us to view, interact, and review the data after a business operation was completed.  Enjoy the Magic 8 Ball. Notice: This not recommended for production or for those 100+ years and older, at least according to Mattel’s packaging.

For more information I would recommend that you attend our Dynamics AX or Dynamics 365 training in person or on-demand online to learn more.

Plus keep an eye out for more articles that dive in to the technical aspects of using X++ code.  Visit academy.rsmus.com for more information and training materials that will cover this and hundreds of other topics for AX2012 and MsDyn365.

by Shaun McMikle for RSM

RSM Staff