outsystems - block exercise(연습)

Employees라는 하나의 Screen이 있고 이 Screen에는 모든 직원을 검색하는 Aggreagte가 있습니다.

해당 화면에는 왼쪽 영역에 직원 목록이 표시됩니다. 목록에서 직원을 클릭하면 오른쪽에 해당 직원의 상세 정보가 나타납니다. 처음에는 직원의 ID만 볼 수 있지만, 이번 연습에서는 해당 영역을 추가할 것입니다.

오른쪽 영역은 나중에 만들 Block이 표시될 영역입니다. 이 블록은 데이터베이스에서 Employee의 상세 정보를 검색하고 표시할 것입니다. 그 후에는 매개 변수 변경 이벤트 핸들러를 구현할 것입니다. 이를 통해 부모 화면에서 선택한 Employee가 변경될 때마다 블록에 표시된 정보를 새로 고칠 수 있습니다.

그 다음으로는 Drop Down을 사용하여 Employee의 부서를 업데이트 할 수 있는 기능을 추가할 것입니다. 부서가 변경되면 블록에서 이벤트를 트리거하여 부모에게 알립니다. 부모는 이벤트를 처리하고 목록에 표시된 정보(부서 이름 포함)를 새로 고칠 것입니다.
해당 모듈에는 이미 데이터베이스에서 Employee를 업데이트하는 데 필요한 로직이 포함된 서버 액션이 정의되어 있습니다.(Employee_Update)

 

예상 결과화면입니다.

 

Block 만들기

한 직원의 정보를 표시하는 블록을 만들고 구현하겠습니다. 이 블록은 선택한 직원의 정보를 표시하기 위해 직원 목록화면 내에서 사용됩니다. 

 

1. 인터페이스 탭에서 MainFlow를 마우스 오른쪽 버튼으로 클릭하고 블록을 추가해줍니다.그리고 이름을 EmployeeDetail로 변경해줍니다. 

2. 블록의 입력매개변수를 추가해줍니다. 그리고 이름을 EmployeeId로 설정하고 Data Type을 Employee Identifier로 설정해줍니다. 

3. 블록을 마우스 오른쪽 버튼으로 클릭하고 Feth Data from Database를 클릭합니다. 블록의 EmployeeId 입력 매개변수를 드래그하여 Aggregate 내부에 놓습니다. 

4. 데이터 탭에서 Department 엔터티를 끌어서 Aggregate 내부에 드래그합니다.  

5. 인터페이스 탭으로 돌아가 EmployeeDetail 블록을 엽니다. 컨테이너를 드래그하여 블록캔버스 안에 놓습니다. 그리고 왼쪽의 도구모음에서 가운데 맞춤 아이콘을 클릭합니다.

 

6. 도구모음에서 Image를 끌어서 이전에 만든 컨테이너 안에 놓습니다. Type속성을 Binary Data로 변경한 다음 Image Content 속성을 다음과 같이 설정합니다. 

GetEmployeeById.List.Current.EmployeePicture.Picture

그리고 Default Image 속성을 User로 설정하고 Style Classes 속성을 다음과 같이 설정합니다. 

"img-circle"

 

7. GetEmployeeById Aggregate의 Employee엔터티에서 Emial 속성을 찾습니다. 그런 다음 이미지 아래로 끌어다 놓습니다.  그런다음 가운데정렬을 해주고 Phone속성도 Email과 동일하게 수행합니다. 

8. 도구모음에서 separator을 입력한다음 드래그하여 전화 아래에 놓습니다. 

9. 컨테이너를 드래그하여 Separator 아래에 놓습니다. 그리고 Lable을 드래그하여 이전 단계에서 만든 컨테이너 내부에 놓습니다. 그리고 Lable안의 Text를 Job Position으로 변경합니다 . 그리고 레이블 크기를 2col로 조정합니다.

10. GetEmployeeById Aggreagte 아래에 있는 JobPosition 속성을 끌어 레이블 오른쪽에 놓습니다.  

11. 다른 컨테이너를 드래그하여 블록하단(방금 작업한 컨테이너 아래)에 놓습니다. 마찬가지로 label을 끌어와 방금 만든 컨테이너 안에 넣고 위의 과정처럼 진행하는데 이번에는 Department로 텍스트를 변경하고 2col로 줄여준 후 GetEmployeeById의 Department 엔터티의 Name 속성을 드래그하여 오른쪽에 놓아줍니다.