在 SharePoint Online 中连接 web 部件

在 SharePoint Online 中连接 web 部件

注意: 我们希望能够尽快以你的语言为你提供最新的帮助内容。 本页面是自动翻译的,可能包含语法错误或不准确之处。 我们的目的是使此内容能对你有所帮助。 可以在本页面底部告诉我们此信息是否对你有帮助吗? 请在此处查看本文的英文版本以便参考。

网站添加新式页面时, 将添加和自定义 web 部件, 这些部件是页面的构建基块。 你可以将某些 web 部件连接到其他 web 部件, 以便为你的页面查看器创建交互式和动态体验。 例如, 您可以将文档库 web 部件连接到文件查看器 web 部件。 当用户单击文档库列表中的文件名时, 文件查看器将显示该特定文件的内容。 或者, 将列表 web 部件连接到嵌入 web 部件, 并为各种动态体验添加自定义代码。

注意: 

  • 某些功能将逐步引入到已选择加入目标发布计划的组织。 这意味着你可能不会看到此功能,或者此功能可能看起来不同于帮助文章中的描述。

  • 本文中的 web 部件不可用于经典页面。

可以连接的 Web 部件包括: "列表属性" web 部件、"文件查看器" web 部件和 "嵌入" web 部件。 下面是有关如何使用这些连接的 web 部件的一些示例。

根据用户在文档库中选择的内容 (将文件查看器 web 部件连接到文档库 web 部件) 显示文件

在此示例中, 用户可以浏览市场活动文档库, 并在不离开页面的情况下查看所选文件中的内容, 而无需打开每个文件。

连接到文档库的文件查看器 web 部件示例

要执行此操作:

  1. 在页面上, 添加包含要使用的库的文档库 web 部件, 然后添加文件查看器 web 部件

  2. 如果你是首次添加文件查看器 web 部件, 将会打开 "最近使用的文档" 窗格。 单击此窗格右下角的 "取消"。

  3. 单击 "文件查看器" web 部件左侧的 "编辑 web 部件" "Web 部件编辑" 按钮

  4. 单击 "属性" 窗格右上角的省略号 (...), 然后单击 "连接到源"。

    "连接到源" 按钮
  5. 在 "连接到源" 下, 从下拉列表中选择要使用的文档库。

    带有 "连接到源" 下拉列表的文件查看器属性窗格
  6. 单击窗格顶部的 " X " 将其关闭。

  7. 单击页面顶部的 "另存为草稿"。

  8. 通过从所选文档库中选择文档来测试连接。 你应该会看到 "文件查看器" web 部件中显示的文档。

  9. 当您准备好让观众看到页面时, 请单击页面右上角的 "发布"。

基于用户在列表 web 部件中选择的内容 (将列表属性 web 部件连接到列表 web 部件) 显示列表中的项目

当您有一个包含多列的大型列表时, 用户很难找到他们要查找的特定信息。 使用 "列表属性" web 部件, 用户可以从列表 web 部件中选择一个项目, 并仅查看您指定的值。 在以下示例中, 列表 web 部件包含区域办事处的列表。 当用户从列表中选择某一项时, "列表属性" web 部件将仅显示 Office 名称和销售数据。

与 "列表属性" web 部件连接的列表的示例

要执行此操作:

  1. 在页面上, 添加一个包含要使用的列表的列表 web 部件, 然后添加 "列表属性" web 部件

  2. 单击 "列表属性" web 部件左侧的 "编辑 web 部件" "Web 部件编辑" 按钮

  3. 单击 "属性" 窗格右上角的省略号 (...), 然后单击 "连接到源"。

    "连接到源" 按钮
  4. 在 "连接到源" 下, 从下拉列表中选择要使用的列表。

  5. 在 "显示" 下, 选择希望用户在页面上看到的内容。 

  6. 在 "要显示的字段" 下, 选中要显示值的列旁边的复选框。

    "列表属性" web 部件窗格
  7. 单击页面顶部的 "另存为草稿"。

  8. 通过从所选列表中选择项目来测试连接。 你应该会看到你在 "列表属性" web 部件中指定的值。

  9. 当您准备好让观众看到页面时, 请单击页面右上角的 "发布"。

根据用户在列表 web 部件中选择的内容显示视频、图像或位置 (将嵌入 web 部件连接到列表 web 部件)

使用 "嵌入" web 部件, 你可以输入链接或嵌入使用变量的代码, 从而允许你根据页面查看器所选择的内容来显示各种项目。 以下是显示所选图像、视频和位置的三个示例。

显示选定的 YouTube 视频

在此示例中, 列表 web 部件包含一个列表, 其中包含多个 YouTube 视频的视频标题和 id。 当用户从列表中选择视频时, "嵌入" web 部件将显示该视频。 "嵌入" web 部件中的链接使用一个变量来表示用户从列表中选择的视频的视频 ID。

连接到列表的嵌入 web 部件示例

