【SAPUI5】Custom Formatterの使い方

##Custom Formatterとは
前回はData typeを指定してデータの表示形式を整えることができることを紹介しました。
Custom Fomatterを使うと、データの内容に合わせた表示内容を独自に定義することができます。たとえば、データの値に応じた区分を表示させるといったことが可能です。

##Custom Formatterを使ってみる
###ゴール
商品の在庫数に合わせて、在庫ステータスをテキストで表示してみます。

• 在庫が100個以上："在庫過剰"
• 10個以上99個以下："在庫適正"
• 9個以下："在庫不足"

###ステップ

前提: Data Typeを指定して表示形式を整える

1. JSONモデルに項目を追加
2. formatter.jsを新規作成
3. i18nファイルにテキストを追加
4. コントローラーからformatterを呼ぶ
5. ビューに項目を追加

###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_ja.propertiesファイルに以下のテキストを追加します。

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

###4. コントローラーからformatterを呼ぶ
App.controller.jsに、以下のように3箇所コードを追加します。
まず、ステップ2で定義したformatterを使用する宣言を追加します（①）。続いて、functionの引数にも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