OutSystems UI 2.17.0の新機能を試す

環境情報

Personal Environment(Version 11.23.0 (Build 39357))
Service Studio(Version 11.54.25)
OutSystems UI(Version 2.17.0)

Forum上のアナウンスメント：New OutSystems UI v2.17.0 with new components

サンプル

HousesoftSampleReactiveのVersion 1.0.23、OutSystemsUIV2_17_0 Screenを参照

注意事項（Known Issues）

このバージョンにはKnown Issuesが2つあるので注意。以下に挙げた機能を現状使っているなら、2.18.0を待った方がいいかもしれない。回避策（Workaround）も提供されているので、検証の上で使う選択もあり得る。

• Dropdown SearchとDropdown Tags (ROU-4510)
• InputWithIcon (ROU-4540)

OverflowMenu Pattern追加：デフォルト非表示、アイコンクリックで表示されるメニュー

使い方

OutSystemsUIにあるUI Flows/Navigation/OverflowMenuへの参照を追加する。
また、必須ではないが、今回の検証のために、ShapeとFloatingPosition Static Entityへの参照も追加しておく。

基本的な使い方：

1. OverflowMenuを画面上に配置（デフォルトではIconのみが表示されるので、Iconを表示したい場所に）
2. Menu Placeholder > nav HTML Elementの下にメニューを配置（下の例ではデフォルトのリンクから不要なものを2つ削除した状態）
   

これだけ。
動作例：アイコンをクリックすると、Menu Placeholder内のUIが表示される

Input Parameter（Menuの表示位置と枠の形を指定する）

OverflowMenuには2つのInput Parameterがある。

BalloonShape：アイコンクリック時に表示されるMenuの枠の形

OutSystemsUI/Shape Static EntityのIdentifierを指定する。
デフォルトはSoftRounded（Menuの四隅が少しだけ丸く欠ける）。

以下は、Roundedを指定した場合の例。

BalloonPosition：アイコンクリック時に表示されるMenuの枠が、アイコンを起点にどの位置に表示されるか

OutSystemsUI/FloatingPosition Static EntityのIdentifierを指定する。
デフォルトはAuto。画面内のアイコンの位置を見て適当に表示位置を調整する設定。

以下は、BottomEndを指定した場合の例。

OverflowMenuOpen/Close Action

名前通りOverflowMenuを指定して、Menuを表示させる、あるいは非表示にさせるAction。
Input ParameterとしてWidgetIdがあるので、OverflowMenuのIdプロパティを設定する（OverflowMenu PatternのNameプロパティを設定しておく必要がある）。

設定例：

なお、存在しないIdを指定すると、以下のように「OSUI-API-30004（OverflowMenuOpen Actionの場合）」か「OSUI-API-30005（Close Actionの場合）」がOutputParameterのErrorMessage.Codeに設定される。

OverflowMenuEnable/Disable Action

こちらはOverflowMenuを非アクティブ状態にしたり、それを戻すためのAction。
非活性にすると、以下のようにアイコンが灰色になるようだ。クリックしてもMenuは開かなくなる。またOverflowMenuOpen Actionでも開かなくなる。

Video Pattern変更：新しいアーキテクチャのVideoが追加され、既存の同名パターンはDEPRECATED_Videoへ

字幕機能の追加

Video PatternのInput ParameterにCaptionsが追加された。

Captionsに適切な値を設定すると、動画上に字幕を表示できる。

• LanguageCode: 字幕の言語を示すコード("en"など）
• SourceFile: 試してみたところ、Web Video Text Tracks Format (WebVTT)のフォーマットに従って開始から何秒の位置にどの文字列を表示するか、を指定すれば良さそう。日本語はUTF-8で保存しないと文字化けした
• Label: 実行時にプレーヤー右下のコントロール上に表示される、「今どの言語の字幕を表示しているか」を表す文字列

Labelは字幕選択の時にも使われる。

簡単に動作確認するなら

1. モジュールのResourcesにWebVTT形式のファイルをImport (拡張子はtxtにしておくと、確実にダウンロードできる）
2. ImportしたファイルのDeploy Actionを「Deploy to TargetDirectory」に設定
3. VideoのCaptionsを展開し、Language="ja"、SourceFileはImportしたファイルのRuntime Pathの値をコピー、Label="日本語"のように設定する

以下は、WebVTTファイルの例（開始から1秒～4秒の間「テストキャプション1.」５秒～9秒の間は2行のテキストが字幕に表示される）

WEBVTT

00:01.000 --> 00:04.000
- テストキャプション1.

00:05.000 --> 00:09.000
- テストキャプション2.
- テストキャプション3.

Eventが追加されている

Initialized Event

文字通りVideo Patternが初期化されたときに動作する。
URLが初期指定されていないときも、画面ロード後ぐらいのタイミングで発生した。
なお、次のEvent StateChangedのUnstartedはInitializedより前に発生した。

StateChanged Event

Videoの4つの状態が切り替わるごとに発生する。

• Unstarted: Initializeより前に発生する様子
• Playing: 再生中を示す
• Paused: 再生開始後、停止させると発生
• Ended: 最後まで再生すると発生

これらの状態は、OutSystems UI内のStatic Entity VideoStateで定義されている。このStatic EntityはPublicではないが、State (Identifier) のみのStatic Entityなので問題はなさそう。

Actionが追加されている

VideoGetState Action

StateChangedで渡ってくるのと同じ値を取得するAction。
現在の状態を返す。

VideoJumpToTime Action

Input Parameterで時間を指定（Time型）し、その時間まで動画を移動させる。

メモ：画面表示後にURLを設定する

どうも、Video Patternが表示された後にInput ParameterのURLの値を変えても、動画データを取得しに行ってくれないらしい。
JavaScript要素でvideoタグのオブジェクトを取得し、そのload関数を呼ぶと、URL先の動画を取得しに行ってくれる。以下の例では、JavaScript要素のInput Parameter VideoWidgetIdに、Screen上のVideo PatternのIdを渡すようにしている。Video PatternからとれるId属性はvideoタグを囲むdivタグに対応しているため、div内のvideoを取るロジックになっている。

let videoDiv = document.getElementById($parameters.VideoWidgetId);
if (videoDiv) videoDiv.querySelector("video").load();

ShowPassword Action変更

ShowPasswordの新バージョンが追加され（以前のものはDEPRECATED_を付けたうえで残っている）、Input ParameterにWidgetIdが増えた。

つまり、以下のようにInput Type=PasswordのInputが2つあるとき、

上のInputのIdをパラメータにしてShowPasswordを呼ぶと、対象のInputだけ入力した文字列がマスクされずに表示される。

なお、同じActionをもう一度呼ぶと、再びマスクされる。

その他

いくつかのPatternにAccessibility改善が入っている。Screen Readerで読み上げなくてよい要素を読み上げないようになった、とか。
OutSystems UIモジュール内で以下の背景を黄色にした言語がMultilingual Locales対応になった。