개요
이 자습서에서는 이번에는 앱에 프로젝트를 추가하여 Employee Directory 애플리케이션을 계속 확장합니다. 프로젝트를 추가하면 애플리케이션에 다음이 포함됩니다.
- 프로젝트를 보거나 편집하거나 새 프로젝트를 추가할 수 있는 프로젝트의 목록 및 세부 정보 화면.
- 프로젝트에 프로젝트 리더가 있는 프로젝트와 직원 간의 관계.
- 액셀러레이터를 사용하여 화면을 생성하여 프로젝트를 나열하고 편집합니다.
- EmployeeDetail 화면에서 직원이 이끄는 프로젝트를 나열합니다.
이러한 요구 사항을 처음부터 구현하고 그 과정에서 OutSystems의 몇 가지 중요한 측면을 이해하게 됩니다.
따라해보세요!
Employee Directory 앱에는 이 시점에서 3개의 화면이 있어야 합니다.
필터 및 페이지 매김이 있는 직원 목록이 있는 직원 목록 . 프로젝트의 현재 기본 화면입니다.
직원 사진을 포함한 직원 데이터를 편집할 수 있는 직원 편집 화면 .
회사의 다음 5명의 신입 사원과 이번 달에 생일이 있는 직원을 볼 수 있는 대시보드 화면 입니다 .
이 자습서에서는 응용 프로그램에 프로젝트를 추가합니다.
데이터 모델
Employee Directory 애플리케이션에 프로젝트를 포함하려면 먼저 데이터 모델을 수정하고 프로젝트에 대한 새 엔터티를 포함합니다.
또한 프로젝트에는 프로젝트 리더(Employee)가 있으므로 프로젝트는 직원과 관계가 있습니다.
프로젝트 나열
애플리케이션에 프로젝트가 있으면 EmployeeDetail 화면을 편집하여 Employee가 주도하는 프로젝트 목록을 포함합니다.
How?
시작하기
이 자습서를 수행하려면 적어도 직원 목록 및 직원 편집 화면이 있어야 하므로 아직 수행하지 않은 경우 이전 세 개의 자습서를 따르는 것이 좋습니다. 그렇지 않으면 수업 자료에서 사용할 수 있는 빠른 시작 응용 프로그램을 설치하십시오.
이 자습서를 시작하려면 EmployeeDirectory 모듈이 열린 Service Studio가 필요합니다. 아래 화면에 애플리케이션 소스가 표시되어야 합니다.
프로젝트 추가
애플리케이션의 프로젝트에 대한 개념과 UI를 추가하여 이 튜토리얼을 시작하겠습니다.
프로젝트 엔티티
데이터 모델은 우리 앱의 필수적인 부분입니다. 따라서 앱에 프로젝트를 포함하려면 먼저 데이터 모델에 프로젝트를 나타내야 합니다.
Service Studio에서 Data 탭으로 전환하고 Database를 마우스 오른쪽 버튼으로 클릭 하고 Add Entity를 선택합니다 .
엔터티 이름을 Project 로 설정합니다 .
프로젝트 엔터티를 마우스 오른쪽 단추로 클릭하고 엔터티 특성 추가를 선택합니다 .
속성의 Name을 Name 으로 설정 하고 Is Mandatory 를 Yes 로 설정합니다 .
Description 이라는 다른 속성을 만들고 길이 속성을 250 으로 변경합니다 .
텍스트 속성의 길이를 변경할 수 있습니다. 이렇게 하면 필드에 대해 더 길거나 짧은 텍스트가 예상되는 경우 이에 따라 해당 길이 속성을 조정할 수 있습니다.
부트스트랩 데이터
Service Studio 내에서 또는 브라우저에서 응용 프로그램과 상호 작용하여 언제든지 새 프로젝트와 직원을 추가할 수 있습니다. 이 경우 첫 번째 단원과 마찬가지로 Excel 파일을 사용하지만 약간의 변형이 있습니다. Entity는 이미 생성되었으므로 데이터로만 채울 것입니다.
계속하기 전에 학습 자료에서 Projects.xlsx 파일을 다운로드했는지 확인하십시오 .
프로젝트 엔터티를 마우스 오른쪽 단추로 클릭하고 고급을 선택한 다음 Excel에서 부트스트랩 데이터에 대한 작업 만들기를 선택합니다 .
리소스 폴더에서 사용할 수 있는 Projects.xls 파일을 선택 하고 열기를 클릭합니다.
Excel 열과 해당 엔터티를 보여주는 대화 상자가 나타납니다. 올바른지 확인한 다음 진행 을 클릭합니다 .
자신의 Excel 파일을 사용하는 경우 열 이름이 프로젝트 엔터티 속성의 이름과 일치하는지 확인하십시오. 이제 데이터로 채워진 프로젝트가 있습니다.
모듈을 게시합니다.
프로젝트를 프로젝트 리더에 연결
이제 프로젝트를 리더와 연결하기만 하면 됩니다. 즉, 프로젝트를 주도한 직원을 참조하는 엔티티에 속성을 추가해야 합니다.
데이터 탭에서 데이터 모델 다이어그램 EmployeeDirectoryDataModel 을 엽니다 .
프로젝트 엔터티를 다이어그램에 끌어다 놓습니다 .
직원 엔터티 옆에 마우스를 놓고 커넥터를 프로젝트 엔터티로 드래그하여 관계를 만듭니다.
프로젝트 엔터티 에서 직원 으로 커넥터를 끌면 어떻게 될까요 ? 결과는 같을까요? 다음 단계 직후 답을 찾으십시오.
자동으로 생성된 EmployeeId가 생성한 속성을 클릭 하고 이름을 ProjectLeader 로 바꿉니다 .
이전 질문으로 돌아가서 커넥터를 반대 방향으로 끌면 여러 직원이 연결된 프로젝트가 있지만 직원은 프로젝트의 일부만 될 수 있습니다.
프로젝트 엔터티를 마우스 오른쪽 단추로 클릭 하고 데이터 보기 또는 편집 옵션을 선택합니다.
Service Studio의 기본 창에서 프로젝트의 데이터를 볼 수 있습니다. 시간을 내어 일부 프로젝트 리더를 프로젝트에 할당하십시오. 완료되면 적용을 선택합니다 .
모듈을 게시합니다.
프로젝트 표시 및 편집
이제 데이터베이스가 프로젝트를 수용할 준비가 되었으므로 목록 및 세부 정보 화면부터 시작하여 프로젝트에 대한 UI를 만들 차례입니다.
인터페이스 탭 에서 MainFlow를 두 번 클릭하여 엽니다.
데이터 탭 으로 다시 전환 하고 프로젝트 엔터티를 끌어 메인플로에 놓습니다.
그리고 두 개의 화면이 더 있습니다!
만든 것을 볼 수 있도록 브라우저에서 앱을 게시하고 엽니다. 페이지 상단의 앱 메뉴를 통해 새 화면으로 이동할 수 있으며 일부 프로젝트를 편집하거나 새 프로젝트를 추가할 수도 있습니다!
직원 세부 정보 화면에서 프로젝트 가져오기
이 자습서의 마지막 부분에서는 EmployeeDetail 화면에서 직원이 이끄는 프로젝트를 표시하는 데 중점을 둡니다. 이제 필요한 데이터를 가져오는 것으로 시작하겠습니다.
인터페이스 탭에서 EmployeeDetail 화면을 마우스 오른쪽 버튼으로 클릭하고 Fetch Data from Database 를 선택합니다 .
이 직원이 이끄는 프로젝트를 가져오고 싶습니다. 따라서 먼저 이전 단계 이후에 열린 빈 Aggregate를 클릭하고 Project Entity를 Aggregate의 소스로 선택합니다.
지금까지 Aggregate는 모든 프로젝트를 가져오고 있지만 우리는 그것을 원하지 않습니다. 이제 프로젝트 리더별로 프로젝트를 필터링해 보겠습니다. 필터 탭을 클릭한 다음 필터 추가 를 클릭합니다 .
식을 다음과 같이 설정합니다 Project.ProjectLeader = EmployeeId. 완료되면 닫기 버튼을 클릭합니다 .
이 필터는 직원을 고유하게 식별하는 Screen의 EmployeeId 입력 매개변수를 활용하고 이를 자습서 앞부분에서 프로젝트에 추가한 ProjectLeader 필드와 비교합니다. 이렇게 하면 리더가 화면에 표시되는 직원의 ID와 일치하는 프로젝트만 가져오는 것을 알 수 있습니다.
EmployeeDetail 화면에 프로젝트 표시
이제 직원이 주도하는 프로젝트를 나열하는 UI를 정의해 보겠습니다.
EmployeeDetail 화면을 두 번 클릭하여 엽니다. 컨테이너를 드래그 앤 드롭하여 MainContent 에 놓아 직원 정보가 있는 Form 아래에 배치합니다.
컨테이너 내부에 프로젝트를 작성합니다 .
제목을 더 잘 보이게 하려면 방금 추가한 컨테이너를 선택하고 Service Studio의 오른쪽 사이드바에서 텍스트의 스타일 클래스 속성을 "heading2" (또는 원하는 경우 다른 항목)로 변경합니다.
여전히 컨테이너 속성에서 스타일 탭으로 전환합니다.
OutSystems UI 요소에 스타일을 쉽게 추가할 수 있으며 각 요소에는 해당 속성의 스타일 섹션이 있습니다.
상하 여백을 20px 로 설정합니다 .
이 경우 상단 여백과 하단 여백을 20픽셀로 설정합니다. 즉, 이 여백보다 컨테이너에 더 가까운 요소는 없습니다. 이것은 요소 사이에 분리를 만듭니다. 컨테이너는 다음과 같아야 합니다.
Screen으로 돌아가서 왼쪽 사이드바에서 List 요소를 선택하고 MainContent 로 드래그하여 Container 아래에 배치합니다.
오른쪽 사이드바에서 List의 Source 속성을 Aggregate에서 가져온 프로젝트 목록으로 설정합니다. GetProjectsByProjectLeader.List
이렇게 하면 목록에 소스로 표시할 프로젝트가 포함됩니다.
GetProjectsByProjectLeader Aggregate를 확장 하고 프로젝트의 이름 속성을 목록으로 드래그합니다.
설명 속성도 드래그하여 이름 아래에 놓습니다.
브라우저에서 게시하고 테스트합니다. 연결된 프로젝트가 있는 직원의 세부 정보를 엽니다.
보너스 - 링크 프로젝트
EmployeeDetail 화면에 Employee의 프로젝트를 나열했습니다. 그러나 이 목록은 클릭할 수 없으므로 보너스 기능으로 사용자가 클릭하여 프로젝트를 탐색하도록 허용할 수 있습니다.
프로젝트 목록에서 첫 번째 프로젝트의 ListItem 요소를 선택합니다.
ListItem을 마우스 오른쪽 버튼으로 클릭하고 Link to->MainFlow\ProjectDetail을 선택합니다.
이로 인해 오류가 발생합니다. 걱정 마!
ListItem 요소를 다시 선택하고 오른쪽 사이드바에서 해당 속성을 확인합니다. ProjectDetail Screen에는 해당 값을 수신하는 입력 매개변수가 있으므로 프로젝트의 ID를 기대하고 있습니다. 집계를 다시 활용하고 누락된 값을 GetProjectsByProjectLeader.List.Current.Project.Id 로 설정해 보겠습니다 .
사용자가 클릭한 프로젝트( GetProjectByProjectLeader.List.Current ) 를 자동으로 가져오고 해당 ID( Project.Id )를 전달합니다.
브라우저에서 앱 게시 및 열기
학습 자료 다운로드 ▼
개요
이 자습서에서는 이번에는 앱에 프로젝트를 추가하여 Employee Directory 애플리케이션을 계속 확장합니다. 프로젝트를 추가하면 애플리케이션에 다음이 포함됩니다.
이러한 요구 사항을 처음부터 구현하고 그 과정에서 OutSystems의 몇 가지 중요한 측면을 이해하게 됩니다.
따라해보세요!
Employee Directory 앱에는 이 시점에서 3개의 화면이 있어야 합니다.
필터 및 페이지 매김이 있는 직원 목록이 있는 직원 목록 . 프로젝트의 현재 기본 화면입니다.
직원 사진을 포함한 직원 데이터를 편집할 수 있는 직원 편집 화면 .
회사의 다음 5명의 신입 사원과 이번 달에 생일이 있는 직원을 볼 수 있는 대시보드 화면 입니다 .
이 자습서에서는 응용 프로그램에 프로젝트를 추가합니다.
데이터 모델
Employee Directory 애플리케이션에 프로젝트를 포함하려면 먼저 데이터 모델을 수정하고 프로젝트에 대한 새 엔터티를 포함합니다.
또한 프로젝트에는 프로젝트 리더(Employee)가 있으므로 프로젝트는 직원과 관계가 있습니다.
프로젝트 나열
애플리케이션에 프로젝트가 있으면 EmployeeDetail 화면을 편집하여 Employee가 주도하는 프로젝트 목록을 포함합니다.
How?
시작하기
이 자습서를 수행하려면 적어도 직원 목록 및 직원 편집 화면이 있어야 하므로 아직 수행하지 않은 경우 이전 세 개의 자습서를 따르는 것이 좋습니다. 그렇지 않으면 수업 자료에서 사용할 수 있는 빠른 시작 응용 프로그램을 설치하십시오.
이 자습서를 시작하려면 EmployeeDirectory 모듈이 열린 Service Studio가 필요합니다. 아래 화면에 애플리케이션 소스가 표시되어야 합니다.
프로젝트 추가
애플리케이션의 프로젝트에 대한 개념과 UI를 추가하여 이 튜토리얼을 시작하겠습니다.
프로젝트 엔티티
데이터 모델은 우리 앱의 필수적인 부분입니다. 따라서 앱에 프로젝트를 포함하려면 먼저 데이터 모델에 프로젝트를 나타내야 합니다.
Service Studio에서 Data 탭으로 전환하고 Database를 마우스 오른쪽 버튼으로 클릭 하고 Add Entity를 선택합니다 .
엔터티 이름을 Project 로 설정합니다 .
프로젝트 엔터티를 마우스 오른쪽 단추로 클릭하고 엔터티 특성 추가를 선택합니다 .
속성의 Name을 Name 으로 설정 하고 Is Mandatory 를 Yes 로 설정합니다 .
Description 이라는 다른 속성을 만들고 길이 속성을 250 으로 변경합니다 .
텍스트 속성의 길이를 변경할 수 있습니다. 이렇게 하면 필드에 대해 더 길거나 짧은 텍스트가 예상되는 경우 이에 따라 해당 길이 속성을 조정할 수 있습니다.
부트스트랩 데이터
Service Studio 내에서 또는 브라우저에서 응용 프로그램과 상호 작용하여 언제든지 새 프로젝트와 직원을 추가할 수 있습니다. 이 경우 첫 번째 단원과 마찬가지로 Excel 파일을 사용하지만 약간의 변형이 있습니다. Entity는 이미 생성되었으므로 데이터로만 채울 것입니다.
계속하기 전에 학습 자료에서 Projects.xlsx 파일을 다운로드했는지 확인하십시오 .
프로젝트 엔터티를 마우스 오른쪽 단추로 클릭하고 고급을 선택한 다음 Excel에서 부트스트랩 데이터에 대한 작업 만들기를 선택합니다 .
리소스 폴더에서 사용할 수 있는 Projects.xls 파일을 선택 하고 열기를 클릭합니다.
Excel 열과 해당 엔터티를 보여주는 대화 상자가 나타납니다. 올바른지 확인한 다음 진행 을 클릭합니다 .
자신의 Excel 파일을 사용하는 경우 열 이름이 프로젝트 엔터티 속성의 이름과 일치하는지 확인하십시오. 이제 데이터로 채워진 프로젝트가 있습니다.
모듈을 게시합니다.
프로젝트를 프로젝트 리더에 연결
이제 프로젝트를 리더와 연결하기만 하면 됩니다. 즉, 프로젝트를 주도한 직원을 참조하는 엔티티에 속성을 추가해야 합니다.
데이터 탭에서 데이터 모델 다이어그램 EmployeeDirectoryDataModel 을 엽니다 .
프로젝트 엔터티를 다이어그램에 끌어다 놓습니다 .
직원 엔터티 옆에 마우스를 놓고 커넥터를 프로젝트 엔터티로 드래그하여 관계를 만듭니다.
프로젝트 엔터티 에서 직원 으로 커넥터를 끌면 어떻게 될까요 ? 결과는 같을까요? 다음 단계 직후 답을 찾으십시오.
자동으로 생성된 EmployeeId가 생성한 속성을 클릭 하고 이름을 ProjectLeader 로 바꿉니다 .
이전 질문으로 돌아가서 커넥터를 반대 방향으로 끌면 여러 직원이 연결된 프로젝트가 있지만 직원은 프로젝트의 일부만 될 수 있습니다.
프로젝트 엔터티를 마우스 오른쪽 단추로 클릭 하고 데이터 보기 또는 편집 옵션을 선택합니다.
Service Studio의 기본 창에서 프로젝트의 데이터를 볼 수 있습니다. 시간을 내어 일부 프로젝트 리더를 프로젝트에 할당하십시오. 완료되면 적용을 선택합니다 .
모듈을 게시합니다.
프로젝트 표시 및 편집
이제 데이터베이스가 프로젝트를 수용할 준비가 되었으므로 목록 및 세부 정보 화면부터 시작하여 프로젝트에 대한 UI를 만들 차례입니다.
인터페이스 탭 에서 MainFlow를 두 번 클릭하여 엽니다.
데이터 탭 으로 다시 전환 하고 프로젝트 엔터티를 끌어 메인플로에 놓습니다.
그리고 두 개의 화면이 더 있습니다!
만든 것을 볼 수 있도록 브라우저에서 앱을 게시하고 엽니다. 페이지 상단의 앱 메뉴를 통해 새 화면으로 이동할 수 있으며 일부 프로젝트를 편집하거나 새 프로젝트를 추가할 수도 있습니다!
직원 세부 정보 화면에서 프로젝트 가져오기
이 자습서의 마지막 부분에서는 EmployeeDetail 화면에서 직원이 이끄는 프로젝트를 표시하는 데 중점을 둡니다. 이제 필요한 데이터를 가져오는 것으로 시작하겠습니다.
인터페이스 탭에서 EmployeeDetail 화면을 마우스 오른쪽 버튼으로 클릭하고 Fetch Data from Database 를 선택합니다 .
이 직원이 이끄는 프로젝트를 가져오고 싶습니다. 따라서 먼저 이전 단계 이후에 열린 빈 Aggregate를 클릭하고 Project Entity를 Aggregate의 소스로 선택합니다.
지금까지 Aggregate는 모든 프로젝트를 가져오고 있지만 우리는 그것을 원하지 않습니다. 이제 프로젝트 리더별로 프로젝트를 필터링해 보겠습니다. 필터 탭을 클릭한 다음 필터 추가 를 클릭합니다 .
식을 다음과 같이 설정합니다 Project.ProjectLeader = EmployeeId. 완료되면 닫기 버튼을 클릭합니다 .
이 필터는 직원을 고유하게 식별하는 Screen의 EmployeeId 입력 매개변수를 활용하고 이를 자습서 앞부분에서 프로젝트에 추가한 ProjectLeader 필드와 비교합니다. 이렇게 하면 리더가 화면에 표시되는 직원의 ID와 일치하는 프로젝트만 가져오는 것을 알 수 있습니다.
EmployeeDetail 화면에 프로젝트 표시
이제 직원이 주도하는 프로젝트를 나열하는 UI를 정의해 보겠습니다.
EmployeeDetail 화면을 두 번 클릭하여 엽니다. 컨테이너를 드래그 앤 드롭하여 MainContent 에 놓아 직원 정보가 있는 Form 아래에 배치합니다.
컨테이너 내부에 프로젝트를 작성합니다 .
제목을 더 잘 보이게 하려면 방금 추가한 컨테이너를 선택하고 Service Studio의 오른쪽 사이드바에서 텍스트의 스타일 클래스 속성을 "heading2" (또는 원하는 경우 다른 항목)로 변경합니다.
여전히 컨테이너 속성에서 스타일 탭으로 전환합니다.
OutSystems UI 요소에 스타일을 쉽게 추가할 수 있으며 각 요소에는 해당 속성의 스타일 섹션이 있습니다.
상하 여백을 20px 로 설정합니다 .
이 경우 상단 여백과 하단 여백을 20픽셀로 설정합니다. 즉, 이 여백보다 컨테이너에 더 가까운 요소는 없습니다. 이것은 요소 사이에 분리를 만듭니다. 컨테이너는 다음과 같아야 합니다.
Screen으로 돌아가서 왼쪽 사이드바에서 List 요소를 선택하고 MainContent 로 드래그하여 Container 아래에 배치합니다.
오른쪽 사이드바에서 List의 Source 속성을 Aggregate에서 가져온 프로젝트 목록으로 설정합니다. GetProjectsByProjectLeader.List
이렇게 하면 목록에 소스로 표시할 프로젝트가 포함됩니다.
GetProjectsByProjectLeader Aggregate를 확장 하고 프로젝트의 이름 속성을 목록으로 드래그합니다.
설명 속성도 드래그하여 이름 아래에 놓습니다.
브라우저에서 게시하고 테스트합니다. 연결된 프로젝트가 있는 직원의 세부 정보를 엽니다.
보너스 - 링크 프로젝트
EmployeeDetail 화면에 Employee의 프로젝트를 나열했습니다. 그러나 이 목록은 클릭할 수 없으므로 보너스 기능으로 사용자가 클릭하여 프로젝트를 탐색하도록 허용할 수 있습니다.
프로젝트 목록에서 첫 번째 프로젝트의 ListItem 요소를 선택합니다.
ListItem을 마우스 오른쪽 버튼으로 클릭하고 Link to->MainFlow\ProjectDetail을 선택합니다.
이로 인해 오류가 발생합니다. 걱정 마!
ListItem 요소를 다시 선택하고 오른쪽 사이드바에서 해당 속성을 확인합니다. ProjectDetail Screen에는 해당 값을 수신하는 입력 매개변수가 있으므로 프로젝트의 ID를 기대하고 있습니다. 집계를 다시 활용하고 누락된 값을 GetProjectsByProjectLeader.List.Current.Project.Id 로 설정해 보겠습니다 .
사용자가 클릭한 프로젝트( GetProjectByProjectLeader.List.Current ) 를 자동으로 가져오고 해당 ID( Project.Id )를 전달합니다.
브라우저에서 앱 게시 및 열기
학습 자료 다운로드 ▼