PowerApps 搜索字段：如何添加和自定義

在本教程中，我們將討論PowerApps搜索字段以及如何從頭開始添加和自定義它。

PowerApps 是一個為方便起見而構建的平台，即使用戶沒有編碼或應用程序開發背景，也可以在其中創建自己的應用程序。就像任何其他 Microsoft 平台一樣，它的優勢在於其拖放系統和直觀的設計。

這意味著任何想要構建應用程序的人，無論是簡單地顯示他們的數據還是提高團隊的生產力，都可以輕鬆實現。

我們在過去的教程中討論了從頭開始製作應用程序的基礎知識。這一次，我們專注於 PowerApps 搜索字段。

目錄

• PowerApps 搜索字段的工作原理
• 使用搜索功能
• 從頭開始創建 PowerApps 搜索字段
• 將列添加到 PowerApps 搜索字段
• 添加功能搜索圖標並隱藏搜索欄
• 向搜索欄添加提示
• 結論

PowerApps 搜索字段的工作原理

搜索功能允許用戶搜索和過濾圖庫中的項目。由於 Power Apps 附帶搜索字段已就位的應用程序模板，因此您需要做的就是連接數據源以提取將包含在庫中的項目。

在使用搜索字段時，無需鍵入完整的名稱或單詞。輸入前幾個字母將自動過濾項目並顯示匹配的條目。

儘管內置模板使用起來很方便，但我們不能 100% 地依賴它們。如果您想根據自己的特定需求完全自定義應用程序，則必須創建自己的畫布應用程序。這意味著您需要從頭開始創建自己的搜索字段。

使用搜索功能

讓我們使用在上一個教程中從頭開始構建的這個屏幕。現在，我們在“查看客戶”屏幕中。

因為它包含一個項目庫，所以在這裡創建一個搜索字段是有意義的。

此頁面上顯示的庫是庫 2。如果我們查看 Items 屬性，它表明我們正在從 Table1 中提取數據。

這意味著當我們添加搜索功能時，它將搜索 Table1 上的項目並根據我們輸入的內容過濾結果。

那麼讓我們看看搜索功能是如何工作的。進入描述此功能的Microsoft 文檔，它表明搜索功能需要一個表、一個搜索字符串和您要搜索的列。

記住這個公式，讓我們看看搜索功能在我們自己的應用程序中是如何工作的。

使用 Gallery2 中的 Items 屬性，讓我們使用編輯欄中的搜索功能並引用 Table1，因為這是我們的主要數據源。

對於實際的搜索字符串，讓我們搜索名字 Elton。

然後，讓我們在 FirstName 列中進行搜索。

一旦我們按下 Enter，它就會為我們提供一個與我們使用的搜索參數相對應的匹配項。

如果我們從搜索字符串中刪除名稱 Elton，它會再次自動顯示整個畫廊。

讓我們再次搜索 Coralie 這個名字。

一旦我們按下 Enter，它就會再次為我們匹配。

顯然，我們不希望用戶使用 PowerApps 打開圖庫。這意味著他們必須從搜索字段而不是公式欄進行搜索。這就是需要創建我們自己的搜索欄的地方。

從頭開始創建 PowerApps 搜索字段

讓我們首先使用“插入”功能區下的“文本”按鈕添加文本輸入。

就像任何其他元素一樣，我們可以將該文本框拖動到我們想要放置它的任何位置。現在，讓我們把它放在屏幕標題的右側。

由於目前這只是一個簡單的文本框，因此即使我們輸入名稱，它也無法過濾任何內容。為此，我們需要將編輯欄上的搜索功能鏈接到實際的文本框。

這意味著我們需要將元素 TextInput1 添加到該公式中。

為此，我們將鍵入 TextInput1.Text，而不是我們在其中鍵入搜索詞的空格。TextInput1 引用文本框，而 Text 引用我們在文本框中鍵入的任何內容。

現在，讓我們試試看。如果我們在此處鍵入搜索詞，即使我們只鍵入了前幾個字母，您也會看到匹配項。

