Planning¶

Overview¶

Insight Planning allows you to show a Gantt diagram based view on data from a tree-configuration. It can be used to plan resources and supports drag and drop, moving tasks, styling, resizing and many custom settings.

Initilization¶

To use Planning from a context menu use the menu-action "planning":

{
  "label": "Teamplanung",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
          "tree": "team-workorder-planning"
      },
      "tab": {
          "label": "Planung Teams"
      },
      "table": {
          "tree": "jobtask"
      }
    }
  ]
}

The used tree depends on where you call the menu-action from:

From the menu of a tree: All records of the root node will be shown in the gantt view.
From the contextmenu of a node: The Gantt-view will be opened from the right-clicked record. If you specify a tree, the id of the node will be interpreted as a record of the root node of the specified tree.
absoluteZero A date that represents the absolute start for the gantt diagram. It is automatically passed to the header format js function.

TODO: Examples

Views¶

Insight Planning can be shown with different view ranges and steps. If not specified, Insight will use default values. The following view settings can be configured:

label: The label of the view. Examples: "Year", "Week", "Month".
icon: The icon of the view. Examples: "icon-calendar-31", "icon-clock3".
default: Set to "true" if you want to use this view as initial default.
range: Definition of the view-range. You can choose between relative ranges (relative to the reference date), absolute ranges and auto ranges (will load the date range so that all row temporals will be inside the date range). From and to fields set the date range, step will set the amount of time to move the reference date by when moving the current date range.
headers: The header configurations for that view, see headers for more information.

Example (relative range):

{
  "label": "Teamplanung",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "team-workorder-planning",
        "views": [
          {
            "label": "Month",
            "icon": "icon-calendar-31",
            "default": true,
            "range": {
              "from": "P0D",
              "to": "P4DT23H",
              "step": "P1D"
            }
          }
        ]
      }
    }
  ]
}

Example (absolute range):

{
  "label": "Teamplanung",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "team-workorder-planning",
        "views": [
          {
            "label": "Month",
            "icon": "icon-calendar-31",
            "default": true,
            "range": {
              "from": "2020-01-01T00:00:00",
              "to": "2030-01-01T00:00:00",
              "step": "P1D"
            }
          }
        ]
      }
    }
  ]
}

Example (auto range):

{
  "label": "Teamplanung",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "team-workorder-planning",
        "views": [
          {
            "label": "Month",
            "icon": "icon-calendar-31",
            "default": true,
            "range": {
              "from": "auto",
              "to": "auto",
              "step": "P1D"
            }
          }
        ]
      }
    }
  ]
}

You can also change the zooming behaviour of a view by either scaling the view to fit to the screen upon initial load, set a manual initial zoom factor via config, as well as min and max zoom factors.

Example:

{
  "label": "Teamplanung",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "team-workorder-planning",
        "views": [
          {
            "label": "Month",
            "icon": "icon-calendar-31",
            "scaleToFit": true,
            "scaleFactor": 5,
            "minScaleFactor": 0.1,
            "maxScaleFactor": 2000,
            "range": {
              "from": "auto",
              "to": "auto",
              "step": "P1D"
            }
          }
        ]
      }
    }
  ]
}

Headers¶

You can configure and adapt the headers shown at the top of the gantt diagram in Insight Planning. If you do not configure any headers, default headers will be used based on your view settings. You can change the actual headers shown for a given view with the following configuration:

{
  "label": "Calendar",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "views": [
          {
            "label": "LABEL_YEAR",
            "headers": {
              "month": {
                "format": "return start.format('MMMM YYYY');"
              },
              "week": {
                "format": "return 'some String';"
              },
              "custom1": {
                "tree": "header-data",
                "scale": "week",
                "format": "var a = start.startOf('week'); var b = moment(absoluteZero, 'DD.MM.YYYY').startOf('week'); var diff = a.diff(b, 'week'); if(diff = 0) { diff += 1; } var hit = data.filter(function(each) { return each.properties.id == diff }); if(hit.length  0) { return hit[0].properties.activityAmount; } else { return '-' }"
              }
            }
          }
        ]
      }
    }
  ]
}

