Gantt

The Gantt Portlet is a timeline tool for planning and managing tasks, projects, and resources. Commonly used in project management, Gantt charts visualize tasks, durations, and dependencies in a structured format. It supports dependency tracking, schedule adjustments, and progress visualization.

General

General data is required for all portlets, see General.

Advanced settings

• Start of period: number of historical days to be rendered

• End of period: number of days ahead to be rendered

• Collapse all tasks: setting if the Gantt should open with all tasks collapsed

• Enable virtual scrolling: virtual scrolling can be disabled or enabled. Row virtualization allows you to load and render many tasks in Gantt with effective performance. In this mode, all tasks are fetched initially from the data source and rendered in the DOM within a compact viewport area.

• Use ISO week format: Check if the ISO week number should be shown in the Gantt (available on two zoom levels). If this setting is not checked, the date of the first day of the period will be shown.

• Start day of the week: Set the start day of the week. If the ISO week format is checked, the start day of the week will be set to Monday.

Events

To set up an event, see Events.

Data

To set up a data source, see Data.

Data source columns

Click 'Execute' in the data source section to fetch the columns. Each column can be configured with the following settings:

Manage: The columns can be configured in a grid view for a better overview.

• Display name

• Manage as Select the column type. There are several column types to choose from, with 'Text' being the default:

  • Text: Used to display the column as a text field.

  • Number: Used for integer number fields.

  • Decimal: Used for numbers with decimals.

  • Date: Displays the column as a date without time.

  • Date & Time: Displays both date and time.

Tasks mapping

• Unique identifier: The ID of the task.

• Title: The title of the task.

• Start date: The start date of the task.

• End date: The end date of the task.

• Parent id: The id of the parent task

• Percent complete: Value in percent of task completion.

• Task color: The task color code, if set by the database

Resources

The Gantt portlet can be configured to show the resources connected to the tasks. The resource configuration is optional.

Display resources: Turn on the toggle to show the resource title next to the taskbar.

Add the data source for the resources; To set up a data source, see Data.

Resource mapping

• ID: The ID of the resource.

• Title: The name of the resource.

• Color: The resource color code, if set by the database.

• Task-Resource reference: Map the column that binds the resource to the task.

Dependencies

The Gantt portlet can be configured to show the dependencies between tasks. The dependencies configuration is optional.

Enable dependencies: Turn on the toggle to display dependencies between tasks.

Add the data source for the dependencies; To set up a data source, see Data.

Dependency mapping

• Predecessor ID column name: Map the column ID that contains the tasks the dependencies originate from.

• Successor ID column name: Map the column ID that contains the tasks the dependencies point to.

• Type column name: Map the column that contains the dependency type.

Interaction

Double Click

Open the drop-down menu and connect the app or component that should start when the user performs a double-click action on a task in the Gantt. This can be used, for example, to edit data on the task.

When performing an interaction, data is sent from the portal to the green start ring in the format shown here. Input variables are set to 'Text' by default; adjust the type (e.g., 'Number,' 'Date') as needed to suit your requirements.

This action will send OperationType = DoubleClick.

Task edit

Open the drop-down menu and connect the app or component that should be initiated when the user edits the task. Turn on the toggle to enable the action.

• Resize: Enables the user to resize the task, i.e. change the start and end dates. This action sends OperationType = Resize.

• Drag and drop: Enables the user to move the task. This action sends OperationType = DragAndDrop.

• Progress update: Enables the user to update the progress of the task, i.e. the percentage completed. This action sends OperationType = ProgressUpdate.

• Dependencies: Enables the user to add dependencies between tasks. This action sends OperationType = DependencyUpdate.

Custom button

See Custom button.

Tooltip

Show Tooltip

If unchecked, no tooltip will be displayed when hovering over a task. When checked, the data specified in the HTML will be shown in the tooltip.

Edit HTML

Configure the desired tooltip data using HTML to define the layout, and use curly brackets to specify the variables to be shown. Only plain HTML is allowed; style or script elements are forbidden.

Icons

Add rules to define icons to be shown on the tasks.

Click Add to add a new rule.

• Background: The icon to be used as the single or background icon.

• Foreground: The icon to be used as the foreground icon

• Field: The data on which the condition should be based.

• Operator: Select the required operator.

• Value: The value needed to meet the condition, depending on the operator.

Style

To configure style, see Style.