在 SharePoint Online 中的網頁組件連線

在 SharePoint Online 中的網頁組件連線

附註: 我們想要以您的語言,用最快的速度為您提供最新的說明內容。 本頁面是經由自動翻譯而成,因此文中可能有文法錯誤或不準確之處。 讓這些內容對您有所幫助是我們的目的。 希望您能在本頁底部告訴我們這項資訊是否有幫助。 此為英文文章出處,以供參考。

當您新增至網站新版頁面,請新增及自訂網頁組件,也就是頁面的建置組塊。 您可以連線至彼此建立您的頁面檢視器互動式和動態體驗的部分網頁組件。 例如,您可以連線的文件庫網頁組件的檔案檢視器網頁組件。 當使用者按一下文件庫清單中的檔案名稱時,檔案檢視器會顯示該特定檔案的內容。 或者,將清單網頁組件連線到內嵌網頁組件,並新增自訂的程式碼,以產生各式各樣的動態體驗。

附註: 

  • 某些功能會逐漸推出給已加入首已設定目標發行計劃的組織。 這表示您可能還無法看到此功能,或看起來可能與說明文章中描述的不一樣。

  • 本文中的網頁組件無法在傳統頁面上使用。

您可以連線的網頁組件包括: 清單內容網頁組件、 檔案檢視器網頁組件,與內嵌網頁組件。 以下是如何使用這些連線的網頁組件的一些範例。

顯示根據使用者在文件庫中選取的檔案 (連線檔案檢視器網頁組件至文件庫網頁組件)

在這個範例中,使用者可以瀏覽行銷活動文件庫,並查看所選檔案中的內容,而不需離開頁面,並不需要開啟每個檔案。

連線至文件庫的檔案檢視器網頁組件的範例

