キャンバス アプリのコントロールと画面について学習する
このユニットでは、アプリのギャラリーとフォームに既に追加されたコントロールを確認し、さらに次のユニットの準備としてアプリに画面をいくつか追加します。
Power Apps のコントロール
コントロールは、アクションを生成したり、情報を表示したりする UI 要素です。 Power Apps のコントロールの多くは、他のアプリで使用したコントロールと似ており、ラベル、テキスト入力ボックス、ドロップダウン リスト、ナビゲーション要素などがあります。
これらの一般的なコントロールに加えて、Power Apps には特殊なコントロールがあります。これは + 挿入ボタンにあり、検索フィールドを使って目的の内容を見つけることができます。
アプリの興味と効果を高めることができるコントロールをいくつか紹介します。
ギャラリー- データ ソースからのレコードを表示する一連のコントロールを保持するレイアウト コンテナーであるコントロールです。
フォーム- データの詳細が表示され、レコードを作成したり、編集したりできるコントロールです。
メディア- 背景画像を追加したり、ユーザーがアプリから写真を撮影するためのカメラ ボタンや、識別情報を簡単に取り込むためのバーコードリーダーを含めたりすることができるコントロールです。
グラフ- Power BI データを含め、ユーザーがデータの分析をすぐに実行するためにグラフを追加できるコントロールです。
使用できるコントロールを確認するには、+ 挿入タブを選択してから、各種フィールドを展開します。 そうすると、検索フィールドのユーティリティが表示され、目的の内容をすばやく見つけることができます。 動作を確認するには、検索フィールドにいくつかの値を入力してみてください。
ギャラリー コントロールとプロパティ
画面上のギャラリーには、さまざまなコントロールが表示されます。 コントロールの名前のすぐ左に種類のアイコンがあり、そのコントロールの種類を示します。 四角形と区切り記号を含む 2 つの図形コントロールの様子に注目してください。 次に進み、ツリー ビューから四角形のコントロールを選択します。 既定では "選択 (親)" と表示された OnSelect プロパティであることがわかります。 これらのギャラリー コントロールのいずれかに別の OnSelect プロパティを指定しない限り、それらは既定ですべて "選択 (親)" になります。つまり、そのコントロールを選択するとギャラリー自体が選択されます。
次に、ギャラリー コントロール (それに含まれるラベルや図形ではないので、ツリー ビュー から見つける方が分かりやすいかもしれません) を選択し、OnSelect プロパティに注目します。 現在 false に設定されているため、ギャラリーのコントロールを選択しても、アクションを定義するまで何も実行されません。
ツリー ビュー のギャラリーから四角形のコントロールをもう一度選択します。 次に、式 (fx) 入力フィールドの左側にあるドロップダウン値を選択し、Visible プロパティに移動します。 スクロールに対応したリストに、コントロールで使用できるプロパティがすべて表示され、Visible プロパティを検索/選択できる点に注目してください。 Visible プロパティは、すべてのコントロールに存在します。 このコントロールの式フィールドには ThisItem.IsSelected と入力されています。
IsSelected はブール値であり、この項目がギャラリーで選択されているかどうかを "true" または "false" で評価した結果です。 ギャラリーで一度に選択できるのは 1 つの項目のみであるため、項目が 1 つだけの場合、この値は "true" になります。 アプリをプレビュー モードにした場合。 試しに異なるコーヒー メーカーをいくつか選択し、選択した項目にのみ四角形コントロールが表示される様子に注目してください。 表示される四角形は、ギャラリーの隣のフォームに表示される項目にも対応しています。
その他の注目すべきコントロールは 区切り記号 で、これも四角形ですが常に表示されます (現在は白色であるため、白い画面には表示されません)。そしてさらに "NextArrow1" というタイトルのアイコン (現時点ではただギャラリーから親を選択するだけです) と、Image コントロールがあります。 この NextArrow1 を編集を意味する鉛筆に変更し、コーヒー メーカーを編集する場合はそのコントロールを押すべきことをユーザーに示してみましょう。 選択したコントロールの変更できるプロパティが、ヘッダー バーに反映されることを覚えていますか? ヘッダーから Icon のドロップダウン ボタンを選択すると、[アクション] の下に編集を表す鉛筆のアイコンが表示されます。 次に進み、これを選択すると、右矢印が編集アイコンに変わります。
画像コントロールについて簡単に説明します。 ここではデータに画像フィールドを定義したため、Power Apps はこのフィールドに何が入るかをデータから識別できました。 ここに別の画像を表示するべき場合は、このコントロールの Image プロパティにそれを指定できます。 たとえば、画像フィールドに画像がない項目がある場合、式を使用して画像フィールドが空白かどうかを確認し、空白である場合は別の画像を表示できます。 画像フィールドにはただ画像を指定します。
すでにラベルについて説明したので、フォームのコントロールに進みましょう。
フォームのコントロールとプロパティ
それではフォームの最も重要な 2 つのプロパティを簡単に説明します。 DataSource はフォームに接続されたデータのテーブルです。 これはフォームの更新時にデータを書き込むべき場所をフォームが認識するために重要です。 2 つ目の重要なプロパティは Item です。 このアプリの項目とは、ギャラリーで選択された項目です。
フォーム内でフィールドを選択すると、そのフィールドはツリー ビューで DataCard として表示されます。 各 DataCard に 4 つの異なるコントロールが含まれている様子に注目してください。 DataCard の最も重要な 2 つのコントロールは、既定で名前 DataCardKey が含まれるラベル コントロールと、既定で名前 DataCardValue が含まれるテキスト入力コントロールです。 他の 2 つのコントロールはオプションであり、必須データかどうかに応じて使用します。 StarVisible はアスタリスクが付いたテキスト ラベルであり、そのフィールドをフォームまたはデータで必須として指定した場合に表示されます。 ErrorMessage は、もう一つのテキスト ラベルであり、フォームの送信時に入力が不足している場合に表示されます。 これらのコントロールの "Visible" プロパティを確認してください。 Visible は "true" または "false" で評価されます。 StarVisible コントロールに表示される And() 関数は、カンマで区切られた条件が両方とも true である場合に、その関数が "true" として評価されることを意味します。
フォーム コントロールのプロパティの多くは、そのカードを "ロックを解除" しない限り変更できません。これには確かな理由があります。 フォーム コントロールの目的はデータの入力を容易にすることですが、設計を考えると柔軟性に大きく劣ります。 既存のフォームに対してフィールドの追加や削除を行うと、そのコントロールのサイズが自動的に変更され、それまでの編集内容が失われます (先に述べた "Product Summary" のテキスト入力と同様です)。 データ入力のカスタマイズについては今後詳しく解説しますので、現時点ではフォーム カードのカスタマイズを避けましょう。
"コーヒー メーカー" フォーム データの場合、非テキスト入力コントロールのみが ImageDataCard に存在します。 このカードには、これまでに解説した 4 つのコントロールに加えて、さらに画像の追加コントロールが存在する点に注目してください。 画像の追加コントロールはメディア コントロールであり、デバイスやオンラインの場所から画像を選択し、既存の画像と置換できます。 "タップや選択により画像を追加する" と、開くポップアップ ウィンドウが表示されます。ここで画像ファイルを選択すると、その画像をフォームで開くことができます。
各データ カードについて解説する 2 つの重要なプロパティは、Default プロパティと Update プロパティです。 Default プロパティは、そのカードの既定値を提供するデータの列はどれかを示します。 Update プロパティは、そのレコードのデータを更新するために Power Apps が使用するデータが、どの入力コントロールから取得されたかを示します。
Product Summary カードを選択します。その際はカードのテキスト入力フィールドではなく、カード自体を選択します。 このカードの既定値が ThisItem.'Product Summary' である点に注意してください。これは DataCardValue テキスト入力フィールドに表示される値です。 カードの Update プロパティに切り替えると、このカードがカードの DataCardValue.Text から更新情報を受け取っていることがわかります。 そのため、このフォームを送信すると、Power Apps はそのテキスト入力フィールドに書き込まれた内容をすべて取得し、その項目の "Product Summary" を更新します。
追加するコントロールがデータ ソースに必要なデータの種類を提供する限り、カードの他のコントロールのロックを解除して追加したり、またはカードの更新プロパティを変更できます。
最後に、Power Apps に SubmitForm コマンドを必ず提供し、フォームに入力した変更を保存します。 今回は、フォームの下に "変更を保存する" ボタンがあるので、これが適しています。 このボタンを (編集モードで) 選択すると、OnSelect プロパティに SubmitForm(Form1) が指定されていることがわかります。これは更新された各フォーム カードを受け取り、それをデータ ソースに書き戻します。
画面の追加
このアプリには、これまで画面が 1 つしか存在しませんでした。 次の 2 つのユニットでは、アプリのカスタマイズを続けて、機能をさらに追加します。 次の手順に従って、このアプリに画面を追加します。
ツリー ビュー パネルで Screen1 を選択し、コマンド バーまたはツリー ビュー パネルの上部から新しい画面ボタンを選択して、空の画面テンプレートを選択します。
これを繰り返して 3 つ目の画面を追加します。
次に 3 つの画面の名前を変更します。 これを行うには、ツリー ビュー パネルで Screen1 をダブルクリックし、名前を "Catalog Screen" に変更します。
この操作を繰り返して、Screen2 の名前を "Home Screen" に、Screen3 の名前を "Admin Screen" に変更します。
最後に、ツリー ビューで画面の位置を変更しましょう。 これを行うには、省略記号ボタンを選択し、上に移動コマンドを選択します。
これでギャラリーとフォーム コントロールについて詳しく説明し、アプリに画面を追加する方法も解説したので、引き続きアプリを変更して UX を改善していきましょう。