はじめに
「SharePoint Online」は、ファイル管理やチームコラボレーションに優れた機能を提供し、多くの企業が活用しています。SharePoint Online上でファイル管理を行ったり、「Microsoft Lists（SharePointリスト）」を使ってデータを管理している方も多いのではないでしょうか？
JavaScript帳票ライブラリ「ActiveReportsJS（アクティブレポートJS）」では、多くの方が利用されているSharePoint Online上でも使用できる「Microsoft Lists」のようなクラウドサービスのデータをデータソースとして活用し、Web帳票を簡単に作成することが可能です。
さらに、ActiveReportsJSの帳票デザインファイルをSharePoint Online上に格納し、Web画面から選択可能にしておくことで、複数の帳票を表示することが可能な帳票システムの構築も可能です。
請求書などの帳票は外部のサービスなどを使っているという方もいらっしゃるかもしれませんが、SharePoint Onlineを使っている場合は、ActiveReportsJSを活用すると内製化も可能ですので、参考にしていただけると幸いです。
事前準備
事前準備として次の環境やツールを準備します。
Microsoft 365環境
企業向けの「Microsoft 365」を使用するため、今回は記事ではMicrosoft 365 E5 開発者サンドボックス サブスクリプションの環境を利用していきます。この環境はMicrosoft 365 開発者プログラムに参加することで使用可能です。今回の記事では管理者向けの機能も必要となります。「Microsoft 365」を既にご利用中の方でも、管理者権限が無い方や、既存環境で試すことができない場合は、こちらの環境を準備してください。
環境のセットアップ手順については、Microsoft Learnのセットアップ手順を参考にデフォルトの状態でセットアップしてください。
Graph エクスプローラー
SharePoint Onlineへの接続に関しては、「Microsoft Graph API」を通じて行います。Graph エクスプローラーは、Graph APIで提供されているさまざまなAPIの動作を確認する為のツールです。今回はこちらを利用して、動作確認を行うために利用します。
-
https://developer.microsoft.com/en-us/graph/graph-explorer
※ 事前準備したMicrosoft365環境のアカウントでログインします。
Visual Studio Code
Webアプリケーションの開発・実行時に使用します。以下から最新バージョンを取得しインストールしてご使用ください。
※ 今回の記事では使用しません。次回Webアプリケーションの作成にて使用します。
ActiveReportsJS
今回はActiveReportsJS「V5J（v5.0.3）」を使用します。事前準備として、あらかじめ製品版、またはトライアル版をインストールしてください。トライアル版は無料で以下より入手可能です。
Listsの作成
最初に帳票のデータソースとなるListsとデータを準備します。今回は以下のExcelファイルのデータを元に作成します。事前にダウンロードし任意のローカルフォルダへ展開しておいてください。
まずはじめに、SharePoint Onlineのデフォルトサイトを表示し、次の図のように「新規」-「リスト」を選択します。
「リストを作成」画面の表示後、「Excelから」を選択します。
「Excelから」画面の表示後、［ファイルのアップロード］ボタンを押します。
フォルダダイアログから、事前に用意しておいた「Listsデータ用Excelファイル」内からファイルを一つを選択してアップロードします。
ファイルのアップロードが完了すると、以下のようにListsの作成画面となります。必要に応じて「列の種類（型）※」を変更して［次へ］ボタンを押します。
※ Excelファイル上で日付時刻の形式の列の場合については、「日付と時刻」の種類に変更する必要があります。
続いて、Listsの名称を設定し、［作成する］ボタンを押します。
最終的に、次のような「Lists」が作成されます。この手順を「Invoice.xlsx」、「Orders.xlsx」、「bsdata.xlsx」それぞれのファイルに対して繰り返し行い3つの「Lists」を作成してください。
フォルダの作成
続いてレポートファイルを保存する為のフォルダを作成します。今回はサイトのドキュメント配下に「ActiveReportsJS_ReportsFile」というフォルダを作成しました。
SharePoint Onlineの情報を取得する
リストの作成終了後、帳票システム構築の為に以下のSharePoint Onlineの情報をGraph エクスプローラーを利用して取得します。
| 取得項目 | 内容 |
|---|---|
| サイトID | ファイルの格納先、Listsの作成先となる、サイト情報 |
| リストID | 作成したListsのID情報 |
| ドライブID | サイトの配下にあるドライブのID情報 |
| フォルダID | ドライブ配下に存在していて、ファイルを格納しているフォルダのID情報 |
| アクセストークン | Share Point Onlineにアクセスする為の認証情報 |
アクセストークンの取得
Graphエクスプローラーを開き、今回利用するSharePoint Onlineと同じアカウントでログインすると、以下の画面が表示されます。画面内のオレンジ枠で示された「Access token」を選択すると、SharePoint Onlineにアクセスするための認証情報を取得できます。この情報は、帳票デザイン時にSharePointのリストに接続する際に使用します。
サイトIDの取得
Graphエクスプローラーを使い各種情報を取得するには、次の図のように左側のSample queriesから取得対象となるクエリを選択します。選択後、必要に応じて情報を追加し［Run query］を押すと、情報が取得できます。
次の図では、使用する環境のサイトIDの情報を取得しています。今回はデフォルトで作成済みのサイト「Communication site」を取得して、使用していきます。
リストIDの取得
続いて、リストIDを取得します。先ほどと同様にSample queriesから取得対象となるクエリを選択します。今回は、「ルートサイトのリストを列挙する」を選択します。クエリを実行すると、対象のサイト下に存在するリストが列挙されていますので、その中から今回作成した「Orders」、「Invoice」、「bsdata」のLists情報から、IDの項目を取得します。
ドライブIDの取得
続いて、ドライブIDを取得します。「ルート サイトの下のドキュメント ライブラリを列挙する」のクエリを実行し、以下のようにIDを取得します。
フォルダIDの取得
最後に、フォルダIDを取得します。フォルダID取得用のサンプルクエリはありませんので、以下のクエリを実行してフォルダIDを取得します。
https://graph.microsoft.com/v1.0/drives/{取得済みドライブID}/items/root/children
レポートファイルの作成
一連の準備が出来たら、ActiveReportJSデザイナを用いて、SharePoint Online上での帳票作成のため、レポートファイルを作成していきます。
レポートパラメータの追加
最初に、SharePoint Onlineの情報を格納する為のレポートパラメータを追加します。デザイナの「データ」タブを選択すると、次の図のようにパラメータセクションを表示されます。このセクションの「＋追加」にてパラメータを追加していきます。
はじめに「Bearer」パラメータを追加します。このパラメータはWebアプリ側で生成されたSharePoint Onlineの認証情報を、ActiveReportJSのデータソースとして指定するWeb APIの認証情報として使用します。帳票デザイン時点では「Graph エクスプローラー」で取得した「Access token」を設定することで、Web APIよりデータを取得することが可能です。
続いて、「siteId」パラメータを追加します。このパラメータは、SharePoint Onlineのサイト情報を格納します。なお、このパラメータはWebアプリ側から情報を渡すものではなく、取得済みのサイトIDをあらかじめ設定しておくための変数として使用します。
さらに「listId」パラメータを追加します。このパラメータは、作成する帳票に応じたSharePoint OnlineのListsのIDを設定します。こちらのパラメータも取得済みのリストIDをあらかじめ設定しておくための変数として使用しています。
データソースの作成
レポートパラメータの準備ができましたら、デザイナよりデータソースの作成を行います。「SharePoint Online」のListsへ接続する為、エンドポイントに「https://graph.microsoft.com/v1.0/」を設定します。さらにHTTPヘッダへ「Authorization」を追加し、その値にはレポートパラメータとして作成した「{@Bearer}」を設定します。
データセットの作成
続いてデータセットの作成を行います。追加した「データソース」から「＋」を選択し作成します。ダイアログ表示後、次の図と表のように設定を行います。
| 設定 | 設定値 | 備考 |
|---|---|---|
| URI/パス | sites/{@siteId}/lists/{@listId}/items |
SharePoint OnlineのListsを取得。レポートパラメータとして、作成した{@siteId}、{@listId}を設定する。 |
| パラメータ | パラメータ：expand 値：fields | 取得したListsのfieldsを取得する為の設定 |
| JSONパス | $.[*].[fields] |
データ取得のJSONパス |
実行後、次の図のようにフィールドセクション内に対象のListsのデータベースフィールドが追加されますので、［変更を保存］ボタンを押せばデータセットが追加されます。
自動設定されたデータベースフィールドには帳票作成に不要な項目を含まれています。また、ExcelファイルからListsを作成した場合、Lists内部の列名が自動的に「field_“数値の連番"」に設定されますので、この点も留意してください。
今回作成するレポートでは最終的に以下の表のような設定となります。
「Invoice」データのフィールド設定
| フィールド名 | データフィールド |
|---|---|
| ID | Title |
| BillNo | field_1 |
| SlipNo | field_2 |
| CustomerID | field_3 |
| CustomerName | field_4 |
| Products | field_5 |
| Number | field_6 |
| UnitPrice | field_7 |
| TaxRate | field_8 |
| Date | field_9 |
「Orders」データのフィールド設定
| フィールド名 | データフィールド |
|---|---|
| OrderID | Title |
| CustomerID | field_1 |
| EmployeeID | field_2 |
| OrderDate | field_3 |
| RequiredDate | field_4 |
| ShippedDate | field_5 |
| ShipVia | field_6 |
| Freight | field_7 |
| ShipName | field_8 |
| ShipAddress | field_9 |
| ShipCity | field_10 |
| ShipRegion | field_11 |
| ShipPostalCode | field_12 |
| ShipCountry | field_13 |
「bsdata」データのフィールド設定
| フィールド名 | データフィールド |
|---|---|
| name | Title |
| bs_id | field_0 |
| bs_name | field_1 |
| accounting_id | field_2 |
| category_id | field_3 |
| category | field_5 |
| amount | field_6 |
レイアウトの作成
データソースとデータセットの作成が完了したら、レイアウトを作成していきます。今回は3つのレイアウトを作成しますが、レイアウトの詳しい内容についてはこちらのレイアウトファイルをダウンロードしてご確認ください。また、ActiveReportsJSでの帳票デザイン方法については、以下の記事もご参考ください。
プレビューの実行
レイアウトを完成したら、デザイナ上部の「プレビュー」をクリックしてプレビューを実行すると、次のように「SharePoint Online」のListsから取得したデータが帳票で表示されました。
さいごに
今回は「ActiveReportsJS」と「SharePoint Online」を利用した帳票システムを開発方法として、使用する環境の準備や「SharePoint Online」の情報の取得方法、レポートファイルの作成について解説しました。
次の記事では、SharePoint Online上に配置したレポートファイルを参照し、複数の帳票を表示可能なWebアプリケーションの作成方法について解説していきます。