通过

在 SharePoint 加载项的主机 Web 中创建自定义功能区按钮

  • 项目

这是有关开发 SharePoint 托管的 SharePoint 外接程序的基础知识系列文章中的第九篇文章。你应该首先熟悉 SharePoint 外接程序 和本系列中的前一篇文章，可以在 开始创建 SharePoint 托管的 SharePoint 外接程序|后续步骤。

注意

如果已完成有关 SharePoint 托管加载项的本系列文章之一，便已生成 Visual Studio 解决方案，可以在继续阅读本主题的过程中使用。 也可以从 SharePoint_SP-hosted_Add Ins_Tutorials 下载存储库，再打开 BeforeRibbon.sln 文件。

可以在主机 Web 的“网站内容”页上选择加载项的磁贴，运行所有 SharePoint 加载项。 也可以通过自定义操作（即自定义功能区按钮或自定义菜单项），在主机 Web 上呈现 SharePoint 加载项的功能。 在本文中，您将按钮添加到主机 Web 上的功能区。

准备主机 Web

若要向主机 Web 上的日历功能区添加按钮，请在 SharePoint 开发人员网站的 UI 中执行以下步骤。

  1. 在网站的主页中，依次选择“网站内容”>“添加加载项”>“日历”。

  2. 在“添加日历”对话框中，输入“员工入职培训计划”作为“名称”，再选择“创建”。

  3. 在日历打开时，将光标悬停在任意日期之上，直到日期上显示“添加”链接，再选择“添加”。

  4. 在“员工入职培训计划 - 新项”对话框中，输入“Cassi Hicks 入职培训”作为“标题”。 保留其他字段的默认设置，再选择“保存”。

    日历应如下所示：

    图 1. 自定义日历

    在“员工入职培训计划”日历中，6 月 1 日上有“Cassi Hicks 入职培训”项

重要

若要执行下一过程，日历必须显示在 Visual Studio 的 UI 中。不过，如果在创建日历时 Visual Studio 处于打开状态，日历则不可见。 继续执行操作前，请先关闭 Visual Studio，并注销在其中登录了开发人员网站的任何浏览器窗口和 PowerShell 控制台。

添加功能区自定义操作

  1. 在“解决方案资源管理器”中，右键单击“员工入职培训”项目，再依次选择“添加”>“新项”>“Office/SharePoint”>“功能区自定义操作”。 将它命名为“RunOrientationAdd-in”，再选择“添加”。

  2. “创建功能区自定义操作”向导会询问一系列问题。 给出下表中的答案，再选择“完成”。

    属性问题 答案
    想要在哪里公开自定义操作？ 选择“主机 Web”。
    自定义操作的作用范围是什么？ 选择“列表实例”（不是“列表模板”）。
    自定义操作的作用范围限定到了哪一项？ 选择“员工入职培训计划”。
    控件位于何处？ 请勿使用下拉选项。 改为输入“Ribbon.Calendar.Events.Actions.Controls._children”。 （第三部分 Events 确定了功能区的选项卡，第四部分 Actions 确定了按钮组。）
    菜单项文本是什么？ 输入“员工入职培训”。
    自定义操作转到何处？ 请勿使用下拉选项。 改为输入“~appWebUrl/Lists/NewEmployeesInSeattle”。 这是加载项 Web 中列表的列表视图页面，因此主机 Web 上的功能区按钮打开的是加载项 Web 中的页面。

检查加载项 Web 功能

在“解决方案资源管理器”中，展开“功能”文件夹，并选择“NewEmployeeOrientationComponents”功能。 此时，功能设计器打开。

请注意，创建的自定义操作“RunOrientationAdd-in”列于“解决方案中的项”内，但没有列于“功能中的项”内。 这是因为功能的部署对象是加载项 Web，而自定义操作的部署对象是主机 Web。

如果在 Visual Studio 中打包加载项以供部署到生产环境中，或如果在 Visual Studio 中按 F5，Visual Studio 的 Office 开发人员工具会创建特殊主机 Web 功能，向其中添加自定义操作，并将此功能部署到主机 Web。 不得编辑主机 Web 功能，这也是直到打包才创建此功能的原因所在。

图 2. 功能设计器

功能设计器，其列标记为“解决方案中的项”和“功能中的项”。“运行方向加载项”位于第一个，而不是第二个。

运行并测试加载项

  1. 使用 F5 键部署并运行外接程序。 Visual Studio 在测试 SharePoint 网站上临时安装此外接程序并立即运行。

  2. 此时，SharePoint 加载项的默认页面打开。 转到开发人员网站的主页（即主机 Web）。 页面左上角有它的痕迹导航链接。

  3. 在主机 Web 的主页上，选择“网站内容”。在“网站内容”页上，选择“员工入职培训计划”日历（而不是“员工入职培训”加载项）。

  4. 在日历打开时，选择事件“Cassie Hicks 入职培训”。 如果功能区上的“事件”选项卡没有自动打开，请打开它。 具体应如下所示：

    图 3. 具有自定义按钮的“事件”功能区选项卡

    “事件”功能区中有“员工入职培训”自定义按钮

  5. 在功能区上的“操作”组中，选择“员工入职培训”。 此时，“西雅图新员工”的列表视图页面打开。

  6. 若要结束调试会话，请关闭浏览器窗口或停止在 Visual Studio 中进行调试。 每次按 F5，Visual Studio 都会撤回旧版加载项并安装最新版本。

  7. 将在其他文章中使用此加载项和 Visual Studio 解决方案，因此最好在使用一段时间后，再最后撤回一次加载项。 在“解决方案资源管理器”中，右键单击此项目，再选择“撤回”。

后续步骤

本系列的下一篇文章使用 SharePoint JavaScript API 处理 SharePoint 数据将介绍如何将 JavaScript 添加到 SharePoint 加载项，并使用 SharePoint 的 JavaScript 对象模型访问 SharePoint 数据。