フィードバック

キャンバス アプリの編集可能なテーブルを追加する

  • [アーティクル]

関連するデータと機能を 1 か所にまとめる生産性アプリケーションを設計すると、画面を切り替えなくても、より多くのことを実現できます。 Microsoft Excel は、高速かつ効率的な方法でデータをリアルタイムで編集できるようにするそのような例の 1 つです。

Power Apps を使用してフロントエンドとして任意のデータ ソースに提供することで、同じ概念を適用できます。 さらにカスタマイズすることもできます。

管理者カタログ管理 - サンプル アプリのデモ。

このチュートリアルでは、次のコンポーネントを使用してサンプル アプリを作成します。

  • データ ソース (Microsoft Dataverse。代わりに Excel を使用することもできます)
  • フォーム: 新しいアイテム用
  • ギャラリー: 既存のアイテムを表示するため
  • テキスト入力コントロール: 既存のアイテムを更新するため

前提条件

このチュートリアルに従って作業するには、Power Platform 環境にアクセスし、Microsoft Dataverse でテーブルを作成できる必要があります。

チュートリアルでは、次の構造を使用してサンプル アプリを作成します。

Dataverse のサンプル テーブルの列。

列を追加する方法については、テーブルの列に関する作業を参照してください。

サンプル データを追加するための新しいメイン フォームが作成されました。

データを Dataverse テーブルに追加するための新しいメイン フォーム。

必要な列を含むメイン フォームを作成する方法については、フォームの作成を参照してください。 新規フォームを使用してレコードを追加するには、必ず正しい フォーム オーダー を使用してください。

ステップ 1: 空白のアプリを作成する

"カタログ管理アプリ" という名前と タブレット レイアウトで 空白のキャンバス アプリ を作成します。

ステップ 2: データ ソースを追加する

このセクションでは、サンプル アプリのデータ ソースとして Dataverse テーブルを追加する方法を示します。 データ ソースとして SharePoint サイト、または OneDrive から Excel ファイルを使用することもできます。または、他のデータ ソースの種類を使用することができます。

  1. 左側のペインで、データ > データの追加 を選択します。

  2. すべてのテーブルを表示 を選択します。

  3. 編集可能なテーブル、または前に作成したテーブルを選択します。

    データ ソースとして Dataverse テーブルを追加する。

キャンバス アプリへの接続の追加の詳細については、データ ソースの追加を参照してください。

ステップ 3: フォーム コントロールを設定する

このステップでは、新しいアイテムを追加するためのフォーム コントロールを追加します。

  1. + (挿入) > フォームの編集 を選択します。

    フォームの編集コントロールを追加する。

  2. 右側のペインで、フォームの編集コントロールのデータ ソースとしてテーブルを選択します。

    フォームの編集コントロールのデータ ソースとしてテーブルを選択する。

  3. フィールドの編集 プロパティ オプションを使用して、フォームの編集コントロールに表示する列を選択します。 必要に応じて列の順序を変更することもできます。

    フォームの編集コントロールのフィールドを編集する。

  4. フォームの 既定のモード で 新規 を選択します。

    フォーム コントロールのモードとして新規を選択する。

  5. 必要に応じてデータ カードのサイズの 幅、高さ プロパティを調整して、キャンバスが埋まるようにします。

  6. 左側のペインで、+ (挿入) > ボタン を選択します。

  7. ボタンのテキストを 製品の追加 に更新します。

  8. スクリーンの左上から、ボタン コントロールに OnSelect プロパティを選択します。

  9. 数式バーに次の数式を入力します。

    SubmitForm(Form1);
NewForm(Form1);
    • SubmitForm 関数は、新製品の詳細を Dataverse テーブルに送信します。
    • NewForm は、新製品の詳細を送信した後に新しい製品を追加するため、フォームのモードを新規フォームに戻します。
    • この数式の Form1 は、前に追加したフォームの編集コントロールの名前です。 ご使用のフォーム名が異なる場合は、この数式のフォーム名を更新してください。

    ボタン OnSelect - 新しいフォーム。

