在此案例文章中,您將瞭解如何從頭開始建立具有 SharePoint 表單功能的應用程式。 應用程式將示範如何使用畫布應用程式來檢視、編輯、新增及刪除清單項目,而不需造訪 SharePoint 網站。

如需使用 SharePoint 表單的不同案例和其他範例的詳細資料,請移至 SharePoint 案例概觀

  • 您必須具有 SharePoint 網站的存取權,才能建立清單和清單項目。
  • 您必須熟悉 建立 設定 清單。
  • 案例詳細資料

    此案例的目的在於示範如何從頭開始建立畫布應用程式來使用清單。 在此範例示範的結尾,您將可以從畫布應用程式中執行下列工作,而不需要存取清單或其項目:

  • 檢視清單中的所有項目。
  • 依據特定欄的文字值來搜尋清單中的項目。
  • 選取清單項目。
  • 編輯清單項目。
  • 建立新的清單項目。
  • 刪除清單項目。
  • 此案例是與 SharePoint 整合時,畫布應用程式功能的基本圖解。 若要使用改善的設計或其他畫面來增強配置,請移至下列文章:

  • 新增和設定控制項
  • 新增和設定畫面
  • 瞭解表單、版面配置和卡片
  • 此案例中的範例會建立範例應用程式,以檢視、編輯、新增及刪除清單項目。 您可以根據您的選擇或業務目標,變更自訂應用程式的方式。 當您使用控制項的自訂名稱自訂應用程式時,請務必在遵循此範例中的步驟時,使用公式中的正確控制項名稱。

    此案例範例將引導您建立應用程式的步驟,並將它連接至清單,以檢視、編輯、新增及刪除清單項目。

    步驟 1 - 使用 Microsoft Lists 建立清單

    建立包含欄和清單項目的清單。 在此案例中,我們使用了具有下列欄和清單項目的清單:

    這兩個資料行都是 單行文字

    步驟 2 – 建立空白畫布應用程式

    建立 空白畫布應用程式

    步驟 3 - 將應用程式連線至 SharePoint

  • 從左窗格中選取 資料來源

  • 選取 SharePoint 資料來源。 您也可以在搜尋方塊中搜尋名稱。

  • 選取 新增連線

  • 選取連線類型。 設定時,您可以使用資料閘道連接至 SharePoint Online 或內部部署 SharePoint 網站。 此案例會連接至 SharePoint Online 網站。

  • 選取具有您之前建立之清單的 SharePoint 網站。

  • 選取您剛建立的清單。 此案例使用名稱為 形狀 的清單。

  • 選取 Connect 。 資料來源會新增至應用程式。

    步驟 4 – 新增資料表以檢視清單項目

  • 從左窗格中選取 + (插入)。

  • 展開 版面配置

  • 選取 資料表

  • 選取資料來源作為您的 SharePoint 連線。

  • 將資料表移至畫面的右下角,以便為其他元件留出空間。

    步驟 5 – 新增搜尋和選取項目的功能

  • 文字輸入 控制項插入至畫布,並將它移至下拉式清單下方。

  • 將搜尋方塊 預設 屬性更新為 依形狀搜尋 值。

  • 清單方塊 控制項插入至畫布,並將它移至先前步驟中新增的文字輸入控制項之下。

  • 從 Studio 畫面的右邊,將清單方塊控制項的 Items 屬性設為此範例的 圖形 清單。

  • 在這個範例中,將清單方塊控制項的 Valu 屬性設為 Shape 而不是 Colo

  • 將先前步驟中新增的清單方塊 Items 屬性更新為下列公式:

    Filter([@Shapes], StartsWith(Shape, TextInput1.Text))
    

    公式包含以下函數:

  • Filter() – 用在此公式中,可根據定義的參數來篩選清單方塊中的項目。 此函數中的 [@Shapes] 定義要篩選的資料來源。
  • StartsWith() – 用在此公式中,可依據圖形資料行 (資料行開頭為稍早新增之 TextInput1 控制項中的輸入字元) 篩選清單項目。
  • 步驟 6 – 新增編輯項目的功能

  • 插入編輯表單控制項。

  • 從 Studio 畫面的右邊,將編輯表單控制項的 Data source 屬性設為 Shapes

  • 選取編輯表單控制項的編輯欄位,並移除任何其他欄位(例如附件)(如果有的話)。

  • 確定圖形色彩欄位都存在。 如果不存在,請使用新增欄位來新增它們。

  • 重新排列畫面版面配置,以確保編輯表單控制項可見,且不會與其他控制項重疊。

  • 將清單方塊控制項的 OnSelect 屬性設定為以下函數:

    Set(TextSelected,1)
    

    當選取清單方塊中的值時,Set() 函數會將名為 TextSelected 的新變數設定為 1 值。 在此案例中,TextSelected 變數是用來控制新增、編輯及刪除功能的動作與行為的標誌,如下列各節所示。

  • 將編輯表單控制項的項目屬性設定為下列公式:

    If(TextSelected=1,ListBox1.Selected,DataTable1.Selected)
    

    If() 函數首先檢查變數 TextSelected 的值是否為 1。 如果是,編輯表單就會在清單方塊中顯示選取的項目。 如果不是,則編輯表單顯示從資料表中選取的項目。

  • 插入按鈕。

  • 從 Studio 畫面的右側,將先前步驟中新增按鈕的 Text 屬性設定為 Save

  • 儲存按鈕的 OnSelect 屬性設為下列公式:

    SubmitForm(Form1);
    Set(TextSelected,0)
    

    公式包含以下函數:

  • SubmitForm() – 在此公式中用於提交編輯表單並將值儲存到清單。
  • Set() – 將 TextSelected 變數重設為 o,這樣就可以從清單方塊選取新的項目。
  • 插入文字標籤控制項。

  • 將上一步驟中新增的文字標籤控制項的 Text 屬性更新為若要編輯某個項目的值,請從表格中選取或搜尋

  • 重新排列畫面上的控制項,以排序編輯控制項。

    步驟 7 – 新增新增項目的功能

  • 插入按鈕。

  • 重新排列畫面上的控制項以確保按鈕可見。

  • 更新先前步驟中新增的按鈕的 Text 屬性為新增

  • 新增按鈕的 OnSelect 屬性設為下列函數:

    NewForm(Form1)
    

    NewForm() 函數將清除新增到名為 Form1 的表單上的編輯表單控制項,以便您可以新增新的清單項目。

    步驟 8 – 新增刪除項目的功能

  • 插入按鈕。

  • 將先前步驟中新增的按鈕移動到儲存按鈕下方。

  • 將上一步中新增的按鈕的文字屬性更新為刪除

  • 刪除按鈕的 OnSelect 屬性設為下列公式:

    Remove([@Shapes], If(TextSelected=1,ListBox1.Selected,DataTable1.Selected));
    Set(TextSelected,0)
    

    公式包含以下函數:

  • Remove() – 在此公式中使用以刪除所選的清單項目。
  • If() – 首先檢查變數 TextSelected 的值是否為 1。 如果是,刪除按鈕就會從清單方塊中刪除選取的項目。 如果不是,則刪除按鈕會從資料表控制項刪除選取的項目。
  • Set() – 將 TextSelected 變數重設為 o,這樣就可以從清單方塊選取新的項目。
  • 現在您已設定所有應用程式元件,請確定畫面看起來像下列範例:

    步驟 9 - 儲存應用程式

    現在應用程式已新增了查看、編輯、新增及刪除功能,請儲存應用程式

  • 選取檔案功能表。

  • 選取儲存

  • 第一次儲存時,儲存選項會讓您使用另存新檔。 選取儲存以將應用程式儲存到雲端。

  • 關閉 Power Apps Studio。

    步驟 10 - 測試應用程式

  • 移至 Power Apps

  • 選取應用程式

  • 選取建立的應用程式。

  • 測試應用程式元件。

    在 Power Apps Studio 中編輯應用程式時,您可以使用鍵盤按鍵 Alt 和滑鼠左鍵按一下,快速預覽元件的行為。

    例如,不要從右上方選擇預覽應用程式,或者從預覽中執行該應用程式的鍵盤中選擇 F5,請改為按住鍵盤上的 Alt 鍵,然後從資料表中選擇一列以將輯表單控制項變更至所選列,就好像該應用程式正在預覽中執行一樣。

    此外,按住鍵盤上的 Alt 鍵,您可以繼續在 Power Apps Studio 中執行預覽。 例如,針對不同的動作或檢查選取多個元件。

    如果您編輯應用程式,則必須發佈變更以供其他人查看。

    在應用程式準備好使用之後,即可共用應用程式

  • 新增和設定控制項
  • 新增和設定畫面
  • 了解表單、版面配置和卡片
  • 控制項參考
  • 是否能請您告知您偏好的慣用文件語言? 請填寫問卷。 (請注意,本問卷為英文版)

    完成問卷大約需要七分鐘。 本問卷將不會收集個人資料 (隱私權聲明)。

    即將登場:在 2024 年,我們將逐步淘汰 GitHub 問題作為內容的意見反應機制,並將它取代為新的意見反應系統。 如需詳細資訊,請參閱:https://aka.ms/ContentUserFeedback

    提交並檢視相關的意見反應

  •