4.1 소개
https://academy.mendix.com/link/modules/184/lectures/1431/4.1-Introduction
모듈 3을 완료하지 못했다면 이 페이지 상단에 있는 프로젝트 패키지(mpk 파일)를 다운로드하여 이 학습을 계속 진행하세요.
이전 모듈에서는 경비 앱이 북해 조선소의 브랜딩과 일치하는지 확인했습니다. 이제 앱의 첫 번째 주요 기능을 구축할 차례입니다:
일반 직원이 시스템에 자재 및 도구에 대한 요청을 추가할 수 있도록 허용합니다.
직원들은 마법사를 통해 이러한 요청을 추가할 수 있습니다:
첫 페이지에서 기존 프로젝트(건조 중인 선박)를 선택하거나 새 프로젝트를 만들 수 있습니다. 여러 건조 프로젝트에 사용될 도구에 대한 요청인 경우, 여러 프로젝트를 선택할 수 있어야 합니다.
두 번째 페이지에서 하나 이상의 자재/도구 요청을 추가합니다.
세 번째 페이지에서는 요청을 보내기 전에 요청을 확인할 수 있습니다.
4.2 기본 사항 배치하기
마법사 구축을 시작하기 전에 도메인 모델을 확장해야 앱에서 요청 및 프로젝트를 동적 데이터로 사용할 수 있습니다.
Expenses 모듈의 도메인 모델을 엽니다.
다음 속성을 가진 Project 엔티티를 추가합니다:
- Number (Autonumber).
- Name (String).
액세스 규칙을 구성합니다:
Requestor 사용자 역할에 만들기 및 읽기, 쓰기 액세스 권한을 부여합니다. Autonumber 속성은 자동으로 읽기 액세스 권한만 얻습니다.
Approver 사용자 역할에 읽기 액세스 권한을 부여합니다.
다음 속성을 가진 Request 엔티티를 추가합니다:
- Title (String).
- Status (Enumeration; ‘New’, ‘Approved’, ‘Rejected’, default to ‘New’).
- Location (Enumeration; ‘Boston’, ‘Rotterdam’).
- TotalAmount (Decimal).
다음 시스템 멤버를 선택합니다: 엔티티 속성 페이지의 오른쪽 상단에 있음
- Store ‘changedBy’
- Store ‘owner’
- Store ‘changedDate’
- Store ‘createdDate’
Requestor 가 연결의 소유권을 가진 Project 엔티티에 *-* 연결을 추가합니다.
액세스 규칙을 구성합니다:
Requestor 사용자 역할에 만들기 및 읽기 액세스 권한을 부여합니다.
Title, Status 및 Location 속성 및 Request_Project 연결에 대한 읽기, 쓰기 액세스 권한을 허용합니다.
Requestor 는 객체의 소유자인 경우에만 이 액세스 권한을 가져야 합니다.
Approver 및 Administrator 사용자 역할에 읽기 액세스 권한을 부여합니다.
다음 속성을 가진 RequestLine 엔티티를 추가합니다:
- Description (String)
- Price (Decimal)
Request 엔티티에 1-* 연결을 추가합니다. 여기서 하나의 요청은 여러 개의 RequestLines 을 가질 수 있습니다.
액세스 규칙을 구성합니다:
Requestor 사용자 역할에 만들기, 삭제 및 읽기, 쓰기 액세스 권한을 부여합니다.
Approver 사용자 역할에 읽기 액세스 권한을 부여합니다.
4.3 마법사 페이지 템플릿
요청 마법사를 만들 시간입니다! 이를 위해 멘딕스 마법사 페이지 템플릿 중 하나를 사용할 것입니다. 마법사의 각 단계마다 동일한 페이지 템플릿을 사용하여 별도의 페이지를 만들어야 합니다. 페이지 상단의 진행률 표시줄을 구성하여 사용자에게 현재 어느 단계에 있는지 표시할 수 있습니다.
Andrea가 요청한 마법사에는 세 단계가 포함되어 있습니다:
프로젝트 선택
요청 줄 추가하기
요청을 보내기 전에 요청을 확인합니다.
다음 강의에서는 마법사의 세 가지 기본 페이지를 만들고 각 페이지에 특정 기능을 추가합니다.
4.3.1 마법사 만들기
페이지의 기초와 페이지가 상호 작용하는 방식을 구축해 봅시다. 이 기능은 앱에서 독립된 기능으로 식별할 수 있으므로 페이지 및 마이크로플로우와 같은 모든 관련 문서를 저장할 새 폴더를 만들어야 합니다.
Expenses 모듈에 새 폴더 Request 을 추가합니다.
Wizard Form 페이지 템플릿을 사용하여 세 페이지를 만듭니다.
이름: Request_Wizard_Step1, ..._Step2 및 ..._Step3.
탐색 레이아웃: Atlas_TopBar.
새로 생성한 Request 폴더에 저장합니다.
각 페이지의 단계가 올바른 클래스를 가져왔는지 확인합니다. 페이지 템플릿의 기본값은 2단계에는 활성 클래스(마법사-단계-활성)가 설정되고 1단계에는 방문한 클래스(마법사-단계-방문)가 설정되는 것입니다. 이러한 클래스 이름은 단계 번호를 감싸는 컨테이너에 설정됩니다.
각 페이지에는 4단계 컨테이너가 제거되어야 합니다.
세 번째 페이지에서 1단계와 2단계는 클래스 이름 wizard-step-visited, 3단계는 클래스 이름 wizard-step-active으로 설정해야 합니다. ( 각각 컨테이너1,2,3의 속성의 클래스를 말합니다. )
두 번째 페이지에서는 클래스 이름을 변경할 필요가 없습니다.
첫 번째 페이지에서 1단계는 wizard-step-active라는 클래스명을 가져와야 하고 어떤 단계에서도 wizard-step-visited라는 클래스명을 가져와서는 안 됩니다.
페이지 상단의 헤더가 보이시나요? 이 헤더를 코드 조각으로 변환하면 텍스트를 한 번만 입력하고 세 페이지 모두에서 해당 헤더를 다시 사용할 수 있습니다. 스니펫을 사용하면 내용을 변경하면 앱 전체에 자동으로 업데이트된다는 이점이 있습니다. 따라서 나중에 마법사의 헤더에 대한 마음이 바뀌더라도 한 번만 변경하면 됩니다!
마법사 헤더를 감싸는 가장 바깥쪽 컨테이너를 선택합니다.
컨테이너를 마우스 오른쪽 버튼으로 클릭하고 Extract snippet...을 클릭합니다.
코드조각의 이름을 Wizard_Header로 지정하고 확인을 클릭합니다.
Wizard_Header 코드조각의 텍스트를 편집합니다. 아래와 같이 바꿉니다.:
코드 조각을 Request 폴더의 새 Resources 하위 폴더로 옮깁니다.
현재 헤더를 각 마법사 페이지의 코드 조각으로 바꿉니다.
각 페이지의 data view를 Request 엔티티에 연결합니다.
Data source : Context
Automatically fill the contents of the data view "No" 선택
data view 의 콘텐츠 비우기
4.3.2 마법사에 탐색 기능 추가하기
마법사에서는 사용자가 마법사의 다음 단계로 이동하는 방법, 전달해야 하는 데이터, 데이터베이스에 데이터를 저장해야 하는 시기를 고려하는 것이 매우 중요합니다.
다음 단계에 따라 마법사 내의 버튼을 조정하세요. 각 페이지의 하단에 있는 두 개의 버튼은 프로세스에서 앞으로 이동하고 다른 하나는 뒤로 이동하는 데 필요합니다. 첫 페이지와 마지막 페이지에는 각각 이전 및 다음 대신 취소 및 완료 버튼이 필요합니다.
직원이 1단계에 있는 경우 요청을 취소할 수 있어야 하므로 이전 버튼을 페이지를 닫는 기본 변경 사항 취소 버튼으로 변경합니다.
직원이 3단계에 있는 경우에는 요청을 완료하고 데이터베이스에 저장할 수 있어야 합니다. 다음 버튼을 기본값인 페이지에 변경 내용 저장 버튼으로 변경하여 이를 수행할 수 있습니다.
페이지 간에 앞뒤로 이동할 수 있도록 하려면 각 단계 페이지에서 다음을 수행합니다:
다음 페이지를 열려면 마법사의 현재 단계를 닫는 페이지 닫기 활동과 마법사의 다음 단계를 여는 페이지 표시 활동이 포함된 마이크로플로우를 만듭니다.
이전 페이지를 열려면 유사한 마이크로플로우를 만듭니다. 이제 다음 페이지가 아닌 이전 페이지만 열립니다.
페이지 표시 활동에서 요청 개체를 전달하는 것을 잊지 마세요!
요청자 모듈 역할에 생성된 마이크로플로우에 대한 액세스 권한을 부여합니다.
요청자 모듈 역할에 프로젝트 엔티티에 대한 읽기 액세스 권한을 부여합니다.
각 페이지의 버튼 스타일을 다음과 같이 변경합니다:
버튼 1단계:
버튼 2단계:
버튼 3단계:
4.4 참조 세트 선택기
이제 요청 마법사의 기본 사항을 정리했으니 마법사의 1단계를 완료할 차례입니다. 이 페이지에서는 직원이 소모품이 필요한 위치(보스턴 또는 로테르담)와 요청이 속한 프로젝트를 선택할 수 있습니다.
요청에 대해 여러 프로젝트를 선택하고 필요한 경우 그 자리에서 새 프로젝트를 만들 수 있어야 합니다. 참조 세트 선택기 위젯을 사용하여 여러 프로젝트를 선택할 수 있습니다.
참조 세트 선택기는 Mendix에서 연결된 개체를 선택하는 데 사용하는 위젯입니다. 다중 선택이 가능한 경우 이 옵션을 사용할 수 있습니다. 즉, * - * 연결을 사용합니다.
드롭다운 또는 선택 페이지에 옵션을 표시하도록 위젯을 구성할 수 있습니다. 선택할 개체 목록이 매우 큰 경우에는 선택 페이지에 표시하는 것이 가장 좋습니다. 이렇게 하면 나중에 목록을 로드할 수 있으므로 초기 페이지 로딩 속도가 빨라집니다. 또한 사용자가 거대한 드롭다운 목록을 스크롤할 필요가 없으므로 더욱 사용자 친화적인 접근 방식입니다.
4.4.1 마법사의 첫 페이지 완료
이제 마법사의 첫 페이지를 완성해 보겠습니다:
Request_Wizard_Step1 페이지를 엽니다.
양식 제목을 페이지의 멋진 제목으로 바꿉니다(예: 프로젝트 선택).
Connector(툴 오른쪽 상단)를 사용하여 Location 속성에 대한 라디오 버튼 위젯을 추가합니다.
라디오 버튼 위젯 아래에 입력 참조 세트 선택기를 배치합니다. 이렇게 하면 사용자가 하나 이상의 프로젝트를 선택할 수 있습니다.
입력 참조 세트 선택기를 프로젝트 엔티티의 이름 속성에 연결합니다(요청_프로젝트 연결 사용).
입력 참조 집합 선택기 위젯을 마우스 오른쪽 버튼으로 클릭하고 선택 페이지 생성....
Name: Project_Select
탐색 레이아웃: PopupLayout
페이지 템플릿: Data Grid
새로 만든 Project_Select 페이지를 엽니다.
데이터 그리드 내의 툴바를 마우스 오른쪽 버튼으로 클릭하고 만들기 버튼을 추가합니다.
새 버튼을 두 번 클릭하여 해당 속성을 엽니다:
버튼 스타일을 success로 설정합니다.
Edit location를 Inline at top으로 설정합니다.
Name 열을 두 번 클릭하고 열을 편집 가능하도록 설정합니다.
4.5 데이터 그리드에서 단일 및 다중 선택
마법사의 두 번째 페이지를 완료할 시간입니다. 이 페이지에서 요청자는 요청에 하나 이상의 요청 줄을 추가할 수 있습니다. 또한 기존 요청 줄을 한 번에 하나씩 편집할 수 있어야 합니다. 마지막으로 기존 요청 줄을 삭제할 수 있어야 합니다(한 번에 여러 개).
이 기능을 구축하려면 단일(편집) 및/또는 다중 선택(삭제)을 지원하는 버튼이 있는 데이터 그리드를 추가해야 합니다. 다중 선택을 지원하는 데이터 그리드에서는 기본 편집 및 삭제 버튼이 작동하지 않습니다. 단일 선택 모드가 있는 데이터 그리드에서만 작동합니다. 편집 및 삭제 기능을 계속 사용하려면 마이크로플로우를 트리거하는 두 개의 작업 단추를 추가해야 합니다.
다음 연습을 계속 진행하여 이러한 마이크로플로우를 작성하는 방법을 배우세요!
4.5.1 마법사의 두 번째 페이지 완료
Request_Wizard_Step2 를 엽니다.
양식 제목을 페이지의 멋진 제목으로 바꿉니다(예: 어떤 도구 및/또는 자료가 필요하십니까?).
빈 data view 에 data grid 위젯을 배치합니다.
RequestLine_Request 연을 통해 RequestLine 엔티티에 연결합니다.
예를 선택하여 데이터 그리드의 내용을 자동으로 채웁니다.
데이터 그리드를 더블클릭하고 Selection mode를 Multi-selection으로 설정합니다.
먼저 새 버튼에 집중해 보겠습니다.
새로 만들기 버튼을 마우스 오른쪽 버튼으로 클릭하고 Generate page…..
다음 아래 이미지를 참고하여 설정합니다:
Requestor 에게 새 페이지에 대한 액세스 권한을 부여합니다.
다음은 Edit 버튼입니다.
버튼을 새 마이크로플로우에 연결합니다: ACT_RequestLine_Edit.
Requestor 에게 마이크로플로우에 대한 액세스 권한을 부여합니다.
입력 매개변수는 기본적으로 RequestLineList 객체와 Request 객체입니다. 즉, 편집 페이지에서는 하나의 객체만 전달할 수 있으므로 마이크로플로우에서 하나의 RequestLine만 선택되었는지 확인해야 합니다.
이 마이크로플로우에서는 요청 개체가 필요하지 않으므로 Request 개체 입력 매개변수를 삭제합니다.
다음 이미지를 사용하여 나머지 마이크로플로우를 빌드합니다:
Show page Activity 에서 RequestLine_NewEdit 페이지를 선택하고 RequestLine 객체를 전달합니다.
마지막으로 Delete 버튼입니다. 이 버튼은 다중 선택이 필요합니다.
버튼을 새 마이크로플로우에 연결합니다: ACT_RequestLine_Delete.
Requestor 에게 마이크로플로우에 대한 액세스 권한을 부여합니다.
Request 개체 입력 매개변수를 다시 삭제합니다.
개체 삭제 활동으로 RequestLine 개체 목록을 삭제하고 클라이언트를 새로 고칩니다.
축하합니다! 단일 및 다중 선택 기능을 모두 허용하는 데이터 그리드를 만들었습니다!
다음 강의에서는 마법사의 마지막 페이지인 사용자 지정 탐색 레이아웃의 헤더를 동적으로 만들고 홈페이지에 최신 요청을 표시하는 요청 기능 추가 작업을 마무리할 것입니다.
4.6 마무리하기
이전 강의에서는 요청 마법사의 첫 번째 페이지와 두 번째 페이지를 만들었습니다. 이 기능을 마무리하기 위해 다음 강의에서는 마법사의 마지막 페이지를 빌드하겠습니다. 이 페이지에서 요청자는 요청을 제출하기 전에 자신의 요청을 최종적으로 확인할 수 있습니다.
그런 다음 생성한 사용자 지정 탐색 레이아웃으로 돌아갑니다. 이제 도메인 모델에 요청 엔티티가 있으므로 헤더에 동적 데이터를 표시할 수 있습니다!
4.6.1 요청 확인 및 제출
마법사가 거의 완료되었으며, 요청자가 요청을 보내기 전에 요청을 최종적으로 확인할 수 있는 페이지만 남았습니다.
요청 마법사의 세 번째 페이지를 엽니다.
다음 이미지를 사용하여 이 페이지의 콘텐츠를 작성합니다:
입력 참조 세트 선택기를 사용하여 Project(s) 값을 표시하고 Editable 을 Never로 설정합니다.
Location 및 TotalAmount 텍스트 위젯의 디자인 속성 Weight를Semibold로 설정합니다.
TotalAmount 속성이 보이시나요? 아직 계산되지 않았습니다! 각 요청에 대해 요청된 총 금액이 계산되는지 확인해 보겠습니다.
도메인 모델을 엽니다.
RequestLine 엔티티에 커밋 후 이벤트 핸들러를 추가하고 새 마이크로플로우에 연결합니다(ACO_RequestLine_CalculateTotalAmount).
마이크로플로우를 열고 다음 이미지를 사용하여 로직을 빌드합니다:
4.6.2 사용자 지정 탐색 레이아웃을 동적으로 만들기
모듈 3에서 사용자 지정 탐색 레이아웃을 만들고 여기에 Expenses 헤더를 추가했습니다. 그 당시에는 헤더를 동적으로 만들기 위한 데이터(엔티티 및 속성)가 앱에 아직 없었지만 이제는 있습니다! 또한 제출된 요청과 승인된 요청의 총 금액을 계산하기 위해 비지속적 엔티티를 만들 것입니다. 이제 사용자 지정 탐색 레이아웃을 완성할 시간입니다!
도메인 모델을 엽니다.
HeaderData라는 이름의 non-persistable 엔티티를 새로 만듭니다.
다음 decimal 속성을 추가합니다: AmountSubmitted, AmountApproved
Session 엔티티에 1-* 연결을 추가합니다(System 모듈에서).
Administrator, Approver 및 Requestor 에게 모든 속성에 대한 읽기 액세스 권한을 부여합니다.
HeaderExpenses 코드 조각을 엽니다.
페이지의 레이아웃 그리드에 data view를 배치합니다.
data view 내부에 두 개의 열이 있는 다른 레이아웃 그리드를 추가합니다.
데이터 뷰 아래에 컨테이너를 추가하고 이전에 배치한 레이아웃 격자의 각 열에 두 개의 컨테이너를 추가합니다.
하단 컨테이너에 만들기 버튼을 추가합니다. 이 버튼은 새 요청 개체를 만들고 요청 마법사의 첫 페이지를 열어야 합니다.
엔티티: Request.
캡션: Add Expense.
버튼 스타일: Success
On click page: Request_Wizard_Step1.
이제 Request_Wizard_Step1 페이지에 액세스할 수 있으므로 해당 페이지의 보안을 설정해야 합니다. Requestor 사용자 역할이 이 페이지에 액세스할 수 있는지 확인하세요. 이 페이지에 대한 보안을 설정했으면 이제 다른 두 마법사 페이지에 대한 보안을 설정해야 한다는 것을 알 수 있습니다. 지금 바로 설정하세요.
데이터 뷰의 데이터 원본을 마이크로 흐름으로 설정합니다. 새 마이크로플로우인 DS_HeaderData_Calculate를 만들고 이 마이크로플로우를 Resources 폴더에 배치합니다.
Administrator, Requestor 및 Approver 에게 마이크로플로우에 액세스할 수 있는 권한을 부여합니다.
새 마이크로플로우를 엽니다. 첫 번째 단계는 HeaderData 개체가 이미 존재하는지 또는 아직 만들어야 하는지 확인하는 것입니다. 이 작업은 하위 마이크로플로우에서 하는 것이 가장 쉬운데, 메인 마이크로플로우에서 반환값을 하나의 개체로 사용할 수 있기 때문입니다.
Microflow call activity를 추가합니다.
새 마이크로플로우에 연결합니다: Resources 폴더의 HeaderData_GetOrCreate에 연결합니다.
다음 이미지를 사용하여 새 하위 마이크로플로우를 빌드합니다:
이제부터는 이 마이크로플로우를 메인 마이크로플로우라고 부르겠습니다.
현재 사용자의 UserRole을 검색하기 위해 Retrieve activity 추가합니다.
Entity: UserRole
activity : First
XPath: [System.UserRoles = $currentUser]
요구 사항을 기억하시나요? Requestor 는 자신의 요청사항들만 볼 수 있어야 합니다. Approvers (및 Administrators)는 시스템 내 모든 요청을 볼 수 있어야 합니다. 그리고 제출된 모든 요청정보와 승인된 모든 요청정보가 필요합니다. 즉, 두 개의 요청 목록이 필요합니다. 첫 번째 목록은 데이터베이스 검색을 수행하여 얻을 수 있고, 두 번째 목록은 첫 번째 목록을 필터링하여 얻을 수 있습니다.
이제 첫 번째 요청 목록(제출된 모든 요청)을 가져와 보겠습니다.
기본 마이크로플로우에 마이크로플로우 호출 활동을 추가합니다.
새 마이크로플로우에 연결합니다: HeaderData_GetRequests에 연결합니다.
다음 이미지를 사용하여 마이크로플로우를 빌드합니다:
기본 마이크로 플로우로 돌아갑니다.
목록 작업 활동을 마이크로플로우에 추가합니다. 이를 사용하여 모든 요청이 포함된 목록을 기반으로 두 번째 목록을 만듭니다. 이제 Status ‘Approved’으로만 필터링합니다.
두 목록의 TotalAmount 속성의 합을 구하여 두 개의 변수를 만듭니다.
두 변수를 HeaderData 객체의 새 값으로 설정하고 이를 종료 이벤트의 반환 값으로 설정합니다.
HeaderExpenses 코드 조각으로 돌아갑니다.
데이터 뷰 내의 네 컨테이너 각각에 텍스트 위젯을 추가합니다. 다음 스크린샷을 사용하여 텍스트를 설정합니다.
HeaderData 엔티티의 AmountSubmitted 및 AmountApproved 속성을 사용합니다.
각 속성의 렌더링 모드를 Heading 1로 설정합니다.
4.6.3 홈페이지에 요청 표시하기
이제 마법사를 완전히 구축하고 헤더를 동적으로 만들었으므로 요청과 관련하여 마지막으로 해야 할 일이 하나 더 있습니다. 요청 목록을 앱 어딘가에 표시하는 것입니다. 홈페이지에 추가하는 것은 어떨까요? 이렇게 하면 사람들이 앱에 로그인할 때 요청을 즉시 볼 수 있습니다.
요청자에게는 자신의 요청만 표시되어야 합니다. 승인자와 관리자의 경우 시스템의 모든 요청이 표시되어야 합니다.
홈 페이지를 엽니다.
목록 보기 위젯을 레이아웃 그리드에 배치합니다.
로직을 다시 사용할 시간입니다! 요청자는 자신의 요청만 볼 수 있고 승인자와 관리자는 모든 요청을 볼 수 있는 마이크로플로우를 이미 만들었습니다. 이 마이크로플로우가 바로 HeaderData_GetRequests 마이크로플로우입니다. 하지만 이 마이크로플로우를 직접 재사용할 수는 없는데, UserRole 유형의 입력 매개변수가 필요하기 때문입니다. 홈페이지는 정적 페이지이므로 지금은 이 입력 매개변수를 사용할 수 없습니다.
데이터 소스를 마이크로플로로 설정합니다.
DS_Request_GetForUserRole이라는 새 마이크로플로우를 만듭니다.
데이터 소스를 선택하고 마이크로플로우를 완료한 후 목록 보기가 자동으로 채워지도록 허용하지 않습니다.
관리자, 승인자 및 요청자 모듈 역할에 대한 액세스 권한을 부여합니다.
다음 이미지를 사용하여 마이크로플로우를 작성합니다:
다음 이미지를 사용하여 목록 보기를 완성합니다:
4번에는 관리자와 요청자만 컨테이너를 볼 수 있는 조건부 표시를 적용합니다.
이 속성 경로를 사용하여 5번의 FullName 속성으로 이동합니다: System.owner/Expenses.TeamMember/Administration.Account.FullName
해당 번호가 있는 요소에 다음 클래스명을 적용합니다:
1: lv-col-md-4(목록 보기가 한 행에 3개로 표시되도록 하기 위해)
2: d-block
3: d-block
요청자 모듈 역할에 TeamMember 엔티티의 전체 이름 속성에 대한 읽기 액세스 권한을 부여합니다.
이제 안드레아를 위해 잘 작동하는 앱을 만들었습니다. 이제 확인해 봅시다.
4.6.4 기능 테스트
앱을 배포하세요(로컬에서 실행하는 것을 잊지 마세요!).
로그인한 후 데모 요청자 사용자로 전환하고 시스템에 몇 가지 요청을 추가합니다.
데모 승인자 사용자로 전환하고 홈페이지를 확인합니다.
아주 멋지네요! 하지만 승인자가 모든 새 요청을 승인할 수 있도록 허용해야 합니다! 다음 모듈에서 이 문제를 다루겠습니다.
