아직도 기본 포맷만? — Custom Formatter 작성 #shorts #SAP #UI5

언제 쓸까

sap.ui.model.type.Date 같은 빌트인 타입은 단순 형식 변환만 지원합니다. "재고 0이면 빨간 텍스트", "특정 코드 값에 따른 아이콘 변경" 같은 비즈니스 로직은 Custom Formatter가 필요합니다.

직접 해보기

1. formatter.js 정의

model/formatter.js에 함수를 정의합니다.

// model/formatter.js
sap.ui.define([], function () {
  "use strict";
  return {
    statusText: function (sStatus) {
      var oBundle = this.getOwnerComponent()
                        .getModel("i18n").getResourceBundle();
      switch (sStatus) {
        case "A": return oBundle.getText("statusAvailable");
        case "O": return oBundle.getText("statusOut");
        default:  return oBundle.getText("statusUnknown");
      }
    }
  };
});

2. Controller에 등록

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "./model/formatter"
], function (Controller, formatter) {
  return Controller.extend("com.app.controller.Main", {
    formatter: formatter
  });
});

3. XML View에서 바인딩

formatter 함수는 점(.) 접두어로 상대 경로를 지정합니다.

<Text
  text="{
    path: 'Availability',
    formatter: '.formatter.statusText'
  }" />

핵심 한 줄

formatter.js에 함수 정의 → 컨트롤러에 formatter: formatter 등록 → XML에서 formatter: '.formatter.함수명'으로 바인딩.