使用 Kendo UI 在 SharePoint Online 中创建用户界面
4.60/5 (4投票s)
本文通过一个为 SharePoint Online（Microsoft Office 365 套件的一部分）创建用户界面的示例，对 Progress 的 Kendo UI 进行了评测。
引言
虽然 SharePoint 列表本身有其内置的用户界面，但使用第三方组件具有其优势。SharePoint 的用户界面非常特别，我并不总是希望仅仅因为数据在 SharePoint 中就训练我的用户以一种独特的方式来维护数据。通常，我的客户，尤其是他们的内部 UI/UX 设计师，想要一些“看起来不像 SharePoint”的东西；一个符合其应用程序整体愿景的用户界面。
本文通过一个为 SharePoint Online（Microsoft Office 365 套件的一部分）创建用户界面的示例，对 Progress 的 Kendo UI 进行了评测。
作为一名多年的 .NET Windows 和 ASP.NET 开发人员，我熟悉使用 Telerik UI 控件进行这些平台上的开发，包括为 SharePoint On-Premise 进行自定义 ASP.NET Web Forms 开发。最近，我成功地在涉及“现代”Web 前端技术（包括 HTML5/CSS3 和 JavaScript 框架）的项目中使用了 Kendo UI。巧合的是，这也是微软对我们 SharePoint 开发人员的推动，因为我们在为 SharePoint Online 开发应用程序。
对于本次评测，我假设您至少有使用 SharePoint Team Site 的经验，最可能是用于文档协作。我还会假设您有一些 Web 开发背景，最好是 ASP.NET 和 Visual Studio，以及 jQuery / JavaScript 框架的工作知识。我还会假设您有为某个版本的 SharePoint 开发解决方案的经验。
什么是 Kendo UI 以及它如何融入 SharePoint/Office 365
Kendo UI 为 SharePoint 开发人员提供了一个全面的高级响应式 HTML5 小部件库，例如强大的 数据网格、图表 和 调度器。重要的是，它包含一个受 Office 365 启发的样式主题，可以帮助开发人员自定义 Office 365，而无需花费时间编写自定义 CSS，也不会导致自定义 UI 显得格格不入。Kendo UI 不是您喜欢的 JS 框架的替代品；相反，它旨在与 jQuery 和 Angular 并行工作，从而提高 Web 开发人员的生产力。它甚至可以与 Office UI Fabric 并行工作。
Kendo UI 不仅可以在 SharePoint Online 中使用，还可以在 SharePoint 2010 / 2013 / 2016 的本地版本中使用。这使其成为您“应用程序现代化策略”的合适选择。事实上，请立即使用 Kendo UI 在您当前的环境中进行开发，因为这将对您计划将应用程序从本地迁移到云时有所帮助。
您不必成为 JavaScript 大师才能考虑 Kendo UI 的优势。Kendo UI 将在您当前技能水平的基础上提高您的开发生产力。初学者和专家都会受益。事实上，Kendo UI 已经帮助我加速了我自己的现代 Web 开发学习曲线。
示例目标
客户通常希望为最终存储在 SharePoint 列表中的数据提供自定义用户界面体验。事实上，客户甚至可能不知道或不在乎您决定 SharePoint 是存储这些数据的最佳位置，甚至可能希望向用户隐藏这个“内部细节”。在此示例中，我们将使用 Kendo UI Grid 控件来显示存储在 SharePoint 联系人列表中的数据。我还希望在几个小时内完成此编程，尽可能多地进行配置，并且理想情况下无需编码。
如果您想跟随本次评测，请创建一个 OOTB Team Site 并下载 Kendo UI。使用菜单中的“添加应用”，添加一个名为“MyContacts”的“联系人”列表，并在该列表中创建几条记录。
您的站点应类似于以下内容
您的 MyContacts 列表应类似于以下内容
部署 Kendo UI 引用
无论您想在 SharePoint Online 中使用何种 JS 框架（例如 Angular），您都需要将任何相关的 JS 和 CSS 引用注入到 SharePoint 的 OOTB ASP.NET 主页中。Kendo UI 也不例外，因此我将使用 Visual Studio 的 SharePoint 工具创建一个声明式沙盒解决方案（WSP），其中包含一个“Kendo UI 引用”功能，该功能将使用自定义操作将引用注入到 ASP.NET 主页中。此时，我就可以在我的站点集合中的任何页面上使用 Kendo UI 控件了。以下 Kendo UI JS 文件是必需的，将通过模块部署到 SharePoint 站点样式库的 Kendo UI 子文件夹中
- /js/jquery.min.js
- /js/kendo.all.min.js
这是其中一个自定义操作的示例，用于 JS 文件
<CustomAction
ScriptSrc="~SiteCollection/Style Library/KendoUI/js/jquery.min.js"
Location="ScriptLink"
Sequence="110" />
以下一组 Kendo UI CSS 文件是必需的，它们是从内容分发网络 (CDN) 引用的
- http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common-office365.min.css
- http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.office365.min.css
- http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.dataviz.min.css
- http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.dataviz.office365.min.css
这是将 CSS 引用注入主页的一个自定义操作示例
<CustomAction Location="ScriptLink"
ScriptBlock="document.write('<link rel="stylesheet" type="text/css" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common-office365.min.css"></' + 'link>');"
Sequence="100" />
我的 Visual Studio 解决方案看起来是这样的
请记住，对于声明式沙盒解决方案，请将“在包中包含程序集”属性设置为 False。构建项目后，发布 WSP，然后将其上传到解决方案库（在站点设置中）并激活它
在站点集功能中，确保 Kendo UI 引用功能出现并已激活。
您还可以通过 Web 浏览器中的“查看源代码”来验证上述文件引用是否已成功注入到页面中。
运行 Kendo UI 在线示例
为了测试我们的 Kendo UI 引用是否正常工作，让我们参考Kendo UI 基本网格示例。让示例在我们的 SharePoint Online Team Site 中正常工作的步骤是
- 添加一个新页面，命名为“基本网格示例”
- 页面将以编辑模式显示。使用功能区中的“编辑源”并将以下 HTML 代码片段放入。单击“确定”。
<div id="grid"></div>
- 使用功能区，选择“插入 Web 部件”。从“媒体和内容”组中选择“脚本编辑器 Web 部件”并将其放置在页面上。
- 使用 Web 部件下拉菜单，选择“编辑 Web 部件”。选择“编辑代码片段”链接。
- 粘贴以下内容，这是从 Telerik 网页上完全复制粘贴的
<script> $(document).ready(function () { $("#grid").kendoGrid({ dataSource: { type: "odata", transport: { read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers" }, pageSize: 20 }, height: 550, groupable: true, sortable: true, pageable: { refresh: true, pageSizes: true, buttonCount: 5 }, columns: [{ template: "<div class='customer-photo'" + "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" + "<div class='customer-name'>#: ContactName #</div>", field: "ContactName", title: "Contact Name", width: 240 }, { field: "ContactTitle", title: "Contact Title" }, { field: "CompanyName", title: "Company Name" }, { field: "Country", width: 150 }] }); }); </script> - 关闭编辑器，在 Web 部件编辑窗格中单击“确定”，然后保存页面。
您的页面现在应类似于以下内容
我承认，我对自己能这么快就达到这一点感到惊喜！
将 Kendo UI 连接到从 SharePoint 列表读取数据
上一节只是说明了您可以找到 Telerik 网站上的几乎任何 Kendo UI 示例，并让它们在 SharePoint Online 中“按原样”运行。但当然，我们在这里创建 UI 是为了从 SharePoint 列表中读取数据。看看对数据源的以下修改，使其能够从 SharePoint 列表读取数据
dataSource: {
type: "json",
transport: {
read: {
url: "http://kendoui.office365.teleriknext/sites/kendoui/_api/lists/getbytitle('MyContacts')/items",
beforeSend: function (xhr) {
xhr.setRequestHeader("Accept", "application/json; odata=verbose")
}
}
},
schema: {
data: function (data) {
return data.d && data.d.results ? data.d.results : [data.d];
}
},
pageSize: 20
},
重要的更改是修改 Accept 头以指定 JSON 返回格式，并带有“odata=verbose”，因为 SharePoint 默认返回 Atom (RSS) 格式的数据。然后指定一个指向“data.d”节点的模式。
列名已更改，以反映 SharePoint 联系人列表的等效内部名称，您可以通过检查 Fiddler 的响应来自己发现这些名称。在此情况下，所需的列是 Title (Last Name)、FirstName、JobTitle、Company 和 WorkCountry。
遵循与上述添加“基本网格示例”相同的步骤，我们可以创建一个“MyContacts 示例”页面，添加网格 DIV，以及带有更新的 JavaScript 的脚本编辑器 Web 部件。生成的页面应如下所示
无需样式！
您可能会注意到，我在这些控件的样式上花费了零时间。假设我改为使用 jQuery DataTables 插件来完成这项任务。现在我将面临样式方面的工作，以便我的网格/数据表能够“融入”Office 365 UI。由于 CSS 样式绝对不是我的强项，这意味着许多令人沮丧的、对我任务没有任何增值的工作。这解决了我在典型应用程序中可能使用的众多控件之一。那么，一个自动完成搜索框呢？一个更好的日历？一个调度器控件？图表和图形？
Kendo UI DataGrid 与 Office 365 UI 无缝融合，因为 Progress（前身为 Telerik）提供了一个适用于所有控件的 Office 365 主题。因此，总而言之，消除了许多繁琐的工作，使 SharePoint 开发人员能够专注于功能和业务价值，而无需担心它的外观。
结论
我的目标是创建一个 Kendo UI Grid 控件来显示 SharePoint 联系人列表的数据。即使考虑到涉及的学习曲线，我也能在一天内完成任务。此外，根本没有编码，只是对控件进行了配置。最后，我可以重复使用我创建的许多内容用于未来的应用程序，从而将我的开发时间缩短到几个小时。
选择 Telerik 控件和 Kendo UI 来提高我的开发生产力的另一个重要且显著的原因是“按开发者”的许可模式。它允许我使用这些工具创建任意数量的应用程序，并免版税分发它们。我所认为的许可包含的专业技术支持在开发人员工具行业中是首屈一指的。但是，在联系支持之前，您通常可以在详尽的文档或活跃的客户论坛中找到答案。一个受欢迎的技术文章和信息来源是Telerik Developer Network，您还可以在那里找到一篇优秀的入门文章，使用 Kendo UI 构建 SharePoint 附加组件。
为了妥善评估 Kendo UI，请下载免费试用版。