Applies to:
NITRO activated sites in SharePoint online and On-premises 2013/2016/2019/SharePoint Server Subscription Edition
Description:
Crow Canyon list views can give administrators control over the items that are shown in a list view. In list views, Gantt chart is commonly used graphical representation of project schedule. It’s type of bar charts showing the start and end dates of a task. We can configure Gantt chart view in Crow Canyon list views using extended settings.
This article describes the steps to configure Gantt chart in Crow Canyon list views.
Detailed steps
In this article, we have configured Gantt chart on a Tasks list. To configure Gantt chart below columns are required except ‘Parent Lookup’
Columns used in Gantt chart
- Title
- Start Date
- Due Date
- Percent Complete
- Parent Lookup (Optional)
Sample output of a Gantt chart from list view web part:
Configurations
To configure Gantt chart, go to the site -> Site Settings -> Crow Canyon List Views -> Edit any existing list view configuration or create a new list view configuration.
Go to Advanced Settings and configure the below JSON in Extended Settings JSON as shown below
"GanttChart":{"Enable":true,"Settings":{"ChartColumns":{"Title":"LinkTitle","StartDate":"StartDate","EndDate":"DueDate","PercentComplete":"PercentComplete","ParentLookp":"ParentLookup"},"ShowWorkDays":false,"ShowWorkHours":false,"Views":["day","week","month"],"DefaultView":"month"}}
Note:
By default, list views come up with some default JSON in the ‘Extended Settings JSON’, we need to merge the given JSON with existing JSON in the list view and then put in the “Extended Settings JSON”.
Before JSON:
After JSON:
Properties of Gantt Chart:
To understand the properties of given JSON, formatted the above JSON and shown like below:
Enable: Put true/false to enable or disable the ‘Gantt Chart’ in the list view web part.
ChartColumns:
Below columns are required except ‘ParentLookup’ to configure the Gantt chart in list view webpart.
- Title
- StartDate
- EndDate
- PercentComplete
- ParentLookup (Optional)
ShowWorkDays:
Set ‘ShowWorkDays’ to ‘false’ to show all days of the week. Set to ‘true’ to show only business days of the week.
ShowWorkHours:
Set ‘ShowWorkHours’ to ‘false’ to show all hours of the day. Set to ‘true’ to show only business hours of the day.
Views:
By default, Gantt chart support below views:
- Day
- Week
- Month
DefaultView:
Specified view will be selected when Gantt chart is loaded.
Open Gantt Chart
After configuring the list view, add list view webpart to a page. Refer instructions from below articles to add list view webpart to a classic page and modern page.
Classic page: https://www.crowcanyon.info/nitro/appmanual_v2/add-view-to-classic-ui.html
Modern page: https://www.crowcanyon.info/nitro/appmanual_v2/add-view-to-modern-ui.html
Go to the list view web part and click ‘Gantt Chart’ button in list view web part as shown below:
