0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[OutSystems 11]Reactive Web Appの画面にコメントを配置できるForgeコンポーネント

Posted at

Traditional Webでは、Web Screen/Block上に直接Commentを配置できた。
(Action Flowにコメントを残すのと同じイメージでUI上にコメントできた)

Reactive Web App/Mobile Appではできなかったのだが、この部分を補うForgeコンポーネントがあったので動作を確認する。

評価結果

基本的にはTraditional WebのUI上のCommentと同様に使える。
ただし、先頭を「TODO」にしてもReminderにはならない。
また、自動的に削除される(BlockのOnReadyについて述べた、この記事の最後の部分を参照)が一時的に空のDOM要素は配置されてしまう。

環境情報

Service Studio (Version 11.55.34)
Service Studio Comments (Version 1.0.0)

Screen上のコメント機能の用途

文字通りにUIにコメントを残す

複雑であったり意図を掴みにくいAction Flowにコメントを残すのと同じく、UIの複雑であったり意図を掴みにくい部分にコメントを残す。

保守性向上のため。

テンプレートやサンプル実装上のTODOリスト

開発者のために、テンプレート(Screen TemplateやCustom Application Template)やサンプル実装を提供することがある。

提供したテンプレートやサンプルは、各開発チームで要件に合わせた修正をするが、修正すべき場所を示すTODOリストを用意することがある。
そのTODOリストとして、Action Flow上のCommentや、(Traditional Webの頃の)UI上のCommentのIs Reminder=Trueにすると、TODOとしてIDEのTrueChangeタブに表示され、便利だった。

コンポーネントの使い方

と言っても、コンポーネントが提供するBlockを画面に配置し、Placeholderにコメントを書くだけだが。
操作例として、Bulk actions with filters Templateで作成した画面を利用する。

コンポーネントが提供するBlock

以下の3つ。構造は皆同じで色が違うだけ。
image.png

配置例

Traditional Webの頃の、UI上に配置するCommentと基本的には同じ使い方。
ただし、Platformが提供するCommentではないので当然だが、先頭に「TODO:」のように入力してもReminderにはならない。
image.png

実行時の動作 → このBlockはService Studio上でだけ見え、実行時には見えない(DOM要素も配置されない)

配置例の画面をブラウザで表示したところ。配置したGreen|Red|YellowCommentは表示されない。
image.png

次に、ブラウザの開発者ツールでこのページのDOM構造を確認してみる。
分かりやすく、RedCommentを配置したTitle部分。視覚的に見えないだけでなく、そもそもDOM要素が追加されていないことがわかる。
image.png

仕組みの確認

Widget Treeで確認 → Ifで実行時には表示されない仕組み

Conditionが固定でFalseのIfがあり、そのTrue Branch内にService Studio上で表示したいUI要素を配置している。そのため、実行時にはPlaceholder Commentに配置した要素は表示されない。
image.png

ではなぜService Studio上では表示されるのか。

デザイナー上でIfを選択すると、以下のように3つの○が表示され、そのうちの1つを選択できる。

左から順にTrue・False Branch両方表示する、True Branchのみ表示する、False Branchのみ表示する、であり、コンポーネント上では真ん中が選択されているため。
image.png

OnReadyのJSは必要か?

各BlockのOnReadyイベントで以下のJavaScriptが動き、Blockのルート要素(CommentRoot)の親となるDOM要素を削除している。

var commentRoot = document.getElementById($parameters.WidgetId);

if(commentRoot){
    commentRoot.parentElement.remove();
}

Ifで不要な要素を非表示にしているが、Blockの配置場所に親DOM要素が置かれるため、想定外の動作を避けるために削除しているものと思われる。

念の為、Blockを手元のモジュールにコピーし、OnReadyを削除してから画面に配置してみた。仮説通り、JavaScriptを動かさないと無駄なDOM要素ができてしまうようだ。
(↓の選択部分)
image.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?