方法如下:

  1. 您在頁面上,新增您想要使用的文件庫與文件庫網頁組件,新增檔案檢視器網頁組件

  2. 如果您第一次新增檔案檢視器網頁組件,會開啟 [最近的文件] 窗格。 按一下 [在這個窗格右下方的 [取消]。

  3. 按一下 [編輯網頁組件 網頁組件編輯] 按鈕 在左側的 [檔案檢視器網頁組件]。

  4. 按一下省略符號 (...) 頂端右邊的 [屬性] 窗格中,然後按一下 [來源的連線

    連線至來源] 按鈕
  5. 來源的連線] 底下,選取您想要使用從下拉式清單的文件庫。

    檔案檢視器屬性] 窗格以連線至來源下拉式清單
  6. 按一下X ] 窗格的頂端將其關閉。

  7. 按一下頁面頂端的 [儲存為草稿]。

  8. 選取您所選的文件庫中的文件以測試您的連線。 您應該會看到顯示檔案檢視器網頁組件中的文件。

  9. 當您準備好對簡報對象看到的頁面時,按一下 [在上方 [發佈頁面右上方。

根據使用者在清單網頁組件中選取清單中顯示的項目 (清單網頁組件連線清單內容網頁組件)

如果您有大型清單與多欄,很難找到所需的特定資訊。 清單內容網頁組件,使用者可以從清單網頁組件中,選取一個項目,並查看只有您指定的值。 下列範例中,在清單網頁組件會包含區域辦公室的清單。 當使用者從清單中選取項目時,清單的內容網頁組件顯示僅 Office 名稱與銷售資料。

與清單內容網頁組件連線的清單範例

方法如下:

  1. 您在頁面上,新增您想要使用的清單網頁組件,然後新增清單內容網頁組件

  2. 按一下 [編輯網頁組件 網頁組件編輯] 按鈕 在左側的清單內容網頁組件]。

  3. 按一下省略符號 (...) 頂端右邊的 [屬性] 窗格中,然後按一下 [來源的連線

    連線至來源] 按鈕
  4. 來源的連線] 底下,選取您要使用從下拉式清單的清單。

  5. 顯示] 下方選取您要讓使用者請參閱在您的頁面上。 

  6. 若要顯示的欄位] 下選取您想要顯示的值之資料行旁邊的核取方塊。

    清單內容網頁組件] 窗格
  7. 按一下頁面頂端的 [儲存為草稿]。

  8. 從您選擇清單中選取項目以測試您的連線。 您應該會看到您在清單的內容網頁組件中指定的值。

  9. 當您準備好對簡報對象看到的頁面時,按一下 [在上方 [發佈頁面右上方。

顯示視訊、 影像或根據使用者選取清單網頁組件中的位置 (內嵌網頁組件連線至清單網頁組件)

使用內嵌網頁組件中,您可以輸入連結或內嵌程式碼,使用變數,讓您可以顯示各種根據您的網頁檢視器的選取項目。 以下是您無法選取的影像、 影片和位置的顯示方式的三個範例。

顯示所選的 YouTube 影片

在這個範例中,清單網頁組件會包含多個 YouTube 影片與視訊的標題和識別碼清單。 當使用者從清單選擇視訊時,內嵌網頁組件顯示的視訊。 內嵌網頁組件中的連結使用變數來表示由使用者從清單選擇視訊的視訊識別碼。

內嵌網頁組件連線至清單的範例

方法如下:

  1. 建立清單含有標題] 欄,欄用您的視訊識別碼 (如上述範例中)。 識別碼是 YouTube 連結,以識別視訊,並找到之後的部分"v = 」 部分的連結。 例如,在下列連結,斜體的部分是視訊識別碼:

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

  2. 您在頁面上,新增清單網頁組件並選擇視訊識別碼清單。

  3. 新增內嵌網頁組件

  4. 按一下 [編輯網頁組件 網頁組件編輯] 按鈕 在左側內嵌網頁組件]。

  5. 按一下省略符號 (...) 頂端右邊的 [屬性] 窗格中,然後按一下 [來源的連線

    連線至來源] 按鈕
  6. 來源的連線] 底下,從下拉式清單選取向下]。

  7. 在下方的網站位址或內嵌程式碼,新增 [YouTube] 連結。 而不是使用個別的視訊識別碼,不過,使用 [清單] 欄包含識別碼為變數名稱。 以左括號、 $、 和右括號表示變數名稱後面。 以下是的範例,其中視訊識別碼是資料行名稱:

    內嵌網頁組件屬性窗格顯示已連接的清單

  8. 按一下頁面頂端的 [儲存為草稿]。

  9. 從您選擇清單中選取項目以測試您的連線。 您應該會看到顯示內嵌網頁組件中的視訊。

  10. 當您準備好對簡報對象看到的頁面時,按一下 [在上方 [發佈頁面右上方。

顯示選取的影像

在這個範例中,清單網頁組件會儲存在 SharePoint 網站上的影像包含影像標題和 Url。 當使用者從清單選擇影像時,內嵌網頁組件會顯示該影像。 在這個範例中,IFrame 程式碼會使用內嵌網頁組件,而變數代表影像連結。

內嵌網頁組件連線至清單的影像的範例

方法如下:

  1. 建立清單含有您圖像 Url 標題資料行和資料行的。

    提示: 若要取得您的影像 URL,請移至影像儲存位置的文件庫,以滑鼠右鍵按一下影像,然後按一下 [複製連結。 然後按一下 [複製]。 現在您可以將連結貼到您的清單。

  2. 您在頁面上,新增清單網頁組件並選擇您的影像 url 的清單。

  3. 新增內嵌網頁組件

  4. 按一下 [編輯網頁組件 網頁組件編輯] 按鈕 在左側內嵌網頁組件]。

  5. 按一下省略符號 (...) 頂端右邊的 [屬性] 窗格中,然後按一下 [來源的連線

    連線至來源] 按鈕
  6. 來源的連線] 底下,從下拉式清單選取向下]。

  7. 在 [網站位址或內嵌程式碼,新增內嵌程式碼。 在此範例中的內嵌程式碼是:

    <iframe 寬度 = 「 693 」 高度 = 「 390"src ="[$Image URL]"frameborder ="0"allowfullscreen = 」 「 允許 = 「 加速計;「 自動播放 」;加密媒體;級陀螺儀;在圖片圖片 」 ></iframe>

    [$Image URL] 在哪裡表示圖像 Url 的資料行名稱的變數。

    所選影像的內嵌程式碼範例
  8. 按一下頁面頂端的 [儲存為草稿]。

  9. 從您選擇清單中選取項目以測試您的連線。 您應該會看到 theimage 內嵌網頁組件中顯示。

  10. 當您準備好對簡報對象看到的頁面時,按一下 [在上方 [發佈頁面右上方。

顯示所選的位置

這個範例中,在清單網頁組件會包含位置和其座標。 使用者從清單選擇一個位置,內嵌網頁組件會在 Bing 地圖上顯示該位置。 在這個範例中,IFrame 程式碼會使用內嵌網頁組件,而且變數代表座標。

連線內嵌網頁組件顯示的位置,從清單的範例

方法如下:

  1. 建立清單具有標題] 欄和緯度和經度資料行。

  2. 您在頁面上,新增清單網頁組件,並選擇清單的位置資訊。

  3. 新增內嵌網頁組件

  4. 按一下 [編輯網頁組件 網頁組件編輯] 按鈕 在左側內嵌網頁組件]。

  5. 按一下省略符號 (...) 頂端右邊的 [屬性] 窗格中,然後按一下 [來源的連線

    連線至來源] 按鈕
  6. 來源的連線] 底下,從下拉式清單選取向下]。

  7. 在 [網站位址或內嵌程式碼,新增內嵌程式碼。 在此範例中的內嵌程式碼是:

    <iframe 寬度 = 「 500 」 高度 = 「 400"src ="https://www.bing.com/maps/embed?h=400&amp;w=500&amp;cp= [$Latitude] ~ [$Longitude] &amp; lvl = 13&amp; 輸入 = d&amp; sty = r&amp; src = SHELL&amp;表單 = MBEDV8 」 frameborder ="0"捲動 ="no"> </iframe>

    位置 [$Latitude] 和 [$Longitude] 是代表這些點的每個資料行名稱的變數。

    若要顯示的位置的內嵌程式碼範例
  8. 按一下頁面頂端的 [儲存為草稿]。

  9. 從您選擇清單中選取項目以測試您的連線。 您應該會看到 Bing 地圖會顯示在內嵌網頁組件中顯示的位置。

  10. 當您準備好對簡報對象看到的頁面時,按一下 [在上方 [發佈頁面右上方。

附註: 

  • 內嵌程式碼必須 iframe 型 (也就是開始和結束 <iframe> 標記)。 內嵌程式碼使用 <script> 標籤不受支援。

  • 您可以內嵌僅安全的網站。 請確認網站的 URL 開頭為 HTTPS。

增進您的 Office 技巧
探索訓練
優先取得新功能
加入 Office 測試人員

這項資訊有幫助嗎?

感謝您的意見反應!

感謝您的意見反應! 我們將協助您與我們的其中一個 Office 支援專員連絡以深入了解您的意見。

×