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

Signing in Nintex Mobile: Authentication

Authentication Nintex Mobile supports three ways of authentication. ·          Corporate Account : Choose this method when we want to connect directly to your on-premises SharePoint instance. ·          Microsoft Account :  Choose this method when we SharePoint server is not available on the internet and you are using Nintex Live as a gateway between the Nintex Mobile apps and your on-premises intranet.  ·          Office 365 Account: Choose this method when we want to connect the Nintex Mobile apps to your Office 365 tenancy running Nintex Forms for Office 365. Signing in with a Corporate Account A Corporate account is used when connecting directly to your SharePoint environment over a Your VPN, If associate know the URL of your SharePoint server, and associate have a secure connection to it, we may want to use your corporate accou...
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

Powershell Script to Restrict Group Creation on Office 365

$GroupName = "<SecurityGroupName>" $AllowGroupCreation = "False" Connect-AzureAD $settingsObjectID = (Get-AzureADDirectorySetting | Where-object -Property Displayname -Value "Group.Unified" -EQ).id if(!$settingsObjectID) { $template = Get-AzureADDirectorySettingTemplate | Where-object {$_.displayname -eq "group.unified"}     $settingsCopy = $template.CreateDirectorySetting()     New-AzureADDirectorySetting -DirectorySetting $settingsCopy     $settingsObjectID = (Get-AzureADDirectorySetting | Where-object -Property Displayname -Value "Group.Unified" -EQ).id } $settingsCopy = Get-AzureADDirectorySetting -Id $settingsObjectID $settingsCopy["EnableGroupCreation"] = $AllowGroupCreation if($GroupName) { $settingsCopy["GroupCreationAllowedGroupId"] = (Get-AzureADGroup -SearchString $GroupName).objectid }  else { $settingsCopy["GroupCreationAllowedGroupId"] = $GroupName } Set-AzureADDirectorySetting -Id $...
Post a Comment
Read more