The following properties can be configured inside each header: - name: The name used as a label for the header, optional. - scale: The scale that header should use, optional. If no scale is used, the header key will be used as a scale. See list of supported scales for valid scale configurations. - format: The format function to apply for each header cell, optional. If no format function is configured, a default label for each cell will be calculated based on the type of the header. - tree: The tree configuration that should be loaded as input for the custom format function, optional - color: A custom background color for that header, optional - fontColor: A custom font color for that header, optional

Insight Planning supports the following scales of headers: - millisecond - second - minute - hour - day - week - month - quarter - year

Variables accessible in the configurable "format" js function: - start: The start date of the current header cell. - end: The end date of the current header cell. - currentView: The currentView that is active. - absoluteZero: The absolute start point of the gantt, if configured. - data: The data from the tree root fetch for this header, if configured.

Notes: - If you dont specify the "headers" property in a view, the default Insight Planning behaviour kicks in and the headers will be automatically calculated based on the views other properties. - If you define the "headers" property as an empty object, the view will have no headers at all. - You can define complete custom headers. If you do so, you need to define a scale that header should use.

You can also add additional information to the tooltips for each header cell that gets prepended to the default range tooltip of each cell. Example:

{
  "label": "Gantt usecase",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "gantt-tree",
        "views": [
          {
            "label": "LABEL_YEAR",
            "headers": {
              "custom1": {
                "name": "custom1",
                "tooltip": "Additional Information",
                "tree": "header-data",
                "scale": "week"
              }
            }
          }
        ]
      }
    }
  ]
}

Rows¶

An Insight node can be visualized as a row in a Gantt. Not allowed, if parent node is a task. Please note, that if you choose to use a node in a deeply nested hierarchy, all of it's parent rows need to be marked as a row as well. Use the following notation:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
  "planning": {
    "row": true
  }
}

A row may optionally define a temporal. A temporal on a row has several uses: - It can automatically crop out tasks and time ranges, that are outside of the row's temporal (see here) - It can be used with a Gantt view's auto range feature, to automatically determine which time frame to load

Use the following notation:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
  "temporal": {
    "start": "${startDate}",
    "finish": "${endDate}"
  }
}

You can configure, if all rows should be expanded on initial load (default: false). Example:

{
  "label": "Planning",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "insight-gantt-demo",
        "expandRows": true
      }
    }
  ]
}

Tasks¶

An Insight node can be visualized as a task in a Gantt. Only allowed if the parent node or the node itself is defined as a row. Use the following notation:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
  "planning": {
    "task": true
  }
}

A task needs to have a temporal to determine where to render it. If any of the range attributes is not available or empty, the task will be omitted. Use the following notation:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
  "temporal": {
    "start": "${startDate}",
    "finish": "${endDate}"
  }
}

Layouting¶

There are various ways to style and layout the contents of an Insight Gantt chart. For specific settings see below. Generally, you can add custom CSS classes to any row or task and style them with a customize.css file. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
  "planning": {
    "css": "my-class my-class2"
  }
}

This feature should be used carefully, as writing custom CSS selectors are in risk of failing silently after future updates. The overall Insight Gantt structure is not guaranteed to stay the same and is bound to change over time. Setting layout and styling options directly in the configuration is the preferred method.

Background color¶

If a color.js function is configured, it has the highest priority. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
  "color": {
    "js": "return 'red'"
  }
}

If a simple color value for the overall task is configured, it has the next highest priority. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
  "color": "${statusColor}"
}

You can specify the backgroundColor in the gantt configuration for a task directly. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
  "planning": {
    "task": true,
    "backgroundColor": "red"
  }
}

Font color¶

You can specify the font color in the gantt configuration for a task directly. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
  "planning": {
    "task": true,
    "color": "red"
  }
}

Font size¶

You can specify the font size in the gantt configuration for a task directly (Default: 10). Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
  "planning": {
    "task": true,
    "fontSize": 14
  }
}

Borders¶

