In this part we will describe all the different options of an entity-property. The entity-properties are all saved in the table 'wiser_entityproperty'. Within the user interface of Wiser (the front-end project) Wiser extensively depends on the commercial framework Kendo UI from Telerik. So if you want to use Wiser you should buy a licence for this UI framework or alter Wiser to work with another or your own UI framework for the different field types. Some field types are easy (like input-fields) but other offer extensive capabilities like tables or data-pickers. We added custom functionality for most of the on Kendo-UI based components offered in Wiser and this custom functionality is described in this article. But you can also use other (non-described) standard functionality of the Kendo Components, for more information on Kendo UI see the Kendo website.

Below are the different settings of an entity-property in Wiser, these settings all correspondent with a column in the wiser_entityproperty table of Wiser:

There are a lot of different type of field available in Wiser, each for different purposes. Here is the list of field types and the options they all have. Some of them have even more options that are not described here because they are based on KendoUI components. See the documentation of KendoUI for all the options.

The action button field type allows you to add buttons that perform 1 or more actions in sequence when clicked. The actions are executed in the order they are set. These buttons can be added to the Wiser item itself (for example to make a printout of the item's data) but they can also be added to 'Grids' and there they are often the most powerful, because you can then perform actions on multiple lines at once. These grids can be used in Wiser as a field type in an item (for example, to show a list of subaccounts within an account), but the action buttons can also be used as buttons in a GridView module. This is the type of module in Wiser that displays data using a table (see the documentation on modules for more information).

This is a list of the available actions that can be set. Documentation on how to set each action specifically can be found here.

• openUrl: opens a URL in a new window
• executeQuery: execute a query on the database
• openWindow: opens a specific item from Wiser
• generateFile: generate an HTML file or a PDF of this HTML file
• generateTextFile: generate a text file
• updateItemLink: update a link between 2 items
• refreshCurrentItem: refresh the active opened item
• refreshAllOpenedWindows: refreshes all windows opened in Wiser
• apiCall: calls an API
• pusher: send a message to another Wiser user via Pusher
• custom: perform specific scripting
• actionConfirmDialog: opens a confirmation dialog

The above actions also have some specific settings that are described here TODO LINK.

Also, before an action is executed you can ask for input from the user in advance. For this purpose the UserParameter object is available which can be set per action. Thus, with this extended field type ActionButton you create a lot of interaction between user and the Wiser system with different types of outcomes.

You can set the following properties for the button in the options column:

If the button is attached to a grid, the following additional options are available:

The individual actions in a group do not get icons. The group itself gets the icon of the first action in that group. |

When an action button is deployed in a GridView module, the following additional properties are available:

With the 'chart' field type, it is possible within Wiser to display charts in various forms supported by the Kendo UI Charts functionality. Complementing this, of course, is the ability to have these charts populated with data from database managed by Wiser.

The most important property to be entered in the options field is queryId, which is the query from the table wiser_query used to retrieve the data.

In addition, all properties from the Kendo Charts documentation can be used to display this data.

Example of a funnel representation:

{
    "queryId": 1,
    "title": { "text": "Leads funnel" },
    "legend": { "visible": false },
    "series": [
        {
            "type": "funnel",
            "labels": {
                "visible": true,
                "background": "transparent",
                "template": "#= category #: #= value#"
            },
            "colorField": "color",
            "dynamicSlope": false,
            "dynamicHeight": true,
            "field": "numberofleads",
            "categoryField": "fase"
        }
    ],
    "dataSource": {
        "sort": {
            "field": "fase",
            "dir": "asc"
        }
    }
}

Example of a pie-chart representation:

{
    "queryId": 1,
    "series": [
        {
            "type": "pie",
            "field": "amount",
            "categoryField": "name"
        }
    ],
    "tooltip": {
        "visible": true,
        "format": "c",
        "template": "#= category # - #= kendo.toString(value, 'n0') #"
    },
    "dataSource": {
        "sort": {
            "field": "name",
            "dir": "asc"
        },
        "schema": {
            "model": {
                "fields": {
                    "name": {
                        "type": "string"
                    },
                    "amount": {
                        "type": "number"
                    }
                }
            }
        }
    }
}

Example of a bar-chart representation:

{
    "queryId": 79,
    "title": { "text": "Number of leads per month" },
    "legend": { "visible": false },
    "seriesDefaults": {
        "type": "column",
        "labels": {
            "visible": false,
            "background": "transparent",
            "template": "#= dataItem.employeename #: #= value#"
        }
    },
    "tooltip": {
        "visible": true,
        "template": "#= dataItem.employeename #: #= value#"
    },
    "series": [
        {
            "field": "numberofleads",
            "categoryField": "month",
            "stack": "lead",
            "colorField": "leadscolor",
            "name": "#= group.value #"
        },
        {
            "field": "numberofprospects",
            "categoryField": "month",
            "stack": "prospect",
            "colorField": "prospectscolor",
            "name": "#= group.value #"
        },
        {
            "field": "numberdealsclosed",
            "categoryField": "month",
            "stack": "closed",
            "colorField": "closedcolor",
            "name": "#= group.value #"
        }
    ],
    "dataSource": {
        "group": {
            "field": "employeename"
        }
    }
}

This type of field involves a yes/no or on/off value. If you don't set anything, it just becomes a "normal" checkbox.

The field can also be set as a switch with an image. To set this you need to set the mode option to switch and you can add an imageId to load an image from the wiser_itemfile table, or an imageUrl to load an external image.

Examples:

{
    "mode": "switch",
    "imageId": 115
}

{
    "mode": "switch",
    "imageUrl": "https://yoururl.com/image.png"
}

This field results in the "default" color picker from Kendo. We have not added any additional functionality to this except of course that the data is saved and loaded from the Wiser database. You can read here what you can additionally set up and here are some demos.

This is a dropdown into which the user can also type (and thus search or filter). A combobox can be set up in different ways.

There are 2 properties of the combobox that can always be set, namely:

useDropDownList. When this property is set to true, a kendoDropDownList is used and otherwise a kendoComboBox is used. In the latter, a value can be entered to search the list of options or to enter a new value or to leave it empty. As a consequence, the list can only be opened by clicking the arrow. With a kendoDropDownList, the entire field can be clicked to open the list of choices and then a separate search field is displayed to filter within the choices. Only one can be selected from the available options.

The second option that is always available is optionLabel. This allows you to replace the default placeholder with another text. For more information, see Kendo's documentation.

The other settings of this component depend on how the list of choices should be constructed. There are several options here (such as filling from a query or a fixed predefined list and more).

(Note: _If you expand these options, also check if you need to change anything in the import module, which also uses these settings, for importing values from ComboBoxes).

This type of field displays a button that opens the Wiser 'data selector module' in a popup via an iframe. If an ID of a data selector is already stored in this field, that data selector is opened and otherwise a new, empty, data selector is displayed. When saving the data selector, its ID is stored in a hidden field located above the button. When the user saves the item itself, that ID is also stored in wiser_itemdetail.

The default text of the button is "Bewerken", but the text can be modified in this way:

{ "text": "Open data selector" }

This type of field can be used to select a date and/or time. You can set whether it should be a date + time field (this is the default), a time-only field or a date-only field. You can do this by filling in a JSON object in the options with the property type. You can then enter date or time as the value there.

If you want to set that the default value of the field should always be the current date and/or time, you can do so by adding this to options: "value": "NOW()".

The date is always stored within Wiser in the format YYYY-MM-DD and the time in the format HH:MM:SS.

Example settings for a date time picker:

{
    "type": "date",
    "value": "NOW()"
}

You can also enter a minimum date and/or time. For example for a time picker you can do this:

{
    "type": "time",
    "min": "14:00"
}

This type of field is intended to add "empty" blocks to the screen, for example, so that blocks can be better aligned or space can be made between two fields. Useful for padding a line, for example.

By setting the default_value, fixed HTML can be shown in the empty block. So you can also show static information in such a field. Or use custom scripting to make this information dynamic.

When creating an Empty type, it is important to fill in the 'Eigenschap naam' property_name with, for example, 'filler' to clarify what the field is used for. 'filler' is used when the field's purpose is to improve visualising the other fields.

A query can also be set up through the data_query column or by adding a queryId to the options. In this query, {itemId} can be used to do something with the currently opened item. The results of this query can then be set as a variables in default_value.

This is a component that allows adding files to the wiser_itemfile table. This is a Telerik Kendo UI component, you can view its documentation here.

By default, users can upload multiple files. If you want them to be able to upload only 1 file (per field), set the multiple option to false.

By default, it is only possible to upload files, but there is also a setting to indicate that users can add a URL to a file. To use that, enter the "showAddFileUrlButton": true option.

Also by default, files uploaded via this field are marked as protected, which means that they can only be opened/downloaded via a temporary encrypted ID, to prevent users from downloading files by trying out random IDs. To disable this feature, set the option filesCanBeAccessedPublicly to true. This is not important in Wiser itself, because files can never be downloaded without authentication there, but it is important for any publicly accessible websites that use the GCL and run on the same database. The GCL has endpoints/URLs for download files from wiser_itemfile tables, if the column protected is not set to 1, then anyone can download any file that they know (or guess) the ID of. So make sure you only use this option when you know for sure that files that will be uploaded here do not contain sensitive data. It's also recommended to add a description to this field that warns people that upload files here to never upload files with sensitive information there.

Files are stored in the database by default. It is also possible to store them physically on server(s) by uploading them via FTP. The FTP data can be set via the master data module, create a folder there and add an entry of type ftp_configuration in that folder for each client server. If the particular Wiser setup does not already have this type, add it to wiser_entity and wiser_entityproperty. Then for each field, where files should not be added to the database, add the option "useFtp" : true. You can also set a subfolder where the images should be placed, using this option: "uploadDirectory" : "folder/subfolder".

You can also add validation if you want users to be able to upload only files with certain extensions by setting the validation property as in the full example below:

{
    "validation": {
        "allowedExtensions": [".jpg", ".jpeg", ".png", ".bmp", ".gif"]
    },
    "showAddFileUrlButton" : true,
    "multiple": false,
    "useFtp": true,
    "uploadDirectory": "folder/subfolder"
}

It is also possible with this component to retrieve files by query and display them. For example to display a list of documents linked to the opened item. To do this, fill in the property queryId with a query from the table wiser_query. If this option is used, it is no longer possible to upload files. This query should contain the same columns as in the example below:

SELECT 
    id AS fileId,
    item_id AS itemId,
    file_name AS name,
    title,
    added_on,
    IFNULL(OCTET_LENGTH(content), 0) AS size,
    extension
FROM `wiser_itemfile`
WHERE item_id = {itemId}

The Grid in Wiser can be used in several ways:

1. As a grid containing all linked items to the opened item (via wiser_itemlink). Within Wiser this is also referred to as 'sub-entities'.
2. As a grid with data from a custom query
3. As a grid with non-predefined properties of a particular item. These properties must fall into a certain 'group'.

It is possible to select rows in a grid and then use 'action buttons' to perform actions with the information from the selected rows. It is also possible to edit data in a grid. This requires some setup. This chapter contains all the information about setting up a grid.

Items that are linked to the opened item via a specific type number can easily be displayed in an overview using this grid. Also, these items can be edited via this grid and new items/links can be added if necessary.

You can set the following things in the options column:

Furthermore, all other settings from Kendo Grid can be used here, except for things that are not valid JSON properties, such as event bindings and the like.

If you want to use a custom query to populate a grid, you can enter that query in the data_query column of wiser_entityproperty. If you use this, among others, the hideLinkIdColumn, hideTypeColumn, hideEnvironmentColumn and hideTitleColumn options are ignored, because you use a custom query to determine which columns to display.

You can also open items from a grid by double-clicking on a cell, of course there can be links to different items in 1 row. Consider this example:

In this example, you want to be able to open both the customer (if you double-click on the customer name) and the invoice if you click on an invoice number, etc. When writing the query, then, for each item you want to be able to open, the name of each column in that query should end with an underscore (_) followed by the name of the entity type (for example, invoice). You also need to make sure that you retrieve the ID column of each entity type (both readable and encrypted). If the user then double-clicks on a cell, it will open the correct item based on that. In the case of double-clicking in the 'amount' column, we also want the invoice itself to be opened, for that purpose a column entitytype is added so that the grid knows what the 'default' entity is that may be opened.

An example query for the above table could be:

SELECT 
   invoices.id AS id_invoice,
   invoices.id.id AS encrypted_id_encrypt_withdate_invoice,
   invoices.number AS number_invoice,
   'invoice' AS entity_type #this is the default entity which will be opened
   customer.id AS id_customer_hide,
   customer.id.id AS encrypted_id_encrypt_withdate_customer,
   customer.name AS name_customer,
   contacts.id AS id_contact,
   contacts.id.id AS encrypted_id_encrypt_withdate_contact,
   contacts.fullname AS fullname_contact
FROM invoices.... etc.

If you want to display data from a non-Wiser/custom table, you don't have to take this into account, and you can name the columns as you like.

If you want to have a column in the dataset but not show it in the grid, you can add the suffix _hide to that column. The full column name will then become 'id_invoice_hide', for example. Of course, you can also set all the column names for the grid manually and thus determine which columns are visible or not.

Items in a grid can also be opened by double-clicking on the row (if no specific ID is known for the cell) or by using the 'open' button in the rightmost column. To do this, however, there must be a column called encrypted_id and entity_type in the query results. If it is not there, the functionality to open items will not work and the button for it will not be visible. This functionality can also be disabled by setting the disableOpeningOfItems option to true.

Note: If you want to enable the functionality to remove links between items, then your query must also contain the column link_type_number (without suffix or prefix, because this is always about the main link). By default, this does assume that the opened item is the destination. Sometimes in a grid you want to show things the other way around, that for example you show all categories to which a product is linked. In that case removing a link will not work by default. To solve that, make sure that the grid's query contains a column named encrypted_destination_item_id_encrypt_withdate with the item ID of the destination as the value. Also, that query should contain the column encrypted_id_encrypt_withdate, which should be the ID of the source.

It is possible to set a grid so that it shows all properties of a particular group from wiser_itemdetail of the corresponding item. For this the property fieldGroupName must be set, no other settings are required.

This is useful for cases where dynamic fields are added by imports, for example. If you do not know in advance what kind of fields/properties an item might have, you cannot add rules for it to wiser_entityproperty. To still make these properties manageable, the grid can be used with this setup.

This is very simple to set up, here is an example:

{
    "fieldGroupName": "test"
}

You can completely control how the columns should be displayed in the grid, so that you don't see the entity type at each column, for example. You can do this by specifying an array of columns in the property columns in the options column of wiser_entityproperty. More information about that array of columns can be found on the Kendo website. An example of options JSON with various column settings can be seen here:

{
    "entityType": "invoice",
    "deletionOfItems": "askUser",
    "customQuery": true,
    "disableInlineEditing": false,
    "columns": [
        {
            "field": "id_invoice",
            "title": "Id",
            "width": "50px",
            "editable": false
        },
        {
            "field": "number_invoice",
            "title": "Invoice number"
        },
        {
            "field": "type_invoice",
            "title": "Type of invoice",
            "template": "#: type_name #",
            "editor": "kendoDropDownList",
            "dataQuery": "SELECT id AS value, type_name AS text FROM custom_invoicetypes"
        },
        {
            "field": "invoicedate",
            "title": "Invoice date",
            "format": "{0:dd-MM-yyyy HH:mm}",
            "editor": "dateTimeEditor"
        },
        {
            "field": "code",
            "title": "Code",
            "values": [
                {
                    "text": "Beverages",
                    "value": 1
                },
                {
                    "text": "Food",
                    "value": 2
                }
            ]
        }
    ]
}

The grid's toolbar can be set via the Toolbar JSON object within the grid's options JSON with the following settings:

Sample settings of a grid:

{
    "entityType": "address",
    "hideLinkIdColumn": true,
    "hideTypeColumn": true,
    "hideEnvironmentColumn": true,
    "hideTitleColumn": true,
    "deletionOfItems": "askUser",
    "linkTypeNumber": 100,
    "selectable": "multiple, row",
    "checkboxes": true,
    "toolbar": {
        "hideExportButton": false,
        "hideCreateButton": true,
        "hideLinkButton": true,
        "customActions": [
            {
                "text": "Set contact person for address",
                "icon": "js",
                "actions": [
                    {
                        "type": "executeQuery",
                        "userParameters": [
                            {
                                "name": "contactName",
                                "question": "Fill in a name"
                            }
                        ]
                    }
                ]
            }
        ]
    }
}

If you want users to be able to edit items in such a grid, you need to fill the grid_delete_query, grid_insert_query and grid_update_query columns with your own queries to edit data in the grid. In those queries, you can then use all the values from the grid's data_query as variables. If users are not allowed to edit data in the grid, you can leave all those queries empty, but you must set the disableInlineEditing option to true.

In all these queries you can also use the variables {propertyKey0} and {propertyValue0}, where the number 0 is then incremented each time for each property/column in the grid. These will then appear in the same order as they appear in the grid. This can be used to create a dynamic query to add everything to wiser_itemdetail, for example.

Note that we have autoSync enabled in grids. Then, when the user clicks on "Add Item", Kendo already immediately calls the grid_insert_query where all columns are set to null. If you have a table with columns that are NOT NULL, then you need to make sure that your query includes default values there using the IFNULL function.

Here is an example of a grid that uses custom queries:

{
    "customQuery": true,
    "disableOpeningOfItems": true,
    "hasCustomInsertQuery": true,
    "hasCustomUpdateQuery": true,
    "hasCustomDeleteQuery": true,
    "columns": [
        { "field": "id", "title": "ID", "width": "50px", "editable": false },
        { "field": "title", "title": "Titel" },
        { "field": "code", "title": "Code" },
        { "field": "item_id", "title": "ItemId" },
        { "field": "datetime", "title": "Datumtijd", "format": "{0:dd-MM-yyyy HH:mm}", "editor": "dateTimeEditor" },
        { "field": "user_id", "title": "GebruikerId" },
        { "field": "username", "title": "Gebruikersnaam" }
    ]
}

Example of data_query:

SELECT * FROM _test_table

Example of grid_delete_query:

DELETE FROM _test_table WHERE id = ?id

Example of grid_insert_query:

INSERT INTO _test_table (code, datetime, item_id, title, user_id, username)
VALUES (IFNULL(?code, ''), IFNULL(?datetime, NOW()), IFNULL(?item_id, 0), IFNULL(?title, ''), IFNULL(?user_id, 0), IFNULL(?username, ''))

Example of grid_update_query:

UPDATE _test_table SET code = IFNULL(?code, ''), datetime = IFNULL(?datetime, NOW()), item_id = IFNULL(?item_id, 0), title = IFNULL(?title, ''), user_id = IFNULL(?user_id, 0), username = IFNULL(?username, '') WHERE id = ?id

We also created custom column types with additional settings. This section explains more about them.

Dit is een kolom die een balk toont met een voortgang. Om hier gebruik van te maken moet je eerst zorgen dat de data voor deze kolom altijd een getal bevat. Then, for the column, you need to fill the property template with this: <div class='progress'></div>. Then a default progress bar is created. You can then set some more options here:

Create the property progressBarSettings, which is an object with the following properties:

• maxProgress: Allows you to set the maximum value of the bar. By default, this is 100.
• progressColors: This is an array in which you can set colors. Each color has these options:
  - max: Only values less than or equal to this value get this color. These are then sorted in descending order. So for example, if you add a color red with max 100 and a color green with max 50, all lines with a value between 51 and 100 will get a red color and everything of 50 or lower will get a green color.
  - background: The HTML color for the background.
  - border: The HTML color for the border of the bar.

Example of grid settings with a progress bar:

{
    "customQuery": true,
    "disableOpeningOfItems": true,
    "hasCustomInsertQuery": true,
    "hasCustomUpdateQuery": true,
    "hasCustomDeleteQuery": true,
    "columns": [
        {
            "field": "id",
            "title": "ID",
            "width": "50px",
            "editable": false
        },
        {
            "field": "progress",
            "title": "Voortgang",
            "template": "<div class='progress'></div>",
            "progressBarSettings": {
                "maxProgress": 100,
                "progressColors": [
                    {
                        "max": 10,
                        "background": "#8EBC00",
                        "border": "#8EBC00"
                    },
                    {
                        "max": 75,
                        "background": "#FF952B",
                        "border": "#FF952B"
                    },
                    {
                        "max": 100,
                        "background": "#FF0800",
                        "border": "#FF0800"
                    }
                ]
            }
        }
    ]
}

This is a field that allows rich content to be managed through a WYSIWYG editor. HTML can also be worked with via the source tab. Like all other fields, you can use all options that Kendo offers by default. As well as the various tools you want to make available in the editor. All of Kendo's standard tools are available here, along with some additional tools offered by Wiser. The tools from Kendo can be entered as a string (with quotes), but the additional (Wiser) tools cannot. So for example, for a standard tool you add this to the array: "bold", but for a Wiser tool you enter that without quotes: imageTool. Here is a list of our own created tools:

There is also the option mode that allows you to determine default sets of tools. These are the possible options:

By default, an HTML editor is simply displayed inline. It is possible to set it to show only a button. This button then opens a new window in which the html-editor is displayed. To activate this operation, you can set the property buttonMode to true.

With mode 99 by default there is a small button in the editor for a content builder. By default, this button doesn't really stand out. If you want it to stand out more, you can set the contentBuilderMode option to notable, then it will appear at the front of the toolbar with text attached.

Example options:

{ 
    "mode": 2, 
    "buttonMode": true,
    "allowAbsoluteImageUrls": false,
    "contentBuilderMode": "notable"
}

While saving, a number of things are modified in the HTML of an HTML editor so that it will work properly on the website. One of these things is that, if the system object from table (easy_objects) wiser_save_images_relative is set to true, the main domain of the website is removed from the URL of all images, so you get relative paths for images. However, you don't always want this, even if you have that option turned on. With an e-mail template, for example, you never want this, because then the images in the e-mail won't work. In such a case, you can turn this off in a specific HTML editor by setting the option allowAbsoluteImageUrls to true in the options of the field.

This component allows an iframe with a dynamic URL to be placed on an item. A query can be entered in the data_query column and a URL in the default_value column. The URL can then contain variables that are then replaced with the results of the query. Any column that is returned from the query can be used in it. If the query returns multiple records, only the first record is used and the rest are ignored.

Note that the website you are trying to load into the iframe here must allow external loading and must also be accessible via SSL (httpS).

Example query:

SELECT 123 AS test1, 'abc' AS test2

Sample URL:

https://www.yourdomain.com/test/?value={test1}&anothervalue={test2}

The final URL loaded into the Iframe is then:

https://www.yourdomain.com/test/?value=123&anothervalue=abc

This is the same kind of component as File-upload, but with a different template and default validation. Therefore, see also the file-upload section above for possible additional settings.

With image uploads, the option filesCanBeAccessedPublicly is set to true by default, because images usually should be. If this is ever not the case, make sure you set this option to false on the corresponding image-upload field. See the File-upload chapter for more information of what this option does.

Additional image-upload properties for the option field:

This is a default 1-line text field.

It is possible to set this input-box to contain a url. This can be done by setting the value type to url in the options field. An extra button will appear next to the text field which can be clicked to open the entered link. It is also possible to add a prefix and suffix. The prefix is something that is added at the front of the URL before opening and suffix is added at the back of the URL upon opening. Example:

{
   "type": "url",
   "prefix": "https://www.yourwebsite.com/",
   "suffix": "?opened-from-wiser=1",
   "skipOpenUrlDialog": false
}

By default, when the user opens this URL, a question is asked whether they want to open the link within Wiser (in an iframe in a Kendo Window), or in a new window (new tab in browser). This question can be disabled by setting the skipOpenUrlDialog option to true. It is recommended to set this option to true if there are links to internal websites in the field in question, because many websites are protected against loading within an iframe from another domain.

Furthermore, it is also possible to set that the corresponding item is saved as soon as the user presses enter in the field. To do so, set the saveOnEnter option to true.

This is a field showing a tree structure including checkboxes of available items. This allows the user to quickly create links to items in the tree by checking the checkboxes. The selected items are also displayed in a grid.

You can set a number of things in the options column:

Example of settings for an item linker:

{ 
   "moduleId": 600, 
   "linkTypeNumber": 101,
   "entityTypes": ["relatie"]
}

This field allows you to display an information of items to which the opened item is linked. This information is not directly editable, but which clickable. When you click on it, a new window opens with the linked item.

You can set the following things here in options:

Example of settings for linked item:

{
    "entityType": "relatie",
    "linkType": 2,
    "template": "{itemTitle} - {city}"
}

This type of field basically works exactly the same as the Combobox, with the difference that here the user can make more than 1 choice.

A multiselect can also be used in another form, namely as a group of checkboxes. For this, there is an option called mode (which you can set in the options column) that you can give the value checkBoxGroup.

<TODO: image here>

The image in the top (header) bar can be set using the options mainImageId or mainImageUrl. With mainImageId an ID from wiser_itemfile can be entered and with mainImageUrl a fixed (external) image can be entered.

The different options shown can come from different sources. This works the same as for a single-select combobox field, see that documentation of the Combobox for more information.

For the multiselect there an extension, namely to indicate which image should be shown for each checkbox. This can be done in several ways:

1. It may be a URL. The dataSource must then contain a property imageUrl containing the URL to the image. This must be a full URL.

2. It may be a specific image from wiser_itemfile. The dataSource must then contain a property imageId containing the ID from wiser_itemfile.

3. It may be an image associated with an item. The dataSource must then contain a property id (which was required anyway for the component) containing the ID from wiser_item. Then there must also exist a property imagePropertyName containing the value from the property_name column of the wiser_itemfile table of the desired image. This property can be set in the dataSource per item, or globally in the options-value of the field.

Example settings:

{
    "entityType": "PaymentMethod",
    "searchEverywhere": true,
    "mode": "checkBoxGroup",
    "mainImageUrl": "https://yourwebsite.com/image.png",
    "imagePropertyName": "icon"
}

This is a field where you can enter a number/number. This can also be used for prices, percentages or other numeric formats. Examples can be found in the Kendo documentation.

Some examples:
Price/Currency: { "decimals": 2, "format": "c" } shows € 12,50
Percentage: { "decimals": 0, "format": "# \\%" } shows 10%
Weight in kg: { "decimals": 2, "format": "#.00 kg" } shows 50,12 kg

This type of field can be used for values that need to be stored securely. For example, you can use this for storing passwords. Here you can choose whether the value should be stored as hash or encrypted.

You can set the following things in options:

This field type allows you to display a calendar/scheduler with appointments. To display the correct data in there, you must enter a queryId in the options, of a query that is in the table wiser_query. This query should then return the following columns:

A calendar can also have resources, which are for example meeting rooms, people or cars, so it can be anything. An appointment can have multiple resources associated with it. To retrieve resources dynamically, you can use the resourcesQueryId option, which should contain the ID of the query in wiser_query. This query should return the following columns:

Furthermore, you can also use all the settings described in Kendo's documentation.

This is a standard text field that can contain multiple lines. You can specify the type of text here. If you set nothing, it will be a default text field, if you set something, CodeMirror will be used. You can set this in the property type and you can set one of the following options:

• css
• javascript
• mysql
• xml
• html
• json

Example option field:

{
   "type": "mysql"
}

Getting your data from your own table; You can do this by entering your own query in the column data_query. The only requirement for this query is that it must contain two columns: id and name. The id column should contain the value to be stored in the database and the name should contain the value the user sees in Wiser. The id and name may contain the same value. Examples:

SELECT id, name FROM easy_items ORDER BY name DESC;

You can use the ID of the opened item in this query, by using the variable {itemId} in the query.

SELECT id, name FROM available_colors WHERE productId={itemId};

It is possible to use additional data from this query to populate other fields of the item (on which this combo box is located) when someone selects a value in the combo box. To accomplish this, you must retrieve additional information in the query and use the property linkedFields in the options. That property should then contain an array of all fields linked in this way. The query must then contain columns with exactly the same names and the item must then, of course, also contain fields with those names. With the property overwriteExistingValues you can indicate whether the values of the query of the dropdown should be taken over even if the fields on the item are already filled. This defaults to false, which means that only fields with no value are automatically filled.

An example query and JSON of this is then this:

SELECT
    i.id,
    i.title AS name,
    id1.`value` AS Address,
    id2.`value` AS Zipcode,
    'US' AS Country
FROM wiser_item i
LEFT JOIN wiser_itemdetail id1 ON id1.item_id = i.id AND id1.key = 'Address'
LEFT JOIN wiser_itemdetail id2 ON id2.item_id = i.id AND id2.key = 'zipcode'
WHERE i.entity_type = 'customer'
AND i.removed = 0
ORDER BY i.title ASC

{
    "linkedFields": ["Address", "Zipcode", "Country"],
    "overwriteExistingValues": true
}

Furthermore, you can also use the ID of the opened item in the query, by using the variable {itemId} in the query.

The 2nd option to populate the data in the combo box is to display a list of all items of a particular entity type. You can do this by populating a JSON object in the options column with the following properties:

Example:

{
    "entityType": "customer",
    "searchInTitle": false,
    "searchFields": ["firstname", "lastname"],
    "searchEverywhere": true
}

The third option is to populate the list with fixed values by overwriting the dropdown's dataSource in the options column. Example:

{
    "dataSource": [
        { "name": "Male", "id": "1" },
        { "name": "Female", "id": "2" },
        { "name": "X", "id": "3" }
    ]
}

You can also show a list of all users who can log in to Wiser, for the given client. You can show all users (by leaving out or empty userTypes) or only users of one or more types (by entering an array of values in userTypes). You can also select the logged-in user automatically, by filling the property value with "{userId}". Example:

{
    "dataSource": "wiserUsers",
    "value":"{userId}",
    "userTypes": [ "administrators"]
}

You can set the property "dataSelectorId". In it, you then enter an ID of a Data Selector from wiser_data_selector. That data selector is then executed and the combobox is filled with the result. With dataTextField you can set which property contains the text value to be shown in the combobox. Example:

{ 
    "dataSelectorId": 7, 
    "dataTextField": "lastname" 
}

For combo-boxes and multiselects, you can set that the selected values should be stored as a link in the wiser_itemlink table instead of a value in the wiser_item detail table (which is default). To do this, you need the settings below, which work for all of the above options, as long as from them comes an ID that exists in the wiser_item table.

Note! Always make sure that you define unique values for linkTypeNumber that are not already used by other fields!

It is also possible to set up that users can create new items at a combobox field. If this is set, an extra button will be visible to the right of the combobox, which will open a screen to create a new item. After saving, the combobox will automatically refresh and the new item can be selected immediately.

To set this up, the subobject newItems must be added to the options. That object will then have the following properties:

Example:

{ 
    "entityType": "branche",
    "searchEverywhere": true,
    "newItems": {
        "allow": true,
        "parentId": 14,
        "linkTypeNumber": 1,
        "entityType": "branche",
        "moduleId": 700
    }
}

To allow users to open the selected item directly (in a new window), the allowOpeningOfSelectedItem option can be set to true. In addition, the query that retrieves the data must also contain the columns encrypted_id and entity_type.

This button becomes visible only if a value is also selected in the dropdown.

Allows you to display a timeline of events (date related items).

You can set the following things here in options:

To display data, you must enter a queryId in the options, of a query that is in the table wiser_query. This query should then return the following columns:

Verder kun je ook alle instellingen gebruiken, zoals die omschreven staan in de documentatie van Kendo.

Sample settings for timeline:

{
    "entityType": "offerte",
    "queryId": 2,
    "eventHeight": 300,
    "disableOpeningOfItems": false
}

This allows a QR code to be generated and displayed directly. A query must then be entered in the data_query column with the value of the QR code. This can be a URL or plain text.

Furthermore, the following options are available:

For each field, you can execute custom JavaScript that applies only to that specific field. For example, this can be used to adjust the value of field Y based on a change in field X (such as automatically filling in street name after entering zip code and house number).

These custom scripts can be filled in the table wiser_entityproperty in the column custom_script. The script you then enter here is always placed below the default script for that type of field. In the case of fields where data is loaded asynchronously (such as grids and combo-boxes), the custom script is executed only after that data is loaded, so you then also have access to a fully populated field.

In your script, you have access to a number of standard variables. The first variable is field, which is the HTML element of the field in question and is available in all cases. The second variable is kendoComponent, this is available only for fields that use kendo. These are almost all fields except input, textbox, checkbox and radiobutton. This variable contains the instance of the corresponding Kendo component and so you can use all functions and properties of that Kendo component (which can be found in the Kendo documentation). The last variable you can use is options, it contains all the settings you have filled in wiser_entityproperty in the options column and any default settings for that field type. This variable is available for all fields that use Kendo.

Hereby some examples of custom scripts:

Input field that modifies another input field:

field.change(function (event) {
    console.log("{title} changed", event);
    $("#field_289").val("Hello world" + field.val());
});

A Kendo combo box that adds value to a Kendo HTML editor:

kendoComponent.bind("select", function (event) {
    console.log("{title} changed", event);
    var id = 0;
    var name = "";
    if (event.dataItem) {
        id = event.dataItem.id;
        name = event.dataItem.name;
    }

    var editor = $("#field_155").data("kendoEditor");
    if (!editor) {
        return;
    }

    editor.exec("inserthtml", { value: "Another value was selected: " + id.toString() + " - " + name + "<br>" });
});

An example for looking up address + place based on zip code + house number:

var findAddress = function (changeFieldValues) {
    var container = field.closest(".dynamicTabContent");
    var otherField = container.find("[data-property-id='386'] .textField");

    var zipCode = field.val();
    var houseNumber = otherField.val();

    var zipCodeFieldContainer = field.closest(".item").removeClass("error");
    var houseNumberFieldContainer = otherField.closest(".item").removeClass("error");

    if (!zipCode || !houseNumber) {
        zipCodeFieldContainer.addClass("error");
        houseNumberFieldContainer.addClass("error");
        return;
    }

    $.ajax({
        url: dynamicItems.settings.dataUrl + "addressinfo.jcl?trace=false&ombouw=false&zipcode=" + zipCode + "&housenumber=" + houseNumber
    }).done(function(result) {
        if (!result) {
            zipCodeFieldContainer.addClass("error");
            houseNumberFieldContainer.addClass("error");
            return;
        }
        
        if (!result.streetName || !result.placeName) {
            zipCodeFieldContainer.addClass("error");
            houseNumberFieldContainer.addClass("error");
        }

        if (!changeFieldValues) {
            return;
        }

        container.find("[data-property-id='55'] .textField").val(result.streetName);
        container.find("[data-property-id='66'] .textField").val(result.placeName);
    });
};

field.change(function (event) {
    findAddress(true);
});

findAddress(false);

Fields can be made interdependent in Wiser. This means that something happens to a field as soon as the value of another field meets certain conditions. These dependencies can be managed in the table wiser_entityproperty through the following columns:

Here you can enter the property_name of the field that this field should become dependent on. You can also enter the display_name if the property_nameis empty.

Here you can determine what to do with the field. By default, the action toggle-visibility is used. These are the possible actions:

This only applies when the toggle-visibility action is used. Here you must then fill in how to compare. One of the following options can be used here:

This only applies when the toggle-visibility action is used. Here one or more values can be entered (comma separated, without spaces after the commas) with which to compare. The way this works depends on the operator; for example, if the operator is eq and several values are entered here, this field is only displayed if at least one of those values matches. If the operator is neq, the field will be shown only if none of the values match. This works the same way for all other operators.