Introduction to Using Kendo UI in SharePoint Online – A "How To" Series

This article series will provide the web developer with a detailed "how to" guide to using the the HTML5 and JavaScript framework Kendo UI by Progress in Sharepoint Online. We'll focus on using it within Office 365, although you will find the techniques applicable for on-premise as well.

The primary target for this resource is the experienced front-end web developer who has been asked to create a custom solution for SharePoint Online. But the series can equally well assist "legacy" SharePoint developers who have been developing full-trust solutions with ASP.NET and C#, helping them modernize their web development stack and use Kendo UI to boost their productivity.

I decided to write this detailed "How To" series after having written a Code Project product review for using Kendo UI in SharePoint Online. While this and several other introductory articles and whitepapers on the topic are great, they all assume you otherwise know all about SharePoint lists and how to use and create them. Of course, comprehensive coverage of all the material you would require to build out a proper solution is more than one could fit into a single article. Hence this article series where we will drill down on the following key area:

• Creating, packaging, and deploying custom SharePoint solutions;
• Referencing Kendo UI components in SharePoint Online;
• Using SharePoint Lists as a data source for Kendo UI;
• Including other frameworks and tools into your development.

Article Topics in this Series

The articles in this series will start coming out in the weeks to follow, and here is the outlined plan of articles and topics (which will likely evolve):

• Introduction (this article)
• How To Create SharePoint Solutions with Visual Studio and VS Code
  • SharePoint Declarative Sandbox Solution
  • SharePoint Hosted Add-In
  • SharePoint Framework
• How To Reference Kendo UI in SharePoint Solutions
  • Declarative Sandbox Solution and Kendo UI References
  • Deploying the Declarative Sandbox Solution
  • Test Using Kendo UI Online Sample
• How To Use a SharePoint List as a Data Source for Kendo UI
  • A Discussion of SharePoint Lists
  • Creating SharePoint Schema in Visual Studio
  • Deploying the Updated Declarative Sandbox Solution
  • Hooking Kendo UI Data Source to SharePoint List
  • Including SharePoint Web Pages in Your Deployment
  • REST Data Optimization
  • Updating SharePoint Lists
  • Implementing Optimistic Concurrency
  • Working with Document Libraries
• How To Use Kendo UI Office UI Theme and Other Frameworks
  • Using The Kendo UI Office UI Theme
  • Incorporating Office UI Fabric
  • Incorporating TypeScript
  • Incorporating Angular 2
• Conclusion

Here we will cover the essential techniques and best practices centered on using Kendo UI within SharePoint Online with a SharePoint list as the data source. You will not necessarily have to read this series through from start to finish. Depending on your background you may simply be focusing in on specific topics. For example, an experienced Kendo UI developer may focus more on building out and deploying the SharePoint solution, where as a front-end developer experienced with SharePoint аdd-in development may be looking to incorporate the productivity boost that Kendo UI offers.

What is Kendo UI and Why Use It in SharePoint/Office 365?

Kendo UI provides the SharePoint developer with a comprehensive library of advanced, responsive HTML5 widgets, such as a data grid, charts and scheduler. Importantly, it includes an Office 365-inspired theme to help developers customize Office 365 without having to spend time to write custom CSS in order to not have your custom UI look out of place. Kendo UI is not a replacement for your favorite JS framework - rather,it is designed to work alongside jQuery, Angular JS and Angular 2 and make web developers more productive. It can even work alongside Office UI Fabric.

Kendo UI can be used not only in SharePoint Online, but also in SharePoint 2010 / 2013 / 2016 on-premise as well. This makes it a suitable choice for your "application modernization strategy." In fact, I suggest that you use Kendo UI now to develop in your current environment, knowing that this will benefit you as you plan to migrate your applications from on-remise to the cloud.

You need not be a JavaScript guru before you can consider the benefits of Kendo UI. Kendo UI will boost your development productivity regardless of your current skill level. Both the beginner and expert will benefit. In fact, Kendo UI has helped accelerate my own modern web development learning curve.

Getting Ready To Follow Along

To follow along with building the example solutions you will require the following:

• Visual Studio 2013 or 2015
• Team Site in SharePoint Online
• Kendo UI
• Fiddler

Please see the following article " Get started creating SharePoint-hosted SharePoint Add-ins" and focus on the "Set up your dev environment" section where it describes how to "Get the tools" and "Sign up for an Office 365 Developer Site". We'll come back to working with a SharePoint Add-In later in the article series.

Then download Kendo UI and Fiddler. We will be using Fiddler to examine the responses from our REST queries.

Optional: Personally, as I work in the world of both SharePoint Online as well as On-Premise, I like to have a full SharePoint Development VM running locally on my machine. If you would be interested in investing the time to set one up, please follow the excellent guide provided by Critical Path Training. Just sign up as a member to access the guide - it's free to join.

Create a Team Site Collection

Create a new Team Site Collection and call it "Kendo UI Sandbox". In my case, my site collection URL is http://telerik.kendoui.sharepoint/sites/sandbox/.

Using "Add an App" from the Site Settings menu, add a "Contacts" list called "MyContacts," and create a few entries in this list.

Your site should be similar to the following:

Add some contacts to the list, after which your MyContacts list should appear similar to the following:

Take a moment to view the "Site Contents" from the Site Settings Menu. You can see the new MyContacts list. Take special note of the Style Library. We'll be using this shortly as the place to store our Kendo UI assets!

What's Next

Next in our article series is "How To Create SharePoint Solutions with Visual Studio and VS Code." We are going to not only create our custom solution, but also package and deploy it to SharePoint Online. To do this, we have three supported development models:

• Declarative Sandbox Solutions
• SharePoint Add-In
• SharePoint Framework

Each development model is a valid choice for different reasons and you will get detailed guidance on setting up our sample application for each scenario.

Related resources:

• Preparing Your Toolbox for the SharePoint Framework with Angular, Webpack and Kendo UI (Whitepaper)
• How to Prepare Your Toolbox for the SharePoint Framework (blog)
• Moving into the Modern Age of SharePoint Development (blog)
• Building SharePoint Add-ins with Kendo UI (tutorial)