[UI5] Data types

😁 금액과 단위를 추가해보자.

Invoice는 이미 멋지게 꾸며졌지만, 가격이 나와있지 않다면 그냥 목록일 뿐이다!

InvoiceList.view.xml

controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"

List의 바깥에 밑에서 새로 생성할 InvoiceList 컨트롤러를 연결해준다.

    <ObjectListItem
        title="{invoice>Quantity} x {invoice>ProductName}"
        number="{
            parts: [{path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'}],
            type: 'sap.ui.model.type.Currency',
            formatOptions: {
            showMeasure: false
            }
        }"
        numberUnit="{view>/currency}" />

보통은 하나의 프로포티에 하나의 값만을 불러왔는데, 하나의 프로포티에 여러 값, 배열을 불러올땐 객체로 넘기고 parts 프로포티를 사용해 path로 여러 프로포티 값을 불러온다.

view>/currency가 EUR이므로 EUR의 숫자타입인 소숫점 두번째자리까지 표시해준다.

formatOptions로 옵션을 줄수 있고, showMeasure를 false로 하면 currency 금액 앞에 단위가 안보이게 한다.

true일 경우에는 이렇게 왼쪽에 단위가 표시된다.

invoiceList.comtroller.js

controller폴더에 새로 invoiceList.comtroller.js 파일을 새로 생성한다.

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
    "use strict";
    return Controller.extend("sap.ui.demo.walkthrough.controller.InvoiceList", {
        onInit : function (){
            var oViewModel = new JSONModel({
                currency: "EUR"
            });
            this.getView().setModel(oViewModel, "view");
        }
    });
});

EUR인경우 소숫점 두번째자리까지 기본적으로 보여준다.

---

😁 항목별로 단위를 다르게 해보자

Invoice.json

각 항목에 통화 프로포티와 값을 추가해준다.

 "Currency" : "USD"

InvoiceList.view.xml

기존에 있던 view>/currency를 Invoice>Currency로 변경한다.

둘다 currency 타입을 가지고 오겠다는 공통점이 있지만 데이터를 가지고 오는 곳이 다르다. 전자는 InvoiceList.controller.js에서 정의한 view라는 모델에서 EUR을 가져와 값을 고정시키고 후자는 Invoice.json을 반복하면서 값을 가져와 항목별로 값을 다르게 셋팅한다. 반복되는 반복문이기 때문에 /를 생략한다.

Currency의 타입에 따라서 숫자타입도 다르게 표시된다. KRW경우에는 소숫점이 필요없기 때문에 소숫점 없이 정수자리만 보여준다.