ActiveReportsJSでつくる！PowerAppsの帳票コンポーネント（2）

前回の記事では、ActiveReportsJSを活用し、Power Appsで利用できる帳票コンポーネントの作成方法を解説しました。今回は、作成した帳票コンポーネントと、SharePointを活用して、Power Appsの帳票アプリケーションを作成する方法をご紹介します。

事前準備

事前準備として次の環境やツールを準備します。

Microsoft 365環境

今回の記事では「Microsoft 365 E5」環境で利用可能なSharePointと、Power Apps（キャンバスアプリ）を利用します。既存環境を利用できない場合はMicrosoft 365 E5 開発者サンドボックス サブスクリプションの環境を利用してお試しください。この環境はMicrosoft 365 開発者プログラムに参加することで使用可能です。

環境のセットアップ手順については、Microsoft Learnのセットアップ手順を参考にデフォルトの状態でセットアップしてください。

Power Apps 帳票アプリケーションの概要

今回作成する帳票アプリケーションは、帳票のデータソースとして「SharePointリスト」を利用します。また、ActiveReportsJSの帳票レイアウトは、「SharePoint Online」上のフォルダーに格納したものを使用する構成とします。

帳票データソースの作成

それでは、最初に帳票のデータソースとして利用するSharePointリストの作成を行っていきます。次の図のように、Microsoft365のトップページから、アプリ起動ツールの中から「Lists」を選択します。

Listsの起動後、［＋新しいリスト］ボタンを押してリストを追加します。

続いて、画面遷移後「空白のリスト」を選択します。

続いて以下の用に、リストの名称と、保存先の設定画面が表示されます。任意のリスト名を設定後、保存先にはSharePointサイトを指定します。

リストの作成後、次のように列を追加していきます。

上記の手順で、今回は3つのリストを作成します。作成するリスト名、列名は以下の通りです。

上記リストと、列を設定後、以下のGitHub上に公開しているTextファイルをメモ帳で開きそれぞれのリストに張り付けてデータを追加します。

帳票レイアウトの作成

続いて、帳票レイアウトの作成を行っていきます。今回の記事では以下のGitHub上に公開している帳票レイアウトを利用します。

帳票レイアウトの詳しい作成方法については以下の記事を参考にしてください。

今回利用する帳票レイアウトのデータソース設定は、SharePointリストの項目に合わせたJSON形式の文字列で作成されています。帳票を表示する際は、まずSharePointリストからデータを取得し、これをJSON形式に変換します。そして、あらかじめ設定されているJSON文字列と置き換えることで、正しいデータが帳票に反映されるようになっています。

次に、帳票レイアウトのファイルをSharePointにアップロードします。まず、「PowerApps用ActiveReportsレポートファイル」というフォルダをあらかじめ作成し、その中にファイルをアップロードします。さらに、ドキュメントフォルダ内のリストに「Listデータ」という列を追加して、帳票で利用するSharePointリストを設定します。この設定により、Power Appsから帳票を呼び出す際に、帳票レイアウトとデータソースが自動的に連携され、レイアウトを選択するだけで正しいデータが表示されるようになります。

Power Apps キャンバスアプリの作成

ここまでで、アプリ作成の準備は整いました。続いて、Power Appsのキャンバスアプリを作成していきます。今回は次のように「空のキャンバスアプリ」として作成します。

Power Automateによるデータ取得処理の実装

キャンバスアプリのデザインを行う前に、Power Automateを利用して、帳票レイアウトと、帳票データソースの作成処理を実装します。以下のように「Power Apps Studio」左側のメニューから、「Power Automate」を選択します。

Power Automateタブの表示後、［フローを新規作成する］ボタンを押します。

フロー作成画面の表示後、［＋最初から作成］ボタンを押し、フローの作成を開始します。

帳票レイアウト取得処理

まず、SharePointに格納されている帳票レイアウトファイルを取得する処理を実装します。具体的な処理の流れは、Power Appsで入力されたレポートファイル名のパスにもとづき、ファイルコンテンツを取得し、その結果をテキスト形式で返却するというものです。詳細な設定内容は次の図の通りです。

帳票データソース取得処理

