Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

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

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列の背景色を赤にしてみます。
qConditionalStyling1.png

設定

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

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を設定するといいと思います。

動作イメージ

qConditionalStyling2.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?