You can specify the overall border or a specific border side in the gantt configuration for a row or task directly. Examples:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
  "planning": {
    "border": "black"
  }
}

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
  "planning": {
    "borderLeft": "black",
    "borderRight": "black",
    "borderTop": "black",
    "borderBottom": "black"
  }
}

Vertical position¶

You can specify the top offset in the gantt configuration for a task directly. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
  "planning": {
    "task": true,
    "top": "10"
  }
}

Height¶

You can specify the height in the gantt configuration for a task directly. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
  "planning": {
    "task": true,
    "height": "18"
  }
}

Text align¶

You can specify the text align in the gantt configuration for a task directly. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
  "planning": {
    "task": true,
    "textAlign": "right"
  }
}

Background pattern¶

You can specify a background pattern in the gantt configuration for a task directly. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
  "planning": {
    "task": true,
    "pattern": {
      "steps": [
        {
          "width": 10,
          "color": "red"
        },
        {
          "width": 10,
          "color": "blue"
        }
      ],
      "angle": 45
    }
  }
}

Header color¶

You can set the header background color if you do not want the default grey. Example:

{
  "label": "Gantt usecase",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "gantt-tree",
        "headerColor": "red"
      }
    }
  ]
}

Header font color¶

You can set the header font color if you do not want the default white. Example:

{
  "label": "Gantt usecase",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "gantt-tree",
        "headerFontColor": "black"
      }
    }
  ]
}

The gantt will automatically render a context menu when right clicking on tasks or rows, if their nodes have menu actions configured. Menu actions triggered by this context menu will have additional parameters available for use.

ganttReferenceDate: The reference date as shown above the gantt.
ganttBeginDate: The date of the position on the gantt row, where the right click was issued.

{
  "label": "New task",
  "action": "request",
  "script": {
    "backend": "business-suite",
    "name": "createAssignment",
    "params": {
      "resourceId": "${id}",
      "referenceDate": "${ganttReferenceDate}",
      "beginDate": "${ganttBeginDate}"
    }
  }
}

Moving gantt-tasks and Drag & Drop:¶

To be able to move the dates of a gantt-task or if you want to move a gantt-task between the rows a Drag&Drop configuration between the row and the task is required. Drag and drop from outside the gantt are also possible.

If you specify the optional clientProperty "allowRowSwitching": "false", a drag&drop between the gantt-rows will be prevented. The task can then only be moved on the time-axis.

If dropped on the gantt the url-parameters of the called script can be parametrized with the following additional replacement parameters:

gantt.beginDate: The start of the task. Example: "2007-12-03T00:00:00+02:00" This property will be available if:
- the task is moved on the time-axis,
- a drag & drop to the time-axis from outside the ganttt or
- a drag & drop from between different rows.
gantt.endDate: The end of the task. Will only be available, if the task is moved on the time-axis. Example: "2008-12-03T00:00+02:00"
gantt.referenceDate The reference date of the gantt (if not changed, the current day). Example: "2007-12-03T00:00+02:00"
src: The record of the task. Use to access the record of the task
dst: The record of the row. Use to access the record of the row

Example of a Drag&Drop Configuration calling a script:

    {
      "src": "assignmentSickness",
      "dst": "person",
      "clientProperties": {
        "allowRowSwitching": false
      },
      "action": {
        "method": "POST",
        "url": "insight/action/business-suite/updateAssignment",
        "params": {
          "resourceId": "${dst.id}",
          "assignmentId": "${src.id}",
          "beginDate": "${gantt.beginDate}",
          "endDate": "${gantt.endDate}"
        },
        "headers": {
          "Accept": "application/json",
          "Content-Type": "application/json"
        }
      }
    }

