SAP AppGyverでSAP BTPのDestinationサービスが使えるようになりました

＊この記事はまだ検証途中のものがあります。速報＆簡単な解説として扱って下さい。

前提：

CORS問題が発生する場合、Composer Pro上でもデータリソースの設定時にその旨が表示されますし、WebPreviewでの実行時にブラウザのコンソールを確認すると上記のようなエラーが表示されます。この記事はこのようにCORSの問題が発生する環境で行っています。

BTP側での作業：

新機能のキモとなるDestinationを作成します。今回は前提で紹介した環境のCAPで作成したODataサービスを設定します。
Blank Templateを使用して

・TypeはHTTP

・URLは前提で作成したODataサービスのURL

*これはメタデータのURLではありません。今回は「https://xxxxxxxxxxxx.hana.ondemand.com/incident」と/incidentまで入力して下さい。

・Proxy TypeはInternet

・AuthenticationはNoAuthentication

と設定します。Additional Propertiesの欄で、

WebIDEEnabled=true
HTML5.DynamicDestination=true

を必ず設定して下さい。（この2つの設定が無いとSAP AppGyver側でそのDestinationが表示されなかったり、アプリでの実行時にそのDestinationにアクセスできずエラーが発生するという現象が発生します。）

SAP AppGyver側での作業：

今回は新規のプロジェクトを使用しています。

認証の追加

まず、上部のAUTHをクリックし、

ENABLE AUTHENTICATIONをクリックして次に進みます。

「SAP BTP authentication」をクリックします。下記の画面が表示されます。

これで認証のセットアップは完了です。

ページ一覧を見ると

このように1ページ増えています。

BTP Destinationを経由するデータリソースの追加

次に画面上部の「DATA」をクリックします。（この部分の表示は大きく変わりました。）

「No systems integrated」のところにある「ADD INTEGRATION」ボタンをクリックします。

「BTP DESTINATIONS」ボタンをクリックします。（AUTHENTICATIONの設定を先に行っておかないとこのボタンは有効化されません）

そのサブアカウント上で設定されていてAppGyver側で使用可能なDestinationの一覧が表示されます。もしここで先程設定したDestinationが表示されない場合はDestination側のAdditional Propertiesの設定を確認して下さい。

先程作成したcap_projectをクリックし、次に進みます。

下記の画面でデータエンティティ一覧や、「BROWSE DATA」でそのDestinationに間違いがないことを確認したら右上の「INSTALL INTEGRATION」ボタンをクリックします。

*「BROWSE DATA」ボタンをクリックすると下記のようにデータの表示が可能です。

使用したいデータエンティティを選択し、「ENABLE DATA ENTITY」をクリックすると

そのエンティティがデータリソースとして有効化されます。

一覧に戻ると

このように有効化したエンティティがデータリソースとして使用できるようになりました。

テスト

このリソースのテストのため簡単に画面を作ってみます。Emptyページに「Basic List」を追加します。

プロパティのList ResourceのConfigureボタンをクリックし

先程追加したデータリソースを選択し、

カラムを適当にバインドしましょう。

SaveしてWeb Previewで確認してみます。

このようにDestinationを使用してデータを取得し、表示することが出来ました。

（アプリ起動時に一瞬AUTHENTICATION設定で自動で追加されたページが表示されます。）

いかがでしょうか？SAP AppGyverでBTPのDestinationが使用できるようになりました。まだ特定の認証機構を使用していると使用できないなど制限があるようですが、今後機能が追加されるものと思われます。よりBTPに近づいたSAP AppGyverを是非試して下さい。