フィールドの背景色を変更

4339 ワード
ServiceNow ServiceNow開発メモ ServiceNow テキストリンク

概要

フォーム及びリストのフィールドの背景色を変更する

フォーム・フィールドの背景色を変える

フォームでの背景色を変更する場合は「フィールドスタイル」を定義します。但し、固定色にか設定することはできません。条件により背景色を変更するにはスクリプトを使います。
例えば次はインシデントの「影響」が高いレコードをハイライトする手順です：
1. インシデントのレコードを開きラベル「影響」を右クリック（フィールドではラベルを右クリック）
2. 「スタイルを構成」を選択します
3. 「新規」ボタンを押下
4. スタイルにCSSを入力する。
例：background-color:red;
5. 「送信」ボタンを押下
6.フィールド「影響」の背景色は赤になります

リスト・セルの背景色を変更する

リスト・セルの設定を行うとフォームフィールドの背景色は無効になります。リストとフォームの両方の背景色を変える場合はリストはフィールドスタイルを使い、フォームはスクリプトで変えます。
1. リストのセルに色をつけるには「フォーム・フィールドの背景色を変える」と同じ手順でフィールドスタイルを設定します。リストセルの色を設定する場合は値フィールドの条件を設定します。次の例では影響が高い（=1）の場合に色を設定する指定です。
2. リストで当該セルの値の右に赤い点が表示されます。

スクリプトによる背景色の変更

クライアントスクリプトでフィールドを指定します。ただし、UIのみでのサポートです。ポータルはgetControl()メソッドが対応していないため次のスクリプトで背景色は変更されません。
基本的には.getControl(＜フィールド名＞).style.backgroundColor=＜色＞;で背景色を変更します。
しかし、reference型及びmasked型のフィールドの場合は.getDisplayBox()を使います。
また、HTML型は第三者ライブラリを利用しているため、背景色など変更は未サポートです。

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }

    if (newValue == 'error') {
        g_form.getControl('text_field').style.backgroundColor = 'maroon';
        g_form.getDisplayBox('reference_field').style.backgroundColor = '#6495ED';
        g_form.getControl('check_box_field').style.backgroundColor = '#DC143C';
        g_form.getControl('date_field').style.backgroundColor = '#9400D3';
        g_form.getControl('email_field').style.backgroundColor = '#FF69B4';

        g_form.getControl('html_field').style.backgroundColor = 'blue';

        g_form.getControl('ip_address_field').style.backgroundColor = '#4B0082';
        g_form.getControl('label_field').style.backgroundColor = '#4B0082';
        g_form.getControl('label_field').style.color = '#ADD8E6';
        g_form.getControl('list_collector_field').style.backgroundColor = '#F0E68C';
        g_form.getControl('lookup_multiple_choice_field').style.backgroundColor = '#FFB6C1';
        g_form.getControl('lookup_select_box_field').style.backgroundColor = '#20B2AA';
        //g_form.getControl('masked_field').style.backgroundColor = '#BA55D3';
        g_form.getDisplayBox('masked_field').style.backgroundColor = '#BA55D3';

        g_form.getControl('multiline_text_field').style.backgroundColor = '#7B68EE';
        g_form.getControl('multiple_choice_field').style.backgroundColor = '#9370DB';
        g_form.getControl('numeric_scale_field').style.backgroundColor = '#3CB371';
        g_form.getControl('select_box_field').style.backgroundColor = '#808000';
        g_form.getControl('wide_single_line_text_field').style.backgroundColor = '#DA70D6';
        g_form.getControl('yes_no_field').style.backgroundColor = '#4B0082';
    }
}


以上