從頭建立應用程式Create an app from scratch

目前有各種資料來源,您可以使用其中一種來源從頭開始建立自己的應用程式,日後再視需要新增更多來源。Create your own app from scratch using any one of a variety of data sources, adding more sources later if you want. 您可以指定每個 UI 項目的外觀與行為,讓您能夠針對您確切的需求和工作流程來獲得最佳的結果。Specify the appearance and behavior of each UI element so that you can optimize the result for your exact goals and workflow. 比起自動產生應用程式,這種方法會更耗時,但經驗豐富的應用程式製作人員可以建置符合自己需求的最佳應用程式。This approach is much more time-intensive than generating an app automatically, but experienced app makers can build the best app for their needs.

注意:本主題乃針對 Windows 版 PowerApps Studio 所撰寫,但其步驟與在瀏覽器中開啟 PowerApps 相似。Note: This topic was written for PowerApps Studio for Windows, but the steps are similar if you open PowerApps in a browser.

遵循本教學課程進行,您將建立包含兩個畫面的應用程式。By following this tutorial, you'll create an app that contains two screens. 在某個畫面上,使用者可以瀏覽一組記錄︰On one screen, users can browse through a set of records:

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

在另一個畫面上,使用者可以建立一筆記錄、更新記錄中的一或多個欄位,或刪除整筆記錄︰On the other screen, users can create a record, update one or more fields in a record, or delete an entire record:

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

必要條件Prerequisites

您可以檢閱本教學課程中的一般概念,也可以完全遵循教學課程完成這些步驟。You can review this tutorial for general concepts only, or you can follow it exactly if you complete these steps.

  1. 複製這項資料,然後將它貼到 Excel 檔案。Copy this data, and then paste it into an Excel file.

    Start DayStart Day Start TimeStart Time Volunteer 1Volunteer 1 Volunteer 2Volunteer 2
    SaturdaySaturday 10am-noon10am-noon VasquezVasquez KumashiroKumashiro
    SaturdaySaturday noon-2pmnoon-2pm IceIce SinghalSinghal
    SaturdaySaturday 2pm-4-pm2pm-4-pm MykMyk MuellerMueller
    SundaySunday 10am-noon10am-noon LiLi AdamsAdams
    SundaySunday 10am-noon10am-noon SinghSingh MorganMorgan
    SundaySunday 10am-noon10am-noon BatyeBatye NguyenNguyen
  2. 將資料格式化為名為 Schedule 的資料表,讓 PowerApps 可以剖析資訊。Format that data as a table, named Schedule, so that PowerApps can parse the information.

    如需詳細資訊,請參閱在工作表中建立 Excel 資料表For more information, see Create an Excel table in a worksheet.

  3. eventsignup.xls 名稱儲存檔案,然後將它上傳到雲端儲存體帳戶,例如 OneDrive。Save the file under the name eventsignup.xls, and then upload it to a cloud-storage account, such as OneDrive.
  4. 如果您是 PowerApps 新手:If you're new to PowerApps:

