📌 개요
SAPUI5는 Boolean, Currency, Date 그리고 Float과 같은 data type을 제공한다. 이러한 data types을 control에 적용하여 화면에 표시된 값의 형식이 올바르게 지정되었는지 확인하고 필드가 입력용으로 열려 있는 경우 사용자가 입력한 값이 해당 데이터 유형의 요구 사항을 준수하는지 확인할 수 있다. 이제 Currency type의 'Sales Amount' 필드를 추가해보자.
📌 예제
- MainView.controller.js
const oModel = new JSONModel({
firstName: "Harry",
lastName: "Hawk",
enabled: true,
address: {
street: "Dietmar-Hopp-Allee 16",
city: "Walldorf",
zip: "69190",
country: "Germany"
},
salesAmount: 12345.6789,
currencyCode: "EUR"
});- MainView.view.xml
<l:VerticalLayout>
<Label labelFor="salesAmount" text="{i18n>salesAmount}:"/>
<Input description="{/currencyCode}" enabled="{/enabled}" id="salesAmount"
value="{
parts: [
{path: '/salesAmount'},
{path: '/currencyCode'}
],
type: 'sap.ui.model.type.Currency',
formatOptions: {showMeasure: false}
}" width="200px"/>
</l:VerticalLayout>'salesAmount' Model property에 대해 새로운 Label 및 Input element 쌍이 생성되었다. Input elemenet의 description property는 'currencyCode' model property가 binding되었다.
Input element의 value property는 model property salesAmount와 currencyCode에 binding되었다.
{showMeasure: false} parameter는 input 필드 자체에서 currency symbol을 이끈다. Input element의 description property를 사용하여 표시되기 때문에 필요하지 않다.
- i18n.properties
salesAmount=Sales Amount- manifest.json
아래의 코드를manifest.json에 추가하면 유효성 검사 메시지가 데이터가 변경될 때 자동으로 생성된다. 바인딩된 property에 할당된 type(위의 코드에서는 type이sap.ui.model.type.Currency)이 있는 경우 유효성 검사에서 메시지 생성을 트리거할 수 있다.
"sap.ui5": {
...
"handleValidation": true,
...
} 따라서 Currency type이 아닌 경우의 type의 data를 입력했을 때 다음과 같은 화면을 볼 수 있다.
🔗 참고
coding everywhere