UI5

Object Page 섹션 30초 만에 구성 #shorts #SAP #RAP

1. Object Page 레이아웃과 섹션의 역할 SAP Fiori Elements의 Object Page는 단일 비즈니스 엔티티(예: 판매주문 한 건, 거래처 한 곳)의 상세 정보를 표시하기 위한 표준 플로어플랜입니다. List Report에서 행을 클릭했을 때 펼쳐지는 그 페이지를

List Report 설정 90%가 놓치는 어노테이션 순서 #shorts #SAP #RAP

List Report가 어노테이션을 해석하는 방식 SAP Fiori Elements의 List Report는 CDS(또는 OData) 메타데이터에 선언된 @UI 어노테이션을 런타임에 해석해 UI를 자동 렌더링합니다. 개발자가 XML View를 직접 작성하지 않아도 컬럼, 필터바, 헤더

UI5 개발자 90%가 놓치는 EventBus 패턴 #shorts #SAP #UI5

왜 EventBus가 필요한가 대형 SAP Fiori 애플리케이션은 보통 여러 개의 Component로 쪼개져 있습니다. 주문 목록을 보여주는 컴포넌트, 주문 상세를 띄우는 컴포넌트, 사이드 알림 패널을 다루는 컴포넌트가 서로 다른 페이지·다른 라이프사이클을 가진 상태에서 "방금 사용자

ComboBox vs Select — 입력 가능 vs 선택만 #shorts #SAP #UI5

이 글이 답하는 질문 UI5 ComboBox와 Select, 언제 어느 걸 써야 하나? 사용자가 새 값을 입력해야 한다면? 결정적 차이 1가지 ComboBox — 입력 가능 ComboBox는 드롭다운 목록에서 선택할 수도 있고, 리스트에 없는 값을 직접 타이핑해서 입력할 수 있습니다.

destroy 안 부르면 큰일 — UI5 메모리 누수 #shorts #SAP #UI5

왜 destroy()가 필요한가 SAPUI5는 자체 ManagedObject 레지스트리로 모든 컨트롤을 추적합니다. 컨트롤을 DOM에서 제거하거나 부모에서 detach해도 이 레지스트리 참조는 그대로 남습니다. 이벤트 핸들러, 모델 바인딩, 프래그먼트 캐시까지 메모리에 계속 쌓입니다.

직접 참조 없이 — EventBus 2줄로 앱 연결 #shorts #SAP #UI5

컴포넌트 간 통신, 왜 까다로울까요? UI5 앱이 커지면 부모→자식 모델 바인딩만으로는 부족합니다. 형제 뷰나 독립된 컨트롤러 간 데이터 전달 시 직접 참조를 남발하면 의존성 지옥에 빠집니다. EventBus는 이 문제를 Publish/Subscribe 패턴으로 해결합니다. 발행(Pub

Object Page 실수 3가지 #shorts #SAP #Fiori

Object Page란? Fiori 상세 화면의 표준 패턴입니다. 구조는 Header Area 와 Content Area 로 나뉘고, Content Area는 Section → SubSection → Facet 계층을 따릅니다. 이 계층을 잘못 이해하면 레이아웃이 무너지거나 내용이 통째

Fiori 개발자 80%가 놓치는 ARIA 접근성 속성 #shorts #SAP #Fiori

Fiori에서 ARIA가 없으면 벌어지는 일 SAP Fiori 앱에 ARIA 속성을 빠뜨리면 스크린 리더 사용자는 버튼이 존재하는지조차 알 수 없습니다. 단순한 권고 사항이 아닙니다. 유럽 EAA(European Accessibility Act) 2025, 미국 Section 508 등

직접 호출 없이 — EventBus 30초 만에 컴포넌트 통신 #shorts #SAP #UI5

이 글이 답하는 질문 여러 Component로 쪼개진 UI5 앱에서, 서로를 직접 참조하지 않고 데이터를 주고받으려면 어떻게 해야 하나? EventBus의 channelId와 eventId는 어떤 단위로 설계해야 충돌 없이 운영할 수 있나? subscribe를 걸어 둔 뒤 뷰가 dest

formatter 없이 한 줄로 #shorts #SAP #UI5

Expression Binding이란? UI5의 Expression Binding은 XML View 안에서 JavaScript 표현식을 직접 실행할 수 있는 기능입니다. {= ... } 문법을 사용하며, 단순한 조건 처리나 문자열 조합을 위해 Controller에 formatter 함수

아직도 행마다 클릭? Fiori 일괄수정 3단계 #shorts #SAP #Fiori

이 글이 답하는 질문 Fiori List Report에서 여러 행을 한 번에 수정하려면? Mass Edit Dialog를 열 때 입력 필드가 비어 있는 이유는? OData $batch 요청을 올바르게 묶는 방법은? 직접 해보기 1. Table MultiSelect 활성화 <!--

Fiori 필수 표시 실수 3가지 #shorts #SAP #Fiori

Fiori 필수 입력 표시란? 사용자가 반드시 입력해야 하는 폼 필드에 빨간 별표(*)를 표시하는 기능입니다. UI5에서는 Label 의 required 속성 하나로 즉시 적용할 수 있어 별도 CSS 작업이 필요 없습니다. Label에 required 적용 가장 기본적인 방법입니다. L

Fiori 필수 별표 — required 금지, 90% 실수 원인 #shorts #SAP #Fiori

이 글이 답하는 질문 Fiori 폼에서 필수 입력 별표(*)는 어떻게 표시하나? Label required 속성만으로 충분한가, 아니면 Input도 건드려야 하나? 저장 버튼 클릭 시 빈 필수 필드를 어떻게 잡나? 직접 해보기 1. XML View — required 한 줄 추가 &lt

백엔드 없이 UI5 개발 — Mock Server 실수 4가지 #shorts #SAP #UI5

이 글이 답하는 질문 백엔드 없이 UI5 앱을 어떻게 실행할 수 있나? Mock Server를 어디에, 어떻게 붙이나? 왜 내 Mock 데이터가 화면에 안 보이지? 직접 해보기 1. 디렉토리 구조 만들기 webapp/ localService/ mockdata/ Products.json

Fiori 필수 표시 — 90%가 Label required 빼먹는다 #shorts #SAP #Fiori

이 글이 답하는 질문 Input에 required=true 줬는데 왜 별표(*)가 안 보일까? Label과 Input 중 어디에 required를 걸어야 할까? SmartForm에서는 왜 required를 직접 안 써도 될까? Fiori 필수 표시 실수 3가지 1. Input에만 req

Fiori Elements vs Freestyle — 어떤 걸 골라야? #shorts #SAP #UI5

Fiori Elements vs Freestyle SAP UI5 개발에서 가장 먼저 결정해야 할 것은 Fiori Elements를 쓸지, Freestyle UI5를 쓸지입니다. 선택에 따라 개발 방식이 완전히 달라집니다. Fiori Elements OData 어노테이션 기반으로 UI를

Mock Server 30초 — JSON이 OData 서버로 #shorts #SAP #UI5

이 글이 답하는 질문 백엔드 없이 UI5 앱을 개발하고 싶다면? MockServer.simulate()이 실제로 어떻게 동작하나? 직접 해보기 1. MockServer 초기화 // webapp/localService/mockserver.js sap.ui.define([ "sap/ui/c

ProgressIndicator 90%가 state 고정 — 포매터로 해결 #shorts #SAP #UI5

ProgressIndicator란? SAP UI5의 sap.m.ProgressIndicator 는 작업 진행률을 % 로 시각화하는 컨트롤입니다. 파일 업로드, 온보딩 단계, 예산 소진율처럼 수치로 표현 가능한 상태에 바로 사용할 수 있습니다. XML 선언 — 3줄이면 충분 <Pro

백엔드 없이 OData? — Mock Server 3단계 설정 #shorts #SAP #UI5

이 글이 답하는 질문 백엔드 API가 없는 상황에서도 UI5 앱을 실행할 수 있나? Mock Server는 어떻게 설정하고 OData를 어디서 흉내 내나? 운영 배포 코드에 Mock이 섞이지 않게 하려면? 직접 해보기 1. 디렉토리 구조 잡기 webapp/ localService/ me

OData V2 vs V4 — 성능 차이 #shorts #SAP #UI5

이 글이 답하는 질문 UI5에서 V2 모델과 V4 모델, 코드가 얼마나 다른가? V2 앱을 V4로 바꿀 때 뭐가 달라지나? 언제 V4로 넘어가야 하나? 핵심 차이 한눈에 V2 V4 모델 클래스 odata.v2.ODataModel odata.v4.ODataModel CRUD model.c