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

Jollen Moyani - Feb 7 '23 - - Dev Community

This is a follow-up to our previous blog, Using JavaScript Gantt Chart in SharePoint Web Part for Effective Project Management: Part 1, where we explained integrating the Syncfusion JavaScript Gantt Chart in a SharePoint web part.

Now, in this blog, we’ll see how to bind SharePoint list data to the JavaScript Gantt Chart and save the data changes made in the Gantt Chart back to the SharePoint list.

There are only two steps to do this:

  1. Data binding : Read and bind the SharePoint list data to the JavaScript Gantt Chart.
  2. Edit operation : Update the edited data from the Gantt Chart to the SharePoint list.

Let’s get started!

Data binding

A list is a collection of data displayed in rows and columns. SharePoint stores and displays information in the form of a list. These are like databases that we use to store information and build reports.

Step 1: Prepare SharePoint list data

You can bind an existing list from your SharePoint page or create a new list and bind it to the JavaScript Gantt Chart. To do so, follow these steps:

  1. Create the list data with a unique field through which the Syncfusion JavaScript Gantt Chart can identify child and parent records. For instance, let’s use the data in the following code example where the TaskID field is a unique field and ParentID in some records denotes that they are child records to the TaskID value that equals the ParentID field value. 
var projectData = [
    { 'TaskID': 1, 'TaskName': 'Planning', 'StartDate': new Date('02/23/2017'), 'Duration': 5 },

    { 'TaskID': 2, 'TaskName': 'Plan timeline', 'StartDate': new Date('02/23/2017'), 'Duration': 5, 'parentID': 1 },

    { 'TaskID': 3, 'TaskName': 'Plan budget', 'StartDate': new Date('02/23/2017'), 'Duration': 0, 'parentID': 1, },

    { 'TaskID':4, 'TaskName': 'Design', 'StartDate': new Date('02/10/2017'), 'Duration': 3 },

    { 'TaskID':5, 'TaskName': 'Software Specification','StartDate': new Date('02/10/2017'), 'Duration': 3, 'parentID': 4 }
]
Enter fullscreen mode Exit fullscreen mode

The field names TaskID and ParentID can be whatever we choose, but we have to map those field names in the taskFields property of the JavaScript Gantt Chart. We will see this later in the blog.

2.Add the Gantt Chart with empty data from the SharePoint web part. For empty data binding, we can pass an empty array to the dataSource property of Gantt Chart in the render method of the web part file ( GanttChartWebPart.ts ).

Refer to the following code example.

