注意:這篇文章是搭配 SharePoint Online 使用 PowerApps、Microsoft Flow 及 Power BI 之教學課程系列的一部分。 請確定您閱讀系列簡介以了解大致概念,以及相關下載項目。

既然 SharePoint 清單已就緒,我們可以建立並自訂我們的第一個應用程式。 PowerApps 與 SharePoint 整合,所以直接從清單產生基本的三個畫面應用程式很容易。 此應用程式可讓您檢視每個清單項目的摘要和詳細資訊、更新現有清單項目,以及建立新的清單項目。 如果您直接從清單建立應用程式,應用程式會針對該清單顯示為檢視。 然後您可以在瀏覽器中以及行動電話上執行該應用程式。

提示:此案例的下載套件包括此應用程式的已完成版本:project-requests-app.msapp。

步驟 1:從 SharePoint 清單產生應用程式

  1. 在您建立的 [專案要求] 清單中,按一下或點選 [PowerApps],然後按一下或點選 [建立應用程式]。

    建立應用程式

  2. 指定應用程式名稱,例如「專案要求應用程式」,然後按一下或點選 [建立]。 應用程式就緒時,它會在適用於 Web 的 PowerApps Studio 中開啟。

    指定應用程式名稱

步驟 2:在 PowerApps Studio 中檢閱應用程式

  1. 在 PowerApps Studio 中,左側導覽列預設會顯示畫面的階層檢視和應用程式中的控制項。

    具有階層檢視的 PowerApps Studio

  2. 按一下或點選縮圖圖示以切換檢視。

    PowerApps Studio 檢視選擇器

  3. 按一下或點選每個畫面以在中間窗格中檢視。 有三個畫面:

    1. 瀏覽畫面,您可以在其中瀏覽、排序和篩選從清單提取的資料。
    2. 詳細資料畫面,您可以在其中檢視更詳細的項目資訊。
    3. 編輯/建立畫面,您可以在其中編輯現有的項目或建立新的項目。

    具有縮圖檢視的 PowerApps Studio

步驟 3:自訂應用程式的瀏覽畫面

  1. 按一下或點選瀏覽畫面。

    此畫面具有版面配置,其中包含資源庫以顯示清單項目,以及其他控制項,例如搜尋列和排序按鈕。

  2. 按一下第一筆記錄外的任何記錄,以選取 BrowseGallery1 資源庫。

    瀏覽資源庫

  3. 在右窗格中,更新欄位以符合下列清單:

    • 要求日期
    • Description
    • Title
    • Requestor

    資源庫欄位

  4. BrowseGallery1 保持選取的同時,選取 Items 屬性。

    Items 屬性

  5. 將公式變更為 SortByColumns(Filter('Project Requests', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending))

    公式列

    這可讓您依據 [標題] 欄位排序和搜尋,而不是依據 PowerApps 挑選的預設值。 如需詳細資訊,請參閱深入了解公式

  6. 按一下或點選 [檔案],然後按一下或點選 [儲存]。 按一下或點選 [返回應用程式圖示] 以返回應用程式。

步驟 4:自訂應用程式的詳細資料畫面及編輯畫面

  1. 按一下或點選詳細資料畫面。

    此畫面有不同的版面配置,其中包含顯示表單以顯示在資源庫中選取之項目的詳細資料。 它具有控制項,可以編輯和刪除項目,並且返回瀏覽畫面。

  2. 選取 DetailForm1 顯示表單。

    詳細資料顯示表單

  3. 在右窗格中,將 [標題] 欄位拖曳至頂端。

    標題欄位

  4. 按一下或點選編輯畫面。

    此畫面包含編輯表單以編輯選取的項目,或建立新的項目 (如果您是直接從瀏覽畫面來到這裡)。 它具有控制項,可以儲存或捨棄變更。

  5. 選取 EditForm1 編輯表單。

    編輯表單

  6. 如上所述,將 [標題] 欄位拖曳至頂端。

    標題欄位

步驟 5:從清單執行應用程式

  1. 在 [專案要求] 清單中,按一下或點選 [所有項目],然後按一下或點選 [專案要求應用程式]。

    檢視專案要求應用程式

  2. 按一下 [開啟],以在新的瀏覽器索引標籤中開啟應用程式。

    開啟專案要求應用程式

  3. 在應用程式中,按一下或點選 瀏覽資源庫中第一個項目的移至詳細資料圖示

    第一個資源庫項目

  4. 按一下或點選 鉛筆編輯圖示 以編輯項目。

  5. 更新 [說明] 欄位 – 將最後一個字從 "group" 變更為 "team",然後按一下或點選核取記號圖示

    更新說明欄位

  6. 關閉瀏覽器索引標籤。

  7. 返回 [專案要求] 清單,按一下或點選 [專案要求應用程式],然後按一下或點選 [所有項目]。

    檢視所有項目

  8. 請確認您從應用程式所做的變更。

    請確認您的編輯

這是非常簡單的應用程式,我們只會進行一些基本的自訂,但是您會發現可以快速建置一些有趣的項目。 我們將移至下一個工作,但是想要的話再看一下應用程式,並且了解控制項和公式如何共同運作以驅動應用程式行為。

深入了解公式

本節為選擇性,但是它會協助您深入了解公式的運作方式。 在這項工作的步驟 3 中,我們會修改 BrowseGallery1Items 屬性的公式。 具體來說,我們會將排序和搜尋變更為使用 [標題] 欄位,而不是 PowerApps 挑選的欄位。 以下是修改過的公式:

SortByColumns ( Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text ) ), "Title", If ( SortDescending1, Descending, Ascending ) )

但是這個公式能夠做什麼? 它決定在資源庫中出現的資料來源、根據在搜尋方塊中輸入的任何文字篩選資料,以及根據應用程式中的排序按鈕排序結果。 此公式會使用函式以執行其工作。 函式會採用參數 (也就是輸入),執行作業 (例如篩選),然後傳回值 (也就是輸出):

  • SortByColumns 函式會根據一或多個資料行排序資料表。

  • Filter會尋找資料表中滿足您指定之公式的記錄。

  • StartsWith 函式會測試某個文字字串的開頭是否為另一個文字字串。

  • 如果條件成立則 If 函式會傳回一個值,如果相同條件不成立則傳回另一個值。

當您在公式中將函式放在一起時,會發生下列情況:

  1. 如果您在搜尋方塊中輸入文字,StartsWith 函式會比較該文字與清單之 [標題] 資料行中每個字串的開頭文字。

    StartsWith ( Title, TextSearchBox1.Text )

    例如,如果您在搜尋方塊中輸入 "de",您會看到四個結果,包括以 "Desktop" 和 "Device" 開頭的項目。 您不會看到所有 "Mobile devices" 項目,因為這些項目不是以 "de" 開頭。

  2. Filter 函式從 [專案要求] 資料表傳回資料列。 如果要比較的搜尋方塊中沒有任何文字,Filter 會傳回所有資料列。

    Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text )

  3. If 函式會查看變數 SortDescending1 設為 true 或 false (應用程式中設定它的排序按鈕)。 函式會傳回值為遞減遞增

    If ( SortDescending1, Descending, Ascending )

  4. 現在 SortByColumns 函式可以排序資源庫。 在此情況下,會依據 [標題] 欄位排序,但是這可能是與您搜尋的欄位不同的欄位。

如果您和我們一起進行到這裡,希望您對於此公式的運作方式,以及如何結合函式和其他元素以驅動您的應用程式所需的行為,有更好的概念。 如需詳細資訊,請參閱 PowerApps 的公式參考

後續步驟

此教學課程系列的下一個步驟是建立流程以管理專案核准