Create List Page/Form

Prepare new Project (optional)

• Create a new Project Project > Shared > New > Project and give it a name. Having all created/modified objects in a single project will help you to be more organised and will allow you to easily export your work to production environment.
• Give your project some meaningful name (I called mine Tut_EPListPage) and open it in separate window.
• Create following Groups (name them as you like): Queries, Classes, Forms, Web, Menu Items, Menus and Parts/Info Parts. I recommend setting ProjectGroupType in Group properties to the type of objects you will be adding to that group (e.g. Queries for queries, etc.). You can also download and import this initial project structure.
• From now on, add all new objects and modified ones under appropriate group node.

Develop Primary List Page

Classes

• Create your own version of List Page Interaction class, which shall be used by your ListPage kind of forms. This class will provide functionality to interact with a List Page, but in this tutorial we won’t use it.
• Give the class a name. In my case it is Tut_EPListPageInteraction.
• Make it extend ListPageInteraction class in classDeclaration method as shown below. That’s it, you are done with classes.

Code sample:

public class Tut_EPListPageInteraction extends ListPageInteraction
{
}

Queries

Let’s create 3 queries: First query will show all customers speaking Lithuanian, second will show particular customer’s status in Secondary List Page, and the third one will be used in Preview Pane to show more customer’s data.

• Create new query named Tut_EPListPage_LTSpkCustomers.
• Add CustTable table as primary Data Source and DirPartyTable as data source of primary data source - in this case - CustTable_1(CustTable).
• Do not forget to set Dynamic property to Yes in each data source’s Fields properties.
• Set Range of DirPartyTable_1(DirPartyTable) to LanguageId and Relations to CustTable_1.Party == DirPartyTable_1.RecId

Forms

Now we should create a List Page form, which will use the query we just created as its main data source.

• Right-click on Forms under AOT > New Form from Template > ListPage. Drag it under Froms group in your project and rename it (Tut_EPListPage).
• Change InteractionClass property of the form to the interaction class we made before (Tut_EPListPageInteraction).
• In form’s data source properties add Tut_EPListPage_LTSpkCustomers to Query property. You will see query object and its data sources appearing as data sources of the list page form. TIP: to refresh form’s data sources whenever you change the query, right-click on Data Sources section of the form, select Query’s name and hit ENTER. Version number should increase.
• Now add/remove buttons/fields in Design section of the form as you find appropriate. I.e., I’ve hidden Action Pane button groups New, Maintain and Attachments, and added fields AccountNum, Name and LanguageId under Grid section.
• Do not forget to set Grid’s Datasource property to CustTable_1 or otherwise form won’t return you any results.
• Open your form and make sure you see filtered results being returned. You just finished the main list page form.

Menu Items

In order to be able to deploy our list page to EP and have a link to it, we need to create a menu item under Menu Items/Display group.

• Expand Menu Items under AOT.
• Drag the form Tut_EPListPage to Display group. New menu item named after the form will be created. You may now to drag it under your project group if you wish.
• Right-click on newly created menu item and choose Deploy to EP.
• I chose Home\Sales web module in mini dialog box that appeared.
• Shortly after you should see Infolog saying: The Sales/Enterprise%20Portal/Tut_EPListPage.aspx Page was successfully deployed. The web menu item ‘Tut_EPListPage’ and web page ‘Tut_EPListPage’ were deployed successfully to ….
• If deployment to EP was successful, you should also find a new menu item created under AOT > Web > Web Menu Items > URLs. Again, I recommend dragging it to your project too.
• You can give both menu items a meaningful name in their Labels property (i.e. Lithuanian speaking customers).
• To add a link to our List Page in EP, drag menu item from AOT/Web/Web Menu Items/URLs to AOT/Web/Web Menus/EPSalesQuickLaunch/Common. Right-click on the Project and select Deploy to EP. After open your EP website and click Refresh AOD in your Home page.
• To make the form accessible from AX Client too, we also need to add a link to it under AOT/Menus. Just drag Tut_EPListPage menu item from AOT/Menu Items/Display somewhere of your choice. I picked AOT/Menus/AccountsReceivable/Common/Customers location. Compile everything and re-open AX Client to see the changes.
• Now you should be able to see the links and open list page/form in both AX Enterprise Portal and AX Client.