建立空白應用程式,並連線到資料Create a blank app, and connect to data

  1. 在 PowerApps Studio 中,按一下或點選 [檔案] 功能表 (靠近畫面左側) 中的 [新增]。In PowerApps Studio, click or tap New on the File menu (near the left edge of the screen).

    檔案功能表上的新增選項

  2. 在 [空白應用程式] 圖格上,按一下或點選 [手機配置]。On the Blank app tile, click or tap Phone layout.

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

  3. 如果出現提示,請觀看簡介導覽來了解 PowerApps 的主要區域 (或按一下或點選 [略過])。If prompted, take the intro tour to understand the main areas of PowerApps (or click or tap Skip).

    快速導覽

    您稍後可以隨時觀看導覽,只要按一下或點選靠近畫面左上角的問號圖示,然後按一下或點選 Take the intro tourYou can always take the tour later by clicking or tapping the question-mark icon near the upper-left corner of the screen and then clicking or tapping Take the intro tour.

  4. 在左側的導覽列中按一下或點選右上角的圖示,切換至縮圖檢視。In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

    切換檢視

  5. 在右側窗格中,按一下或點選 [新增資料來源]。In the right-hand pane, click or tap Add data source.

    新增資料來源

  6. 執行下列其中一個步驟︰Perform either of these steps:

    • 如果您已經與雲端儲存體帳戶連線,請按一下或點選該連線。If you already have a connection to your cloud-storage account, click or tap it.
    • 如果您沒有與雲端儲存體帳戶連線,請按一下或點選 [新增連線]、按一下或點選您的帳戶類型、按一下或點選 [連接],然後 (若出現提示) 提供您的認證。If you don't have a connection to your cloud-storage account, click or tap Add Connection, click or tap your account type, click or tap Connect, and then (if prompted) provide your credentials.
  7. 在 [選擇 Excel 檔案] 下,瀏覽至 eventsignup.xlsx,然後按一下或點選該檔案。Under Choose an Excel file, browse to eventsignup.xlsx, and then click or tap it.

    指定您想要使用的 Excel 檔案

  8. 在 [選擇資料表] 下,按一下或點選 [排程] 核取方塊,然後按一下或點選 [連接]。Under Choose a table, select the Schedule check box, and then click or tap Connect.

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

    右側窗格的 [資料來源] 索引標籤會顯示您已將哪些資料來源新增至您的應用程式中。The Data sources tab of the right-hand pane shows which data sources you've added to your app.

    顯示已連線的資料來源

    本教學課程只需要一個資料來源,但是您可以稍後新增更多的資料來源。This tutorial requires only one data source, but you can add more data sources later.

顯示資料Show the data

  1. 在 [常用] 索引標籤中,按一下或點選 [新增畫面],然後按一下或點選 [清單畫面]。In the Home tab, click or tap New screen and then click or tap List screen.

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

    新增具有數個預設控制項的畫面,例如搜尋方塊和資源庫控制項。A screen is added with several default controls, such as a search box and a Gallery control. 資源庫會涵蓋搜尋方塊下方的整個畫面。The gallery covers the entire screen under the search box.

  2. 按一下或點選資源庫中的任何位置 (箭號除外),例如搜尋方塊正下方。Click or tap anywhere in the gallery except an arrow, such as directly under the search box.

    選取資源庫

  3. 在右側窗格中,開啟 [版面配置] 清單,然後按一下或點選顯示標題、副標題和內文的選項。In the right-hand pane, open the Layouts list, and then click or tap the option that shows a title, a subtitle and body.

    選取資源庫

  4. 在屬性清單中,按一下或點選 Items、複製此公式並貼到公式列︰In the property list, click or tap Items, copy this formula, and paste it into the formula bar:

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

    如果您不確定屬性清單在哪,請參閱新增和設定控制項If you're not sure where the property list is, see Add and configure controls.

    注意:對於包含具有空格之資料行名稱的 Excel 和 SharePoint 資料來源,PowerApps 會將空格顯示為 "_x0020_"Note: For Excel or SharePoint data sources that contain column names with spaces, PowerApps shows the spaces as "_x0020_". 在此範例中,公式中的資料行 "Volunteer 1" 會顯示為 "Volunteer_x0020_1"In this example, the column "Volunteer 1" appears in a formula as "Volunteer_x0020_1".

    此資源庫會顯示來自 Schedule 資料表的資料。This gallery shows the data from the Schedule table.

    資源庫中預設的 Schedule 資料

    搜尋方塊會根據使用者輸入的文字篩選資源庫。A search box can filter the gallery based on text that the user types. 如果使用者在搜尋方塊中輸入至少一個字母,則資源庫只會顯示其 Volunteer 1 欄位中包含使用者所輸入文字的記錄。If a user types at least one letter in the search box, the gallery shows only those records for which the Volunteer 1 field contains the text that the user typed.

    排序按鈕會根據 Volunteer 1 資料行中的資料排序記錄。The sort button can sort the records based on data in the Volunteer 1 column. 如果使用者按一下或點選該按鈕時,排序順序就會在遞增和遞減之間切換。If a user clicks or taps that button, the sort order toggles between ascending and descending.

    該公式包含 SortIfIsBlankFilterText 函式。That formula contains the Sort, If, IsBlank, Filter, and Text functions. 如需這些函式和其他函式的詳細資訊,請參閱公式參考For more information about these and other functions, see the formula reference

  5. 在搜尋方塊中輸入 i,然後按一下或點選 [排序] 按鈕一次 (或奇數次數)。Type an i in the search box, and click or tap the sort button once (or an odd number of times).

    資源庫會顯示下列結果。The gallery shows these results.

    排序和篩選資源庫

    有關排序篩選其他功能的詳細資訊More information about the Sort, Filter, and other functions

  6. 按一下或點選畫面頂端的標籤控制項,以將它選取。Select the Label control at the top of the screen by clicking or tapping the control.

    選取標題列

  7. 在屬性清單中,按一下或點選 Text、複製下列文字,然後貼到公式列中。In the property list, click or tap Text, copy this text, and then paste it in the formula bar.
    "View Records" "View Records"

    變更標題列

