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:
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):
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.
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.
To follow along with building the example solutions you will require the following:
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.
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 new Team Site Collection and call it "Kendo UI Sandbox". In my case, my site collection URL is
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!
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:
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.
Subscribe to be the first to get our expert-written articles and tutorials for developers!