O365 - SPFX - Using KendoUI on the SharePoint Framework ClientWebParts

One of the key drivers for the SharePoint Framework is to give developers the ability to implement SharePoint solutions using tools and languages that have become widespread in the community. In this post, we will illustrate how to utilise Kendo UI components within the SharePoint Framework ClientWebParts.

If you don't know, Kendo UI is a fantastic set of controls that allow developers to build business applications by using a set of very rich UI capabilities.

Before looking into the example, you may want to check out the following links to get a deeper undestanding of what problems Kendo UI solves:

• 70+ UI components with ready to download themes.
• Out of the box support with the KO
• NPM support
• Third-Party tools support and Framework support - Require, TypeScript etc.

Setup the SPFX environment and create a basic client web part:

1. In this example, I have used the Drop 2 version of the SPFX components. If you have Drop 1 installed it with the Drop 1, then you will need to upgrade.
2. Create a new Client Webart using Yeoman SharePoint Generator using the Knockout template option.

Install the Kendo UI NPM Package:

1. Run "npm install --save kendo-ui-core" on the terminal from the SPFX solution folder to install the Kendo UI core components. (Note: the professional version of the Kendo UI can be downloaded as mentioned here).

Install Jquery NPM Package:

• Kendo UI components depends on the Jquery, so we have to install the jquery using the "npm i --save query" command from the terminal to setup the dependencies.

Install the Typings for Jquery and Kendo:

1. We have to install the typings for the Kendo and Jquery so that the typescript can build the package without any errors.
2. Run "tsd install jquery --save" from the terminal to install the jquery typings.
3. Run "tsd install kendo-ui --save" from the terminal to install the Kendo UI typings.
4. If the "tsd" is not installed, it can be installed by running "npm i -g tsd".
5. Run "npm list -g --depth=0" to list all the top level packages.

Dependencies:

• After installing Kendo UI and Jquery, the dependencies in the package.json are updated as below.

   1:   "dependencies": {

   2:      "@microsoft/sp-client-base": "~0.2.0",

   3:      "@microsoft/sp-client-preview": "~0.2.0",

   4:      "@types/kendo-ui": "^2016.1.32",

   5:      "jquery": "^3.1.0",

   6:      "kendo-ui-core": "^2016.2.727",

   7:      "knockout": "3.4.0"

   8:    },

Configure the Knockout template and Properties to render the "DateCreated" property:

• Setup a new property "DateCreated" within the SPFX ClientWebParts within the <SPFXWebPart>WebPartProp.ts as below

   1:  export interface IKendouiWebPartProps {

   2:    dateCreated: string;

   3:  }

• Amend the Knockout template to render the new "dateCreated" property as a writeable (text) and readonly(label).

   1:  <div data-bind="attr: {class:cssClass}">

   2:    <div data-bind="attr: {class:containerClass}">

   3:      <div data-bind="attr: {class:rowClass}">

   4:        <div class='ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1'>

   5:          <span class='ms-font-xl ms-fontColor-white'>

   6:            SharePoint Framework custom properties using Kendo UI

   7:          </span>

   8:          <p class='ms-font-l ms-fontColor-white'>

   9:            Customize SharePoint experiences using Web Parts.

  10:          </p>  

  11:          <input id='ts' data-bind="value: dateCreated">

  12:          <p class='ms-font-l ms-fontColor-white'>

  13:            <p class='ms-font-l ms-fontColor-white'>

  14:            Date Created:

  15:          </p> 

  16:          <p class='ms-font-l ms-fontColor-white' data-bind="text:dateCreated">

  17:          </p>

  18:          <a data-bind="attr: {class:buttonClass}"}

  19:            href='http://ift.tt/2bo5zWC'>

  20:            <span class='ms-Button-label'>Learn more</span>

  21:          </a>

  22:        </div>

  23:      </div>

  24:    </div>

  25:  </div>

Modify the <SPFX>WebPart.ts to bind the Control with the Kendo UI:

• Import the Jquery, Kendo UI core and the Module loader

   1:  import * as jquery from 'jquery'; 

   2:  import 'kendo-ui-core';

   3:  import ModuleLoader from '@microsoft/sp-module-loader';

• Load the Kendo UI css on the constructor using the module loader.

   1:  public constructor(context: IWebPartContext) {

   2:     super(context);

   3:     this._id = _instance++;

   4:     ...

   5:    ModuleLoader.loadCss('http://ift.tt/2c9PZ08');

   6:    ModuleLoader.loadCss('http://ift.tt/2bXd9Kf');

   7:  

   8:     ...

   9:   

  10:    }

• Overwrite the Render method to initialise the Kendo datepicker control.

   1:   public render(): void {

   2:      $('#ts').kendoDatePicker();

   3:   }

Build and Deploy the package:

• Kendo UI date picker is displayed and when the date is changed the KO binding updates the content as well.

In the example above we've shown how to use the Kendo UI date picker component. However, as you can imagine, this can be easily extended to use the other professional components from the Kendo UI Professional.

In the next post, I will show how to use Kendo UI components to render the properties as a PropertyPaneCustomField with the Knockout binding.

by Balamurugan Kailasam via Everyone's Blog Posts - SharePoint Community