Gantt component

Plan and track scheduled work on a timeline.

Use a Gantt component on a page to show scheduled records on a timeline. It works well for projects, tasks, production plans, and other work with start and end dates.

Click any item in the Gantt to open its record in the form view. Use Today to return to the current date when it is outside the visible timeline.

Before you add a Gantt component, prepare a source table with:

• A field for each record's start date and end date
• A field that identifies each bar
• Optional fields for color, progress, milestones, baselines, and dependencies

Add a Gantt component to a page

1

Open the Add tab

In the Settings panel, open Add.

2

Add Gantt

Under Views, drag Gantt to the preferred location on the page.

3

Label the component

Ninox generates the Label and Internal name automatically. Update either value if needed.

4

Choose the source data

Under Behavior, select the source Table. Select its Start date and End date fields.

5

Configure the bars

Select a Bar label field. Optionally select Color, Progress, and Milestone fields.

6

Review the timeline

Check that every bar uses the expected dates and label. Drag the component or use its resize handles to adjust the page layout.

Gantt component settings

In Settings, define the component's basic details:

• Label sets the title shown on the component.
• Internal name is generated automatically. Use this name when you reference the component in logic.

Under Behavior, configure the timeline and its bars:

• In Table, choose the source table.
• In Start date and End date, choose the fields that define each bar's time range. If you configure only one option, Ninox displays every record as a milestone. If you configure both options, records missing either of the selected dates appear as milestones too. All other records appear as time-range bars.
• In Bar label, choose the field whose text appears on the bar.
• In Color, choose a Choice or Color field to color each bar.
• In Progress, choose a field that contains a value from 0 to 100. Ninox displays the value as the bar's completion percentage.
• In Milestone, choose a Yes/No field that marks a record as a milestone. If Start date and End date are configured, and the record is marked as a milestone using the Yes/No field, Ninox displays the milestone on the End date.
• In Dependency, choose a relationship field between records in the source table. If no field is available, add a relationship field in this table. Set its target to the same table. Use it when Gantt items depend on each other. Ninox draws dependency lines between linked records.

  After you select the relationship field, you see the Linked record is setting.

  • Choose A predecessor that finishes first when the linked record must finish before the current record.
  • Choose A successor that starts afterwards when the linked record starts after the current record.
• In Baseline start and Baseline end, choose fields that show planned dates alongside the current schedule. Use baseline fields when you need to compare the current schedule with the original plan.
• In Default time scale, choose the timeline scale shown when users open the page. Use these toggles if needed:

  • Hide title column to hide the left-hand column that lists bar labels.
  • Highlight critical path to highlight tasks that determine the schedule's finish date.
  • Disable dragging bars to prevent users from changing dates by dragging bars.
  • Hide weekends in day view to remove weekends from the day scale.
  • Shade weekends to display weekends with a shaded background.
• In Group, choose a field to group records into sections on the timeline.
• Use Filter to limit the records shown by one or more conditions.
• Enable Show time scale selector to let users switch between Quarter, Month, Week, and Day.
• Enable Show search field to let users search within records.

Under Visibility, choose how the component appears on the page:

• Visible shows the component.
• Hidden hides the component.
• Conditional shows the component when its Visibility condition is met.

A visibility condition changes only what users see. It does not change records or permissions.