【SAPUI5】Custom Formatter의 사용법

Custom Formatter란?

지난번 은 Data type을 지정하여 데이터의 표시 형식을 정돈할 수 있다는 것을 소개했습니다.
Custom Fomatter를 사용하면 데이터 내용에 맞는 표시 내용을 고유하게 정의할 수 있습니다. 예를 들어, 데이터의 값에 따른 구분을 표시하도록 할 수 있습니다.

Custom Formatter를 사용해보기

목표

상품의 재고 수에 따라 재고 상태를 텍스트로 표시해 봅니다.

재고가 100개 이상: "재고 초과"

10개 이상 99개 이하: "재고 적정"

9개 이하: "재고 부족"

단계

전제 : 데이터 형식을 지정하여 표시 형식을 조정합니다.

JSON 모델에 항목 추가

formatter.js를 신규 작성

i18n 파일에 텍스트 추가

컨트롤러에서 formatter 호출

뷰에 항목 추가

1. JSON 모델에 항목 추가

Pricelist.json 파일을 열고 "stock"항목을 추가합니다.

{ 
    "products" :[
        {
            "name" : "Pumpkin",
            "price": 15.00,
            "currency": "EUR",
            "supplier": "CompanyA",
            "stock": 100
        },
        {
            "name" : "Apple",
            "price": 200.00,
            "currency": "JPY",
            "supplier": "CompanyB",
            "stock": 99
        },
        {
            "name" : "Banana",
            "price": 50.00,
            "currency": "EUR",
            "supplier": "CompanyC",
            "stock": 10
        },
        {
            "name" : "Tomato",
            "price": 1000.00,
            "currency": "EUR",
            "supplier": "CompanyA",
            "stock": 9
        },  
        {
            "name" : "Egg",
            "price": 600.00,
            "currency": "JPY",
            "supplier": "CompanyD",
            "stock": 0
        }
    ]
}

2. formatter.js를 새로 작성

model 폴더 아래에 "formattr.js"라는 파일을 새로 만듭니다.


다음 코드를 입력합니다. 재고 상태 표시에 대한 함수 "stockStatus"를 정의합니다. 이 함수는 인벤토리 수량을 인수로 사용합니다.

sap.ui.define([], function () {
    "use strict";
    return {
        stockStatus: function (stock) {
            var resourceBundle = this.getView().getModel("i18n").getResourceBundle();
            if (stock >= 100){
                return resourceBundle.getText("stockA");
            }else if (stock >= 10){
                return resourceBundle.getText("stockB");
            }else{
                return resourceBundle.getText("stockC");
            }
        }
    };
});

재고 상태 표시는 언어에 따라 다르므로 i18n 텍스트를 사용합니다. 이 때문에, 처리의 선두에서 resourceBundle 의 인스턴스를 취득합니다. 재고 수량에 따라 재고 상태를 설정합니다.

3. i18n 파일에 텍스트 추가

i18_ko.properties 파일에 다음 텍스트를 추가하십시오.

# Formatter
stockA=在庫過剰
stockB=在庫適正
stockC=在庫不足

4. 관제사에서 formatter를 부른다

App.controller.js에 다음과 같이 세 개의 코드를 추가합니다.
먼저 2단계에서 정의한 formatter를 사용하는 선언을 추가한다(①). 그런 다음 함수 인수에도 formatter를 추가합니다 (②). 마지막으로 formatter라는 속성에 인수 formatter를 설정합니다. 이제 controller에서 formatter.js 함수에 액세스할 수 있습니다.

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/ui/model/json/JSONModel",
   "test/helloworld/model/formatter" ←①
], function (Controller, JSONModel, formatter ←②) {
   "use strict";
   return Controller.extend("test.helloworld.controller.App", {
        formatter: formatter, ←③

        _data : {
            "date" : new Date()
        },

        onInit : function (evt) {
            var oModel = new JSONModel(this._data);
            this.getView().setModel(oModel);
        },
   });
}); 

5. 뷰에 항목 추가

App.view.xml의 ObjectListItem 컨트롤에 다음과 같이 코드를 추가합니다.

                                    <ObjectListItem
                                        title="{mPricelist>name}"
                                        number="{
                                            parts: [{path: 'mPricelist>price'}, {path: 'mPricelist>currency'}],
                                            type: 'sap.ui.model.type.Currency',
                                            formatOptions: {
                                                showMeasure: false
                                            }
                                        }"
                                        numberUnit="{mPricelist>currency}">
                                        <firstStatus>
                                            <ObjectStatus text="{
                                                path: 'mPricelist>stock',
                                                formatter: '.formatter.stockStatus'
                                            }"/>
                                        </firstStatus>                                      
                                    </ObjectListItem>

firstStatus는 ObjectListItem의 속성입니다. 여기에서는 ObjectStatus라는 컨트롤을 사용하여 상태를 설정합니다. (ObjectStatus를 사용하는 것은 ObjectListItem의 참조를 볼 때 firstStatus의 Type이 sap.m.ObjectStatus가되어 있음을 알 수 있습니다.)


마찬가지로, ObjectStatus 의 설정 내용에 대해서도 레퍼런스에 기재가 있습니다.
여기서는 text라는 속성에 재고 상태를 설정합니다. text에 formatter와 formatter에 전달할 인수(stock)를 설정합니다.

실행 결과

실행 결과는 다음과 같습니다. 재고 수량이 나오지 않기 때문에 조금 이해하기 어렵지만 재고 수량에 따라 상태가 표시됩니다.

요약

Custom Formatter를 사용하는 경우 formatter.js라는 파일에서 형식 함수를 정의합니다.

컨트롤러에서 formatter를 사용하는 선언을하면 뷰에서 formatter를 사용할 수 있습니다.

참고로 한 페이지

Get Started: Setup and Tutorials-Walkthrough-Step 23: Custom Formatters