目前有各種資料來源,您可以使用其中一種來源從頭開始建立自己的應用程式,日後再視需要新增更多來源。 您可以指定每個 UI 項目的外觀與行為,讓您能夠針對您確切的需求和工作流程來獲得最佳的結果。 比起自動產生應用程式,這種方法會更耗時,但經驗豐富的應用程式製作人員可以建置符合自己需求的最佳應用程式。

注意:本主題乃針對 Windows 版 PowerApps Studio 所撰寫,但其步驟與在瀏覽器中開啟 PowerApps 相似。

遵循本教學課程進行,您將建立包含兩個畫面的應用程式。 在某個畫面上,使用者可以瀏覽一組記錄︰

使用者可以捲動一組資料的畫面

在另一個畫面上,使用者可以建立一筆記錄、更新記錄中的一或多個欄位,或刪除整筆記錄︰

使用者可以新增或更新資料的畫面

必要條件

您可以檢閱本教學課程中的一般概念,也可以完全遵循教學課程完成這些步驟。

  1. 複製這項資料,然後將它貼到 Excel 檔案。

    Start Day Start Time Volunteer 1 Volunteer 2
    Saturday 10am-noon Vasquez Kumashiro
    Saturday noon-2pm Ice Singhal
    Saturday 2pm-4-pm Myk Mueller
    Sunday 10am-noon Li Adams
    Sunday 10am-noon Singh Morgan
    Sunday 10am-noon Batye Nguyen
  2. 將資料格式化為名為 Schedule 的資料表,讓 PowerApps 可以剖析資訊。

    如需詳細資訊,請參閱在工作表中建立 Excel 資料表

  3. eventsignup.xls 名稱儲存檔案,然後將它上傳到雲端儲存體帳戶,例如 OneDrive。

  4. 如果您是 PowerApps 新手:

建立空白應用程式,並連線到資料

  1. 在 PowerApps Studio 中,按一下或點選 [檔案] 功能表 (靠近畫面左側) 中的 [新增]。

    檔案功能表上的新增選項

  2. 在 [空白應用程式] 圖格上,按一下或點選 [手機配置]。

    從資料建立應用程式的選項

  3. 如果出現提示,請觀看簡介導覽來了解 PowerApps 的主要區域 (或按一下或點選 [略過])。

    快速導覽

    您稍後可以隨時觀看導覽,只要按一下或點選靠近畫面左上角的問號圖示,然後按一下或點選 Take the intro tour

  4. 在左側的導覽列中按一下或點選右上角的圖示,切換至縮圖檢視。

    切換檢視

  5. 在右側窗格中,按一下或點選 [新增資料來源]。

    新增資料來源

  6. 執行下列其中一個步驟︰

    • 如果您已經與雲端儲存體帳戶連線,請按一下或點選該連線。
    • 如果您沒有與雲端儲存體帳戶連線,請按一下或點選 [新增連線]、按一下或點選您的帳戶類型、按一下或點選 [連接],然後 (若出現提示) 提供您的認證。
  7. 在 [選擇 Excel 檔案] 下,瀏覽至 eventsignup.xlsx,然後按一下或點選該檔案。

    指定您想要使用的 Excel 檔案

  8. 在 [選擇資料表] 下,按一下或點選 [排程] 核取方塊,然後按一下或點選 [連接]。

    指定您想要使用的 Excel 資料表

    右側窗格的 [資料來源] 索引標籤會顯示您已將哪些資料來源新增至您的應用程式中。

    顯示已連線的資料來源

    本教學課程只需要一個資料來源,但是您可以稍後新增更多的資料來源。

