Add a Gantt Screen to visualise your project data

Beth King · 7 mins read

Add a Gantt Screen to visualise your project data
Learning Objectives
  • Benefits of using a Gantt Screen
  • How to create a new Gantt Screen within Gridfox
  • Tips & tricks to customise your Gantt Screen

An Introduction to Gantt Screens

A Gantt Screen is a visual way to see a timeline of tasks or pieces of work. You can get an at-a-glance view of the schedule of activity and identify where they may be peaks or troughs in the team workload.

A Gantt Screen shows a block for each piece of work where the length of each block represents the time the work will take. These blocks are then plotted on a timeline.

Examples of Use Cases for Gantt Screens

Gantt Screens can be useful across many industries and departments.

Plan a Product Launch

For a product launch, you may use a Gantt Screen to plan out each of the activities that take the product from an idea to launch.

By using a Gantt Screen, you can get a clear overview of all the required tasks and identify any resourcing problems early.

Mapping a Marketing Campaign

A marketing campaign has many moving parts and requires collaboration between many people and departments.

A Gantt Screen can simplify this process by showing a sequence of tasks and which team is responsible for which part. Teams can see how the work they are doing fits into a larger overall plan and any impacts it may have on others.

Implementing a new Software Tool

If you are trying to rollout a new tool or piece of software in a business, there can be many stages and stakeholders involved. For example, you have to first identify the requirements then find a suitable supplier. There is then purchasing and training to consider.

If you plot all of the purchase stages and tasks on a Gantt Screen, you can see when the solution will be implemented and where there may be blockers or time constraints.

Gantt Screens in Gridfox

You can add a Gantt Screen over any existing Table in your Project.

Your users can access these screens just like the Boards, Calendars and standard Table Screens.

All the Records that your users add to the Table will automatically show up on the Gantt Screen. If they make any changes to Records, then the Gantt Screen will show those changes immediately.

Setting up a Table for a Gantt Screen


Here at Gridfox we are always building and improving our product. Some of the steps you see may look slightly different to this tutorial.

Firstly, we need to create a Table that we will create a Gantt Screen over. Remember that Gantt Screens are for plotting pieces of work over a timeline, so we will need to make sure that the Table contains some Date Fields to allow the Gantt Blocks to be plotted.

As an example, you may want to track Tasks for Projects in Gridfox.

Creating the Tables

  1. Open up a Gridfox Project, or create a new one
  2. In Screen Builder or Table Builder, create a new Table called Projects
  3. Add a text Field to the Projects Table called Name
  4. Create a new Table called Tasks
  5. Link the Tasks table to the Projects Table where Tasks is a child of Projects
  6. Add the following Fields to the Tasks Table:

    • Text Field called Description
    • Date Field called Start Date
    • Date Field called End Date
    • List Field called Status, with Statuses of ‘To Do’, ‘In Progress’, and ‘Done’
  7. Save your new data model, setting the Reference Fields as follows:

    • The Name field for the Projects Table
    • Add an Auto Counter to the Tasks Table

Your Project will now have the following Tables and Fields:

Table Builder view of setup

Adding Records to the Table

Now that we have the model set up, you can add some Records to your Tables so that the Gantt Screen will show some data.

  1. Return to User Mode by clicking the User Mode tab
  2. Select Projects in the navigation bar
  3. Create a new Project
  4. Add some Tasks to the Project, making sure the Tasks have a Start and End Date set
  5. Create a few more Projects with some Tasks

Project Record with child Task Records

We are now ready to create a Gantt Screen to visualise these Tasks.

Creating a Gantt Screen

Now that you have your Table set up and ready to go, you can start creating your Gantt Screen for this Table.

  1. Select the Screen Builder tab
  2. Click Add New in the navigation bar
  3. Select Gantt
  4. Enter a Screen Name – we can call this one ‘Task Tracker’
  5. Click Add

You now have a brand new Gantt Screen. Before it can be saved, it needs to be configured.

Creating a Gantt Screen

Configuring a Gantt Screen

  1. In Select Table pick the Tasks Table
  2. In Select Start Date pick the Start Date Field
  3. In Select End Date pick the End Date Field
  4. In Select Gantt Title pick the Description Field
  5. Click Save

Your Gantt Screen is all up and running ready for Users to use.

All the Tasks that are created will show up on the Gantt Screen.

Configuring a Gantt Screen

Viewing the Gantt Screen

To take a look at what this new Gantt Screen will look like for your Users, we can jump out of Builder Mode and view it.

  1. Select the User Mode tab
  2. Select the Task Tracker in the navigation bar
  3. Collapse the sidebar to see more of the canvas
  4. Use the date zoom to change the view of the Gantt Screen
  5. Click New to add a new Task
  6. Click on a Gantt Block to go to the Record

Viewing the Gantt Screen

Customising a Gantt Screen

Now that you’ve got the fundamentals of the Gantt Screen, there are some additional options you can configure to get the best view for your Users.

Colour Coding Gantt Blocks

To help your users get an at-a-glance view of the Projects, you can colour code the Blocks based on Task Status.

  1. Select the Screen Builder tab
  2. Click Tasks in the navigation bar
  3. Click Field Configuration for the Status field
  4. Set a colour for each list field
  5. Click Save

Colour Coding List Fields

  1. Select the Tasks Tracker in the navigation bar
  2. In Colour Settings select List
  3. In Select List Field select Status
  4. Click Save

Now on the Gantt Screen, each Task will be colour coded based on its status.

Colour Coding Gantt Screen


You can also colour code Gantt Blocks by a User or Group Field on the Table. This might be useful if you want an at-a-glance view of who is doing which piece of work.

Grouping Gantt Screen Blocks by Parent

Currently on our Gantt Screen, a flat list of Tasks is shown. It would be more useful if they were grouped by the assigned Project.

You can group Records on a Gantt Screen by Parent.

  1. Select the Screen Builder tab
  2. Select Tasks Tracker from the navigation bar
  3. In Group by Parent select Project
  4. Click Save

Now on the Gantt Screen, all the Tasks will be grouped by the Parent Project they are assigned to.

Group Gantt by Parent


We have given an introduction on why you would want to use Gantt Screens in Gridfox and where they may be useful. You have also seen how to create a Gantt Screen and customise it to fit your needs.