Simple List and Details Form in D365

In Microsoft Dynamics 365 for Finance and Operations one of the most common tasks is to create forms. Forms allow users to enter data into the system, view existing data, and interact with the system. In a previous article I explained the basics of how to create a form in D365. In this article, I will explain how to create a Simple List and Details form in D365. This is a very common form pattern that has a more interesting look and feel. Learn when to use this form pattern. And how to use Visual Studio to help you implement the pattern correctly.

Form Patterns

To begin with, Simple List and Details is a form pattern within D365. When learning how to create a form in D365 it is important to understand form patterns. It is a best practice for each form to use what is called a form pattern. See Microsoft’s documentation here:

The purpose of using a form pattern is to ensure all the forms within the system have a consistent look and feel. This helps users understand how to use the form very quickly, because it looks like others they have used in the past.

Additionally, form patterns help developers in a couple ways.

1. A developer can tell Visual Studio what form pattern they are using. Then, Visual Studio can provide a guided experience of what pieces need to be added to the form to follow that pattern.
2. After applying a pattern, Visual Studio can default certain form control properties.

Simple List

With this in mind, it can be confusing to know which form pattern to use. Therefore, I wanted to cover the most common ones, and how to use them.

The most basic form pattern is called ‘Simple List’. It is for when you essentially only need to show a grid. For instructions on how to create this type of form see my other article “How to create a form in D365“. Additionally, see Microsoft’s documentation here.

Simple List and Details

The next most common type of form is the Simple List and Details. This is the focus on this article. And, will be needed knowledge for future articles.

The Simple List and Details form in D365 is often used when there is too many columns to show effectively in a grid. Instead, the main ID and description columns are shown in a grid on the left side of the form. Then, all the rest of the data is shown in various fast tabs on the right side of the form when a record is selected.

Within the Simple List and Details form pattern in D365 there are three variants.

1. List Grid – This is the pattern that should be used by default.
2. Tabular Grid – This should be used when three or more fields need to be shown in the left grid.
3. Tree – This should be used if the left grid section is actually a hierarchy ‘tree’ control and not a grid.

Additionally, you can see Microsoft’s documentation here.

Examples

Before explaining how to create this type of form, it can be helpful to see some example forms. In this way, you can confirm that the data you are are trying to show fits into this pattern.

To see a List Grid, go to Inventory management>Setup>Inventory>Item groups.

For an example of a Tabular Grid, go to General ledger>Currencies>Currency exchange rates.

Lastly, for an example of a Tree, go to Sales and marketing>Setup>Cases>Case categories.

Notice, the main difference is that the information in the left side is different. The right side is the same for all three variants. It can show fields, tabs with fields, and tabs with grids.

Create A Simple List and Details Form

Now that you have confirmed that the Simple List and Details form pattern is the one you want to build, let’s create it.

First, open Visual Studio and create a new Finance and Operations project. In this example, I named my project ‘TutorialSimpleListAndDetailsForm‘. Be sure to right click on the project, and set the ‘Model’ to the custom model you are working in. See How to Create a Model In D365 if you have not yet created one.

Secondly, right click on your project, and select Add>New Item. In the dialog that opens, select ‘Form’, and provide a name for the form. In my example, I will call my form tutorialSimpleListAndDetailsListGrid. Then press Add.

Add A Datasource

Now that we have the Simple List and Details form created, we can begin added all the needed pieces to the form design. Double click on the form in your project to open the form designer.

To begin, we need to drag a table to the ‘Data sources‘ node in the form designer. In most cases, this will be a custom table you have created. And you are creating a form to allow users to add new records, update data, and delete records.

For this example, I will add the table InventItemGroup, since this is base table that every developer will have. First, search for InventItemGroup in the Application Explorer window. Secondly, drag the InventItemGroup table from the search results onto the ‘Data sources‘ node in the form designer window. Notice, a new datasource will appear under the Data sources node named InventItemGroup.

Set the Form Pattern

Next, we need to tell Visual Studio that we plan to create a Simple List and Details form.

In the form design window, right click on the Design node, and select Apply pattern>Simple List and Details – List Grid.

Notice, the window below changes focus to the ‘Pattern’ tab. This form shows us all of the form controls needed to follow this pattern.

Add an Application Bar (ActionPane)

First, we see from the Pattern tab that we need to add an Application Bar. This is where the buttons, such as New and Delete are shown.

To add the Application Bar (Action Pane), right click on the ‘Design’ node and select New>Action Pane.

Now, select the ‘Design‘ node again, and the ‘Pattern‘ tab. Notice, the system detects that the control has been created, and the color of that control is no longer red.

Follow An Example

Before moving onto the next steps, I wanted to provide an overview which will help. One of the easiest ways to build your own forms is to look at an example. Then add all of the same nodes you see in the example. For instance, you can look at the form design of the InventItemGroup form in Visual Studio.

