테이블 컬럼 길이 조정(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) 를 선언해 줍니다.
1
2
3
4
5
6
7
// 핵심 정보는 화면에 상시 노출 및 균등 배분되도록 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 라이센스를 따릅니다.