了解 Microsoft PowerApps 中的資料表單Understand data forms in Microsoft PowerApps

新增三種類型的控制項,讓使用者可以瀏覽記錄、顯示該記錄的詳細資料,以及編輯或建立記錄︰Add three types of controls so that the user can browse for a record, display details about that record, and edit or create a record:

活動Activity 控制項Control 說明Description
瀏覽記錄Browse for a record 資源庫控制項Gallery control 篩選、排序、搜尋和捲動資料來源中的記錄,然後選取特定記錄。Filter, sort, search, and scroll through records in a data source, and select a specific record. 在小型螢幕上,甚至可以只顯示每一筆記錄中的幾個欄位來一次顯示數筆記錄。Display only a few fields from each record to show several records at a time, even on a small screen.
顯示記錄的詳細資料Show details of a record 顯示表單控制項Display form control 若為單一記錄,顯示該記錄的多個或所有欄位。For a single record, display many or all fields in that record.
編輯或建立記錄Edit or create a record 編輯表單控制項Edit form control 更新單一記錄中的一個或多個欄位 (或使用預設值從頭建立記錄),並將那些變更儲存回基礎資料來源。Update one or more fields in a single record (or create a record starting with default values), and save those changes back to the underlying data source.

將每個控制項放在不同的畫面上,可讓您更容易區分它們︰Put each control on a different screen to make them easier to distinguish:

跨三個畫面瀏覽、檢視和編輯記錄

依照本主題所述,使用公式結合這些控制項來建立整體使用者體驗。As this topic describes, combine these controls with formulas to create the overall user experience.

必要條件Prerequisites

探索產生的應用程式Explore a generated app

PowerApps 可以根據您指定的資料來源自動產生應用程式。PowerApps can automatically generate an app based on a data source that you specify. 每個應用程式均包含三個畫面,其中提供先前所述的控制項和連接它們的公式。Each app contains three screens with the controls described earlier and formulas that connect them. 執行這些現成的應用程式、自訂它們以符合您的特定目標,或檢查它們的運作方式,讓您可以了解套用到您自己的應用程式的實用概念。Run these apps "out of the box," customize them for your specific goals, or examine how they work so that you can learn useful concepts that apply to your own apps. 在下列幾節中,檢查畫面、控制項,以及驅動所產生之應用程式的公式。In the following sections, inspect the screens, controls, and formulas that drive a generated app.

瀏覽畫面Browse screen

瀏覽畫面控制項

此畫面配有下列重要公式︰This screen features these key formulas:

控制項Control 支援的行為Supported behavior 公式Formula
BrowseGallery1BrowseGallery1 顯示 Assets 資料來源中的記錄。Display records from the Assets data source. 資源庫的 Items 屬性會設為以 Assets 資料來源為基礎的公式。The Items property of the gallery is set to a formula that's based on the Assets data source.
ImageNewItem1ImageNewItem1 顯示 [編輯和建立] 畫面,其中每個欄位均設為預設值,以便使用者可以輕鬆地建立記錄。Display the Edit and Create screen with each field set to a default value, so that the user can easily create a record. 影像的 OnSelect 屬性會設定為以下公式:The OnSelect property of the image is set to this formula:
NewForm( EditForm1 );
Navigate( EditScreen1, None )
NewForm( EditForm1 );
Navigate( EditScreen1, None )
NextArrow1 (在資源庫中)NextArrow1 (in the gallery) 顯示 [詳細資料] 畫面來檢視目前選取之記錄的多個或所有欄位。Display the Details screen to view many or all fields of the currently selected record. 箭號的 OnSelect 屬性會設定為以下公式:The OnSelect property of the arrow is set to this formula:
Navigate( DetailScreen1, None )Navigate( DetailScreen1, None )

此畫面上的主要控制項 BrowseGallery1 涵蓋畫面的大部分區域。The primary control on this screen, BrowseGallery1, covers most of the area of the screen. 使用者可以捲動資源庫,尋找特定記錄來顯示其他欄位或更新。The user can scroll through the gallery to find a specific record to display more fields or to update.

設定資源庫的 Items 屬性,以在其中顯示資料來源中的記錄。Set the Items property of a gallery to show records from a data source in it. 例如,將該屬性設為 Assets 以顯示該名稱的資料來源中的記錄。For example, set that property to Assets to show records from a data source of that name.

注意

在產生的應用程式中,依預設 Items 會設為更加複雜的公式,讓使用者可以排序和搜尋記錄。In a generated app, Items is set to a significantly more complicated formula by default so that the user can sort and search for records. 您稍後將在本主題中學習如何建置該公式,目前只需簡易版本即可。You'll learn how to build that formula later in this topic; the simpler version is enough for now.

不是尋找記錄來顯示或編輯,而是使用者可以選取資源庫上的 "+" 符號建立記錄。Instead of finding a record to display or edit, the user can create a record by selecting the "+" symbol above the gallery. 建立此效果的方式為新增影像控制項、在其中顯示 "+" 符號,然後將其 OnSelect 屬性設為以下公式︰Create this effect by adding an Image control, showing a "+" symbol in it, and setting its OnSelect property to this formula:
NewForm( EditForm1 ); Navigate( EditScreen1, None )NewForm( EditForm1 ); Navigate( EditScreen1, None )