AX Client View

AX Enterprise Portal View

Create Secondary List Page (optional)

In our secondary list page we will display all sales orders of particular customer.

Queries

Steps taken to create a secondary list page are very similar to the primary one, so I’ll not go to deep into it.

• Create another query named Tut_EPListPage_LTSpkCustomersOrders, for instance.
• Add SalesTable table as primary data source and define CustTable table as SalesTable_1(SalesTable) data source.
• Set CustTable_1(CustTable) range to AccountNum, and relation to SalesTable_1.CustAccount == CustTable_1.AccountNum.

Forms

Secondary Form

• Right-click on our primary form Tut_EPListPage and select Duplicate. In case you are creating a new form, don’t forget to set InteractionClass as Tut_EPListPageInteraction and FormTemplate as ListPage properties of the form.
• Rename newly created form to, say, Tut_EPListPage_CustomersOrders.
• In form’s Data Sources properties set Query to Tut_EPListPage_LTSpkCustomersOrders - the one we just created - and hit ENTER. You now should see new data sources.
• Remove old fields from a Grid and add new ones from new data sources. I’ve added AccountNum and SalesId fields.
• If you will open the form now, it will show unfiltered results. Make sure it does that.
• Drag form to AOT/Menu Items/Display to create a new menu item.
• Right-click on newly created menu item and select Deploy to EP.

Primary Form

• Go back to the primary form and create a new Menu Item Button in Action Pane to point to the secondary form.
• In button’s properties set: Primary: Yes, NeedsRecord: Yes, Datasource: CustTable_1 and MenuItemName: Tut_EPListPage_CustomersOrders.

Menu Items

• Set Labels of both web and display menu items to something meaningful, like Customer’s Orders.
• Right-click on display menu item and select Deploy to EP.

Now if you will open primary form, you should see a new button added and clicking on it will open a secondary form with filtered results this time, meaning, sales orders belonging to that particular customer.

Re-open AX Client, refresh AOD in Enterprise Portal and test forms. Both should behave in the same manner.

AX Client View (with secondary list page)

AX Enterprise Portal View (with secondary list page)

Create Preview Pane for Primary List Page (optional)

“A preview pane is the part of a list page that shows additional information about the highlighted record in the list.”. Let’s say we want to see customer’s currency at the bottom of the page.

Info Part

We will simply reuse the main query, but feel free to create a new one to get any other information about the customer.

• Create a new Info Part, which will be used by Preview Pane, under AOT/Parts/Info Pats.
• Let’s follow Microsoft’s best practices and name info part Tut_EPListPagePreviewPane.
• Set its Query property to Tut_EPListPage_LTSpkCustomers.
• Expand Tut_EPListPagePreviewPane, right-click on Layouts section and select New Group.
• In new group’s properties set Caption property to something meaningful as well as Name (Currency Information, for example). Also set ShowCaption property to Yes.
• Datasource property field should point to CustTable_1.
• Now right-click on a group we just created and select New Field option.
• Again, define properties of the field by setting Datasource to CustTable_1 and DataField to Currency. Amend Name and Label accordingly.
• Carry on and drag our info part to AOT/Menu Items/Display in order to create a new menu item.

Forms

• Open a primary list page form (or any other list page form), expand its Parts section, and go to PreviewPane info part’s properties.
• Change Name and MenuItemName values to Tut_EPListPagePreviewPane, which is also the name of our menu item. PartLocation property leave as PreviewPane. DataSource set to CustTable_1 and DataSourceRelation to SelfLink.

Again, to be sure, re-open AX Client, refresh AOD in EP and test pages. More link will open customer’s details page in AX Client.

AX Client View (with Preview Pane)

AX Enterprise Portal View (with Preview Pane)

Final Project View