Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (143).NET Core  (22)Angular  (38)ASP.NET  (47)ASP.NET Core  (52)ASP.NET MVC  (83)Azure  (26)Blazor  (44)DocIO  (18)Essential JS 2  (64)Essential Studio  (159)Flutter  (46)JavaScript  (133)Microsoft  (96)PDF  (47)React  (29)Succinctly series  (118)Syncfusion  (382)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (25)Webinar  (13)Windows Forms  (52)WPF  (85)Xamarin  (104)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (97)Chart  (38)Cloud  (8)Company  (445)Dashboard  (4)Data Science  (3)Data Validation  (2)DataGrid  (27)Development  (232)Doc  (7)eBook  (89)Enterprise  (22)Entity Framework  (4)Essential Tools  (14)Excel  (11)Extensions  (6)File Manager  (3)Gantt  (6)Gauge  (4)Git  (3)Grid  (24)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (133)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (15)Performance  (1)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (13)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (3)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (8)Tips and Tricks  (12)UI  (55)Uncategorized  (68)Unix  (2)User interface  (42)Visual State Manager  (1)Visual Studio  (12)Visual Studio Code  (6)Web  (84)What's new  (53)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Syncfusion JavaScript Library and the SharePoint Framework :A Powerful Combo

Syncfusion JavaScript Library and the SharePoint Framework: A Powerful Combo

Cloud-based platforms are the present and future of app development. Microsoft SharePoint is one of the cloud-based, collaborative web platforms commonly used to create a firm’s website, manage and transfer files, secure files from being edited by unauthorized users, etc. These features enhance an organization’s productivity, reduce the workforce, improve the workflow, and save time.

In this blog post, we are going to learn step by step how to create a SharePoint Framework (SPFx) application with the Syncfusion JavaScript (Essential JS 2) library in it using VS Code.

Prerequisites

Set up development environment

First, create a client-side web part in the SharePoint Framework. To do so, please follow these steps:

Step 1: Create a new directory called ej2-sharepoint, open the command prompt from that directory, and install the required SharePoint client-side development tools with a global flag.

On Windows:

npm install -g yo gulp @microsoft/generator-sharepoint

On OSX/LINUX:

sudo npm install -g yo gulp @microsoft/generator-sharepoint

Note:The Yeoman SharePoint web part generator @microsoft/generator-sharepoint helps to create a SharePoint client-side project.

Step 2: Then, create a new client-side web part by running the following Yeoman SharePoint Generator command line.

yo @microsoft/sharepoint

Step 3: Set up the following options after the previous command is executed:

  1. Accept the default ej-2-sharepointas your solution name and then select the Enter key.
  2. Choose SharePoint Online only (latest) and select Enter.
  3. ChooseUse the current folder to place the files in the current location and select Enter.
  4. You’ll be asked: Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? (Y/N). Choose No.
  5. You’ll be asked: Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? (Y/N). Choose No.
  6. Choose WebPartas the client-side component type to be created.

Step 4: Next, it will ask for the specific information about the web part:

  1. Accept the GridComponent as your web part name, and then press the Enter key.
  2. Accept the default GridComponent descriptionas your web part description and select Enter.
  3. Accept the default No javascript frameworkas the framework and select Enter.
    Please refer to the following screenshot for clear information.

Questions asked regarding the WebpartAfter configuring this setup, the Yeoman generator will create the SharePoint client-side web part in the ej2-sharepoint folder and install the required default dependencies.

Configure Syncfusion JavaScript UI control in application

Step 1: Install the @syncfusion/ej2 npm package in the application using the following command line.

npm install @syncfusion/ej2 --save

Step 2: Open the SharePoint application in Visual Studio Code and add the Syncfusion JavaScript Grid control script and styles in the ~/src/webparts/gridComponent/GridComponentWebPart.ts file.

    1. Import the Grid source and add the Syncfusion JavaScript style reference at the top of the file.
    2. Add the DIV element in this.domElement.innerHTML and initialize the Syncfusion JavaScript Grid in the render() method of the GridComponentWebPart class like in the following code example.
....
....


import styles from './GridComponentWebPart.module.scss';
import * as strings from 'GridComponentWebPartStrings';

// import Essential JS 2 Grid
import { Grid } from '@syncfusion/ej2-grids;

// add Syncfusion Essential JS 2 style reference from node_modules
require('../../../node_modules/@syncfusion/ej2/fabric.css');

....
....

export default class GridComponentWebPart extends BaseClientSideWebPart <IGridComponentWebPartProps> {

  public render(): void {
    this.domElement.innerHTML = `
      <div class="${ styles.gridComponent }">
            ....
            ....

        <!--HTML DIV element, which is going to render as Essential JS 2 Grid-->
        <div id="Grid"> </div>
        </div>`;

        // initialize data for grid
let data: Object[] = [
    {
        OrderID: 10248, ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims'
    },
    {
        OrderID: 10249, ShipName: 'Toms Spezialitäten', ShipCity: 'Münster'
    },
    {
        OrderID: 10250, ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro'
    }]

    // initialize grid control
    let grid: Grid = new Grid({
    dataSource: data});
    // render initialized grid
    grid.appendTo('#Grid');
    }

    ....
    ....

}

Step 3: Run the application using the following command line, and then the Syncfusion JavaScript Grid control will render in your web browser.

gulp serve

Step 4: Click the Add a new web part in column one button like in the following screenshot.
Click the Add a new web part in column one button

Step 5: Select the GridComponent web part as shown in the following screenshot.
Select the GridComponent web part

Finally, the Syncfusion JavaScript Grid control is rendered in your SharePoint Framework client-side web part.

Output showing Syncfusion JavaScript Grid control rendered in SharePoint Framework client-side web partYou can easily access the Essential JS 2 library through the custom SharePoint ButtonComponent.

You can also download this complete project from this GitHub repository.

Conclusion

In this blog, we learned the steps to configure Essential JS 2 in your SharePoint Framework application. For more information, you can also refer to this documentation page. The same procedure can be followed to include any other Essential JS 2 control in an SPFx application.

Syncfusion has over 65 high-performance, lightweight, modular, and responsive UI components in a single package for JavaScript. All these components are available in other frameworks:

If you’re already a Syncfusion user, you can download the product setup from our website. Otherwise, you can download a free, 30-day trial here.

If you wish to send us feedback, please use the comments section below. If you would like to submit any questions, please feel free to contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Comments (1)

How to connect SharePoint list data, Can you add example as well?

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top