Creating the vehicle list page

In order to complete the creation of a list page, we need to assign the actions to create and edit to reference a details form. Many developers create the list page first and then the details form. This would mean that we would need to go back to the list page to hook up the menu items to create and edit the data.

To simplify the process, let's create the details form first.

The list page pattern is typified by the released items list page (Product information management | Common | Released products). It is worth familiarizing yourself with this before continuing.

Creating the Details form

To create the Details form, right-click on the Forms node in the AOT and select New Form from template | DetailsFormMaster.

Rename the form to ConFMSVehicleTable and drag it onto the Forms node in our project.

To complete the Details form design, follow these steps:

  1. Drag the ConFMSVehicleTable table to the form's Data Sources node.
  2. Select the Designs | Design node, set the Caption field to Vehicle details, and find the label using the label editor.
  3. Set the DataSource and TitleDatasource properties to the data source name.

    Note

    The action pane (button ribbon) on this form is not a simple strip of buttons. It behaves more like the action pane in a Microsoft Office application. This is controlled by the Style property on the action pane and was set from the template.

  4. The only change required at this stage is to give the Home tab a caption. So expand ActionPaneHeader and change the Caption property of HeaderHomeTable to Home and select a label.
  5. Expand the Tab control, which contains two pages, TabPageDetails and TabPageGrid. Depending on whether we are viewing the form in the list or details mode, it will display one of these tab pages.

    Note

    You change between these modes using the icons at the bottom of the form, as shown in the following screenshot:

    Creating the Details form
  6. Expand the TabPageGrid, then expand GridGroup, and open the properties of the HeaderGrid control.
  7. Set the DataSource field to ConFMSVehicleTable and the DataGroup field to Overview.

To create the details part of the form, we will add controls to the tab pages within the Tab | TabPageDetails | HeaderDetailsTab control, adding tab pages as required.

In our case, we only need the HeaderGeneral tab.

Tip

Although we can create group controls and add the controls by dragging fields from the data source, it is better to use the field groups we created on the table. This saves time later and helps us create more consistent interfaces.

Under the ConFMSVehicleTable data source, there are four field groups, namely AutoIdentification, Details, Fields, and Overview. The AutoIdentification field group is created by the system from the primary key index, while Fields is maintained by the system to contain all fields.

Although using Overview and Details might seem to suffice, Overview is used to control the fields on the grids. We may wish to group fields differently on the details forms. So we need to adjust the field groups to cover the VehicleId, Name, VehicleGroupId, and VehicleStatusId fields. Use the following steps to adjust the group fields:

  1. On the ConFMSVehicleTable table, create a new field group called Identification and use the first label without a comment.
  2. Add the fields VehicleId, Name, VehicleGroupId, and VehicleTypeId.
  3. Sort the fields into an appropriate order, using the mouse to drag or using the Alt + Up/Down arrow keys while the control is selected.
  4. Save the table definition.
  5. The form will not realize the table's definition has changed, so we must first ensure the form is saved (no red vertical line), then restore the form by right-clicking on the form, and choose Restore.
  6. To make the dragging of field groups easier, open the Data Sources node in a new window and position it beside the project window.
  7. Expand the design nodes by navigating to Tab | TagPageDetails | HeaderDetailsTab | HeaderGeneral.
  8. From the Data Sources window, expand the ConFMSVehicleTable | Fields node and drag the field groups Identification and Details, so they appear as nodes under the HeaderGeneral tab page.
  9. Save the form and open it to see our work in progress.

    Tip

    To adjust the layout, the Columns, Height, and Width properties on any container control (such as group and tab page controls) are useful. Always use options from the drop-down lists when setting the height and width, as opposed to entering the width as a number. Also, try to avoid changing the Left and Top properties. Curiosity is good here, as is looking at forms written by Microsoft.

  10. To see some reward for your earlier effort, right-click on the Vehicle group and Service schedule controls and select View details.
  11. Once complete, create a menu item by dragging the form onto the Menu items | Display node of our project and then associate it with the FormRef property of the ConFMSVehicleTable table.

    Note

    Do not add it to the menu as Details forms are not main entry points; they access from a list page or other form.

The final step of finishing the Details form is to hook up a form whose purpose it is to create a new vehicle record. We will do this later in the chapter.

Creating the list page interaction class

This class will control the user interface interaction, including how the list page is constructed, and the state of various controls and columns.

In our case, we will simply create a basic interaction that we will extend later in the book.

Right-click on the Classes node in our project and choose New | Class.

Rename the class to ConFMSVehicleTableListPageInteraction, as per convention to name a list page interaction class.

Open classDeclaration (double-click on it) and change the definition to the following:

class ConFMSVehicleTableListPageInteraction extends SysListPageInteractionBase
{
}

