在 PowerApps 中自訂資源庫版面配置Customize a gallery layout in PowerApps

當您在 PowerApps 中自動產生應用程式後,請自訂瀏覽畫面 (預設會顯示)。After you generate an app automatically in PowerApps, customize the browse screen, which appears by default. 指定要使用的版面配置、要顯示的資料行,以及用於排序和篩選記錄的資料行。Specify which layout to use, which columns to show, and which columns to use when sorting and filtering records.

必要條件Prerequisites

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

  1. 建立從 PowerApps 到 SharePoint 的連線Create a connection from PowerApps to SharePoint.
  2. 建立包含下列資料行的 SharePoint 清單,並命名為 AppGenCreate a SharePoint list, named AppGen, that contains these columns.

    SharePoint 中的範例資料行

  3. 將這些項目新增至您剛才建立的清單。Add these items to the list that you just created.

    樣本資料

  4. 根據您剛才建立的清單自動產生應用程式Generate an app automatically based on the list that you just created.
  5. 在左側的導覽列中按一下或點選右上角的圖示,切換至縮圖檢視。In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

    切換檢視

  1. 在左側導覽列中,按一下或點選頂端縮圖,以確定已選取 BrowseScreen1In the left navigation bar, click or tap the top thumbnail to ensure that BrowseScreen1 is selected.

    BrowseScreen1 縮圖

    BrowseScreen1 顯示 SharePoint 清單中每個項目的 AccountIDTitleBrowseScreen1 shows the AccountID and Title of each item in the SharePoint list.

    瀏覽畫面顯示標題及帳戶識別碼

    接下來,您將指定將顯示每個項目的 OrderDate ,而非 AccountIDNext, you'll specify that the OrderDate for each item will appear instead of the AccountID.

  2. 按一下或點選畫面上第一個項目的 AccountIDClick or tap the AccountID for the first item on the screen.

    當您按一下或點選 UI 項目時 (稱做控制項),您便選取了它,該控制項四周會顯示選取框線及調整大小控點。When you click or tap a UI element (called a control), you select it, and a selection border with resize handles appears around that control.

    選取第一個項目的內文

  3. 在右側窗格中,開啟 Title1 清單,然後按一下或點選 OrderDateIn the right-hand pane, open the Title1 list, and then click or tap OrderDate.

    顯示標題

    [BrowseScreen1] 會反映您的變更。BrowseScreen1 reflects your change.

    含日期的版面配置

如需資源庫的詳細資訊,請參閱顯示 PowerApps 中的項目清單For more information about galleries, see Show a list of items in PowerApps.

設定排序和搜尋資料行Set the sort and search columns

  1. 按一下第一筆記錄外的任何記錄,以選取 [資源庫] 控制項。Select the Gallery control by clicking or tapping any record except the first one.

    選取資源庫

  2. 確定靠近左上角處的屬性清單顯示的是 ItemsNear the upper-left corner, ensure that the property list shows Items.

    Items 屬性

    此屬性的值 (顯示在公式列中) 不僅決定在畫面上顯示的資料來源,還決定篩選與排序資料行。The value of this property, which appears in the formula bar, determines not only the source of data that appears on the screen but also the filter and sort columns.

    例如,公式列可能預設包含此公式。For example, the formula bar might contain this formula by default.

    預設 Items 屬性

    根據此公式,使用者只可顯示開頭為 AccountID 資料行中一或多個字母的記錄。Based on this formula, users can show only those records that start with one or more letters in the AccountID column.

    預設搜尋資料行

    例如,如果使用者在搜尋列中輸入字母 "A",則畫面會顯示 Europa 的記錄。If a user typed, for example, the letter "A" into the search bar, the screen would show the record for Europa. 該記錄的標題並不符合搜尋準則,但是帳戶識別碼符合。The title of that record doesn't match the search criterion, but the account ID does. 稍後在此程序中,您將會變更公式,以根據 Title 資料行篩選記錄。Later in this procedure, you'll change the formula to filter records based on the Title column.

    在任何產生的應用程式中,使用者都可以按一下或點選靠近右上角的排序按鈕,以依照字母順序遞增或遞減排序記錄。In any generated app, users can sort records alphabetically in ascending or descending order by clicking or tapping the sort button near the upper-right corner. 此公式指定系統將會根據 AccountID 資料行排序記錄。This formula specifies that the records will be sorted based on the AccountID column.

    預設排序資料行

    稍後在此程序中,您將會變更公式,以改為根據 Title 資料行排序記錄。Later in this procedure, you'll change the formula to sort the records based on the Title column instead.

  3. 在公式列中,將 AccountID 的兩個執行個體取代為 Title (包括括住第二個執行個體的雙引號)。In the formula bar, replace both instances of AccountID with Title (including the double quotation marks around the second instance).

    公式列現在應該包含類似此範例中的公式︰The formula bar should now contain a formula that resembles this example:
    SortByColumns(Filter(AppGen, StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending))SortByColumns(Filter(AppGen, StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending))

    注意TextSearchBox 後顯示的數字可能更大,這視您先前採取的動作而定。Note: The number that appears after TextSearchBox might be higher, depending on what actions you took previously. 不過,公式應該仍可如預期般運作。However, the formula should still work as expected.

測試排序和搜尋Test sorting and searching

  1. 按下 F5 (或按一下或點選靠近右上角的播放按鈕) 開啟 [預覽] 模式。Open Preview mode by pressing F5 (or by clicking or tapping the play button near the upper-right corner).

    開啟預覽模式

  2. 在靠近 [BrowseScreen1] 的右上角處,按一下或點選排序按鈕一或多次,可變更字母排序順序為遞增或遞減。Near the upper-right corner of BrowseScreen1, click or tap the sort button one or more times to change the alphabetical sort order between ascending and descending.

    測試排序按鈕

  3. 在搜尋方塊中,輸入多個字母,只顯示標題開頭為您所輸入字母的記錄。In the search box, type one more letters to show only those records of which the title starts with the letter or letters that you type.

    測試搜尋列

  4. 移除搜尋列中的所有文字,然後按下 Esc (或按一下或點選 PowerApps 標題列 下方 的關閉圖示) 關閉 [預覽] 模式。Remove all text from the search bar, and then close Preview mode by pressing Esc (or by clicking or tapping the close icon under the title bar for PowerApps).

    關閉預覽模式

變更畫面標題Change the title of the screen

  1. 按一下或點選畫面標題將其選取。Click or tap the title of the screen to select it.

    選取畫面標題

  2. 確定屬性清單中顯示 Text,然後在公式列中輸入您想要的名稱,前後要加上雙引號。Ensure that the property list shows Text, and then type the name that you want, surrounded by double quotation marks, in the formula bar.

    更新畫面標題

    [BrowseScreen1] 會反映您的變更。BrowseScreen1 reflects your change.

    新畫面標題

後續步驟Next steps

  • 按下 Ctrl-S 儲存變更。Press Ctrl-S to save your changes.
  • 透過顯示、隱藏或重新排序表單顯示的欄位,在應用程式中自訂表單Customize the forms in the app by showing, hiding, and reordering the fields that the forms show.