- SAP Managed Tags:
SAP Gateway Demo System (ES5) から、BP（ビジネスパートナ）マスタデータの一覧と詳細を取得し表示し、アドレス情報で Google map を呼び出すアプリを作成しました。アプリ概要と作成手順のポイントに、学んだことを交えながらブログとして書いていくことにします。
SAP Gateway Demo System (ES5) は、デモ用のサンプルとして BP マスタデータを OData API として提供しています。これを使って、BP マスタデータの一覧表示、選択された特定の BP レコードの詳細表示、Web Address のオープン、アドレス情報を使った Google map のオープンを行います。
iPhone の AppGyver アプリでの動作:
今回のアプリは、Web アプリとして実行しようとすると CORS (Cross Origin Resource Sharing) エラーが発生することが確認できています。このエラーの詳細については、ネットに数多くのサイトがあります。例えば、https://developer.mozilla.org/ja/docs/Web/HTTP/CORS/Errors。
この CORS エラーを回避するための具体的な方法は、既にいくつかのブログ等で解説されています。
従って、ここでは、Simple is the best. の原則で、Web アプリとしてプレビューあるいは実行するのではなく、CORS エラーが発生しない iPhone の AppGyver アプリでの動作までとしています。
すこし長くなりましたので、ここに目次を挿入します。
1. Project の作成
2. Main 画面の定義 - UI デザイン
3. Data Resource の作成
4. Main 画面の定義 - Data Variable の作成
5. Main 画面の定義 - Data Variable の割当
6. Details 画面の定義 - Page Parameter、Data Variable の定義
7. Details 画面の定義 - UI デザインと Data Variable の割当
8. Details 画面の定義 - Web Address のオープン、アドレス情報を使った Google map のオープン
9. Main 画面から Details 画面への遷移
ログオン後の画面 https://platform.appgyver.com/apps の CREATE NEW ボタンをクリックし、Project を作成します。
初期画面の UI CANVAS（画面上部に青色でハイライト）で、一覧表示の画面をデザインしていきます。Page name には Main と入力し、Title 項目の Content には、List of BPs in ES5 と入力し、画面左側のパネルから List item をドラッグ&ドロップで配置します。
画面上部の DATA アイコンをクリックし、画面左側のパネルの DATA RESOURCES を選択、画面右上の ADD DATA RESOURCE ボタンをクリック、OData integration を選択します。
Configure OData integration の画面で、認証タイプ (Authentication type) として基本認証 (Basic authentication) を選択、登録した ES5 のユーザ名とパスワード、Base API URL に、https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC とタイプし、VERIFY URL ボタンをクリックします。
提供されているエンティティタイプが左側に一覧表示されます。また、CORSエラーに関する警告メッセージも表示されています。
今回は、BPマスタを利用したいので、BusinessPartnerSet のトグルボタンを ON にします。Resource ID は、選択したエンティティセットと同じとなり、SAVE DATA RESOURCE ボタンをクリックすることで、Data Resource の定義を保存できます。
また、保存する前に、左側のパネルから list を選択し、TEST タブでは list 操作のテスト実行、SCHEMA タブではデータの構成要素（スキーマ）を確認することもできます。
最終的には、Data Resource として、BusinessPartnerSet が定義されたことを確認できます。
Data Variable は Page Variable と同様に、画面項目に割り当てることができますが、その定義においては Data Resource からスキーマ情報が自動的に取得され、また、指定した Data Variable type に従って、デフォルトのロジックが自動的に設定されます。
まず、BPマスタ一覧のデータを取得するために、list 操作のための Data Variable を作成します。
画面上部の UI CANVAS アイコンをクリックし、右上のスライダーを VIEW から VARIABLES へ移動、画面左側のパネルの中の DATA VARIABLES を選択し、ADD DATA VARIABLES ボタンをクリックします。
Data Resource を選択します。ここでは、BusinessPartnerSet だけしか定義されていないので、ひとつだけの選択肢ですが、BusinessPartnerSet を選択します。
BusinessPartnerSet1 という名前が提案されてきます。ここではそのままとします。Data Variable type は、Collection of data records を選択します。基本認証でのユーザ名、パスワードを割り当てるために、Basic authentication の欄のボタンをクリックします。
ポップアップウィンドウで、Object with properties を選択し、次の画面で、登録した ES5 のユーザ名とパスワードを入力します。なお、Data Resource の定義の際にも、ES5 のユーザ名とパスワードを入力していますが、そこでは、エンティティセットやスキーマ情報の取得のための一時的に用いられているだけです。
画面右下の Add logic to … をクリックすることで、LOGIC ウィンドウがオープンし、デフォルトのロジックが自動的に設定されていることを確認できます。
フローを構成する 3 つのボックスでは、それぞれ、Data Resource の BusinessPartnerSet から list としてデータレコードの集まりが抽出され、次にその結果が、Data Variable BusinessPartnerSet1 に格納され、5000 msec（5秒）のディレイの後、また繰返されています。今回のようなデータの更新が無いシナリオの場合は、ディレイのボックスを含むループ処理は削除しても良いでしょう。
最初に定義した Main 画面の List item の属性を定義します。List item をマウスで選択し、Repeat with 直下のボタンをクリックします。
ポップアップウィンドウで、Data and Variables、次に Data Variables を選択し、先ほど定義した Data Variable BusinessPartnerSet1 を選択し、SAVA ボタンをクリックします。
List item が繰り返し表示に変更されたことを確認できます。
次に、List item 上のラベルを割り当てるために、Primary label 直下のボタンをクリックします。ポップアップウィンドウで、Data item in repeat、次に current、CompanyName を選択し、SAVA ボタンをクリックします。
BP マスタの詳細画面を定義します。画面右上の Main をクリックし、遷移先の PAGES 画面で、ADD NEW PAGE をクリックします。画面の名前をここでは、Details としています。
Details 画面をオープンする際のパラメータ Page Parameter として、businesspartnerId を定義します。Main 画面から遷移する際に受け渡される BP マスタ ID として利用することが目的です。
Details 画面における Data Variable として BusinessPartner1 を定義します。ここでは、OData の retrieve を利用するため、Data variable type は、single data record とし、先ほど定義した Page Parameter の businesspartnerId をretrieve のパラメータである BusinessPartnerID に割り当てます。画面では、デフォルトのロジックが自動的に設定されていることを確認できます。
ここでは、Card 画面要素を使って、下図のように画面レイアウトを定義し、また、各 Card のContent に、Data Variable BusinessPartner1 の中の適切な項目を割り当てます。
Web Address カードをクリックした際に、BPマスタの項目である Web Address をブラウザでオープンさせるために、LOGICを定義します。MARKETPLACE から、Open URL を検索し INSTALL し、フローに追加します。
Web Address カードでの Open URL のパラメータ URL to open の定義はシンプルに、Data Variable の WebAddress 項目を指定するだけです。
Address をピンで示しながら Google map をオープンする方法については、以下のサイトを参照しました。JavaScript の利用など、他にも方法があるようですが、ここでは、最もシンプルな方法を採用しました。
https://www.google.com/maps/search/?api=1¶meters の形式、parameters の文字列では特定の文字を置き換えることが必要と書かれています。例えば、スペースは + へ、カンマは %2C へなど。
Address カードにおける Open URL のパラメータ については、以下の定義としています。
Main 画面の UI CANVAS に戻り、List item の LOGIC ウィンドウを開き、Open Page をフローに設定します。宛先の Page を Details とし、Parameters の businesspartnerId には、current.BusinessPartnerID を割り当てます。
ここでは、一覧表示に List item コンポーネントを使いましたが、同じく一覧表示のためのコンポーネントとして、Basic list があります。Basic list は、MARKETPLACEからインストールして利用できます。Basic listでは、Data Variable を使わずに直接 Data Resource を割り当てることが可能です。
Basic list を使った場合、Open Page コンポーネントのパラメータには、self.tappedItem.id コンポーネント属性を利用します。
SAP AppGyver を使えば、
急速に進化している SAP AppGyver にご期待いただければ幸いです。もし、ご興味があれば、SAP AppGyver Community を訪れてみてください。
最後までお読みいただき、ありがとうございます。
- ここでは、無償の SAP AppGyver Community edition を使っています。アカウントの作成や、SAP AppGyver のより初歩的な内容に関しては、私の前回のブログも参照ください。
- SAP Gateway Demo System (ES5) は SAP が提供するデモ用の SAP Gateway システムです。ユーザアカウント作成については以下を参照ください。
- ES5 の OData サービスの URL や、ES5 で出来ることなどの詳細については、以下を参照ください。
開発アプリの概要
SAP Gateway Demo System (ES5) は、デモ用のサンプルとして BP マスタデータを OData API として提供しています。これを使って、BP マスタデータの一覧表示、選択された特定の BP レコードの詳細表示、Web Address のオープン、アドレス情報を使った Google map のオープンを行います。
iPhone の AppGyver アプリでの動作:
CORS エラー
今回のアプリは、Web アプリとして実行しようとすると CORS (Cross Origin Resource Sharing) エラーが発生することが確認できています。このエラーの詳細については、ネットに数多くのサイトがあります。例えば、https://developer.mozilla.org/ja/docs/Web/HTTP/CORS/Errors。
この CORS エラーを回避するための具体的な方法は、既にいくつかのブログ等で解説されています。
- Using BTP Authentication and Destinations with SAP AppGyver *and deploy it to BTP
- SAP AppGyverでSAP BTPのDestinationサービスが使えるようになりました
- How to overcome CORS error while connecting SAP AppGyver to SAP Business Technology Platform or SAP ...
- Build an integral SAP Integration Suite project and consume it from a SAP AppGyver custom app – Tuto...
従って、ここでは、Simple is the best. の原則で、Web アプリとしてプレビューあるいは実行するのではなく、CORS エラーが発生しない iPhone の AppGyver アプリでの動作までとしています。
アプリ開発のステップ概要
すこし長くなりましたので、ここに目次を挿入します。
1. Project の作成
2. Main 画面の定義 - UI デザイン
3. Data Resource の作成
4. Main 画面の定義 - Data Variable の作成
5. Main 画面の定義 - Data Variable の割当
6. Details 画面の定義 - Page Parameter、Data Variable の定義
7. Details 画面の定義 - UI デザインと Data Variable の割当
8. Details 画面の定義 - Web Address のオープン、アドレス情報を使った Google map のオープン
9. Main 画面から Details 画面への遷移
1. Project の作成
ログオン後の画面 https://platform.appgyver.com/apps の CREATE NEW ボタンをクリックし、Project を作成します。
2. Main 画面の定義 - UI デザイン
初期画面の UI CANVAS（画面上部に青色でハイライト）で、一覧表示の画面をデザインしていきます。Page name には Main と入力し、Title 項目の Content には、List of BPs in ES5 と入力し、画面左側のパネルから List item をドラッグ&ドロップで配置します。
3. Data Resource の作成
画面上部の DATA アイコンをクリックし、画面左側のパネルの DATA RESOURCES を選択、画面右上の ADD DATA RESOURCE ボタンをクリック、OData integration を選択します。
Configure OData integration の画面で、認証タイプ (Authentication type) として基本認証 (Basic authentication) を選択、登録した ES5 のユーザ名とパスワード、Base API URL に、https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC とタイプし、VERIFY URL ボタンをクリックします。
提供されているエンティティタイプが左側に一覧表示されます。また、CORSエラーに関する警告メッセージも表示されています。
今回は、BPマスタを利用したいので、BusinessPartnerSet のトグルボタンを ON にします。Resource ID は、選択したエンティティセットと同じとなり、SAVE DATA RESOURCE ボタンをクリックすることで、Data Resource の定義を保存できます。
また、保存する前に、左側のパネルから list を選択し、TEST タブでは list 操作のテスト実行、SCHEMA タブではデータの構成要素（スキーマ）を確認することもできます。
最終的には、Data Resource として、BusinessPartnerSet が定義されたことを確認できます。
4. Main 画面の定義 - Data Variable の作成
Data Variable は Page Variable と同様に、画面項目に割り当てることができますが、その定義においては Data Resource からスキーマ情報が自動的に取得され、また、指定した Data Variable type に従って、デフォルトのロジックが自動的に設定されます。
まず、BPマスタ一覧のデータを取得するために、list 操作のための Data Variable を作成します。
画面上部の UI CANVAS アイコンをクリックし、右上のスライダーを VIEW から VARIABLES へ移動、画面左側のパネルの中の DATA VARIABLES を選択し、ADD DATA VARIABLES ボタンをクリックします。
Data Resource を選択します。ここでは、BusinessPartnerSet だけしか定義されていないので、ひとつだけの選択肢ですが、BusinessPartnerSet を選択します。
BusinessPartnerSet1 という名前が提案されてきます。ここではそのままとします。Data Variable type は、Collection of data records を選択します。基本認証でのユーザ名、パスワードを割り当てるために、Basic authentication の欄のボタンをクリックします。
ポップアップウィンドウで、Object with properties を選択し、次の画面で、登録した ES5 のユーザ名とパスワードを入力します。なお、Data Resource の定義の際にも、ES5 のユーザ名とパスワードを入力していますが、そこでは、エンティティセットやスキーマ情報の取得のための一時的に用いられているだけです。
画面右下の Add logic to … をクリックすることで、LOGIC ウィンドウがオープンし、デフォルトのロジックが自動的に設定されていることを確認できます。
フローを構成する 3 つのボックスでは、それぞれ、Data Resource の BusinessPartnerSet から list としてデータレコードの集まりが抽出され、次にその結果が、Data Variable BusinessPartnerSet1 に格納され、5000 msec（5秒）のディレイの後、また繰返されています。今回のようなデータの更新が無いシナリオの場合は、ディレイのボックスを含むループ処理は削除しても良いでしょう。
5. Main 画面の定義 - Data Variable の割当
最初に定義した Main 画面の List item の属性を定義します。List item をマウスで選択し、Repeat with 直下のボタンをクリックします。
ポップアップウィンドウで、Data and Variables、次に Data Variables を選択し、先ほど定義した Data Variable BusinessPartnerSet1 を選択し、SAVA ボタンをクリックします。
List item が繰り返し表示に変更されたことを確認できます。
次に、List item 上のラベルを割り当てるために、Primary label 直下のボタンをクリックします。ポップアップウィンドウで、Data item in repeat、次に current、CompanyName を選択し、SAVA ボタンをクリックします。
6. Details 画面の定義 - Page Parameter、Data Variable の定義
BP マスタの詳細画面を定義します。画面右上の Main をクリックし、遷移先の PAGES 画面で、ADD NEW PAGE をクリックします。画面の名前をここでは、Details としています。
Details 画面をオープンする際のパラメータ Page Parameter として、businesspartnerId を定義します。Main 画面から遷移する際に受け渡される BP マスタ ID として利用することが目的です。
Details 画面における Data Variable として BusinessPartner1 を定義します。ここでは、OData の retrieve を利用するため、Data variable type は、single data record とし、先ほど定義した Page Parameter の businesspartnerId をretrieve のパラメータである BusinessPartnerID に割り当てます。画面では、デフォルトのロジックが自動的に設定されていることを確認できます。
7. Details 画面の定義 - UI デザインと Data Variable の割当
ここでは、Card 画面要素を使って、下図のように画面レイアウトを定義し、また、各 Card のContent に、Data Variable BusinessPartner1 の中の適切な項目を割り当てます。
8. Details 画面の定義 - Web Address のオープン、アドレス情報を使った Google map のオープン
Web Address カードをクリックした際に、BPマスタの項目である Web Address をブラウザでオープンさせるために、LOGICを定義します。MARKETPLACE から、Open URL を検索し INSTALL し、フローに追加します。
Web Address カードでの Open URL のパラメータ URL to open の定義はシンプルに、Data Variable の WebAddress 項目を指定するだけです。
Address をピンで示しながら Google map をオープンする方法については、以下のサイトを参照しました。JavaScript の利用など、他にも方法があるようですが、ここでは、最もシンプルな方法を採用しました。
- Google Maps URLs (https://developers.google.com/maps/documentation/urls/get-started)
https://www.google.com/maps/search/?api=1¶meters の形式、parameters の文字列では特定の文字を置き換えることが必要と書かれています。例えば、スペースは + へ、カンマは %2C へなど。
Address カードにおける Open URL のパラメータ については、以下の定義としています。
9. Main 画面から Details 画面への遷移
Main 画面の UI CANVAS に戻り、List item の LOGIC ウィンドウを開き、Open Page をフローに設定します。宛先の Page を Details とし、Parameters の businesspartnerId には、current.BusinessPartnerID を割り当てます。
補足 - Basic list
ここでは、一覧表示に List item コンポーネントを使いましたが、同じく一覧表示のためのコンポーネントとして、Basic list があります。Basic list は、MARKETPLACEからインストールして利用できます。Basic listでは、Data Variable を使わずに直接 Data Resource を割り当てることが可能です。
Basic list を使った場合、Open Page コンポーネントのパラメータには、self.tappedItem.id コンポーネント属性を利用します。
最後に
SAP AppGyver を使えば、
- 短時間で、
- SAP バックエンドシステムや様々な API に接続し、データの参照、登録、変更を行い、
- モバイル固有のカメラやバーコードリーダ、GPSセンサなどの機能を組み合んだ、
- Web / モバイルアプリを実装できます。
急速に進化している SAP AppGyver にご期待いただければ幸いです。もし、ご興味があれば、SAP AppGyver Community を訪れてみてください。
最後までお読みいただき、ありがとうございます。
