演習 - キャンバス アプリの数式の概要

  • 8 分

Power Apps のコントロールに式を追加できることをご存知ですか? たとえば、テキスト ラベルにはテキストが必要であり、画像コントロールには画像が必要です。 Power Apps で検索される入力を提供する場合、式がコントロールで求められる入力タイプを反映する限り、どのタイプのデータでも入力することができます。

次の演習では、「Machine Price」の金額が通貨付きで表示されるようにギャラリーを変更します。その後、[タイプ] フィールドのテキスト色がコーヒー メーカーの色で表示されるように変更します。 この演習は前のユニットで作成したアプリを変更して行うため、アプリをまだ作成していない場合は前回のユニットに戻って完成させてください。

「Contoso コーヒー メーカー」アプリを開いている場合は、以下の手順に進んでください。

  1. ツリー ビュー パネルから「Catalog Screen」を選択します。

    注

    現在の表示画面の下隅にあるドロップダウン メニューから画面を切り替えることもできます。 ドロップダウンを選択すると、現在表示中の画面が濃い灰色で強調表示され、チェック マーク付きで表示されます。

  2. ギャラリーを選択し、サブタイトル1 コントロールを選択して、ThisItem.'Machine Price' を表示する Text プロパティを探します。

  3. 米ドルの通貨記号を追加するには、Text プロパティを次のように設定します。

    Text(Value(ThisItem.'Machine Price'), "$ ##.00")

    式を使用する場合、算術演算子はすべて括弧の内側から順に実行されます。 この式では 'Machine Price' の値がテキストとしてデータ テーブルに入力されているため、Value() 関数を使用してテキスト値を数値に変換する必要があります。 次に、変換された数値にドル記号を付けて、セントの値 (ゼロ セントでも表示) と合わせてテキストに書式設定します。

    注

    数式でエラーが返される場合は、Power Apps 環境の言語設定が何らかの区切り記号や演算子に矛盾している可能性があります。 たとえば、上記の数式は、日本やイギリスなど、ドットまたはピリオドを小数点として使用する言語や地域のものです。

    ただし、フランスやスペインなど、小数点にコンマを使用する言語や地域では、次のように変更する必要があります: Text(Value(ThisItem.'Machine Price'); "$ ##,00")

    ThisItem.Price でのプロパティ選択演算子 "." (ドットまたはピリオド) は、小数点に関係なく常に同じですが、小数点とチェーン演算子の区切り文字がそれぞれコンマとセミコロンに変更されていることに注意してください。 内部的には式に違いはなく、異なるのは作成者が式をどのように表示および編集するかという点だけです。

  4. 続いて、ギャラリーの 本文1 ラベルの Color プロパティを変更します。 本文1 コントロールを選択し、ThisItem.Type を表示する Text プロパティを検索します。

  5. 本文1 の Color プロパティを検索します。 式に「Black」を定義します。 式の入力フィールドの内側を選択すると、「Color.Black」と表示されます。 また、式の入力フィールドのすぐ下に、Power Apps によって Color.Black = と表示され、「黒」で塗りつぶされた四角形が表示されます。 また、データ型は Color と宣言されます。

    注

    [色] フィールドなどの一部のフィールドでは、式の入力フィールド内を選択すると、常に完全な式の値が表示されます。 そのため、式のすべての部分を入力しなければ、色の値を Power Apps で認識させることができません。 この例では、式は Color.Black になります。

  6. 本文1 ラベルの Color プロパティを Color.Purple に変更します。 「Color」という語を入力するとすぐに、式バーの下の部分に、Power Apps によってのフィールドの残りに入力可能な値が自動的に提案されます。 この構文では、Power Apps で使用可能なすべての HTML 色が認識されます。

  7. ここで、フォーム コントロールのギャラリーの右側に表示された部分に少し注目してください。「Primary Color」というタイトルのフィールドがあります。 このフィールドに表示された値を、数式で使用することができます。 本文1 ラベルの Color プロパティ フィールドで、式を次のように変更します。

    ColorValue(ThisItem. 'Primary Color')

    本文1 ラベルのテキストの色が、コーヒー メーカーのプライマリ カラーと同じになったことを確認します。 Power Apps では ColorValue の式を使用して、テキストの色を指定された値に変更することができます。 Power Apps の式バーのすぐ下で、データ タイプが Color と指定されているため、ギャラリーのすべての品目の色が、マシンのプライマリ カラーに変更されます。

    プロパティのスクリーンショット。

  8. 次に、作成した新しい画面にヘッダーをいくつか追加します。 それには、Catalog Screen からコントロールをコピーし、新しい画面に貼り付けます。 シフト キーを押したまま、「Catalog Screen」の上部から長方形1 とラベル1 のコントロールを選択します (ツリー ビューから選択することもできます)。 右クリックして [コピー] を選択するか、Ctrl + C キーを使用してコントロールをデバイスのクリップボードにコピーします。

    ヒント

    コントロールを右クリックして選択、または複数選択すると、便利ないくつかの機能が コントロールの隣にポップアップ表示されます。 [切り取り] や [コピー] のほか、[グループ化]、[並べ替え]、[配置] の機能や、他のユーザー向けにコメントを追加する機能も使用できます。 コントロールの種類によっては、[フォント]、[サイズ]、[色]、[塗りつぶし] などの機能も表示されます。

    Label1 と Rectangle1 を選択した後、右クリックしてコピーする場合のスクリーンショット。

  9. 「Home Screen」を選択し、コントロールを 2 つ貼り付けます。 両方とも画面上部の中央に表示されるよう位置を変更してください。

  10. 次に「Admin Screen」を選択し、同じように貼り付けます。 コントロールの配置も同じように調整してください。

  11. 次に、挿入したラベル コントロールの Text プロパティを使用し、名前を変更して画面名に反映させます。 「Admin Screen」のヘッダーでラベル コントロールを選択します。 ラベル コントロールには必ずテキストを入力します。 ヘッダー ラベル コントロールの Text プロパティに次を入力します。

    ‘Admin Screen’.Name

    ヒント

    「Admin Screen」と入力するとすぐに、Power Apps によって「Admin Screen」から予測される情報がいくつか表示され、これを使用してラベルにテキストを入力することができます。 ラベルはアプリを開発する際に非常に重要となるコントロールであり、他のコントロールでは表示できない情報を、ラベルを使用して表示することができます。 ラベルはいつでもアプリに追加したり、削除したりできます。

    ヘッダー ラベルの名前を画面の Name プロパティに変更したスクリーンショット。

  12. 「Admin Screen」の Name プロパティをそのまま使用しました。 「Home Screen」でも同じように定義します。Text 式に次のように入力してください。

    ‘Home Screen’.Name

以上で、アプリのユーザー エクスペリエンスが式を使用して強化されました。 次のユニットでは、アプリにナビゲーションの機能を追加する方法を説明します。