Understanding web components

External graphical components can be integrated into forms by using the WEBCOMPONENT form item type.

A WEBCOMPONENT form field is a form element that defines an area in the form layout to hold an external component, typically not available as a native widget on the front-end platform.

Important: The purpose of a web component form field is not to replace a web browser, PDF viewer, or to implement sub-forms in HTML. A WEBCOMPONENT field must behave as a single form field and integrate with the other standard Genero form fields and form elements. When implementing a gICAPI webcomponent, the JavaScript code must keep the focus in the area reserved for the field. For example, the JS code should not create another window or tab with the window.open() API.

This section describes how to implement your own web component form fields. Genero provides a set of ready-to-use web components that are available for all front-ends. For more details, see Built-in web components.

Web component form fields are used to fulfill a specific display and/or input, with advanced and powerful features which can bring added value to your applications. For example, you can find chart and graph widgets, calendar widgets, drawing widgets, and more. Such specialized widgets are not part of the standard GUI toolkits used by Genero front-ends. They need to be integrated as external components with WEBCOMPONENT fields.

Note: Depending on the type of front-end, the web components can have limitations: When using native front-ends (GDC, GMA, GMI), the web components are implemented with a "webview" widget, which is not a fully-featured web browser.
The main web component limitations on native front-ends are:
  • lack of plugin support,
  • less accurate JavaScript engine,
  • lack of advanced HTML+CSS features.

Some web components are free, and some are licensed, so it is recommended that you take the cost into account before integrating a new web component in your application.

Web components can be implemented with two different techniques:
  1. Using a URL specification, by setting the URL as value of the WEBCOMPONENT field at runtime. This is the easiest way to implement a web component. The widget is controlled with URL values by the program, but requires some additional coding to handle URLs, instead of flat field values.
  2. Using an gICAPI object (based on JavaScript), by defining the COMPONENTTYPE attribute in the form file. This kind of web component requires some JavaScript coding, to write a form field "plugin", which is usable in a normal dialog instruction, that behaves as all the other widgets in terms of value setting/getting.

The content and/or behavior of a web component can be controlled in the program code by using the field value. To detect events inside the web component, the program dialogs must implement an ON CHANGE control block, that will be fired immediately after a user action on the web component.