Chapter 3: User Interfaces

CHAPTER 3: USER INTERFACES

Objectives
The objectives are:

• Design and build Forms in Microsoft Dynamics® AX.

• Join two data sources on a form.
• Create customized menus and menu items.
• Create a form using form templates.
• Know the components of a list page.
• Create a new FactBox.

Introduction
This course discusses how to develop the user interface without having to write
any code.

Forms are created so that the end-user can enter and view data. To make
navigation easier for the end-user, menus and menu items will be created.

3-1
Development I in Microsoft Dynamics® AX 2012

Forms
Forms are the primary method of interaction between Microsoft Dynamics AX
and the end-user. By understanding and exploring existing forms, new forms can
be developed while retaining the same look and feel as standard Microsoft
Dynamics AX forms.

Elements that Compose a Form

Forms are composed of multiple object categories. The basic object categories of
a form include:

• Methods
• Data Sources
• Parts
• Designs
• Permissions

To examine these categories, open the Application Object Tree (AOT) and locate
the CustTable form within the Forms branch of the AOT and expand the
CustTable form node as shown in the figure.

FIGURE 3.1 CUSTTABLE FORM NODE

Form methods are blocks of X++ code that, for example, are executed when
opening or closing the Form. Form methods are discussed in a later development
course. This course discusses Data sources, Designs and Parts. The next chapter
will discuss Permissions.

Form Designs
Several different standard form designs are available for use in different
situations. To better understand Forms and their design, this course will examine
some of the forms in the application.

3-2
 Chapter 3: User Interfaces

Demonstration: Examining Form Design

This demonstration explains the design of a pre-existing form.

From the application workspace main menu, navigate to Accounts Receivable >
Customers > All customers.

FIGURE 3.2 CUSTOMER LIST FORM

The main part of the form is the grid that displays a list of customers.
Immediately above the grid is a filter. At the top is the Action Pane containing
buttons that will take you to another form, or process an action. On the right is
the FactBox pane that displays information from other tables linked to the
customer record that are currently highlighted. At the bottom is the Preview
Pane, showing more information from the customer table.

Now in the developer workspace, locate the form CustTableListPage. Expand the
Parts node, and the Designs > Design node.

3-3
Development I in Microsoft Dynamics® AX 2012

HINT: You can right click the form and select Personalize. Select the
Information tab, it will show a Form name: CustTableListPage. Select the Edit
button and this will open an instance of this object in the AOT.

FIGURE 3.3 DESIGN OF THE CUSTTABLELISTPAGE FORM

In the Design node, the Action Pane, the Filter, and the Grid are visible. The
Parts node includes links to the parts displayed on the form. The first part is the
CustListPagePreviewPane, and the other parts are the FactBox parts. If you
expand the Grid node, the fields on the grid are visible.

3-4
 Chapter 3: User Interfaces

Now return to the application workspace. Click the Edit button in the Action
Pane. This opens a new form with more details about the customer and you can
edit the record.

FIGURE 3.4 THE CUSTTABLE FORM DESIGN

The form also includes an Action Pane and a FactBox Pane. The main part of the
form has FastTabs. You can click on each FastTab to obtain more information
about the customer. At the bottom of the form in the status bar, there are a
number of navigation buttons. If you click the Grid View button, the form
displays records in grid form, and you can select another customer record. You
can click on Details View to show the details again.

3-5
Development I in Microsoft Dynamics® AX 2012

Now return to the development workspace and locate the form CustTable in the
AOT. This is the form that displays the customer details. Expand nodes
Designs > Design > Tab > TabPageDetails > TabHeader and Designs >
Design > Tab > TabPageGrid > GridGroup > Grid.

FIGURE 3.5 DESIGN OF THE CUSTTABLE FORM

The TabHeader shows the tabs that comprise the FastTabs on the Details View.
Under the TabPageGrid node is the grid that makes up the Grid View.

3-6
 Chapter 3: User Interfaces

Now return to the Customer details form in the application workspace. In the
Action Pane click Sell > Sales Price > Sales Price. The Sales Price Agreements
form opens.

FIGURE 3.6 SALES PRICE AGREEMENT FORM

Here is a more simple form with a grid section and some additional fields at the
bottom.

3-7
Development I in Microsoft Dynamics® AX 2012

In the development workspace, find the form PriceDiscTable. This is the form
that displays price agreements. Expand Designs > Design > PriceDiscGroup >
DiscAgreement > Grid. The fields displayed in the grid are visible.

