Gantt Chart in UI Builder

andrespinilla
Tera Contributor

‎08-11-2025 08:14 PM

Dear Community,

 

I’m building a new page in UI Builder with a Gantt chart to display the projects from pm_project table. So far, I haven’t been able to display the data in the chart. I’ve looked at the documentation, but there is no guidance on how to display the data.

 

Any guidance or suggestions would be highly appreciated.

 

Best regards,

Andres

0 Helpfuls
  • 506 Views
2 REPLIES 2

Maik Skoddow
Tera Patron
Tera Patron

‎08-11-2025 09:59 PM

Hi @andrespinilla 

are you using https://store.servicenow.com/store/app/1d9ce3ee1b246a50a85b16db234bcbe5 ?

If yes:

 

Create a Data Resource for pm_project

  • In UI Builder, open your page or create a new one.

  • Add a Data Resource:

    • Choose “Table” as a source.

    • Set Table: pm_project

    • Define any filter or conditions (e.g., active projects, projects in a certain portfolio).

  • Optionally, add related data (project tasks from pm_project_task) if you want to show subtasks in the chart.

 

Add and Configure the Gantt Chart Component

  • In your UI Builder page, add the Gantt Chart component from the component library.

  • In the component’s configuration panel:

    • Bind the data resource to the component:

      • For the top-level items (projects), set the data source to your pm_project Data Resource.

      • Configure fields such as:

        • Name (project name)

        • Start date (planned_start_date, or a custom date field)

        • End date (planned_end_date)

        • Progress/percent complete (optional)

        • Hierarchy details, if you want to expand tasks or subtasks.

    • If showing project tasks, create a nested data resource for pm_project_task, filtered by the project sys_id, and bind as children in the Gantt configuration.

 

Customize Columns, Timeline, and Actions

  • Choose which columns (fields) to display: project manager, priority, status, etc.

  • Set start/end dates for timelines and any custom formatting.

  • Configure actions (e.g., clicking a bar opens project record).

  • Adjust display options: sort, filter, pin columns, coloring by status, and dependency lines.

 

Hope that helps

Maik

0 Helpfuls

yogesh41
ServiceNow Employee
ServiceNow Employee

‎08-12-2025 12:16 AM

Hi,

 

Gantt being complex componenet, it accept input as json objects. You can refer APIs documented at developer site, Now Component Library | ServiceNow Developers . I have just copied sample input for the Gantt component that you can refer to configure it in UIB. Here tasks, column and config are important input json.

 

<now-gantt
    startDate="2019-07-11 02:30:00"
    endDate="2019-07-15 11:30:00"
    columns={[{name:  'text', label:  'Name', width:  300}, {name:  'startDate', label:  'Start Date'}, {name:  'endDate', label:  'End Date'}]}
    config={{readonly:  true, headerHeight:  50, gridWidth:  45}}
    tasks={[{id:  1, text:  'Project #1', startDate: '2019-07-11 02:30:00', endDate: '2019-07-15 11:30:00'}, {id:  2, text:  'Task #1', parent:  1, startDate: '2019-07-11 02:30:00', endDate: '2019-07-15 11:30:00'}, {id:  3, text:  'Task #2', parent:  2, startDate: '2019-07-11 02:30:00', endDate: '2019-07-15 11:30:00'}]}
    links={[{id:  1, source:  2, target:  3, type:  0}]}>
</now-gantt>

 

Yogesh

0 Helpfuls