라우팅하면 이전 뷰는 어디로 가요? — UI5 Cache Lifecycle #shorts #SAP #UI5
개요 및 핵심 포인트 SAPUI5/OpenUI5 애플리케이션에서 라우팅은 단순한 페이지 전환을 넘어 뷰 인스턴스의 생명주기(Lifecycle) 를 직접 제어하는 핵심 메커니즘입니다. 기본적으로 UI5 라우터는 한 번 생성된 뷰를 메모리에 캐시(cache)하여 재방문 시 빠르게 보여주지만
라우트 늘어날수록 이렇게 정리해요? — UI5 Route Group #shorts #SAP #UI5
개요 SAPUI5/OpenUI5 애플리케이션의 규모가 커지면 manifest.json 의 routing 섹션도 빠르게 비대해집니다. 특히 모듈별로 /products/list , /products/detail/{id} , /products/edit/{id} 처럼 동일한 URL 접두어를 공
Flat vs Nested — UI5 Subroutes 중첩 라우팅 #shorts #SAP #UI5
개요 및 달성 목표 SAPUI5에서 Subroutes는 하나의 URL 패턴이 여러 개의 View를 동시에 활성화시키는 중첩 라우팅 메커니즘입니다. 주문 목록과 상세 화면을 한 화면에 나란히 보여주는 Master-Detail 패턴, 또는 좌측 카테고리 트리와 우측 콘텐츠를 동시에 유지하는
:param vs * — UI5 Router 와일드카드 패턴 #shorts #SAP #UI5
개요 및 다룰 내용 SAP UI5 SPA(Single Page Application)에서 URL 하나가 곧 화면의 상태이자 진입점이 됩니다. 주문 상세, 상품 조회, 고객 카드 등 수십~수백 종의 화면을 정적으로 라우팅 테이블에 나열하는 것은 비현실적이기 때문에, sap.m.routin
Hash Router 헷갈려요? — UI5 navTo 3단계 #shorts #SAP #UI5
왜 Hash Router가 SPA의 심장인가 SAPUI5 애플리케이션은 단일 페이지 애플리케이션(SPA)이다. 브라우저는 한 번 index.html을 받은 뒤 더 이상 서버에 페이지를 요청하지 않는다. 그렇다면 "목록 화면에서 상세 화면으로 이동"이라는 행위는 도대체 어떻게 일어나는 것
파일 업로드 이렇게 편해? — UI5 UploadCollection #shorts #SAP #UI5
왜 UploadCollection이 필요한가 SAP UI5 기반 비즈니스 애플리케이션에서 파일 업로드는 단순한 첨부 기능을 넘어, 송장 스캔본, 계약서 PDF, 제품 이미지, 품질 검사 사진 등 핵심 트랜잭션의 일부로 다뤄지는 경우가 많습니다. sap.m.upload.UploadColl
Input vs MultiInput — UI5 Tokenizer 활용법 #shorts #SAP #UI5
이 글에서 다룰 것 sap.m.MultiInput 은 사용자가 여러 값을 토큰(Token) 형태로 입력하고 시각적으로 관리할 수 있는 컨트롤입니다. 검색 필터, 태그 입력, 수신자 목록처럼 "값을 하나씩 추가/제거하면서 전체 목록을 유지"해야 하는 UI에서 표준처럼 사용됩니다. 본문에서
알림 배지 활용 3가지 — UI5 BadgeCustomData #shorts #SAP #UI5
UI5 Image/Badge — sap.m.Image 기본 선언, BadgeCustomData로 배지 오버레이, 표현식 바인딩으로 카운트 0이면 자동 숨김까지 3단계로 정리합니다. YouTube: https://youtube.com/shorts/EiRwfJRcgQg
증감 버튼 숫자 입력 StepInput? — UI5 수치 입력 컨트롤 #shorts #SAP #UI5
UI5 StepInput — min/max/step으로 허용 범위 설정, liveChange/change 이벤트 처리, 모델 바인딩 Constraints 유효성 처리까지 3단계로 정리합니다. YouTube: https://youtube.com/shorts/SVYZy_DeEhA
DatePicker vs Calendar — UI5 날짜 컨트롤 선택 #shorts #SAP #UI5
1. 개요 및 이 글에서 얻어갈 것 SAPUI5에서 날짜를 다루는 컨트롤은 여러 가지가 있지만, 화면에 항상 달력을 펼쳐 두고 사용자가 즉시 날짜를 클릭하도록 유도해야 한다면 sap.ui.unified.Calendar 가 가장 적합합니다. sap.m.DatePicker 가 입력 필드를
Carousel로 이미지 슬라이드? — UI5 완성 #shorts #SAP #UI5
1. 개요 및 이 글에서 얻어갈 것 SAPUI5로 화면 좌우 슬라이드 전환이 필요한 UI를 만들 때, 많은 개발자들이 처음에는 setTimeout 이나 CSS transition을 직접 조합해서 애니메이션을 구현하려 시도합니다. 하지만 SAPUI5에는 이런 슬라이드 패턴을 위해 설계된
Splitter 모른다고? — UI5 드래그 리사이즈 패널 완성 #shorts #SAP #UI5
1. 개요 및 이 글에서 얻어갈 것 SAPUI5 애플리케이션을 만들다 보면 화면을 좌/우 또는 상/하로 나누고, 사용자가 경계선을 드래그해서 영역 크기를 조절할 수 있게 만들어야 하는 요구사항을 자주 만나게 됩니다. 마스터-디테일 패턴, 코드 에디터와 미리보기, 트리 네비게이션과 콘텐츠
GridContainer vs CSSGrid — UI5 반응형 레이아웃 #shorts #SAP #UI5
1. 개요 및 이 글에서 얻어갈 것 SAPUI5에서 대시보드나 카드 기반 화면을 만들 때 가장 자주 마주치는 고민이 있습니다. HBox 와 VBox 로 끝없이 중첩시키다 보면 반응형이 깨지고, Grid ( sap.ui.layout.Grid )는 12-컬럼 float 기반이라 카드 크기를
Page 스크롤 vs ScrollContainer — 영역 분리 #shorts #SAP #UI5
개요 및 이 글의 목표 SAPUI5 화면을 만들다 보면 "헤더는 고정하고 목록만 스크롤하고 싶다", "좌우 패널의 스크롤을 분리하고 싶다"는 요구가 자주 등장합니다. 기본 sap.m.Page 는 콘텐츠 전체를 하나의 스크롤 영역으로 묶기 때문에, 부분 스크롤이 필요한 시점에는 sap.m
탭으로 필터 구현? IconTabBar 3단계 #shorts #SAP #UI5
개요 및 이 글에서 다룰 내용 SAPUI5의 sap.m.IconTabBar 는 탭 UI와 데이터 필터링을 하나의 컨트롤로 통합한 컴포지트 컴포넌트입니다. 주문 관리, 티켓 처리, 인보이스 상태 분류 등 상태별 그룹화가 빈번한 업무 화면에서 가장 자주 선택되는 패턴입니다. 이 글에서는 주
아직도 단일 선택? MultiComboBox 3단계 #shorts #SAP #UI5
개요 및 이 글에서 다루는 범위 SAPUI5/OpenUI5의 sap.m.MultiComboBox 는 사용자가 드롭다운에서 여러 항목을 동시에 선택할 수 있게 해주는 입력 컨트롤입니다. 단일 선택만 가능한 ComboBox 와 달리, 토큰(Token) 형태로 선택된 값이 입력 필드 안에 누
타임라인 직접 구현 그만 — UI5 FeedListItem #shorts #SAP #UI5
개요 및 이 글에서 다루는 것 sap.m.FeedListItem 은 SAPUI5 모바일 라이브러리에서 제공하는 피드/타임라인 전용 리스트 아이템으로, 일반 StandardListItem 으로는 표현하기 까다로운 "누가, 언제, 무엇을 말했는가"의 3요소를 한 줄에 자연스럽게 담아냅니다.
ObjectStatus vs ObjectIdentifier — UI5 상태 표시 #shorts #SAP #UI5
개요 및 이 글에서 다루는 것 SAPUI5/OpenUI5의 sap.m 라이브러리에는 비즈니스 데이터를 시각적으로 표현하기 위한 두 가지 핵심 컨트롤이 있습니다. ObjectStatus 는 항목의 상태(승인/거절/대기)를 색상과 아이콘으로 직관적으로 표현하고, ObjectIdentifie
리스트 없이 계층 표시 3가지 — UI5 Tree #shorts #SAP #UI5
개요 및 이 글에서 다루는 것 SAP UI5 애플리케이션에서 조직도, 자재 명세서(BOM), 파일 시스템 같은 계층 구조 데이터를 표현해야 하는 요구는 매우 빈번합니다. 단순 List 나 Table 로는 부모-자식 관계를 직관적으로 표현하기 어렵기 때문에 sap.m.Tree 컨트롤이 등
window 전역 변수 그만 — UI5 스코프 관리 3단계 #shorts #SAP #UI5
개요 — window 전역 변수와 결별하기 UI5 화면을 처음 만들 때 가장 흔한 실수 중 하나가 window.currentSalesOrderId = 4711; 같은 코드입니다. 빠르게 동작하기 때문에 유혹적이지만, 이 한 줄은 향후 수개월간 디버깅 지옥을 예약하는 행위와 같습니다. 이