formatter 없이 한 줄로 #shorts #SAP #UI5

UI5 Expression Binding — formatter 없이 동적 표현

SAP UI5에서 값을 표시할 때 별도의 formatter 함수를 컨트롤러에 작성하지 않고, XML View에서 바로 표현식을 평가할 수 있는 방법이 있습니다. Expression Binding을 사용하면 간단한 조건 처리, 형식 변환, 계산을 한 줄로 작성할 수 있습니다.

일반 바인딩 vs Expression Binding

<!-- 일반 바인딩 -->
<Text text="{/status}" />
<!-- 출력: "OPEN", "CLOSED" 등 원시 값 -->

<!-- Expression Binding: 중괄호 안에 = 기호로 표현식 -->
<Text text="{= ${/status} === 'OPEN' ? '진행 중' : '완료' }" />
<!-- formatter 없이 한 줄로 조건 처리 -->

자주 사용하는 Expression Binding 패턴

<!-- 1. 조건부 텍스트 -->
<Text text="{= ${/amount} > 1000000 ? '고액 주문' : '일반 주문' }" />

<!-- 2. 조건부 색상 (ObjectStatus) -->
<ObjectStatus
  text="{/status}"
  state="{= ${/status} === 'OPEN' ? 'Warning' :
             ${/status} === 'CONFIRMED' ? 'Success' : 'Error'}" />

<!-- 3. 수식 계산 -->
<Text text="{= (${/quantity} * ${/unitPrice}).toFixed(0) + ' 원'" />

<!-- 4. null/undefined 처리 -->
<Text text="{= ${/customerName} || '고객명 없음' }" />

<!-- 5. 날짜 형식 변환 (간단한 경우) -->
<Text text="{= ${/orderDate}.substring(0,4) + '년 ' +
             ${/orderDate}.substring(4,6) + '월 ' +
             ${/orderDate}.substring(6,8) + '일' }" />
<!-- /orderDate = "20260515" → "2026년 05월 15일" -->

<!-- 6. 가시성 제어 -->
<Button text="취소" visible="{= ${/status} === 'OPEN' }" />
<Button text="수정" enabled="{= ${/status} !== 'CLOSED' }" />

복수 모델에서 Expression Binding

<!-- 기본 모델과 이름 있는 모델 함께 사용 -->
<!-- 기본 모델: {} -->
<!-- userModel: {userModel>} -->

<Text text="{= ${userModel>/isAdmin} ? '관리자: ' : '사용자: ' }
           {userModel>/displayName}" />

<!-- 두 필드 결합 -->
<Text text="{= ${/firstName} + ' ' + ${/lastName} }" />

<!-- 단위 포함 -->
<Text text="{= ${/quantity} + ' ' + ${/unit} }" />
<!-- 출력: "100 EA" -->

formatter와 Expression Binding 선택 기준

<!-- Expression Binding이 적합한 경우: -->
<!-- - 간단한 조건 (A ? B : C) -->
<!-- - 두 필드 결합 -->
<!-- - 단순 수식 계산 -->
<Text text="{= ${/price} * ${/qty} }" />

<!-- formatter가 필요한 경우: -->
<!-- - 복잡한 변환 로직 -->
<!-- - 여러 곳에서 재사용 -->
<!-- - 단위 테스트가 필요한 로직 -->
<Text text="{
  path: '/amount',
  formatter: 'com.myapp.formatter.Currency.format'
}" />

Expression Binding 주의사항

<!-- 주의 1: XSS 취약점 — 사용자 입력을 직접 넣지 말 것 -->
<!-- 주의 2: 복잡한 표현식은 가독성 저하 -->
<!-- 나쁜 예: 너무 복잡한 Expression -->
<Text text="{= ${/a} > 0 ? (${/b} < 10 ? (${/c} + ${/d}) * 2 : ${/e}) : ${/f} }" />
<!-- 이 경우는 formatter 함수로 분리 권장 -->

<!-- 주의 3: UI5 1.28 이상에서 지원 -->

공식 문서

Expression Binding 전체 문법은 UI5 Expression Binding 공식 문서에서 확인하세요.