根據 Excel 資料從頭建立畫布應用程式

根據格式化為資料表的 Excel 資料,從頭開始建立您自己的畫布應用程式,然後視需要新增其他來源的資料。 遵循本教學課程進行,您將建立包含兩個畫面的應用程式。 在其中一個畫面上,使用者可以瀏覽一組記錄。 在另一個畫面上,使用者可以建立一筆記錄、更新記錄中的一或多個欄位,或刪除整筆記錄。 這種方法比 自動產生應用程式 耗時,但經驗較豐富的應用程式決策者可用它組建最符合自己需求的應用程式。

先決條件

若要確實遵循本教學課程中的步驟,請先使用此範例資料建立 Excel 檔案。

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

    StartDay StartTime 義工 備份
    星期六 10am-noon Vasquez Kumashiro
    星期六 noon-2pm Ice Singhal
    星期六 2pm-4pm Myk Mueller
    星期日 10am-noon Li Adams
    星期日 noon-2pm Singh 麗婷
    星期日 2pm-4pm Batye Nguyen
  2. 將資料格式化為名為 Schedule 的資料表,讓 Power Apps 可以剖析資訊。

    如需詳細資訊,請參閱 將 Excel 中的表格格式化

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

重要

您可以使用自己的 Excel 檔案,並檢閱此教學課程來針對一般概念進行了解。 不過,Excel 檔案中的資料必須格式化為表格。 如需詳細資訊,請參閱 將 Excel 中的表格格式化

打開空白應用程式

  1. 登入 Power Apps

  2. Make your own app 下,選取 Canvas app from blank

    建立空白畫布應用程式。

  3. 為您的應用程式指定名稱,選取 Phone,然後選取 Create

    您可以針對手機或其他裝置 (例如平板電腦) 從頭開始設計應用程式。 本主題強調設計適用手機的應用程式。

    指定應用程式的名稱及格式。

    Power Apps Studio 建立適用手機的空白應用程式。

  4. 如果 Welcome to Power Apps Studio 對話方塊開啟,請選取 Skip

連線至資料

  1. 在畫面中間,選取 connect to data

  2. Data 窗格中,選取您雲端儲存體帳戶的連線 (若有出現)。 否則,請遵循下列步驟來新增連線:

    1. 選取 New connection,選取您雲端儲存體帳戶的磚,然後選取 Create
    2. 如果出現提示,請提供該帳戶的認證。
  3. Choose an Excel file 下,鍵入或貼上 eventsignup 的前幾個字母來篩選清單,然後選取您已上傳的檔案。

  4. Choose a table 下,選取 Schedule 的勾選方塊,然後選取 Connect

  5. 選取 Data 窗格右上角的關閉圖示 (X) 來關閉窗格。

建立檢視畫面控制項

  1. Home 索引標籤上,選取 New screen 旁邊的下箭頭開啟畫面類型清單,再選取 List

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

  2. 在新畫面控制項頂端,選取 Label 控制項,然後以 View records 取代 [Title]

    變更查看記錄的標題列。

  3. 在左側導覽列中,選取 BrowseGallery1

    具有控點的選取方塊會圍繞在資源庫四周。

    新增清單畫面。

  4. 在右側窗格的 Properties 索引標籤上,選取 Properties 功能表的下箭頭。

    開啟配置功能表。

  5. 選取 Title, subtitle, and body

  6. 在公式列中,以 Schedule 取代 CustomGallerySample,並以 Volunteer 取代 SampleText 的兩個執行個體。

  7. 選取公司列右邊緣的下箭頭,然後選取 Format text

    公式會符合以下範例:

    SortByColumns(
        Search(
            Schedule,
            TextSearchBox1.Text,
            "Volunteer"
        ),
        "Volunteer",
        If(
            SortDescending1,
            SortOrder.Descending,
            SortOrder.Ascending
        )
    )
    
  8. 在右側窗格的 Properties 索引標籤,選取 Fields 標籤旁邊的 Edit

  9. Title2 方塊中選取 Volunteer,在 Subtitle2 方塊中選取 StartDay,然後在 Body1 方塊中選取 StartTime

  10. 選取 Data 窗格右上角的關閉圖示 (X) 來關閉窗格。

使用者可以根據該公式中的 SortByColumnsSearch 函數依據義工姓名排序和篩選資源庫。

  • 如果使用者在搜尋方塊中至少輸入一個字母,則資源庫只會顯示 Volunteer 欄位中包含使用者輸入文字的記錄。
  • 如果使用者選取排序按鈕 (位於標題列中重新整理按鈕和加號按鈕之間),則資源庫會根據 Volunteer 欄位以遞增或遞減順序 (取決於使用者選取按鈕的次數) 顯示記錄。

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

