Advanced Master & Detail

IFML Modeling with WebRatio Platform
892 views Published on Oct 06, 2014 | Time 18 min
Applies to: 7.2 or higher

The ability to show a list of elements and the details of each listed element is the one of the most common patterns in Web applications, and is called the Master and Details pattern. In a previous lesson, you already learned how to model the basic Master and Details pattern. This lesson shows you how to model some variants of the pattern that let you show a hierarchy list. These pattern variants may be useful when you want, for example, to create a product catalogue.

Transcript

Table of contents

Advanced Master & Details Overview

The basic Master & Details pattern, which was covered in a previous dedicated lesson, is not a good choice when you want to show a hierarchy list, such as a product catalogue with products and categories, to the user. You need to use a variant of the basic pattern in order to fulfill this requirement. One option is to model a page in which the user can view the product catalogue organized as a hierarchy, comprising categories and products. The user can decide at any moment whether to view the category or the product details. Another option is to show a nested list of categories and subcategories. Each proposed variant strictly depends on how the information about the product catalogue is structured. This organization is also reflected in the Domain Model, which is slightly different in two cases. In the first case, the number of nested levels is known. For example, you have categories and products, or two different levels. In the second case, the number of nested levels is not known. For example, you might have categories that can be nested, one into the other, without limits. When selecting a category, the user can view its details as well as the information about the products that are contained in the category.

Master & Details with Hierarchy List

Let’s suppose you want to model a product catalogue with a set of categories and a set of products, and you want to show the user a hierarchy list of both categories and products. The user can select either a category or product and view its details. In the Domain Model, the best structure for this information is the one using an Entity for each type of information. This means that you have the "Category" entity and the "Product" entity, connected with a one-to-many Relationship. The IFML model for the Master & Details pattern that shows a product catalogue using the previous Domain Model can be structured as shown in the following figure. The categories list is modeled using a Hierarchy Component. You can model several information flows from the Hierarchy Component. Each outgoing flow from the hierarchy will carry the appropriate key corresponding to the selected element to the target Component. In this example, one Navigation Flow is used to let the user view category details, and another Navigation Flow is used to let the user view product details. The "Category Details" page is composed of the category’s main information, modeled using a Details Component. It also contains the list of products in the specific category, modeled with a List Component. Of course, this is an example. You are free to change the proposed model as desired, using the Hierarchy List Component as the main component. Let’s see how the Hierarchy Component works.

Hierarchy View Component

The Hierarchy Component is a View Component used to display a list of instances of different Entities, connected by Relationships. This component is the first one you see that is able to work using different Entities. You have to select the main Entity, such as "Category", and then you can add several levels to the Component. For example you can add a "Product" level that shows all products related to a category. To create levels correctly, remember to choose an Entity that is connected to the master one through a Relationship. You can apply conditional expressions to any level and nest as many levels as you desire. It's also possible to add several levels to the same parent level. You can draw many Navigation Flows outgoing from the Component. Each Navigation Flow is related to a specific level of the hierarchy. Each navigation flow is placed next to a specific level in the web page. To decide the level of the Hierarchy to which each Navigation Flow belongs, WebRatio Platform uses the Parameter Binding of the Navigation Flow.

How to Model the Master & Details with Hierarchy

To apply the variant of "Master & Details pattern" using the "Hierarchy" view component, let’s refer to the "CRM" web project and start adding a Page to it. Be sure that your page can be reached from the other elements of the Site View.

To show the hierarchy list of all the "Products", let's use the "Hierarchy" view component. Select the "Hierarchy" view component from the toolbar section related to "View Components". Let’s click on the "Page" to add it and type a name for it, such as "Categories". Let's now define the "Data Binding" connection. Now choose the Display Attributes for "Category", which is the main Entity. Choose the desired "Sort Attributes" for the hierarchy.

Let's add the nested level, which displays the products list for each specific category. Right-click on the "Categories" hierarchy component, then choose "Add" and then the "Level" option. Give a meaningful name to the level, such as "Products". Let's now define the "Data Binding" connection. Now choose the Display Attributes for the "Products" level. Choose the desired "Sort Attributes" for the level by pressing the "Sort" button next to the "Sort Attributes" property. When you select for a given level an Entity connected to the Entity in the previous level through a one-relationship-only Relationship, WebRatio Platform is able to automatically set the "Relationship Role" property. If the two Entities are connected with two or more Relationships, you must choose the one used for retrieving the level instances. To select the Relationship Role, press the "Select" button next the "Relationship Role" property, select the Relationship you desire and press the "OK" button to confirm.