顯示資料

  1. 在 [常用] 索引標籤中,按一下或點選 [新增畫面],然後按一下或點選 [清單畫面]。

    新增有標題、子標題與 Body 項目的版面配置

    新增具有數個預設控制項的畫面,例如搜尋方塊和資源庫控制項。 資源庫會涵蓋搜尋方塊下方的整個畫面。

  2. 按一下或點選資源庫中的任何位置 (箭號除外),例如搜尋方塊正下方。

    選取資源庫

  3. 在右側窗格中,開啟 [版面配置] 清單,然後按一下或點選顯示標題、副標題和內文的選項。

    選取資源庫

  4. 在屬性清單中,按一下或點選 Items、複製此公式並貼到公式列︰

    SortByColumns(Search(Schedule, TextSearchBox1.Text, "Volunteer_x0020_1"), "Volunteer_x0020_1", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

    如果您不確定屬性清單在哪,請參閱新增和設定控制項

    注意:對於包含具有空格之資料行名稱的 Excel 和 SharePoint 資料來源,PowerApps 會將空格顯示為 "_x0020_"。 在此範例中,公式中的資料行 "Volunteer 1" 會顯示為 "Volunteer_x0020_1"

    此資源庫會顯示來自 Schedule 資料表的資料。

    資源庫中預設的 Schedule 資料

    搜尋方塊會根據使用者輸入的文字篩選資源庫。 如果使用者在搜尋方塊中輸入至少一個字母,則資源庫只會顯示其 Volunteer 1 欄位中包含使用者所輸入文字的記錄。

    排序按鈕會根據 Volunteer 1 資料行中的資料排序記錄。 如果使用者按一下或點選該按鈕時,排序順序就會在遞增和遞減之間切換。

    該公式包含 SortIfIsBlankFilterText 函式。 如需這些函式和其他函式的詳細資訊,請參閱公式參考

  5. 在搜尋方塊中輸入 i,然後按一下或點選 [排序] 按鈕一次 (或奇數次數)。

    資源庫會顯示下列結果。

    排序和篩選資源庫

    有關排序篩選其他功能的詳細資訊

  6. 按一下或點選畫面頂端的標籤控制項,以將它選取。

    選取標題列

  7. 在屬性清單中,按一下或點選 Text、複製下列文字,然後貼到公式列中。
    "View Records"

    變更標題列

建立 ChangeScreen 和其橫幅

  1. 刪除 Screen1,並且將 Screen2 重新命名為 ViewScreen

    重新命名畫面

  2. 新增畫面,並重新命名為 ChangeScreen

    新增並重新命名畫面

  3. 在 [插入] 索引標籤上,按一下或點選文字,然後按一下或點選標籤

  4. 設定您剛才新增的標籤控制項︰

    • 將其 Text 屬性設為以下公式:
      "Change record"
    • 將其 Fill 屬性設為以下公式:
      RGBA(62, 96, 170, 1).
    • 將其 Color 屬性設為以下公式:
      RGBA(255, 255, 255, 1)
    • 將其 Align 屬性設定為 Center
    • 將其 X 屬性設定為 0
    • 將其 Width 屬性設定為 640

    標籤 控制項會反映您的變更。

    有橫幅的 ChangeScreen

新增並設定表單

  1. 在 [插入] 索引標籤中,依序按一下或點選 [表單]、[編輯]。

  2. 移動表單並調整大小以涵蓋大部分的畫面。

    新增表格

    表單預設名稱為 Form1,除非您已新增並移除一個表單。 若是該情況,請將表單重新命名為 Form1

  3. Form1DataSource 屬性設定為 Schedule

  4. Form1Item 屬性設定為下列運算式:
    BrowseGallery1.Selected

  5. 在右側窗格中,按一下或點選每個欄位的的核取方塊,以顯示欄位。

    在表單上顯示欄位

  6. 在表單底部附近,按一下或點選 [新增自訂卡片]。

    新增自訂卡片

  7. 在新卡片中新增標籤控制項。

  8. 將新控制項的 AutoHeight 屬性設定為 true,並將其 Text 屬性設為以下公式:
    Form1.Error

    標籤會顯示表單的任何錯誤。

  9. 在左側導覽列中,按一下或點選 [ChangeScreen] 的縮圖來加以選取。

  10. 在 [插入] 索引標籤上,按一下或點選 [圖示],按一下或點選選項來新增上一步箭號,然後將箭號移至畫面左下角。

  11. 將箭號的 OnSelect 屬性設為以下公式:

    ResetForm(Form1);Navigate(ViewScreen,ScreenTransition.None)

    當使用者按一下或點選箭號時,Navigate 函式會開啟 ViewScreen

  12. 在表單下方新增按鈕控制項,並將該控制項的 Text 屬性設為 "Save"

    新增儲存按鈕

  13. 將按鈕的 OnSelect 屬性設為下列公式:

    SubmitForm(Form1); If(Form1.ErrorKind = ErrorKind.None, Navigate(ViewScreen, ScreenTransition.None))

    當使用者按一下或點選按鈕時,SubmitForm 函式會儲存資料來源的所有變更,且 ViewScreen 會重新出現。

  14. 在畫面底端新增另一個按鈕,將其 Text 屬性設為 "Remove",並將其 OnSelect 屬性設為以下公式:

    Remove(Schedule,BrowseGallery1.Selected);
    If(IsEmpty(Errors(Schedule)),Navigate(ViewScreen,ScreenTransition.None))

    當使用者按一下或點選此按鈕時,Remove 函式會移除記錄,ViewScreen 會重新出現。

  15. Remove 按鈕的 Visible 屬性設為下列公式:
    Form1.Mode=FormMode.Edit

    此步驟會在使用者建立記錄時隱藏 Remove 按鈕。

    ChangeScreen 符合此範例:

    最後的 ChangeScreen

從 ViewScreen 設定瀏覽

  1. 在左側導覽列中,按一下或點選 ViewScreen 的縮圖。

    開啟 ViewScreen

  2. 按一下或點選資源庫中第一筆記錄的 [下一步箭號]。

    下一步箭號

  3. 將該箭號的 OnSelect 屬性設為下列公式:

    Navigate(ChangeScreen,ScreenTransition.None)

  4. 在右上角按一下或點選加號圖示。

    新增記錄

  5. 將所選圖示的 OnSelect 屬性設為下列公式:

    NewForm(Form1);Navigate(ChangeScreen,ScreenTransition.None)`

    當使用者按一下或點選此圖示時,ChangeScreen 就會顯示,且每個欄位都是空白的,讓使用者可以更輕鬆地建立一筆記錄。

執行應用程式

在自訂應用程式後,請在 [預覽] 模式中執行應用程式以測試變更,如本節中的步驟所述。

  1. 在左側導覽列中,按一下或點選頂端縮圖以選取 ViewScreen

    選取 ViewScreen

  2. 按下 F5 (或按一下或點選靠近右上角的預覽圖示) 開啟 [預覽] 模式。

    開啟預覽模式

  3. 按一下或點選記錄的下一步箭號,以顯示該記錄的相關詳細資料。

  4. ChangeScreen 中,變更一或多個欄位中的資訊,然後按一下或點選 [儲存] 以儲存變更,或按一下或點選 [移除] 來移除記錄。

  5. 按下 Esc (或按一下或點選標題列下的關閉圖示) 關閉 [預覽] 模式。

    關閉預覽模式

後續步驟