FIGURE 3.7 PRICEDISCTABLE DESIGN

Form Data Sources

Because forms present data to users, they must provide a source for the data.
These collections of data are called data sources and they link to the Tables in the
AOT.

3-8
 Chapter 3: User Interfaces

Expand the Data Sources node for the PriceDiscTable form and view the
properties for the PriceDiscTable data source.

FIGURE 3.8 DATA SOURCES FOR PRICEDISCTABLE FORM

The Property sheet lists properties for the PriceDiscTable data source on the
PriceDiscTable form. For example, the AllowCreate and AllowDelete
properties control whether you can create new rows or delete old rows from the
price agreement form. The Table property specifies the table the data source is
based on (in this case, the PriceDiscTable). The Index Property controls the
index that is used for sorting data within the form.

More than a single data source can be used on a form; the linking of data between
sources is performed by using the JoinSource Properties. Joining data sources on
a form is examined later in this chapter. Viewing the properties for the
InventDim data source on this form, shows that it is joined to the
PriceDiscTable. The system uses relations between the tables to join records
together.

Expanding the PriceDiscTable data source shows a Fields node. Under this list
all the fields on the table. Properties can be set here to control the behavior of the
field when it is used as a control on the form, including allowing the field to be
edited and whether it is visible or not.

3-9
Development I in Microsoft Dynamics® AX 2012

Procedure: Creating a Form

Us the following step procedure to create a form that will be used to view, create
and edit records in the VetSpeciesTable.

1. In the AOT, right-click the Forms node and select New Form.
2. Rename the form to VetSpeciesTable.
3. In a second AOT, locate the table VetSpeciesTable.
4. Drag the table VetSpeciesTable to the DataSources node on the
VetSpeciesTable form.
5. Expand the Designs node on the VetSpeciesTable form.
6. Right-click the Designs node and select New Control > Grid. A
new Grid control is created.
7. Expand the DataSources > VetSpeciesTable > Fields node.
8. Drag the fields SpeciesId and Name to the grid control.
9. On the properties sheet for the Design node, in the Caption property,
enter "Species".
10. Save your changes to the form.
11. Open the form by pressing Ctrl+O.
12. Populate the table by entering your own data in to the form.

FIGURE 3.9 SPECIES FORM

3-10
 Chapter 3: User Interfaces

Lab 3.1 - Create a Form

Create a new form to display and edit breed records

Scenario

The scenario is continued from the previous lesson.

Challenge Yourself!
Create a new form that can be used to view, create and edit records in the
VetBreedTable table.

Step by Step

1. In the AOT, right-click the Forms node and select New Form
2. Rename the form to VetBreedTable.
3. In a second AOT, locate the table VetBreedTable.
4. Drag the table VetBreedTable to the DataSources node on the
VetBreedTable form.
5. Expand the Designs node on the VetBreedTable form.
6. Right-click the Design node and select New Control > Grid. A new
Grid control is created.
7. Expand the DataSources > VetBreedTable > Fields node.
8. Drag the fields BreedId and Name to the grid control.
9. On the properties sheet for the Design node, in the Caption property,
enter "Breed".
10. Save your changes to the form.
11. Open the form by pressing Ctrl+O.

3-11
Development I in Microsoft Dynamics® AX 2012

Joining Data Sources

Instead of creating two forms for the species and breed tables, both tables could
be placed on the same form, and joined together to make viewing and creating
records simpler.

Procedure: Add a Second Data Source to a Form

Use this step procedure to add the VetBreedTable to the VetSpeciesTable form,
join it to the VetSpeciesTable datasource, and display it in a second grid.

1. Locate the VetSpeciesTable form in the AOT.

2. From a second AOT, drag the VetBreedTable table to the Data
Sources node of the VetSpeciesTable form.
3. In the property sheet for the VetBreedTable data source, set the
property JoinSource to VetSpeciesTable. The system will
automatically use the relations created in the previous chapter to link
the correct records together.
4. Right-click the Designs > Design node and select New Control >
Grid. A new grid control Grid1 will be created.
5. In property sheet for Grid1, set the property DataSource to
VetBreedTable. This step is needed because when a new grid
control is created, the system sets the datasource as the first
datasource on the form by default.
6. Drag the fields BreedId and Name from the VetBreedTable
datasource to the Grid1 grid control.
7. To make the two grids appear side by side, in the property sheet of
the Design node, set the Columns property to 2.

