アーティサン株式会社
  1. TOP
  2. ブログ
  3. Dataverse応用（3）！モデル駆動型アプリのコマンドバーをカスタマイズする-レコードを複製するボタンを追加してみる
  • Dataverse連載
  • Dataverse

Dataverse応用（3）！モデル駆動型アプリのコマンドバーをカスタマイズする-レコードを複製するボタンを追加してみる

この記事の4行要約

  • モデル駆動型アプリのコマンドバーは、コマンドデザイナーを使うことでオリジナルのボタンを追加できる
  • Power Fxを使い、選択したレコードをワンクリックで複製する「レコード複製」ボタンを実装する方法を解説
  • 表示条件を設定することで、レコードを1件だけ選択しているときにだけボタンを表示させることができる
  • 本記事では、コマンドデザイナーの操作手順をハンズオン形式で解説します。
この記事を書いた人
伊礼圭吾

伊礼 圭吾いれい けいご

得意領域

Power Platform全般 Power Apps Dataverse Copilot Studio

Power Platformの設計・開発・コンサルティングを担当しています。既存システムからの移行検証や、Power Platformの特性に合わせた再設計はお任せください！

保有資格

PL-200 PL-400 PL-600
社員インタビューを読む → 著者のその他記事一覧を読む →

今回の記事では、モデル駆動型アプリのコマンドバーに独自のボタンを追加する方法をハンズオン形式で解説していきます。
Power Apps・Power AutomateやDataverseの導入・活用でお困りの方は、アーティサンのサービスもあわせてご覧ください。

 

はじめに

こんにちは、アーティサンの伊礼(いれい)です。

今回のテーマは、「モデル駆動型アプリのコマンドバーのカスタマイズ」です！

モデル駆動型アプリの一覧画面の上部には、「新規」「削除」「更新」といったボタンが並んだコマンドバーがあります。

実はこのコマンドバー、自分でオリジナルのボタンを追加することもできるんです。

そこで今回は、「選択したレコードを1クリックで複製する」ボタンを作ってみたいと思います！

「同じような商品をもう1件追加したい」「既存のレコードとちょっとだけ内容が違うレコードをサクッと作りたい」という場面は現場でも多いと思います。 コマンドバーをカスタマイズすることで、そういったニーズをノーコードで解決できます！

今回はDataverse入門シリーズで作成した注文管理アプリの商品マスタを使って進めていきます。

→ Dataverse入門(5)！モデル駆動型アプリの作り方-キャンバスアプリとの違いは？

 

 

【このシリーズの過去回一覧】

 

 

 

コマンドバーとは？

モデル駆動型アプリの画面上部にはコマンドバーと呼ばれる、アプリ上でレコードを操作するための様々な機能を持ったボタンが集まっている場所があります。

Dataverse応用_18

コマンドバーには標準だと、以下のようにシンプルな機能を持ったコマンドが用意されています。

  • 新規：新しいレコードを作成する

  • 削除：選択したレコードを削除する

  • 更新：一覧を最新の状態に更新する

  • Excel にエクスポート：データをExcelにエクスポートする

これらに加えて、コマンドデザイナーという機能を使うことで、独自のコマンドボタンを追加することができます。

追加したボタンにはPower Fx、またはJavaScriptでアクションを定義することが可能で、ボタンの表示条件やラベル、アイコンなども柔軟に設定できます。

今回はPower AppsやPower Automateで慣れている方も多いでしょう、Power Fxでアクションを実装していきます！

 

今回の実装の概要

以下の仕様でコマンドを実装します。

項目

内容

対象テーブル

商品マスタ

ボタン名

レコード複製

動作

選択した商品レコードの内容をコピーして新規作成の画面に遷移する

表示条件

1件だけ選択しているときのみ表示

複製後の商品名

元の商品名に「（コピー）」を付加

 

ハンズオン：レコード複製ボタンを追加する

 

1. コマンドデザイナーを開く

まずは、コマンドデザイナーにアクセスします。

  • まずは対象のモデル駆動型アプリの編集画面を開きます。

    Dataverse応用_05

  • 編集画面が開いたら、画面左側のナビゲーションからボタンを追加したいページを選択します。 今回は一覧画面から商品を複製できるようにしたいので、「商品ビュー」ページを選択します。

  • 画面左側の「商品ビュー」から「…」をクリックし、「コマンドバーの編集」を選択します。

    Dataverse応用_06

  • すると、コマンドデザイナーの画面へ遷移されます。 今回は「メイン グリッド」（一覧画面のコマンドバー）を選択して、「編集」をクリックします。

    Dataverse応用_07

「メイン グリッド」と「メイン フォーム」の違い

モデル駆動型アプリには複数のコマンドバーが存在します。

「メイン グリッド」はビュー(一覧)画面のコマンドバー、「メイン フォーム」は個別レコードのフォーム(編集)画面のコマンドバーに対応しています。 今回は一覧から選択したレコードを複製したいので「メイン グリッド」を選択しています。

 