建立 ChangeScreen 和其橫幅Create the ChangeScreen and its banner

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

    重新命名畫面

  2. 新增畫面,並重新命名為 ChangeScreenAdd a screen, and rename it ChangeScreen.

    新增並重新命名畫面

  3. 在 [插入] 索引標籤上,按一下或點選文字,然後按一下或點選標籤On the Insert tab, click or tap Text, and then click or tap Label.
  4. 設定您剛才新增的標籤控制項︰Configure the Label control that you just added:

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

      標籤 控制項會反映您的變更。The Label control reflects your changes.

      有橫幅的 ChangeScreen

新增並設定表單Add and configure a form

  1. 在 [插入] 索引標籤中,依序按一下或點選 [表單]、[編輯]。On the Insert tab, click or tap Forms, and then click or tap Edit.
  2. 移動表單並調整大小以涵蓋大部分的畫面。Move and resize the form to cover most of the screen.

    新增表格

    表單預設名稱為 Form1,除非您已新增並移除一個表單。The form is named Form1 by default unless you already added and removed a form. 若是該情況,請將表單重新命名為 Form1In that case, rename the form to Form1.

  3. Form1DataSource 屬性設定為 ScheduleSet DataSource property of Form1 to Schedule.
  4. Form1Item 屬性設定為下列運算式:Set the Item property of Form1 to this expression:
    BrowseGallery1.SelectedBrowseGallery1.Selected
  5. 在右側窗格中,按一下或點選每個欄位的的核取方塊,以顯示欄位。In the right-hand pane, click or tap the checkbox for each field to show it.

    在表單上顯示欄位

  6. 在表單底部附近,按一下或點選 [新增自訂卡片]。Near the bottom of the form, click or tap Add a custom card.

    新增自訂卡片

  7. 在新卡片中新增標籤控制項。Add a Label control in the new card.
  8. 將新控制項的 AutoHeight 屬性設定為 true,並將其 Text 屬性設為以下公式:Set the AutoHeight property of the new control to true, and set its Text property to this formula:
    Form1.ErrorForm1.Error

    標籤會顯示表單的任何錯誤。The label will show any errors from the form.

  9. 在左側導覽列中,按一下或點選 [ChangeScreen] 的縮圖來加以選取。In the left navigation bar, click or tap the thumbnail for the ChangeScreen to select it.
  10. 在 [插入] 索引標籤上,按一下或點選 [圖示],按一下或點選選項來新增上一步箭號,然後將箭號移至畫面左下角。On the Insert tab, click or tap Icons, click or tap the option to add a Back arrow, and then move the arrow to the lower-left corner of the screen.
  11. 將箭號的 OnSelect 屬性設為以下公式:Set the arrow's OnSelect property to this formula:

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

    當使用者按一下或點選箭號時,Navigate 函式會開啟 ViewScreenWhen the user clicks or taps the arrow, the Navigate function opens the ViewScreen.

  12. 在表單下方新增按鈕控制項,並將該控制項的 Text 屬性設為 "Save"Add a Button control under the form, and set the button's Text property to "Save".

    新增儲存按鈕

  13. 將按鈕的 OnSelect 屬性設為下列公式:Set the OnSelect property of the button to this formula::

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

    當使用者按一下或點選按鈕時,SubmitForm 函式會儲存資料來源的所有變更,且 ViewScreen 會重新出現。When the user clicks or taps the button, the SubmitForm function saves any changes to the data source, and the ViewScreen reappears.

  14. 在畫面底端新增另一個按鈕,將其 Text 屬性設為 "Remove",並將其 OnSelect 屬性設為以下公式:At the bottom of the screen, add another button, set its Text property to "Remove", and set its OnSelect property to this formula:

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

    當使用者按一下或點選此按鈕時,Remove 函式會移除記錄,ViewScreen 會重新出現。When the user clicks or taps this button, the Remove function removes the record, and the ViewScreen reappears.

  15. Remove 按鈕的 Visible 屬性設為下列公式:Set the Visible property of the Remove button to this formula:
    Form1.Mode=FormMode.EditForm1.Mode=FormMode.Edit

    此步驟會在使用者建立記錄時隱藏 Remove 按鈕。This step hides the Remove button when the user is creating a record.

    ChangeScreen 符合此範例:The ChangeScreen matches this example:

    最後的 ChangeScreen

