> For the complete documentation index, see [llms.txt](https://docs.novacura.com/flow-connect/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.novacura.com/flow-connect/reference/reference/portal/design-items/portlets/gantt.md).

# 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 <a href="#general" id="general"></a>

General data is required for all portlets, see [General](https://open-2c.gitbook.com/url/preview/site_0VOJx/~/revisions/scEC6Gs0BdMyqtFqm5rQ/reference/reference/portal/design-items/common-portlet-configuration/general).

#### Advanced settings <a href="#advanced-settings" id="advanced-settings"></a>

* 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 <a href="#events" id="events"></a>

To set up an event, see [Events](https://open-2c.gitbook.com/url/preview/site_0VOJx/~/revisions/scEC6Gs0BdMyqtFqm5rQ/reference/reference/portal/design-items/common-portlet-configuration/events).

### Data <a href="#data" id="data"></a>

To set up a data source, see [Data](https://open-2c.gitbook.com/url/preview/site_0VOJx/~/revisions/scEC6Gs0BdMyqtFqm5rQ/reference/reference/portal/design-items/common-portlet-configuration/data).

#### Data source columns <a href="#data-source-columns" id="data-source-columns"></a>

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 <a href="#tasks" id="tasks"></a>

* **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.&#x20;
* **Task color:** The task color code, if set by the database

#### Resources <a href="#resources" id="resources"></a>

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](https://open-2c.gitbook.com/url/preview/site_0VOJx/~/revisions/scEC6Gs0BdMyqtFqm5rQ/reference/reference/portal/design-items/common-portlet-configuration/data).

#### Resource mapping <a href="#resource-mapping" id="resource-mapping"></a>

* **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 <a href="#resource-mapping" id="resource-mapping"></a>

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](https://open-2c.gitbook.com/url/preview/site_0VOJx/~/revisions/scEC6Gs0BdMyqtFqm5rQ/reference/reference/portal/design-items/common-portlet-configuration/data).

#### Dependency mapping <a href="#resource-mapping" id="resource-mapping"></a>

* **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 <a href="#interaction" id="interaction"></a>

**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](https://help.novacuraflow.com/development/flow-portal-2/portlets/basic/table#custom-button).

### Tooltip <a href="#tooltip" id="tooltip"></a>

**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 <a href="#icons" id="icons"></a>

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 <a href="#style" id="style"></a>

To configure style, see [Style](https://open-2c.gitbook.com/url/preview/site_0VOJx/~/revisions/scEC6Gs0BdMyqtFqm5rQ/reference/reference/portal/design-items/common-portlet-configuration/style).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.novacura.com/flow-connect/reference/reference/portal/design-items/portlets/gantt.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.