[UI5] SAP Data types 설정법

SAP UI5 개발을 하다 보면, 폼(Form)에 숫자나 날짜처럼 특정 데이터 타입(Data types)을 지정해서 유효성 검사를 하고 싶을 때가 있습니다. 하지만 많은 초보 개발자들은 manifest.json에서 별도로 설정하지 않으면 타입 제어가 제대로 동작하지 않는다는 사실을 모르고, 에러에 막히기 일쑤입니다.

이번 글에서는 실제 화면 예제와 함께 UI5에서 Data types를 올바르게 설정하는 방법을 정리했습니다.

 

2025.12.10 - [분류 전체보기] - [UI5] 헷갈리는 SAPUI5 Model View Binding(+Frament)

[UI5] 헷갈리는 SAPUI5 Model View Binding(+Frament)

 

 

Data types 

일반적인 UI 폼에서는 문자열만 입력되는 것이 아니라, 숫자, 날짜, 이메일 등 다양한 입력값의 타입이 필요합니다.
이때 정확한 타입 제어를 하지 않으면, 사용자가 잘못된 값을 입력했을 때도 경고 없이 넘어가거나, 나중에 API 호출 시 에러가 발생하게 됩니다.

 

 

 

XML View에 Data types 지정하기

먼저, 다음은 XML View에서 sap.ui.model.type.Integer를 사용해 Discount 항목에 숫자 타입을 지정한 예제입니다.

 

위 코드에서 중요한 포인트는 다음과 같습니다:

• type: 입력 데이터 타입을 지정. 여기선 Integer 사용
• constraints: 최소값, 최대값 등 입력값에 대한 제한 설정 가능

 

- 위 소스만 입력한다고 숫자외의 타입 제어를 하지는 않는다.

- manifest.json에 가서 소스를 별도로 입력을 해야 타입 제어 가능하다.

(경고문 등)

 

 

manifest.json에 handleValidation 설정 추가하기

 

다음은 잘못된 값 입력 시 SAP UI5가 자동으로 검증을 하도록 도와주는 설정입니다.

 

이 설정은 sap.ui5 → models 항목에 포함되어 있어야 하며, 데이터 모델이 바인딩된 이후에만 동작합니다.

 

"handleValidation": true,

 

Data types 결과화면

 

 

• 숫자가 아닌 값을 입력하거나, 최소/최대 범위를 벗어난 경우 입력창 테두리가 빨갛게 표시되며 오류 메시지가 함께 표시됩니다.
• 이처럼 UI5는 클라이언트 단에서 사용자 입력을 효율적으로 검증할 수 있는 기능을 제공합니다.ㄴㄴ

 

정상입력

잘못된 값 입력 결과

 

 

SAP Data Type 

보통 화폐단위랑 돈이 같이 가고 해당 필드들에는 필수로 data type이 들어간다.

 

 

SAP Joule

 

 

Joule 쓸 때는 id 부여해주고 그걸 알려주면서 고치는게 낫다.

/UI5 치면 위처럼 연관 키워드가 나오는데 그걸 치고 질문을 해야 한다.

한국어 지원이 되는데 아직 입력은 원활하지 않아서 메모장에 쓰고 복사 붙여넣기를 해야한다. 

사용결과는 알아서 코드를 바꿔주긴하는데 가끔 이해를 잘 못해서 이상한 로직으로 알려줄 때도 있고 오류를 잘 못 알려준다. 

그치만 휴먼에러나 오타 등은 잘 알려줘서 덜 귀찮아지긴 하더라.

 

 

 

필터(Filter) 기능까지 연동

 

먼저 XML View에서 필터에 사용할 입력창들을 구성합니다.
이 때 id 값은 JS 컨트롤러에서 접근 가능해야 하므로 신중하게 작성하는 것이 중요합니다.

Discount 값이 0 이상일 경우 보여달라

<Button ... visible="{=}/>     //----> 로직을 바인딩한다

 

Controller에서FIlter, FilterOperator 정의를 우선 해준다.

여기서 사용된 주요 키워드는 다음과 같습니다:

• Filter: sap.ui.model.Filter 클래스
• FilterOperator: EQ, Contains, GT 등 비교 연산자
• getBinding("items"): List/Table에 바인딩된 데이터를 가져와 조작 가능

 

필터 조건 없이 검색하면 전체 리스트 출력되게 하기

자주 발생하는 실수 중 하나는 모든 입력값이 빈 값일 때 아무런 데이터도 출력되지 않는 현상입니다.
이를 방지하려면 필터 조건이 없을 경우에는 .filter([])를 실행해 전체 데이터를 다시 보여주도록 처리해야 합니다.

if (oFilters.length === 0) {
    oBinding.filter([]);
} else {
    oBinding.filter(oFilters);
}

 

 

i18n 다국어 번역 설정하기

실무에서는 하드코딩된 텍스트 대신 다국어(i18n) 리소스를 활용해 문구를 처리해야 합니다.

 

<Text text="{i18n>title}" />
<Input placeholder="{i18n>itemId}" />

 

이렇게 하면 언어에 따라 자동으로 번역된 문구가 반영되며, 다국어를 지원하는 글로벌 앱을 만드는 데 필수적인 설정입니다.


i18n_ko.properties --한국어 지원
i18n_de.properties --독일어 지원
i18n_en.properties --영어 지원 

 

 

 

 

테스트할 때는 URL 뒤에 https:// ............?sap-ui-language=en 넣으면 나옴