はじめに
CAPの@cap-js/attachmentsプラグインは今年の3月にリリースされた機能で、簡単な設定だけでFiori elementsアプリに添付ファイルをアップロードするセクションを追加することができます。現在はまだベータのステータスです。
設定方法は以下のリポジトリに書かれています。設定している中でつまづいた点があったので、それを含めてこの記事で説明します。
ステップ
- プロジェクトを作成
- @cap-js/attachmentsをインストール
- Attachmentsを追加
- Fiori elementsアプリを作成
- デプロイ
1. プロジェクトを作成
以下のコマンドでプロジェクトを作成し、サンプルのデータモデルも追加します。
cds init
cds add tiny-sample
追加されたデータモデルは以下です。
namespace my.bookshop;
entity Books {
key ID : Integer;
title : String;
stock : Integer;
}
2. @cap-js/attachmentsをインストール
@cap-js/attachmentsをインストールします。
npm add @cap-js/attachments
3. Attachmentsを追加
db/attachments.cdsファイルを追加します。元のdata-model.cdsに設定を追加してもよいのですが、「関心の分離」のベストプラクティスに従って別ファイルにするのがよいとのことです。
"Books"エンティティにAttachmentsのアスペクトをコンポジションとして追加しています。
using { my.bookshop as my } from './data-model';
using { Attachments } from '@cap-js/attachments';
extend my.Books with { attachments: Composition of many Attachments }
Attachmentを使うための設定はこれだけです。
cds watchでサービスを実行してメタデータを見てみると、"Books_attachmehts"というエンティティが追加されています。
`
4. Fiori elementsアプリを作成
Fiori toolsを使ってFiori elements (List Report)アプリを作成します。
データソースには"Use a Local CAP Project"を選択します。
メインのエンティティと、ナビゲーションプロパティとして"attachments"を選択します。
プロジェクトの設定を以下のように行います。
この状態でFiori elementsアプリを実行し、Object Pageに遷移すると画面が固まってしまいました。
@cap-js/attachmentsのリポジトリで説明に使われていたプロジェクトは、SAPUI5バージョンが1.121.0だったので、index.htmlでバージョンを1.121.0にすると動くようになりました（1.122.0でも動いたので、以下では1.122.0にしています）。1.123.0以降のバージョンでは今のところ動かないようでした。
※デプロイ前にはmanifest.jsonのminUI5Versionも変更しておきましょう
Object Pageを開くと、"Attachments"のテーブルが表示されます。
編集モードにすると"Upload"ボタンからファイルをアップロードすることができます。
以下がアップロードした結果です。
※"Status"という項目はウイルススキャンのステータスを格納するための項目のようですが、ドキュメントに説明がなく、どうやってスキャンを有効にするのかは不明です。
裏では以下のアノテーションが生成されており、そのおかげで添付ファイルのセクションがUIに表示されるようになっているのでした。
-
Books_attachmentsのためのUI.LineItemアノテーション
-
LineItemをObject Pageに追加するためのUI.ReferenceFacetアノテーション
@cap-js/attachmentsプラグインを使わずに添付ファイル用のエンティティとアノテーションを定義した場合、以下の見え方になりました。使われているコントロールやボタン名、テーブルツールバーのボタンも違っています。この方法では、アップロードもエラーになってしまいました。@cap-js/attachmentsは他にも何か裏でやっていそうです。
5. デプロイ
まずは普通に、以下の手順でデプロイしてみました。
cds add hana --for production
cds add xsuaa --for production
mbt build --mtar archive
cf deploy mta_archives/archive.mtar
Fiori elementsアプリをHTML5 Application Repositoryにデプロイするためには、以下のブログに記載の設定も必要です。
その結果、CAPのサービス起動時にエラーになりました。
@cap-js/attachmentsはデフォルトではファイルの格納先としてSAP Object Storeを使うようになっており、そのためには以下の設定を行います。
格納先としてSAP HANA Cloudを使いたい場合、package.jsonに以下の設定が必要です。
"cds": {
"requires": {
...,
"attachments": {
"kind": "db"
}
}
}
上記の設定後、デプロイは成功しHTML5 Application Repositoryから実行できるようになりました。
まとめ
- @cap-js/attachmentsを使う場合、UI5バージョンは1.122.0を使用する（2024年5月現在）
- ファイルの格納先としてSAP HANA Cloudを使用する場合、package.jsonに設定を追加する