UI5

Object Page 실수 3가지 #shorts #SAP #Fiori

▶ YouTube에서 보기

SAP Fiori Object Page 개발에서 자주 발생하는 실수

SAP Fiori Elements의 Object Page는 단일 엔티티의 상세 정보를 보여주는 표준 레이아웃입니다. ListReport에서 항목을 클릭하면 이동하는 페이지입니다. 올바른 구성 없이는 섹션이 비어 보이거나, 편집 모드가 동작하지 않거나, 관련 항목이 표시되지 않습니다.

실수 1: @UI 어노테이션 구조 오류 — 섹션이 비어 보임

-- 잘못된 어노테이션 구조
-- HeaderInfo 없이 Object Page 접근 시 제목이 없음
annotate OrdersService.Orders with @(
  UI.LineItem: [...]  // ListReport용
  // HeaderInfo 없음 → Object Page 헤더 비어있음
);
-- 올바른 Object Page 어노테이션 구조
annotate OrdersService.Orders with @(

  // 1. 헤더 정보 (필수)
  UI.HeaderInfo: {
    TypeName: '주문',
    TypeNamePlural: '주문 목록',
    Title: {
      $Type: 'UI.DataField',
      Value: orderId
    },
    Description: {
      $Type: 'UI.DataField',
      Value: customerName
    }
  },

  // 2. 헤더 패싯 (상단 요약 영역)
  UI.HeaderFacets: [
    {
      $Type: 'UI.ReferenceFacet',
      Target: '@UI.FieldGroup#OrderSummary',
      Label: '주문 요약'
    }
  ],

  // 3. 본문 패싯 (섹션)
  UI.Facets: [
    {
      $Type: 'UI.CollectionFacet',
      Label: '주문 정보',
      ID: 'OrderInfo',
      Facets: [
        {
          $Type: 'UI.ReferenceFacet',
          Label: '기본 정보',
          Target: '@UI.FieldGroup#BasicInfo'
        },
        {
          $Type: 'UI.ReferenceFacet',
          Label: '배송 정보',
          Target: '@UI.FieldGroup#DeliveryInfo'
        }
      ]
    },
    {
      $Type: 'UI.ReferenceFacet',
      Label: '주문 항목',
      Target: 'items/@UI.LineItem'
    }
  ],

  UI.FieldGroup#BasicInfo: {
    Data: [
      { $Type: 'UI.DataField', Value: orderId, Label: '주문번호' },
      { $Type: 'UI.DataField', Value: orderDate, Label: '주문일' },
      { $Type: 'UI.DataField', Value: status, Label: '상태' }
    ]
  }
);

실수 2: Draft 설정 없이 편집 기능 사용

-- 잘못된 패턴: Draft 없이 편집 가능 설정
define behavior for ZC_SalesOrder alias SalesOrder {
  update;
  // with draft 없음 → 편집 버튼이 있지만 임시 저장 기능 없음
  // 다른 사용자가 동시에 편집해도 충돌 처리 없음
}
-- 올바른 패턴: Draft 활성화
managed with additional save
  implementation in class zbp_r_sales_order unique;
with draft;    // Draft 활성화

define behavior for ZR_SalesOrder alias SalesOrder
  persistent table zbtp_sales_order
  draft table zbtp_d_sales_order    // Draft 테이블 필요
  lock master total etag last_changed_at
{
  create;
  update;
  delete;

  draft action Activate;
  draft action Discard;
  draft action Edit;
  draft action Resume;
  draft determine action Prepare;
}
-- Draft 테이블 생성 (HANA DB)
@EndUserText.label : 'Draft Table for Sales Order'
define table zbtp_d_sales_order {
  key mandt       : mandt not null;
  key order_id    : abap.char(10) not null;
  key isvariaddoc : abap_boolean not null;
  key draftentityoperationcode : abap.char(1) not null;
  key hasactiveentity : abap_boolean not null;
  // ... 기타 필드
}

실수 3: Composition 어노테이션 없이 관련 항목 표시 시도

// 잘못된 패턴: Composition 없는 관계
// 주문 항목이 Object Page에 표시되지 않음
entity Orders {
  key orderId : String(20);
  items       : Association to many OrderItems on items.orderId = $self.orderId;
  // Association → 별도 조회 필요, Fiori가 자동으로 처리 못함
}
// 올바른 패턴: Composition으로 정의
entity Orders {
  key orderId : String(20);
  items       : Composition of many OrderItems on items.order = $self;
}

entity OrderItems {
  key itemNo  : Integer;
  key order   : Association to Orders;
      product : String(18);
      qty     : Integer;
      amount  : Decimal(15,2);
}
-- Fiori Object Page에서 items 섹션 표시
UI.Facets: [
  {
    $Type: 'UI.ReferenceFacet',
    Label: '주문 항목',
    Target: 'items/@UI.LineItem'  // Composition 엔티티의 LineItem
  }
]

Object Page 개발 체크리스트

  • UI.HeaderInfo: TypeName, Title, Description 설정 여부
  • UI.Facets: 모든 섹션이 FieldGroup 또는 LineItem을 올바르게 참조하는가
  • 편집 기능: Draft 테이블 생성 + BDef에 with draft 설정
  • 관련 엔티티: Association이 아닌 Composition으로 정의
  • 라우팅: manifest.json에 Object Page 타겟과 pattern 설정

공식 문서

Fiori Elements Object Page 어노테이션 가이드는 Fiori Elements Building Blocks에서 확인하세요.

댓글 0

아직 댓글이 없습니다.