Let's now add the two pages that the user can reach starting from the product catalog. The first one is the page shown if the user decides to view the category details. In this page, the user can view the category information and the product list contained in this specific category.

To show the details of the selected "Category", let's use a "Details" view component. Let's now add the product list. To display the products of the selected category, add a conditional expression to the list. Press the "Select" button next the "Role" property and choose the correct Relationship. Then press the "OK" button to confirm.

Let's now add the "Parameter Binding" to pass the category primary key to the "Condition". Add a "Data Flow" connecting the Details Component and the List Component. Since the two components are based on two entities connected by just one relationship, WebRatio Platform automatically infers this "Binding".

Now, we must connect the two pages, "Product Catalog" and "Category Details". Add a "Normal Navigation Flow" connecting the Hierarchy List Component and the Details Component. The other page that the user can see is the "Product Details" Page. Let’s see how to model it.

To display the information about the selected product, choose the "Details" component from the toolbar section of "View Components" and click inside the page. Add a "Normal Navigation Flow" connecting the Hierarchy List Component and the Details Component.

To check that the pattern is working, save and launch the generation procedure using the "Generate and Run" button.

Master & Details with Recursive Hierarchy List

Let's suppose you want to model a product catalogue in which you have a set of categories, a set of families (or subcategories) and a set of products and that you want to show to the user a hierarchy list with all the categories and subcategories. The user can decide to select a category or a nested category to view its details and the contained product list. The best structure for this information in the Domain Model is the one using an Entity for category and subcategory and another Entity for the product. The "Category" and the "Product" entities are connected with a one-to-many Relationship. The particular thing to note about this Domain Model is that category has a Relationship connecting two instances of the same Entity. The IFML model for the Master & Details pattern for a product catalogue using the previous Domain Model can be structured as shown in the following figure. The category list is modeled using a Recursive Hierarchy Component. From the Recursive Hierarchy Component, it is possible to model several Navigation Flows. In this example the unique Navigation Flow is used to let the user view the category details. The category details part is composed of the category’s main information, modeled using a Details Component, and the list of products in the specific category, modeled with a List Component. Of course you can change the model as you desire. Let’s see in details how the Recursive Hierarchy Component works.

Recursive Hierarchy Component

The Recursive Hierarchy Component is a View Component used to display a hierarchy of instances of one entity, connected by a Recursive Relationship (connecting the Entity to itself). This component works exactly as the other View Components: you have to specify an Entity and (if needed) a conditional expression in order to filter the Entity instances. You also need to specify the Recursive Relationship connecting the Entity with itself so that the Component is able to create the hierarchy automatically.

How to Model the Master & Details with Recursive Hierarchy

To apply the variant of "Master & Details pattern" using the "Recursive Hierarchy" view component, let’s refer to the "CRM" web project and start adding a Page to it. Be sure that your page can be reached from the other elements of the Site View.

To show the recursive hierarchy list of all the categories, let's use the "Recursive Hierarchy" View Component. Select the "Recursive Hierarchy" view component from the toolbar section related to "View Components". Click on the "Page" to add it and type a name for it, such as "Categories". Let's now define the "Data Binding" connection. Now choose the Display Attributes for "Category", which is the main Entity. Choose the desired "Sort Attributes" for the hierarchy.

When the selected Entity is connected with itself through only one Relationship, WebRatio Platform is able to automatically set the "Child To Parent Role" property. If the entity is connected with two or more Relationships, you must choose the one used to display the hierarchy between parent and child. To select the Relationship Role, press the "Select" button next the "Child To Parent Role" property, select the relationship you desire and press the "OK" button to confirm.

From the "Categories" component, the user can view the category details and the product list of the specific selected category. To show the details of the selected "Category", let's use a "Details" view component. Add a "Normal Navigation Flow" connecting the Recursive Hierarchy List Component and the Details component. Type a meaningful name for the "Flow", such as "See Category Details". Since the two components are based on two Entities connected by a relationship, WebRatio Platform automatically infers this "Binding". Let's now add the product list.

To display the products of the selected category, add a Conditional Expression on the list. Move to the Properties View; press the "Select" button next the "Role" property and choose the correct Relationship. Then press the "OK" button to confirm.

Let's now add the "Parameter Binding" to pass the category primary key to the "Condition". Add a "Data Flow" connecting the Details Component and the List Component.

To check that the pattern is working, save and launch the generation procedure using the "Generate and Run" button.