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

SharePoint Capacity Management and Sizing Overview

Capacity management   is an ongoing process, because no implementation remains static with regard to content and usage. You need to plan for growth and change, so that your SharePoint Server 2013–based environment can continue to deliver an effective business solution. Capacity Planning  is only one part of the capacity management cycle. It is the initial set of activities that brings the design architect to the point where there is an initial architecture that the architect believes will best serve the SharePoint Server 2013 deployment. The capacity management model includes additional steps to help you validate and tune the initial architecture, and provides a feedback loop for re-planning and optimizing the production environment until it can support design goals with optimal choices of hardware, topology, and configuration. Capacity management versus capacity planning Capacity management extends the concept of capacity planning to express a cyclical appr...
Post a Comment
Read more

Convert SharePoint Date in to ConvertDateToISO - And Use for Custom Save

-------------Code ------------------------------------------- function ConvertDateToISO(dtDate) { //************************************************* //Converts Javascript dtDate to ISO 8601 standard for compatibility with SharePoint lists //Inputs: dtDate = Javascript date format (optional) //************************************************* //alert("InISOCOnversion");   var d;   if (dtDate != null)  {      //Date value supplied           d = new Date(dtDate);   }   else  {      //No date supplied, Create new date object      d = new Date();   }   //Generate ISO 8601 date/time formatted string   var s = "";   //alert(d.getFullYear());    if(d.getFullYear)    {    //alert("FullYear");          s += d.getFullYear() + "-";     }     else     {      //alert("ge...
Post a Comment
Read more