[ CAP ] @Communication.Contact와 @UI.IsImageURL 사용해 UI 구성하기

이번주는 샘플을 분석했던 것을 토대로 내가 생성해 놓은 CAP 프로젝트에 응용해볼 것이다. 거의 따라하는 거라 어렵지 않겠지만, 무작정 베끼는 거보다는 어떤 기능을 구현할 때 새로운 조건을 추가해 보는 등의 시도도 해보려고 한다. 

---

 

사용할 테이블 속성 선언하기

---

 

data-model.cds

---

 

Contacts

---

 

 

entity Contacts : cuid {
    name                : String;
    phone               : String;
    state               : String;
    country             : String;
    street              : String;
    postCode            : String;
    addressLabel        : String;
    imageUrl            : String @UI.IsImageURL;
}

 

우선 가장 먼저 Contacts 개체를 생성하여
화면에서 보여주고 싶은 데이터 속성들에 관해 선언해준다.

그 중 imageUrl은 폴더 media에 있는 png 파일을 호출할 것인데,
링크 그대로 따오는 것이 아니라,
해당 url의 이미지를 보여주기 위해서는 @UI.IsImageURL을 명시해줘야 한다.

---

 

Orders

---

 

 

다음으로는 개체 중 Orders를 이용해 데이터를 가져와 view를 구성할 것이기 때문에
Orders에 contact 객체를 하나 만들고,
이를 개체 Contacts와 Association 해줌으로써 둘 간의 상관관계를 형성해 준다.

사실 Orders에 객체를 저렇게 많이 해두면 재사용할 수 있는 여건이 마련되지 않기 때문에
aspect를 사용해 여러 객체를 거기에 선언해 두고,
필요할 때마다 꺼내 쓰는 것이 훨씬 더 가독성이 좋다.

추후에 리팩토링을 할 예정이다.

---

개체의 데이터 속성 값들로 새로운 객체 값 만들기

---

 

market-service.js

---

 

---

 

module.exports

---

 

module.exports = async function (srv)

 

module이란 관련된 객체들의 집합소,
즉 어떤 기능을 수행하기 위해 함수 혹은 객체들을 생성해 놓았을 때
그러한 것들을 하나의 .js 파일에 써놓기에는 가독성이나 유지보수가 불리하기에
관련 함수 또는 객체들을 .js 파일별로 따로 모아놓은 것들을 말한다.

---

 

srv.entities

---

 

const {Orders, Contacts} = srv.entities;

 

어떤 경로의 개체를 참조할 것인지 명시해줘야 한다.

여기서는 Orders와 Contacts가 가지고 있는 속성들을 가져올 것이고,
이를 위해 srv.entities를 사용하면 계속해서 namespace를 별도로 입력하지 않고도
개체들을 자동으로 정규화해준다는 장점이 있다.

---

 

srv.after

---

 