First, see that this form already contains the ActionPane we just added.

Secondly, it contains a Group control named ‘GridContainer‘. This group is what causes the left side of the form to show.

Thirdly, there is a Group control named ‘DetailsHeader‘.

Fourthly, there is a Tab named ‘Tab‘.

You can name each control whatever you want. But these four main components must exist on all Simple List and Details forms. Once you understand this, and copy an example, it becomes pretty easy to create these forms. Next, I will provide the specific steps.

Add The Main Components First

I have found it is easiest to add the top level form control first. Then, later add the controls needed inside those nodes.

First, right click on the Design node and select New>Group. Next, right click the group that you just created, and select Properties. Change the Name property to ‘GridContainer‘.

Secondly, right click on the Design node and select New>Group. Next, right click the group that you just created, and select Properties. Change the Name property to ‘DetailsHeader‘.

Again, right click on the group you just created, and select Apply pattern>Fields and Field Groups.

Thirdly, right click on the Design node and select New>Tab. Next, right click the group that you just created, and select Properties. Change the Name property to ‘Tab‘.

Finally, click back on the ‘Design‘ node, and select the ‘Pattern‘ tab. You will see that the system recognizes you have added all of the top level controls. However, someof the controls are missing requirements. We will work on those next.

Left Side Grid

The left side of a Simple List and Details form in D365 should contain either a grid or a tree control. In this example, we are using the ‘List Grid’ variant. Therefore, we will create a grid.

First, select the first group in the form designer. In this example, we named it ‘GridContainer‘.

Notice, the ‘Pattern’ tab is telling us that we are missing a ‘Quick Filter‘ control and a Grid control.

Second, right click on the control named ‘GridContainer’, and select New>QuickFilter.

Third, again right click on the control named ‘GridContainer‘, and select New>Grid.

Fourth, expand the data source named InventItemGroup. Next, expand the Fields node underneath. Then, for this example, drag the ‘ItemGroupId‘ and the ‘Name‘ fields over to the Grid control that you just created. When doing this on your own, select the field that is the unique identifier on the table. And, for the second field, pick a field used to describe the data.

Right Side Header Fields

After finishing the left side, we now need to complete the right side of the Simple List and Details form in D365.

First, locate the group control that we named ‘DetailsHeader’. This should be the second group in the form. Currently, there are now fields in this group.

Next, add the same two fields that you added to the grid, to this group.

For this example, drag the ItemGroupId and Name fields onto the ‘DetailsHeader’ group control.

Right Side Tab

Finally, we are nearly finished creating the Simple List and Details form in D365.

First, locate the tab control that we named ‘Tab’. Next, right click the control and select ‘New Tab Page‘.

Until now, most of the steps we have performed we have had to do to meet the minimum requirements. Now, you are given more freedom to add what you want. For example, you can create one or many ‘Tab Pages’ on this tab. Additionally, you can add fields inside the tab pages. Or, you can add grids inside the tab pages.

Notably, the purpose of this section of the form is to allow users to see all of the data on this record, or related to this record, in an organized way.

In this example, I will go ahead and drag a field fields from the InventItemGroup data source onto the Tab Page that I just created. This will make those fields visible to the user.

Review Pattern

Now, let’s confirm that we created the Simple List and Details form in D365 correctly.

Click on the ‘Design‘ node in the form designer. Then, select the Pattern tab in the bottom window. Notice, none of the text is red. Visual Studio has confirmed that we have followed the applied design pattern correctly.

Properties

Finally, there are a number of properties that should always be set on every form created in D365. I will just list a few here now.

Right click the ‘Design’ node and select Properties. Next, in the properties window, set the following properties.

• Caption – Use a label to provide a name for the form.
• Data Source – Set this to the primary data source on the form.
• Title Data Source – Set this to the primary data source on the form.

Create a Menu Item and Add To Menu

Now that the form has been created, you will want to view it in a browser. To do this, first, create a menu item that points to this form. Then, add the menu item to a menu. See this article on How to Create Menu Items in D365 for specific instructions.

Finally, we can see the end result. We have created a form that follows the Simple List and Details form pattern in D365. You can use this form pattern to show data from your own custom tables.

Splitter

If instead of creating a ‘List Grid‘, you decide to create a ‘Tabular Grid‘ or ‘Tree‘ you can add a splitter. This helps you resize the left and right areas of the screen. Or the top and bottom areas of the screen when using the ‘Task Double‘ form pattern. See my article on How to Add A Form Splitter.

Conclusion

In this article you learned how to create a Simple List and Details form in D365. Additionally, you learned about form patterns and how to use Visual Studio to implement a form pattern. The same steps can be applied to creating any of the other forms within Microsoft Dynamics 365 for Finance and Operations. The result is that you have forms that look nice, and are easy for users to use.