このステップでは、アイテムを編集するために、空白の垂直ギャラリーを編集可能なテーブルとして追加します。

  1. 左側のペインで、+ (挿入) > レイアウト > 空白の垂直ギャラリー を選択します。

  2. データ ソースとして Dataverse からテーブルを選択します。

  3. このギャラリーにはデータ ソースの編集可能なすべての列が含まれるため、ギャラリーのサイズを変更して、キャンバス全体の残りの半分を引き継ぎます。

  4. ギャラリーの編集 を選択します。

    空白の垂直ギャラリーを編集する。

  5. 左側のペインで、+ (挿入) > 入力 > テキスト入力 を選択します。

  6. 次のアクションを使用してギャラリーを配置します。

    空白の垂直ギャラリーを配置する。

    1. テキスト入力コントロールの一番上の行をギャラリー内の左上隅に移動します。 この一番上の行を移動すると、同じ列の残りの行が自動的に移動します。
    2. ギャラリー内の最初の行の高さを、左上に移動した最初の行のサイズに合わせて変更します。

    最後に、ギャラリーの左側にすべての行が積み重ねられているのがわかります。

  7. ギャラリー内の最初のテキスト入力行の 既定 プロパティの数式を更新します。

    ThisItem.Product
    • この数式の ThisItem は、選択したデータ ソース (この例では、Dataverse テーブル) のアイテムに関連しています。
    • 「製品」は、テーブル内の列の名前です。
    • この数式がギャラリーの最初の行で更新されると、列全体が製品名で自動的に更新されます。 エラーが表示された場合は、ギャラリーを Dataverse テーブルに接続しているかどうかを確認してください。

    数式を使用してギャラリー内に表示される製品。

  8. 前のステップを繰り返して、編集可能なフィールドとしてアプリ内に表示する列ごとにテキスト入力コントロールを追加します。 「製品」を適切な列名に置き換えて、数式で正しい列を選択していることを確認してください。

    ヒント

    幅のサイズを変更するには、幅 プロパティを使用するか、または各列の最初の行の周りのボタンを使用してドラッグします。

  9. ギャラリー内の最初の列から最初の行を選択し、次の数式を必要に応じて列名とコントロール名を変更して OnChange プロパティに追加します。

    Patch('Editable tables',ThisItem,{Product:TextInput8.Text})
    • この式の Patch 関数は、データ ソースとして選択されたテーブルを、変更されたときの値で更新します。
    • 「編集可能なテーブル」は、サンプルのデータ ソース名です。
    • ThisItem は、この列に対して選択したデータ ソース内のアイテムに関連しています。
    • 「製品」は、選択したデータ ソース内の列の名前です。
    • 「TextInput8」は、選択したデータ ソースの「製品」列にアタッチされたギャラリーに追加されたテキスト入力コントロールの名前です。
    • 「TextInput8」の「テキスト」は、キャンバス上の編集可能なテーブル内で選択されたセルに入力されたテキストです。

    ギャラリーの OnChange 式。

  10. 接続されたデータ ソースの残りの列に追加されたテキスト入力コントロールごとに、前のステップを繰り返します。 正しい列名とコントロール名を使用するように数式が更新されていることを確認してください。

ステップ 5: 編集オプションとキャンセル オプションを設定する

このステップでは、編集するため、および編集の進行状況をキャンセルするためのオプションを追加します。 既定で編集可能なテキスト入力コントロールを持つギャラリーは、意図しない更新の対象となる場合があります。 明示的な編集オプションを用意し、編集機能を停止することで、編集が常に想定されるようになります。

  1. トップ メニューから 挿入 > アイコン を選択し、2 つのアイコン 編集 と キャンセル (バッジ) を追加します。

    編集またはキャンセルする機能。

  2. 左側のペインで ツリー ビュー を選択して、アプリ を選択します。

  3. アプリの OnStart プロパティを選択し、次の数式を必要に応じてギャラリー名を変更して追加します。

    Gallery2.DisplayMode = "galleryDisplayMode";
