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

Labels:

Comments

Post a Comment

Popular posts from this blog

Update user language and regional settings with CSOM

Following my previous post around multilingual aspects of SharePoint Online:  Modify Site Regional and Language settings with JSOM and JavaScript Here is some CSOM code which updates the personal regional settings of the current user or another user (if you are a tenant admin and have the rights to update user profiles) Before update: The code: using Microsoft.SharePoint.Client ; using Microsoft.SharePoint.Client.UserProfiles ; using System.Security ; namespace UpdateLanguagePreference { class Program { static void Main ( string[] args ) { //Tenant Admin Details string tenantAdministrationUrl = " https://yoursite-admin.sharepoint.com/ " ; string tenantAdminLoginName = " tenantadmin@yoursite.onmicrosoft.com " ; string tenantAdminPassword = " password " ; //AccountName of the user whos property you want to update. ...
Post a Comment
Read more

Power shell Script to get External Users on Office 365

Hello Everyone,  Below is the Powershell script to get all external users from office 365 tenant. #--------------------------------------------------------------------------------------------------------------------------- $host.Runspace.ThreadOptions = "ReuseThread" #Definition of the function that gets all the external users in a SharePoint Online Tenant. function Get-SPOExternalUsers {     param ($sUserName,$sMessage,$sSPOAdminCenterUrl)     try     {             Write-Host "----------------------------------------------------------------------------"  -foregroundcolor Green         Write-Host "Getting all the external users in a SharePoint Online Tenant" -foregroundcolor Green         Write-Host "----------------------------------------------------------------------------"  -foregroundcolor Green         $msolcred = Get-Credential -UserName...
Post a Comment
Read more

Build and Deploy a custom theme in SharePoint 2019: Using C# and Site features

Custom Theme and Branding are common to use cases and all kinds of business users like to have the personalized team and collaboration sites. today I am posting C# code that will help to build custom features for SharePoint 2019 site.   If need any assistance, I would be happy to help: kamal_pandey@outlook.com  ----------------------------- Code to build  custom features---------- using System; using System.Collections.Generic; using System.Globalization; using System.Linq; using System.Text; using System.Threading.Tasks; using Microsoft.SharePoint; using Microsoft.SharePoint.Utilities; namespace SharePointBranding.Code {     public class BrandingManager     {         public SPWeb Web { get; set; }         public BrandingManager(SPWeb web)         {             Web = web;         }         public void SetMasterPage(stri...
Post a Comment
Read more