要执行此操作:

  1. 创建具有 "标题" 列和 "视频 id" 列的列表 (如上例中所示)。 ID 是 YouTube 链接的一部分, 它标识视频, 在链接的 "v =" 部分后找到。 例如, 在以下链接中, 斜体部分是视频 ID:

    https://www.youtube.com/watch?v =0YEPy7HRf60

  2. 在页面上, 添加列表 web 部件并选择带有视频 id 的列表。

  3. 添加嵌入 web 部件

  4. 单击 "嵌入 web 部件" 左侧的 "编辑 web 部件 "Web 部件编辑" 按钮 "。

  5. 单击 "属性" 窗格右上角的省略号 (...), 然后单击 "连接到源"。

    "连接到源" 按钮
  6. 在 "连接到源" 下, 从下拉列表中选择列表。

  7. 在 "网站地址" 或 "嵌入代码" 下, 添加 YouTube 链接。 但是, 将包含 id 的列表列的名称用作变量, 而不是使用单个视频 ID。 变量由左方括号、$ 和名称后面的右括号表示。 下面是一个示例, 其中视频 ID 是列名称:

    显示已连接列表的 "嵌入 web 部件" 属性窗格

  8. 单击页面顶部的 "另存为草稿"。

  9. 通过从所选列表中选择项目来测试连接。 你应该会看到 "嵌入 web 部件" 中显示的视频。

  10. 当您准备好让观众看到页面时, 请单击页面右上角的 "发布"。

显示所选图像

在此示例中, 列表 web 部件包含存储在 SharePoint 网站上的图像的图像标题和 url。 当用户从列表中选择图像时, "嵌入" web 部件将显示该图像。 在此示例中, 在 "嵌入" web 部件中使用 IFrame 代码, 该变量表示图像链接。

连接到图像列表的嵌入 web 部件示例

要执行此操作:

  1. 创建具有标题列和图像 url 的列的列表。

    提示: 若要获取图像的 URL, 请转到存储图像的库, 右键单击图像, 然后单击 "复制链接"。 然后单击 "复制"。 现在, 您可以将链接粘贴到您的列表中。

  2. 在页面上, 添加列表 web 部件并选择包含图像 url 的列表。

  3. 添加嵌入 web 部件

  4. 单击 "嵌入 web 部件" 左侧的 "编辑 web 部件 "Web 部件编辑" 按钮 "。

  5. 单击 "属性" 窗格右上角的省略号 (...), 然后单击 "连接到源"。

    "连接到源" 按钮
  6. 在 "连接到源" 下, 从下拉列表中选择列表。

  7. 在 "网站地址" 或 "嵌入代码" 下, 添加您的嵌入代码。 在此示例中, 嵌入代码为:

    <iframe width = "693" height = "390" src = "[$Image URL]" frameborder = "0" allowfullscreen = "" allow = "加速计;播放已加密-媒体;gyroscope;画中画 "></iframe>

    其中 [$Image URL] 是表示图像 url 的列名称的变量。

    所选图像的嵌入代码示例
  8. 单击页面顶部的 "另存为草稿"。

  9. 通过从所选列表中选择项目来测试连接。 你应该会看到 "theimage" 显示在 "嵌入 web 部件" 中。

  10. 当您准备好让观众看到页面时, 请单击页面右上角的 "发布"。

显示所选位置

在此示例中, 列表 web 部件包含位置及其坐标。 当用户从列表中选择位置时, "嵌入" web 部件将在必应地图上显示该位置。 在此示例中, 在 "嵌入" web 部件中使用 IFrame 代码, 这些变量表示坐标。

显示列表中某个位置的连接的嵌入 web 部件的示例

要执行此操作:

  1. 创建具有 "标题" 列以及用于经度和纬度的列的列表。

  2. 在页面上, 添加列表 web 部件并选择包含位置信息的列表。

  3. 添加嵌入 web 部件

  4. 单击 "嵌入 web 部件" 左侧的 "编辑 web 部件 "Web 部件编辑" 按钮 "。

  5. 单击 "属性" 窗格右上角的省略号 (...), 然后单击 "连接到源"。

    "连接到源" 按钮
  6. 在 "连接到源" 下, 从下拉列表中选择列表。

  7. 在 "网站地址" 或 "嵌入代码" 下, 添加您的嵌入代码。 在此示例中, 嵌入代码为:

    <iframe width = "500" height = "400" src = "https://www.bing.com/maps/embed? h = 400&amp; w = 500&amp; cp = [$Latitude] ~ [$Longitude] &amp; lvl = 13&amp; typ = d&amp; sty = r&amp; src = SHELL&amp;FORM = MBEDV8 "frameborder =" 0 "滚动 =" no "> </iframe>

    其中 [$Latitude] 和 [$Longitude] 是表示每个点的列名称的变量。

    用于显示位置的嵌入代码的示例
  8. 单击页面顶部的 "另存为草稿"。

  9. 通过从所选列表中选择项目来测试连接。 您应看到 "必应地图", 显示 "嵌入 web 部件" 中显示的位置。

  10. 当您准备好让观众看到页面时, 请单击页面右上角的 "发布"。

注意: 

  • 嵌入代码必须基于 iframe (即, <iframe> 标记的开头和结尾)。 不支持使用 <script> 标记的嵌入代码。

  • 仅可嵌入安全网站。 请确保网站的 URL 以 HTTPS 开头。

扩展你的 Office 技能
了解培训
抢先获得新功能
加入 Office 预览体验计划

此信息是否有帮助?

谢谢您的反馈!

谢谢你的反馈! 可能需要转接到 Office 支持专员。

×