Set(galleryDisplayMode, DisplayMode.Disabled);
    • この数式の「Gallery2」は、ギャラリーの名前です。
    • DisplayMode は、選択したギャラリーの DisplayMode プロパティです。
    • 「galleryDisplayMode」は、ギャラリーの表示モードの値を格納するためにこの数式が作成する新しい変数です。
    • Set 関数は、「DisplayMode.Disabled」を使用して、前の行で定義された「galleryDisplayMode」変数を値「Disabled」に設定します。 表示モードを無効にすると、アプリの起動時にギャラリーは既定で編集できません (アプリの OnStart)。

  4. 空白の垂直ギャラリーを選択してから、DisplayMode プロパティを選択します。

  5. プロパティ値を Edit から galleryDisplayMode に更新します。 この変更により、ギャラリーのモードは常に、前のステップで作成した「galleryDisplayMode」変数の値を使用して定義されます。

  6. 以下のように、アイコンのプロパティと数式を更新します。

    Icon プロパティ 式
    編集​​ OnSelect Set(galleryDisplayMode, DisplayMode.Edit)
    編集​​ Visible galleryDisplayMode = DisplayMode.Disabled
    キャンセル​​ OnSelect Set(galleryDisplayMode, DisplayMode.Disabled)
    キャンセル​​ Visible galleryDisplayMode = DisplayMode.Edit
    • Set 関数は、選択されているアイコンに応じてギャラリーの表示モードを設定します。
    • 変数「galleryDisplayMode」は、編集アイコンまたはキャンセル アイコンの表示方法を制御します。 ギャラリーが編集可能な場合、キャンセル ボタンのみが表示されます。 また、ギャラリーが無効になっている場合は、編集ボタンのみが表示されます。

  7. ギャラリーの状態に応じて両方のアイコンの表示方法を管理しているため、編集とキャンセルのアイコンを重ねます。

    ギャラリー変更時の編集またはキャンセル。

    ヒント

    スクリーンの右上にある プレビュー ボタンを使用するか、キーボードの F5 キーを使用すると、アプリをプレビューできます。 簡単にテストするもう 1 つの方法として、キーボードの Alt キーを押してキーを押したままボタンを選択します。 この方法は、キーが押されたままになっているときの特定の選択に対するアプリのプレビュー機能もシミュレートします。

ステップ 6: 検索機能を追加する

接続されたデータ ソースのデータが大きくなると、特定の行を見つけることが難しくなります。 このステップでは、アプリに検索機能を追加して、検索されたキーワードでギャラリーをフィルター処理し、関連データを簡単に見つけられるようにします。

  1. キャンバスの中央、ギャラリーの上にテキスト入力コントロールを追加します。

  2. テーブル名の代わりに次の数式を使用してギャラリーの アイテム プロパティを更新します。必要に応じて、数式のテーブル名とコントロール名を置き換えます。

    If(IsBlank(TextInput15.Text),'Editable tables',Filter('Editable tables',(TextInput15.Text in Product) || TextInput15.Text in Segment))
    • If 関数は、検索語句が指定されているか、空白であるか、条件を確認します。 リストされたアイテムに応じて、ギャラリーにデータが入力されます。
    • IsBlank 関数は、検索テキストが指定されているかどうか、条件を確認します。
    • 「編集可能なテーブル」は、この例で接続されているサンプル データ ソースの名前です。 検索語句が指定されていない場合、この値が既定として設定されます。
    • Filter 関数は、この関数内で設定されたテキスト条件に応じて、ギャラリー内のアイテムをフィルター処理します。 この関数は、検索された語句に応じてギャラリーをフィルター処理するために使用されます。
    • 「TextInput15」は、ギャラリーをフィルター処理するための検索ボックスとして使用されているテキスト入力コントロールの名前です。
    • 「製品」と「セグメント」は、.Text 構文を使用して「TextInput15」コントロールで定義されたテキストを使用して検索される列の名前です。
    • 「in」は、接続されたデータ ソースの指定された列に対してテキスト入力コントロールの値を確認します。
    • 「||」は "OR" 条件であり、「製品」または「セグメント」列に対して検索を実行する必要があることを示します。 同様に、特定のビジネス ニーズに合わせて数式を更新できます。

    定義された条件に基づいてギャラリーをフィルター処理する。

    ヒント

    数式バー内の「//」を使用して、古い関数を保持したり、コメントを追加したりできます。 この方法は、より複雑な数式の場合や、後で元に戻す場合に備えて古い機能を保持しておく場合に便利です。

