Overview
When creating a Widget, you may rely on the API as described at API for Widgets.
There are certain scenarios for Widgets which require expert knowledge and may involve specific coding, such as:
•A Widget for records in a collection (a column Widget).
•A Widget whose XPath is binded to data of a collection (a collection Widget).
•A Widget which handles more than one XPath (a multiple-XPath Widget).
Note that when possible, it is strongly recommended to stick with the regular Widgets which do not involve the aforementioned considerations.
The following section provides further information whenever you need to implement these types of Widgets.
Column Widgets
Column Widgets are those which are not shown within the activity form per sé, but directly inside of a table.
This means that these are applicable to a collection XPath, and that the Widget may be automatically shown more than once within that table (one time for each of the rows held by that table).
Note that you may create Column Widgets by using the Widget Editor and simulate them (as well as shown in the image above):
No further considerations are needed to create these types of Widgets, though bear in mind that these will have a very different coding in its internal properties and values (when compared to a regular Widget).
Adding Column Widgets in the forms designer is done just the same as with regular Widgets, while acknowledging that these will show up when editing columns of a table:
The Column Widgets will be available and shown only when designing the table (from the inside and not from the outside):
Collection Widgets
Collection Widgets are those which will are bound to a collection XPath, and therefore, it is expected to use sub-properties mapped to the attributes and data held in that collection.
A good example of these types of Widgets are the chart Widgets (e.g, pie chart, line chart, bars chart).
To set a collection as its type of XPath, make sure you edit the code so that it considers the depicted values for both design and runtime properties.
The following code is an incomplete portion that highlights specifically the use of XPath-to-collection for the design properties:
 | Design property "properties": { "xpath": { "bas-type": "xpath-to-collection", "caption": { "default": "Data Binding", "languages": [ { "es": "Fuente de datos" } ] }, "required": true, "subproperties": { "xpath": { "bas-type": "xpath" }, "relatedentity": { "bas-type": "entity" } } }, "data": { "bas-type": "datalist", "subproperties": { "<nombrede atributoa mostrar>": { "bas-type": "xpath-from-entity", "editor-parameters": { "entity": "<design:xpath:relatedentity>" }, "caption": { "default": "<NameOfAttribute>", "languages": [ { "es": "<NombredelAtributo>" } ] }, "user-editable": "true", "subproperties": { "xpath": { "bas-type": "xpath" } } } } } |
The following code is an incomplete portion that highlights specifically the use of columns for the runtime properties:
| Runtime property "properties": [ { "name": "<CollectionName>", "type": "list", "metavalue": "columns(<design:xpath:xpath>, 'Id', '<design:data:Attribute1:xpath>','<design:data:Attribute2:xpath>', '<design:data:AttributeN:xpath>' )" }, ] |
Multiple-XPath Widgets
Multiple-XPath Widgets are those which will rely on more than one XPath.
For this type of Widgets, make sure that the first XPath you use is always named exactly as XPath.
Note that you may add any number of additional XPath-based properties (i.e Simple data binding) through the Widget Editor:
However, you will need to make sure that the coding has the right treatment for these multiple Xpaths, i.e., considering the following structure and values for both design and runtime properties.
The following code is an incomplete portion for the design properties, which is pretty straight-forward:
| Design properties "design": { "properties": { "xpath": { "bas-type": "xpath-to-simple", "editor-parameters": { "types": [ "string" ] }, "caption": { "default": "Data Binding", "languages": [ { "es": "Mapeo de datos" } ] }, "required": true, "subproperties": { "xpath": { "bas-type": "xpath" } }, "main": true }, "xpath2": { "bas-type": "xpath-to-simple", "caption": { "default": "xpath2", "languages": [ { "en": "xpath2" } ] }, "required": true, "main": false, "editor-parameters": { "types": [ "number" ] }, "subproperties": { "xpath": { "bas-type": "xpath" } } } |
The following code is an incomplete portion that highlights specifically the use of decision-table for the runtime properties:
| Runtime properties {"name": "<NamefXpath1>","type": "xpath","metavalue": "<design:<NamefXpath1>:xpath>"}, {"name": "<NameofValue1>", "type": "xpath-value", "metavalue": "<decision-table:dt-xpath-value-<NameofValue1>:value>"}, {"name": "<NameofXpath2>","type": "xpath","metavalue": "<design:<NameofXpath2>:xpath>"}, {"name": "<NameofValue2>", "type": "xpath-value", "metavalue": "<decision-table:dt-xpath-value-<NameofValue2>:value>"} "decision-table": [ { "name": "dt-xpath-value-<NameofValue1>", "decision-table": "xpath-value", "parameters": { "xpath": "<design:<NamefXpath1>:xpath>" } }, { "name": "dt-xpath-value-<NameofValue2>", "decision-table": "xpath-value", "parameters": { "xpath": "<design:<NameofXpath2>:xpath>" } } ] |
Last Updated 1/6/2022 11:29:38 AM