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.

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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.

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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.

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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.

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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.

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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

FIGURE 3.9 SPECIES FORM

3-10

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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.

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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 ListPage DetailsFormMaster DetailsFormTransaction SimpleListDetails SimpleList TableOfContents Dialog Use Main entry in to a module. View and edit master data. View and edit transactional and worksheet data. Reference and setup data. Basic inquiry. Module configuration parameters. Quick user interaction.

Examples of Templates
The following table gives examples of each form template Form Template ListPage DetailsFormMaster DetailsFormTransa ction SimpleListDetails SimpleList TableOfContents Dialog Menu path Accounts receivable > Common > Customers > All Customers Accounts receivable > Common > Customers > All Customers > Edit Sales and marketing > Common > Sales Orders > All sales orders > Edit General ledger > Setup > Currency > Currencies Master planning > Inquiries > Processes > Planned orders log Accounts payable > Setup > Accounts payable parameters 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.

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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.

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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.

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

Chapter 3: User Interfaces

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

11. 12.

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.

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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.

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement

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

Microsoft Official Training Materials for Microsoft Dynamics Your use of this content is subject to your current services agreement