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.

Properties

General

Behaviour

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.

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)

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.

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

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.

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

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:

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.

Last updated