SAP社が提供するノーコードツール SAP AppGyver を使ったアプリの作成例を3回に分けて
ご紹介します。本ブログは第２回目となります。
SAP HANA Cloudからセッション情報などを取得したり、問合せ内容の登録ができる
イベントガイドアプリをノーコーディングで作成しました。
SAP AppGyver上の操作をステップバイステップで記載していますので是非ご参考にしてください。
１．全体概要・準備・SAP AppGyverでのアプリ作成（画面遷移・データ参照）
２．SAP AppGyverでのアプリ作成（データ登録）←本ブログ★
３．チャットボット機能の導入
Index
１．はじめに
２．アプリケーションの構成図、利用サービス
３．準備
４．SAP AppGyverでのアプリ作成（OData連携～データ登録～）
５．終わりに
１．はじめに
本ブログでは SAP Inside Track Tokyo というコミュニティイベントのスマートフォン向け
イベントガイドアプリをSAP AppGyverで作成しています。
このアプリでできることは以下となり、今回記載する内容は「問合せ機能」となります。
- イベント情報の参照
- イベントの概要
- セッション情報
- イベントの動画・投影資料
- 参加者ブログ
- FAQ
- イベントの参加登録
- すぐにつぶやける（Twitterでハッシュタグ付き）
- 問合せ機能
- チャットボットでセッション情報を参照する
「問合せ機能」、「チャットボット機能」以外は第一弾のブログにて記載しています。
第一弾のブログはこちら：SAP AppGyverで作る SIT イベントガイドアプリ(Part1)
２．アプリケーションの構成図、利用サービス
このアプリの構成の内、今回紹介する部分は以下となります。
（他のAPIサービスなどを利用される場合はODataサービスの作成は不要です）
- SAP BTP, Cloud Foundry environment
- Node.js Application : SAP HANA CloudのデータをODataサービスとして公開
- SAP HANA Cloud : QA情報の格納先
- SAP Business Application Studio : 開発環境
３．準備
アプリ作成の準備内容は、こちらのブログに記載しています。
第一弾のブログはこちら：SAP AppGyverで作る SIT イベントガイドアプリ(Part1)
本ブログでは、以下のSAP HANA CloudのテーブルとODataサービスを使用します。
| テーブル名 | 説明 | OData Service Name |
| QandA | 問合せ内容を格納するテーブル | QandAservice |
Table : QandA
| 列名 | 型 | 説明 |
| ID (Key) | String(30) | QAを識別するID(問合せ日時) |
| UserName | String(20) | 問合せ者名 |
| Category | String(20) | 問合せカテゴリ(QA,コメント等) |
| Question | String(1000) | 問合せ内容 |
| Answer | String(1000) | 回答内容 |
| Status | String(10) | 問合せステータス |
<OData ServiceのXML>
４．SAP AppGyverでのアプリ作成（OData連携～データ登録～）
本章では、問合せ内容（名前・カテゴリ・問合せ内容/コメント）入力し送信ボタンをクリックすることで、ODataを経由してSAP HANA Cloudにデータを登録する方法をご紹介します。
下図では、登録したい内容を入力し、送信ボタンをクリックすると「送信が完了しました」というポップアップが表示されます。
SAP HANA Cloudのデータを確認すると、即時でデータが登録されたことを確認できます。
（下図の2行目が今回登録したデータです）
1) ODataインテグレーション設定
画面上部の [DATA] ボタンをクリックして、DATA CONFIGRATORを開きます。
画面右側の [ADD DATA RESOURCE] から [OData integration]をクリックします。
[Base API URL]にOData ServiceのURLを指定し、 [VERIFY URL]でURLをチェックします。
※画面のOData Service名は「qand-aservice2」です
ODataが利用可能な場合、Baseの下側にリソースIDやlist、createなどの項目が表示されます。
こちらから一覧表示やデータの登録/更新/削除のテストが行えます。
テストで問題がなければ [SAVE DATA RESOURCE] をクリックします。
※CORSの対応をしていないため警告が表示されますが、iOSで使用する場合は利用可能です。
※利用可能なOData versionは4.0です。2.0は利用できません。（2022年5月時点）
SAP S/4HANAで使われるOData versionは2.0が中心となりますのでご注意ください。
2) DATA VARIABLES設定
1)で設定したODATAにデータを引き渡すための設定を行います。
問合せページでのデータ設定(VARIABLES)を行います。
[DATA VARIABLES]を選択し [ ADD DATA VARIABLE ] をクリックし、
OData Service名を選択します。
Data variable nameに任意の名前を付け、Data variable typeは [New data record]を選択し保存します。
New data recordを使用することで、新しいデータレコードを登録することが可能になります。
以上でODATAにデータを引き渡す設定が完了しました。
3) 入力フォーム作成①（Input Field）
データの定義が完了しましたので、次にページ側（画面側）でどのようにデータを表示するかの設定を行っていきます。
左側のLISTSの一覧から[ Input field ]を選択し、画面にドラッグアンドドロップで配置ます。
右側のプロパティで、まず[ Label ] にタイトルを入力します。
次に、入力した内容を入れる箱（変数）を指定するため、[ Value ] のアイコンをクリックします。
下図を参考に、先ほど設定したData variableの定義を選択します。
使用したい箱（変数）を指定します。下図ではユーザー名を指定したいので、
[ UserName ] を選択し、プレビュー表示も[ User Name ]としました。
[SAVE]ボタンをクリックし保存します。
同様の手順で問合せ内容を入力するフォームを作成します。
以上でInput Fieldを使用した入力フォームの設定は完了です。
4) 入力フォーム作成②（Dropdown Field）
左側のLISTSの一覧から[ Dropdown field ]を選択し、画面にドラッグアンドドロップで配置します。
右側のプロパティで、まず[ Label text ]にタイトルを入力します。
次に、ドロップダウンで選択する項目を設定するため[ Option list ] のアイコンをクリックします。
[ List of values ]を選択し、任意の項目を設定します。
下図の右側の画面で、表示名（label）と実際の値（value）を入力します。
更に項目を追加したい場合は [ Add another value ]をクリックして追加します。
追加が完了しましたら[ SAVE ]ボタンをクリックします。
次に、入力した内容を入れる箱（変数）を指定するため、[ Selected value ] のアイコンをクリックします。
下図を参考に、Data variableに設定した定義を選択します。
今回はカテゴリーを指定したいため[Category]を選択し、[SAVE]ボタンをクリックし保存します。
5) データ送信設定（データのセット）
問合せ画面にて、入力フォームに入力したデータを送信するための[送信]ボタンを作成します。
左側のLISTSの一覧から[ Button ]を選択し、画面にドラッグアンドドロップで配置ます。
右側のプロパティで、まずLabel にタイトルを入力します。
次にボタンをクリックした際の動作を設定していきます。
画面下の [ Show logic for <BUTTON名> ]をクリックします。
ロジックを編集するキャンバスが開きます。最終的には以下の形になるよう設定していきます。
このロジックが実行されるきっかけは [ EVENT : Component tap ] とあるように、ボタンをタップした時です。
左側のメニューから[Set data variable]を選択しキャンバスにドラッグアンドドロップします。
また、マウス操作で[ EVENT : Component tap ]から紐づけます。
Data variable nameの設定
キャンバス上の[Set data variable]を選択した状態で、右側のメニューから下の赤枠を選択します。
以下のとおりData variableを選択します。以下の例では[QandA21]を選択しています。
Record propertiesの設定
データ登録するレコードの設定（マッピング）を行っていきます。
右側のメニューから[Record properties]のアイコンを選択し、[Object with properties]を選択します。
以下の画面では、各項目に対し格納したい値を設定します。
今回は以下の条件としています。
・ID ： 送信ボタンをクリックした時の現在時刻(e.g. 2022-06-17T05:11:08.720Z )が自動入力されるよう設定
・Answer, Status ： テキスト形式で「<<未回答>>」と入力（AppGyverからデータを引き渡さない項目）
・その他 ： AppGyverのアプリ上で入力されたデータ（Data variableに登録されたデータ）を紐づける
以下の画面では、IDに対する値をFomulaで設定する手順について紹介します。
FomulaはAppGyverで使用できる関数です。
Fomulaで指定できる関数は以下の画面のようにメニューから選んで指定することができます。
今回は、現在時刻を取得したいため、[NOW()]関数を使用しています。
上記までの設定で、バックエンドシステムへ登録したいデータの準備が完了しました。
6) データ送信設定（バックエンドシステムへのデータ登録）
バックエンドシステムへデータ登録する処理を設定します。
左側のメニューから[Create record]を選択しキャンバスにドラッグアンドドロップします。
また、先ほど作成した[ Set data variable ]にマウス操作で紐づけます。
Resource nameの設定
キャンバス上の[Create record]を選択した状態で、右側のメニューから下の赤枠を選択します。
以下のとおりData variableを選択します。以下の例では[QandA2]を選択しています。
Recordの設定
右側のメニューから[Record]のアイコンをクリックします。
登録するデータの[Data variable]を選択し、保存します。
7) データ送信設定（ポップアップメッセージの設定）
データ登録が完了したら「送信が完了しました」というメッセージを表示させます。
左側のメニューから[Alert]を選択しキャンバスにドラッグアンドドロップします。
また、先ほど作成した[ Create record ]にマウス操作で紐づけます。
キャンバス上の[Alert]を選択した状態で、右側のメニューの[Dialog title]に[送信が完了しました]と入力します。
8) 保存
これまで実施した設定を保存します。
以上で設定は完了です。スマホのSAP AppGyver Previewを使用して動作をご確認ください。
５．終わりに
本ブログでは、SAP AppGyverで問合せ内容を入力し、SAP HANA Cloud上のテーブルへデータ登録する設定について記載しました。
長文となりましたが、ご覧いただきありがとうございました。
手探りで手順を調査したり、トライアンドエラーで設定を行いましたので、
より良い手順や不備があるかもしれません。
もし何かお気づきの点がございましたら、お気軽にコメント欄に記載をお願いいたします。