2. 新しいコマンドを追加する

  • コマンドデザイナーへ遷移できたら、画面左上の「＋ 新規」ボタンをクリックします。

    すると、追加するボタンの種類が表示されます。今回はコマンドボタンを選択していきます。

    Dataverse応用_08

  • コマンドボタンを追加するにあたり、アクションをPower Fxで記述するか、JavaScriptで記述するかの選択が可能です。 前述の通り、今回はPower Fxでアクションを選択していきます！

  • コマンドボタンが追加されると、画面右側に追加されたコマンドのプロパティが表示されます。 まずはコマンドボタンのラベルとアイコンを編集していきます！

    設定項目

    設定値

    ラベル

    商品を複製

    アイコン

    （任意。今回は「Copy」アイコンを選択）

    Dataverse応用_10

 

3. Power Fx でアクションを設定する

「アクション」で「数式バーを開く」をクリックすると、画面上部に数式入力欄が表示されます。

以下の数式を入力します。

With(
    {
        CopyRecord:Self.Selected.Item
    },
    Navigate(
        Patch(
            Defaults(商品),
            Defaults(商品),
            {
                商品名:CopyRecord.商品名 & " のコピー",
                商品コード:CopyRecord.商品コード,
                カテゴリ:CopyRecord.カテゴリ,
                価格:CopyRecord.価格
            }
        )
    )
);

数式の解説：

  • Self.Selected.Item：コマンドバーが配置されているテーブルの一覧で現在選択されているレコードを返します。

  • Patch(Defaults(商品), Defaults(商品), {...})：新規の商品レコードを作成しています。 また、Defaults(商品) で新規レコードのひな型を用意し、その後に{, , ,}で上書きしたい列の値を指定しています。

  • CopyRecord.商品名 & " のコピー"：コピー元レコードの商品名の末尾に「 のコピー」の文字列を追加して、複製元との区別をつけます。

  • Navigate()：Patch関数で作成したレコードを渡すことで、そのレコードの編集フォームへ遷移することができます。

コピー対象の列を追加するには

今回は「商品名」「商品コード」「商品カテゴリ」「価格」の4列をコピー対象にしています。

他の列もコピーしたい場合は、Patch の第3引数に列名と値のペアを追加することで編集フォームに入力された状態にすることが可能です。 注意点として、オートナンバー列やシステム列（作成日時など）などはDataverse側で自動で設定されますので、コピーしないようにしましょう。

 

4. ボタンの表示条件を設定する

これでコマンドボタンのアクションを設定できましたが、そのままだとコマンドボタンが常に表示されてしまいます。 「1件も選択されていないのに複製ボタンが押せる」という状態は適切ではありませんので、1件だけ選択されているときのみボタンを表示するよう条件を設定しましょう。

  • 右ペインの「表示」を「式の条件を表示する」に切り替えます。

    Dataverse応用_11

  • 「表示」の「数式バーを開く」から数式入力欄を開き、以下の数式を入力します。

CountRows(Self.Selected.AllItems) = 1

これで、ビュー画面で1件のレコードが選択されているときだけ「レコードを複製」ボタンが表示されるようになります。

 

5. 保存・公開する

  • コマンドデザイナー右上の「保存して公開する」をクリックします。

    Dataverse応用_12

 

動作確認

注文管理アプリを開いて、動作確認していきましょう！

  • 商品一覧でチェックボックスをクリックして1件のレコードを選択します。

  • すると、コマンドバーに「商品を複製」ボタンが表示されることを確認します。

    Dataverse応用_13

  • ボタンをクリックすると、「商品名」「商品コード」「商品カテゴリ」「価格」が入力済みの編集フォームへ遷移します！

    Dataverse応用_14

  • 残りの必須項目を入力して「保存して閉じる」をすると、商品名末尾に「（コピー）」が付いた新しいレコードが追加されていることを確認できます。 もちろん、コピーしてきた項目も任意の値に編集することが可能です！

    Dataverse応用_15

また、チェックボックスを何も選択していない場合や2件以上選択した場合は、コマンドバーに「商品を複製」ボタンが表示されないことも確認しておきましょう。

  • 何も選択していない場合

    Dataverse応用_16

  • 2件以上選択した場合

    Dataverse応用_17

このように1つのレコードを選択している時だけ「商品を複製」ボタンが表示されるようにしておくと、想定外の動作を防ぎつつ、アプリの利用者にも親切ですね！

 

まとめ

今回は、モデル駆動型アプリのコマンドバーに「レコードを複製する自作のコマンド」を追加する方法を解説しました。

主な流れや設定する内容としては以下の通りです！

  • コマンドデザイナーを使えばオリジナルのコマンドボタンを追加できる

  • Power Fxでアクションを定義できるので、Patchなどキャンバスアプリでもおなじみの関数が使える

  • Self.Selected.Item を使って、ビューで選択中のレコードを参照できる

  • 表示条件を設定することで、適切なタイミングにだけボタンを表示できる

標準のモデル駆動型アプリだとレコードの複製のような細かい要件に対応していない、というのも事実なのですが、 実は独自のアクションを実行できるコマンドの追加を行うことで、標準では提供されていない機能を実装してあげることも可能なんです！

「こんな機能のボタン、モデル駆動型アプリの標準コマンドにないけど欲しいな」と感じたときは、ぜひコマンドバーのカスタマイズを活用してみていただければと思います！

それでは！

 

【このシリーズの過去回一覧】

 

こちらも合わせて読みたい

もし記事を読んで「Power Apps・Power AutomateやDataverseの導入をサポートしてほしい」と思った方は、アーティサン株式会社の各種サービスをご活用ください。
現場の課題やご要望に合わせて、Power Platformの設計・導入・運用をサポートいたします。

次に見るコンテンツ