Step by Step: Create a Custom UI Model to Manage Child Records

Note: This sample uses a new spec type called the CustomUIModelMetadata spec, which creates a Custom UI Model that is similar to a type of feature known as data form. This content assumes you are familiar with the UI Model concepts and you have experience creating a UI Model. If you are unfamiliar with UI Models, see UI Model for Data Forms.

Overview

Batches often manage data that has a one-to-many relationships. A constituent batch record can contain many child phone records. In the case of a Food Bank Transaction Add Batch, a parent food bank transaction record can contain many child transaction detail records.

Figure: A parent transaction record can have many child detail records.

With the Food Bank Transaction Add Batch code sample as an illustration, we see below the form fields within batch's add form used to add food bank transaction header and detail records into their respective staging area tables. We can borrow the FOODITEMS form field, which contains a collection of child form field and create a Custom UI Model bases upon the collection to provide a custom dialog data entry screen used to manage the food items.

Figure: FOODITEMS FormField Collection

Figure: The Custom UI Model will receive its data from the data within the batch grid.

Step 1 -  Add a new Custom UI Model item into your UIModel Visual Studio project used to support the batch.

Figure: Add a Custom UI Model Metadata Spec into the UI Model Project

The template provides a starting point for your Custom UI Model. In the next step, we will replace these default form fields with the food item form field collection used by the batch.

Figure: You need to modify the form field tags to include the collection of items you wish to display on your dialog screen.

Step 2 -  Copy the FOODITEMS form field collection from your batch's add data form to the new CustomUIModelMetadata spec.

Tip: By ensuring the CustomUIModelMetadata spec's form field collection structure matches the structure of the batch's form field collection structure, we will set ourselves up for an elegant solution when it comes time to programmatically copy the child food item data from the batch child grid to the Custom UI model dialog screen and vice versa.

• Within the UI Model project, open the CustomUIModelMetadata spec and remove the three default form fields (FIELD1, FIELD2, FIELD3).

• Within the Catalog project, open the batch's add data form (FoodBankTransactionAddBatch.Add.xml) which can be found within the project's BatchTypes\Food Bank Tx Adv Add folder.

• Copy the FOODITEMS form field from the add data form and paste it into the CustomUIModelMetadata spec within the <FormFields> node (yellow highlight below).

• After you finish, your CustomUIModelMetadata spec should look like the figure below:

Figure: Your CustomUIModelMetadataSpec should look like this after you copy the FOODITEMS form field from the batch's add data form.

Step 3 -  Provide values for the CustomUIModelMetadata's Author and FormHeader attributes.

Step 4 -  Within the UI Model project, generate the UI Model from the CustomUIModelMetadata spec.

Tip: If you are unfamiliar with UI Models, see UI Model for Data Forms. and Custom UI Models.

• Within the UI Model project, select the UI Model Wizard to add a new item.

  

  Figure: Add a UI Model for the CustomUIModelMetadata spec

• With the figure below as a guide, complete the UI Model Wizard dialog screen. We want to generate the UI Model from the spec and not from the metadata within the database/catalog system. Be sure to clear the last option since the CustomUIModelMetadata spec's metadata is never loaded into the Infinity database/catalog system.

  Note: The CustomUIModelMetadata spec is not loaded into the catalog system like other data form specs. This spec is used to generate a UI Model class that forms user interface for the custom data form. After the UI Model class is generated, the CustomUIModelMetadata spec is not needed anymore other than to serve as an artifact to help document the structure of your Custom UI Model dialog screen.

  

• After the UI Model is generated by the wizard, you can add user interface interaction code to the UI Model class, if necessary.

• We are ready to wire it up to an action within a web event handler.