public render(): void {
<section class="${styles.ganttChart} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
    <div id="Gantt-${this.instanceId}"></div>
</section>`;

this.ganttInstance = new Gantt({
   editSettings: {allowEditing: this.properties.allowEditing, allowTaskbarEditing: this.properties.allowEditing},
   taskFields: {
      id: this.properties.taskID,
      name: this.properties.taskName,
      startDate: this.properties.startDate,
      duration: this.properties.duration,
      progress: this.properties.progress,
      parentID: this.properties.parentID
   },
   dataSource: this.properties.dataSource,
..
}
this.ganttInstance.appendTo('#Gantt-'+this.instanceId);

protected async onInit(): Promise<void> {
 this.properties.dataSource = [];
}
Enter fullscreen mode Exit fullscreen mode

Step 2: Design properties panel to read SharePoint list data

Now, let’s design the properties panel to choose the SharePoint list data source and other input values needed for the Gantt Chart’s taskFields property to map the parent and child data from the list data source.

  1. In the getPropertyPaneConfiguration method, create a dropdown with values of list names available in SharePoint. 
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
   …
    groups: [
    {
       groupName: strings.BasicGroupName,
       groupFields: [
         PropertyPaneDropdown('selectedList', {
          label: 'Connect to List Source',               
          options: this._siteLists.map((list: string) => {
             return <IPropertyPaneDropdownOption>{
                key: list, text: list
             }
          }),
         }
       ]
    }]
  }
}
Enter fullscreen mode Exit fullscreen mode

2.Fetch the dropdown values using the SharePoint API service. I have used the SPHttpClient API to fetch the list names in SharePoint.

protected async onInit(): Promise<void> {
  this._siteLists = await this._getSiteLists();
  …
}

public async _getSiteLists(): Promise<string[]> {
  const endpoint: string = `${this.context.pageContext.web.absoluteUrl}/_api/web/lists?$select=Title&$filter=Hidden eq false&$orderby=Title&$top=10`;

  const rawResponse: SPHttpClientResponse = await this.context.spHttpClient.get(
    endpoint,
    SPHttpClient.configurations.v1);

  return (await rawResponse.json()).value.map(
     (list: {Title: string}) => {
       return list.Title;
     }
  );
}
Enter fullscreen mode Exit fullscreen mode

3.Then, add other input fields in the properties panel to map the taskFields property of the Gantt Chart instance in the render method. Refer to the following code example.

groupFields: [
   PropertyPaneTextField('taskID', {
      value: this.properties.taskID,
      label: "Task ID"
   }),
   PropertyPaneTextField('taskName', {
      value: this.properties.taskName,
      label: "Task Name"
   }),
   PropertyPaneTextField('startDate', {
      value: this.properties.startDate,
      label: "Start Date"
   }),
   …
]

public render(): void {
<section class="${styles.ganttChart} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
   <div id="Gantt-${this.instanceId}"></div>
</section>`;
…
this.ganttInstance = new Gantt({
   editSettings: {allowEditing: this.properties.allowEditing, allowTaskbarEditing: this.properties.allowEditing},
   taskFields: {
     id: this.properties.taskID,
     name: this.properties.taskName,
     startDate: this.properties.startDate,
     duration: this.properties.duration,
     progress: this.properties.progress,
     parentID: this.properties.parentID
  },
  …
})
Enter fullscreen mode Exit fullscreen mode

After doing so, the look and appearance of the properties panel will be like the following image.

Designing the Properties Panel to Read SharePoint List Data

Designing the Properties Panel to Read SharePoint List Data

Step 3: Bind SharePoint list data to the JavaScript Gantt Chart

Finally, let’s bind data from the chosen list in the dropdown of the properties panel to the Gantt Chart. Here, we will retrieve the selected list data and bind it to the Gantt Chart with the help of the click event of the Apply button in the properties panel. Using the SPHttpClient API, get data from the SharePoint list.

Refer to the following code example.

PropertyPaneButton("", {
    text: "Apply",
    onClick: () => {
        this._getSiteListItems();
    }
})
…

public async _getSiteListItems(): Promise<void> {
  const endpoint: string = `${this.context.pageContext.web.absoluteUrl}/_api/web/lists/${this.properties.selectedList}List/items`;

  const rawResponse: SPHttpClientResponse = await this.context.spHttpClient.get(
    endpoint,
    SPHttpClient.configurations.v1);
  var response = await rawResponse.json();
  this.properties.dataSource = response.value.map(
    (list: {Id: number, TaskID: number, TaskName: string, StartDate: DateTime, Duration: number, Progress: number, ParentID: number}) => {
      return {Id: list.Id, TaskID: list.TaskID, TaskName: list.TaskName, StartDate: list.StartDate, Duration: list.Duration, Progress: list.Progress, ParentID: list.ParentID}
    }
  );
}
Enter fullscreen mode Exit fullscreen mode

Refer to the following output image.

Binding SharePoint Data to the JavaScript Gantt Chart

Binding SharePoint Data to the JavaScript Gantt Chart

Editing operation

To allow users to edit the data in the JavaScript Gantt Chart, refer to editing tasks in JavaScript Gantt Chart documentation.

When a user edits data in the Gantt Chart, update the data changes back to the SharePoint list. Do this by using the actionComplete event of the Gantt Chart and sending post requests to the SharePoint list using the SPHttpClient API.

Refer to the following code example.

this.ganttInstance = new Gantt({
   dataSource: this.properties.dataSource,
   actionComplete: (args: ActionCompleteArgs) => {
     if (args.requestType == 'save'){
       for (var i = 0; i < args.modifiedTaskData.length; i++) {
         var url = this.context.pageContext.web.absoluteUrl + '/_api/web/lists/' + this.properties.selectedList + 'List/items(' + args.modifiedTaskData[i]['Id'] + ')';
         this.context.spHttpClient.post(url, SPHttpClient.configurations.v1, {
           headers: {
             'Accept': 'application/json;odata=nometadata',
             'Content-type': 'application/json;odata=nometadata',
             'odata-version': '',
             'IF-MATCH': '*',
             'X-HTTP-Method': 'MERGE'
           },
           body: JSON.stringify(args.modifiedTaskData[i])
         })
       } 
     }
   }
})
Enter fullscreen mode Exit fullscreen mode

Now the edited data in the JavaScript Gantt Chart will be updated on the SharePoint page.

GitHub reference

For more details, check out the complete code example for integrating the Syncfusion JavaScript Gantt Chart in a SharePoint web part on GitHub.

Conclusion

Thanks for reading! In this blog, we have seen how to bind SharePoint list data to the Syncfusion JavaScript Gantt Chart and save the data changes made in the Gantt Chart back to the SharePoint list. Try the steps in the part 1 and 2 blogs to effectively manage your projects.

In addition to the Gannt Chart, there are more than 80 JavaScript UI controls, such as Grid, Scheduler, Charts, and others that can also be integrated with SharePoint web parts. Try them out and leave your feedback in the comments section below.

If you want to try Syncfusion components, you can download our free trial. Also, check out our demos and documentation for detailed explanations and the facts you need to proceed further.

You can also reach us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Image
Still don't get React server components? Read this one sentence

react, webdev, nextjs
Image
The Advanced Guide To Bi Folding Door Repair
Image
Where Will Mesothelioma And Asbestos Lawyer Be One Year From Now?
Image
Mobile Apps Transforming Roofing Estimates: Top Tools for 2024
Image
StoreBuddy AI Review – Maximize Sales and Save Time with It

storebuddyai, storebuddyaireview, affiliatemarketing, digitalmarketer
Image
20 Irrefutable Myths About What Is The Lightest Self Propelled Wheelchair: Busted
Image
How To Find Zombie Hosts With Nmap?

nmap, pentest, security, network
Image
5 Asbestos Lawsuit Payouts Projects For Any Budget
Image
Strategic AI Implementation: When, Why, and How?

ai, chatgpt, learning, productivity
Image
NGS Solution - Top software development company in USA

powerapps, softwaredevelopment, webdev, sharepoint
Image
Website Design Services: Elevating Your Online Presence
Image
Understanding and Optimizing AWS RDS Performance Using Performance Insights

aws, database, performance, monitoring
Image
Fitting a Cat Flap
Image
Magia Mebli do Sypialni: Stwórz Przestrzeń Marzeń!
Image
Go's template engine “templ” is convenient (it also works with TinyGo)

go, tinygo, templ, cloudflare
Image
How Much Does a Cat Flap Cost?
Image
9 Signs That You're A Bi Folding Door Repair Expert
Image
Save Time & Effort: How a Dough Machine Simplifies Dough-Making
Image
peristiwa perjudian slots online uang asli terbeken
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .