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.
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:
ConFMSVehicleTable
table to the form's Data Sources node.Vehicle details
, and find the label using the label editor.Home
and select a label.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.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.
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:
ConFMSVehicleTable
table, create a new field group called Identification
and use the first label without a comment.VehicleId
, Name
, VehicleGroupId
, and VehicleTypeId
.Identification
and Details
, so they appear as nodes under the HeaderGeneral tab page.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.
ConFMSVehicleTable
table.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.
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.
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:
ConFMSVehicleTableListPage
. It is convention to use the table name followed by ListPage
for the primary list page query.ConFMSVehicleTable
table onto it. You may need to do this from the AOT, which is positioned to the side of the project window.ConFMSVehicleTable_1
. Rename it to ConFMSVehicleTable
. Again, this is purely convention; the suffix is not required.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.
ConFMSVehicleTable
data source and open the properties of the Fields node.Yes
.The query is now complete. We can proceed to create 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:
ConFMSVehicleTableListPage
, as per convention for the main list page, and drag it to the Forms node of our project.ConFMSVehicleTableListPageInteraction
.ConFMSVehicleTableListPage
.ConFMSVehicleTable
and DataGroup to Overview
.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
.
ConFMSVehicleTable
.ConFMSVehicleTable
and choose Duplicate.ConFMSVehicleTableForEdit
.Edit vehicle details
and create a label.ConFMSVehicleTableListPage
form, navigate to Designs | Design | ActionPane | HomeTab | MaintainGroup | EditButton, and change the MenuItemName property to ConFMSVehicleTableForEdit
.ConFMSVehicleTable
, and call it ConFMSVehicleTableForNew
.New
.New vehicle
and create a label.10874
(a nice new icon).EmbeddedResource
.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.
3.138.35.193