Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
If you want to use calendar or date and time functionality within you applications you can use different calendar widgets depending on the desired functionality. WEM offers a calendar, agenda and timeline widget.
The Calendar widget can be used when you need a date selection picker as a start of your functionality. The Calendar widget displays a graphical view of a calendar and stores the selected date to use in your application. The Calendar widget also indicates if there are records stored on a date.
Minimal required properties:
Selected Date, should be a valid date-field from Data model (not from a list) AND must be initialized as it determines the first month to display and day to highlight;
List of events with at least one date field, to determine whether a day should be highlighted and active;
The date-field in the Events list to match the day on calendar with.
We are going to explain the use of the Calendar widget by using an example. In this example we are going to create a simple to do list for a day. When a user clicks on a date in the calendar widget, a to do list appears.
Before you start you will have to prepare 2 items:
The widget needs a database list that contains at least 1 date field (data type = Date)
A temporary date field (date type = Date) to store the selected date.
Note: the temporary date field must be outside the database list of the widget! Be sure that the temporary date field is initially filled with a value (for example the current date).
Create a database list and temporary field
Create a database list To do with two fields:
Date (Date type = Date)
To do (Date type = Text)
The database list should look something like this:
Next create a temporary field. Put a single data field with the name “Selected date” and data type Date outside of the To Do list so it is a temporary/transient field.
Open the flowchart editor and drag and drop a blue interaction node on the canvas, name it “Calendar”, to set an initial date for the temporary field we are going to use a green assigment node in our flowchart. Drag and drop a green assigment node (or the selected date field) on the canvas between the start and interaction node. Next select the temporary “Selected date” field and change the node property action into Advanced and use the Date function Today() as the operand.
Double click on the user interaction node to open the template editor. Before placing the Calendar widget in the template, first place a adaptive column on the canvas. This is for layout reasons, because we also want to place a datagrid next to the calendar later on.
Now place the Calendar widget in the left column.
Select the Calendar widget by clicking it once. Now you can configure the all the Calendar properties:
First connect the database list to the widget. Click on the Event list property in the Properties pane on the right side of the screen. Select the database list “To do” (or drag the list to the property).
Next select the date field in the database list by clicking on Event date. Select the “Date” field from the “To do” database list.
Next select the Selected date (by user) property. This is the property that stores the selected date from the widget. Select the temporary field “Selected date”.
Change the On click action property into “Refresh screen”
Click on preview to check your calendar.
Now we are going to display and manage the To Do activities on a selected date.
First we are going to show only the To Do activities for the selected date by filtering the database list:
Double click on the “Calendar” user interaction node to open the template editor
Select the “To Do” database list and place the datagrid in the right column.
Create a new filter on the datagrid by right clicking the filters folder and selecting new filter and enter the filtername: “Selected date”
Enter the following filter condition: [ToDo.Date] = [Selected date]
Add the filter to the datagrid.
Next we are going to create new To Do activities for the selected date:
Drag and drop the To do list node on the canvas and select add row.
Open the Calendar interaction node and add a button in the top right column. Name the exit “Add To Do”
Connect the green list node to the “Calendar” user interaction node and select the “Add To Do” exit
Drag and drop the Date field to after the add row list node, select the assignment option, set the property action to “Advanced” and select the temporary field “Selected date” as the operand
Drag and drop a user interaction node and create an entry form for the database list “To Do”. You can show it as an overlay and set the overlay title as an expression: “To Do for”+” “+[Temp.Selected date]
You can finish the entry form with two exit buttons (Cancel and Save) and show them in the button bar. Connect the button exits to a Save and Discard all changes node
The result should look something like this:
The Gridwidget is a very dynamic widget for creating a table or grid in you interaction node. This widget can be used for overview planner in a hr application, show availability for specific products, keep track of projects and a lot more. The widget works as a table with columns and rows and a grid that exist of coordinates made of a reference to the row and column. This gives you a lot of flexibility and adaptability in what is shown as rows or columns dependent on user for example. The downside of this flexibility is that this widget is not the easiest to set up. In the image below you can see a mock-up of a planner.
moet ik hier de button exit of flowchart exit als prperty echt toevoegen? onnodiglange table. flink kan je hier een comment achter laten ben nieuwsgierig wat jij vindt.
Most of the following properties are to set a color, for widgets most css color notations are accepted for example rgb(a), hexadecimal, hsl, and text. For a list of named colors you can visit this page.
In this tutorial, we will explore the grid widget. The use case will be used to walk you through every step to get a basic version of the widget in use.
In the this case, the widget is used as an office planner and work location scheduler. As the rows, we want a list of employees, and we want to see the days of a month for the columns. The best way to decide what you want as a row or column is to consider the number of cells; from 10 to about 30 entries will easily fit as columns, everything above or below that can work better as rows.
For cell information, we want to use colors to show details like availability and work location. In this case, we don't want too much information in the cells. When using colors you typically don't want additional text in the cells, it can keep the planner easier to read. The best way to start using this widget is first setting up the data model, followed by building the flowchart and the pages and Setting up the widget itself is one of the last steps.
This widget requires at least three data lists to function properly. Images of the results can be found at the end of this list.
To set the columns, we require a list—in this case, simply named 'columns' with the following fields:
Day (numeric field)
Day of week (tekst field)
For the rows, we want to use our employees with the fields:
Name (tekst)
(optional) Department (single-select)
The last list is for keeping track of the cells and needs at least the following fields:
ColumnRef (reference to the columns list)
EmployeeReef (reference to the employee list)
Content (text field)
Optionally:
Cell Color (text)
Date (datetime)
ToolTip (text)
Cell text color (text)
Cell background color (text)
There are also a few transient/session fields needed to keep track of selected information:
ColumnRef to keep track of the selected cell column (reference)
EmployeeRef to keep track of the selected cell row
ClickedOffset to keep track of the amount of selected cells, together with the Reference fields tells you wich cells are selected. (number)
Inputdate for the selected start date or current date (datetime)
We will also be using a counter (number field) to keep track of a number of loops for making the columns for example.
How you handle the data and prepare the lists used in the widget is depends on your use case. There are two main options: either you specifically prepare the data every time the grid is shown, or you prepare and update the data whenever the underlying data changes. If the grid changes multiple times every day, it is worthwhile to have the planner calculate up-to-date data each time. This helps in keeping the main lists small. If you have a planner that doesn't change much or shows most of its data every time, it can be worthwhile to keep it always ready and avoid recalculating it.
In this example case, we will have the data calculated every time the planner is shown. However, this may not be the best approach for your specific case. This is not a real planner in use and is made as an example case not to be used 1:1.
The employees are already added to the system. In this case, we have 8 employees and a name for each employee. These will be the 8 rows of our grid. It is important to start with the row and column lists, as that will enable us to use the references for the grid-cell list. Creating the columns is going to be more interesting. Since the maximum number of days in any month is 31, we will need to create at least 31 columns. For shorter months, we will use a filter to always show the correct number of columns depending on the displayed month. We will use a counter to keep track of the days we added and for each loop we do we fill in the number for the day in the month and the "day in week" field. You can see what this looks like in the images below, along with the expression used to find the Day of the week.
With the columns and row lists created and filled in, we now have everything we need to make the cell content flow. The functionality of this flow depends on the source of the data, how the grid is built up/prepared, and what you want it to display. In this example, we fill the content of the cells with random information use a straight forward way of filling the cell content but will still show the functionality.
When building this flow, it is important to consider what your data represents and identify the key information around which the other lists revolve. In this case we have a list of employees with each a different schedule and planning, the other axis is a lot of days that are the same for every employee depending on the month. This means it is more convenient to go through the planning for each employee before moving on to the next one because we can use the same flow for each employee. While it can be done the other way around, this approach is more logical and easier.
In the first node, you can see that we have the Employees list that we loop through, performing an action for every column cell in that row. If you don't want to show all information in the widget, you can use filters on these loops to avoid setting up unnecessary data. Additionally, you can reuse the same filters for the grid widget. Image 1.7 shows a Random Number assignment, which is used to generate differentiated mock data for the widget. Alternatively, you can use a 'go to row' that utilizes a combination of the date and employee to find the specific schedule information for that employee. With the next multi-assignment node from the image, you can then fill in the fields of the Grid-content list. Below, you find Img 1.8, showing the assignment node. Here, you can see the Column Ref and Employee Ref set to the current row, representing the 'coordinates' of the cell.
In this scenario, we utilize a random number generated earlier to determine the type of cell content to display, with an exception for weekends where we opt for a specific set of content. The expression below illustrates how we establish the colors for each cell.
We have one flowchart remaining—the main widget flowchart. This flowchart prepares the data and includes the interaction screen with the widget. Initially, there's a sub-flowchart named 'CleanUp,' designed to remove old data in the cells and columns list used by the widget. Subsequently, we incorporate the flowcharts we created as sub-flowcharts: first, the one for columns and optionally rows (in this case, we already have employees). This is followed by the Grid Content flow and concludes with an interaction node.
Now, we can finally begin using the actual widget, setting up its properties, and designing the interaction screen. For this demo, we will create and configure the widget and also establish a legend. The design of the page around it is entirely open to your imagination.
To start, add a panel with the header enabled. Here, include a table with one row and 12 cells/columns, each with the following sizes from left to right: 20px, 100px, 180px, 5px, 180px, 5px, 180px, 5px, 180px, Unknown/empty, 180px, 180px. After adding labels for each color and updating the cell columns, it will look like this:
Columns: in this field we want to let the widget know how many columns we want to show, as this is not always all the 31 rows we are going make a filter to only show the columns needed for the current month. (There are 2 locations you can use this filter, in the column field or as filter on the columns loop in image 1.5/2.2 & 1.7) In this filter we use the Inputdate to calculate the amount of columns needed in the current month and drag the filter to the columns field.
Column label: Show the day number as the label of the column using the expression ToString([Gridwidget.Columns.Day]).
Column Highlighting: Use datepart(Now(), day) = [Gridwidget.Columns.Day] to highlight the current date.
We set Use extra column label on true, and use [Day of week] columns list as label.
Rows: Use the [Empoyee] list with [Employee.Name] as row label.
Content: If we only have the cell content for the current month created you can put the whole list [Gridcontent] in this field, otherwise you can use a filter to show the content for this month, for example.
Cell Content: Use the field [gridcontent.Content] for the text you want to display in a cell. leave it empty ("") to have no text content. The Cell content cannot be empty; however, the tooltip can for the tooltip you can use [gridcontent.tooltip].
Cell column reference: Here you place the Gridcontent's reference to the column field; [gridcontent.ColumnRef]
Cell row reference: Here you place the Gridcontent's reference to the row field [gridcontent.RowRef]
Cell Backgroundcolor: [Gridcontent.CellColor]
Allow multiselect of cells: Set to True initially, even if multiselect is not desired. This allows filling in the required field [ClickedOffset]. You can then disable multiselect.
Clicked cell column reference: Use ColumnRef outside of the list. It's a transient field used to keep track of a clicked cell for the current session only.
Clicked cell row reference: Use RowRef outside of the list. It's a transient field used to keep track of a clicked cell for the current session only.
The actions taken when a cell or row is clicked can be customized, for example, to show an overlay with date information or employee details, execute a flowchart, navigate to a specific item or refresh the screen.
Note: This is a basic use case, and most customization options are untouched. The way you use these properties allows you to make the grid responsive and can be tailored to your specific environment. These settings are optional, and the widget can be used with the configurations outlined in this guide. Feel free to explore the Appearance properties listed earlier to discover additional customization possibilities.
In the resulting image, you can observe a dynamic grid showcasing employee schedules and work locations. The left side features rows with employee names, while the top displays the abbreviated day names and day numbers of the month, spanning 31 columns representing January.
The cells are color-coded, with blue indicating office presence, green for working from home, and orange for being out of the office. Weekends are elegantly highlighted in grey. This grid serves as a versatile tool, ideal for applications such as HR planning, product availability tracking, and project management.
The accompanying panel header includes a legend, clarifying the meanings behind each color. This visual representation is a testament to the flexibility and adaptability of the Gridwidget, capable of meeting diverse needs in various contexts.
Allows users to listen to audio files in a interaction this can be a file they upload or a file set up by the developer.
Properties
| Property | Data Type | Description |
|---|---|---|
A user can use this widget to draw a signature (or basically anything else) on a canvas. The widget generates an image and stores it in a datafield<file>. All other widget properties have default values and may be left blank.
Properties
| Property | DataType | Description |
|---|---|---|
Behavior
Appearance
Unleashing the Power of a Kanban Board Widget
There are 2 versions of the Kanban Board widget:
Kanban board (the original, first version) > does not support drag&drop
Kanban board DragDrop > new version, supports Drag & Drop and Double-Click.
For the Drag&Drop widget, a demo is accessible at: https://kanban-widget-demo.staging.wem.io/ This project is also available in the App Store in MyWEM, so you can get a copy of this working example project to play with in your own workspace.
The kanban board is a visual project management tool used to track and visualize work in progress. The board typically consists of columns representing different stages of work, and tasks- or work items which are represented by cards that move across the columns as progress is made. By providing a clear visual representation of the workflow, a kanban board helps teams visualize their work, identify bottlenecks, and promote collaboration and efficiency. In the following image you can see the kanban widget used for a ticket management system.
| Property | Datatype | Description |
|---|---|---|
| Property | Datatype | Description |
|---|---|---|
| Property | Datatype | Description |
|---|---|---|
| Property | Datatype | Description | Required |
|---|---|---|---|
| Property | Datatype | Description | Required |
|---|---|---|---|
| Property | Datatype | Description | Required |
|---|---|---|---|
Now, add the widget to the panel body, located in the widget library 'widget' and named . Once placed, you'll receive an alert prompting you to fill in the required properties. Fortunately, we've already completed most of the other work, so we have almost all the necessary properties ready.
| Property | Data Type | Description |
|---|---|---|
| Property | Data Type | Description |
|---|---|---|
| Properties | Datatype | Description |
|---|---|---|
| Properties | Datatype | Description |
|---|---|---|
| Property | Datatype | Description |
|---|---|---|
| Property | Datatype | Description |
|---|---|---|
| Property | Datatype | Description |
|---|---|---|
| Property | Datatype | Description |
|---|---|---|
| Text Input | Result |
|---|---|
| Property | Datatype | Description |
|---|
| Property | Datatype | Description |
|---|
| Property | Datatype | Description |
|---|
| Property | Datatype | Description |
|---|
| Property | Datatype | Description |
|---|
| Property | Datatype | Description |
|---|
Events list
List, Required
The source list containing dates of events. Can be empty (no data) but should exist with at least one date-field.
Event date
Date, Datafield
The field in the event list containing the date to match with the Calendar display.
Event background color
Text, Expression
Color code for day that has Events in the List. Either use a bootstrap context such as "success", "danger", "info" or "warning". Or a CSS color value, for example: "red", "#ff0000" or "rgba(255,0,0,0.80)". Default: "info".
Event text color
Text, Expression
Changes the color of the event-text. Either use a bootstrap context such as "success", "danger", "info" or "warning". Or a CSS color value, for example: "red", "#ff0000" or "rgba(255,0,0,0.80)". Default: "info".
Event is disabled
Boolean, Expression
When day has events, day is disabled. Default false
Selected date
Date, Datafield
The date that is selected by User, when clicked on date in calendar. MUST be initialised PRIOR to showing widget, as it determines the month to be displayed.
On click
Dropdown
When the user clicks a date, the following actions can be performed: do nothing, execute flowchart, follow button exit, refresh screen, follow navigation item.
Action button exit
Button Exit
Provide a button exit when the property 'On click' is set to 'follow exit'.
Action flowchart
Flowchart
Provide a flowchart when the property 'On click' is set to 'execute flowchart'.
Action navigation item
Navigation item
Provide a navigation item when the property 'On click' is set to 'follow navigation item'.
Disable all
Boolean, Expression
Disable click action for all days without events.
Disable past days
Boolean, Expression
Disable click action for days in past. Default false.
Disable future days
Boolean, Expression
Disable click action for days in future. Default false.
Disable weekends
Boolean, Expression
Disable click action for weekend days. Default false.
Selected date background color
Text, Expression
Background color of selected date. Either use a bootstrap context such as "success", "danger", "info" or "warning". Or a CSS color value, for example: "red", "#ff0000" or "rgba(255,0,0,0.80)". Default: "primary"
Selected date text color
Text, Expression
Color of the selected date text. Either use a bootstrap context such as "success", "danger", "info" or "warning". Or a CSS color value, for example: "red", "#ff0000" or "rgba(255,0,0,0.80)". Default: "primary"
Today highlight color
Text, Expression
Highlighting color for today's date. Either use a bootstrap context such as "success", "danger", "info" or "warning". Or a CSS color value, for example: "red", "#ff0000" or "rgba(255,0,0,0.80)". Default: "primary"
Max width (in pixels)
Number, Expression
Max width of the calendar in pixels. Default: 480.
Columns
List
The list for the columns. The reference to rows in this list is one of the "coordinates" used for the cells. Tip: You can use a filter to make it more dynamic.
Column label
text, expression
Main label used above every column.
Use extra column label
boolean, toggle
Allow a second label text above the main label. Adds a extra property to the widget.
*Extra column label
text, expression
The text of the extra label above the main label of every column.
Column is highlighted when
Boolean, expression
Allows for highlighting specific columns.
Rows
List
The list for the rows. The reference to items in this list is one of the "coordinates" used for the cells. Tip: You can use a filter to make it more dynamic.
Row label
Text, Expression
Label shown on the left of the grid for each row.
Row title
Text, Expression
Tooltip content shown when hovering over a row label
Row group name
Text, Expression
Used for grouping rows together. See image 1.2 on this page, brand is used as grouping. Rows with the same group name are put together.
Row is highlighted when
Boolean, Expression
Allows for highlighting specific rows. The highlight of the row overrides the column highlight, column labels keep column highlight.
Content
List
List for information and the references of the cell's. In this list you bring the row and column information together and allows data for each cell to exist.
Cell content
Text, Expression
Text shown in the specific cell's. This can be more dynamic when using expressions.
Cell tooltip
Text, Expression
Text shown when hovering over a cell with content.
Cell Column reference
Reference, Field
Reference for the cell's column, this is one part of the cell coordinates. Together with the row reference is the location of the cell in the grid.
Cell row reference
Reference, Field
Reference for the cell's row, this is one part of the cell coordinates. Together with the column reference is the location of the cell in the grid.
Cell text color
Text, Expression
Color of text inside a cell with text content and in the content list.
Cell background color
Text, Expression
Color of a cell in the content list.
Allow multiselect of cells
Boolean, toggle
Enables ability to select multiple cell's at once.
*Clicked cell offset (multiselect)
Number, field
Field in which the offset of a multi-selection is saved. The offset is amount of cells from the first selected. When this number is 5, and the first cell is number 5 the cells 5, 6, 7, 8, 9 are selected.
Clicked cell column reference
Reference, field
Field to store Reference to clicked Column at the moment of clicking a cell
Clicked cell row reference
Reference, field
Field to store Reference to clicked Row at the moment of clicking a cell or row label
On cell click action
Dropdown
Action taken when a cell is clicked on.
On cell double click action
Dropdown
Action taken when a cell is double clicked.
On row click action
Dropdown
Action taken when a row label is clicked.
Cell content text align
Dropdown
Change the position of text inside cells.
Cell border color
Text, expression
Color of the border of cells.
Cell padding (number in pixels)
Number
Amount of pixels padding around the content label. This also increases the size of the column and row. Default is 6
Cell min width (number in pixels)
Number
Minimum width a cell can be in pixels. This also increases the column width.
Cell hover background color
Text, expression
Color of a cell when the mouse hovers over it.
Cell hover text color
Text, expression
Color of the text content in a cell when the mouse hovers over the cell.
Cell multiselect background color
Text, expression
Color of cells when multiple cells are selected.
Cell multiselect text color
Text, expression
Color of text content in cells when multiple cells are selected.
Enable alphabetical sorting of rows
Boolean, Toggle
Reorders rows in alphabetical order using the first letter of a row label
Allow newlines
Boolean, Toggle
Allows a column that gets to wide to use a newline and make higher two line rows.
Make row heading always visible
Boolean, Toggle
Make row label bold and more visible.
Row label width (number in pixels)
Number
Width of the row label in pixels.
Column highlighted background color
Text, expression
Color of the column highlight property.
Column highlighted text color
Text, expression
Color of the text inside highlighted columns.
Row highlighted background color
Text, expression
Color of the row highlight property.
Row highlighted text color
Text, expression
Color of the text inside highlighted rows.
Override border color when highlighted
Boolean, expression
Options to let the color of the border of highlighted cells change with the highlight. On default the border color is kept on highlight.
Maintain aspect ratio
Boolean
Maintain the aspect ratio of 'width' and 'height' when the width changes because of responsive design.
Background color
Text, Expression
Changes the background color of the output image. By default this value is set to "white". This value is a CSS (hexadecimal) color code or keyword. Hexadecimal values require a leading number sign (#). RGB(A) colors are also allowed. Examples: "#366dbf", "#ff0000", "rgba(0,0,0,0.5)", "black" or "red".
Border color
Text, Expression
Changes the border color of the signature widget. The border is not included in the output image. This value is a CSS (hexadecimal) color code or keyword. Hexadecimal values require a leading number sign (#). RGB(A) colors are also allowed. Examples: "#366dbf", "#ff0000", "rgba(0,0,0,0.5)", "black" or "red".
Clear-button context
dropdown, Bootstrap context
Changes the context of the clear button using bootstrap color contexts, such as "success" and "danger".
Clear-button size
Dropdown
The clear button can either be: extra small, small, normal or large.
Clear-button text
Text, Expression
Changes the text on the clear button. By default this value is set to "Clear".
Clear-button full widt
Boolean
When true: this property makes sure that the clear button has the same width as the canvas. By default this value is false.
Height
Number, Expression
The height of the canvas in pixels. The default value is 300. The height may change on smaller screens when 'Maintain aspect ratio ' is true. Otherwise the height will remain the same on all devices.
Width
Number, Expression
The width of the canvas in pixels. The default value is 600. Note that the width will never be larger than the width of its container. Therefore, the canvas width may be smaller on devices with smaller screens.
Minimal stroke width
Number, Expression
This widget simulates 'pen presure' by changing stroke width. By default the minimal stroke width is 0.5, allowing thin lines when drawing fast.
Maximum stroke width
Number, Expression
Defines the maximum stroke width of the signature. By default the maximum stroke width is 2.5, 5 times thicker than the minimum stroke width.
Stroke color
Text, Expression
By default a user can draw a black signature. Use this property to change the pen color. This value is a CSS (hexadecimal) color code or keyword. Hexadecimal values require a leading number sign (#). RGB(A) colors are also allowed. Examples: "#366dbf", "#ff0000", "rgba(0,0,0,0.5)", "black" or "red".
Image
datafield, file
The user can edit the provided image or upload a new image or webcam snapshot that will be stored here. This should be a datafield from your datamodel with the type file.
Width
number
The width of the output image in pixels.
Height
number
The height of the output image in pixels.
Webcam not supported message
text
The user will be notified with this message when taking a webcam snapshot is not available.
OnClick
Dropdown
Choose what happens when a card or kanban item is selected.
Exit/flowchart
Dropdown
Choose which exit or flowchart should be used when a card is selected.
OnColumnChange
Dropdown
Choose what happens when a card is being dragged onto another column.
Exit/flowchart
Dropdown
Choose exit or flowchart to be used when a card is dropped in a column.
OnDoubleClick
Dropdown
Choose what happens when a card is being doubleclicked on (single click is needed for grab to start dragging).
ClickExit/ClickFlowchart
Dropdown
Choose exit or flowchart to be used when a card is double-clicked.
Source | List | A list containing all items of the breadcrumb. Each item of the list should have a label text and parent id. |
Label text | Text, Expression | The label text of each item of the breadcrumb. |
Parent ID | Number, Expression | Each item is displayed immediately after its parent item creating a basic linear tree. Use this property to select the right parent item. |
Endpoint ID | Number, Expression | The ID of the last item in the breadcrumb. |
Minimum | Number, Expression | The minimum value displayed on the progress bar. Any value below the minimum value are not visible on the progress bar, it will show an empty progress bar. |
Maximum | Number, Expression | The maximum value displayed on the progress bar. Any value above this value will show a full progress bar. |
Value | Number, Expression | Displays the current progress of the progress bar. The current value should be a value between or equal to the minimum and maximum value. The value or current progress is in proportion to the minimum and maximum value and will be displayed on the progress bar. |
Unit | Text, Expression | This property displays a label immediately after the value on the progress bar. The property 'Value <number, expression>' can represent a certain unit, this can for example be a percentage or the number of completed steps. Example 1 shows the label " of 100". Examples 2 and 3 are showing the label "%". |
Bar color | Text, Expression | Changes the background color of the progress bar using a bootstrap color context. Accepted values: "default", "primary", "success", "info", "warning" and "danger". |
Striped | Boolean, Expression | When true: adds oblique thick stripes to the progress bar. View examples 2 and 3 to see a striped progress bar. |
Animate | Boolean, Expression | When true: the stripes of a progress bar are animated as shown in example 3. Note: this property only works when 'Striped <boolean, expression>' is set to 'true'. |
Font size | Number | The font size of the current value and unit label in pixels. |
Bar height | Number | The height of the bar in pixels. |
Appointments | List | The source list containing all calendar data, providing list of events. |
Subject | Text, expression | The subject of the event. At this moment it is possible to add basic html to your subject. In the example above, event C is bold and italic. |
Start date | Date, expression | The start date of the event. When events overlap each other, they will be displayed next to each other (for example event B and D). Note that this widget only shows events starting from 06:00-23:00. |
End date | Date, expression | The end date of the event. When using a timespan it is possible to calculate the end date of the event by using the MoveDate() function. |
Color | Text, expression | Changes the background color of the event. Use basic CSS colors, for example: "red" or "#ff0000". It is also possible to use RGB(A) colors (with opacity): "rgba(255,0,0,0.5)" |
Show markers | Dropdown | When yes you can use markers to highlight a certain timespan. Otherwise no markers are displayed. In the example above Friday, January 27 is highlighted. |
Marker start date | Date, expression | The start date of the marker |
Marker end date | Date, expression | The end date of the marker. |
Marker text | Text, expression | Add text to the highlighted marker area. Markertext will be centered in the highlighted area and displayed below events (and might not be visible). |
Initial date | Date, expression | The initial date of the calendar. |
Initial view | Dropdown | Changes the initial calendar view to 'day', 'week' or 'month'. The user can change the view using the calendar toolbar. |
On double click | Dropdown | When the user double clicks an event, the following actions can be performed: do nothing, execute flowchart or follow button exit. |
Exit | Button exit | Provide a button exit when the property 'On double click' is set to 'follow exit'. |
Flowchart | Flowchart | Provide a flowchart when the property 'On double click' is set to 'execute flowchart'. |
On click background | Dropdown | When the user clicks on a blank area, the following actions can be performed: do nothing, execute flowchart or follow button exit. |
Exit | Button exit | Provide a button exit when the property 'On click background' is set to 'follow exit'. |
Flowchart | Flowchart | Provide a flowchart when the property 'On click background' is set to 'execute flowchart'. |
Clicked date | Date, datafield | Use this datafield to (temporarily) store the date of the clicked area. In the example above, a new event is created after clicking a blank area. |
Width | Number, text | By default this widget is as wide as possible (100%). Using this property you can change the width of the calendar in pixels. |
Height | Number, text | Changes the height of the calendar widget in pixels. |
How to use the reCAPTCHA widget
Google reCAPTCHA is a free service that protects your website from spam and abuse. reCAPTCHA uses an advanced risk analysis engine and adaptive CAPTCHAs to keep automated software from engaging in abusive activities on your site. It does this while letting your valid users pass through with ease.
reCAPTCHA offers more than just spam protection. Every time our CAPTCHAs are solved, that human effort helps digitize text, annotate images, and build machine learning datasets. This in turn helps preserve books, improve maps, and solve hard AI problems.
reCaptcha works in three steps:
The widget is rendered. The widget contains a public “site key” that can be generated for a specific url. This site key can be generated on the Google reCAPTCHA site.
The user clicks on the checkbox to confirm that he/she is not a robot. The browser will communicate with google and a response code is generated and stored in a data field. This response code confirms that the user is indeed not a robot. The user can proceed with whatever he/she was doing, now that it is verified he/she is not a robot.
The wem runtime server can verify with google that the response code is valid. This step is strictly not necessary, but it is strongly advised to do this. The validation is done by using a HTTP request node. The request contains the response code, the “secret key” and the client IP address. The response is a JSON message.
You can find more information about Google reCAPTCHA on their introduction page.
Before you start, get your site key and secret key from the Google reCAPTCHA site. You need these keys. The site key is needed in the widget itself, while the secret key is needed for communication between your site and Google (usually used to verify the Google response). When you want to use the reCAPTCHA widget, make sure you have created a number of database fields that you need to store request and response information:
a textfield for the request body;
a textfield for the response body;
a textfield for the response.
In the flowchart that contains the form where you use the widget, clear the response field to make sure that every time you use the widget, you start with a clean situation.
Next, add the widget to your form. The widget has two properties that need your attention:
Site Key: enter the key you generated on the Google reCAPTCHA site;
Response: this should point to reCAPTCHA response data field.
The next action on the form should depend on the response from reCAPTCHA: usually the user can only continue when it has been established that he/she is not a robot. Mostly the next action is to click a button (“Next”, “Submit”, etc.). Which means that a check is needed for the next action to be possible. There are two possibilities:
Simply check if the reCAPTACHA response field has a value.
Double check if the response value is correct by asking Google to check the response value. It is advised to do this.
To check the response value, do the following:
Set the reCAPTACHA request body data field (using an assignment node) to the following:
"secret=" + UrlEncode("<secret key>") + "&response=" + UrlEncode([Widgets.ReCaptchaResponse]) + "&remoteip=" + UrlEncode(IpAddress())
The secret key is the key you got from Google.
response field should point to the reCAPTCHA response data field.
remoteip field is the IP address of the client that accesses this form.
Use an HTTP POST request (using an HTTP request node) to validate the response value. The request body is the reCAPTCHA request body data field. The response body is the reCAPTCHA response body data field.
Press the Edit Request Headers of the HTTP request node, and make sure that “Content-Type” field is set to “application/x-www-form-urlencoded”.
Finally check the response body, to find out whether the validation was successful or not. More details can be found here: https://developers.google.com/recaptcha/docs/verify
When the validation was successful, the next user action can be executed.
Hints:
one way to accomplish the validation above, is to create a button, which starts a flowchart. This flowchart contains the actual check and can define the action to be taken when the validation is either successful or not.
If you use the site key and secret key multiple times, it may be useful to store these keys in a calculated fields. One field contains the site kay, another field the secret key. This way you can easily refer to these fields, insteds of entering the keys very time you need it.
Datasource
List
This is the list that contains the content or data you want to show as the cards. This can be a list from your datamodel or you can use a filter as the list.
SelectedCard
Reference
This should be a reference field that the Datasource as Referenced list. This is used as the selected card in your session.
VisibleColumns
ConceptSet
Set of concepts that represent the columns.
You can use getchildren(concept parent)
or
{ 'concept', 'concept2', etc}
Subject
Text
Column
Single select
This datafield defines the column in which a card is located.
Color
text
Defines the color of the card. Can be written as color name, hex value, etc.
Date
Date Time
Priority
Text
Description
Text
Tooltip
Text
User
Text
Message
Text
Message context
Text
Change the color of the message. You can find the possible values below.
Notification count
Number
Attachment count
Number
Selected Column
Text datafield
Field to store selected column (concept-id) to be used for drag&drop in the Change Columns flow. ONLY available in DragDrop version.
HeaderText
Text
Header or title of the kanban board
Show Counters
Yes/No
Toggle on if the notification and Attachment count should be shown.
Background
Dropdown
Bootstrap context colors
Min width
Number
Minimum size in pixels
Min height
Number
Minimum size in pixels
Date format
Dropdown
*Custom date format
Text
dd-mm-yy hh:mm:ss
"Default"
"Primary"
"Success"
"Info"
"Warning"
"Danger" message and error background
Audio file
File, Expression
Play the selected file using the HTML5 Audio Player. The Audio Player currently supports 3 audio formats: MP3, Wav and Ogg. At this moment Wav is not supported by Internet Explorer and Ogg is not supported by Safari and Internet Explorer. Use MP3 for the best browser support.
Output
Datafield, File
Store the output image in this datafield.
Image extension (png/jpg)
text, Expression
Changes the output file extension. By default this value is set to "png". Allowed values are "png" and "jpg". Note that JPG does not support transparancy. JPG can be used to create smaller files compared to PNG. Use the 'Background color' property to add a custom background color.
Image name
text, expression
Changes the output file name. By default this value is: "image".
Display clear-button
boolean
Allows the user to clear the canvas by showing a clear button. By default this value is true.
In this example Tostring(concept)
is used.
When empty uses Description.
Choose date format Long with time: Short without time:
| Property | Datatype | Description |
|---|---|---|
| Property | Datatype | Description |
|---|---|---|
| Property | Datatype | Description |
|---|---|---|
Data source
list, Data Item
The source list containing all timeline data. The example above provides a list of events.
Start date
Date, Expression
The start date of the event. When events overlap each other, they will be stacked automatically.
End date
Date, Expression
The end date of the event. The end date is optional. If the end date is provided, the event is displayed as a range. Otherwise the event is displayed as a box (like Event B in the example above).
Text
Text, Expression
The text-content of the event. This can be plain text or html code. The example above shows Event C bold and italic.
Group
Text, Expression
When a group value is provided, all events with the same group are placed on one line. A vertical axis is displayed showing all groups. Grouping events can be useful for example when showing availability of multiple people, rooms, or other resources next to each other.
Image
File, Expression
Add an image below the text-content of the event.
Image size
number
Limits the width of the provided image in pixels. Resizes the image, but keeps its aspect ratio. The default value of this property is 32 (pixels).
Output selected
Reference, data field
A data field to (temporarily) store a reference to the selected or changed event. This reference can be used to change or delete the event.
On double click
Dropdown
When the user double clicks an event, the following actions can be performed: do nothing, execute flowchart or follow button exit.
Editable
Boolean
Allow the user to add or change events. By default set to false.
Add exit
Button exit
When 'editable' is true, you can provide a button exit which will be used for each 'add-event' in the timeline (double click empty area).
Change exit
Button exit
When 'editable' is true, you can provide a button exit which will be used for each 'edit-event' in the timeline (changing start / end date).
Output start date
Date, data field
A data field to (temporarily) store the start date of an edited event. When 'editable' is true, the user is allowed to change the start date. After changing the start date the provided 'Change exit' will be followed. Due to a bug in widgets you are required to provide a data field, even when 'editable' is false.
Output end date
Date, datafield
A data field to (temporarily) store the end date of an edited event. When 'editable' is true, the user is allowed to change the end date. After changing the end date the provided 'Change exit' will be followed. Due to a bug in widgets you are required to provide a data field, even when 'editable' is false.
Width
Text
Changes the width of the timeline using either a percentage or pixel value. For example: "80%" or "500px". By default this value is "100%".
Animated
Boolean
When true, events are moved animated when resizing or moving them. Requires more computational power.
Animated zoom
Boolean
When true, events are moved animated when zooming the Timeline. Requires more computational power.
Show axis on top
Boolean
By default this property is set to false, the horizontal axis is drawn at the bottom. If true, the axis is drawn on top.Sets the start value of the visible date range (zoom level). The user can scroll to zoom in or out (showing a smaller or larger date range).
Initial start range
Date, Expression
Sets the end value of the visible date range (zoom level). The user can scroll to zoom in or out (showing a smaller or larger date range).
Initial end range
Date Expression
Allowed values: "success", "warning", "danger", "info", "default", "primary". Other values will be ignored.
Event bootstrap context
Text, Expression
Allowed values: "success", "warning", "danger", "info", "default", "primary". Other values will be ignored.
Event background color
Text, Expression
Change the background color of one event using a CSS color code, for example: "red", "#ff0000" or "rgba(0,0,0,0.2)".
Event border color
Text, Expression
Change the border color of one event using a CSS color code, for example: "red", "#ff0000" or "rgba(0,0,0,0.2)".
Event text color
Text, Expression
Change the text color of one event using a CSS color code, for example: "red", "#ff0000" or "rgba(0,0,0,0.2)".
