SharePoint Online 表單概覽

SharePoint 清單是將資訊以表格形式儲存於 SharePoint 中的常見方式。建立 SharePoint 清單時,最佳做法是使用自訂表單。但您可能會想:該如何在 SharePoint Online 中建立表單?該如何在 SharePoint 中建立可填寫的表單?Microsoft Forms 能否用於 SharePoint?

這篇部落格文章將介紹 SharePoint 表單的基礎知識,重點在於 SharePoint Online 並試圖解答您對這個主題的所有疑問。

Microsoft 365 資料備份

Microsoft 365 資料備份

使用 NAKIVO 解決方案備份 Exchange Online、Teams、OneDrive 及 SharePoint Online 中的 Microsoft 365 資料,確保工作流程不中斷且零停機時間。

"形式"的定義

表單是一個包含多個欄位和標籤的視窗,用於輸入資料並填寫儲存為 SharePoint 清單的表格。使用者填寫表單後,資訊便會匯入 SharePoint。若能妥善設計表單,使用者輸入資料的準確度將更高。表單會顯示在 SharePoint 的網頁介面上。

Microsoft Forms 可用於在 SharePoint 中建立問卷。它允許您撰寫問題,並提供不同類型的欄位供使用者輸入答案。 您可以允許使用者以自由輸入模式回答問題(輸入任意文字或句子)、僅輸入數值,或從提供的選項中選擇一個或多個答案。Microsoft Forms 可分享並發佈至 SharePoint 網站。隨後,您可以透過圖表、示意圖、清單等形式檢視問卷結果。Microsoft Forms 是 Office 365 中的網頁應用程式,操作簡易,並與 SharePoint 及 Microsoft Flow(Power Automate)整合。 表單亦可用於建立採購訂單表單、休假申請表單、公司投票、測驗、檢查清單、SharePoint 網站申請等。

SharePoint 表單用於將資訊輸入至 SharePoint 清單,並可透過特殊工具進行高度自訂,以建立業務邏輯、使用動態欄位及條件格式化。 例如,您可以建立表單來為活動註冊使用者,並將與會者儲存至 SharePoint 清單中,或是根據輸入的資料以不同顏色標示欄位等。

動態欄位可讓您根據特定條件顯示或隱藏特定欄位。例如,您有一個必填欄位,其 選擇 被呼叫的類型 公司,並提供兩個選項:

  • 微軟
  • VMware

選擇 欄位名稱 VMware 產品 附有 VMware 軟體解決方案清單。

選擇 欄位名稱 微軟產品 附有微軟開發的軟體產品清單。

當您選取 微軟 來自 公司 欄位,該 微軟產品 該欄位應顯示在表單中,而 VMware 產品 該欄位將會被隱藏。

當您選取 VMware 來自 公司 欄位,該 VMware 產品 應顯示該欄位,而 微軟產品 該欄位將會被隱藏。

表單製作工具

預設情況下,SharePoint 會提供一個預設清單表單。透過此表單,您可以建立行與列、設定資料類型及其需求,並將資料輸入至 SharePoint 清單中。 對大多數新使用者而言,這項開箱即用的功能性已足夠。其優勢在於使用者無需進行任何設定即可使用預設表單,只需定義所需欄位並輸入資料即可。SharePoint 清單的預設表單支援輸入驗證、檔案附件、欄位順序最佳化以及存取限制。若您是經驗豐富且需要進階功能(例如建立商業邏輯或動態欄位來建立 SharePoint 表單)的 SharePoint 使用者,則可使用特殊工具。

InfoPath

Microsoft InfoPath 是 Microsoft Office 套件中的一款應用程式,專為進階管理 SharePoint 表單而開發。這是建立大型且複雜的 SharePoint 表單最受歡迎的解決方案之一。

InfoPath 能夠建立多種表單檢視、處理結構化資料、執行計算、處理延伸文字欄位,並建立商業邏輯和工作流程。此工具僅用於編輯表單,並未提供編輯網頁的特點。 其介面並非最直觀,使用者必須研讀文件和教學指南,才能理解如何運用此工具建立表單。不過,使用時並不需要具備程式設計技能。

