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

Formatter란?

UI5 Formatter는 모델 데이터를 화면에 표시하기 전에 변환하는 함수입니다. 날짜 포맷 변경, 상태 코드 → 라벨 변환, 조건부 색상 적용 등 다양한 뷰 로직을 처리합니다.

기본 타입의 한계

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

Formatter 함수 작성

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");
      }
    }
  };
});

컨트롤러에서 Import

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

XML View 바인딩

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

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

핵심 한 줄

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