続いて、SharePointリストのデータを取得する処理を実装します。このフローでは、Power Appsで入力されたリスト名をもとに、SharePointリストのデータを取得するAPIを呼び出すHTTP要求を実行し、取得した内容をJSON配列形式の文字列として返却します。詳細な設定内容は次の図の通りです。

キャンバスアプリのデザイン

Power Automateのフロー作成が完了しましたので、ここからアプリのデザインを行っていきます。

データの追加

まず、キャンバスにコンポーネントを配置する前に、作成するアプリから、帳票レイアウトが格納されているSharePointサイトの参照が出来るように、設定をアプリに追加します。次の図のように、データタブから［+データの追加］ボタンを押して、SharePointを追加してください。

コンポーネント配置

それでは、キャンバス上に、コンポーネント配置を行っていきます。以下の図のツリービューにあるようにそれぞれのコンポーネントを配置します。

※ 帳票コンポーネントの配置に関しては、前回記事で紹介したように、「コンポーネントをさらに取得」から作成済みの帳票コンポーネントをインポートしてください。

ギャラリーの設定

コンポーネントを配置後、まず、コンテナコントロール内に配置した「ギャラリー」コントロールの「Items」プロパティに対して以下のように、SharePointドキュメントの参照を設定します。この際に、今回帳票レイアウトを格納しているフォルダである「PowerApps用ActiveReportsレポートファイル」の配下の参照が行えるようにあらかじめフィルタリングを行っておきます。

//ドキュメント//
Filter(ドキュメント,フォルダーのパス = "Shared Documents/PowerApps用ActiveReportsレポートファイル/")

続いて、「レイアウト」プロパティを「タイトルとサブタイトル」に設定し、設定するタイトルとサブタイトルには以下のように設定します。

ThisItem.拡張子付きのファイル名

"      " & ThisItem.Listデータ &"（Sharepointリストデータ）"

帳票レイアウト選択時の動作実装

続いて、次の画像で表示されている、Gallery1内の「アイコン」コントロールが選択された際の動作を実装します。

アイコンが選択された際に発生するイベント「OnSelect」にて、次のように帳票レイアウトのパスと、帳票で使用するリスト名を先ほど作成したPower Automateのフローを使用して、変数に格納します。

Select(Parent);
UpdateContext(
    {
        reportlayout:GetActiveReportsJSFile.Run(ThisItem.'完全パス '),
        reportdata:GetReportData.Run(ThisItem.Listデータ)
    }
)

この実装で、帳票レイアウトと、帳票データが取得可能となります。動作確認のため、配置済みのテキストボックスに以下の設定を追加してください。

reportlayout.reportsjson

reportdata.data

設定後、以下のように、テキストボックス内に文字列が表示されていれば正しい動作です。

帳票コンポーネントの設定

続いて、テキストボックスに設定した変数を帳票コンポーネントの以下のプロパティに設定します。

reportlayout.reportsjson

reportdata.data

動作確認

最後に、帳票コンポーネントの動作確認を行います。次の動画のように、SharePoint上に保存されている帳票レイアウトとSharePointリストのデータを活用した帳票が正しく表示されることが確認できました。

さいごに

今回の記事では、前回の記事で解説した「ActiveReportsJS」を活用したPower Appsの帳票コンポーネントを用い、帳票レイアウトにはSharePoint Online上フォルダを、帳票データソースにはSharePointリストを利用するPower Apps帳票アプリケーションの作成方法について解説しました。今回使用したデータおよび帳票レイアウトは、以下のGitHub上に公開しています。

エンタープライズ向けMicrosoft365を利用中の場合、そのライセンス内でPower Apps（キャンバスアプリ）やSharePointが利用可能な環境が整っていることが大半です。この環境とActiveReportsJSを活用することで、別途帳票システムを導入することなく、高機能な帳票システムの内製化が可能になります。ぜひ、Power AppsとActiveReportsJSを活用して、帳票システムの内製化をご検討ください。

製品サイトでは、今回ご紹介したActiveReportsJSの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

• デモアプリケーションを試す
• トライアル版をダウンロードして試す

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

• 問合せ先を確認する
• 個別相談会（Web会議）について確認する