[Fiori] Data Binding

Data Model 연결

선행 작업으로 프로젝트에 데이터 모델을 연결해주자. 그 후,  프로젝트 내에서 뷰, 리스트 등의 기능에 데이터를 연결해보도록 한다. 

[Fiori] Data Model 추가

 

1. Data Binding

Data bind는 프로젝트의 다양한 기능에 가능하다. 프로젝트에서 여러 화면을 생성하다 보면 List control을 가장 많이 사용하게 될 것이고, 이번 포스팅에서도 List control에 data를 bind 해보자.

우선 View1 화면에 Control list 중 일반 List를 선택해서 가져온다. 단, data model 연결이 완료된 상태여야 한다.

 

View1 > List 추가

 

리스트를 바인딩하는 방법은 다양하게 존재한다. 지금은 우선 한 가지 방법을 살펴본다. 우측 Entity set이 데이터를 바인딩하는 부분이다. 클릭하면 모델에 등록된 데이터 entity들이 쭉 뜨고, 원하는 데이터 entity를 찾아 bind해주면 된다.

 

Entity set > Data bind

 

모델에 등록된 데이터 entity 중 employee 누르고 bind를 해주었다.

 

 

여기까지 저장하고 실행하면 View1 화면에서 다음을 확인할 수 있다.

 

 

2. Data Bind Format 설정

Employee 데이터를 바인드 해주었지만, 실제 row별로 어떤 데이터가 뜨는지 원하는 포멧을 확인하고자 한다. View1에서 List 클릭시 뜨는 우측 설정 중 Title을 클릭하면 다음과 같은 창이 뜬다.

 

View1 > List > Title

 

바인드 하려는 영역이 Title이며, First 이름과 Last 이름으로 합쳐 띄우고 싶어 다음과 같이 설정했다.

 

 

마찬가지로 Description 부분도 employee ID와 주소를 합쳐 띄우게 설정했다.

 

 

보여지는 아이콘 또한 연관성 있어 보이는 것으로 설정해주었다. 이렇게 하면 Data binding 작업이 마무리된다. 

 

 

3. 데이터 이동 및 연결

위 작업을 통해 View1 리스트에 데이터를 바인딩하였다. 그러나 View1 뿐 아니라 View2에서도 해당 데이터를 확인하고 싶다. View1에 뜨는 데이터 리스트 중 하나를 클릭했을 때, 그 정보를 View2에서 확인할 수 있도록 화면 이동 및 데이터 바인딩을 설정하고자 한다.

 

기존에는 Navigate to 를 통해 경로만 적어주면 됬지만, 데이터 바인딩이 되어있는 부분을 navigate to 하면 이제 이 데이터 정보도 넘길 것인지에 대한 설정도 해줘야 한다. Data binding이 되어 있는 리스트의 Event로 가서 Press > Navigate to 설정을 해준다. 

 

 

가장 상단의 Data Binding 설정을 none이 아닌 Propagate current context 로 설정해준다.

 

View1 > Event > Press > Navigate to

 

실행 결과 다음과 같이 View2에서 View1에서 클릭한 데이터의 상세 정보를 확인할 수 있게 되었다.

 

View2 실행화면