Save the class.

For further details and the inheritance hierarchy of SysListPageInteractionBase, go to http://msdn.microsoft.com/en-us/library/syslistpageinteractionbase.aspx.

Creating the base query for the list page

List pages are forms, but they are specifically designed to display lists of data and offer actions that act on the data. All data maintenance (except delete) is done by a details form.

These forms are based on a query defined in the AOT, which may seem like an additional step, but offers many advantages. One example is that you can quickly define secondary list pages that show a subset of the data without having to modify the list page itself.

To create the query, follow these steps:

  1. Right-click on the queries node in our project and navigate to New | Query.
  2. Rename the query to ConFMSVehicleTableListPage. It is convention to use the table name followed by ListPage for the primary list page query.
  3. Expand the query to show the Data Sources node and drag the ConFMSVehicleTable table onto it. You may need to do this from the AOT, which is positioned to the side of the project window.
  4. AX will name this ConFMSVehicleTable_1. Rename it to ConFMSVehicleTable. Again, this is purely convention; the suffix is not required.

    Note

    By default, no fields will be made available. This is useful when creating queries for views, as we won't want all fields to be available to a view. This simplifies the view creation by making only pertinent fields available. It can also help performance by restricting the fields that are available. In a view designed for high performance, we don't want memo or large string fields to be used.

  5. Expand the ConFMSVehicleTable data source and open the properties of the Fields node.
  6. Set the Dynamic property to Yes.

The query is now complete. We can proceed to create the list page.

Creating the list page

This is a reasonably simple process, now that we have most of the basics ready. Most of it may now seem more straightforward.

The following steps will create the list page and hook up the details form:

  1. Right-click on the Forms node of the AOT and navigate to New Form from template | ListPage.
  2. Rename the new form as ConFMSVehicleTableListPage, as per convention for the main list page, and drag it to the Forms node of our project.
  3. Open the properties of the list page, and change the InteractionClass property to ConFMSVehicleTableListPageInteraction.

    Note

    This hooks up various events on the form, so we can handle them in code. This is useful as we can't add code directly to a list page.

  4. You may notice that you can't add a data source manually. Again, by design, this forces us to use a query. To set the data sources in a list page, we use Data Sources' Query property; set this to ConFMSVehicleTableListPage.
  5. Set the design properties as before (TitleDatasource, Caption, and DataSource).
  6. Open the properties for the ListPageGrid control and set the DataSource property to ConFMSVehicleTable and DataGroup to Overview.

    Note

    The form will function at a basic level, but we need to hook up some action buttons to make it fully functional.

    When double-clicking on a row, the user expects to see the vehicle details form. The DefaultAction property on the grid references a button that is called when the user double-clicks on a row. The DefaultActionLabel property controls the text that appears on the menu that appears on right-clicking.

    This is fine in this particular case, although we may alter the DefaultActionLabel to something more specific, such as View vehicle details.

  7. As the grid control references a button, in this case ViewButton. Locate this button on the action pane (HomeTab | MaintainGroup | ViewButton) and set the MenuItemName to ConFMSVehicleTable.

    Note

    There is also an edit button, but if we hook up the ConFMSVehicleTable menu item, it will open in the view mode, not the edit mode. We need a new menu item that opens the form in edit mode.

  8. Right-click on the menu item ConFMSVehicleTable and choose Duplicate.
  9. Rename the new menu item as ConFMSVehicleTableForEdit.
  10. Change the OpenMode property Edit.
  11. Change the Label property to Edit vehicle details and create a label.
  12. On the ConFMSVehicleTableListPage form, navigate to Designs | Design | ActionPane | HomeTab | MaintainGroup | EditButton, and change the MenuItemName property to ConFMSVehicleTableForEdit.
  13. We also need to hook up the new button, create another from ConFMSVehicleTable, and call it ConFMSVehicleTableForNew.
  14. Change the OpenMode property to New.
  15. Change the Label property to New vehicle and create a label.
  16. Change the NormalImage property to 10874 (a nice new icon).
  17. Change the ImageLocation property to EmbeddedResource.
  18. Navigate to Designs | Design | ActionPane | HomeTab | MaintainGroup | EditButton, and change the MenuItemName property to ConFMSVehicleTableForNew.

You can test the form by opening it, which is a good idea as we progress, so we can see the effect of the changes we are making.

To add to the menu, we need to create a menu item of type display as per the vehicle details form, but set the label to Vehicles.

The menu item is added to the menu by dragging onto the Common submenu of ConFleetManagementSystem. Once it is added, you need to set the isDisplayedInContentArea field to Yes for it to display as a true list page.

We can open the form and it should all appear to work; but we aren't quite there yet. We need to create the Create form.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.138.35.193