Defining a web component in form files

In order to display and/or input data in a web component, you must define a form field with the WEBCOMPONENT item type.

As web component usage is very specific, the data of such fields is not stored in a database column; you generally define the web component field name with the FORMONLY table prefix.

The COMPONENTTYPE attribute is mandatory to define the type of Web Component to be loaded. This attribute specifies a name that will be mapped to an interface script on the front-end side.

In Genero Application Server configuration, the entry WEB_COMPONENT defines the path where components are deployed:

<WEB_APPLICATION_EXECUTION_COMPONENT Id="cpn.wa.execution.local">
  <ENVIRONMENT_VARIABLE Id="FGLDIR">$(res.fgldir)</ENVIRONMENT_VARIABLE>
  <ENVIRONMENT_VARIABLE Id="FGLGUI">$(res.fglgui)</ENVIRONMENT_VARIABLE>
  <ENVIRONMENT_VARIABLE Id="PATH">$(res.path)</ENVIRONMENT_VARIABLE>
  <ENVIRONMENT_VARIABLE Id="FGLLDPATH">$(res.fglldpath)</ENVIRONMENT_VARIABLE>
  <ENVIRONMENT_VARIABLE Id="LD_LIBRARY_PATH">$(res.ldlibrarypath)
        </ENVIRONMENT_VARIABLE>
  <DVM>$(res.dvm.wa)</DVM>
  <WEB_COMPONENT>$(connector.uri)/components</WEB_COMPONENT>
<WEB_APPLICATION_EXECUTION_COMPONENT>

The web component files must be located below the directory defined by WEB_COMPONENT/component-type where component-type is the name as defined by the COMPONENTTYPE attribute. Under this directory, the main file must be an HTML file with the name component-type.html.

For example, if the COMPONENTTYPE attribute is set to "3DCharts":

WEBCOMPONENT wc = FORMONLY.mychart,
         COMPONENTTYPE = "3DCharts";

The component and all related files should be located in $FGLASDIR/web/components/3DCharts and the main file should be $FGLASDIR/web/components/3DCharts/3DCharts.html.

Note:

Genero Web Client uses automatically the definition to load web components
Genero Desktop Client uses automatically the definition when connected to the GAS
When Genero Desktop Client is directly connected to the DVM (via SSH for instance), the base path for components is $GDCDIR/webcomponents and follows the same rule as above (ex: $GDCDIR/webcomponents/3DChars/3DCharts.html)). This base path can be modified by the following frontcall:
```
CALL ui.interface.frontCall("standard", "setwebcomponentpath", [myUrl],[ret])
```
The url must be a well formatted url (e.g. "http://myserver/components" or "file:///c:/components")

Web components are usually complex widgets displaying detailed information on the screen, like charts, graphs, or calendars. Such widgets are generally re-sizeable; you can use the STRETCH attribute to let the end-user control the resizing policy of a Web Component field.

Since web component field definitions are generic, you must use the PROPERTIES attribute to set specific parameters for the component.

The PROPERTIES attribute can define a list of:

simple properties ( name = value ),
array properties ( name = ( value1, value2, ... ) ) and
map/dictionary properties ( name = ( sub-name1 = value1,sub-name2 = value2, ... ) )

where name is a simple identifier, and where values can be numeric or string literals.

The name of a property defined in the PROPERTIES attribute is converted to lowercase by the form compiler. To avoid mistakes, a good programming pattern is to define properties in lowercase, in both the interface script and the form definition file. Keep in mind that property names are not checked at compile time, so nonexistent or mistyped properties will be ignored at runtime.

LAYOUT
GRID
{
[wc                       ]
[                         ]
[                         ]
[                         ]
[                         ]
}
END
END
ATTRIBUTES
WEBCOMPONENT wc = FORMONLY.mychart,
         COMPONENTTYPE = "3DCharts",
         STRETCH = BOTH,
         PROPERTIES = ( type = "bars",
                           x_label = "Months",
                           y_label = "Sales" );
END