Using JavaScript Gantt Chart in SharePoint Web Parts for Effective Project Management: Part 1
Tags: development, gantt, javascript, web
Published: 2023-01-11 13:01:13

---
title: Using JavaScript Gantt Chart in SharePoint Web Parts for Effective Project Management: Part 1
published: true
date: 2023-01-11 12:06:39 UTC
tags: Development,Gantt,JavaScript,Web
canonical_url: https://www.syncfusion.com/blogs/post/using-javascript-gantt-chart-in-sharepoint-web-parts-for-effective-project-management-part-1.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d081g2yhm2h6pk5a69ut.png
---
In this blog, we’ll see how to add the Syncfusion JavaScript Gantt Chart to SharePoint web parts and customize its functionalities with its properties pane.

[SharePoint](https://www.office.com/sharepoint "SharePoint") is a web-based platform that helps people in a team or organization work collaboratively. Through SharePoint, we can create websites to document team tasks or goals and securely manage files. It enhances an organization’s productivity by improving the workflow of people’s tasks toward the organization’s goals.

There are some built-in components in the [web parts of the SharePoint Framework](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/overview-client-side-web-parts "Overview of SharePoint client-side web parts") that help in building a webpage with a rich UI and functionalities. In addition to the built-in components, we can add any custom component to the SharePoint web parts.

Syncfusion’s [JavaScript Gantt Chart](https://www.syncfusion.com/javascript-ui-controls/js-gantt-chart "Syncfusion Javascript Gantt Chart") is a project management tool that provides a Microsoft Project-like interface for scheduling and managing projects. Its intuitive user interface allows you to visually manage tasks, task relationships, and resources in a project.

Agenda:

- Prerequisites
- Creating a simple SharePoint project
- Manual configurations in SharePoint project
- Integrating Syncfusion JS 2 Gantt Chart
- Customization of Gantt Chart using properties pane

## Prerequisites

- [Node.JS](https://nodejs.org/en/ "Node.js")–Use the most recent version (v16.15.0 is used in this blog).
- IDE–Any editor. We prefer to use [Visual Studio Code](https://code.visualstudio.com/ "Visual Studio Code").

## Creating a simple SharePoint Framework project

First, let’s create a simple SharePoint Framework project.

The [SharePoint Online SPFx Yeoman Generator](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/yeoman-generator-for-spfx-intro "Yeoman generator for the SharePoint Framework documentation") helps us quickly create a SharePoint client-side solution project with the correct toolchain and project structure. To use this project generator, install the following NPM package dependencies globally:

- [Gulp-cli](https://www.npmjs.com/package/gulp-cli "Gulp-Cli NPM package")
- [Yeoman](https://www.npmjs.com/package/yo "yo NPM package")

You can install these dependencies and the generator with the following command.

```
npm install gulp-cli yo @microsoft/generator-SharePoint --global
```

Then, create the SharePoint project using the following Yeoman command.

```
yo @microsoft/SharePoint
```

This command will ask you the following questions, and you can give corresponding answers:

- What is your solution name?
  - Give any project name. For example: **ej2-gant-and-SharePoint**.
- Which type of client-side component to create?
  - Choose **WebPart**.
- What is your Web part name?
  - Give any name for your web part. For example: **ganttChart**.
- Which template would you like to use?
  - Choose **No framework** using the arrow keys.

Refer to the following image.

![Creating a simple SharePoint Framework project](https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Creating-a-simple-SharePoint-Framework-project.png)Now, we have created a simple SharePoint project.

## Manual configurations in the SharePoint project

Next, do the following two manual configurations in the created SharePoint project.

1.**Trust SSL certificate to launch local webserver that uses HTTPS.**

Create an [SSL certificate](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment#trusting-the-self-signed-developer-certificate "Trusting the Self-Signed Developer Certificate Documentation") and configure the development environment to trust the certificate by simply executing the following command.

```
gulp trust-dev-cert
```
2.**Update the project’s hosted workbench URL.**  

The default URL for the hosted workbench in a new project always points to an invalid URL. Change the URL to the URL of your SharePoint tenant site:

  1. Locate and open the file **./config/serve.json** in your project.
  2. Then, locate the **initialPage** property in it. Change the URL to your SharePoint tenant site page’s URL. For example: **https://yourtenant.SharePoint.com/\_layouts/15/workbench.aspx**.  
 **![Change the URL to your SharePoint tenant site page’s URL](https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Change-the-URL-to-your-SharePoint-tenant-site-pages-URL.png)**  

The project is created and configured. Now, you can run it in the browser using the following command. The SharePoint tenant site page will be launched in the browser.

```
gulp serve
```

## Integrating Syncfusion JavaScript Gantt Chart

Run the SharePoint tenant site in your local development environment. Follow these steps to integrate the Syncfusion JavaScript Gantt Chart in a web part of the SharePoint project:

**Step 1:** Install the **@syncfusion/ej2** NPM package in your project using the following command.

```
npm install @syncfusion/ej2 --save
```

**Step 2:** Open the SharePoint app in Visual Studio Code or any IDE of your choice. Then, open the **~/src/webparts/ganttChart/GanttChartWebPart.ts** file.

**Step 3:** Add the Syncfusion JavaScript Gantt Chart component stylesheet reference and import the Gantt module at the top of the **GanttChartWebPart.ts** file.

```js
// import JavaScriptGantt
import { Gantt} from ‘@syncfusion/ej2-gantt’;
 
// add Syncfusion JavaScriptstyle reference from node_modules
require(‘../../../node_modules/@syncfusion/ej2/fluent.css’);
```

**Step 4:** Now, add the **div** element in the **this.domElement.innerHTML** file and initialize the Syncfusion JavaScript Gantt Chart in the **render()** method of the **GanttChartWebPart** class. Refer to the following code example.

```js
 Public render(): void {
  this.domElement.innerHTML = `
   <section class=”${styles.ganttChart} 
       ${!!this.context.sdks.microsoftTeams ? styles.teams : ‘’}”>
      …
      <div id=”Gantt-${this.instanceId}”> </div>
   </section>`;
 
   let data: Object[] = [
   {
      TaskID: 1,
      TaskName: ‘Project Initiation’,
      StartDate: new Date(‘04/02/2019’),
      EndDate: new Date(‘04/21/2019’),
      subtasks: [
         { TaskID: 2, TaskName: ‘Identify Site location’, StartDate: new 
Date(‘04/02/2019’), Duration: 4, Progress: 50 },
         { TaskID: 3, TaskName: ‘Perform Soil test’, StartDate: new Date(‘04/02/2019’), Duration: 4, Progress: 50 },
         { TaskID: 4, TaskName: ‘Soil test approval’, StartDate: new Date(‘04/02/2019’), Duration: 4 , Progress: 50 },
      ]
    },
     …
   },
];
 
let gantt: Gantt = new Gantt({
   dataSource: data,
   taskFields: {
      id: ‘TaskID’,
      name: ‘TaskName’,
      startDate: ‘StartDate’,
      duration: ‘Duration’,
      dependency: ‘Predecessor’,
      progress: ‘Progress’,
      child: ‘subtasks’,
    },
});
 
gantt.appendTo(‘#Gantt-‘+this.instanceId);
}
```

**Step 5:** Then, run the app using the **gulp serve** command and click **Add a new Web Part**. It will open a pop-up.

**Step 6:** In the pop-up, you can see the Gantt Chart integrated into the web part. Select **GanttChart** to use it in the SharePoint project. Refer to the following image.

![Select the GanttChart option](https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Select-the-GanttChart-option.png)Finally, we have rendered the Syncfusion JavaScript Gantt Chart in the SharePoint framework client-side web part.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Integrating-Syncfusion-JavaScript-Gantt-Chart-in-SharePoint-Framework-Web-Parts.png" alt="Integrating Syncfusion JavaScript Gantt Chart in SharePoint Framework Web Parts" style="width:100%">

  <figcaption>Integrating Syncfusion JavaScript Gantt Chart in SharePoint Framework Web Parts</figcaption>

</figure>

## Customization of Gantt Chart using the properties pane

We have seen how to integrate the JavaScript Gantt Chart in the SharePoint project. Now, let’s see how to enable functionalities of the Gantt Chart using the SharePoint properties pane.

For example, consider the sorting functionality of the component. To [enable the sorting](https://ej2.syncfusion.com/documentation/gantt/sorting/ "Sorting in JavaScript Gantt Chart documentation") feature, we need to add the **allowSorting** API and [inject the Sort module](https://ej2.syncfusion.com/documentation/gantt/getting-started/#module-injection "Getting started with Javascript Module injection documentation").

**Step 1:** First, import the **Sort** module and inject it into the Gantt Chart before initializing the component in the **render** method of the **GanttChartWebPart** file.

```js
// import JavaScriptGantt
import { Gantt, Sort } from ‘@syncfusion/ej2-gantt’;
…
Gantt.Inject(Sort);
```

**Step 2:** Now, add the **allowSorting** property to the **IganttChartWebPartProps** interface in the **GanttChartWebPart** file.

```js
Export interface IganttChartWebPartProps {
  description: string;
  allowSorting: boolean;
}
```

**Step 3:** Then, add a checkbox field for sorting under the **getPropertyPaneConfiguration()** method in the pages collection. Refer to the following code example.

```js
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
 return {
  pages: [
  {
     header: {
     description: strings.PropertyPaneDescription
  },
  groups: [
  {
    groupName: strings.BasicGroupName,
    groupFields: [
       …
       PropertyPaneCheckbox('allowSorting', {
       checked: this.properties.allowSorting,
       text: "Sorting in Gantt"
       }),
     ]
   }
   ]
   }
   ]
 };
}
```

**Step 4:** Finally, add the sorting API in the Gantt Chart initializing code.

```js
Gantt.Inject(Sort);
let gantt: Gantt = new Gantt({
  dataSource: data,
  allowSorting: this.properties.allowSorting,
  …
}
```

Now, you can run the project and click the **Edit Web Part** icon to see the properties pane. You can dynamically enable and disable the sorting functionality in the Gantt Chart from the properties pane.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Customizing-the-JavaScript-Gantt-Chart-Using-the-SharePoint-Web-Parts-Properties-Pane.png" alt="Customizing the JavaScript Gantt Chart Using the SharePoint Web Parts Properties Pane" style="width:100%">

  <figcaption>Customizing the JavaScript Gantt Chart Using the SharePoint Web Parts Properties Pane</figcaption>

</figure>

Like this, you can customize the [other functionalities of the JavaScript Gantt Chart](https://ej2.syncfusion.com/documentation/api/gantt/ "JavaScript Gantt Chart API documentation") with the SharePoint web parts properties pane.

## GitHub reference

Check out the complete source code for [Integrating JavaScript Gantt Chart with SharePoint](https://github.com/SyncfusionExamples/ej2-gantt-and-sharepoint "Integrating Syncfusion JavaScript Gantt Chart in Sharepoint Web part GitHub demo") in the GitHub repository.

## Conclusion

Thanks for reading! Gantt Chart helps us to manage our projects effectively. Integrating Syncfusion’s [JavaScript Gantt Chart](https://www.syncfusion.com/javascript-ui-controls/js-gantt-chart "Syncfusion JavaScript Gantt Chart") into SharePoint web parts helps in further smoothing the workflow of your team or organization.

In upcoming blogs, we will see how to connect a data source from [SharePoint lists](https://support.microsoft.com/en-us/office/introduction-to-lists-0a1c3ace-def0-44af-b225-cfa8d92c52d7 "Introduction to SharePoint lists") to the Gantt Chart.

If you want to try the Gantt Chart component, you can download our [free trial](https://www.syncfusion.com/downloads/essential-js2/confirm "Free evaluation of the Essential Studio for JavaScript"). You can also check our [online demos](https://ej2.syncfusion.com/demos/#/bootstrap5/gantt/default.html "JavaScript Gantt Chart online demos") and [documentation](https://ej2.syncfusion.com/documentation/gantt/getting-started/ "Getting started with JavaScript Gantt Chart documentation") for detailed explanations and the facts you need to proceed further.

Feel free to share your feedback or questions in the comments section. Also, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion JavaScript Library and the SharePoint Framework: A Powerful Combo](https://www.syncfusion.com/blogs/post/syncfusion-javascript-library-and-the-sharepoint-framework-a-powerful-combo.aspx "Blog: Syncfusion JavaScript Library and the SharePoint Framework: A Powerful Combo")
- [How to Develop a Flight Tracker Application with React Gantt Chart](https://www.syncfusion.com/blogs/post/flight-tracker-application-with-react-gantt-chart.aspx "Blog: How to Develop a Flight Tracker Application with React Gantt Chart")
- [Benefits of Using a Gantt Chart in Project Management](https://www.syncfusion.com/blogs/post/benefits-of-using-a-gantt-chart-in-project-management.aspx "Blog: Benefits of Using a Gantt Chart in Project Management")
- [Resource View in EJ2 Gantt Chart: A Perfect Assistant to Manage Resources](https://www.syncfusion.com/blogs/post/resource-view-in-ej2-gantt-chart-a-perfect-assistant-to-manage-resources.aspx "Blog: Resource View in EJ2 Gantt Chart: A Perfect Assistant to Manage Resources")