View Components & Data Binding

IFML Modeling with WebRatio Platform
3,490 views Published on Oct 27, 2017 | Time 20 min
Applies to: 7.2 or higher

In order to publish content or to introduce interface elements for data entry in your Web application, we must use View Components. IFML defines a View Component as an element of the interface that displays content or accepts input. Let's see how a generic View Component works in WebRatio and which are its main parts.


Table of contents

View Components

View Components can be used inside the pages of a site view. A View Component is represented by a gray rectangle with rounded corners. View Components can contain View Component Parts. The main View Component Parts are represented inside the view component using a white rectangle with a black border.
WebRatio Platform provides different View Component types, each having a specific goal. View Components can be divided into four groups based on their functionality, such as:

  • View Components used to display details of object instances.
  • View Components used to display different kinds of lists, including checkable lists and hierarchies.
  • View Components used to show input forms to the user.
  • Other utility View Components, such as Calendar and Message.

Adding a View Component

For the View Components example, we will continue working with our "CRM" web project. We have already created the "Sales Manager" site view and added to it the "Companies" area and the "Companies" page. A View Component can be added to a Web Project only inside a Page. The logic behind this is that the user of a Web application sees the pages. That's why View Components are added only to the pages.

To add a View Component, right-click on the Page in which you want to create the View Component. Select "Add" and then "View Components" and then the type of the View Component you would like to add. A best practice is to give a meaningful name to each object in your project to make it easier to recall the element’s purpose.

Double-click on the default name to change it.

The View Component has a unique id, as do all the other Web Model elements. You can see this information and configure other View Component parts in the Properties View.

View Component Properties and Data Binding

Data Binding is the most important View Component Part and is a set of properties that represent the connection between the View Component and the corresponding Domain Model object. Data Binding is composed of the following:

  • Entity
  • Display Attributes
  • Conditional Expression

You can see the Domain Model of your Web Project by clicking on the corresponding tab at the bottom of the work area. In our "CRM" project example, we already added two Entities to the Domain Model: "Company" and "Employee". We have also identified the corresponding Attributes for both Entities and the one-to-many Relationship "Employment" between them.

Let’s see each property composing Data Binding in detail. The "Entity" property is the main one and specifies which Domain Model object to use as source of information. The "Display Attributes" property determines which Attributes of the specified Entity will be displayed to the user. Not all View Components have this property.

Setting the "Entity" and "Display Attributes" Properties

To choose an Entity, select the View Component and click the "Select" button next to the "Entity" property in the Properties View. In the opening dialog, select the Entity that you want to be used as source of information. Click the "OK" button.

After you set the "Entity" property on the View Component, you can specify the Attributes to be displayed. Select the View Component and click the "Select" button next to the "Display Attributes" property in the Properties View. In the opening dialog, select all the Attributes that you want to display to the user. And click the "OK" button.

Data Binding: Conditional Expression

Data Binding also contains the definition of a Conditional Expression. A Conditional Expression is a Predicate that selects the instances of interest for a View Component from the Domain Model object. A Conditional Expression can be composed of several conditions. There are three different types of Conditions:

  • Key Condition
  • Attributes Condition
  • Relationship Role Condition

All conditions share the same properties, which are the name and the predicate to apply. Conditions can be parametric, where the parameter is provided by other model elements. For parametric conditions it’s possible to indicate whether or not the condition is mandatory in the conditional expression computation. Mandatory means that if no value is provided for the parameter, the condition is considered to be false.

Attributes Condition

An Attributes Condition is a condition that selects object instances based on their Attribute values. An example is to retrieve all the companies whose name starts with the letter "A".
To create an Attributes Condition, you can right-click on the required View Component in the Outline View and select the "Add" and then the "Attributes Condition". The main properties of an "Attribute Condition" are:

  • The "Name", which is a label useful for the designer aimed at containing meaningful text in order to recall the purpose of the attribute condition. In our case the name could be "Name starting with A".
  • The "Attributes" to be used for evaluating the condition. To choose the attributes click the "Select" button. In the pop-up window choose the attributes. For our example, pick the "name" Attribute. Click the "OK" button.
  • The operator that must be applied to define the "Predicate". In our case it is "Begins with".
  • By selecting the "Ignore Case" property we retrieve companies whose names start with either Upper or Lower case "A".

If the chosen operator is binary and thus requires a second value to compare, you can provide a constant value to be compared with the attribute values. For our example, we specify the constant value "A". However, in some cases the predicate will use a value known only at run time; this is the case of parametric conditions, where the parameter is provided by other model elements. In this situation you need to create another View Component, which will provide the value to compute the predicate, for example as the result of a user’s interaction.

Key Condition

A Key Condition is a special kind of Attribute Condition that selects object instances based on their Key Attribute values. The reason why Key Conditions are distinguished from Attribute Conditions is that in many situations WebRatio Platform is able to understand that a Key Condition is needed and so you don't have to specify it explicitly. An example is: select the company with a "VAT Code" equal to "ABC123". For the Entity "Company" we have only one Key Attribute - the VAT Code. However in case of several Key Attributes for the Entity all of them are used to evaluate the condition.

To create a Key Condition, right-click on the View Component to which you want to add a Condition, open the "Add" menu, and then select the "Key Condition" command. Remember to give the condition a meaningful name.

The available predicates for a Key Condition are: "In", and "Not In". "In" is the default value and specifies that object instances must have the specific key attributes values. "Not In" specifies that object instances must not have the specific key attribute values. In this situation, we will not specify a constant value in the Key Condition, as we have done before for the Attribute Condition "name begins with". In fact, the VAT Code will be determined at runtime by a user’s interaction: to model this behavior, we need another View Component that will pass the value to the Key Condition.

In the lesson about "Master & Details" you will find more information about how to do it.

Relationship Role Condition

A Relationship Role Condition is a condition that selects object instances based on the participation of the object instance in a Relationship. An example of Relationship Role Condition is: "show the company in which a specific employee works".

To create a Relationship Role Condition, right-click on the View Component to which you want to add a condition, open the "Add" menu, and then select the "Relationship Role Condition" command. Give a meaningful name to the Relationship Role Condition, for example a description of the kind of value needed to evaluate the condition. For our example, suppose we want to display the company in which the Employee works. In this case, the name can be "Employee Key". The main property of the condition is the Role, which refers to a Relationship Role of the Domain Model.

When the Domain Model contains a single Relationship connecting a source and the Entity on which the View Component is built, as in this example, WebRatio Platform automatically proposes the proper Relationship Role. In our case WebRatio Platform automatically proposes the "Employee" relationship role between Entity "Employee" and Entity "Company".

To set the Relationship Role click the "Select" icon. As the View Component we are defining displays a Company, the Relationship Role to select must have entity "Company" as its target role. As in the example about Attribute Conditions, the value to use in the evaluation of the condition will be supplied at runtime. Therefore, we need another View Component that will pass the value of an employee’s key in order to retrieve the Company displayed in the View Component.

In other lessons about IFML modeling in WebRatio Platform, you will find more information about how to do it.