Example of a groovy-script for updating the start and finish date and moving between rows. The start and finish of the task is saved as local date and time in the fields beginDate and endDate:

    import java.time.*
    import java.time.temporal.*
    import java.time.format.*
    def toTemporal(dateString){
        return OffsetDateTime.parse(dateString).toLocalDateTime();
    }
    def updateAssignment(p){
        sql.withTransaction {
          if (p.beginDate!=null && p.endDate!=null){
            def begin,end;
            begin = toTemporal(p.beginDate);
            end = toTemporal(p.endDate);
            sql.executeUpdate("UPDATE Assignment SET beginDate=$begin, endDate=$end WHERE id=$p.assignmentId");
          }
          if (p.resourceId!=null){
            sql.executeUpdate("UPDATE Assignment SET resourceId=$p.resourceId WHERE id=$p.assignmentId");
          }
        }
    }
    updateAssignment(params);

Magnet¶

If you do not want to allow completely free movement of tasks both during normal move operations and while dragging a new task into a gantt, you can use a magnet. This will make sure that tasks can only be moved in multiples of a specific date type. Example:

{
  "label": "Teamplanung",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "team-workorder-planning",
        "views": [
          {
            "label": "Month",
            "icon": "icon-calendar-31",
            "default": true,
            "range": {
              "from": "P0D",
              "to": "P4DT23H",
              "step": "P1D"
            },
            "magnetType": "days"
          }
        ]
      }
    }
  ]
}

You can choose between the following magnetTypes:

Minutes
Hours
Days
Weeks
Months
Quarters
Years

Tab¶

To configure the label of the planning-tab use the following configuration.

{
  "label": "Calendar",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity"
      },
      "tab": {
        "label": "Planung Teams"
      }
    }
  ]
}

Table¶

The gantt component comes with an optional table attached below for easy drag&drop. Example:

{
  "label": "Calendar",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity"
      },
      "table": {
        "tree": "jobtask"
      }
    }
  ]
}

All configurations from Insight Tables apply.

Bottom-Gantt¶

You can configure an additional gantt below the top gantt. This is a special case where special rules are in place: - Drag and Drop between both gantts is supported - Both gantts are synchronized, meaning they share the same timeframe, date and scroll dimensions. If anything of these on the top gantt are updated, the bottom gantt will update itself automatically.

To configure a bottom gantt, use the following notation:

{
  "label": "Planning",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "top-gantt"
      },
      "bottomGantt": {
        "tree": "bottom-gantt"
      }
    }
  ]
}

In addition, any gantt communicates it's events with the Insight Client to which the bottom gantt can react via config. Example:

{
  "label": "Planning",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "top-gantt"
      },
      "bottomGantt": {
        "tree": "bottom-gantt",
        "events": [
          {
            "event": "gantt.task.clicked",
            "action": {
              "action": "request",
              "script": {
                "backend": "business-suite",
                "name": "my-backend-script"
              }
            }
          }
        ]
      }
    }
  ]
}

Available events are:

gantt.range.updated
gantt.date.updated
gantt.view.updated
gantt.scrolled
gantt.pagination.updated
gantt.tab.reused
gantt.row.clicked
gantt.row.right.clicked
gantt.task.clicked
gantt.task.right.clicked
gantt.task.moved
gantt.task.resized

When using the gantt events, you automatically have context data available depending on the event.

Columns¶

You can configure the columns shown left in the tree-table area of the gantt chart. By default, there is always one column automatically generated containing the label of the row item rendered. You can add additional columns with the following notation:

{
  "label": "Calendar",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "columns": [
          {
            "name": "siteName",
            "type": "string",
            "label": "Site",
            "width": 150,
            "sortable": true,
            "value": "siteName",
            "pattern": "dd.MM.yyyy",
            "nodes": ["assignment", "person"]
          }
        ]
      }
    }
  ]
}

name: An internal name to map the columns.
type: Type of the values rendered in the column (string, number, date).
label: The label shown at the top of the column.
width: The default width the column starts with.
sortable: Whether the column can be sorted or not by the user.
value (optional): The Insight Attribute to draw the value from for this column.
pattern (optional): The pattern of the string value used for the date.
nodes (optional): an array of Insight node names which will be sorted in that column.

The Gantt charts support columnConfiguration.

To change the way date columns display their date, use the following notation:

{
  "label": "Calendar",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "datePattern": "dd.mm.YYYY"
      }
    }
  ]
}

