条件付き書式

完了

アプリに条件付き書式を適用すると、ユーザー エクスペリエンスを拡張できます。 注意してもらいたいのですが、各コントロールのプロパティはわずかに異なっています。これは、あるコントロールの条件付き書式が、別のコントロールでは同じではない可能性があることを意味します。 条件付き書式の使用法の例として、特定のユーザーがサインインしたら 画像 コントロールの Visible プロパティを非表示に設定するものや、フォーム コントロールのすべてのフィールドにデータが入力されるまでボタンの DisplayModeDisabled に変更するものなどがあります。 条件付き書式を使用すると、条件に基づく視覚的インジケーターや機能の変更により、ユーザー エクスペリエンスが大幅に向上します。

文字色の条件付き書式

Sum 関数を使用した例の続きとして、lblSum Color プロパティに条件付き書式を適用する数式を作成しましょう。 ユニット 3 で作成した練習用アプリの最初の画面に戻ってください (スクリーン ショットを参照)。

  1. lblSum を選択した状態で、Color プロパティに移動します。 "式" フィールドを選択するとフィールドの下の情報が表示され、値 RGBA(0, 0, 0, 1) は黒色の正方形であり、Data type は Color であることがわかります。

    RGBA 値と Data type: Color が強調表示された、lblSum の Color 値のスクリーンショット。

  2. 現在の値を消去し、Color の Power fx 入力フィールドに次の内容を入力します。

    If(Sum(Value(TextInput2.Text)*Value(TextInput3.Text))>50,Color.Green,Color.Blue)
    

    Color プロパティでは、ラベル コントロール内のテキストの色が定義されています。 この例では、2 つの TextInput コントロールの Sum 計算が 50 より大きいと、色は緑になり、そうでない場合は、色は青になります。 さらに、数式を変更した後、数式バーにカーソルを置いた場合、出力データ型が Color になることにも注目してください。

    条件付きの色のスクリーンショット。

Power Apps で Color プロパティを設定する場合、いくつかのオプションを使用できます。 例で示すように、Color.Green または Color.Blue (または、Power Apps で事前定義された他の色) を使用して、数式で Color オブジェクトを提供できます。 ColorValue (CSS 色名と 6 桁および 8 桁の 16 進数色値を使用) や RGBA 関数も、配色を作成して使用するために用意されています。

テキスト プロパティを参照して色を更新する

Text プロパティを参照して、Color プロパティを決定することもできます。

これを、顧客が注文した品目に応じてフィードバックを受け取るシナリオを使用して説明しましょう。 特定の製品が入力されたら、概要テキストの色を変更します。

テキストを式の値として使用する場合は、テキストの大文字小文字が重要になります。 したがって、Lower などの関数を式に使用し (例: Lower(yourtextvalue))、入力されたテキストの値を小文字にして返すようにします。

トランザクションの概要の Color プロパティの式を次の値に置き換えてみてください。

If(Lower(TextInput1.Text) = "apples", Color.YellowGreen, Color.Blue)

トランザクションの概要ラベルの Color 値とラベルに青で表示されている色のスクリーンショット。

ラベルのテキストがすぐに青に変わることに注目してください。 次に、アプリをプレビュー モードにし、製品入力フィールドに "Apples" と入力すると、トランザクションの概要のテキストの色が黄緑色に変わることを確認できます。 "Apple" のように "A" を大文字で入力しましたが、式は正しく機能します。 この入力では大文字小文字は違っていても、スペルが正しければ問題ありません。

製品フィールドに Apples と入力され、概要メッセージが黄緑色のテキストで表示されていることを示すスクリーンショット。

キャンバス アプリで条件付き書式を使うとユーザー エクスペリエンスを強化できることを少し理解いただけたと思います。 練習用アプリは開いたままにしてください。いくつかのデータ検証機能について詳しく学習する際にもう一度使用します。