장식 슬라이더 구성

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 03월 12일
  • 소요 시간: 4분

    • 입력 양식 화면에서 숫자 입력에 대해 색상이 지정된 슬라이더 옵션을 생성합니다. 장식용 슬라이더에는 시각적 표현을 돕기 위해 특정 색상 및 레이블과 연결할 수 있는 섹션이 포함되어 있습니다. 이러한 레이블은 번역 가능합니다.

    시작하기 전에

    필요한 역할: 관리자

    이 작업에서는 숫자 입력에 대한 슬라이더 옵션을 추가하기 전에 입력 양식 화면의 기준이 이미 구성되어 있다고 가정합니다. 자세한 내용은 입력 양식 화면 구성 문서를 참조하십시오.

    이 태스크 정보

    슬라이더 렌더링 형식을 만드는 것은 다른 렌더링 형식(정수, 선, 백분율)보다 더 복잡합니다. 이 구성에는 여러 입력 속성 생성이 포함됩니다. 필수 속성은 최소값입니다. Max 및 StepSize. 숫자 슬라이더와 함께 사용할 수 있는 입력 속성의 전체 목록은 문서를 참조하십시오 번호 렌더링 유형 및 호환 가능한 입력 속성.

    슬라이더에 다채롭고 분할된 모양을 제공하는 데코레이션(Decoration)이라는 입력 속성을 추가해야 합니다. 장식 슬라이더에는 시작 값과 종료 값을 정의하는 2개에서 8개의 섹션이 있습니다. 시작 값은 이전 항목의 종료 값과 일치해야 합니다. 또한 각 섹션의 색상을 선택해야 합니다. 네 개의 정의된 섹션을 포함하는 JSON 예시 스크립트가 제공됩니다. 이 스크립트는 편집할 수 있습니다.

    사용자가 선택한 언어로 슬라이더를 볼 수 있도록 번역된 값을 추가하도록 장식용 슬라이더 유형을 구성할 때 옵션이 있습니다. 자세한 내용은 장식 슬라이더에 대해 번역된 값 구성 문서를 참조하십시오.
    주황색 영역에 마커가 있는 다채로운 장식 슬라이더로, 서비스 품질이 불량으로 표시되어 있습니다.

    프로시저

    1. 다음으로 이동 모두 > 시스템 모바일 > 모바일 앱 작성기.
      새 브라우저 탭에 모바일 앱 작성기가 열리고 애플리케이션 범위 선택 화면이 표시됩니다.
    2. 작업 중인 애플리케이션 범위를 검색한 다음 애플리케이션 범위의 이름을 선택합니다.
      모바일 앱 작성기 범주 홈 화면이 표시됩니다.
    3. 화면 범주를 선택한 다음 입력을 구성하려는 입력 양식 화면을 선택합니다.
    4. 양식의 입력 섹션까지 아래로 스크롤한 다음 수정할 입력을 선택하거나 새로 만들기를 선택하여 입력을 생성합니다.
      입력 양식이 나타납니다. 입력 구성에 대한 자세한 내용은 다음 문서를 참조하십시오 입력 양식 화면 구성 입력.
    5. 설정 영역 내의 입력 유형 필드에서 숫자를 선택합니다.
    6. 입력 속성 영역에서 새로 만들기를 선택합니다.
    7. 이름 필드에서 RenderType을 선택하고, 값 필드에서 슬라이더를 선택한 다음, 저장을 선택합니다.
    8. Min, Max 및 StepSize에 대한 입력 속성을 생성 및 저장하고 해당 값을 정의합니다.
      구성에 대한 자세한 내용은 다음 문서를 참조하십시오 숫자 입력에 대한 슬라이더 옵션 구성.
      주:
      RenderType, Min, Max 및 StepSize는 슬라이더에 필요한 입력 특성입니다. 다른 입력 속성은 선택 사항입니다. 입력 속성의 전체 목록은 항목 입력에 대한 입력 양식 화면 속성내의 Number inputs 섹션을 참조하십시오 .
    9. 입력 속성 영역에서 새로 만들기를 선택합니다.
    10. 이름 필드에서 데코레이션을 선택합니다.
      JSON 스크립트는 필요에 따라 편집할 수 있는 기본 스크립트와 함께 표시됩니다.
        "Range": [ 

    { 
      "Label": "Critically Low", 
      "StartValue": 0, 
      "EndValue": 10, 
      "Color": "#000000" 
    }, 
    { 
      "Label": "Low", 
      "StartValue": 10, 
      "EndValue": 50, 
      "Color": "Slider-2" 
    }, 
    { 
      "Label": "Medium", 
      "StartValue": 50, 
      "EndValue": 75, 
      "Color": "Slider-1" 
    }, 
    { 
      "Label": "High", 
      "StartValue": 75, 
      "EndValue": 100, 
      "Color": "Slider-0" 
    } 
  ] 
}
      이 예시 스크립트에는 슬라이더 내에 포함된 4개의 섹션이 나열되어 있습니다. 장식 슬라이더에는 2개에서 8개 사이의 섹션이 포함될 수 있습니다. 각 세그먼트에는 다음과 같은 값이 있습니다.
      • 레이블: 각 섹션에 부여된 이름입니다. 이 예에서는 매우 낮음, 낮음, 중간 및 높음입니다. 이름은 편집할 수 있습니다.
        주:
        레이블 값에 포함된 이름을 번역할 수 있습니다. 이렇게 하려면 레이블 값에 이중 중괄호를 추가해야 합니다. 예를 들어 Medium 은 {{Medium}}이 됩니다. 자세한 내용은 장식 슬라이더에 대해 번역된 값 구성 문서를 참조하십시오.
      • StartValue 및 EndValue: 모든 값이 될 수 있습니다. 일반적으로 이러한 값은 섹션 수로 나눌 수 있습니다. 한 섹션의 StartValue는 이전 섹션의 EndValue와 일치해야 합니다.
      • 색상: 색상 값은 16진수 코드 또는 현재 모바일 테마의 변수 레이블일 수 있습니다. JSON 스크립트는 다음과 같은 기본 색상을 제공합니다.
        • #000000은 녹색에 해당합니다.
        • 슬라이더-1 은 노란색에 해당합니다.
        • 슬라이더-2 는 주황색에 해당합니다.
        • 슬라이더-3 은 빨간색에 해당합니다.
        전체 변수 목록을 보려면 다음으로 이동하십시오. 모두 > sys_ux_style.list 을 클릭하고 Mobile Colors Default(모바일 색상 기본값)를 검색합니다.
    11. 저장을 선택합니다.

    다음에 수행할 작업

    슬라이더에 표시되는 각 텍스트 값에 번역된 텍스트를 추가할 수 있습니다. 자세한 내용은 장식 슬라이더에 대해 번역된 값 구성 문서를 참조하십시오.