테이블 컬럼 길이 조정(RAP/FIORI)-수정중
테이블 컬럼 길이 조정(RAP/FIORI)-수정중
- targets에 추가 > “fullWidth”: true,
1 2 3 4 5 6 7 8 9 10 11 12 13 "targets": { "ZC_BP_PRODList": { "type": "Component", "id": "ZC_BP_PRODList", "name": "sap.fe.templates.ListReport", "options": { "settings": { "contextPath": "/ZC_BP_PROD", "variantManagement": "Page", "fullWidth": true, // 이 부분 추가!(고객사들 대부분) "inlineEdit": { "enabled": true },1. 컨트롤러의 레이아웃 비활성화
- ListReportExt.controller.js 내의
oInnerTable.setFixedLayout(false)코드를 주석 처리(제거)합니다.- 이를 통해 SAP UI5 테이블의 기본 100% 확장 분배 정책인
fixedLayout: true모드가 복원되어 화면 가로 전체에 테이블 컬럼이 가득 채워집니다.2. DDLX 중요도(importance) 기반 팝인(Pop-in) 반응형 구축
- ZR_BP_PROD.ddlx 내 모든 컬럼의 개별 너비 설정(
cssDefault.width)을 완전히 삭제하여 프레임워크 자동 배분 엔진에 할당을 일임합니다.- 대신, 좁은 화면에서 글자 찢어짐이나 레이아웃 깨짐을 방지하도록 컬럼별 중요도(
importance)를 선언해 줍니다. ```abap // 핵심 정보는 화면에 상시 노출 및 균등 배분되도록 HIGH 지정 @UI.lineItem: [ { position: 10, importance: #HIGH } ] PlanningCategory;
// 부가 정보는 해상도가 작아지면 자동으로 아래(pop-in)로 들어가 숨겨지도록 LOW 지정 @UI.lineItem: [ { position: 120, importance: #LOW } ] CreatedBy; ```
💡 퍼센트(
%) 단위 사용 시: 브라우저 창을 줄이면%계산폭이 극도로 작아져 모바일(예: 375px 너비) 등에서 텍스트가 세로로 찢어져서 출력되는 렌더링 붕괴가 일어남.
- 고정 절대값(
rem,px) 사용 시: 화면을 최대로 키웠을 때 우측 영역에 거대한 공백 여백이 발생하여 심미적으로 매우 거슬림.- 컨트롤러 오버라이딩 간섭: 기존 컨트롤러의 자동 조정 코드에 삽입되어 있던
oInnerTable.setFixedLayout(false)설정이 UI5 테이블의 가로폭 가득 채우기 기본 정책(fixedLayout: true)을 강제로 방해하고 있었음.
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.