목차
지난시간에 생성한 APP에 어노테이션을 추가하여 좀더 APP답게 만들어 보겠습니다.
1. UI.lineItem
UI.lineItem 어노테이션을 사용하여 APP을 실행했을때 노출할 필드를 지정해 보겠습니다.
화면 UI와 관련된 기능은 UI어노테이션을 사용한다고 생각하면 됩니다.
앞으로 많은 어노테이션이 나오게 되는데 모든 어노테이션을 외울수는 없습니다. 어노테이션을 기능별로 잘 정리해 두고 실제로 개발할때 정리된 문서를 활용할 수 있게 해야합니다. 물론 자주 사용하다보면 자연스럽게 외워지겠지만요.
UI.lineItem에 있는 position 이라는 파라미터는 필드의 위치를 지정해 줍니다. 아래와 같이 필드별로 위치를 지정해 줍니다.
APP을 다시 실행해보면 아래와 같이 필드들이 노출되어있는걸 확인 할 수 있습니다.
이번에는 UI.lineItem 어노테이션의 LABEL 파라미터를 이용하여 필드TEXT를 수정해 보겠습니다.
Airline ID → Airline
Flight Number → Flight No.
APP을 다시 실행해 보면 어노테이션을 적용한 필드의 TEXT가 수정된 걸 볼 수 있습니다.
필드의 TEXT는 기본적으로 DATA ELEMENT의 정보를 보여주지만 관련 어노테이션을 이용하여 수정 가능합니다.
2. UI.selectionField
GO버튼을 누르면 DATA가 조회 됩니다. 하지만 내가 원하는 정보만 필터기능으로 보고 싶습니다. 필터 기능을 구현해 보겠습니다.
사실 필터기능은 APP에서 기본기능으로 제공하고 있습니다. Adapt Filters버튼을 클릭하면 필터를 적용할 필드를 선택할 수 있습니다.
필드를 선택하고 OK버튼을 누르면 APP 상단에 필터 필드가 노출됩니다.
이제 어노테이션을 추가하여 APP 시작과 동시에 필요한 필터필드를 노출시켜 보겠습니다.
필터필드를 화면에 노출시키기 위한 어노테이션은 UI.selectionField 를 사용합니다. 아래와 같이 Position 파라미터로 위치를 지정해 주면 됩니다. CARRIER_ID, CONNECTION_ID, FLIGHT_DATE 3개의 필드를 노출시켜 보겠습니다.
APP을 다시 실행해보면 위에서 지정한 3개의 필드가 필터필드로 지정이 되어있습니다. 값을 입력해 보면 정상적으로 필터기능이 작동합니다. 우리가 처음 CDS View를 생성할때 금액필드는 통화키 필드를 Reference 했습니다. 통화키를 Reference를 하게되면 아래와 같이 금액필드에 통화키가 함께 보여집니다.
3. UI.headerInfo
아래와 같이 UI.headerInfo 어노테이션을 사용하여 해더레벨 Description 기능을 추가해 보겠습니다. 해더레벨의 어노테이션 적용은 CDS View 상단에 추가해 줍니다. typeNamePlural 파라미터에 값을 주게되면 DATA 총건수가 아래와 같이 표시됩니다.
RAP로 APP을 생성하게 되면 기본적으로 LIST REPORT로 생성이 됩니다. LIST REPORT는 DATA LINE을 선택하게 되면 선택된 LINE의 상세 페이지로 이동하게 됩니다. 이 상세 페이지를 OBJECT PAGE 라고 합니다. 현재는 OBJECT PAGE로 이동하지만 아무런 로직을 구현하지 않았기 때문에 빈 PAGE만 보입니다. 앞에서 선택한 정보를 OBJECT PAGE에 표현해 보겠습니다.
4. UI.facet
OBJECT PAGE에 관련 어노테이션은 UI.facet입니다.
FACET 타입은 여러종류가 있는데 여기서는 IDENTIFICATION_REFERENCE 을 사용해 보겠습니다. 선택한 LINE의 단일값 정보를 OBJECT PAGE에 표현할때 주로 사용됩니다. FACET 어노테이션은 FIELD가 시작되는 가장 상위에 구현해 줍니다.
OBJECT PAGE에는 여러개의 FACET을 이용하여 구성할 수 있습니다. 그렇기 때문에 position 파라미터로 위치를 지정해 줘야 합니다. label 은 해당 FACET의 TITLE이 됩니다.
FACET 어노테이션을 완료했으면 OBJECT PAGE에 보여줄 필드를 지정해 줘야 합니다. UI.identification 어노테이션을 OBJECT PAGE에 보여줄 필드에 추가해 줍니다. position 파마리터로 위치도 지정해 줍니다.
FACET을 적용하고 APP을 다시 실행해보면 아래와 같이 선택한 LINE의 정보가 OBJECT PAGE에 표시됩니다.
이제 OBJECT PAGE에 TITLE을 수정해주고 선택한 LINE의 Airline정보를 상단에 표현해 보겠습니다.
해더관련이기 때문에 UI.HEADERINFO 어노테이션을 추가해 줍니다. typeName파라미터에는 OBJECT PAGE의 상단 TITLE을 입력해 주고 title 파라미터에는 아래와 값이 value에 필드값을 입력해주면 선택된 LINE의 해당 필드값을 OBJECT PAGE에 표현할 수 있습니다. value값은 실제 필드명이 아닌 alias 값을 지정해 줘야 합니다.
어떠신가요? 몇개의 어노테이션 추가만으로도 APP의 UI가 좀더 풍성해 지지 않았나요? 간단한 REPORT를 만들어보고 어노테이션이 APP에 어떻게 영향을 미치는지 맛만 보는 시간을 가졌습니다.
다음시간부터는 2개의 CDS View를 연결하여 APP을 만들어보고 좀더 많은 어노테이션을 구현해 보는 시간을 갖겠습니다.