포스트

테이블 컬럼 길이 조정(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 라이센스를 따릅니다.