The Color Picker widget allows the user to select a color using a color picker and returns the hex color code. This hex value can then be used for other uses in the project by saving it to a field, as almost all color properties work with hex codes.

Properties

General

Behavior

The conceptset image selector widget allows you to make a selection in a set of concepts. This works by using a multi-select field and shows the images added to the concept properties.

Properties

General

Behavior

Appearance

The multi-file upload widget allows you to upload multiple files of different file types simultaneously, facilitating the addition of a list of files to the WEM project. The widget first packages the files into JSON, which can then be imported into your application.

In the image above, you can see the widget as shown on the client side of your project. It consists of a large drop-off field and a select file button. This opens a standard upload file explorer window.

Properties

Appearance

How To

The process begins with the interaction node, here the widget is displayed for the user. The first step is adding an exit that the widget can utilize for the processing and establishing a text field to store the uploaded information until all files are incorporated into the database.

Unlike some other widgets, this one has a few important steps before you can use it. This widget turns the uploaded files into JSON that needs to be handled after the upload. After creating the interaction and adding the widget, you need a process to add the files to your database.

Initially, we proceed by finalizing the datalist and fields employed by the widget. In the accompanying image, you observe the creation of a list named "files," comprising, at a minimum, the "file" field, and optionally, the "name" field and the "New File" boolean field (defaulting to true). Upon file upload, it is assigned a generic name by default, generated by WEM; however, this can be replaced with the original file name, as demonstrated in the image below.

All necessary fields are now created and we finish the process of handling the documents and storing them in the files list. This is done with the import JSON node, and optionally extended with a loop to replace the generic WEM names. In the image below you can see how we set up the Import JSON definition:

The files list used in the image above is the same list we made earlier with the name field and file field from that list. This will add a new row for each file uploaded and store the original name in the name field.

After adding a save node to the flow all files are saved in your datamodel and can be handled further for any use case you can think of.

Extra: Depicted in the initial flowchart image, there is a loop featuring the "rename file" and assignment node. The loop is configured to iterate over each row where the "New File" field is true, and within the loop, this field is set to false. The "rename file" operation utilizes the "name" field from the "Files" list as the New Name property, and the File field from the same list serves as the File output.

Following this, by incorporating a save node and interacting with a data grid associated with the "files" list, immediate visualization of the results becomes possible.

The process arrow steps widget shows a set of completed and uncompleted 'steps' based on a concept set. This widget is to show a progress in your interaction flow and should be handled as a informational panel not buttons or tabs.

Properties

General

Behavior

Appearance

Change the value of a number datafield using a star rating widget. Similar to the 'Rating view' widget. This widget can be used to change a number datafield. However, it cannot be used to display custom rating icons and uses stars.

Properties

This widget shows a set of options displayed as buttons based on a concept set, allowing a single button to be active (single select). This widget provides a excelent way to make filters that can only have one option selected and using the dynamic labels.

Properties

The Google maps Locator

Shows one icon (marker) on a Google Map, based on a latitude and longitude value. This widget does not provide travel information and does not support multiple markers, it simply displays one location on a map. For travel information you can use the 'Google Maps - Directions' widget. To display multiple markers you can use the 'Google Maps - Markermap' widget. Demonstrations of both widgets are coming soon.

Properties

General

Behavior

Appearance

The Toggle Switch Widget is a user-friendly component that allows for easy toggling of boolean values. With smooth animations and customizable text, it provides a sleek and interactive solution for controlling settings and preferences.

Properties

The Slider Widget is a component designed for easy manipulation of numerical values within your application. By simply dragging the slider handle, users can conveniently adjust numeric inputs with precision.

Properties

Introduction

With this widget you can get an “explorer”-like tree view to control your application content, you use the "Tree" Widget . The Tree Widget can be seen as a clickable table of contents (TOC) with a mother-child structure. When you click on a tree item, the corresponding content appears. When a tree item contains sub-items (children), it can be unfolded and folded by clicking on the item.

Main features of the widget

• Stores and displays mother-child relations in a "explorer"-like tree view

• Fold and unfold tree items with children

• Stores a selected tree item in a temporary data field (data type = Reference), so you can use it as a pointer

Properties

Example

Data-model

In this example we show how to set up a simple tree view in an interaction node. The tree will have a steps before you can properly use them. This tree will consist of folder items and attachments shown with different icons in the tree. The tree becomes powerful when you have it automated more but this example will show a simple set up.

The first step is the datamodel.

1. Add for the different tree items the different icons. In this case "Icon folder" and "Icon WEM". Icons of 16 by 16 px work best.

2. Add a concept called tree types, and add a icon property to the concept. When that is done you can add the "folder" and "attachment" concept with the right icon as property.

3. Now we get to the datamodel here you make a list for the tree items and a session field reference to the datamodel list with tree items. When this is done you add the following fields to the Tree items list:

   • Parent ID (reference to this list)

   • ICON (file)

   • Label (text)

   • NumChildren (number)

   • Rootnode (boolean)

   • Type (concept set Tree types)

Flowchart

Next up is making the flowcharts and add the interaction nodes.

1. Make a flowchart where we are going to set up the tree view.

2. Add a Tree main interaction node, this is where we are going to show the tree.

3. Add an exit for to add items, remove items and one to edit the items.

4. Now we add a list node that adds a row to the tree data lists made in the previous steps, and connect the add item exit from the main interaction node.

5. We will also add a interaction overlay node for editing items, a decision node that chooses a icon and a list node to delete items not wanted anymore.

6. Connect everything up like in the image below:

The Widget

Next step is setting up the tree view and the screens in the interaction node.

1. We begin with the main interaction node with first the tree widget, a data grid with the tree items to visualize what we do and a button to add items.

   • Match the data-list items to the three widgets properties and set the behavior on refresh screen.

   • Set the data-grid with all fields

   • The buttons uses the add item as exit.

3. At last add a save button with a exit that goes back to the main interaction node with the tree widget and add a save node if you want save the items to the database.

4. Start preview add items to your tree and see the result

The Multi-Select Input Button Widget allows users to choose multiple options from a set of interactive buttons. With its intuitive design and flexible functionality, it provides an efficient solution for interaction nodes that managing filters with a lot of optios.

Properties

Similar to the 'rate' widget. However, this widget is view only and does not require a datafield. It cannot be used to change values and is just a visual representation of its score. The widget uses files as for the active and inactive icons, you can find the files used in the image below here.

Properties