3-12
 Chapter 3: User Interfaces

8. Save your changes to the form and open it using Ctrl+O.

9. Add your own data to the table by creating new records in the form.
Note how the breed records are linked to the species record and filter
on the breed field. This is due to the relations defined in the previous
lesson.

FIGURE 3.10 SPECIES AND BREEDS JOINED

Menus Items
You can use menu items to activate application objects from the user interface.
Menu properties include the following:

• Name: The name of this menu item

• Label: The label appearing on the menu item
• ObjectType: The type of object this item points to
• Object: The object name that this item points to

Three types of menu items can be created:

• Display - used for forms

• Output - used for reports
• Action - used for running processes

Output and Action menu items are discussed in other training courses.

3-13
Development I in Microsoft Dynamics® AX 2012

Display Menu Items

Display menu items open objects that appear on the screen, typically forms. For
example, clicking the Customers menu item in the Accounts Receivable
module opens the CustTableListPage form. This Display Menu item points to
the Form object CustTableListPage.

FIGURE 3.11 MENU ITEMS

There are two important Properties to notice.

• Object type = Form

• Object = CustTableListPage

Procedure: Creating a Menu Item

Use this step procedure to create a menu item to open the VetSpeciesTable form.

1. Open the AOT, expand the Menu Items node.

2. Open a second AOT and locate the VetSpeciesTable form.
3. Drag the VetSpeciesTable form to the Display node of the Menu
Items node. A new display menu item is created.
4. In the properties sheet of the new menu item, set the label property to
"Species".
5. Save your changes.

Procedure: Adding a Menu Item to the Area Page

Use this step procedure to add the menu item created in the previous procedure to
the area page. The main menu is comprised of a number of area pages. You will
add your menu item to the AccountsReceivable area page.

1. Open the AOT, expand the Menus node.

2. Expand the AccountsReceivable menu.
3. Right-click the Setup sub-menu, and select New > Submenu. A new
submenu Submenu1 is created.
4. In the properties sheet for the new submenu set the name property to
VetSurgery, and the label property to Vet Surgery.
5. In a second AOT, locate the VetSpeciesTable menu item created in
the previous procedure.
6. Drag the VetSpeciesTable menu item to the VetSurgery submenu.
7. Save your changes to the AccountsReceivable menu.
8. Open a new application workspace. The new submenu and the menu
item are visible in the Accounts Receivable menu.

3-14
 Chapter 3: User Interfaces

Form Templates
Some form templates are available to help create the correct form type with the
appropriate controls, and to keep the design consistent across the application. The
following table shows the available form templates and where they should be
used.

Form Template Use

ListPage Main entry in to a module.
DetailsFormMaster View and edit master data.
DetailsFormTransaction View and edit transactional and worksheet data.
SimpleListDetails Reference and setup data.
SimpleList Basic inquiry.
TableOfContents Module configuration parameters.
Dialog Quick user interaction.

Examples of Templates
The following table gives examples of each form template

Form Template Menu path

ListPage Accounts receivable > Common > Customers > All
Customers
DetailsFormMaster Accounts receivable > Common > Customers > All
Customers > Edit
DetailsFormTransa Sales and marketing > Common > Sales Orders > All
ction sales orders > Edit
SimpleListDetails General ledger > Setup > Currency > Currencies
SimpleList Master planning > Inquiries > Processes > Planned
orders log
TableOfContents Accounts payable > Setup > Accounts payable
parameters
Dialog Product information management > Products >
Products > New product

To create a form using a template, right-click the Forms node in the AOT, select
New Form From Template, and then select the template. Try to create each
template and examine the controls and design that is created. Then open the
corresponding form in the application, as shown above, and look at the finished
product.

3-15
Development I in Microsoft Dynamics® AX 2012

Lab 3.2 - Create a Form from a Template

A form is needed to view which pets belong to which customers. The form will
be called from the customer form.

Scenario

The scenario for this lab continues from the preceding scenario

Challenge Yourself!
Create a form using a SimpleListDetails template. In the grid on the left it should
show the Pet Name and Gender from the VetCustPetTable table. In the details
section on the right of the form, it should show the Breed name. Additionally,
create a menu item for the form, however do not add the menu item to a menu -
you will use the menu item in the next section.

Step by Step

