Using JavaScript Gantt Chart in SharePoint Web Parts for Effective Project Management: Part 1
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (179).NET Core  (28).NET MAUI  (214)Angular  (110)ASP.NET  (51)ASP.NET Core  (83)ASP.NET MVC  (90)Azure  (41)Black Friday Deal  (1)Blazor  (226)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (69)Flutter  (133)JavaScript  (226)Microsoft  (120)PDF  (81)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (942)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (163)Xamarin  (160)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (158)Chart  (140)Chart of the week  (54)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (70)Development  (658)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (14)Excel  (43)Extensions  (22)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (512)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (14)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (614)What's new  (333)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Using JavaScript Gantt Chart in SharePoint Web Parts for Effective Project Management Part 1

Using JavaScript Gantt Chart in SharePoint Web Parts for Effective Project Management: Part 1

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 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 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 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

Creating a simple SharePoint Framework project

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

The SharePoint Online SPFx Yeoman Generator 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:

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 projectNow, 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 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

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.

// 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.

 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 optionFinally, we have rendered the Syncfusion JavaScript Gantt Chart in the SharePoint framework client-side web part.

Integrating Syncfusion JavaScript Gantt Chart in SharePoint Framework Web Parts
Integrating Syncfusion JavaScript Gantt Chart in SharePoint Framework Web Parts

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 feature, we need to add the allowSorting API and inject the Sort module.

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.

// 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.

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.

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.

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.

Customizing the JavaScript Gantt Chart Using the SharePoint Web Parts Properties Pane
Customizing the JavaScript Gantt Chart Using the SharePoint Web Parts Properties Pane

Like this, you can customize the other functionalities of the JavaScript Gantt Chart with the SharePoint web parts properties pane.

GitHub reference

Check out the complete source code for Integrating JavaScript Gantt Chart with SharePoint in the GitHub repository.

Easily build real-time apps with Syncfusion’s high-performance, lightweight, modular, and responsive JavaScript UI components.

Conclusion

Thanks for reading! Gantt Chart helps us to manage our projects effectively. Integrating Syncfusion’s 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 to the Gantt Chart.

If you want to try the Gantt Chart component, you can download our free trial. You can also check our online demos and 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, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed