Getting Started with Syncfusion JavaScript (Essential JS 2) library and SharePoint Framework (SPFx)

This article provides a step-by-step introduction to configure Syncfusion JavaScript (Essential JS 2) library and build a simple SharePoint framework application in Visual Studio Code.

Prerequisites

• Node.js
• Visual Studio Code

Setup development environment

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

on Windows:

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

on OSX / LINUX

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

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

2. Then, create a new client-side web part by running the Yeoman SharePoint Generator.

yo @microsoft/sharepoint

3. Set up the following options when the above command is prompted.
4. Accept the default ej-2-sharepoint as your solution name, and then press the Enter key.
5. Choose SharePoint Online only (latest), and press the Enter key.
6. Choose Use the current folder to place the files in current location, and press the Enter key.
7. Type N to require the extension to be installed on each site explicitly when it is being used.
8. Choose WebPart as the client-side component type to be created.

Next, it will ask the specific information about the web part.

1. Change the ButtonComponent as your web part name, and then press the Enter key.
2. Accept the default ButtonComponent description as your web part description, and then press the Enter key.
3. Accept the default No javascript framework as the framework, and then press the Enter key.

4. After configuring the above setup, the Yeoman generator will create the SharePoint client-side web part under ej2-sharepoint folder and install the required default dependencies.

Configure Syncfusion JavaScript UI control in application

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

npm install @syncfusion/ej2 --save

2. Open the SharePoint application in Visual Studio Code, and add the Syncfusion JavaScript Button control script and styles in the ~/src/webparts/buttonComponent/ButtonComponentWebPart.ts file.
3. Import the Button source and add Syncfusion JavaScript style reference at the top of the file.
4. Add the HTML button element in this.domElement.innerHTML, and initialize the Syncfusion JavaScript Button in the render() method of ButtonComponentWebPart class.

....
....

import styles from './ButtonComponentWebPart.module.scss';
import * as strings from 'ButtonComponentWebPartStrings';

// import Essential JS 2 Button
import { Button } from '@syncfusion/ej2-buttons';

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

....
....

export default class ButtonComponentWebPart extends BaseClientSideWebPart<IButtonComponentWebPartProps> {

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

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

        // initialize button control
        let button: Button = new Button();

        // render initialized button
        button.appendTo('#normalbtn');
    }

    ....
    ....
}

3. Run the application using the following command line, and the Syncfusion JavaScript Button control will be rendered in web browser.

gulp serve

Click the Add a new web part in column one.

Select the ButtonComponent web part.

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