遺憾的是,微軟將於 2023 年終止對 InfoPath 的支援。微軟建議您改用更現代的解決方案來建立 SharePoint 表單,因為 InfoPath 存在以下缺點:

  • 在 InfoPath 中建立的表單會以 XML 檔案格式儲存於 SharePoint 表單庫中。
  • 大型表單在載入時可能會拖慢工作流程,尤其是當附有附件時。

SharePoint 表單設計器

SharePoint Designer 是一款功能強大的工具,可用於自訂 SharePoint 表單並設定網頁介面的各個部分。這是一款網站編輯工具。您可以新增資料檢視,並將資料來源中的欄位插入為表單。您可以開啟現有的 SharePoint 清單並建立一個 .ASPX 用於渲染和控制表單的網頁。

透過 SharePoint 表單設計器,您可以變更佈局、顯示或隱藏欄位、使用資料控制項、建立工作流程、處理表單程式碼,以及新增圖形和文字。此產品由 Microsoft 免費提供,但需要具備基本的程式設計技能,並了解 SharePoint 的結構,包括 SharePoint 檔案儲存機制。

Power Apps

Power Apps 是 Microsoft Power Platform 的框架之一。此工具採用"平台即服務"的概念,並隸屬於 Office 365 套件。Power Apps 被定位為 InfoPath 的替代方案。

使用 Power Apps 的優勢:

  • 您可以從頭開始開發 SharePoint 表單,並對其進行自訂
  • 超過 200 種連接器,讓您能夠在不同平台間串接 Power Apps
  • 拖放控制項
  • 幾乎支援所有網頁瀏覽器,並獲得社群的支持
  • 與 Office 365 Dynamics 系列整合
  • 在表單中建立動態欄位

您可以透過此連結存取 Power Apps

https://powerapps.microsoft.com/en-us/

或從 SharePoint Online 中現有 SharePoint 清單的選單中。

Visual Studio

Microsoft Visual Studio 是專為程式設計師打造的終極軟體開發解決方案。若前述工具無法滿足您的需求,不妨考慮使用 Visual Studio。它幾乎能用於開發任何類型的應用程式。 它與 SharePoint 具備整合功能,程式設計師可為 SharePoint 表單建立任何所需的功能性。透過 Visual Studio 突破其他解決方案的限制,來建立 SharePoint 表單。Visual Studio 為付費解決方案。若您不喜歡上述任何用於建立 SharePoint 表單的解決方案,不妨嘗試第三方供應商的解決方案。

如何使用 Microsoft Forms 建立投票?

現在是時候進入實作環節,來看看如何使用 Microsoft Forms 在 SharePoint 中建立表單。我們就以建立投票為例,來進行說明。

  1. 在 SharePoint 網站上開啟一個新頁面,或建立一個新頁面。由於我們是從頭開始,我將先示範如何建立新頁面,然後再繼續建立一個用於投票的新表單。
  2. 請登入您的 Office 365 帳戶,開啟 SharePoint,然後開啟您的團隊網站。如需更多關於 SharePoint 的資訊,請參閱此處 部落格文章.
  3. 前往您的 SharePoint 網站首頁,點擊 New,然後按下 Page.

Creating a new page for a site in SharePoint Online

  1. 請選擇一個新頁面的範本。在我們的情況下,共有三個範本: Blank, Visual,以及 Basic text. 我們來選取第三個,並為我們的頁面設定標題—— SharePoint Online Forms. 然後按下 Create page 按鈕。

Creating a page for a team site

  1. 已建立一個頁面。請點擊 Edit (鉛筆圖示) 將 Microsoft Forms 新增至 SharePoint 網站頁面。進入編輯模式後,將滑鼠懸停在現有的網頁組件上,即可看到 Plus icon 在選定的位置新增一個網頁組件。

Adding a new web part in column one

  1. 點擊Plus圖示,然後在彈出的選單中點選 Microsoft Forms.