1. Right click the Forms node of the AOT and select New Form from
Template > SimpleListDetails.
2. Rename the form VetCustPetTable.
3. Drag the table VetCustPetTable from a second AOT to the
datasources node of the new form.
4. Set the data source property on the grid control on the form to
VetCustPetTable. The grid control can be found by expanding
Designs > Design > Group:Body > Group:GridContainer.
5. Drag the BreedId, Name and Gender fields to the grid of the
designs node.
6. Save your changes to the form.
7. Drag the VetCustPetTable form to the Menu Items > Display node
in a second AOT to create a menu item for the new form.
8. In the property sheet for the new menu item, set the Label property
to Pets.
9. Close the property sheet and save your changes to the menu item.

3-16
 Chapter 3: User Interfaces

List Pages
List pages are the primary method of displaying data in Microsoft Dynamics AX.
They can show lots of data from many tables, in a number of formats. They have
consistent designs and functions. They can easily be displayed in the enterprise
portal.

List Page Format

The following image shows the different parts of a list page.

FIGURE 3.12 LIST PAGE DESIGN

The components of a list page are:

• The Grid displays a list of records. It displays only a few of the most
important fields for each record.
• The Filter bar is used to enter search criteria. This filters the list in
the data grid to show only the records which an end-user is interested
in.
• The Preview Pane displays more fields about the selected record.
This helps to ensure you have selected the correct record in your
search.
• FactBoxes display more information about the selected record from
related tables.
• The Action Pane contains menu items you can use to do typical
tasks related to the highlighted record.

3-17
Development I in Microsoft Dynamics® AX 2012

Procedure: Adding a Menu Item to a List Page

Use this step procedure to add a menu item to an existing list page. You will add
the menu item created in the previous lab to the CustTableListPage form.

1. In the AOT, find the CustTableListPage form.

2. Expand the Designs > Design node.
3. Right-click the Action Pane node, select New control >
ActionPaneTab. A new Action Pane tab is created.
4. Rename the new Action Pane tab apTabVet.
5. In the property sheet for apTabVet set the caption to Vet Surgery.
6. Expand apTabVet.
7. In a second AOT, locate the VetCustPetTable menu item created in
the previous lab.
8. Drag the VetCustPetTable menu item to the ButtonGroup node in
the apTabVet Action Pane tab.
9. Open the properties sheet for the VetCustPetTable button just
created.
10. Set the DataSource property to CustTable.
11. Set the Big property to Yes.
12. In the NormalImage property click on the button to select a file.
This image will show on the button. There are many bitmaps
included in windows, so for the purposes of this lab, find and select
one.
13. Save your changes to the CustTableListPage form.

3-18
 Chapter 3: User Interfaces

14. In the application workspace, open Accounts Receivable >

Common > Customers > All Customers. Note the new Vet Surgery
tab in the Action Pane.
15. Click Vet Surgery > Pets. Note that the form is opened and only
pets attached to the current customer are displayed. This is due to the
relation between the CustTable and VetCustPetTable tables, and
setting the datasource on the button to CustTable.

FIGURE 3.13 ADDING A BUTTON TO A LIST PAGE

FactBoxes
A FactBox is a small selection of data related to the current record in the list
page. Three types of Factbox exist:

• Info part: This has its own data source and a number of controls. It
is limited in what can be displayed. However it is simple and quick
to create, and can also be displayed in the Enterprise Portal.
• Form part: This is a link to a form. The form can have the same
controls as a standard form. However since this is displayed in the
FactBox section of the list page, adding too many controls can crowd
the part.
• Cues: This is a count of a number of records related to the current
record in the list page. For example, it might show the number of
outstanding invoices for a customer.

3-19
Development I in Microsoft Dynamics® AX 2012

Procedure: Create a FactBox

Use the following step procedure to create a simple FactBox to display the
customer's pets. A FactBox uses a Query, which is similar to a View. It is used to
select data from one or more tables.

