[ CAP ] CDS를 Fiori UI로 표현하기

이번에는 내가 만든 CDS의 데이터 값들을 화면에 표현해보자!
지금까지는 entity 간의 관계와 entity에 선언돼 있는 변수들의 Attribute, 이에 관한 데이터 정보를 담고 있는 CSV 파일 등이 어떤 기능을 하고 있는지 간략히 알아보았다. 그렇다면 이제는 이 데이터 정보를 내가 볼 수 있는 것이 중요하다고 하겠다. 조금 많이 헤맸지만 의외로 기본적인 UI로 표현하는 것은 어렵지 않았다!  

---

 

Fiori UI

---

 

CDS 생성

---

 

 

입력해두었던 데이터 값들을 불러오기 위한 cds를 app 폴더 바로 아래에 하나 생성한다.

---

반응형

annotate UI

---

 

 

using { com.sap.shoppingmall as my } from '../db/schema';

annotate my.Clothes with @(
    UI: {
        SelectionFields: [ ID, description, price ],
        LineItem: [
            {$Type: 'UI.DataField', Value: ID, Label: '상품 아이디'},
            {$Type: 'UI.DataField', Value: status, Label: '출고 상태'},
            {$Type: 'UI.DataField', Value: sort.name, Label: '상품 종류'},
            {$Type: 'UI.DataField', Value: price, Label: '가격'},
            {$Type: 'UI.DataField', Value: stock, Label: '재고량'},
        ]
    }
);

 

우선 entity 정보와 JOIN 관계를 정의해두었던 schema.cds를 사용하겠다고 명시한다.

그리고 UI로 표현하기 위해 어느 entity를 annotate 할 것인지 입력하고
UI 내에 표현하고자 하는 것들을 작성한다.

SelectionFields는 조회 및 검색하고자 하는 entity 속성들을 영역에 표시하기 위해 사용한다.

LineItem은 조회된 데이터를 리스트 방식으로 나타내기 위해 사용한다.
배열로 묶어준 뒤, 나타내고자 하는 entity 속성들을 나열한다.

$Type으로 필드에 데이터를 어떻게 표시할지 지정해주고,
Value에는 어떠한 데이터 값을 보여줄지 입력한다.
Label에는 이데이터 값이 어떤 값을 보여주고자 하는지에 관한 데이터명을 표기한다. 

---

 

 

입력해두었던 조회 목록 세 가지가 잘 나타나 있으며,
저장해두었던 데이터 값이 잘 표현되고 있다! 

---

 

 

HeaderInfo: {
    $Type: 'UI.HeaderInfoType',
    TypeName: 'Clothes',
    TypeNamePlural: 'Clothes',
    Title: {Value: status},
    Description: {$Type: 'UI.DataField', Value: description}
}

 

LineItem에 표현하였던 필드 값들의 상세 데이터 정보를 확인할 수 있는 페이지에 진입해보자.

LineItem 배열에서 바로 이어 HeaderInfo에 대한 필드를 지정해준다.

$Type은 HeaderInfo를 보여주는 UI.HeaderInfo를 사용하고,
Title은 상품의 상태를 보여주는 status로 임의로 설정한다.

해당 정보에 대한 설명은 Description에 저장하는데,
여기서 다시 한 번 UI.DataField를 사용함으로써 필드 영역을 생성한다. 
그리고 이 설명란은 Clothes에 선언해두었던 description 데이터 값을 가져온다.

---

 

 

설정해둔 데이터 값이 잘 표현되고 있다! 아싸!

---

 

HeaderFacets  : [{
    $Type: 'UI.ReferenceFacet',
    Target: '@UI.FieldGroup',
    Label: '상품 정보'
}],
FieldGroup  : {
    $Type : 'UI.FieldGroupType',
    Data: [
        {$Type:'UI.DataField', Label: '상품 아이디', Value: ID},
        {$Type:'UI.DataField', Label: '브랜드명', Value: brand.name},
        {$Type:'UI.DataField', Label: '상품 가격', Value: price},
        {$Type:'UI.DataField', Label: '재고량', Value: stock},

    ]
}

 

HeaderFacets에서는 Entity의 metadata에 관한 정보를 정의한다.

$Type에는 UI.ReferenceFacet으로 설정한다.

FieldGroup에는 표현하고자 하는 데이터 값에 관한정보를 저장한다. 

---

 

 

entity 속성이 잘 표현된다!

다음 파트에서는 $Type에는 어떤 것들이 있는지에 대해 살펴볼 것이다.
아울러, Temporal의 기능을 좀 더 깊이 파헤쳐 보자! 

---