此公式會開啟 [編輯和建立] 畫面,其中配有編輯表單控制項,名為EditForm1This formula opens the Edit and Create screen, which features an Edit form control named EditForm1. 公式也會將該表單切換至新增模式,在此模式下,表單會顯示資料來源的預設值,讓使用者可以輕鬆地從頭建立記錄。The formula also switches that form into New mode, in which the form shows default values from the data source so that the user can easily create a record from scratch.

若要檢查 BrowseGallery1 中出現的任何控制項,請在該資源庫的第一個區段中選取該控制項,其會充當所有其他區段的範本。To examine any control that appears in BrowseGallery1, select that control in the first section of that gallery, which serves as a template for all other sections. 例如,選取左邊緣的中間標籤控制項︰For example, select the middle Label control on the left edge:

瀏覽畫面控制項

在此範例中,控制項的 Text 屬性會設為 ThisItem.AssignedTo,其是 Assets 資料來源中的欄位。In this example, the control's Text property is set to ThisItem.AssignedTo, which is a field in the Assets data source. 資源庫中其他三個標籤控制項的 Text 屬性會設為類似的公式,而且每個控制項都會在資料來源中顯示不同的欄位。The Text property of the other three Label controls in the gallery are set to similar formulas, and each control shows a different field in the data source.

選取圖形控制項 (箭頭),並確認其 OnSelect 屬性設定為以下公式︰Select the Shape control (the arrow), and confirm that its OnSelect property is set to this formula:
Navigate( DetailScreen1, None )Navigate( DetailScreen1, None )

如果使用者在 BrowseGallery1 中找到記錄,則使用者可以選取該記錄的箭號,以在 DetailScreen1 顯示其詳細資訊。If the user finds a record in BrowseGallery1, the user can select the arrow for that record to show more information about it in DetailScreen1. 藉由選取箭號,使用者可以變更 BrowseGallery1Selected 屬性的值。By selecting an arrow, the user changes the value of the Selected property of BrowseGallery1. 在此應用程式中,該屬性不僅會決定哪一筆記錄出現在 DetailScreen1 中,如果使用者決定更新記錄,也會顯示 [編輯和建立] 畫面。In this app, that property determines which record appears in not only DetailScreen1 but also, if the user decides to update the record, the Edit and Create screen.

詳細資料畫面Detail screen

詳細資料畫面控制項

此畫面配有下列重要公式︰This screen features these key formulas:

控制項Control 支援的行為Supported behavior 公式Formula
DetailForm1DetailForm1 顯示 Assets 資料來源中的記錄Displays a record in the Assets data source DataSource 屬性設為 AssetsSet the DataSource property to Assets.
DetailForm1DetailForm1 決定要顯示哪一筆記錄。Determines which record to display. 在產生的應用程式中,將會顯示使用者在資源庫中選取的記錄。In a generated app, displays the record that the user selected in the gallery. 將此控制項的 Item 屬性設為下列值:Set the Item property of this control to this value:
BrowseGallery1.SelectedBrowseGallery1.Selected
卡片控制項Card controls 顯示表單控制項中,顯示記錄中的單一欄位。In a Display form control, displays a single field in a record. DataField 屬性設為欄位的名稱,以雙引號括住 (例如, "Name")。Set the DataField property to the name of a field, enclosed in double quotation marks (for example, "Name").
ImageBackArrow1ImageBackArrow1 當使用者選取此控制項時,就會開啟 BrowseScreen1When the user selects this control, opens BrowseScreen1. OnSelect 屬性設為以下公式︰Set the OnSelect property to this formula:
Back()Back()
ImageDelete1ImageDelete1 當使用者選取此控制項時,就會刪除記錄。When the user selects this control, deletes a record. OnSelect 屬性設為以下公式︰Set the OnSelect property to this formula:
Remove( Assets, BrowseGallery1.Selected )Remove( Assets, BrowseGallery1.Selected )
ImageEdit1ImageEdit1 當使用者選取此控制項時,就會將 [編輯和建立] 畫面開啟至目前記錄。When the user selects this control, opens the Edit and Create screen to the current record. OnSelect 屬性設為以下公式︰Set the OnSelect property to this formula:
Navigate( EditScreen1, None )Navigate( EditScreen1, None )

在畫面頂端,有三個影像坐落在 DetailForm1 之外,充當按鈕,排列在應用程式的三個畫面之間。At the top of the screen, three images sit outside of DetailForm1 and act as buttons, orchestrating between the three screens of the app.

