Grid Widget

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.

Img 1.1

Image 1.2

Properties

General

Property	Datatype	Description	Required
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	?????????
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.

Behaviour

Property	Datatype	Description	Required
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.

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.

Appearance

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.

Property	Datatype	Description	Required
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	???????
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.

How To

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.

The datamodel

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)

Img 1.3

Img 1.4

We will also be using a counter (number field) to keep track of a number of loops for making the columns for example.

Flowcharts

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 Rows (employees) & Columns (days in month)

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.

Img 1.5

Img 1.6

// Day of week: How to find a day in the week and use its short name
choose 
	when 
	dayofweek(
		movedate(
			Date(
				DatePart([Gridwidget.Inputdate],year),
				DatePart([Gridwidget.Inputdate],month),
				1), 
		[Counter]-2, day))
	 = 1
	Then 
	"Mon"
	when 
	dayofweek(
		movedate(
			Date(
				DatePart([Gridwidget.Inputdate],year),
				DatePart([Gridwidget.Inputdate],month),
				1), 
			[Counter]-2, day))
		 = 2
	Then 
	"Tue"
	when 
	dayofweek(
		movedate(
			Date(
				DatePart([Gridwidget.Inputdate],year),
				DatePart([Gridwidget.Inputdate],month),
				1), 
			[Counter]-2, day))
		 = 3
	Then 
	"Wed"
	when 
	dayofweek(
		movedate(
			Date(
				DatePart([Gridwidget.Inputdate],year),
				DatePart([Gridwidget.Inputdate],month),
				1), 
			[Counter]-2, day))
		 = 4
	Then 
	"Thu"
	when
	dayofweek(
		movedate(
			Date(
				DatePart([Gridwidget.Inputdate],year),
				DatePart([Gridwidget.Inputdate],month),
				1), 
			[Counter]-2, day))
		 = 5
	Then 
	"Fri"
	when 
	dayofweek(
		movedate(
			Date(
				DatePart([Gridwidget.Inputdate],year),
				DatePart([Gridwidget.Inputdate],month),
				1), 
			[Counter]-2, day))
		 = 6
	Then 
	"Sat"
	when 
	dayofweek(
		movedate(
			Date(
				DatePart([Gridwidget.Inputdate],year),
				DatePart([Gridwidget.Inputdate],month),
				1), 
			[Counter]-2, day))
		 = 7
	Then 
	"Sun"
	default "default"
end

The grid content

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.

Img 1.7

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.

Img 1.8

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.

// Choose a color dependent on a weekend or a the random number. 

choose 
when DayOfWeek(date(
		DatePart(Now(),year),
		DatePart(now(),month),
		[Gridwidget.Columns.Day])
	)= 6 
or DayOfWeek(date(
		DatePart(Now(),year),
		DatePart(now(),month),
		[Gridwidget.Columns.Day])
	)= 7 
	then  "rgba(219,219,219,0.8)"
when [General.RandomNumber] = 1
	then "rgba(251, 205, 110, 0.8)"
when [General.RandomNumber] = 2
	then "rgba(105,188,93,0.8)"
when [General.RandomNumber] = 3
	then "rgba(22,124,198,0.8)"
when [General.RandomNumber] = 4
	then "rgba(22,124,198,0.8)"
when [General.RandomNumber] = 5
	then "rgba(22,124,198,0.8)"
default "rgba(105,188,93,0.8)"
end

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.

Img 1.9

Img 2.1 CleanUp (assignment: reset input date, reset counter)

Img 2.2 Days in month columns

Img 2.3 Grid Content

Interaction

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:

Legend in Panel header with the right 2 cells reserved for optional buttons.

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.

General

• 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.

// Calculate days in current month
if Datepart([Gridwidget.Inputdate],month) = 2
then 	if datepart([Gridwidget.Inputdate], year) % 4 = 0 
		then [Gridwidget.Columns.Day] <= 29
		else [Gridwidget.Columns.Day] <= 28
else
	if datepart([Gridwidget.Inputdate], month) = 1
		or datepart([Gridwidget.Inputdate], month) = 3
		or datepart([Gridwidget.Inputdate], month) = 5
		or datepart([Gridwidget.Inputdate], month) = 7
		or datepart([Gridwidget.Inputdate], month) = 8
		or datepart([Gridwidget.Inputdate], month) = 10
		or datepart([Gridwidget.Inputdate], month) = 12
	then [Gridwidget.Columns.Day] <= 31
	else [Gridwidget.Columns.Day] <= 30

• 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]

Behaviour

• 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.

Result

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.