Traditional WebのWidgetに動的にクラスを適用する

Version 11環境のTraditional Webでの実現方法を検討。

確認環境

Personal Environment(Version 11.9.0 (Build 16900))
Service Studio(Version 11.8.4)

以下で示す実装例では、特定の条件を満たすときだけ、以下のクラスを適用してみます。

.Button-on {
    font-weight: bold;
    font-size: 24px;
    background-color: #f00;
}

If Widgetを利用する方法

分岐がシンプルな場合に使うパターンです。

実装方法

If WidgetのConditionに分岐条件を設定し、True側に「あるクラスを設定したWidget」、False側には、「また違うクラスを設定したWidget」を配置しておきます。

式を使わないので、切り替えを行っていることが保守担当者にも比較的わかりやすいので、可能な場合はこの方法が良いと思います。

実装例

If WidgetのConditionにToggleButtonに紐付けたローカル変数を設定。

Toggle ButtonがONのときに表示するButton (クラス名は、Style Classesプロパティに半角スペース区切りで複数設定できる）

OFFのときに表示するButton

実行例（表示するのはIfのTrue/Falseの一方のみ）

Extended Propertiesを使う方法

クラス名を式で書ける方法です。
柔軟な記述ができますが、式の記述は保守担当者に見落とされがちなので気を付ける必要があります。

実装方法

WidgetのExtended Properties (プロパティエディタの一番下）に記述します。
Widgetがブラウザに表示されるときにはHTMLのタグに変換されますが、そのタグの属性を任意に指定できるプロパティです。

Propertyにclass、Valueに特定の条件式で出力を変更するIf文を記述。
OutSystemsの式としてclass属性に指定する値を書けるため、だいたいどんな条件でも書けます。

実装例

IsOnというBoolean型変数の値がTrueのときに、classに「Button」「Button-on」クラスを付与し、Falseのときに「Button」のみを付与する例。

If(IsOn, "Button Button-on", "Button")

実行例（HTMLタグ）

JavaScriptを利用する方法

好きなロジックを書けますが、Low-Codeらしさが活かせないのと、保守担当者にJavaScriptの知識も要求してしまうので避けたい方法。
Traditional Webであれば、jQueryが組み込まれているため、これを使うのが簡単ですね。

この例では、ButtonのJavaScriptのクリックイベントをExtended Properties「onclick」で拾って、クリックしたButton自身にclassを追加しています。
最後の「return false;」は本来のイベント処理を中止（PreparationやScreen Actionが動かないように）しています。

もし、他のWidgetを操作したいときは、WidgetのIdプロパティでHTML上でのid属性が取得できるのでこれを利用してください（Nameプロパティを設定する必要あり）。

また、Server ActionからJavaScriptを動かしたいときは、RunJavaScript Action (HTTPRequestHandler) が使えます。