DetailForm1 主導此畫面,並顯示使用者在資源庫中選取的記錄 (因為表單的 Item 屬性會設為 BrowseGallery1.Selected)。DetailForm1 dominates this screen and displays the record that the user selected in the gallery (because the form's Item property is set to BrowseGallery1.Selected). 表單的 DataSource 屬性也會提供有關資料來源的中繼資料,例如每個欄位的使用者易記的顯示名稱。The DataSource property of the form also provides metadata about the data source, such as a user-friendly display name for each field.

DetailForm1 包含數個卡片控制項。DetailForm1 contains several Card controls. 您可以選取卡片控制項本身或其包含的控制項來探索其他資訊。You can select either the Card control itself or the control that it contains to discover additional information.

詳細資料卡片和編寫經驗中選取的卡片控制項

卡片 控制項的 DataField 屬性可決定卡片顯示的欄位。The DataField property of a Card control determines which field the card displays. 在此情況下,該屬性會設為 AssetIDIn this case, that property is set to AssetID. 卡片包含標籤控制項,其 Text 屬性會設為 Parent.DefaultThe card contains a Label control for which the Text property is set to Parent.Default. 此控制項會顯示卡片的預設值,此值是透過 DataField 屬性設定的。This control shows the Default value for the card, which is set through the DataField property.

在產生的應用程式中, 卡片控制項預設為鎖定。In a generated app, Card controls are locked by default. 當卡片鎖定時,您無法修改某些屬性,例如 DataField,而且那些屬性無法使用公式列。When a card is locked, you can't modify some properties, such as DataField, and the formula bar is unavailable for those properties. 這項限制可協助確保您的自訂不會中斷所產生之應用程式的基本功能。This restriction helps ensure that your customizations don't break the basic functionality of the generated app. 不過,您可以在右窗格中變更卡片和其控制項的部分屬性︰However, you can change some properties of a card and its controls in the right-hand pane:

選項窗格已開啟的詳細資料畫面

在右窗格中,您可以選取要顯示哪些欄位,以及每個欄位要顯示何種控制項。In the right-hand pane, you can select which fields to display and in which kind of control each field displays.

編輯/建立畫面Edit/Create screen

編輯畫面控制項

此畫面配有下列重要公式︰This screen features these key formulas:

控制項Control 支援的行為Supported behavior 公式Formula
EditForm1EditForm1 顯示 Assets 資料來源中的記錄。Displays a record in the Assets data source. DataSource 屬性設為 AssetsSet the DataSource property to Assets.
EditForm1EditForm1 決定要顯示哪一筆記錄。Determines which record to display. 在產生的應用程式中,將會顯示使用者在 BrowseScreen1 中選取的記錄。In a generated app, displays the record that the user selected in BrowseScreen1. Item 屬性設為下列值:Set the Item property to this value:
BrowseGallery1.SelectedBrowseGallery1.Selected
卡片控制項Card controls 編輯表單控制項中,提供控制項,讓使用者可在記錄中編輯一個或多個欄位。In a Edit form control, provides controls so that the user can edit one or more fields in a record. DataField 屬性設為欄位的名稱,以雙引號括住 (例如, "Name")。Set the DataField property to the name of a field, enclosed in double quotation marks (for example, "Name").
ImageCancel1ImageCancel1 當使用者選取此控制項時,將會捨棄任何進行中的變更,並會開啟 [詳細資料] 畫面。When the user selects this control, discards any changes in progress, and opens the Details screen. OnSelect 屬性設為以下公式︰Set the OnSelect property to this formula:
ResetForm( EditForm1 ); Back()ResetForm( EditForm1 ); Back()
ImageAccept1ImageAccept1 當使用者選取此控制項時,就會將變更提交至資料來源。When the user selects this control, submits changes to the data source. OnSelect 屬性設為以下公式︰Set the OnSelect property to this formula:
SubmitForm( EditForm1 )SubmitForm( EditForm1 )
EditForm1EditForm1 如果接受變更,請回到上一個畫面。If changes are accepted, returns to the previous screen. OnSuccess 屬性設為以下公式︰Set the OnSuccess property to this formula:
Back()Back()
EditForm1EditForm1 如果不接受變更,將會繼續留在目前畫面,讓使用者能夠修正任何問題,並嘗試再次提交。If changes aren't accepted, remain on the current screen so that the user can fix any issues and try to submit again. OnFailure 屬性保留為空白。Leave the OnFailure property blank.
LblFormError1LblFormError1 如果不接受變更,將會顯示錯誤訊息。If changes aren't accepted, shows an error message. Text 屬性設為下列公式︰Set the Text property to this value:
EditForm1.ErrorEditForm1.Error

如同在 [詳細資料] 畫面中,表單控制項 (名為EditForm1) 會主導 [編輯和建立] 畫面。As in the Details screen, a form control, named EditForm1, dominates the Edit and Create screen. 此外,EditForm1Item 屬性也會設為 BrowseGallery1.Selected,所以表單會顯示使用者在 BrowseScreen1 中選取的記錄。In addition, the Item property of EditForm1 is set to BrowseGallery1.Selected, so the form displays the record that the user selected in BrowseScreen1. 當 [詳細資料] 畫面將每個欄位顯示為唯讀時,使用者可以使用 EditForm1 中的控制項,更新一個或多個欄位的值。While the Details screen shows each field as read-only, the user can update the value of one or more fields by using the controls in EditForm1. 它也會使用 DataSource 屬性來存取有關此資料來源的中繼資料 (例如每個欄位的使用者易記的顯示名稱),,以及應該儲存變更的位置。It also uses the DataSource property to access metadata about this data source, such as the user-friendly display name for each field and the location where changes should be saved.

如果使用者選取 "X" 圖示來取消更新,則 ResetForm 函式會顯示任何未儲存的變更,而 Back 函式則會開啟 [詳細資料] 畫面。If the user selects the "X" icon to cancel an update, the ResetForm function discards any unsaved changes, and the Back function opens the Details screen. [詳細資料] 畫面和 [編輯和建立] 畫面均會 顯示相同記錄,直到使用者在 BrowseScreen1 上選取不同的記錄。Both the Details screen and the Edit and Create screen show the same record until the user selects a different one on BrowseScreen1. 該記錄中的欄位仍會設為最近儲存的值,不會設為使用者所做,然後放棄的任何變更。The fields in that record remain set to the values that were most recently saved, not any changes that the user made and then abandoned.

如果使用者變更表單中的一個或多個值,然後選取「核取記號」圖示,則 SubmitForm 函式會將使用者的變更傳送至資料來源。If the user changes one or more values in the form and then selects the "checkmark" icon, the SubmitForm function sends the user's changes to the data source.

  • 如果已成功儲存變更,則表單的 OnSuccess 公式會執行,而且 Back() 函式會開啟詳細資料畫面,以顯示更新的記錄。If the changes are successfully saved, the form's OnSuccess formula runs, and the Back() function opens the detail screen to show the updated record.
  • 如果未成功儲存變更,則表單的 OnFailure 公式會執行,但不會變更任何項目,因為它是空白If the changes aren't successfully saved, the form's OnFailure formula runs, but it doesn't change anything because it's blank. [編輯和建立] 畫面會保持開啟狀態,讓使用者可以取消變更或修正錯誤。The Edit and Create screen remains open so that the user can either cancel the changes or fix the error. LblFormError1 會顯示使用者易記的錯誤訊息,其是表單的 Error 設為的錯誤訊息。LblFormError1 shows a user-friendly error message, to which the form's Error property is set.

顯示表單 控制項一樣,編輯表單控制項包含卡片控制項,其中包含在記錄中顯示不同欄位的其他控制項:As with a Display form control, an Edit form control contains Card controls, which contain other controls that show different fields in a record:

編輯卡片和編寫經驗中選取的卡片控制項

在上圖中,選取的卡片顯示 AssetID欄位,並包含文字輸入控制項,讓使用者可以編輯該欄位的值。In the previous image, the selected card shows the AssetID field and contains a Text input control so that the user can edit the value of that field. (相較之下,詳細資料畫面會在標籤控制項中顯示相同欄位,這是唯讀的。)文字輸入控制項具 有 Default 屬性,其會設為 Parent.Default(In contrast, the detail screen shows the same field in a Label control, which is read-only.) The Text input control has a Default property, which is set to Parent.Default. 如果使用者是建立記錄,而不是編輯記錄,則該控制項將顯示使用者可對新記錄變更的初始值。If the user were creating a record instead of editing one, that control would show an initial value that the user can change for the new record.

在右窗格中,您可以顯示或隱藏每張卡片、重新排列它們,或將它們設為在不同類型的控制項中顯示欄位。In the right-hand pane, you can show or hide each card, rearrange them, or configure them to show fields in different types of controls.

選項窗格已開啟的編輯畫面

從頭建置應用程式Build an app from scratch

藉由了解 PowerApps 如何產生應用程式,您可以自行建置一個應用程式,使用相同的建置組塊與本主題稍早所述的公式。By understanding how PowerApps generates an app, you can build one yourself that uses the same building blocks and formulas discussed earlier in this topic.

識別測試資料Identify test data

若要充分運用本主題,請從您可以嘗試的資料來源開始。To get the most from this topic, start with a data source with which you can experiment. 它應該包含您無需顧慮,即可讀取和更新的測試資料。It should contain test data that you can read and update without concern.

注意

如果您使用 SharePoint 清單或 Excel 資料表,且其中包含有空格的資料行名稱 (如同您的資料來源),PowerApps 會將空格取代為 "_x0020_"If you use a SharePoint list or an Excel table that contains column names with spaces as your data source, PowerApps will replace the spaces with "_x0020_". 例如,SharePoint 或 Excel 中的 "Column Name" 在資料版面配置中顯示或是在公式中使用時,會在 PowerApps 中顯示為 "Column_x0020_Name"For example, "Column Name" in SharePoint or Excel will appear as "Column_x0020_Name" in PowerApps when displayed in the data layout or used in a formula.

若要完全遵循本主題的其餘部分,請建立名為 "Ice Cream" 的 SharePoint 清單,其中包含此資料︰To follow the rest of this topic exactly, create a SharePoint list named "Ice Cream" that contains this data:

Ice cream SharePoint 清單

  • 從頭建立電話的應用程式,並將它連接至資料來源Create an app from blank, for phones, and connect it to your data source.

    注意

    平板電腦應用程式非常類似,但您可能會想要使用不同的畫面版面配置,以充分使用額外的畫面空間。Tablet apps are very similar, but you may want a different screen layout to make the most of the extra screen space.

    主題其餘部分中的範例會根據名為 Ice Cream 的資料來源。The examples in the rest of the topic are based on a data source named Ice Cream.

瀏覽記錄Browse records

從記錄中取得快速的資訊片段,方法為在瀏覽螢幕上,於資源庫中尋找它。Get a quick piece of information from a record by finding it in a gallery on a browse screen.

  1. 新增垂直資源庫,並且變更版面配置為僅有標題Add a Vertical gallery, and change the layout to Title only.

    連接至 Ice Cream 資料來源的資源庫

  2. 將資源庫的 Items 屬性設定為 Ice CreamSet the gallery's Items property to Ice Cream.
  3. 將資源庫中第一個標籤的 Text 屬性設為 ThisItem.Title (如果它設為其他項目)。Set the Text property of the first label in the gallery to ThisItem.Title if it's set to something else.

    標籤現在會針對每筆記錄在 [標題] 欄位中顯示值。The label now shows the value in the Title field for each record.

    連接至 Ice Cream 資料來源的資源庫

  4. 調整資源庫大小以填滿畫面,並且將其 TemplateSize 屬性設為 60Resize the gallery to fill the screen, and set its TemplateSize property to 60.

    畫面類似下列範例,其中顯示資料來源中的所有記錄︰The screen resembles this example, which shows all records in the data source:

    連接至 Ice Cream 資料來源的資源庫

檢視詳細資料View details

如果資源庫未顯示您想要的資訊,請選取記錄的箭頭,以開啟詳細資料畫面。If the gallery doesn't show the information that you want, select the arrow for a record to open the details screen. 該畫面上的顯示表單控制項會針對您選取的記錄顯示更多的欄位,且有可能顯示所有欄位。A Display form control on that screen shows more, possibly all, fields for the record that you selected.

顯示表單控制項會使用兩個屬性來顯示記錄︰The Display form control uses two properties to display the record:

  • DataSource 屬性。DataSource property. 保留記錄的資料來源名稱。The name of the data source that holds the record. 此屬性會在右邊面板填入欄位,並決定每個欄位的顯示名稱和資料類型 (字串、數字、日期等等)。This property populates the right-hand panel with fields and determines the display name and data type (string, number, date, etc.) of each field.
  • Item 屬性。Item property. 要顯示的記錄。The record to display. 此屬性通常會連接至資源庫控制項的 Selected 屬性,讓使用者可在資源庫控制項中選取記錄,並深入探索該記錄。This property is often connected to the Selected property of the Gallery control so that the user can select a record in the Gallery control and then drill into that record.

當設定 DataSource 屬性時,您可以透過右窗格新增和移除欄位,以及變更它們的顯示方式。When the DataSource property is set, you can add and remove fields through the right-hand pane and change how they're displayed.

在此畫面上,使用者無法故意或意外地變更記錄的任何值。On this screen, users can't intentionally or accidentally change any values of the record. 顯示表單控制項是唯讀控制項,因此它不會修改記錄。The Display form control is a read-only control, so it won't modify a record.

若要新增顯示表單控制項:To add a Display form control:

  1. 新增畫面,然後將顯示表單控制項新增至其中Add a screen, and then add a Display form control to it
  2. 將表單控制項的 DataSource 屬性設為 'Ice Cream'Set the DataSource property of the form control to 'Ice Cream'.

在右窗格中,您可以選取要在畫面顯示的欄位,以及要對每個欄位顯示何種類型的卡片。In the right-hand pane, you can select the fields to display on your screen and which type of card to display for each field. 當您在右窗格中進行變更時,每張卡片控制項上的 DataField 屬性會設為使用者將與之互動的欄位。As you make changes in the right-hand pane, the DataField property on each Card control is set to the field that the user will interact with. 您的畫面應該類似下列範例︰Your screen should resemble this example:

Ice Cream 資料來源的顯示表單

最後,我們必須將顯示表單控制項連線至資源庫控制項,讓我們可以查看特定記錄的詳細資料。Finally, we need to connect the Display form control to the Gallery control so that we can look at details for a specific record. 我們一完成設定 Item 屬性,來自資源庫的第一筆記錄就會出現在我們的表單中。As soon as we complete setting the Item property, the first record from the gallery will appear in our form.

  • 顯示表單 控制項的 Item 屬性設為 Gallery1.SelectedSet the Item property of the Display form control to Gallery1.Selected.

    所選取之項目的詳細資料會出現在表單中。The details for the selected item appear in the form.

    Ice Cream 資料來源的顯示表單,已連線至資源庫控制項

太棒了!Great! 我們現在要開始瀏覽︰使用者如何從資源庫畫面開啟詳細資料畫面,以及從詳細資料畫面開啟資源庫畫面。We now turn to navigation: how a user opens the details screen from the gallery screen and opens the gallery screen from the details screen.

  • 按鈕控制項、設定其 Text 屬性以顯示 Back,然後將其 OnSelect 屬性設為 Back()Add a Button control to the screen, set its Text property to show Back, and set its OnSelect property to Back().

    此公式可讓使用者在完成檢視詳細資料時返回資源庫。This formula returns the user back to the gallery when they finish viewing details.

    Ice Cream 資料來源的顯示表單,具有上一步按鈕

現在,讓我們回到資源庫控制項,然後將一些瀏覽項目新增至我們的詳細資料畫面。Now, let's return to the Gallery control and add some navigation to our detail screen.

  1. 切換至第一個畫面 (裝載資源庫控制項之處),然後選取資源庫中第一個項目的箭號。Switch to the first screen, which is hosting our Gallery control, and select the arrow in the first item in the gallery.

  2. 將圖形的 OnSelect 屬性設定為以下公式:Set the OnSelect property of the shape to this formula:
    Navigate( Screen2, None )Navigate( Screen2, None )

    Ice Cream 資料來源的顯示表單,具有上一步按鈕

  3. 按下 F5 鍵,然後選取資源庫中的箭號,以顯示項目的詳細資料。Press F5, and then select an arrow in the gallery to show the details for an item.

  4. 選取上一步按鈕以返回產品的資源庫,然後再按下 Esc 鍵。Select the Back button to return to the gallery of products, and then press Esc.

編輯詳細資料Editing details

我們最後一個核心活動就是變更記錄的內容,此記錄是使用者在編輯表單控制項中完成的。Finally, our last core activity is changing the contents of a record, which users accomplish in an Edit form control.

編輯表單控制項會使用兩個屬性來顯示並編輯記錄︰The Edit form control uses two properties to display and edit the record:

  • DataSource 屬性。DataSource property. 保留記錄的資料來源名稱。The name of the data source that holds the record. 正如同顯示表單控制項,此屬性會在右邊面板填入欄位,並決定每個欄位的顯示名稱和資料類型 (字串、數字、日期等等)。Just as with the Display form control, this property populates the right-hand panel with fields and determines the display name and data type (string, number, date, etc.) for each field. 此屬性也會決定每個欄位的值是否有效,再將它提交至基礎資料來源。This property also determines whether each field's value is valid before submitting it to the underlying data source.
  • Item 屬性。Item property. 要編輯的記錄,通常會連線至資源庫控制項的 Selected 屬性。The record to edit, which is often connected to the Selected property of the Gallery control. 這樣一來,您可以選取資源庫控制項中的記錄、將它顯示在詳細資料畫面中,然後在 [編輯和建立] 畫面中編輯它。That way, you can select a record in the Gallery control, show it in the details screen, and edit it in the Edit and Create screen.

若要新增編輯表單控制項:To add an Edit form control:

  1. 新增畫面、新增編輯表單控制項,然後將表單的 DataSource 屬性設為 'Ice Cream'Add a screen, add an Edit form control, and then set the form's DataSource property to 'Ice Cream'.
  2. Item 屬性設為 Gallery1.SelectedSet the Item property to Gallery1.Selected.

您現在可以選取要在面上顯示的欄位。You can now select the fields to display on your screen. 您也可以選取要對每個欄位顯示何種類型的卡片。You can also select which type of card to display for each field. 當您在右窗格中進行變更時,每張卡片控制項上的 DataField 屬性會設為使用者將與之互動的欄位。As you make changes in the right-hand pane, the DataField property on each Card control is set to the field your user will interact with. 您的畫面應該類似下列範例︰Your screen should resemble this example:

Ice Cream 資料來源的顯示表單

這兩個屬性與顯示表單控制項上的屬性相同。These two properties are the same as the properties on the Display form control. 此外,我們可以顯示記錄的詳細資料。And with these alone, we can display the details of a record.

編輯表單控制項可更進一步,方法為提供 SubmitForm 函式,將變更寫回資料來源。The Edit form control goes further by offering the SubmitForm function to write back changes to the data source. 您使用此控制項與按鈕或影像控制項搭配,來儲存使用者的變更。You use this with a button or image control to save a user's changes.

  • 新增按鈕控制項、設定其 Text 屬性以顯示 Save,然後將其 OnSelect 屬性設為以下公式:Add a Button control, set its Text property to show Save, and set its OnSelect property to this formula:
    SubmitForm( Form1 )SubmitForm( Form1 )

Ice Cream 資料來源的編輯表單

若要新增進出這個畫面的導覽項目︰To add navigation to and from this screen:

  1. 新增另一個按鈕控制項、設定其 Text 屬性以顯示 Cancel,然後將其 OnSelect 屬性設為以下公式:Add another Button control, set its Text property to show Cancel, and set its OnSelect property to this formula:
    ResetForm( Form1 ); Back()ResetForm( Form1 ); Back()

    此公式會捨棄任何未儲存的編輯,然後開啟前一個畫面。This formula discards any unsaved edits and opens the previous screen.

    Ice Cream 資料來源的顯示表單

  2. 將表單的 OnSuccess 屬性設為 Back()Set the OnSuccess property of the form to Back().

    當成功儲存更新時,前一個畫面 (在此情況下,指的是詳細資料畫面) 會自動開啟。When updates are successfully saved, the previous screen (in this case, the details screen) opens automatically.

    已新增 "OnSuccess" 規則的編輯表單

  3. 在 [顯示] 畫面上,新增按鈕、設定其 Text 屬性以顯示 Edit,然後將其 OnSelect 屬性設為以下公式:On the Display screen, add a button, set its Text property to show Edit, and set its OnSelect property to this formula:
    Navigate( Screen3, None )Navigate( Screen3, None )

    已新增 [編輯] 按鈕的顯示表單

您已建置基本應用程式,其有三個畫面可供檢視和輸入資料。You've built a basic app with three screens for viewing and entering data. 若要試試看,請顯示資源庫畫面,然後按下 F5 鍵 (或選取畫面左上角附近的向前箭號 [預覽] 按鈕)。To try it out, show the gallery screen, and then press F5 (or select the forward arrow "Preview" button near the upper-left corner of the screen). 粉紅色的點指示使用者在每個步驟中按一下或點選畫面的位置。The pink dot indicates where the user clicks or taps the screen at each step.

試用 ice cream 應用程式

建立記錄Create a record

使用者會與相同的編輯表單互動,以同時更新並建立記錄。The user interacts with the same Edit form to both update and create records. 當使用者想要建立記錄時, NewForm 函式會將表單切換至新增模式。When the user wants to create a record, the NewForm function switches the form to New mode.

當表單處於新增模式時,每個欄位的值都會設為資料來源的預設值。When the form is in New mode, the value of each field is set to the defaults of the data source. 提供給表單的 Item 屬性的記錄會被忽略。The record that's provided to the form's Item property is ignored.

當使用者準備好儲存新記錄時, SubmitForm 即會執行。When the user is ready to save the new record, SubmitForm runs. 在成功提交表單之後,表單會自動切換回 EditModeAfter the form is successfully submitted, the form is switched back to EditMode.

在第一個畫面上,您將加入 [新增] 按鈕︰On the first screen, you'll add a New button:

  1. 在具有資源庫的畫面上,新增按鈕控制項。On the screen with the gallery, add a Button control.
  2. 將按鈕的 Text 屬性設為 New,並將其 OnSelect 屬性設為以下公式:Set the button's Text property to New and its OnSelect property to this formula:
    NewForm( Form1 ); Navigate( Screen3, None )NewForm( Form1 ); Navigate( Screen3, None )

    此公式會將 Screen3 上的編輯表單控制項切換為新增模式,並開啟該畫面,讓使用者可以填寫它。This formula switches the Edit form control on Screen3 to New mode and opens that screen so that the user can fill it in.

已新增 [編輯] 按鈕的顯示表單

當 [編輯和建立] 畫面開啟時,表單是空的,使用者可在其中新增項目。When the Edit and Create screen opens, the form is empty, ready for the user to add an item. 當使用者選取 [儲存] 按鈕時, SubmitForm 函式會確保建立而不是更新記錄。When the user selects the Save button, the SubmitForm function ensures that a record is created instead of being updated. 如果使用者選取 [取消] 按鈕時, ResetForm 函式會將表單切換回編輯模式,而且 Back 函式會開啟畫面以瀏覽資源庫。If the user selects the Cancel button, the ResetForm function switches the form back to Edit mode, and the Back function opens the screen for browsing the gallery.

刪除記錄Delete a record

  1. 在 [顯示] 畫面上,新增按鈕,並設定其 Text 屬性以顯示 DeleteOn the Display screen, add a button, and set its Text property to show Delete..
  2. 將按鈕的 OnSelect 屬性設為以下公式:Set the button's OnSelect property to this formula:
    Remove( 'Ice Cream', Gallery1.Selected ); Back()Remove( 'Ice Cream', Gallery1.Selected ); Back()

    已新增 [編輯] 按鈕的顯示表單

處理錯誤Handling errors

在此應用程式中,當欄位的值無效、必要的欄位是空的、您與網路中斷連線,或任意數目的其他問題快顯時,就會發生錯誤。In this app, an error occurs when the value of a field is not valid, a required field is blank, you're disconnected from the network, or any number of other problems pop up.

如果 SubmitForm 基於任何原因失敗,則編輯表單控制項的 Error 屬性包含要向使用者顯示的錯誤訊息。If SubmitForm fails for any reason, the Error property of the Edit form control contains an error message to show the user. 利用此資訊,使用者應該可以更正問題並重新提交變更,或他們可以取消更新。With this information, the user should be able to correct the issue and resubmit the change, or they can cancel the update.

  1. 在 [編輯和建立] 畫面上,新增標籤控制項,並將它移至 [儲存] 按鈕正下方。On the Edit and Create screen, add a Label control, and move it just below the Save button. 在使用者選取此控制項來儲存變更之後,任何錯誤都將很容易看到。Any error will be easy to see after the user selects this control to save changes.

  2. 設定標籤控制項的 Text 屬性,以顯示 Form1.ErrorSet the Text property of the Label control to show Form1.Error.

    已新增 [編輯] 按鈕的顯示表單

在 PowerApps 從資料產生的應用程式中,此控制項上的 AutoHeight 屬性會設為 true,以便如果沒有發生錯誤,不會佔用任何空間。In an app that PowerApps generates from data, the AutoHeight property on this control is set to true so that no space is consumed if no error occurs. 編輯表單控制項的 HeightY 屬性也會動態調整,以說明此控制項在錯誤發生時的成長情形。The Height and Y properties of the Edit form control are also adjusted dynamically to account for this control growing when an error occurs. 如需其他詳細資料,請從現有資料產生應用程式,並檢查這些屬性。For more details, generate an app from existing data, and inspect these properties. 當沒有錯誤發生時,錯誤的文字方塊控制項很短,因此您可能需要開啟 [進階] 檢視 (可在 [檢視] 索引標籤上取得) 來選取此控制項。The text-box control for errors is very short when no error has occurred, you may need to open the Advanced view (available on the View tab) to select this control.

來自資料編輯表單 (已選取錯誤文字控制項) 的應用程式

來自資料編輯表單 (已選取表單控制項) 的應用程式

重新整理資料Refresh data

每當使用者開啟應用程式時,即會重新整理資料來源,但使用者可能想要重新整理資源庫中的記錄,而不關閉應用程式。The data source is refreshed whenever the user opens the app, but the user might want to refresh the records in the gallery without closing the app. 新增 [重新整理] 按鈕,讓使用者可以選取它,以手動方式重新整理資料︰Add a Refresh button so that the user can select it to manually refresh the data:

  1. 在具有資源庫控制項的畫面上,新增按鈕控制項,並設定其 Text 屬性以顯示RefreshOn the screen with the Gallery control, add a Button control and set its Text property to show Refresh.

  2. 將此控制項的 OnSelect 屬性設定為以下公式:Set the OnSelect property of this control to this formula:
    Refresh( 'Ice Cream' )Refresh( 'Ice Cream' )

    重新整理資料來源

在 PowerApps 從資料產生的應用程式中,我們會忽略討論 [瀏覽] 畫面頂端的兩個控制項。In the app that PowerApps generated from data, we neglected to discuss two controls at the top of the Browse screen. 藉由使用這些控制項,使用者可以搜尋一或多筆記錄、依遞增或遞減順序排序記錄清單,或執行這兩者。By using these controls, the user can search for one or more records, sort the list of records in ascending or descending order, or both.

排序和搜尋瀏覽螢幕上的控制項

當使用者選取排序按鈕時,資源庫的排序順序會反轉。When the user selects the sort button, the sort order of the gallery reverses. 為了建立此行為,我們使用內容變數追蹤資源庫的排序方向。To create this behavior, we use a context variable to track the direction in which the gallery is sorted. 當使用者選取按鈕時,變數會更新,而且方向會反轉。When the user selects the button, the variable is updated, and the direction reverses. 排序按鈕的 OnSelect 屬性會設定為以下公式:UpdateContext( {SortDescending1: !SortDescending1} )The OnSelect property of the sort button is set to this formula: UpdateContext( {SortDescending1: !SortDescending1} )

UpdateContext 函式會建立 SortDescending1 內容變數 (如果不存在的話)。The UpdateContext function creates the SortDescending1 context variable if it doesn't already exist. 函式將讀取變數的值,並使用 ! 運算子,將它設為邏輯反項The function will read the value of the variable and set it to the logical opposite by using the ! 運算子來存取控制項屬性。operator. 如果值為 true,它會變成 falseIf the value is true, it becomes false. 如果值為 false,它會變成 trueIf the value is false, it becomes true.

資源庫 控制項的 Items 屬性的公式會使用此內容變數,以及 TextSearchBox1 控制項中的文字:The formula for the Items property of the Gallery control uses this context variable, along with the text in the TextSearchBox1 control:

Gallery1.Items = Sort( If( IsBlank(TextSearchBox1.Text),
                           Assets,
                           Filter( Assets,
                                   TextSearchBox1.Text in Text(ApproverEmail) ) ),
                        ApproverEmail,
                        If(SortDescending1, Descending, Ascending) )

讓我們分類如下︰Let's break this down:

  • 在外部,我們有 Sort 函式,其會採用三個引數︰資料表、排序據的欄位,以及排序方向。On the outside, we have the Sort function, which takes three arguments: a table, a field on which to sort, and the direction in which to sort.

    • 排序方向取自於當使用者選取 ImageSortUpDown1 控制項時切換的內容變數。The sort direction is taken from the context variable that toggles when the user selects the ImageSortUpDown1 control. true/false 值會轉譯成常數 DescendingAscendingThe true/false value is translated to the constants Descending and Ascending.
    • 排序依據的欄位會固定為 ApproverEmailThe field to sort on is fixed to ApproverEmail. 如果您變更資源庫中出現的欄位,也將需要變更此引數。If you change the fields that appear in the gallery, you'll need to change this argument too.
  • 在內部,我們有 Filter 函式,其會採用資料表做為引數和運算式來評估每一筆記錄。On the inside, we have the Filter function, which takes a table as an argument and an expression to evaluate for each record.

    • 資料表是原始 Assets 資料來源,其為篩選或排序前的起點。The table is the raw Assets data source, which is the starting point before filtering or sorting.
    • 運算式會在 ApproverEmail 欄位內的 TextSearchBox1 中搜尋字串的執行個體。The expression searches for an instance of the string in TextSearchBox1 within the ApproverEmail field. 如果再次變更資源庫中出現的欄位,也將需要更新此引數。Again, if you change the fields that appear in the gallery, you'll also need to update this argument.
    • 如果 TextSearchBox1 是空的,則使用者想要顯示所有記錄,而且會略過 Filter 函式。If TextSearchBox1 is empty, the user wants to show all records, and the Filter function is bypassed.

這是唯一的範例,您可以撰寫 FilterSort,以及其他函式和運算子,為 Items 屬性建立自己的公式,取決於應用程式的需求。This is but one example; you can craft your own formula for the Items property, depending on the needs of your app, by composing Filter, Sort, and other functions and operators together.

畫面設計Screen design

到目前為止,我們尚未討論跨畫面散發控制項的其他方法。So far, we haven't discussed other ways to distribute controls across screens. 原因是您有許多選項,而且最佳選擇取決於特定應用程式的需求。That's because you have many options, and the best selection depends on your specific app's needs.

由於電話畫面上的不動產受到諸多限制,您可能想要在不同畫面上瀏覽、顯示和編輯/建立。Because real estate on phone screens is so limited, you probably want to browse, display, and edit/create on different screens. 在本主題中,NavigateBack 函式會開啟每個畫面。In this topic, the Navigate and Back functions open each screen.

在平板電腦上,您可以在兩個或甚至一個畫面上瀏覽、顯示和編輯/建立。On a tablet, you can browse, display, and edit/create on two or even one screen. 若為後者,將不需要 NavigateBack 函式。For the latter, no Navigate or Back function would be required.

如果使用者使用相同畫面,則您需要注意,使用者無法變更資源庫中的選擇 ,而且可能會喪失編輯表單控制項中的編輯。If the user is working on the same screen, you need to be careful that the user can't change the selection in the Gallery and potentially lose edits in the Edit form control. 若要防止使用者在另一筆記錄的變更尚未儲存時選取不同的記錄,請將資源庫的 Disabled 屬性設定為以下公式:To keep the user from selecting a different record when changes to another record haven't been saved yet, set the Disabled property of the gallery to this formula:
EditForm.UnsavedEditForm.Unsaved