Highlights¶

Insight Planning can highlight time ranges or specific dates to better visualize holidays, vacations, etc.

To support one specific category of highlightable dates, use the following notation:

{
  "label": "Calendar",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "highlight": [
          {
            "name": "Vacations",
            "tree": "public-holidays",
            "value": "${someDate}",
            "label": "name",
            "pattern": "YYYY-MM-DD",
            "css": "my-css-class-applied"
          }
        ]
      }
    }
  ]
}

If you want to highlight Date Ranges instead of specific dates, use the following notation:

{
  "label": "Calendar",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "highlight": [
          {
            "name": "Vacations",
            "tree": "public-holidays",
            "from": "${startDate}",
            "to": "${endDate}",
            "label": "name",
            "pattern": "YYYY-MM-DD",
            "css": "my-css-class-applied"
          }
        ]
      }
    }
  ]
}

You can mix date ranges with specific dates in one highlight category. If an entry has no "to" value, the "from" value will be interpreted as the concrete date.

You can also define which of the highlight categories are active on Gantt Startup, setting "selected": "false" on that category. Default is true.

TODO: Example config for unselected highlight

To change the default color scheme of each highlight-category, simply add your own css classes to the customize.css file and reference them as shown above.

TODO: Document color, script based loading

Automatic Refresh¶

Insight Planning supports automatic background refreshing. This will refresh all rows in the Gantt diagram. To reduce stress on the server, this feature is not enabled by default. Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "refresh": 30000
      }
    }
  ]
}

Filters¶

You can configure filters for the Insight Planning Gantt chart. Those filters will display as filter popups that the user can select options from. A list of all possible values to filter by will be displayed. This feature is identical to filter popups in Insight Tables.

You can define filters for both rows and tasks. All objects that match the selected filter values are displayed, all other objects are hidden. Multiple filters at the same time are supported. Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "filters": [
          {
            "name": "name",
            "label": "Name",
            "node": "node"
          },
          {
            "name": "description",
            "label": "Description",
            "node": "node"
          }
        ]
      }
    }
  ]
}

Please note that the configured filter's "name" is the attribute name of the record underlying the row or task model and has to match. You also need to specify which node of rows or tasks the filter applies to.

If you want to set an initial value to a filter, use the following notation:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "filters": [
          {
            "name": "name",
            "label": "Name",
            "node": "node",
            "value": "${attributeWithInitialValue}"
          }
        ]
      }
    }
  ]
}

Master Details¶

You can configure a Master-Detail view for Insight Planning. When activated and a user clicks on any given task object in the gantt diagram, the details view of that task object will be loaded next to the gantt. Additionally, you can also configure the sizes of the gantt diagramm and appearing details view.

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "width": "twelve",
        "details": {
          "width": "four"
        }
      },
      "tab": {
        "label": "Planning Employees"
      },
      "table": {
        "tree": "jobtask",
        "width": "sixteen"
      }
    }
  ]
}

Custom Initial settings¶

You can configure initial settings the gantt will use after loading.

Date: The date the gantt will use as it's reference date after loading. If you dont specify this setting, the gantt will always load around the current Date.

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "initial": {
          "date": "2024-11-14T23:00:00.000Z"
        }
      }
    }
  ]
}

You can also use the replace notation to set the initial date based on the clicked tree item's properties.

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "initial": {
          "date": "${planningStart}"
        }
      }
    }
  ]
}

Search: The configured gantt search to fire automatically after loading. If you dont have a matching search configured, Insight Planning will throw an error.

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {,
        "tree": "resource-person-activity",
        "initial": {
          "search": {
            "name": "activityState",
            "value": "Planung"
          }
        }
      }
    }
  ]
}

You can also use the replace notation to set the initial search value based on the clicked tree item's properties.

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "initial": {
          "search": {
            "name": "activityState",
            "value": "${id}"
          }
        }
      }
    }
  ]
}

Load Behaviour and Performance¶

