More than 5 years have passed since last update.

OutSystemsのTableRecordsで、行のデータによって特定列の見栄えを変える

Posted at 2019-11-21

TableRecordsで、Source Record Listに紐づけたデータの値によって色を付ける方法です。
注意すべきポイントをユーザに分かりやすくするということですね。
以下の方法では、CSSで実現するため、別のスタイルを当てる(フォントサイズを大きくするなど)ことも可能。

サンプル

Forgeコンポーネント：https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=7064
ConditionalStyling Screenを参照してください。

Personal Environment(Version 11.0.606.0)
Service Studio(Version 11.6.9)

Traditional Web。

組み込みのScreen Templateを使って作った以下の画面を対象に。
PriorityはStatic EntityでLowとHighの値があります。この値がHighの行のRequest Name列の背景色を赤にしてみます。

TableRecordsは、配置すると(HTMLのTableタグのように)行に相当するWidgetとCellに相当するWidgetがあります。
今回は、特定列だけ色を付けたいので、色を付けるRequest Name列のCellに注目。

Cellには、Extended Propertiesというプロパティがあります。このプロパティはHTMLに出力されるときの属性を指定できるものです。また、値の部分にはOutSystemsの式が書けます。

そこで、style属性を以下の値で書きました。
If(Table.List.Current.Sample_Request.Priority = Entities.Sample_Priority.High, "background-color: red", "")

TableRecordsのSource Record List(Table.List)の対象行(.Current)のPriorityがHighであれば、背景色赤を指定しています。

同じ設定を複数の場所で使う場合は、Style Sheet Editor(Servive Studioの上の方にあるCSSアイコンで開く)で、テーマか画面にclassを書いておき、Extended Propertiesではstyleの代わりにclassを設定するといいと思います。