【SAPUI5】Data Type을 지정하여 표시 형식을 정돈한다

소개

지난번 문서에서 여러 항목을 목록으로 표시했습니다.
결과를 살펴보면 금액에는 여러 통화가 있지만 모두 정수로 표시됩니다.
본래, EUR이면 소수점 이하 2자리까지 표시되어야 합니다.
이 때 컨트롤의 type이라는 속성에 "통화"라는 데이터 형식을 지정하면 통화에 맞는 형식으로 금액을 표시할 수 있습니다.
sap.ui.model.type 이라는 클래스에 다양한 데이터형이 준비되어 있으므로, 이번에는 그것들을 사용해 데이터 형식을 정리해 보겠습니다.

마지막 결과

통화 표시(type: Currency)

다음과 같이 통화에 따라 소수점 이하 자릿수가 변경되도록 합니다. (EUR은 소수점 이하 2자리, JPY는 소수점 이하 없음)

출처

App.view.xml의 ObjectListItem 내용을 다음과 같이 변경합니다.

변경 전

<ObjectListItem
                                        title="{mPricelist>name}"
                                        number="{mPricelist>price}"
                                        numberUnit="{mPricelist>currency}">
                                    </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}">
                                    </ObjectListItem>

number에 대해 type을 지정하기 위해 다음 인수를 전달합니다.

parts: 표시할 데이터를 지정합니다. 숫자와 단위의 두 인수를 전달하기 위해 parts 다음에 path에서 모델 데이터를 지정합니다.

type: 통화 형식으로 표시할 'sap.ui.model.type.Currency'를 지정합니다.

formatOptions: 선택적으로 통화를 표시하지 않도록 설정합니다. (통화가 이미 표시되어 있기 때문에)

메모

parts는 복수의 인수를 정리하기 위한 선언으로, 인수가 1개이면 직접 path를 지정합니다.

인수가 둘 이상인 경우parts: [{path: 'データ'}, {path: 'データ'}, ...]
인수가 단수인 경우path: 'データ'

날짜 표시(type: Date)

panel1에 날짜를 추가합니다.
먼저 controller에서 date라는 변수를 정의하고 뷰에서 그대로 표시해 보겠습니다. (type을 지정하지 않으면 어떻게 될지 확인하기 위해)

App.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
   "use strict";
   return Controller.extend("test.helloworld.controller.App", {
        _data : {
            "date" : new Date()
        },

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

여기에서는, 이하의 처리를 실시하고 있습니다.

오늘의 날짜를 가진 date라는 변수를 JSON 형식의 모델로 정의

컨트롤러의 초기 처리 (onInit)에서 JSON 모델을 인스턴스화하고 뷰에 설정합니다. 이것에 의해, 뷰측으로부터 변수 date에 액세스 할 수 있게 된다.

App.view.xml

첫 번째 패널에 텍스트 컨트롤을 추가하여 날짜를 표시합니다.

                    <Panel headerText="panel1">
                        <content>
                            <l:VerticalLayout class="sapUiContentPadding">
                                ---省略---
                                <Text text="{/date}"/> ←追加
                            </l:VerticalLayout>                             
                        </content>
                    </Panel>

표시 형식은 다음과 같습니다.


그런 다음 type을 지정합니다.

                               <Text text="{
                                    path: '/date',
                                    type: 'sap.ui.model.type.Date',
                                    formatOptions: {
                                        style: 'short'
                                    }
                                }"/>

날짜가 yyyy/mm/dd 형식으로 표시되었습니다.

formatOptions에 지정할 수 있는 것

fotmatOptions 에 지정할 수 있는 것은 데이터의 형태에 의해 정해져 있습니다.
자세한 내용은 아래 공식 참조를 참조하십시오.

number의 경우

date의 경우

참고로 한 페이지

Get Started: Setup and Tutorials-Walkthrough-Step 21: Data Types
sap.ui.model.type.Date 샘플