srv.after(["Read"], Orders, async (response) =>

 

srv.after은 어느 개체 혹은 경로를 호출하여 어떤 이벤트를 사용할 지를 정함으로써
선택한 개체에 있는 데이터 속성이 가지는 값들을 조회하거나 속성 값을 갱신하는 등을 하기 위해 쓰인다.

이는 srv.on 보다 앞서서 수행된다.

여기서 event 란에는 Read뿐만 아니라 CRUD 즉 CREATE, READ, UPDATE, DELTE 등을 쓸 수 있고,
임의로 이벤트 이름을 지정하여 사용할 수도 있다.

그 다음 path 란에는 호출하고자 하는 개체인 Orders를 지정해주면 된다.

마지막으로 어떤 방식으로 데이터를 호출할 것인지에 대한 handler를 정해야 하는데,
async 비동기 방식으로 데이터들을 불러오도록 한다.

다시 말해, 화면의 모든 UI의 동작이 이전의 작업을 기다리지 않고도
한 번에 원하는 데이터에 관해서만 병렬적으로 event가 발생할 수 있게끔 하는 것이다.

그리고 response를 인자로 사용한다.

=>(arrow function)는 코드의 가독성을 높이기 위해 쓰이며,
function과 return을 생략할 수 있는 이점이 있다.

---

 

hasOwnProperty

---

 

if(response.hasOwnProperty('contact') && response.contact.addressLabel === null)

 

if문의 조건에는 hasOwnProperty가 있는데,
이 메서드는 Orders라는 개체에 contact라는 객체에 대한 데이터 정보가 있는 지에 대해 조회 및 판단하는 기능을 한다.

즉, 객체 contact로 Association 되어 있는 개체 Contacts에 있는 테이블 속성 값들의 존재 여부만을 판단하여
true 혹은 false를 반환하는 역할을 한다.

if문을 해석하자면,
contact에 데이터가 존재하거나, 그 중 객체 addressLabel의 값이 존재한다면 또는
두 boolean 값이 false를 반환할 때를 가정한다.

---

 

SELECT.one.from

---

 

 const contact = await SELECT.one.from(Contacts, response.contact.ID, contact => {
            contact.ID, contact.state, contact.country, contact.street, contact.postCode

 

만약 contact에 데이터가 존재하고 addressLabel도 값이 있다면,
SELECT.one으로 하나의 행에 있는 데이터 값들만 반환하도록 한다.

다시 말해, Contacts 테이블에서 ID를 킷값으로 두고
이 ID에 해당하는 contact 데이터 값 한 행에 대한 정보를 모두 불러오도록 한다.

---

 

response.contact.addressLabel = `${contact.state}${contact.country}${contact.street}${contact.postCode}`;

 

반면 contact와 addressLabel 값에 대해 false를 모두 반환한다면,
contact에 있는 addressLabel 값에 대해 재정의해준다.

즉, Contacts에 저장해두었던 데이터 속성들을 조합해 나열함으로써
addressLabel이 단일 문자열로 구성되도록 하는 것이다. 

이는 concatenate 기능과 같이 문자열을 합성하는 것과 같이 작동하게 하는 것이다.

---

 

UPDATE

---

 

await UPDATE(Contacts, response.contact.ID).with({addressLabel : response.contact.addressLabel});

 

이제 UPDATE 메서드를 사용해
Contacts 테이블에서 ID를 킷값으로 하여 기존의 값 또는 새롭게 생성된 addressLabel로 갱신시켜준다.

---

반응형

UI에 Contact 링크로 contact 정보 보여주기

---

 

layout_Contacts.cds

---

 

Communication.Contact

---

 

 

Communication.Contact : {
    fn          : name,      // full name
    kind        : #org,
    tel         : [{
            uri         : phone,
            type        : #preferred
    }],
    photo       : imageUrl,
    adr         : [{
            building    : state,
            country     : country,
            street      : street,
            code        : postCode,
            type        : #preferred
    }]
},

 

Contacts 정보에 관한 레이아웃을 화면에 보여주기 위한 cds 파일 하나를 생성한다.

Communication.Contact를 사용하면,
fn에 지정해둔 name이 링크로 나타나고 name을 클릭하면
Contact에 관한 포맷이 노출되도록 하는 기능을 경험할 수 있다.

그 중에 photo에는 테이블 Contacts에 있는 데이터 속성 중 하나인 imageUrl로 선언함으로써
해당 Contacts_ID에 해당하는 png 이미지를 보여줄 수 있다.

---

 

fioriview.cds

---

 

contact/@Communication.Contact

---

 

 

{
    $Type   : 'UI.ReferenceFacet',
    Target  : 'contact/@Communication.Contact',
    Label   : 'contact'
}

 

Target에 using으로 불러온 layout_Contacts를 사용하기 위해
contact로 별칭을 해두었기에
contact에 있는 @Communication.Contact를 어노테이션으로 호출한다.

---

 

LineItem에서 이미지 보여주기

---

 

@UI.LineItem

---

 

 

 

Orders에 연결해두었던 cotact 객체를 활용해
Contacts에 있는 imageUrl을 호출해 이미지로 보여줄 수 있다.

---

 

 

 

이제 오브젝트 페이지에 UI로 Contact의 name으로 걸어두었던 링크를 클릭하면
imageUrl과 addressLabel, phone 등의 정보를 잘 보여주고 있다!