OutSystems UIを利用して、特定の要求を叶えるUIを実装する設計手順の紹介を兼ねて。

環境情報

ODC Studio(Version 1.4.33)

実現する要求事項

画面から呼び出す処理が5つあり、それぞれが時間のかかる処理であるとする。
そのため、今どこまで処理が進んでいるか、あと幾つの処理が残っているかをユーザーが把握できるようにしたい。

OutSytems UIに使えるパターンがないか探す

どんな機能であっても、既存で使用できる部品があるときはそれを使うようにしたい。
OutSystemsでUI部品が欲しいときは、

環境に付属するWidget
OutSystems UI
各企業やプロジェクトが提供する共通部品
Forge

と探し、見つからないときに自分で作成することを検討する。

OutSystems UIには動作するドキュメントとして、OutSystems UI Style Guide Previewがある（OutSystems UIはOutSystems 11とODCで足並みを揃えてバージョンアップされているようなので、どちらであるかを気にする必要はあまりない）。
ForgeのページからリンクされているStyle Guide > UI Patternsでインターネット上でも確認できる。

ここでそれらしいPattern（OutSystems UIでいうUI部品のこと）として、以下の2つが候補に挙げられる。

Progress Baar：いわゆるプログレスバー
Progress Circle：円グラフで進捗を表す、%で進捗を示したいときに向いている

リンクを開くと、実際に動作するサンプルも確認できる。
Progress Barの方が要求事項に合いそうなので、こちらを選択する。

使い方を確認する

ドキュメントを確認

名前で検索すると、ドキュメントが見つかる。
Progress Bar - OutSystems 11 ドキュメンテーション

ドキュメントをみる場合には、先頭にある対象アプリケーション種類（Reactive Web App/Mobile App/Traditional Web) を確認しておくのが重要。
（今でもTraditional Web向けの同名部品のドキュメントがヒットするため）

（この部品のドキュメントは詳細な手順が載っていたので、これをフォローするだけで使えそう）

対象要素をODC Studio上で確認

知らない部品を使うときには、とりあえず最低限の実装をして動作確認　→　仕様を満たさない部分について解決策を探す、という順で取り組むとやりやすい。

ProgressBar Block。必須のプロパティはProgressのみ。

Description (Progress percentage. Usually a number (integer) between 0 and 100. You can also use functions and local variables.)によると、「進捗を0-100のパーセントで指定」すればよさそう。

OutSystems UIの部品については、Client Actionが提供されていることがあるのでそちらも一応チェックする。
フォルダ名からすると、Progressフォルダに入っている下のスクリーンショットの赤枠部分が該当する。残りの2つはProgress Circle用のもののようだ。

名前で大体何ができそうかは当たりが付く。
まずは、最低限の設定を入れてPatternを画面に配置して試し、必要そうだったらこのActionに戻ってきて検討することにしよう（この記事の範囲では、Actionを使わなくてもやりたいことが実現できたのでこれ以上の検討はしない）。

最低限の実装を行なってみる

Screen上にProgressBarを配置し、Progressだけ設定してみる。
一旦機能確認するのが目的なので、固定値40（%）を設定。

実行時のイメージ。特にこだわりはないのでこの見た目でも十分だが、進捗を示す線が少し細い気がするので、調整する。

線の幅を調整

BlockのInput Parameterを眺めてみると、Thicknessというそれっぽいのが見つかる。
Description（Sets the height of the ProgressBar, in pixels. By default, the thickness is "12".）によると、「PgoressBarの高さをピクセルで指定する。デフォルトは12」ということなので、このパラメータに設定すればよさそう。

試しに、1/3拡大した16を設定してみた。

この時のイメージ。

このように、Blockの使い方を調べるときに、

Input Parameterのリストを眺めて
名前で当たりをつけ
Descriptionと型から用途と使い方を判断
試しに設定してみる

という手順で調査することが多い。

それでもわからなければ、Placeholderにどんなものがあるか、操作用のActionが提供されていないか、と調べていくと良い。また、部品そのものの実装を調べてみるのも良い（OutSystems UIならCloneして調べることになる）。

要求事項を実装する

やりたいことは、5つの通信からなる一連の処理の進行状況をプログレスバーで表示すること。
簡単のために、各通信はそれぞれServer Actionであり、かかる時間は同程度であるとする。

その場合、
現在の進行状況をInteger型のカウンタ（仮にCurrentStepという名前のLocal Variableとする）で表す。
あるServer Actionの実行が終わったら1つカウントアップして、次のServer Action実行に移る
　→5回のServer Action呼び出しが終わるまで繰り返す
今どこまで処理が進んだかを%に換算した値をProgressに設定する。

という実装をとることで実現できる。