필드의 배경색 변경

개요



양식 및 목록 필드의 배경색 변경

양식 필드의 배경색 변경



양식에서 배경색을 변경하려면 필드 스타일을 정의합니다. 단, 고정색으로 설정할 수 없습니다. 조건에 따라 배경색을 변경하려면 스크립트를 사용합니다.
예를 들어 다음은 인시던트의 "영향"이 높은 레코드를 강조 표시하는 단계입니다.
1. 인시던트 레코드를 열고 레이블 "영향"을 마우스 오른쪽 단추로 클릭 (필드에서 레이블을 마우스 오른쪽 단추로 클릭)
2. 스타일 구성을 선택합니다.
3. "새로 만들기"버튼을 누르십시오
4. 스타일에 CSS를 입력합니다. 예: background-color:red;
5. "보내기"버튼을 누르십시오.
6. 필드 ``영향''의 배경색은 빨간색입니다.


목록 셀의 배경색 변경



목록 셀을 설정하면 양식 필드의 배경색이 비활성화됩니다. 목록과 양식의 배경색을 모두 변경하는 경우 목록은 필드 스타일을 사용하고 양식은 스크립트로 변경합니다.
1. 목록의 셀을 채색하려면 양식 필드의 배경색 변경과 동일한 절차를 사용하여 필드 스타일을 설정합니다. 목록 셀의 색상을 설정하려면 값 필드의 조건을 설정합니다. 다음 예에서는 영향이 높은(=1)인 경우 색상을 설정하는 사양입니다.
2. 목록에서 해당 셀의 값 오른쪽에 빨간색 점이 표시됩니다.


스크립트로 배경색 변경



클라이언트 스크립트에서 필드를 지정합니다. 그러나 UI 전용 지원입니다. 포털은 getControl() 메소드가 대응하고 있지 않기 때문에 다음의 스크립트로 배경색은 변경되지 않습니다.
기본적으로는 .getControl(<필드명>).style.backgroundColor=<색>;로 배경색을 변경합니다.
그러나, reference형 및 masked형의 필드의 경우는 .getDisplayBox()를 사용합니다.
또, HTML형은 제3자 라이브러리를 이용하고 있기 때문에, 배경색등 변경은 미지원입니다.
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';
    }
}




이상

좋은 웹페이지 즐겨찾기