Adding Microsoft Forms into a new web part on a page of a SharePoint site

  1. 頁面中建立了一個新的 Microsoft Forms 元件,其中包含兩個按鈕。當我們在 SharePoint 網站上從頭開始建立內容時,我們點擊 New form. 在網頁介面右側開啟的視窗中,輸入新的表單名稱,例如, Microsoft forms example,然後按下 Create.

Creating a new form in Microsoft Forms

  1. 在 SharePoint 中建立了一個新表單,並顯示了表單的網頁網址。您可以選擇要顯示哪些資料:
  • 收集回覆
  • 顯示表單結果
  1. 點擊 Edit current form.

Selecting options for Microsoft Forms and editing the form

  1. 在建立投票表單時,我們會選取 Questions 標籤頁。下方可見一個面板,其中包含用於新增問題的Plus圖示,以及用於選取答案選項的按鈕。您可以讓使用者從提供的答案中選取一項、輸入任意文字、對職位進行評分、選取日期等。我將選取第一個選項,並輸入問題及可能的答案。

Microsoft forms example - creating a poll

  1. 您可以設定此選項,讓使用者能選擇多個答案,並將該問題設為必答,以確保使用者無法跳過此題。建立第一個答案後,請點擊 +Add new 以建立下一個答案。

Adding questions to the new poll in Microsoft Forms

  1. 請使用 Publish 在確認投票已成功建立且無誤後,請按下該按鈕。我們即將發佈一個包含該投票的頁面;因此我們不會按下 Publish 按鈕。在我們的案例中,我們在投票中建立了三個問題,如下圖所示。Questions in Microsoft Forms are ready to be published
  1. 返回您在 SharePoint 網站中插入包含投票功能 web 部件的那個頁面。檢查您的頁面,然後按下 Publish 發佈該頁面(該 SharePoint Online Forms (以我們的情況為例)該頁面包含您 SharePoint 團隊網站上的投票。The poll created by using Microsoft Forms is published on a team site page

如何建立和編輯 SharePoint 表單

讓我們透過一個範例來了解如何在 SharePoint 中建立表單,以便將資料新增至清單。這部分比建立投票稍為複雜一些。您需要先建立一個 SharePoint 清單、新增欄位,然後在 Power Apps 中自訂表單。

若要建立清單,請在 SharePoint Online 中開啟您的網站。點擊 Site Contents 在導覽窗格中,按一下 New,輸入名稱,例如, Forms SharePoint Online (因為我們建立這份清單是為了說明如何建立 SharePoint 表單),然後按一下 Create. 此外,您也可以呼叫您的清單 Warehouse (這在以下範例中適用,以便簡化名稱)。

Creating a new list in SharePoint Online

建立新清單後,請點擊 +Add column. 在網頁介面右側開啟的視窗中,輸入各欄位的參數,然後點擊 Save. 在此範例中,我建立了一個表格來呈現倉庫中儲存的物品。

該表格包含以下欄位:

  • 標題(預設為顯示):代表儲存於倉庫中的商品名稱。
  • 更多資訊(類型:是/否): 設定為 是的 如果您有該項目的其他資訊。否則請設定為 .
  • 數量(類型:數字): 目前庫位中庫存的物品數量。
  • 顏色(類型:單行文字): 允許使用者以任何格式設定任何顏色。
  • 價格(類型:貨幣): 該商品的價格必須以美元輸入。
  • 備註(類型:單行文字): 使用備註來定義該項目的附加資訊。

此表格的設計理念是,使用者僅在 Yes 值是在 More Info 欄位。如果使用者對該項目沒有任何詳細資訊,且選取 No, 在用於將資料輸入 SharePoint 清單的表單中,不會顯示用於輸入詳細資訊的欄位。預設情況下,建立表單後,所有欄位都會對所有使用者顯示。透過使用 Power Apps,您可以設定更多選項來微調 SharePoint 表單。

Adding columns to a SharePoint list before creating SharePoint forms

在螢幕截圖中,您可以看到當我們為清單建立欄位時所設定的參數(稱為 Forms SharePoint Online (在此範例中)在 SharePoint Online 中。

Adding columns to a list in SharePoint Online

一個包含所有必要欄位的全新 SharePoint 清單已準備就緒。現在您可以編輯您的 SharePoint 表單。前往 Power Apps > Customize forms. 具有管理、編輯或設計清單權限的 Office 365 使用者,可以編輯相關的表單。

Customize Office 365 SharePoint forms with Power Apps

Power Apps 將在新分頁中開啟。請等待內容載入。您可以跳過 Welcome to Power Apps Studio 對話方塊。

在網頁介面的左側窗格中,您會看到 樹狀圖 並包含 SharePoint 表單的元素。在螢幕中央,您會看到現有的欄位。您可以透過拖放來變更欄位在表單中的位置(順序),亦可新增或刪除欄位。該 Attachments 此欄位預設會被加入。若您不希望使用者在清單中儲存附件,請刪除此欄位(將游標懸停在欄位上,點擊三個點,然後按下 Remove)。在此範例中,我不會刪除該 Attachments 欄位。

在右側窗格中(該 Edit (面板),您可以編輯選取項目的屬性、將欄位以欄位形式顯示、編輯版面設定等。

Viewing fields of the SharePoint forms in the web interface of Power Apps

現在您可以設定條件格式化。在此範例中,我們將探討 MoreInfo 與……相關的領域 MoreInfo 欄位。根據此欄位中的資料(是/否),邏輯應決定是否顯示其他欄位以供輸入資料。展開 MoreInfo_Datacard1 項目,並記下該項目的名稱和編號 DataCard 值(此項目旁會顯示開關圖示)。在我們的情況下,該值是 DataCardValue2.

與將資料輸入至相應欄位相關的欄位名稱如下:

Title_DataCard1

MoreInfo_DataCard1

Quantity_DataCard1

Color_DataCard1

Price_DataCard1

Notes_DataCard1

Attachments_DataCard1

Editing SharePoint Online forms with Power Apps

現在您必須根據在 MoreInfo 領域。讓我們從 Notes_DataCard1. 點擊 Notes_DataCard1 在樹狀視圖中,並在下拉式選單中選取 Visible. 在 fx 在該欄位中,輸入公式:

If(DataCardValue2.Value = true, true)

輸入此公式後,表單中的對應欄位會消失。別擔心,這正是我們想要的效果。

對以下項目也執行同樣的操作: Price_DataCard1, Color_DataCard1, Quantity_DataCard1, 以及 Attachments_DataCard1.

在下方的螢幕截圖中,編輯完成後所有額外欄位都會消失。

Configuring visibility for a field

我們已將表單中所有必要的欄位設定為僅在選取時才顯示 YesMoreInfo 欄位。現在是時候將在 Power Apps 中編輯的表單儲存下來,以便在 SharePoint Online 中使用。

前往 File > Save,然後點擊 Save 按鈕。

Saving Forms SharePoint Online

儲存所有變更後,請點擊 Publish 至 SharePoint。您會看到一個連結,可導向您的 SharePoint 清單。

Publishing SharePoint custom forms

現在,您應將 SharePoint 清單設定為使用您自訂的 SharePoint 表單。請返回 SharePoint Online,並開啟您的清單(我們將開啟先前建立的清單,該清單用於顯示儲存於名為 Forms SharePoint Online)。點擊設定圖示,然後按下 List settings.

關於 List settings 頁面,點擊 Form settings.

Opening Office 365 SharePoint forms settings

Form settings 頁面,選擇 Use a custom form created in PowerApps,然後按下 OK.

Using a custom form created in PowerApps

現在,讓我們開啟 SharePoint 清單,並點擊 +New 按鈕。我們的自訂表單將在網頁介面的右側開啟。該 More Info 開關已開啟(等於 Yes),並顯示所有用於補充更多資訊的欄位。

Checking the customized form – additional fields are displayed to enter data

如果我們選擇 No 並關閉 More Info 切換後,不會顯示任何額外欄位。

Additional fields are not displayed in a form

我們已在 SharePoint 清單中新增了兩項項目。在新增第一項項目時,我們定義了額外資訊,這與第二項項目不同。您可以在下方的螢幕截圖中看到——第二項項目的欄位中沒有額外資料。

Viewing the list after entering data by using SharePoint forms with the name Forms SharePoint Online

我們可以透過 Power Apps 修改 SharePoint 表單,並使用自訂顏色和圖片來讓表單更具吸引力。

在 Power Apps 中開啟您的表單。選取 SharePointForm1,這是本例中的主要元素。選取的元素周圍會顯示一圈圓點邊框。點擊圓點,保持按住滑鼠左鍵,並調整元素的大小。我們將主要元素縮小以騰出空間放置圖片,並將表單的背景色改為淺藍色。

Resizing the form in Power Apps

若要新增圖片,請前往 Insert > Media > Image.

How to create forms in SharePoint and add an image to the form

Image1 現在已顯示在樹狀視圖中。選取此圖片,然後在 Properties 分頁,點擊 + Add an image file. 瀏覽影像檔案。讓我們開啟這張圖片 NAKIVO Backup & Replication.

Adding an image file to a form

開啟檔案後,您可以拉伸圖片、將其移動到所需位置,並設定透明度及其他選項。

Editing images for SharePoint Online forms

讓我們編輯表單,並將 Quantity 欄位會根據輸入的數字改變顏色。若數值小於 1,則欄位會顯示為紅色;否則則顯示為綠色。若倉庫中已無庫存,且可能需要為此產品追加訂購,此做法可吸引正在編輯 SharePoint 清單的使用者注意。

在樹狀檢視中,展開 Quantity_DataCard1,然後選擇 DataCardValue3,這是使用者應輸入倉庫中剩餘商品數量之處。在表單中選取所需欄位後,請選取 Fill 位於上方下拉式選單中的選項 樹狀圖. 您可以查看的預設值為 fx:

RGBA(255, 255, 255, 1)

此值表示將白色設定為表單的背景色。

變更預設值 fx 收件人:

If(Parent.Default<1,Red,Green)

Configuring colors from a field of a SharePoint form

請依照前述說明,在 Power Apps 中儲存表單(File > Save),並將表單發佈至 SharePoint Online。

編輯完成後,表單即會發佈。在清單中新增一項,然後編輯此項目。若在 Quantity 此欄位,此欄位將顯示為綠色。

The field is filled with the green color in a SharePoint form if the value is 1 or more

如果在 Quantity 此欄位,此欄位將顯示為紅色。

The field is red when the value is less than 1

以上即為建立 SharePoint 表單教學的結尾。您可以透過 Microsoft Power Automation(前身為 Microsoft Flow)建立工作流程,例如當任何項目的數量為 0 時,系統會自動發送 email 通知。此方法讓您能夠將自訂的 SharePoint 表單與 Power Apps 結合使用,並透過 Power Automation 自動化業務流程。

結論

Microsoft 表單通常用於建立投票、問卷調查和測驗。它們允許您在 SharePoint 網站頁面上顯示結果。SharePoint 表單是基於網頁的應用程式,用於將資料輸入 SharePoint 清單。SharePoint 表單可在 InfoPath、SharePoint 表單設計器、Power Apps 和 Visual Studio 中建立。在這篇部落格文章中,我說明了如何使用 Power Apps 自訂 SharePoint 表單,並提供了一個基本範例。 相較於預設表單,自訂表單能提供更大的靈活性與進階功能性。透過條件格式設定、公式以及與 Microsoft Power Automation 的整合,您在 SharePoint 中的工作將更加得心應手。

請務必備份 SharePoint 和 Office 365 中的資料,以防範災難及資料遺失。下載免費版本 NAKIVO Backup & Replication,這是一款適用於虛擬、雲、實體及 Office 365 環境的通用資料保護解決方案。

試試看 NAKIVO Backup & Replication

試試看 NAKIVO Backup & Replication

立即申請免費試用,全面體驗本解決方案的所有資料保護特點。15 天免費試用。無功能或容量限制。無需提供信用卡資訊。

People also read