從 ViewScreen 設定瀏覽Set navigation from ViewScreen

  1. 在左側導覽列中,按一下或點選 ViewScreen 的縮圖。In the left navigation bar, click or tap the thumbnail for the ViewScreen.

    開啟 ViewScreen

  2. 按一下或點選資源庫中第一筆記錄的 [下一步箭號]。Click or tap the Next arrow for the first record in the gallery.

    下一步箭號

  3. 將該箭號的 OnSelect 屬性設為下列公式:Set the OnSelect property of that arrow to this formula:

    Navigate(ChangeScreen,ScreenTransition.None)Navigate(ChangeScreen,ScreenTransition.None)

  4. 在右上角按一下或點選加號圖示。In the upper-right corner, click or tap the plus icon.

    新增記錄

  5. 將所選圖示的 OnSelect 屬性設為下列公式:Set the OnSelect property of the selected icon to this formula:

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

    當使用者按一下或點選此圖示時,ChangeScreen 就會顯示,且每個欄位都是空白的,讓使用者可以更輕鬆地建立一筆記錄。When the user clicks or taps this icon, ChangeScreen appears with each field empty, so that the user can create a record more easily.

執行應用程式Run the app

在自訂應用程式後,請在 [預覽] 模式中執行應用程式以測試變更,如本節中的步驟所述。As you customize the app, test your changes by running the app in Preview mode, as the steps in this section describe.

  1. 在左側導覽列中,按一下或點選頂端縮圖以選取 ViewScreenIn the left navigation bar, click or tap the top thumbnail to select the ViewScreen.

    選取 ViewScreen

  2. 按下 F5 (或按一下或點選靠近右上角的預覽圖示) 開啟 [預覽] 模式。Open Preview mode by pressing F5 (or clicking or tapping the Preview icon near the upper-right corner).

    開啟預覽模式

  3. 按一下或點選記錄的下一步箭號,以顯示該記錄的相關詳細資料。Click or tap the Next arrow for a record to show details about that record.
  4. ChangeScreen 中,變更一或多個欄位中的資訊,然後按一下或點選 [儲存] 以儲存變更,或按一下或點選 [移除] 來移除記錄。On the ChangeScreen, change the information in one or more fields, and then save your changes by clicking or tapping Save, or remove the record by clicking or tapping Remove.
  5. 按下 Esc (或按一下或點選標題列下的關閉圖示) 關閉 [預覽] 模式。Close Preview mode by pressing Esc (or by clicking or tapping the close icon under the title bar).

    關閉預覽模式

後續步驟Next steps