ProgressIndicator 90%가 state 고정 — 포매터로 해결 #shorts #SAP #UI5

ProgressIndicator란?

SAP UI5의 sap.m.ProgressIndicator는 작업 진행률을 %로 시각화하는 컨트롤입니다. 파일 업로드, 온보딩 단계, 예산 소진율처럼 수치로 표현 가능한 상태에 바로 사용할 수 있습니다.

XML 선언 — 3줄이면 충분

<ProgressIndicator
  percentValue="{/progress}"
  displayValue="{/progress}%"
  showValue="true"
  state="None" />

percentValue에 모델의 숫자 프로퍼티를 바인딩하면 끝입니다. showValue="true"를 추가하면 바 안에 % 텍스트가 표시됩니다.

ValueState로 색상 자동 전환

진행률에 따라 색상을 바꾸려면 포매터 함수를 만듭니다.

// Controller.js
getState: function(val) {
  if (val >= 80) return "Success";  // 초록
  if (val >= 40) return "Warning";  // 노랑
  return "Error";                   // 빨강
}

XML에서 바인딩합니다.

state="{path: '/progress', formatter: '.getState'}"

핵심 한 줄

percentValue 바인딩 + ValueState 포매터 조합으로, % 수치 하나가 색상까지 제어합니다.