AX WONDERS: WALKTHROUGH - Creating Fact Boxes in AX 2012

Hi,

This is the last post (http://axwonders.blogspot.com/2011/12/walkthrough-creating-fact-boxes-in-ax_29.html) on the series WALKTHROUGH - Creating Fact Boxes in AX 2012. In my last post we took care of primary indexes for the Eduardo_CustCarTable. In addition, we also talked a little bit about Parts and FactBoxes in AX 2012, and that we needed to create a query before displaying data inside a FactBox.

In this post we are going to create 4 forms, 2 info parts, 2 menu items, 2 queries, and finally will create a new form part in the CustTableListPage to see how everything links together.

First we are going to create the Eduardo_VehicleTypeTable, Eduardo_VehicleModelsTable, and Eduardo_VehicleMakeTable, and Eduardo_CustCarTable forms. The four have the same requirements, and the only element that changes is the data source table they use.

In addition, three these forms (Eduardo_VehicleTypeTable, Eduardo_VehicleModelsTable, and Eduardo_VehicleMakeTable) will have an ActionPane with only two buttons; (1) new and, (2) delete.

The Eduardo_CustCarTable form, however, will contain an extra ActionPaneTab to hold the butons to open the orther three forms.

Steps:

1. In the AOT, right-click the Forms node and select New Form.

2. Rename the form to Eduardo_VehicleTypeTable.

3. In a second AOT, locate the table Eduardo_VehicleTypeTable.

4. Drag the table Eduardo_VehicleTypeTable to the DataSources node on the Eduardo_VehicleTypeTable form.

5. Expand the Designs node on the Eduardo_VehicleTypeTable form.

6. Right-click the Designs node and select New Control > ActionPane.

7. Expand the ActionPaneTab and then the ButtonGroup.

8. Right-click the ButtonGroup node and select New Control > CommandButton.

9. Set the following properties:

a. ButtonDisplay: Text & Image Left

b. Text: New

c. NormalImage: 11045

d. ImageLocation: EmbeddedResource

e. Primary: Yes

f. Command: New

10. Right-click the ButtonGroup node and select New Control > CommandButton.

11. Set the following properties:

a. ButtonDisplay: Text & Image Left

b. Text: Delete

c. NormalImage: 10121

d. ImageLocation: EmbeddedResource

e. SaveRecord: No

f. Primary: Yes

g. Command: Delete Record

12. Right-click the Designs node and select New Control > Group. Change the Name to Body.

13. Right-click the Group [Body] node and select New Control > Group. Change the Name to GridContainer.

14. Right-click the Group [Body] node and select New Control > Group. Change the Name to Splitter.

NOTE: To make the Splitter work, you will need to overwrite the Form's init method with the following code:

15. Right-click the Group [GridContainer] node and select New Control > Grid.

16. Expand the DataSources > Eduardo_VehicleTypeTable > Fields node.

17. Drag all the fields to the grid control.

18. Save your changes to the form.

19. Open the form by pressing Ctrl+O.

20. If you haven’t already done so, populate the table by entering your own data in to the form.

Repeat steps 1- 20 for the other three forms (Eduardo_VehicleMakeTable and Eduardo_VehicleModelsTable, and Eduardo_CustCarTable ).
The following image depicts the Eduardo_VehicleModelsTable form, so you get an idea how the three forms created above should look like.

Then if you open the Eduardo_VehicleModelsTable you should see the following (if you have some data)

Now, we are going to add anew ActionTab to the existing ActionPane control in the Eduardo_CustCarTable form. This action will create a new tab and three buttons (within the tab) that will open the three forms we created earlier.

Steps

1. Right-click the ActionPane node and select New Control > ActionPaneTab.

2. Change the following properties:

a. Name: Vehicles

b. Caption: Vehicle Management

3. Create 4 new Display Menu Items by dragging each form to the Menu Items >Display Node.

4. Drag the Eduardo_VehicleMakeTable, Eduardo_VehicleTypeTable, Eduardo_VehicleModelsTable Menu Items to the ButtonGroup located in the Form Eduardo_CustCarTable form > Designs>ActionPane>ActionPaneTab:Vehicles> ButtonGroup

The following image shows how a Menu Item is created after I dragged the first form to the MenuItem>Display node.

5. Set the following properties for each Menu Item Button:

a. NormalImage: This will allow you to “attach” an image to the button.

b. Big: Yes (This will make it big)

The form should look like the following image:

Now that all our forms are ready, we are going to start developing to display data in a FactBox in both the Eduardo_CustCarTable and the CustTableListPage forms.
To better understand what we are doing, I would like to review what a List Page is before moving forward with the FactBoxes.

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.

The components of a list page are:

1. The Grid displays a list of records. It displays only a few of the most important fields for each record.

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

3. The Preview Pane displays more fields about the selected record. This helps to ensure you have selected the correct record in your search.

4. FactBoxes display more information about the selected record from related tables.

5. The Action Pane contains menu items you can use to do typical tasks related to the highlighted record.

Now, let’s create a FactBox for the Eduardo_CustCarTable. The main idea of this FactBox is to show only the related detail data of Car's model for a selected record.

We need to first create a query. Because we need to for this project, we’ll create the two.

Steps:

1. In the AOT, right-click the Queries node and select New Query, and rename the new query to Eduardo_VehicleModelsQuery.

2. In a second AOT, locate the Eduardo_VehicleModelsTable.

3. Drag the Eduardo_VehicleModelsTable to the DataSources node on the Eduardo_VehicleModelsQuery .

4. Expand the Eduardo_VehicleModelsTable _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.

Repeat steps 1 to 5 for the Eduardo_CustCarQuery.

Now it is time to create a Part for each of the queries we just created.

Steps:

1. Right-click the Info Parts node and select New Info Part.

2. In the property sheet for the new info part, set the Name property to Eduardo_VehicleModelsInfoPart, set the Caption property to Cars Models, set the Query property to Eduardo_VehicleModelsQuery.

3. Right-click the Layout node in the info part, and select New Group.

4. In the property sheet for the group, set the Repeating property to Yes.

5. Right-click the new group and select New Field.

6. Set the data source and data field for each of the fields exist in the Eduardo_VehicleModelsTable _1 data source (VehicleModelID, VehicleTypeID, VehicleMakeID, Status, Description)

Repeat steps 1 to 6 for the Eduardo_CustCarsInfoPart. The InfoPart should look like the following image:

NOTE: For the Eduardo_VehicleModelsInfoPart to work correctly in Eduardo_CustCarTable form, we need to tell the Eduardo_VehicleModelsTable that the relationship we have with the index Eduardo_VehicleModelIdx is on the EDT (See next image)

Now the step we all have been waiting for, lets add a new FactBox to the Eduardo_CustCarTable form.

Steps:

1. Create a new menu item for the info part, by dragging the Eduardo_VehicleModelsInfoPart to the Menu Items > Display node in the AOT.

2. Locate the Eduardo_CustCarTable form in the AOT.

3. Drag the Eduardo_VehicleModelsInfoPart menu item to the Parts node in the Eduardo_CustCarTable form.

4. In the property sheet for the new part reference, set the DataSourceRelation property to Eduardo_CustCarTable.Eduardo_VehicleModels.

5. Save your changes to the Eduardo_CustCarTable form.

Press CTRL+O to open the Eduardo_CustCarTable, and if everything went OK the form should look like the following image:

Pretty cool, isn't? If you click on a different record, the FactBox information will change to the specified relationship with the VehicleModelID field.
Now, let's do the same with the CustTableListPage.

Steps:

1. Create a new menu item for the info part, by dragging the Eduardo_CustCarsInfoPart to the Menu Items > Display node in the AOT.

2. Locate the Eduardo_CustCarTable table in the AOT.

3. Expand Eduardo_CustCarTable table.

4. Right-click the Indexes node and select New Index

5. Rename the index to CustIdx