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

完了

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

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

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

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

   注

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

2. ギャラリーを選択し、Subtitle1 コントロールの横の省略記号を選択して、[コピー] を選択します。

   

3. Subtitle1 の横にある省略記号を再度選択して、[貼り付け] を選択します。

   

4. これにより、Subtitle1_1 という Subtitle1 の複製が作成されます。 新しいサブタイトルを選択し、Subtitle1 の下にドラッグします。

5. ツリー ビューのギャラリーの下にある Subtitle1 を選択し、ThisItem.'Machine Price' に Text プロパティを設定します。

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

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

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

   注

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

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

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

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

8. Subtitle1_1 の Color プロパティを検索します。 「RGBA(0, 0, 0, 1)」と表示されます。 また、式の入力フィールドのすぐ下に、Power Apps によって RGBA(0, 0, 0, 1) = と表示され、「黒」で塗りつぶされた四角形が表示されます。 また、データ型は Color と宣言されます。

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

   注

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

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

    ColorValue(ThisItem. 'Primary Color')

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

    

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

    ヒント

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

    

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

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

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

    'Admin Screen'.Name

    ヒント

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

    

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

    'Home Screen'.Name

コントロールの式に関数を使うことで、アプリのユーザー エクスペリエンスが強化されました。