Gantt Dashboard & Reporting

[fran_oisschneid]

The 'Gantt Dashboard' has been created to address customer requirements first in UK (Lloyds Banking Group), then Switzerland (PMI Philip Morris international), and France (L'Oréal).

It had great feedback from customers, and from ServiceNow people who saw it.

It is enough flexible to address many requirements, and enough complete to be reusable. This share is here to help you to implement your own Gantts.

Note: ServiceNow stopped the "Share" site as of April first 2021. The Gantt Dashboard is now available for the community only.

The update set works for all versions London, Madrid, New York, Orlando, Paris, Quebec, Rome, San Diego. As it only reads data and displays it on a dashboard, it will probably work for future version.

AFAIK my first customer on London version never had to update anything when upgrading to newer versions.

There are two versions of the Gantt Dashboard, the first working with only on table, the second which can work and display multiple tables, to show in the same Gantt Demands plus Projects plus Programs bars for sample.

Attached to this post are two pdf documents. The "multi tables" document "Custom Gantt Guide - multi tables - 04may2020 - v0.8" only describes the differences with the "mono table" document. Please read first the mono table document "Custom Gantt Guide - 25february2020 - v0.7" to understand how it goes.

The mono table code didn't move since 25th February 2020 but it is still valid.

The multi tables still evolves but I didn't have time to update the doc since 4th May. By the way you have some room to play with it before asking for the latest version.

There are two attached update sets.

"ITBM FSC Gantt Dashboard - UPDATE SET - 25february2020 - v0.7.xml" is the update set for the mono table Gantt, the document details how to install it and how to use it. It works on all ServiceNow versions since London.

There are more setups for the multi table Gantt as it comes with custom filters to make up for OOTB missing features. All details in the multi tables doc. They also work on all ServiceNow versions since London.

The update sets for multi table are the files:

• ITBM Multi-Gantt Configuration 04may2020.xml
• ITBM Gantt Date Table.xml
• ITBM PMO Gantt Roadmap.xml

Mono and multi tables update set install all dashboard samples, this is easier to start with all the samples mentioned in the documents.

In addition are two .txt files with the latest code for mono table and multi tables Gantts, only small changes and no bug fix, with files "Mono table - 21april2022.txt" and "Multi tables - 26september2022.txt".

Here after is the change log since December 2020, updated as of 14th October 2022.

"Mono table - 21april2022 - added anchor and hrefs.txt" includes these two updates:

20 April 2022	Add anchortarget layout option, to setup how to open links, default opens in same window, values are _self (default, same window), _blank (opens a new tab)
20 April 2022	Add layout href option to manage URLs when clicking links, this is set with layout "href" option as JSON string with ':' replaced with '#', the sys_id is set in @@ key string. Not compatible with anchorsysid and anchortable.

"Multi tables - 20april2022.txt" includes these updates:

18 December 2020	Add nested data not directly linked to Gantt table, to draw project bars having external links on tasks: new nesteddatatable option
20 December 2020	Add nested data with a stack option, to show stacked nested data on the parent bars, instead to rollup, the number of levels to stack is set in the option, stack and rollup must not be used together
12 January 2021	Add tree bars - Gantt bars apply to tree bars when set on a tree table: set new treebars to map dates, set new ganttbar to get the dates, set new ganttbar to draw the dates
22 January 2021	Add anchortarget layout option, to setup how to open links, default opens in same window, values are _self (default, same window), _blank (opens a new tab)
26 January 2021	Add oGantt.hrefs option to manage URLs when clicking links, this is an object with a key per table to setup, the sys_id is set in @@ key string. Not compatible with anchorsysid and anchortable.
08 February 2021	Add oGantt.treeoptions parameter "dotwalkparentfields: 'true'" to tell to dot walk on tree parent fields, to be able to group by portfolio.portfolio_manager instead of portfolio for sample
17 February 2021	Cleaned code, replaced gs.log() calls by gs.info(), removed getRowCount() call, replaced evaluation method eval() by Function()
20 April 2022	Add column header fields translation from the first table when oGantt.fieldlabels are not set (as it was for mono table Gantt)
20 April 2022	Add calculation of min and max dates in case oGantt.treexxx parameters are not set (flat table)
26 September 2022	Add URL parameters, for instance to get filter from portal page URL, list fields to filter for each table

Screenshots of what can be done (more in the docs):

  

[John W5]

Good day Francois Schneider . . . it appears you have created a very robust solution here for various projects and Gantt chart displays.

NOTE:  I have not downloaded and imported your solution, as I just came across your write-up today, with your other link for the downloads / instructions.

I don't know if anyone has bothered to check with you about this, but we are currently on Orlando, and will be doing a "test" upgrade in our sandbox instance to Paris in a few weeks.

[NOTE:  I just saw you had updated your notes to indicate compatible with Orlando; great!]

Thanks, again, for sharing your work and your accomplishments with this solution.

John

[andersbogsjo]

Hi François!

Great job you have made there. 

I was wondering one thing.

How easy, and how to do if I would like to custumize for instance the GanttProject and add another column to it?

Maybe it is to find in the documentation. But would be happy if you could just explain it?

I tried just to add it in the Javascript Gannts Custum (row 83)

but I suppose ther is more places to custumize to make it work?

Regards

Anders

[andersbogsjo]

Hi again François!

I actually found the answer myself in the documentation. It was just to configure the UI Widget. Remove the widget from Dashboard and add it again.

Thanks again for a great feature

Regards

Anders

[andersbogsjo]

Hi François!

We have now Used the Gantt Custum for a time and the users are really satisfied with it.

I would like to contact you about a couple features that have been asked for.

1. For example in the Widget pm_project - the user would like to have for example the number clickable to the record (as a link) not just the drawn bars. That is asked for for the widgets that contains records. Also for demands.
   
   
2. A function - mouse over or an icon that displays information about the record not shown in a column (other fields from the record)
   
   
3. Sorting functin on all columns shown by clicking on the header (of course not the GANTT)

Feel free to contact me here or by my email anders.bogsjo@vgregion.se

Thanks in advance

Regards

Anders

[fran_oisschneid]

Hello,

This is a report, and it should be compatible effortless with all future versions as long as ServiceNow supports the underlying technologies as Widgets, UI Macros, Scripts Includes and dashboards.

Best regards,

François

[fran_oisschneid]

Hi Anders,

Thank you for your feedback, I very much appreciate when people like my work 🙂

1. Only the bar(s) can be clicked. New options allow to decide what to display when clicking the bar, to show the record in a new tab, to show the "Analysis" tab of the project workspace (the URL you want in fact).

To add the feature you are asking is possible, but I developed the Gantt for my customers and ServiceNow pre-sales. I take note of your requirement but I don't know when I would be able to address it.

2. Same answer than 1. to address this requirement.

You can pop-up bubble(s) with mouse over the bar(s) and display the fields you want.

Please look at oGantt.gantt.title and oGantt.styles.title options. Samples as:

1. title: 'number|short_description|state|status|u_country|u_description'
2. title: '#Key milestone|#Planned:|end_date|#Actual:|work_end'
3. title: 'gantt_bar_name|orig_start|orig_end'

• '#' is a key character to display litteral texts.
• 'gantt_bar_name' is a key word to display the bar name.
• '|' is a separator which acts as a carriage return.

3. This one is also feasible, even a tad more complex to implement.

Today I use the Gantt menu to display sorts and filters I want to make available to users.

Best regards,

François

[andersbogsjo]

Hi François!

Thank you very much for your fast reply.

Regards

Anders

[fran_oisschneid]

Hi Anders,

In fact for your two first points, you can use the 'layout' options layoutscript and fieldfunction to click fields and display information on the cell you want.

The function would be something like this:

function getField(grData, oField, ganttName) {

    // Remove "null" texts
    if (oField.value == null)
        oField.value = '';

    // Click the number + set project manager title

    // target='_blank' opens the link in a new tab, \x0A = carriage return

    if (oField.field == 'number')

        oField.value = ''<a title='Project Manager:\x0A" + grData.getDisplayValue('project_manager') + "' target='_blank' style='color:black;' href='/nav_to.do?uri=%2Fpm_project.do%3Fsys_id%3D" + grData.getValue('sys_id') + "'>' + oField.value + '</a>';

   // Display information

    else if (oField.field == 'short_description')

        oField.value = "<span title='Description:\x0A" + grData.description + "'>" + oField.value + "</span>";

    return oField;

}

Other sample URLs are:

Project workbench, first 'Analysis' tab (in the sysparm_view parameter), replace @sys_id@ with the record sys_id :

/nav_to.do?uri=%2F$pmview.do%3Fsysparm_view%3Dsummary%26sysparm_projid%3D@sys_id@%26sysparm_class_name%3Dpm_project%26sysparm_entity%3Dproject

Program workbench:

/ppsworkbench?id=pgm_track&sysparm_entity=program&sysparm_sys_class_name=pm_program&sysparm_sys_id=@sys_id@&sysparm_title=Program%20Workbench&sysparm_format_gantt=true&sysparm_nostack=yes

Portfolio workbench:

/ppsworkbench?id=pw_overview&sysparm_entity=portfolio&sysparm_sys_class_name=pm_portfolio&sysparm_sys_id=@sys_id@&sysparm_title=Portfolio%20Workbench&sysparm_format_gantt=true&sysparm_nostack=yes

Best regards,

François

[andersbogsjo]

Hi again François!

Thanks again for your inputs and suggestions.

I have one question about the function?

Were do I paste it in - is it at the bottom of the Widget Script Gantt Custum?

I tried that but I got an error doing that:

Regards

Anders

[fran_oisschneid]

Hi Anders,

I think at least there is an error in my function, that I didn't see with the default font, to debug the function should be right.

For instance you can replace the two single quotes with a double quote, set oField.value = "<a title instead of oField.value = ''<a title

Then check the way to declare the function, I am not sure that "function getField" is right, it may be more like:

<<Widget Script Gantt Custom name>>.getField = function(grData, oField, ganttName) {

Best regards,

François

[andersbogsjo]

Hi François!

Thanks! No errors this time, but I can't get it to function, but I will try with one of our devolpers as well. 

Regards

Anders

[andersbogsjo]

Hi François!

I would just like to inform you that one of our developers managed to find a nice way to make the numbers in a Gantt widget that contains numbers by configuring the Script Include "AjaxMacroGanttChartDashboard".
On row 3373 put in:

//Display all "number" fields as links to record form
if(JSON.stringify(oGantt.fields[i]) == "\"number\""){
rowLeft = rowLeft + '<td align="' + fieldAlign + '"><div class="ganttCell" style="width:' + cellWidth + 'px;">' + "<a href='/nav_to.do?uri=%2F" + grData.getValue('sys_class_name') + ".do%3Fsys_id%3D" + grData.getValue('sys_id') + "' target='_blank'>" + grData.getDisplayValue(oGantt.fields[i]) + '</a>' +'</div></td>';
}

This will make the number as a link and clickable and the record will be opened in a new tab

It might be som widgets that doesn't work after that but for the ones we use (Project & demand) it works very well

Regards

Anders

[fran_oisschneid]

Hi Anders,

Yes it will work, for all tables having a sys_class_name column.
But I prefer to set a layoutscript and fieldfunction which I think is more flexible and generic 🙂

Best regards,

François

[matteo13]

Hi Francois,

I just now see this post, it looks really good!
the link to download it seems not to work anymore, is it possible to restore it?

Thanks,

Matteo

[fran_oisschneid]

Hi Matteo,

ServiceNow stopped the "Share" site as of April first 2021.

ServiceNow warned me about this several times, to allow me to move my contribution to the ServiceNow store, as the "Store" will the new place to share components and applications.

I tried for the three last months to distribute something to the store, but I couldn't.

I am still trying to use the store. If I finally can't then I will add attachments to this post.

Best regards,

François

[renatodecastroj]

Hi François,

I would like to try this dashboard on my personal instance, may you able to provide the new link where the update set and documentation is?

Thanks a lot!

[J Trunnelle]

Thank you for your efforts!  I don't see your project in the store or share so I'd wager you weren't' successful pushing it up.  Perchance do you still have the update sets to share or a github location or a guest login to your pdi or something like that?

Much thanks!

[fran_oisschneid]

Hi Matteo,

The link was dead because ServiceNow removed the Share site.

I updated my post and now you can get everything here.

Best regards,

François

[fran_oisschneid]

Hello "Stop and Think" (are you a robot?),

The link was dead because ServiceNow removed the Share site.

I updated my post and now you can get everything here.

Best regards,

François

[Stephanie Tave1]

Hi François, I am trying to use your multi-table Gantt chart, and am unable to figure out how to update the fields that show up in the header.  The names of the fields like "Portfolio, Bus. Unit, Department, Inv. Class, etc" don't update with the new fields I add in the widget parameters (although the data does seem to update, it just doesn't match the headers).  Could you let me know what I am missing?

[fran_oisschneid]

Hello,

You should change the values in the UI Widget, then remove the widget from the dashboard, then add again the widget in the dashboard.

The widget parameters are copied to the dashboard when you add the widget to it.

To have something dynamic, you need to setup the parameters in a function, there are parameters in the widget to call the “style” function.

Best regards.

[Edoardo Gattei]

> Please email me if you need them

what's your e-mail? 😄

[fran_oisschneid]

Hi Eduardo,

Good question, in fact there is no email in the community.

Here it is: francois.schneider@servicenow.com

[Matteo Pantani]

Hi @fran_oisschneid ,

thanks a lot for your work!

My question is: when you click on the gantt bar, you go directly to the project form...is there a way to pass the sysparm_view parameter in the URL? I would like to "force" a specific view, but cannot find in which script the URL is built.

Thanks

[fran_oisschneid]

Hello Matteo,

You can use "href" options to tell the URL you want. You declare the project sys_id place holder in the URL with @sys_id@.

You can combine with anchortarget target option to tell if the link opens in the Gantt or in a new browser tab, values are _self (default, same window), _blank (opens a new tab).

If you use the mono table Gantt and set the options in the UI Widget, you may set option with one entry per table as:

 'layout': 'anchortarget:_blank',
 'hrefs': 'pm_project:now/workspace/project/planner/pm_project/@sys_id@',

If you use multiple table Gantt and set the option in a script include, you may set options with one entry per table as:

oGantt.layout = { anchortarget: '_blank' };

oGantt.hrefs = { };

oGantt.hrefs['pm_project'] = 'nav_to.do?uri=%2F$pmview.do%3Fsysparm_view%3Dsummary%26sysparm_projid%3D@sys_id@%26sysparm_class_name%3Dpm_project%26sysparm_entity%3Dproject';

oGantt.hrefs['pm_program'] = 'ppsworkbench?id=pgm_track&sysparm_entity=program&sysparm_sys_class_name=pm_program&sysparm_sys_id=@sys_id@&sysparm_title=Program%20Workbench&sysparm_format_gantt=true&sysparm_nostack=yes';

oGantt.hrefs['pm_portfolio'] = 'ppsworkbench?id=pw_overview&sysparm_entity=portfolio&sysparm_sys_class_name=pm_portfolio&sysparm_sys_id=@sys_id@&sysparm_title=Portfolio%20Workbench&sysparm_format_gantt=true&sysparm_nostack=yes';

[Matteo Pantani]

@fran_oisschneid 

Hello Francois,

the 'layout' parameter is working but somehow 'hrefs' is not.

Is there something that i am missing?

'Progetti' : {
'unique_name' : 'GanttProject',
'table' : 'tsp1_project',
'sorts' : 'start_date, short_description',
'filter' : 'sys_class_name=tsp1_project',
'options': 'apply_acl:true, max_rows:500',
'fields': 'short_description, project_manager, primary_portfolio, percent_complete, GANTT',
'sizes': '21, 10, 7, 4, 58',
'gantt': 'name:Planned, start:start_date, end:end_date, color:#ED9BAD, height:10, offset:4, progress:percent_complete, colorprogress:#00375D ^ name:First Planned, start:u_prima_planned_start, end:u_prima_planned_end, color:#C8FFC8, height:6px, offset:15px, strokewidth:0',
'layout': 'anchortarget:_blank',
'hrefs': 'tsp1_project:now/workspace/project/planner/tsp1_project/@sys_id@'
},

[fran_oisschneid]

@Matteo Pantani 

Hello Matteo,

Your syntax is correct.

Can you check the displayed URL when using standard menus and opening a project workspace for team space 1?

[Matteo Pantani]

@fran_oisschneid  Here you are:

/nav_to.do?uri=%2F$pmview.do%3Fsysparm_view%3Ddetails%26sysparm_projid%3Dae9c2314873f9190ed7a40490cbb35a1%26sysparm_class_name%3Dtsp1_project%26sysparm_entity%3Dproject

[fran_oisschneid]

Hi Matteo,

So I assume that your parameter should be:

'hrefs': 'tsp1_project:/nav_to.do?uri=%2F$pmview.do%3Fsysparm_view%3Ddetails%26sysparm_projid%3D@sys_id@%26sysparm_class_name%3Dtsp1_project%26sysparm_entity%3Dproject'

[Matteo Pantani]

Hi @fran_oisschneid ,

do you think it is possible that the dot.walking it is not working to print the dates of the bar?

'gantt':        'name:Planned, start:u_project.start_date, end:u_project.end_date, color:#ED9BAD, height:10, offset:4, progress:u_project.percent_complete, colorprogress:#00375D',

This line seems not to work, thanks

Matteo

[fran_oisschneid]

Hello Matteo,

When displaying dates on bars, the GlideRecord fonction .getDisplayValue is called, and it works with dot walked fields.

When a label date format is set, to not use the default user session format, the GlideRecord fonction .getValue is called which doesn't work with dot walk fields (it returns null).

If your dot walk field doesn't work, then remove the label date format and it should be fine.

FYI the full code called  when a label date format is set:

new GlideDateTime( glideRecord.getValue('dot walked field') ).getDate().getByFormat('label date format')

[Matteo Pantani]

Hello @fran_oisschneid ,

what will happen when the platform analytics will be live with Washington release? Will this widget still be available on that UI?

Thanks

Matteo

[fran_oisschneid]

Hello @Matteo Pantani,

The Gantt widget is not available on platform analytics.

You need to continue to use the classic dashboard page.

It should be possible to create a new platform analytics "Data visualization" to bring Gantt reports, but I currently have no plan to migrate it to platform analytics.

Best regards,

François