Skip to main content

Build SharePoint SharePoint Framework solution with Essential JS 2

Hello All, I'm very excited to say that I build Syncfusion JavaScript components that can be used in the SharePoint Framework to build a quick and reusable responsive SharePoint solution which makes it a powerful combo. 

I have built and attached a simple PnP and Syncfusion Grid control-based web part you can download and unzip the project and start building great SharePoint Framework solutions for great business.

Prerequisites : 

  • Node.js
  • Visual Studio Code
  • Internet connection to download Node js, SpFx, and Syncfusion components.  

How to run the project

  • Download and unzip attached the project to a location on your local disk.
  • Open the project in the Visual Studio Code.
  • Execute the following commands,
    npm install
    gulp serve
  • Run the project.


Reference links:

https://ej2.syncfusion.com/home/  
https://ej2.syncfusion.com/javascript/demos/#/material/grid/grid-overview.html

Download Project from here: https://github.com/SyncfusionExamples/ej2-and-sharepoint 
Replace the Code file with the below code. 

import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import styles from './SyncfusionWpWebPart.module.scss';
import * as strings from 'SyncfusionWpWebPartStrings';
import { sp } from "@pnp/sp/presets/all";
import { Grid, Group, Filter, Page, Sort } from '@syncfusion/ej2-grids';
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import { IItemAddResult } from "@pnp/sp/items";
import { Web } from "@pnp/sp/webs";
// add Syncfusion Essential JS 2 style reference from node_modules
require('../../../node_modules/@syncfusion/ej2/fabric.css');

// import Essential JS 2 Grid
export interface ISyncfusionWpWebPartProps {
  description: string;
  listItems: Object;
  addText: string;
  updateText: IListItem[];
}//
export interface IListItem {
  id: number;
  title: string;
}
export default class SyncfusionWpWebPart extends BaseClientSideWebPart<ISyncfusionWpWebPartProps> {
  protected onInit(): Promise<void> {
    return super.onInit().then(_ => {
      sp.setup({
        spfxContext: this.context
      });
    });
  }
  private web = Web("https://m365x067565.sharepoint.com/sites/KPandey-Public/");
  public async render() {
    this.domElement.innerHTML = `
      <div class="${styles.syncfusionWp}">
        <div class="${styles.container}">
          <div class="${styles.row}">
            <div class="${styles.column}">
              <p class="${styles.description}">${escape(this.properties.description)}</p>
                 <!--HTML DIV element, which is going to render as Essential JS 2 Grid-->
              <div id="Grid"> </div>
            </div>
          </div>
        </div>
      </div>`;
    const data: Object[] = await sp.web.lists.getByTitle("kp").items.select("CustomerID", "OrderID", "City", "Title", "Description").top(10).orderBy("OrderID", true).get();
    Grid.Inject(Group, Filter, Page, Sort);
    let grid: Grid = new Grid({
      dataSource: data,
      columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Left', width: 100, type: 'number' },
        { field: 'CustomerID', headerText: 'Customer ID', textAlign: 'Left', width: 100, type: 'number' },
        { field: 'City', headerText: 'City', textAlign: 'Left', width: 120, type: 'string' },
        { field: 'Title', width: 100, headerText: 'Title', textAlign: 'Left', type: 'string' },
        { field: 'Description', headerText: 'Description', textAlign: 'Left', width: 140, type: 'string' },
      ],
      height: 300,
      width: 622,
      allowGrouping: true,
      allowPaging: true,
      allowSorting: true,
      allowFiltering: true
    });
    grid.appendTo('#Grid');
  }
  public setState(arg0: { updateText: IListItem[]; }) {
    throw new Error('Method not implemented.');
  }
  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }
  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('Description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };

  }
}

You see the web part like this on page :



Need assistance please reach out to this email: kamal_pandey@outlook.com
Good luck!


Labels:

Comments

Post a Comment

Popular posts from this blog

PowerShell For create Sub site in office 365

#Add references to SharePoint client assemblies and authenticate to Office 365 site Add-Type -Path "\Software\SharePoint 2013 Client Browser v1.7\Microsoft.SharePoint.Client.dll" Add-Type -Path "\Software\SharePoint 2013 Client Browser v1.7\Microsoft.SharePoint.Client.Runtime.dll" $Username = Read-Host -Prompt "Please enter your username" $Password = Read-Host -Prompt "Please enter your password" -AsSecureString $Site = "https://XXXXXXX.sharepoint.com/sites/Test2/" $Context = New-Object Microsoft.SharePoint.Client.ClientContext($Site) $Creds = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($Username,$Password) $Context.Credentials = $Creds $csvLocation = "C:\Users\PS_SiteCollectionsToCreate.csv" $csv = Import-Csv $csvLocation #List Custom Templates $Templates = $Context.Site.GetWebTemplates("1033","0") $Context.Load($Templates) $Context.ExecuteQuery() $Templates | Whe...
Post a Comment
Read more

Create bulk Sub site Using power shell script using custom SharePoint template

#Add references to SharePoint client assemblies and authenticate to Office 365 site Add-Type -Path "\Software\SharePoint 2013 Client Browser v1.7\Microsoft.SharePoint.Client.dll" Add-Type -Path "\Software\SharePoint 2013 Client Browser v1.7\Microsoft.SharePoint.Client.Runtime.dll" $Username = Read-Host -Prompt "Please enter your username" $Password = Read-Host -Prompt "Please enter your password" -AsSecureString $Site = "https://xxxx.sharepoint.com/sites/sPOTest2/" $Context = New-Object Microsoft.SharePoint.Client.ClientContext($Site) $Creds = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($Username,$Password) $Context.Credentials = $Creds $csvLocation = "C:\Users\AA82211\Desktop\PS_SiteCollectionsToCreate.csv" $csv = Import-Csv $csvLocation #List Custom Templates $Templates = $Context.Site.GetWebTemplates("1033","0") $Context.Load($Templates) $Context.ExecuteQuery() $...
Post a Comment
Read more

Business-critical processes with SharePoint and SQL

SharePoint 2010 provides the ability to connect to backend business systems, surface business data in SharePoint and make it accessible by, and useful to, employees across the organization. Almost every company of significant size uses ERP and CRM solutions to run core business processes. Over time, companies have developed detailed practices around using such systems to support vertical disciplines within the organization (e.g. product planning, financial performance management, supply-chain management, etc.),  yet challenges remain with regard to driving visibility and collaboration, based on business data, across different disciplines and teams. These challenges stem from the fact that only a fraction of employees are licensed and trained to use those backend systems, and from the high cost and complexity of integrating such systems across different functions and teams. With SharePoint and SQL, once the relevant business data is surfaced in an enterprise-wide...
Post a Comment
Read more