実習ラボ 4 – UI を構築する

このラボでは、アプリのコントロールの色を変更します。

学習する内容

• テーマの使用方法
• アプリをカスタマイズする方法

ラボ手順の概要

• テーマを選択する
• パーソナル化

前提条件

• 「ラボ 3: キャンバス アプリを作成する」を完了している必要があります

詳細な手順

演習 1 – テーマ

タスク 1.1 - アプリを編集する

1. Power Apps Maker ポータル https://make.powerapps.com に移動します。

2. Dev One 環境にいることを確認してください。

3. 左側のメニューから [アプリ] タブを選択します。

4. [予約要求アプリ] を選択し、コマンド (…) を選んで、[編集] > [新しいタブで編集] を選択します。

タスク 1.2 - テーマを選択する

1. Power Apps Studio のアクション バーで、[テーマ] を選択します。

   

2. [赤] のテーマを選択します。

タスク 1.3 - ブランド コントロール

1. アプリの作成メニューで、[ツリー ビュー] を選択します。

2. [BookingRequestList] ギャラリーを展開します。

3. [NextArrow2] を選択します。

4. 数式バーで NextArrow の Color プロパティを次の値に設定します。

    RGBA(164, 38, 44, 1)
   

5. [Body1] を選択します。

6. 数式バーで Body の Color プロパティを次の値に設定します。

    If(ThisItem.Cost > 1000, RGBA(164, 38, 44, 1), Color.Black)
   

7. Power Apps Studio の右上にある [保存] を選択します。

演習 2 – パーソナル化

タスク 2.1 - ユーザー ラベルを追加する

1. 空のキャンバスでギャラリーの外側を選択するか、[MainScreen] を選択します。

2. アプリの作成メニューで、[挿入 (+)] を選択します。

3. テキスト ラベルを選択します。

4. 画面の右上にラベルをドラッグします。

5. アプリの作成メニューで、[ツリー ビュー] を選択します。

6. ラベルの名前を UserLabel に変更します。

7. 数式バーでラベルのプロパティを以下のように設定してください。

   1. X=1100
   2. Y=20
   3. 高さ=40
   4. 幅=250
   5. 配置=Align.Right
   6. Size=18
   7. PaddingRight=10
   8. Color=Color.White
   9. Text=User().FullName

   

8. Power Apps Studio の右上にある [保存] を選択します。

9. コマンド バーの左上にある [<- 戻る] ボタン、[終了] の順に選択し、アプリを終了します。