1. In the AOT, right-click the Queries node and select New Query.
Rename the new query to VetCustPetInfoPart.
2. In a second AOT, locate the VetCustPetTable table.
3. Drag the VetCustPetTable table to the DataSources node on the
VetCustPetInfoPart query.
4. Expand the VetCustPetTable_1 data source.
5. In the property sheet for the fields node set the Dynamic property to
Yes. This means all fields in the table will be included in the query.
6. In a second AOT, locate the VetBreedTable table.
7. Drag the VetBreedTable to the DataSources node on the
VetCustPetTable_1 datasource.
8. In the property sheet for the VetBreedTable_1 datasource, set the
Relations property to Yes.
9. In the property sheet for the fields node on the VetBreedTable_1
datasource, set the Dynamic property to Yes.
10. Save your changes to the VetCustPetInfoPart query.
11. Expand the Parts node in the AOT.
12. Right-click the Info Parts node and select New Info Part.
13. In the property sheet for the new info part, set the Name property to
VetCustPetTableInfoPart, set the Caption property to Pets, set the
Query property to VetCustPetInfoPart.
14. Right-click the Layout node in the info part, and select New Group.
15. In the property sheet for the group, set the Repeating property to
Yes.
16. Right-click the new group and select New Field.
17. In the property sheet for the new field, set the DataSource property
to VetCustPetTable_1, and the DataField property to Name.
18. Right-click the group and select New Field to create a second field.
19. In the property sheet for the second field, set the DataSource.
property to VetBreedTable_1 and the DataField property to Name
20. Save your changes to the VetCustPetTableInfoPart info part.

Procedure: Adding a FactBox to a List Page

Use the following step procedure to add the FactBox to the customer's list page.

1. Create a new menu item for the info part, by dragging the
VetCustPetTableInfoPart to the Menu Items > Display node in
the AOT.
2. Locate the VetCustPetTable table in the AOT.

3-20
 Chapter 3: User Interfaces

3. Expand VetCustPetTable table.

4. Right-click the Indexes node and select New Index
5. Rename the index to CustIdx
6. From the fields node on the table, drag the CustAccount field to the
CustIdx index.
7. Save your changes to the table.
8. Locate the CustTableListPage form in the AOT.
9. Drag the VetCustPetTableInfoPart menu item to the Parts node.
10. In the property sheet for the new part reference, set the
DataSourceRelation property to
EDT.VetCustPetTable.CustAccount.
11. Save your changes to the CustTableListPage form.
12. Open the customer's list page and notice the new info part in the
FactBox section of the form.

FIGURE 3.14 PETS FACTBOX

Summary
This course discussed how to develop the user interface using the drag and drop
features of the Application Object Tree. Additionally, this course showed some
of the different features of a form, how to create a form, how to have multiple
linked tables on a form, and how to create menu items and add them to menus
and other forms. The course also showed how to modify a list page and create a
FactBox for a list page.

3-21
Development I in Microsoft Dynamics® AX 2012

Test Your Knowledge

Test your knowledge with the following questions.

1. What are the five elements that make up a form?

( ) Methods, Data Sources, Views, Parts and Fields
( ) Designs, Methods, Data Sources, Parts and Permissions
( ) Display Menu Items, Data Sources, Methods, Enums and Designs
( ) Jobs, Menu Items, Classes, Parts and Macros

2. How can the Area Pages be customized?

( ) By making changes to the Areas node in the AOT
( ) By making changes to the Menus that the Areas page will
automatically be generated from
( ) By setting the IsDisplayedInContentArea property of the Navigation
Pane
( ) The Area Pages cannot be changed

3. Which of the following are available Form Templates? (Select all that apply)
( ) ListPage
( ) TransactionPage
( ) WebPage
( ) SimpleListDetails

4. Which of the following are available Menu Items? (Select all that apply)
( ) Display Menu Items
( ) Output Menu Items
( ) Project Menu Items
( ) Action Menu Items

3-22
 Chapter 3: User Interfaces

Quick Interaction: Lessons Learned

Take a moment and write down three key points you have learned from this
chapter

1.

2.

3.

3-23
Development I in Microsoft Dynamics® AX 2012

Solutions
Test Your Knowledge
1. What are the five elements that make up a form?
( ) Methods, Data Sources, Views, Parts and Fields
(•) Designs, Methods, Data Sources, Parts and Permissions
( ) Display Menu Items, Data Sources, Methods, Enums and Designs
( ) Jobs, Menu Items, Classes, Parts and Macros

2. How can the Area Pages be customized?

( ) By making changes to the Areas node in the AOT
(•) By making changes to the Menus that the Areas page will
automatically be generated from
( ) By setting the IsDisplayedInContentArea property of the Navigation
Pane
( ) The Area Pages cannot be changed

3. Which of the following are available Form Templates? (Select all that apply)
(√) ListPage
( ) TransactionPage
( ) WebPage
(√) SimpleListDetails

4. Which of the following are available Menu Items? (Select all that apply)
(√) Display Menu Items
(√) Output Menu Items
( ) Project Menu Items
(√) Action Menu Items

3-24