Advanced types of Widgets

<< Click to Display Table of Contents >>

Navigation:  Bizagi Studio > Process wizard > Define Forms > Extending or customizing Forms > Creating Widgets > Widget structure > Functions to implement/override >

Advanced types of Widgets

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 1 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).

 

Widgets_ColumnLevel2

 

Note that you may create Column Widgets by using the Widget Editor and simulate them (as well as shown in the image above):

 

Widgets_ColumnLevel

 

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:

 

widgets_columndesigner1

 

The Column Widgets will be available and shown only when designing the table (from the inside and not from the outside):

 

widgets_columndesigner2

 

 

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, ensure 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:

hmtoggle_arrow1Design 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:

hmtoggle_arrow1Runtime 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 1 Xpath.

For this type of Widgets, ensure 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:

 

Widgets_Multiple1

 

However, you will need to ensure 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:

hmtoggle_arrow1Design 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:

hmtoggle_arrow1Runtime 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>"
       }
     }
       
   ]