讓我們嘗試使用不同的名稱並蒐索 Bruna。同樣，它向我們展示了一場比賽。

這次，讓我們試試看是否可以使用姓氏進行搜索。我將輸入 Bruna 的姓氏 Lyles。

如您所見，儘管當我使用名字作為搜索詞時 Bruna Lyles 出現了，但當我嘗試輸入姓氏時它沒有顯示任何匹配項。那是因為我們還沒有在我們的公式中引用其他列。

將列添加到 PowerApps 搜索字段

回到公式欄，讓我們添加 LastName。這也將允許我們使用 LastName 列中的數據進行搜索。

我們還要添加 AgentName。然後，按 Enter 確定該公式。

現在，如果我們搜索姓氏 Lyles，我們終於可以找到匹配項。

添加功能搜索圖標並隱藏搜索欄

在大多數應用程序中，您不僅有搜索欄。您還會看到一個搜索圖標。因此，讓我們將其添加到此屏幕。

只需從“插入”功能區下的“圖標”下拉列表中查找“搜索”即可。

讓我們把它移到搜索欄的右側。

然後，讓我們將顏色更改為白色，以便與其他元素保持一致。

現在我們有了一個搜索圖標，這裡的目標是隱藏搜索欄，讓它只在我們單擊搜索圖標時出現。

如果我們單擊搜索欄並檢查右側的屬性窗格，則表明可見性已打開。

如果我們檢查屬性下拉列表下的可見性屬性，它表明可見性設置為 true。

如果我們將其設置為 false，文本框就會消失。這就是我們想要發生的事情。

不要擔心在文本框不再可見後引用它。我們仍然可以通過單擊左窗格列表中的元素名稱來引用它。

這就是變量發揮作用的地方。我們在另一個教程中討論了PowerApps 中變量的使用。

因為我們希望每次單擊搜索圖標時都會發生一些事情；我們將使用 OnSelect。

我們將使用一個名為 UpdateContext 的變量。

要使用 UpdateContext，我們需要一個用大括號括起來的變量字典。讓我們使用 SearchVisible 並將其設置為 true。

現在我們有了變量，讓我們將文本框的可見性屬性與實際變量聯繫起來。只需單擊 TextInput1，然後將可見性設置為 SearchVisible。

一旦我們將變量綁定到文本框元素，搜索框將僅在我們單擊該圖標時顯示。

使用我們當前的設置，即使在您完成搜索後，文本框仍會保留在屏幕上。理想情況下，我們希望它在我們不再需要它時消失。

所以我們將返回到圖標並更改 OnSelect 的公式。這一次，我們希望在我們第二次單擊該圖標時發生相反的動作。

要設置相反的動作，我們需要做的就是添加一個感嘆號。由於 SearchVisible 當前使文本框出現，!SearchVisible 將使文本框消失。

現在，如果我們第一次點擊該圖標，搜索框就會出現。這意味著 visibility 屬性正在變為 true。

如果我們再次單擊該圖標，可見性變為 false，文本框消失。

向搜索欄添加提示

由於我們已將搜索欄設置為根據名字、姓氏或代理人姓名過濾項目，因此最好添加提示以便用戶知道要使用的搜索詞。

為此，只需突出顯示搜索欄，然後轉到右側窗格。在屬性下，讓我們輸入“搜索名字、姓氏或代理人姓名”。

現在，我們在搜索欄中看到了該提示，使用戶可以更輕鬆地進行搜索。

一旦用戶點擊搜索欄並開始輸入，這個提示也會消失。

Power Apps 簡介：定義、特性、功能和重要性
Power Apps 環境：正確設置應用程序元素
Power Apps Canvas：如何從頭開始創建應用程序

結論

PowerApps 搜索字段絕對是您需要添加到應用程序的內容之一，尤其是當您在圖庫中處理大量數據時。

請記住，最成功的應用程序優先考慮易用性和直觀的控制。添加搜索功能絕對可以滿足這些要求。

一切順利，

亨利