スクリプトを使ったCSSの指定

最終更新日: 2023年4月11日

設定方法

モデル項目の値によって、出力するスタイルを変更することができます。ここでは案件管理モデルの「確度」という項目の値によって、文字の色を変更する例を説明します。

はじめに、スクリプトのタイプに「スタイル」を指定します。

スクリプトのタイプにスタイルを指定する

"+" ボタンをクリックして、新しいスタイル設定を行います。

スクリプトを追加する

標準の名前を変更します。ここでは "確度による強調" という名前にします。

スクリプト名を設定する(2)
スクリプト名を設定する(2)

ブロックを組み立てます。はじめに、案件管理モデルの確度という値が80パーセント以上なら...という条件ブロックを用意しました。

条件ブロックを用意する

文ブロック群から「...を返す」ブロックを選びます。

...を返すブロック

条件に合致した時に出力したいCSSを、文字列ブロックの中に記述します。ここでは "color:red;font-weight:bold;font-size:120%;" としています。

出力したいCSSを設定する

さらに条件を追加することもできます。

そうでなくもし

60パーセント以上なら、という条件を追加した例です。

CSS出力ブロックの例

スクリプトを指定する

スクリプトを適用したい項目の、詳細定義ダイアログを開きます。「出力制御>詳細画面>スタイル>値」に、用意したスタイルを指定します。

用意したスタイルを利用する

動作例

ビルド後に動作を確認します。値によってスタイルが変更されています。

値によってスタイルが変更されている

登録・更新画面にスタイルを適用する場合

モデル項目の詳細定義を開きます。「入力制御 > スタイル」で、スクリプトを指定することができます。

スタイルスクリプト設定欄

画面ごとに細かくスクリプトを適用することも可能です。ここでは「全画面」に適用しています。
文字色を変更するCSSスタイルの場合、範囲は「入力欄のみ」とします。

適用範囲を指定する

画面を再描画する

登録画面と更新画面に条件つきスタイルを適用する場合には、「入力制御 > 共通 > 値変更時に画面を再描画する」を有効にしてください。

値変更時に画面を再描画する