UI5

View XML 없이 — 어노테이션 3가지 #shorts #SAP #Fiori

어노테이션 기반 Fiori UI란? SAP Fiori의 Annotation Driven UI 는 별도 View XML 없이 OData 메타데이터 어노테이션 한 줄로 리스트·폼·필터를 자동 렌더링합니다. Fiori Elements가 메타데이터를 해석해 UI를 생성하므로 반복 코딩이 사라집

Dialog 매번 새로 만든다면? — Fragment 재사용 패턴 #shorts #SAP #UI5

Fragment란 무엇인가 UI5에서 Fragment 는 자체 Controller를 갖지 않는 순수 UI 조각입니다. View와 동일한 XML 문법을 사용하지만, 독립적인 컨트롤러가 없기 때문에 호출하는 View의 Controller에 이벤트 핸들러를 위임합니다. Dialog, Popo

Dialog vs MessageBox — 언제 어느 걸 쓰나 #shorts #SAP #UI5

MessageBox — 확인·알림에 쓴다 단순 확인, 경고, 에러 팝업처럼 버튼 1~2개만 쓰는 경우엔 MessageBox 가 적합합니다. 한 줄로 끝납니다. MessageBox.confirm("저장할까요?", { onClose: (sAction) => { if (sAction ===

Push vs Replace — 히스토리 남기지 말 것 #shorts #SAP #UI5

navTo는 기본으로 히스토리를 쌓는다 UI5 라우팅에서 navTo() 를 호출하면 기본적으로 브라우저 히스토리에 새 항목을 push 합니다. 뒤로 가기 버튼을 누르면 이전 화면으로 돌아갈 수 있습니다. // 기본값 — push 모드 this.getRouter().navTo("detai

Dialog 매번 만들고 있다면? — Fragment 재사용 패턴 #shorts #SAP #UI5

이 글이 답하는 질문 XML Fragment로 재사용 가능한 Dialog를 어떻게 만드나요? Dialog를 매번 새로 생성하면 안 되는 이유는? 직접 해보기 1. ConfirmDialog.fragment.xml <core:FragmentDefinition xmlns="sap.m"

history 쌓기 vs 지우기 #shorts #SAP #UI5

UI5 라우팅 — navTo 두 가지 모드 UI5에서 화면 전환 시 navTo 를 사용하지만, 세 번째 인자 하나로 동작이 완전히 달라집니다. 바로 Push 와 Replace 의 차이입니다. 어떤 걸 써야 뒤로가기가 되고, 어떤 걸 쓰면 막히는지 알아봅니다. Push — history

navTo Push vs Replace — 언제 쓰나 #shorts #SAP #UI5

UI5 Routing이 왜 중요한가 SAP UI5에서 화면 전환은 Router와 navTo로 처리합니다. 단순히 화면을 이동할 때 Push와 Replace 중 어떤 방식을 쓰느냐에 따라 뒤로가기 동작이 완전히 달라집니다. manifest.json Routing 설정 먼저 manifest

아직도 기본 포맷만? — Custom Formatter 작성 #shorts #SAP #UI5

Formatter란? UI5 Formatter는 모델 데이터를 화면에 표시하기 전에 변환하는 함수입니다. 날짜 포맷 변경, 상태 코드 → 라벨 변환, 조건부 색상 적용 등 다양한 뷰 로직을 처리합니다. 기본 타입의 한계 sap.ui.model.type.Date 같은 빌트인 타입은 단순

아직도 setItems? Aggregation Binding 끝 #shorts #SAP #UI5

아직도 수동 setItems 쓰시나요? List에 데이터를 채우려고 forEach 돌리며 addItem 하고 계신가요? 데이터가 바뀔 때마다 removeAllItems → 다시 채우기를 반복하면 코드가 금세 지저분해집니다. UI5는 이런 반복을 Aggregation Binding으로 한

F4 Value Help 30초 만에 완성 #shorts #SAP #Fiori

Value Help가 뭔가요? SAP Fiori에서 입력 필드 옆 아이콘을 클릭하면 팝업 검색창이 뜨는 기능이 Value Help(F4 Help)입니다. 사용자가 코드나 ID를 외울 필요 없이 검색해서 선택할 수 있어, UX를 크게 개선합니다. UI5에서 ValueHelpDialog 연

UI5 i18n 삽질 끝 — 다국어 지원 한 번에 #shorts #SAP #UI5

SAPUI5 i18n 다국어 지원 완전 정복 — Resource Bundle 설정부터 XML View 바인딩, Controller 동적 텍스트 처리까지

아직도 setItems? Aggregation Binding 끝 #shorts #SAP #UI5

수동 setItems, 지금 당장 그만 UI5에서 리스트에 아이템을 하나씩 추가하는 코드, 아직도 쓰고 있다면 Aggregation Binding으로 교체할 때입니다. 수동 방식은 모델과 뷰가 분리되지 않아 유지보수가 어렵고, 데이터 변경 시 화면 갱신을 직접 처리해야 합니다. Aggr

UI5 { } 이게 뭔지 모른다면? Property Binding 첫걸음 #shorts #SAP #UI5

Property Binding이란? 유아이파이브에서 중괄호 { } 는 Model의 데이터를 View 속성에 연결하는 선언입니다. XML View에서 value="{/price}" 라고 쓰면 JSONModel의 /price 값이 자동으로 표시됩니다. 기본 구조 // JSONModel 생성

Two-way Binding 잘못 쓰면 큰일 — 무한 루프 탈출법 #shorts #SAP #UI5

Two-way Binding이란? 유아이파이브의 Two-way Binding은 View와 Model이 서로 동기화되는 방식입니다. 사용자가 입력하면 Model이 업데이트되고, Model이 바뀌면 View가 자동으로 갱신됩니다. 편리하지만 잘못 쓰면 무한 루프에 빠집니다. 무한 루프 발생

손으로 클릭 테스트? 그만 — OPA5로 E2E 자동화 #shorts #SAP #UI5

OPA5로 E2E 테스트 자동화하기 SAPUI5 애플리케이션은 복잡한 사용자 상호작용을 포함합니다. 매 배포마다 수동 테스트를 반복하는 것은 비효율적이며 오류 발생 위험이 높습니다. OPA5(One Page Acceptance)는 SAPUI5 전용 E2E 테스트 프레임워크로, 사용자 동

SAPUI5 보안 완전 가이드 — XSS 방지, CSRF 토큰, CSP 설정부터 XSUAA 연동까지

엔터프라이즈 SAPUI5 애플리케이션에서 반드시 점검해야 할 보안 영역을 체계적으로 다룹니다. 클라이언트 측 XSS 방어부터 서버 측 CSRF 토큰 처리, Content Security Policy 적용, 그리고 SAP BTP 환경의 XSUAA 인증/인가 연동까지 실무 코드와 함께 살펴

SAPUI5 Routing & Navigation 완전 가이드 — Router, Target, manifest.json 설정부터 딥링크까지

SAPUI5의 Routing & Navigation은 manifest.json에 config, routes, targets를 선언적으로 정의하고 Component.js에서 Router를 초기화하여 SPA 내 화면 전환을 관리하는 핵심 메커니즘입니다. navTo로 프로그래밍 방식 네비게이

SAPUI5 OData V4 바인딩 완전 가이드 — ListBinding, ContextBinding, $batch 처리까지

OData V4 모델의 ListBinding, ContextBinding, PropertyBinding 세 가지 바인딩 타입을 완전히 이해하고, $batch 처리와 트랜지언트 컨텍스트 등 고급 패턴까지 실무 코드와 함께 마스터합니다.

SAPUI5 데이터 바인딩 완전 가이드 — Property, Aggregation, Expression Binding

SAPUI5의 4가지 바인딩 타입(Element, Property, Aggregation, Expression)과 JSONModel/ODataModel 활용법을 단계별로 다룹니다.

SAPUI5 Custom Control 개발 완전 가이드 — extend, renderer, metadata부터 재사용 라이브러리까지

SAPUI5 Custom Control은 sap.ui.core.Control을 확장하여 metadata(properties, aggregations, events)와 renderer로 자체 UI 컴포넌트를 만드는 기법입니다. 이 가이드에서는 기본 컨트롤 생성부터 기존 컨트롤 확장, 외부