포스트

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