Loading lots of rows in Insight Planning can take a huge toll on client side performance. Having too many rows configured will take longer during the actual loading process. If an Insight Planning instance is not limited to specific rows and instead will load all root rows of an Insight treeConfig, Insight Planning will automatically only load the first X rows. You can then navigate the currently loaded "page" through the total amount of rootRows.The default amount for non-fullscreen loadable rows is 15, for fullscreen 40. You can override these settings with the following configuration:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "rows": {
          "default": 15,
          "fullscreen": 40
        }
      }
    }
  ]
}

If you load an Insight Planning instance with context objects, Insight Planning will automatically load the frame of root rows around the clicked context object. If you only want to load the actual clicked row and render it as the single row in the Gantt view, you can use the following configuration:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "focusOnSelection": true
      }
    }
  ]
}

If you want to display usecases with high amounts of data (more then 100.000 objects) you might run into bad rendering performance by the Insight Planning gantt component. You can prevent that with the following notation, that will tell the gantt component to render only the currently visible subrange of the overall gantt:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "performanceOptimization": true
      }
    }
  ]
}

Jump Buttons¶

Insight Planning supports configurable buttons to jump to a specific location (date, row, task). Jumping to a date - Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "jumpTo": [
          {
            "label": "Start",
            "date": "2023-01-01",
            "icon": "step backward"
          }
        ]
      }
    }
  ]
}

Jumping to a row: If the row is outside of the current page, Insight Planning will load the page that row is on. Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "jumpTo": [
           {
            "label": "Start",
            "icon": "icon-enter-left2",
            "row": "tree/node/1"
          }
        ]
      }
    }
  ]
}

Jumping to a task: If the task is outside of the current page, Insight Planning will do nothing. Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "jumpTo": [
           {
            "label": "Start",
            "date": "2023-01-01",
            "icon": "icon-enter-left2",
            "task": "business-suite:Activity:$id"
          }
        ]
      }
    }
  ]
}

Inactive Ranges¶

Insight Planning will visualize time ranges as inactive automatically, if a parent row has a temporal. This will have two effects:

Row time ranges outside of their parent's row temporal range are rendered as inactive to symbolize that these areas should not be available and not used for planning. You can deactive this feature by using:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "displayInactiveRanges": false
      }
    }
  ]
}

Tasks existing outside of the parent row's temporal range are clipped and only rendered up until the parent's temporals' border. Tasks and rows with a temporal outside of the current load range are also not loaded, even if they are children of a current row. You can deactivate this feature by using:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "showTasksOutsideOfParent": true
      }
    }
  ]
}

This will result in a) tasks being rendered outside of their parent's temporal and b) all children of a given row being loaded independant of the current load range.

PDF Export¶

Insight Gantt offers an automatic PDF export. Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "pdf": true
      }
    }
  ]
}

Please note, that for very large Gantt charts, the pdf export might take some time. Your browser will not be responsive during that time. Please also make sure that if you use this feature, you do not use any of the custom CSS features. Custom CSS features (where you define custom CSS that get's applied to an element because of a matching class name) is not present during a PDF export and therefore will leave only black areas. In order to get custom colors, borders, etc. into PDF exports, please use the direct layouting configurations as described above.

You can heavily customize the way your PDF is exported.

Columns¶

By default, all columns of the TreeTable are exported. You can choose to only export specific columns. Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "pdf": {
          "columns": ["columnA", "columnB"]
        }
      }
    }
  ]
}

Zoom¶

You can zoom in or out of the resulting PDF. Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "pdf": {
          "zoom": 2
        }
      }
    }
  ]
}

Orientation¶

You can change the PDF orientation (Default: portrait). Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "pdf": {
          "orientation": "l"
        }
      }
    }
  ]
}

Format¶

You can change the page format (Default: a4). Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "pdf": {
          "format": "a5"
        }
      }
    }
  ]
}

Margins¶

You can change the default margins to gain more space. Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "pdf": {
          "leftMargin": 20,
          "rightMargin": 20,
          "topMargin": 20,
          "bottomMargin": 20
        }
      }
    }
  ]
}

Header / Footer¶

