Configuring a Task Queue

Overview

In applications where users process multiple documents or tasks sequentially, keeping the session active in the background helps maintain a seamless workflow. The Task Queue enables pre-loading the next document while the current one is in use, minimizing wait times. This guide provides a step-by-step overview of the setup, configuration, and event handler sequence needed to implement this functionality.

How It Works

Task Queue is designed to improve user experience and application performance by ensuring seamless task transitions. While a user is working on one document, the application pre-loads the next document in the background. Once the current document is completed, the pre-loaded document becomes active, and the next one starts loading. A keep-alive timer runs in the background to prevent session termination. 

The process follows these key steps:

1. User Works on Current (Foreground) Task: The user interacts with an active task while the system tracks session activity.

2. Preloading the Next (Background) Task: While the user is engaged, the next document/task is fetched from an external API and stored in a background queue.

3. Keep-Alive Timer Activation: A timer continuously refreshes session activity and preloaded task data to prevent expiration.

4. Task Completion Event: When the user completes a task, the preloaded document/task is seamlessly transitioned into the active state.

5. Updating Task Queue: The queue updates dynamically, fetching and preloading the next document/task in the sequence.

6. Maintaining Session Activity: The system periodically refreshes session-related data sets, preventing session expiration and ensuring uninterrupted workflow.

Configuration Steps

The session activity management process consists of:

1. Adding external data sources.

2. Creating necessary data sets.

3. Setting up UI components.

4. Creating timers.

5. Configuring event handlers.

6. Managing timers.

Step 1: Add external data sources

In this step, we'll add two external data sources that will serve as the foundation for retrieving tasks in our application. These sources will allow us to create Data sets of the External API type in Step 2.

• Foreground Task Source represents tasks that are actively being processed.
• Background Task Source represents tasks that are queued and waiting to be processed next.

1. Open the External data sources page () and click Add new data source.
2. In our example, we'll add two external data sources with the following configurations:
   Foreground Task Source 

   Setting	Value
   Name	Foreground Task Source
   Request	{ "url": "https://api-generator.retool.com/H4kq29/data", "method": "GET", "urlParameters": [ { "name": "_page" }, { "name": "_limit" } ] }
   Response	For Response type Success, click Extract Schema > Send Request > Accept.

3. Click Add.
4. Repeat the same configuration for the second external data source, named Background Task Source.

Step 2: Create Data sets for the App

In this step, we'll define data sets that will be evaluated and updated as users transition between documents.

To add a Data set:

1. Under Explorer and Components > Explorer, click App.
2. Under Appearance and Configuration > Configuration, locate the Data sets section. Click Add data set.
3. Enter the suggested values for each Data set:

Step 3: Add Components

Add the following UI components to the App:

Step 4: Configure Timers

In this step, we'll configure two timers, required to  keep task data up to date and manage the display of job completion notifications.

• Session Refresh Timer ensures that the queued task data remains updated by periodically refreshing the relevant data set while Keep-Alive Timer Active is active.
• Job Complete Timer manages the visibility of the job completion notification, automatically hiding it after a set duration.

To configure a timer:

1. Go to the Timer management page () and click the plus icon to create a new Interval timer.
2. Provide the following details for the first timer:
   
   Session Refresh Timer

   Setting	Value
   Name	Session Refresh Timer
   Delay (seconds)	10
   Condition	{{{Get Background Task ID}}} && {{{Keep-Alive Timer Active}}}
   Event Handlers	Click the plus icon and add the event handler: Handler name: Refresh endpoint Event type: Delay time elapsed Action: Evaluate a data set Data set to evaluate: Get Background Task ID

   
   
3. Click the plus icon to add another Interval timer with the following configuration:
   
   Job Completion Timer

   Setting	Value
   Name	Job Completion Timer
   Delay (seconds)	10
   Condition	{{{Show Completion Timer}}}
   Event Handlers	Click the plus icon and add the event handler: Handler name: Stop timer Event type: Delay time elapsed Action: Set a variable Variable to set: Show Completion Timer Value to set: false

   
   

Step 5: Configure Event Handlers

Active Task button's configuration consists of the following event handlers, which should be configured in the same order as listed below:

Next Task button's configuration consists of the following event handlers, which should be configured in the same order as listed below: