直接從工具列、在 [屬性] 索引標籤或在公式列中將各種不同的 UI 元素新增至您的應用程式,並設定它們的外觀和行為。 這些 UI 元素稱為控制項,而您設定的層面稱為屬性。

必要條件

  1. 註冊 PowerApps、加以安裝、予以開啟,然後以您註冊時所使用的認證登入。

  2. 在 PowerApps Studio 中,按一下或點選 [檔案] 功能表 (靠近左側) 中的 [新增]。

    [檔案] 功能表上的 [新增] 選項

  3. 在 [空白應用程式] 圖格上,按一下或點選 [手機配置]。

    從頭建立應用程式

  4. 如果系統提示您觀看簡介導覽,請按一下或點選 [下一步] 熟悉 PowerApps 介面的主要區域 (或按一下或點選 [略過])。

    開啟簡介導覽畫面

    您日後可以隨時按一下或點選右上角附近的問號圖示,然後按一下或點選 Take the intro tour (簡介導覽),即可觀看導覽。

新增控制項

您可以按一下或點選工具列的 [插入] 索引標籤、按一下或點選類別,然後按一下或點選您想要的控制項,新增各種類別中的任何控制項。 在本區段中,檢閱每個類別中的控制項,以熟悉您可以新增的控制項類型,以及可找到每個類型的位置。

  • 在 [插入] 索引標籤上,按一下或點選任何分類,然後按一下或點選您想要新增的控制項:

    文字:標籤、文字輸入、HTML 文字、手寫筆輸入
    控制項:按鈕、下拉式清單、日期選擇器、清單方塊、核取方塊、選項、切換、滑桿、分級、計時器
    資源庫:垂直、水平、彈性高度、空白垂直、空白水平、空白彈性高度
    資料表
    表單:編輯、顯示、實體表單
    媒體:影像、相機、條碼、視訊、音訊、麥克風、新增圖片
    圖表:直條圖、折線圖、圓形圖
    圖示

提示:如果您需要給控制項更多空間,請新增其他畫面

直接設定控制項

在此程序中,您將新增和設定標籤控制項,但是您可以對其他控制項套用許多相同的原則。

  1. 按一下或點選 [插入] 索引標籤,然後按一下或點選 [標籤]。

    [插入] 索引標籤

    當您新增控制項時,預設會選取它。 您也可以按一下或點選現有的控制項來選取。 選取控制項時,選取方塊會圍繞在控制項周圍,UI 的其他區域會變更,讓您可以設定選取的控制項。 例如,選取的標籤控制項如下圖所示。

    選取的標籤

    重要事項︰如果選取某個控制項,而您又選取另一個控制項或畫面的空白區域,就不會再選取第一個元素。

  2. 將選取方塊右邊的控點向左拖曳,會讓標籤控制項變窄。 (您放大時,才會出現中間的控點)。

    已調整大小的標籤

    您也可以藉由修改控制項的高度寬度或這兩個屬性,來調整控制項的大小,如本主題稍後所述。

  3. 拖曳選取方塊本身 (或修改 XY 或這兩個屬性,如本主題稍後所述) 可移動標籤控制項。

  4. 按三下標籤控制項中顯示的文字,然後輸入 Hello, world

    包含自訂文字的標籤

    您也可以藉由設定此控制項的文字屬性來修改此文字,如本主題稍後所述。

從工具列設定控制項

從工具列設定控制項,您可以比直接設定控制項指定較多的選項。

  1. 選取標籤控制項,並按一下或點選工具列的 [常用] 索引標籤。

    [常用] 索引標籤

  2. 按一下或點選 [填滿],然後按一下或點選例如青綠色的色彩。

    [填滿] 選項

    標籤 控制項會反映您的選擇。

    使用青綠色填滿的標籤

  3. 變更文字的字型家族和大小 (例如,變更為 18 點 Georgia)。

    字型控制項

    標籤 控制項會反映您的選擇。

    18 點 Georgia

  4. 按一下或點選 [標籤] 索引標籤,並按一下或點選 [VerticalAlign],然後按一下或點選 [靠上]。

    [文字方塊] 索引標籤

    標籤 控制項會反映您的選擇。

    文字對齊方塊上方的標籤

從屬性索引標籤設定控制項

您可以使用 [屬性] 索引標籤設定控制項而不需撰寫公式。 在此程序中,您將新增和設定其他標籤控制項,但是您可以對其他控制項套用許多相同的原則。

  1. 新增其他標籤控制項,如本主題稍早所述。

  2. 選取新控制項,按一下或點選右側窗格中的 [屬性] 索引標籤。

    屬性面板

  3. 文字方塊中,輸入屬性索引標籤

    屬性面板標籤文字

    標籤控制項會顯示輸入的文字。

    屬性面板畫布文字

  4. 按一下或點選 [屬性] 面板中的 [填滿] 圖示,然後按一下或點選一種色彩。

    屬性面板色彩文字

    標籤 控制項會反映您的選擇。

    屬性面板畫布色彩

  5. 按一下或點選屬性面板中的色彩屬性。

    屬性面板屬性

    色彩屬性的值會在公式列中反白顯示。

    屬性面板屬性運算式

    1. 按一下或點選第二個標籤控制項,並按下 Delete 鍵,可將它刪除。

在公式列中設定控制項

使用公式列,您可以設定無法直接設定、無法從 [屬性] 索引標籤或從工具列設定的屬性。 例如,您可以設定當使用者指向控制項但沒有按一下或點選時所顯示的工具提示。 您也可以指定複雜的公式,提昇應用程式的威力。

您在本主題中稍早所做的每個變更已更新您設定的控制項屬性值。

  • 當您調整控制項的大小時,是變更其寬度屬性。
  • 當您移動控制項時,是變更其 XY 屬性。
  • 當您變更控制項顯示的文字時,是變更其文字屬性。

如果不直接設定或從 [屬性] 索引標籤或工具列設定控制項,您也可以在屬性清單中選取屬性,然後在公式列中指定值來更新屬性的值。 透過這種方式,您可以依字母順序搜尋屬性,而且可以指定更多類型的值。

  1. 選取其餘標籤控制項,並在屬性清單中按一下或點選 Text,然後在公式列中輸入 "My Company Name" (包括引號)。

    標籤中的常值字串

    當您在文字字串周圍加上引號時,就是指定它要完全依照您輸入的內容。 或者,您可以將屬性的值設定為公式。

  2. 選取標籤控制項,在屬性清單中按一下或點選 Text,然後在公式列中輸入 Today() (不含引號)。

    控制項會顯示目前的日期。

    Today 函式

    提示︰您可以用各種方式格式化日期和時間,還可以對它們執行計算。

設定兩個控制項彼此互動

在此程序中,您將新增核取方塊,然後設定已有的標籤在選取核取方塊時才會出現。

  1. 按一下或點選 [插入] 索引標籤。

    [插入] 索引標籤

  2. 按一下或點選 [控制項],然後按一下或點選 [核取方塊]。

    插入核取方塊

  3. 移動核取方塊控制項讓它顯示在標籤控制項下方,並設定核取方塊控制項的 Text 屬性,讓 [顯示文字] 出現。

    設定核取方塊

  4. 已選取核取方塊控制項後,在 [屬性] 索引標籤上方按一下或點選其名稱,然後輸入 MyCheckbox

    重新命名核取方塊

  5. 按一下或點選標籤控制項以選取它。

  6. 在 [屬性] 索引標籤上,按一下或點選可見屬性。

    [可見] 屬性

  7. 在公式列中,刪除 true,然後輸入或貼上此公式︰

    If(MyCheckbox.Value = true, true, false)

    這個 If 函式 表示標籤只有在選取核取方塊時才會出現。 因為核取方塊已清除,所以標籤控制項消失 (除了選取方塊)。

    可見的公式

  8. 按一下或點選核取方塊控制項以對它新增選取方塊,然後再按一下或點選控制項以新增核取記號。

    [標籤] 會再次出現︰

    選取核取方塊時,標籤就會出現

  9. 清除核取方塊控制項可隱藏標籤控制項。

    清除核取方塊時,標籤就會消失

這個範例很基本,但是您可以從簡單到複雜,建立一或多個公式來設定應用程式的行為和外觀。

重新命名畫面或控制項

您可以重新命名畫面或控制項,建立更容易讀取與維護的公式。

  1. 按一下或點選您想要重新命名的畫面或控制項。

  2. 在右側窗格中,按一下或點選控制項名稱 (在 [屬性] 索引標籤上方),然後輸入想要的名稱。

    重新命名核取方塊

尋找並選取畫面或控制項

您可以尋找並選取畫面或控制項,即使它隱藏或與另一個控制項重疊,方法是在左側窗格中搜尋。 這個窗格會顯示應用程式中每個畫面的縮圖,或每個畫面和它具有的控制項的階層檢視。

  • 若要在縮圖和階層檢視之間切換,請按一下或點選窗格右上角的圖示。

    切換檢視

  • 若要尋找控制項,請輸入一或多個字元,以反白顯示包含您所輸入之文字的控制項名稱。

    如果您按一下或點選搜尋結果,您可以在應用程式中選取該控制項。

    在樹狀結構檢視中搜尋

  • 若要將畫面上移或下移、複製它、將其刪除,或將它重新命名,以滑鼠右鍵按一下它 (或者按一下或點選它旁邊的省略符號),然後按一下或點選您想要的選項。

    樹狀結構檢視內容功能表

  • 若要複製/貼上控制項、將其刪除,或將它重新命名,以滑鼠右鍵按一下它 (或者按一下或點選它旁邊的省略符號),然後按一下或點選您想要的選項。