i
This document refers to an older version. GeneXus 16 is our latest version; check the latest one here.

Web Component control

Official Content
This documentation is valid for:

It is a control that can be inserted over a web object form, with the objective of showing inside it, the content of a Web Component object.

To insert a Web Component control, drag the icon that represents it ( Web Component control icon) from the toolbox to a Web Form.

Web Components can even be inserted in Free Style grids.

Web Components are generated inside the same HTML of the Web Panel that contains them. This means that the server includes the Web Component at runtime and sends the HTML code containing the Web Component back to the browser.

Web Component Sample

The image above shows three Web Components. They are distributed inside a table so they are better aligned. To make the development task easier, the ControlName property of the Web Components has been modified so that they are more descriptive: the top and bottom areas are now called Header and Footer, respectively, and the area in the middle is now called Login, as it contains information on the current user. A grid has also been added in a table cell to show a list of the airlines available to the company.

Header, Login, and Footer are three ordinary Web Panels, except that the value of their Type property is set to Component. Thus, for each Web Component (Header, Login and Footer) inserted, the main Web Panel (as shown below) will indicate the component that will go in each place. As these Web Panels are classified as Components, they are displayed in the Component list of the KB. If, instead, the value of Type property were not set to Component, the relationship would not be established because they would not be included in the list.

Web Component Relation Parts Web Component control runtime image

The link between the Web Component control and the Component object is the Object property value of the Web Component control. It defines the object that must be included at runtime in the Web Component control.

How is the Component selected? Again, it is selected from the list of Components in the Knowledge Base. The list is opened when the Object property of a Web Component in the main Web Panel is being modified, as shown below.

Web Component control Header Sample

In the following figure, the same Web Component Footer has been added to the Person transaction. Unlike in the previous case, only this Web Panel will be included in the transaction.

Web Component Sample Transaction Editing

Web Components can be created at runtime. This gives you the possibility of creating highly dynamic applications, which means that the application's layout or behavior can be changed by creating different Web Components, depending on certain application parameters. Read more about this here: Dynamic Component Creation.

See also

Web Component Control Properties
Type property (in Web Panels and Transactions)