AX2012 User Interfaces 03

Chapter 3: User Interfaces

3-1

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

Development I in Microsoft Dynamics® AX 2012

3-2

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-3

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-4

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-5

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-6

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-7

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-8

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-9

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-10

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-11

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-12

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-13

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-14

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-15

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

DetailsFormTransaction

Sales and marketing > Common > Sales Orders > All 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-16

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-17

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-18

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-19

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-20

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-21

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-22

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-23

Quick Interaction: Lessons Learned Take a moment and write down three key points you have learned from this chapter

1.

2.

3.




3-24

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



Documents

AX2012 User Interfaces 03