建立變更畫面

  1. Home 索引標籤中,選取 New screen 旁邊的下箭頭,然後選取 Form

  2. 在左側導覽列中,選取 EditForm1

  3. 在右側窗格的 Properties 索引標籤中,選取 Data source 旁邊的下箭頭,然後在隨即顯示的清單中選取 Schedule

  4. 在您剛指定的資料來源下,選取 Edit fields

  5. 欄位 窗格中,選取 新增欄位,選取每個欄位的核取方塊,然後選取 新增

  6. 選取並掃疊每個欄位名稱旁邊的箭頭,然後將 Volunteer 欄位向上拖曳,使其顯示在欄位清單的頂端。

    重新排序欄位。

  7. 選取 Fields 窗格右上角的關閉圖示 (X) 來關閉窗格。

  8. 將表單的 Item 屬性設定為這個運算式,方法是將其鍵入或貼到公式列內:

    BrowseGallery1.Selected

  9. 在畫面頂端,選取 Label 控制項,然後以 Change records 取代 [Title]

    變更標題列。

刪除及重新命名畫面

  1. 在左側的導覽列中,選取 Screen1 的刪節號 (...),然後選取 Delete

    刪除畫面。

  2. 選取 Screen2 的刪節號 (...),選取 Rename,然後鍵入或貼上 ViewScreen

  3. 選取 Screen3 的刪節號 (...),選取 Rename,然後鍵入或貼上 ChangeScreen

設定檢視畫面控制項上的圖示

  1. 在靠近 ViewScreen 的頂端處選取循環箭號圖示。

    新增記錄以進行重新整理。

  2. 將該圖示的 OnSelect 屬性設為下列公式:

    Refresh(Schedule)

    當使用者選取此圖示時,Schedule 中的資料將會從 Excel 檔案重新整理。

    如需此項和其他函數的詳細資訊,請參閱 公式參考

  3. ViewScreen 的右上角,選取加號圖示。

    新增記錄。

  4. 將該圖示的 OnSelect 屬性設為下列公式:

    NewForm(EditForm1);Navigate(ChangeScreen,ScreenTransition.None)

    當使用者選取此圖示時,ChangeScreen 的每個欄位顯示空白,讓使用者可以更輕鬆建立一筆記錄。

  5. 選取資源庫中第一筆記錄的右箭頭。

    選取箭頭。

  6. 將該箭頭的 OnSelect 屬性設為下列公式:

    EditForm(EditForm1); Navigate(ChangeScreen, ScreenTransition.None)

    當使用者選取此圖示時,ChangeScreen 隨即出現,各欄位顯示選取記錄的資料,讓使用者可以更輕鬆地編輯或刪除記錄。

設定變更畫面控制項上的圖示

  1. ChangeScreen 上,選取左上角的 "X" 圖示。

    取消圖示。

  2. 將該圖示的 OnSelect 屬性設為下列公式:

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

    當使用者選取此圖示時,系統會捨棄使用者在這個畫面控制項上做的任何變更,並開啟檢視畫面。

  3. 選取右上角的勾選記號圖示。

    勾選記號圖示。

  4. 將該勾選記號的 OnSelect 屬性設為下列公式:

    SubmitForm(EditForm1); Navigate(ViewScreen, ScreenTransition.None)

    當使用者選取此圖示時,系統會儲存使用者在這個畫面上做的任何變更,並開啟檢視畫面。

  5. Insert 索引標籤上,選取 Icons,然後選取 Trash 圖示。

  6. 將新圖示的 Color 屬性設定為 White,然後移動新圖示,使其出現在勾選記號圖示旁邊。

    垃圾桶圖示。

  7. 將垃圾桶圖示的 Visible 屬性設定為這個公式:

    EditForm1.Mode = FormMode.Edit

    這個圖示只會在表單處於 編輯 模式,而非 新增 模式時出現。

  8. 將垃圾桶圖示的 OnSelect 屬性設為下列公式:

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

    當使用者選取此圖示時,系統會將選取記錄從資料來源中刪除,並開啟檢視畫面。

測試應用程式

  1. 選取 ViewScreen,然後按 F5 (或選取右上角附近的 預覽 圖示) 來開啟預覽。

    開啟預覽模式。

  2. 在搜尋方塊中鍵入或貼上一或多個字母,來根據志願者名稱篩選清單。

  3. 選取排序圖示一或多次,來根據義工名稱遞增或遞減顯示資料。

  4. 新增記錄。

  5. 更新您新增的記錄,然後儲存變更。

  6. 更新您新增的記錄,然後取消變更。

  7. 刪除您新增的記錄。

  8. 按 Esc (或選取右上角的關閉圖示) 關閉預覽模式。

後續步驟

  • 按下 Ctrl-S 將應用程式儲存在雲端中,讓您能夠從其他裝置執行。
  • 共用應用程式,讓其他人也能執行。
  • 深入了解 函數 (例如 Patch,您可以用它在不建立標準表單情況下管理資料)。
  • 將此應用程式連結到解決方案,您就能將其部署到不同環境或在 AppSource 發行。