サポート > リポジトリ > 出力制御(スタイル) > CSSクラス名・スタイルの指定
ja | en

CSSクラス名やスタイルを指定することができます。条件によって適用するスタイルを変えることもできます。

この設定は通常、使いません。開発者によるカスタマイズで独自の CSS 設定を追加した際、そのクラス名を設定することで(値部分に)反映させるための設定欄です。

「顧客名称」項目の色を緑にした例を示します。

図1 実行例

設定

「氏名」項目の詳細定義を開きます。「出力制御>詳細画面>スタイルの指定」を次のように指定します。

color:green
図2 スタイルの設定

この設定は詳細表示画面で有効になります。一覧表示画面、検索画面もそれぞれ設定できます。

CSS の詳細については各種 Web Site における解説や、参考書をお読みください。

「氏名」項目のフォントサイズを 14 ポイントとし、かつ、色を赤にした例を示します。

図3 実行例

設定

「氏名」項目の詳細定義を開きます。「出力制御>詳細画面>スタイルの指定」を次のように指定します。

font-size:14pt; color:#F00;
図4 スタイルの設定

この設定は詳細表示画面で有効になります。

CSS の詳細については各種 Web Site における解説や、参考書をお読みください。

ラジオボタンやチェックボックスを格納する div 要素へのスタイルを指定することができます。図5では、高さを150pxとし、スクロールバーを用意する設定を行なった例です。

図5 div 要素へのスタイル指定の例

設定方法

モデル項目の「出力制御 > 詳細画面の設定 > スタイルの設定」に次のように div{..} で囲って記述します。

div{height:150px;overflow-y:scroll;}
図6 スタイルの指定

他の設定との併用

div {...} 設定のあとに、続けて色の指定など、他のスタイルを指定することができます。div {...} で囲まれていないスタイルは、チェックボックス本体に適用されます。

正確には、チェックボックスを囲う span 要素にスタイルが適用されます。

次の例は文字色を赤とした例です。

div{height:150px;overflow-y:scroll;} color:red
図7 div要素とspan要素の両方を設定する

登録・更新画面への設定

「入力制御 > 入力欄のスタイル指定」をお読みください。

文字色、背景色の指定

一覧表示のラベル、値部に文字色と背景色などのスタイルを指定することができます。

図8 一覧表示のラベル、値部に文字色と背景色を指定した

「出力制御 > 一覧画面 > スタイル」に CSS を指定します。この例では次の指定を行なっています。

color:white;background-color:blue
図9 出力制御 > 一覧画面 > スタイル

一覧表示項目の折り返し幅を指定する

Wagbyは標準で「空白文字があればそこで改行する」ようになっています。そのため、表示する列の内容に空白がない場合、折り返しが効きません。

この場合は「出力制御 > 一覧画面 >スタイル」の「スタイルの指定」設定に

max-width:50px

などと設定してください。単語の区切り(空白文字)がないデータについても指定幅で折り返されるようになります。

式と関数

値部分のスタイル指定には、IF 条件式を用いることができます。次の例は tyuui 項目の値が 0 の場合にスタイルを適用するというものです。

IF(${tyuui}==0,"font-size:14pt; color:#F00","")

モデル項目名(英語)は "${" と "}" で囲みます。また指定する CSS はダブルクォーテーション ("") で囲みます。

モデル参照項目への適用

モデル参照項目の場合は「ID 部」を使うか「内容部」を使うかで、記述式が異なります。 記述方法の詳細は「計算式 > モデル参照」をお読み下さい。

次の例は、productname 項目(モデル参照)の「内容部」で判定しています。

IF(EXACT(${productname#content},"MSX-001"),"font-size:14pt; color:#F00","")

文字列内容の一致判定は EXACT 関数を用います。

繰り返しコンテナ項目への適用

式中に繰り返しコンテナ項目を使うこともできます。

IF(EXACT(${report/pcon#content},"SR003"),"font-size:14pt; color:#F00","")
  • 一覧表示画面のラベル部分、値部分の CSS はグリッド形式表示では利用できません。
  • 条件によってスタイルを変更する設定は、値部分のみで利用できます。ラベル部分の設定では式を含めないようにしてください。

詳細画面のスタイル(ラベル)はpresentation/displayitem/@labelstyleForShowです。

一覧画面のスタイル(ラベル)はpresentation/displayitem/@labelstyleForShowListです。

検索画面のスタイル(ラベル)はpresentation/displayitem/@labelstyleForSearchです。

詳細画面のスタイル(値)はpresentation/displayitem/@styleです。

一覧画面のスタイル(値)はpresentation/displayitem/@styleForShowListです。