基本的なカスタマイズを行ってアプリを改善する

  • 6 分

このモジュールでは、前のモジュール "Power Apps キャンバス アプリの使用を開始する" で学習したスキルを強化し、拡張することで、引き続き Power Apps のスキルを開発していきます。

前回のモジュールを完了した状態からアプリの作業を継続するので、そのモジュールを完了していない場合は戻って完了してください。このモジュールでは、その内容から引き続き構築します。

最初の作業として、Screen1 のギャラリー コントロールを確認しましょう。 その中の各フィールド (Title1 と Subtitle1) を選択する方法に注目してください。 画面左側のツリー ビュー パネルを確認し、ギャラリー フィールドを選択すると、そのコントロールがツリー ビューで強調表示されます。 また、それぞれがテキスト ラベルであることにも注目してください。 最後に注目するのは、各コントロールを選択すると、式 (fx) の入力フィールドに (Title1 ラベルの) ThisItem.'Machine Name' または (Body1 ラベルの) ThisItem.Type が表示される点です。 つまり、このフィールドには、そのデータ行のそのテーブル列にある、テキスト値が表示されます。

データの行はギャラリーの最下部まで続くため、最上部の行以外ではこれらのフィールドを選択できません。 したがって、最初の項目でこれらのラベルのいずれかのテキスト プロパティを変更すると、それはリストの下に表示されます。

最初にギャラリーを選択すると、そのギャラリーに表示されるフィールドをすばやく調整できます。次に画面の右側にある [プロパティ] パネルに注目すると、[レイアウト] の横にドロップダウンが表示されており、この場合は "画像、タイトル、サブタイトル" を確認できます。

ギャラリーのレイアウトとフィールドを変更し、ユーザーにとって分かりやすく製品に関する詳細情報を表示しましょう。 次の手順に従います。

  1. 必ず Gallery1 というギャラリー コントロールを選択してください。 これは現在、画面に 1 つだけ存在するギャラリーです。 この手順を正しく実行すると、ツリー ビュー パネルで Gallery1 が濃いグレーで強調表示されます。

  2. 画面の右側にある プロパティ パネル (またはギャラリーにマウス ポインターを置いたときコントロールの上に表示されるオプション メニュー) で、レイアウト を "画像、タイトル、サブタイトル、本文" に変更します。

  3. ギャラリー コントロールで新しく追加された Body1 ラベルを選択すると、式 (fx) フィールドの Text プロパティの値として ThisItem.'Primary color' が表示されているはずです。

  4. Body1 ラベルの Text プロパティを "ThisItem.Type" に変更します

ギャラリー フィールドのスクリーンショット。

フォーム フィールドの変更

次にフォームの変更について解説します。 更新可能にする必要があるフィールドのみを表示することをお勧めします。 このフォームを変更して、Machine ID や Product Type ID など、ID に関連するフィールドを削除することができます。 また、読みやすくなるように、フォームにあるいくつかのフィールドの位置を変更することもできます。

次の手順に従い、このフォームを変更します。

  1. 画面上またはツリー ビュー パネルから、フォーム コントロールを選択します。 コマンド バーで フィールドの編集 を選択します。

  2. フィールド パネルで、フィールド値の上にマウスを置くと、その他のアクション を示す省略記号が表示されます。 Machine ID フィールドの省略記号を選択してから、削除 を選択します。 Product Type ID フィールドにも、同様の操作を実行します。

  3. フィールド パネルでドラッグ アンド ドロップを使用し、フィールドの位置を変更できます。 まず、Product Summary フィールドをリストの一番下にドラッグ アンド ドロップし、次にその下に Image をドラッグ アンド ドロップします。

  4. Product Summary フィールドは複数の行であるため、[フィールド] パネルで Product Summary フィールドを選択/展開し、そのフィールドを変更しましょう。 フィールド名をクリックし、展開します。 コントロール タイプの下にドロップダウン オプションがあり、現在は "テキストの編集" である点に注目してください。

  5. Product Summary フィールドのコントロール タイプ オプションを、"複数行テキストの編集" に設定します。 フォーム上の入力フィールドが拡張され、スクロール バーが表示されることに注意してください。

  6. パネルの外側を選択するか、フィールドの編集 ボタンをもう一度選択して、フィールド パネルを閉じます。

  7. 最後に、製品の概要全体が表示されるように、Product Summary フィールドの高さを調整しましょう。 "Product Summary" のフォーム データ カードを選択し、次に DataCardValue テキスト入力コントロールを選択します。

  8. 次にテキスト入力フィールドの最下部をカードの最下部に向かってドラッグし、コントロールの表示される部分を拡大します。 コントロールを適切に拡大するとスクロール バーが消えます。

データ ソースのデータ行やレコードは、ギャラリー情報およびフォーム情報として利用できる点に注意してください。 テキスト ラベルにはテキストを指定する必要があり、入力するとそのテキストが表示されます。 表示するべきフィールドや入力フィールドのサイズなど、ギャラリーに表示されるフィールドを変更できます。