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 Framework extensions to Call Azure Function

In this article, we will talk about prerequisites, how to call Azure Function from SPFX extension, How to Create HHTP function, connect Visual Styuid editor to Azure and publish them, and Set Up CORS on the Azure Function, Create SharePoint Framework Extension, Azure Function, etc. Prerequisites :  Azure Subscriptions   VS code  Spfx Development Env  -   Step by steps details: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment  Follow the below steps to create Azure Functions in the Azure portal.  Steps by steps guide:  https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-aadhttpclient-enterpriseapi    Reference :  https://docs.microsoft.com/en-us/answers/questions/430645/how-to-access-sharepoint-rest-api-in-my-function-a.html Step-1 : Login to Azure Portal (https://portal.azure.com/)   Step-2 : As highlighted below, click on the  + Create a resource, and click on “Comput...
Post a Comment
Read more

Office 365 Admin Tool -PowerShell

Copy the inline Command and Create PS1 File.  Function welcome{         Clear;         Write-Host "******************************************************"  -foreground Red         Write-Host "     Welcome to Office365 Administrator Tool          " -foreground Red         Write-Host "******************************************************"  -foreground Red } Function Login {         while(1){                 Welcome;                 Import-Module MsOnline;                 Write-Host "step 1" -ForegroundColor yellow;                 Write-Host " Enter Office365 account : " -nonewline;                 $global:adm_ac...
Post a Comment
Read more