(Optional) Page 4b

Step 5. Validate user input data

You want to check whether the user entered valid data or just left the default entries.

1. With a Row Filter node, remove the entry if the email address is "example@email.com" (default)

2. Define a conditional path by adding an Empty Table Switch node.

3. Connect the first port of the Empty Table Switch node (non-empty table) to Page 4a - the user sees the dashboard

4. Connect the second port of the Empty Table Switch node (empty table) to Page 4b - the user sees an error message

The first two pages are already configured. Page 1 shows a Welcome page while setting up the game session, and Page 2 let the user play the game (3 iterations)

Page 1
Set up the match

Page 2
Play the game

Page 3
Show match results and collect user feedback

Page 4a
Show an interactive dashboard with game statistics

Part 2 - Building and Deploying a Data App

Exercise 01 Game Data App

Learning objective: In this exercise you'll learn how to build and deploy a data app with components, interactivity, and other configurations.

Workflow description: This workflow finishes the implementation of a Game Data App by adding the Page 3-Form, and Page 4-Dashboard. The result is a customized and interactive application that is ready to be deployed as a data app on KNIME Hub.

You'll find the instructions to the exercises in the yellow annotations.

Step 1. Configure the Data App Flowchart to guide the user through the flow

1. Search the Data App Flowchart verified component on the KNIME Community Hub and add it to the workflow -> https://kni.me/c/-o_CLuu7-qrfguqE

2. With a Table Creator node, define the steps of the data app (Welcome, Play, Form, Dashboard) and set page 3 as the active one.

3. Configure the Data App Flowchart component to use the correct columns.

Data App Flowchart

Step 2. Create the Page 3 - Form component

1. Select all the nodes and components in the Page 3 orange annotation. Wrap them up into a component. Name it "Page 3".

2. Connect the Page 3 component to the main flow (Variable Loop End node) via flow variable connection

3. Open the Page 3 component and rearrange its composite view via the Layout editor.

Refresh Button Widget node before the Single Selection Widget node

OR

Enable automatic re-execution on the Single Selection Widget node

PULL FOR THE ANSWER

Step 3. Set up the widget

You want the user to select whether to display the hardest (most mistaken) or easiest (most correct) flags, interactively. Hence,

1. With a Single Selection Widget node, create a menu to select between two options - Hardest and Easiest.

2. Pass the flow variable with the user selection to the Row Filter node and configure it to keep correct or wrong answers according to the flow variable.

Here we read the match results data and prepare it for the visualization. We want to show a bar chart and let the user select whether it displays the most mistaken or most correct flags.

Step 4. Create Page 4a - Dashboard Component

1. Select all the nodes and components in Page 4a and wrap them up into a component. Name it "Page 4a".

2. Rearrange the component composite view with the layout editor.

IMPORTANT: You want the user to update the Bar Chart view after selecting a new configuration. What is missing to enable the view update?

Step 6. Deployment

Upload this workflow to KNIME Hub:

1. Right click the workflow in the Explorer and select Upload.

2. Reset the workflow before upload.

In the Hub browser UI:

1. Create a new workflow version.

2. Deploy this workflow as a Data app.

   • In Advanced settings, select the User execution scope, and create the deployment

3. Execute the Data app.