Creating the User Interface

In this chapter, we will perform many of the tasks required while creating a user interface. This chapter continues from Chapter 2, Data Structures. As we discussed in that chapter, we usually create tables and forms as part of the same process. So, the recipes in this chapter will involve completing a few properties in the data model.

When creating forms, we must provide consistency to the users, and to aid with this, we will use form design patterns. The form design pattern is determined by the table group, as stated in Chapter 2, Data Structures. There are special cases when we can have variations but, for the main part, we should stick to the patterns suggested in this chapter.

The process of creating data structures, forms, and menu items has been split into discrete steps in order to make the recipes easier to read and digest. This also allows...

Technical requirements

You can find the code files for this chapter on GitHub at https://github.com/PacktPublishing/Extending-Microsoft-Dynamics-365-Finance-and-Supply-Chain-Management-Cookbook-Second-Edition/blob/master/Chapter%203.axpp.

Creating the menu structure

The menu structure is carried over from the user interface concepts in AX 2012. In Supply Change Management (SCM), the menus have the same structure, but are opened from the burger menu button, just below Finance and Operations on the top left of the page, as shown in the following screenshot:

Each menu appears under the Modules option, as shown in the following screenshot:

All the menu items for forms, reports, and processes must be placed in the menu structure, even if we create a workspace later.

The menu structure may seem to have been relaxed slightly from the rigid structure recommended in Dynamics AX 2012. In Dynamics AX 2012, we always have the following main headings in a menu: Common, Inquiries, Reports, Periodic, and Setup. If we look at the AccountsPayable menu in the Application Explorer, we will see that the old structure has been flattened...

Creating a parameter form

Parameter forms show settings grouped into field groups and tabs using a table of contents-style form. They are also used to show the number of sequences that have been set up for that module. Number sequences will be covered in Chapter 4, Working with Form Logic and Frameworks. We will be following our vehicle management sample solution in this recipe, but this pattern can be applied to any parameter table.

How to do it...

To create a parameter form, follow these steps:

1. Select a group in the project and press Ctrl + Shift + A or choose New | Item from the right-click context menu.
2. Select User Interface from the left-hand pane and Form from the right-hand pane. Use ConVMSParameters as the Name.

...

Creating menu items

Menu items are references to an object that we wish to add to a menu. We have three types of menu items: Display, Output, and Action. Display is used to add forms, Output is used for reports, and Action is used for classes.

Menu items are also added as privileges to the security system. Users that aren't administrators will not be able to see the menu items unless they are assigned a role, duty, or privilege that gives them access to the menu item's required access level.

Getting ready

We will just need a form, report, or class to create a menu item.

How to do it...

...

Creating setup forms

This follows a similar pattern to the parameter form. Using the table in Chapter 2, Data Structures, we know that we should use Simple list or Simple list and Details - List Grid patterns. Our table has two fields, so we will use the Simple list form design pattern here. This follows the pattern of creating a table of the Group type.

How to do it...

To create a form, follow these steps:

1. Choose to add a new item to the project.
2. Select User Interface from the left-hand pane and Form from the right-hand pane.
3. Name the form as per the table's name; in this case, ConVMSVehicleGroup.
4. Drag the ConVMSVehicleGroup table from the project onto the Data Sources node of the form designer.
5. Use the same label that...

Creating details master (main table) forms

For those of you who are used to Dynamics AX 2012, this style of form replaces the List page and separates the Details form that's used for main tables, such as Products and Customers. List pages are effectively deprecated for this purpose. This may seem a little confusing at first, as we are developing two views of a form at the same time. However, once we have done this a few times, we will get used to the process.

The pattern pane will be our guide in this recipe as it will help us simplify the process and remind us when we have forgotten a key step. We will be continuing with the form design for the main table, that is, ConVMSVehicleTable. However, this recipe can be used as a pattern for any main table.

How to do it...

...

Creating a details transaction (order entry) form

These worksheet forms are the most complicated in terms of the steps required as we now have three states to design: list, header, and lines views. To familiarize yourself with the end result, open and use the All purchase orders form from Accounts Payable | Purchase orders | All purchase orders.

The first part of the pattern is very similar to the Details Master pattern, so we will summarize the details slightly. We will continue with the vehicle service order table, but again, this recipe has been written so that it can be applied to any worksheet table.

How to do it...

To create the details transaction form, follow these steps:

1. Choose to add a new item to the project.
2. Select...

Creating form parts

Form parts are used for two purposes. One is to provide a pop-up form as you hover over a foreign key, such as the popup when you hover over the product number when entering sales or purchase orders. This is great for users as it means they don't necessarily have to navigate away from the task they are performing.

Their other purpose is to create a reused form part that we can place within other forms. We could have a form part that contains product information, which we could add to the product and sales order forms. We can specify a link when we add the form part, making them easy to implement.

The example that we're going to use in this recipe is used so that we can add a list of service orders to a workspace form.

Getting ready

...

Creating tiles with counters for the workspace

Tiles are used as entry points to a form while also having the ability to show information about the data at hand. They can act as prompts for actions and are presented on the tile section of a workspace, as shown in the following screenshot:

The page that opens when you first sign into SCM is also a list of tiles, and each opens a workspace. The workspace will have an image resource that we can design. A key guideline is that all the graphics are minimalistic. All solutions should look and feel as if they are part of the standard solution.

Getting ready

This recipe can be used to create a tile for any form and is usually done for Details Master and Details Transaction to show...

Creating a workspace

The workspace is an area where everything a user will need for a task or group of tasks will be held. The workspace should be able to display all of the key information without scrolling, and is structured as a horizontal space with the following sections:

• Tiles
• Tabbed lists of key data
• Charts (optional)
• Power BI (optional)
• Related information; for example, links to key forms

The dashboard is normally created once we have completed most of the solution; otherwise, we will have nothing to add. The pattern can be easily transposed to your own requirements.

How to do it...

To create the workspace, follow these steps:

1. Create a new form and name it ConVMSVehicleWorkspace.
2. Apply the Workspace Operational...

Adding a filter to a workspace

It can be useful to focus the task being worked on in the workspace to a dataset, such as a specific vehicle group. Workspaces have the ability to implement an interface that automatically filters the data presented on the workspace. This recipe follows on from the previous recipe.

How to do it...

To add filters, follow these steps:

1. On the Design node, right-click on Design and choose New | Group.

2. Move it to the top (Alt + Arrow is useful) and apply the Workspace Page Filter Group pattern. Name it WorkspacePageFilterGroup.
3. Add a new String control and name it VehicleGroupFilter. Change the Extended Data Type property to ConVMSVehicleGroupId and set Auto Declaration to Yes.
4. Expand Methods and...