みなさんこんにちは、OutSystems Lead Developer Community AdvocateのTaijiです。
OutSystemsアドベントカレンダー、最後の記事向けにOutSystemsで外部APIから取得したデータを、Tableウィジェットに表示させる方法を書いてみたいと思います。
はじめに
まず、なぜ今回この内容で記事を書こうと思ったかというと、私がとあるAPIの戻り値（配列型のJSONデータ）をOutSystemsで作成したアプリの画面にリスト表示させようと思った時に「あれ？これってあまり直感的に実装できなくない？初心者には分かりづらいよね？」と思ったからです。
一応、Tableウィジェットに関してのリファレンスはこちらにあります。で、これはOutSystemsに限らずローコードあるあるかもしれませんが、説明がプロパティやイベントだけなんですよね。そりゃそうなんですが。
いろいろなところのAPI Docsとかだと、だいたい主要な言語でのコーディング例が記載されていて、それをコピペして変更していくということができるのですが、ローコードでは基本ウィジェット配置して、プロパティを設定して、みたいな形になるのでコピペという概念が無いのです。
じゃあ、実際に同じことを試している人が何かしら手順をブログに書いてるだろうとググってみるも、基本すぎる内容だからか見当たらず。でも、こういう基本的な手順ほど初心者にはありがたいわけでして、じゃあ自分で実装した手順をブログにまとめておこうかしら、といった感じでございます。
また、OutSystensアドベントカレンダーの12/13にCDataの疋田さんが書いてくださっているTwitterのデータをリアルタイムで表示するアプリの記事の補助的な内容にもなっているかと思いますので、是非合わせてお読み下さい！
Tableウィジェットとは
Tableウィジェットとは、二次元配列のようなデータを表形式で画面に表示してくれるパーツになります。Visual Studio系で言えばData Grid Viewのようなものですね。
公式リファレンスによれば、
Tableウィジェットで作成されたテーブルでは、自動ページネーション、並べ替え、アトリビュートのドラッグによる列の追加を行うことができます。
このウィジェットは、リアクティブWebアプリで使用できます。
だそうです。
業務アプリ系では頻繁に使いそうなウィジェットじゃないですか！これはぜひ使い方をマスターしておきましょう！
外部API
まず、Tableウィジェットの実装を試すにあたり、配列データをなるべく入れ子で返してくるようなAPIを探しましょう。
この記事では、OutSystems User Group (OSUG)の表示データを返却してくれるAPIを使って試してみたいと思います。
APIのURLはこちらになります。https://usergroups.outsystems.com/api/event
ブラウザから呼び出すとこんな感じで結果が返ってきます。
めんどくさそうな感じで良いですねｗ
これを使いましょう！
OutSystems上の実装
まず、空の画面を作りましょう！
TableウィジェットのリファレンスにはリアクティブWebのみに対応してると書かれているので、リアクティブWebアプリをFrom Scratchで作成します。
ScreenもEmptyで配置しました。
Table ウィジェットを配置します。
LogicタブのIntegrations配下にあるRESTを右クリックしてConsume REST APIを選択します。Single Methodで追加しましょう。
先ほどブラウザから呼び出したAPIのURLを入力します。メソッドはGETでOKです。TESTボタンをクリックするとAPIが呼び出されて、Response test resultエリアに結果値が表示されます。
Copy to response bodyボタンをクリックすると、TestタブからBodyタブへ結果値が反映されます。確認したらFinishボタンをクリックして画面を閉じます。
LogicタブのREST配下にUsergroupsOutsystemsというAPIが追加されました。その下にはGetEventというメソッドとその結果値のアトリビュートが確認できます。
また、DataタブのStructures配下にもUsergroupsOutSystemsが追加されているのが確認できます。
Interfaceタブに移動し、MainFlowのScreen1にLocal Variableを作成します。
作成されたLocal Variable（デフォルトではVar1という名前）のプロパティでData Typeを設定します。プルダウンメニューから、GetEventResponseを選択して下さい。
InterfaceタブのVar1を展開し、City、Country、URLのそれぞれのアトリビュートをTable ウィジェット上にドラッグドロップすると、Tableに自動で列が追加されます。
ここではこの3つの項目を設定していますが、表示させたい項目を好きに選んで頂いて大丈夫です！
次に、APIを呼び出すトリガーを作成しましょう。ここでは、ボタンクリックでAPIを呼び出すようにします。
ScreenにButtonウィジェットを配置して下さい。場所はどこでも構いません。ボタンの表示文言はここでは「データ取得」としました。
配置したButtonウィジェットをダブルクリックして画面アクションを編集します。
アクションフローのStartとEndの間にLogicタブのGetEventをドラッグドロップしてください。
次に、GetEventとEndの間にAssignをドラッグドロップしてください。
作成されたAssignを選択し、プロパティに以下の値をそれぞれ設定します。
Variable: Var1
Value: GetEvent.Response
それぞれ、プルダウンから選ぶことができます。
設定が完了したらScreenビューへ戻ります。
この時点で、おそらく6つほどのエラーが発生していると思います。これは、Tableウィジェットでカラムヘッダにソート機能があるのですが、ここに割り当てられているアトリビュートが正しくないために発生しているエラーになります。これを正しいものに直していきましょう。
まず、各ヘッダを選択するのですが、オブジェクトが階層構造になっていますので、Header Cellを選択して下さい。
そうしたら、プロパティにSort Attributeという項目が現れますので、これを「Result.Chapter.XXX」から「Chapter.XXX」に選択し直してください。例えばCityであれば「Chapter.City」に直します。
ソート機能を無効にするのであれば、この値を削除してしまってもOKです。
すべてのヘッダにおいて修正が完了すると、エラーがすべて無くなり、1Click Publishボタン（緑色のボタン）がクリックできるようになっているはずです。
動作確認
では、動作確認してみましょう！
1Click Publishボタンをクリックして下さい。しばらくするとボタンが青色に変わりますのでクリックします。
ブラウザで作成したアプリが開きます。データ取得ボタンをクリックしてみましょう！
無事、呼び出したAPIの返却値から画面に設定した項目だけをTableウィジェットへ表示することができましたね！
まとめ
OutSystemsが初心者に少しむずかしい点の一つに、独自のお作法・考え方があることだと思います。
例えば今回だと、普通の感覚で行くとテーブルオブジェクトにREST APIのJSON返却値を、テーブルがサポートしてる型のオブジェクトにパースして渡せば表示してくれるような気がします。
しかし、OutSystemsでは、REST APIの結果は一旦Local Variableに格納する処理をActionとして作成します。一方でTable ウィジェットでは、そのLocal Variableをテーブルの項目として表示させるよう設定しておきます。
やってることは、同じかもしれませんが、OutSystemsを知らない人からしたらLocal Variableってなんやねん、という話になり直感的に作業できなくなってしまうのかもしれません。
今後も、このような「使い慣れた人には当たり前でも初心者にはわけわからん」的なTipsをブログに書いていこうと思います。
それでは楽しいOutSystemsライフを 👋