ステップ 7: ブランディング、プロファイル情報、リセットなどのその他の変更

サンプル アプリは、このチュートリアルで期待される機能を備えています。 ただし、これに加えて、フィルター処理用のテキスト入力コントロールをリセットする機能、ギャラリーやアプリのタイトルなどのブランド、ユーザー プロファイルの詳細など、考慮事項を追加できます。 キャンバス アプリでのコントロールの追加と設定から始めて、さらに多くのことも行えます。

次の表は、サンプル アプリに追加されたすべてのブランド、プロファイル、およびリセット情報をまとめたものです。 この記事で前述した方法を使用して、さまざまなコントロールとプロパティを操作します。 必要に応じて、テーブル、コネクタ、およびコントロールの名前を必ず置き換えてください。

機能 Ctrl キー プロパティ​​ 追加情報
スクリーン上部のアプリ バナーおよびラベル テキスト ラベル テキスト - 「管理者カタログ管理」
フォント サイズ - 28
塗りつぶしの色 - 青
テキストの位置合わせ - 中央揃え		 すべての値を必要に応じて変更します。
スクリーンの右上にユーザーの表示名を追加する テキスト ラベル Text - Office365Users.MyProfileV2().displayName 最初に Office 365ユーザー への接続を追加することによって Microsoft 365 に接続します。
スクリーンの右上にあるユーザー表示名の左側にユーザーのプロファイル写真を追加する イメージ イメージ - Office365Users.UserPhotoV2(Office365Users.MyProfileV2().userPrincipalName) 最初に Office 365ユーザー への接続を追加することによって Microsoft 365 に接続します。
スクリーンの左上隅にある検索テキスト ボックスをリセットする 種類が "リロード" のアイコン OnSelect - Reset(TextInput15) ここで、「TextInput15」は検索ボックスとして使用されるテキスト入力コントロールです。 選択すると、検索テキスト ボックスがリセットされ、ギャラリーに既定ですべてのデータが表示されます。
製品の追加 ボタンのテキストを更新する 製品の追加ボタン テキスト - 「新しい製品の追加」 必要に応じて変更してください。
ギャラリーの上、検索入力ボックスの左側に、現在の製品を示すラベルを追加する テキスト ラベル テキスト - 「現在の製品」
フォント サイズ - 16
フォントの太さ - 太字		 必要に応じて変更してください。
検索テキスト入力ボックスのヒント テキストを追加する Text input ヒントのテキスト - 「製品またはセグメントの検索」 必要に応じて変更し、フィールド (製品、セグメントなど) のリストがデータ ソースの列名と一致していることを確認します。

たとえば、完成したスクリーンは、次のように上で構成したコントロールとプロパティを備えたものになります。

すべてのコントロールとプロパティが構成されたアプリの最終バージョン。

ステップ 8: 保存、公開、共有

サンプル アプリが完成したので、アプリを保存、公開し、組織内またはゲストと共有します。

関連項目

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。