📌 개요

사용자에게 '홍길동'이라는 사람의 연락할 수 있는 방법을 제공하고자 한다. 우리는 홍길동에게 이메일을 보내는 링크를
추가할 것이다. 이를 위해 Model의 데이터를 sap.m과 일치하도록 변환한다. URLHelper.Email API를 정규화한다,
사용자가 이름을 변경하는 즉시 전자 메일도 변경된다. 이를 위해서 custom formatter function이 필요하다.

📌 예시

• MainController.js

sap.ui.defind([
	'sap/ui/core/mvc/Controller',
	'sap/m/library'
]), function (Controller, mobileLibrary) {
	'use strict';
	
	return Controller.extend('...', {
		formatMail: function(sFirstName, sLastName) {
			const oBundle = this.getView().getModel('i18n').getResourceBundle();
			return mobileLibrary.URLHelper.normalizeEmail(
				sFirstName + '.' + sLastName + '@example.com',
				oBundle.getText('mailSubject', [sFirstName]),
				oBundle.getText('mailBody'));
		}
		
	})	
}

custom formatter에서는 현재 Model에 있는 성과 이름을 함수의 parameter로 정의한다. 사용자가 입력 필드에 다른 이름을 입력하여
모델의 데이터를 변경하면 Formatter가 프레임워크에 의해 자동으로 호출된다. 이렇게 하면 UI가 데이터 모델과 동기화된다.

• MainView.view.xml

				<Link href="{
						parts: [
							'/firstName',
							'/lastName'
						],
						formatter: '.formatMail'
					}"
					text="{i18n>sendEmail}"/>

complex bindings의 경우 {}와 함께 simple binding syntax를 사용할 수 없다.
Link element의 href 프로퍼티는 문자열 값 안에 전체 객체를 포함한다. 이 경우 객체에는 두 가지 프로퍼티가 있다.
1. parts
parts는 각 요소가 경로 속성을 포함하는 객체인 Javascript 배열이다. 이 배열의 요소 수와 순서는 formatMail function의 매개변수의 순서와 같다.
2. formatter
parts 배열에 나열된 parameters를 수신하는 function에 대한 reference이다. formatter 함수에 의해 반환되는 모든 값은 이 속성의 설정된 값이다.
💡 포맷터 시작 부분의 점(formatMail)은 현재 View의 Controller Instance에서 fromatMail 함수를 찾도록 SAPUI5에 에 지시한다.
점을 사용하지 않는 경우 전역 네임스페이스를 검색하여 함수를 확인한다.

👍 Note

formatter functions을 사용할 때 binding은 자동으로 'one-way'로 전환된다. 따라서 'two-way' 시나리오에는 포맷터 기능을 사용할 수 없지만 data types은 사용할 수 있다.

• i18n/i18n.properties

sendEmail=Send Mail
mailSubject=Hi {0}!
mailBody=How are you?

🔗 참조

• SAPUI5 SDK Formatting Values
• SAPUI5 SDK Formatting, Parsing ...
• github example