You can add a custom header and footer to the generated PDF to add more information. Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "pdf": {
          "header": {
            "content": "header info text",
            "fontSize": 10,
            "align": "center"
          },
          "footer": {
            "content": "footer info text",
            "fontSize": 10,
            "align": "center"
          }
        }
      }
    }
  ]
}

Max pages¶

You can limit the amount of x axis pages generated. Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "pdf": {
          "maxHorizontalPages": 10
        }
      }
    }
  ]
}

Preview¶

You can have a preview dialog with which the user can customize the way the PDF will be exported themselves. Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "pdfPreview": true
      }
    }
  ]
}

Miscellaneous¶

You can prevent users being able to resize tasks, default being true.

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "allowResizing": false
      }
    }
  ]
}

You can hook into and change the actual temporal values for each record before they are being used for fetching data.

"temporal": {
  "start": "zieltermin",
  "finish": "soll",
  "js": "if (moment(from).isBefore(moment(to))) { return { from: from, to: to }; } else { return { from: to, to: from }; }"
}

You can hook into the node.color setting and set the color with a js function.

"color": {
  "js": "if(current.properties.zieltermin === null) { return '#ffbf00'} else if(moment(current.properties.soll).isSame(moment(current.properties.zieltermin), 'week')) { return '#ffbf00'} else if(moment(current.properties.soll).isBefore(moment(current.properties.zieltermin))) { return '#FF0000'; } else { return '#77df77'; }"
}

You can adapt the way the current date is visually displayed. Options are "none", "line" and "box" with "box" being the default. Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "nowDisplayType": "line"
      }
    }
  ]
}

You can change the behaviour of the auto-scrolling feature by activating (true) / deactivating (false) it (default: true) or changing the size of the area within the auto-scrolling Feature activates (default: 75). Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "autoScrollEnabled": false
      }
    }
  ]
}

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "autoScrollSize": 100
      }
    }
  ]
}

You can enable an Info Window that displays date data to a currently moving task for easier visualization. Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "infoWindow": true
      }
    }
  ]
}

You can set task labels to automatically update their position on user scrolling so that the labels are always readable independent of original position. Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "stickyTaskLabels": true
      }
    }
  ]
}

If you want to make rows dragable, you need to configure a dnd action for the row and enable the defaultTableArea. Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "tableDefaultAreaActive": true
      }
    }
  ]
}

You can define what the leading header type is. The leading header type defines the basic relationship between how many pixels represent what time unit. By default, the leading header type is a week header and defines that without zooming one week of time is equal to 84 pixels. Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "leadingHeaderType": "days"
      }
    }
  ]
}

You can change the behaviour of the time range buttons above the gantt diagram. "scroll" displays two buttons representing the start and end date of the currently loaded time range. Clicking these buttons will scroll the gantt to that specific date. "none" will hide these buttons. Default: "scroll". Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "timeRangeButtons": "none"
      }
    }
  ]
}

You can automatically let the Gantt chart visualize overlapping tasks with a colored border for easier handling. Example:

{
  "label": "Employees",
  "action": "planning",
  "icon": "icon-new-tab",
  "actionValues": [
    {
      "gantt": {
        "tree": "resource-person-activity",
        "overlap": {
          "color": "red"
        }
      }
    }
  ]
}

Planning¶

Overview¶

Initilization¶

Views¶

Headers¶

Rows¶

Tasks¶

Layouting¶

Background color¶

Font color¶

Font size¶

Borders¶

Vertical position¶

Height¶

Text align¶

Background pattern¶

Header color¶

Header font color¶

Context menu¶

Moving gantt-tasks and Drag & Drop:¶

Magnet¶

Tab¶

Table¶

Bottom-Gantt¶

Columns¶

Highlights¶

Automatic Refresh¶

Filters¶

Master Details¶

Custom Initial settings¶

Load Behaviour and Performance¶

Jump Buttons¶

Inactive Ranges¶

PDF Export¶

Columns¶

Zoom¶

Orientation¶

Format¶

Margins¶

Header / Footer¶

Max pages¶

Preview¶

Miscellaneous¶