개요
이 자습서에서는 Employee Directory 응용 프로그램을 계속 확장하여 이번에는 PDF 파일로 이력서를 만들고 다운로드할 수 있는 리소스를 구현합니다.
이 기능을 구현하기 위해 다음 요구 사항을 따르고자 합니다.
- 사용자의 프로필 정보를 기반으로 이력서를 생성합니다.
- 이력서에는 이름, 약력, 이메일과 같은 직원의 개인 정보가 있어야 합니다.
- 이력서에는 직원이 이끄는 프로젝트도 포함되어야 합니다.
따라해보세요!
이 시점에서 Employee Directory 앱에는 5개의 화면이 있어야 합니다.
최신 신규 입사자 5명의 목록과 이번 달 직원의 생일 목록이 있는 대시 보드 화면. 이것은 응용 프로그램의 현재 기본 화면입니다.
필터 및 페이지 매김이 있는 직원 목록이 있는 직원 목록 .
직원 사진을 포함한 직원 데이터를 편집할 수 있는 직원 편집 화면 .
필터 및 페이지 매김이 있는 프로젝트 목록이 있는 프로젝트 목록 .
관련된 프로젝트 리더를 정의하여 프로젝트를 편집하거나 생성할 수 있는 프로젝트 편집 화면 .
이제 추가 화면 및 기능으로 이 앱을 확장합니다.
이력서 작성
이 튜토리얼에서는 프로젝트를 포함하여 직원 편집 화면에 표시되는 직원 정보를 기반으로 사용자가 이력서를 다운로드할 수 있도록 하는 로직과 UI를 생성합니다.
Forge 구성 요소와의 첫 번째 접촉 및 프로젝트에서 종속성을 정의하는 프로세스가 됩니다 .
Employee Directory 애플리케이션에서 우리는 목표를 달성하기 위해 세 가지 주요 단계를 수행해야 합니다.
EmployeeDetail 화면에 버튼을 추가하여 PDF를 다운로드합니다.
버튼을 직원 이력서의 모양과 느낌을 갖게 될 새 화면에 연결합니다.
Ultimate PDF 구성 요소를 활용하여 2개의 간단한 드래그 앤 드롭으로 PDF를 다운로드하는 애플리케이션의 논리를 정의합니다.
How?
이 섹션에서는 이전 섹션에서 설명한 시나리오를 구현하는 방법에 대한 철저한 단계별 설명을 보여줍니다.
시작하기
이 자습서에서는 이전 자습서를 이미 수행했으며 5개의 화면과 논리 화면 및 논리가 있다고 가정합니다.
아직 만들지 않은 경우 이전 자습서로 돌아가서 응용 프로그램을 만드는 것이 중요합니다.
이 연습을 시작하려면 EmployeeDirectory 모듈이 열린 Service Studio가 필요합니다. 아래 화면에 애플리케이션 소스가 표시되어야 합니다.
Forge에서 구성 요소 설치
OutSystems Forge는 앱 제공 시간을 단축하는 데 도움이 되는 재사용 가능한 개방형 코드 모듈, 커넥터, UI 구성 요소 및 비즈니스 솔루션의 저장소입니다. PDF 파일을 생성하고 다운로드하기 위해 Ultimate PDF Forge 구성 요소를 활용합니다 .
첫 번째 단계는 앱에서 사용할 수 있도록 환경에 설치하는 것입니다.
Service Studio에서 왼쪽 상단에 있는 Forge 탭을 클릭합니다.
검색 상자에 Ultimate PDF를 입력 하고 검색을 클릭합니다 . 이 구성 요소의 세부 정보를 열려면 첫 번째 옵션을 클릭하십시오.
설치...를 클릭하여 설치 프로세스를 시작합니다.
혹시라도 이 단계에서 일부 호환성 경고를 발견하더라도 걱정하지 마십시오. 때로는 관련 구성 요소와 다른 버전이 있을 수 있으며 이로 인해 이러한 비호환성이 발생할 수 있습니다. 따라서 학습용으로 만든 환경이라고 가정하고 강제 설치를 클릭하면 됩니다 .
이렇게 하면 Service Studio의 기본 응용 프로그램 영역으로 돌아갑니다. 앱이 설치되는 것을 볼 수 있습니다. 완료하는 데 시간이 걸립니다. 인내심을 가지십시오.
설치가 완료되면 환경에서 사용 가능한 앱이 표시됩니다.
구성 요소 참조
애플리케이션으로 돌아가서 가장 먼저 해야 할 일은 Employee Directory 앱에서 필요한 Ultimate PDF 구성 요소의 요소를 참조하는 것입니다. 구성 요소에서 응용 프로그램 모듈로 참조를 가져옵니다.
EmployeeDirectory 모듈을 열어 애플리케이션으로 돌아갑니다.
소켓 아이콘을 클릭하여 종속성 관리 상자를 엽니다.
이 옵션을 사용하면 환경에 있는 다른 응용 프로그램의 공용 요소를 참조할 수 있습니다. 이 경우 Ultimate PDF 응용 프로그램에서 원하는 요소를 검색하고 참조합니다.
토글을 모두 선택한 상태에서(1) 검색 상자에 UltimatePDF를 입력하고(2) 클릭하여 종속성 옵션을 엽니다. PrintLayout 및 ScreenToPDF를 선택합니다 (3).
이들은 PDF를 생성하는 데 사용할 시각적 요소입니다.
같은 대화 상자에서 마우스 휠을 아래로 굴려 OnApplicationReady_UltimatePDF (1) 및 ScreenToPDF_OnInitialize (2)를 선택합니다. 완료되면 적용을 클릭합니다 .
변경 사항을 저장하려면 모듈을 게시하십시오.
PDF 다운로드 기능 구현
이제 필요한 모든 것이 준비되었으므로 PDF를 다운로드하는 기능을 구현할 차례입니다.
다운로드 버튼
EmployeeDetail 화면을 두 번 클릭하여 편집 모드를 엽니다.
왼쪽 사이드바에서 Button 요소를 끌어 EmployeeDetail 화면의 작업 자리 표시자 에 놓습니다 .
Button 내부의 텍스트를 선택하고 Download 로 바꿉니다 .
왼쪽 사이드바에서 아이콘을 드래그하여 버튼 내부의 다운로드 텍스트 바로 앞에 놓습니다.
나타나는 새 대화 상자에서 원하는 아이콘 유형을 선택할 수 있습니다. 다운로드를 입력 하고 나타나는 다운로드 아이콘을 선택합니다.
오른쪽 사이드바에서 아이콘 속성을 보고 크기를 글꼴 크기 로 변경합니다.
이 속성은 아이콘의 크기를 제어하며 글꼴 크기 옵션은 텍스트와 동일한 크기의 아이콘을 넣습니다.
계속 아이콘의 속성에서 스타일 탭으로 전환하고 패딩 값을 5px 로 정의하여 아이콘 주위에 약간의 여백을 만듭니다.
아시다시피 Service Studio에 오류가 표시됩니다. 오류 메시지를 두 번 클릭하면 여전히 정의해야 하는 누락된 속성으로 안내됩니다.
이제 방금 전에 추가한 버튼에 있습니다. 오른쪽 사이드바에서 버튼의 속성으로 전환해 보겠습니다. On Click 속성이 없습니다. On Click 속성을 New Screen 으로 설정합니다 .
버튼의 On Click 속성은 버튼이 클릭 가능한 요소이기 때문에 필수이며 사용자가 버튼을 클릭할 때 버튼의 동작을 정의합니다. 이 경우 PDF에 대해 원하는 레이아웃이 있는 새 화면으로 이동합니다.
이름이 EmployeeDetailPDF 인 빈 화면을 만듭니다 .
이력서 화면
PDF 파일에 포함하고 싶은 정보를 포함하는 새로운 빈 화면을 방금 만들었습니다. 이제 Ultimate PDF 구성 요소에서 참조하는 요소의 도움을 받아 PDF 친화적인 레이아웃으로 화면을 만들 것입니다.
새 Screen의 위젯 트리를 열고 Layouts\LayoutsTopMenu를 삭제합니다.
모든 화면은 항상 변경하거나 삭제할 수 있는 기본 레이아웃으로 생성됩니다. 이 경우 Ultimate PDF 구성 요소의 레이아웃을 사용합니다.
Service Studio의 오른쪽 상단 섹션에 검색 옵션이 있습니다.
검색에 ScreenToPDF를 입력 하고 인터페이스 섹션에서 요소를 찾은 다음 화면으로 끌어다 놓습니다.
아래 이미지와 같은 것을 볼 수 있습니다.
이제 ScreentoPDF 요소가 있는 새 화면의 위젯 트리를 볼 수 있습니다. 컨테이너를 찾을 때까지 확장하고 삭제합니다.
이 컨테이너에는 몇 가지 사용 지침이 있으므로 삭제하여 화면을 정리할 수 있습니다. 이제 PDF를 생성하는 데 필요한 레이아웃이 생겼습니다.
오른쪽의 요소 트리로 돌아가 EmployeeDetail 화면을 확장하고 입력 매개변수 EmployeeId 와 GetEmployeeById 및 GetProjectsByProjectLeader 집계를 복사합니다.
재사용할 수 있으므로 EmployeeDetailPDF 화면 에 요소를 붙여넣습니다 .
이 단계 후에 Service Studio는 오류를 표시합니다. 이제 새 화면에 입력 매개변수가 있으므로 다운로드 버튼은 해당 매개변수에 대한 값을 전달해야 합니다. 고치자!
Service Studio 왼쪽 하단에서 오류가 있음을 나타내는 탭을 클릭합니다. EmployeeDetail 화면에서 오류 메시지를 두 번 클릭하여 단추 속성을 엽니다.
오른쪽 사이드바의 버튼 속성에서 EmployeeId 값을 GetEmployeeById.List.Current.Employee.Id 로 설정합니다 . 속성이 표시되지 않으면 해당 영역에서 아래로 스크롤하면 찾을 수 있습니다.
이렇게 하면 화면에 정보가 표시되는 직원의 ID가 실제로 이력서를 위해 새 화면에 전달된 ID인지 확인합니다.
최신 변경 사항을 저장하려면 모듈을 게시하십시오.
직원 세부 정보에 대한 UI 디자인
이제 이력서의 UI를 실제로 디자인할 차례입니다. 이력서가 어떻게 보여야 하는지 잊지 마세요.
EmployeeDetailPDF 화면을 두 번 클릭하여 엽니다.
왼쪽 사이드바에서 컨테이너를 드래그하여 화면에 놓습니다.
Service Studio 우측 상단의 Search 메뉴로 돌아가서 ColumnSmallLeft 를 검색하여 이전 단계에서 생성한 Container에 끌어다 놓습니다.
이 요소는 왼쪽에 더 작은 열이 있는 두 개의 열로 화면을 자동으로 나눕니다.
위젯 트리에서 Column1 요소를 마우스 오른쪽 버튼으로 클릭합니다. Insert Widget 을 클릭 한 다음 Image 를 클릭합니다 .
이미지의 속성 섹션에서 유형을 이진 데이터 로 변경 하고 이미지 콘텐츠를 GetEmployeeById.List.Current.EmployeePicture.Picture 로 변경합니다 .
이는 이미지 시각적 요소를 데이터베이스에 저장된 직원의 사진과 연결합니다.
여전히 이미지 속성에서 스타일 탭으로 전환하고 이미지 너비를 60px 로 , 이미지 클래스를 img-circle.
화면으로 돌아가 왼쪽 사이드바에서 Expression 요소를 끌어 ColumnSmallLeft 요소의 Column2 섹션에 놓습니다. 식의 값을 GetEmployeeById.List.Current.Employee.Name 으로 설정합니다 .
이 표현식에는 직원의 이름이 있습니다.
표현식을 마우스 오른쪽 버튼으로 클릭하고 Enclose in Container 를 클릭합니다 .
컨테이너 속성에서 스타일 클래스 를 "heading2".
새 식을 드래그하여 컨테이너 아래에 놓습니다. 해당 값을 GetEmployeeById.List.Current.Employee.JobPosition 으로 설정합니다 . 컨테이너에도 동봉하십시오.
이제 작업 위치에 대한 표현식이 있습니다.
왼쪽 사이드바에서 컨테이너를 드래그하여 이전에 만든 요소 아래에 놓습니다. 이 컨테이너의 스타일 클래스를 로 설정합니다 "padding-base".
새 식을 끌어서 새 컨테이너에 놓습니다. 해당 값을 GetEmployeeById.List.Current.Employee.Bio 로 설정합니다 .
그리고 이것으로 이력서에는 직원의 약력을 표시하는 표현식이 있습니다.
Service Studio의 오른쪽 상단에 있는 검색 도구로 다시 이동하여 Columns3 요소를 검색하고 끌어서 이전에 생성한 모든 요소 아래의 기본 페이지에 놓습니다.
표현식을 드래그하여 Columns3 요소의 첫 번째 열에 놓습니다. 해당 값을 GetEmployeeById.List.Current.Employee.Email 로 설정합니다 .
새 식으로 이전 단계를 반복하고 두 번째 열에 놓습니다. 해당 값을 GetEmployeeById.List.Current.Employee.Phone 으로 설정합니다 .
마지막 열의 경우 새 표현식을 사용하고 해당 값을 다음으로 설정합니다."Hired on: " + FormatDateTime(GetEmployeeById.List.Current.Employee.HiringDate,"dd/MM/yy")
이제 이메일, 전화번호 및 고용 날짜가 있는 세 개의 열이 있습니다. FormatDateTime 함수를 사용하면 날짜에 대해 원하는 형식(이 경우 일/월/년 형식)을 정의할 수 있습니다 .
이력서에 프로젝트 추가
이 시점에서 프로젝트만 누락됩니다. 해당 부분을 추가하려면 EmployeeDetail 화면의 UI를 활용합니다.
오른쪽 사이드바에서 요소 탭으로 전환합니다.
EmployeeDetail 화면을 두 번 클릭하고 위젯 트리 탭으로 전환합니다. MainContent를 확장하고 Container 및 List 요소를 선택하고 복사합니다.
요소 탭으로 다시 전환하고 EmployeeDetailPDF 화면을 두 번 클릭하여 연 다음 해당 화면의 위젯 트리로 다시 전환하십시오.
MainContent 자리 표시자에 요소를 붙여넣습니다. 이전 단계에서 추가한 다른 요소 바로 뒤에 새 요소가 있어야 합니다.
최신 변경 사항을 저장하려면 모듈을 게시하십시오. 거의 끝났습니다!
PDF 생성 및 다운로드 로직
이력서에 대한 UI를 정의했으므로 이제 사용자가 파일을 만들고 다운로드할 수 있도록 몇 가지 논리를 정의해야 합니다.
PDF를 다운로드하는 기능에는 약간의 트릭이 있습니다. 사용자가 다운로드 버튼을 클릭할 때 우리는 사용자가 새 화면으로 이동하는 것을 원하지 않습니다. 바로 지금 그런 일이 일어나더라도 말이죠. 우리가 원하는 기능은 사용자가 다운로드 버튼을 클릭하면 PDF가 생성되고 다운로드되는 것입니다. 그 기능을 만들어 봅시다.
위젯 트리를 종료하고 요소 탭으로 전환합니다.
EmployeeDetailPDF 화면 의 속성 탭에서 OnInitialize 이벤트를 선택합니다 .
모든 화면에는 일부 로직을 자동으로 트리거하는 몇 가지 이벤트가 있습니다. 이 경우 Screen이 초기화될 때 이 Action이 실행됩니다. 이 경우 Ultimate PDF의 작업 중 하나를 활용하여 PDF를 생성하고 다운로드하려고 합니다. 그 논리를 구현해 봅시다.
작업 흐름 내에서 왼쪽 사이드바에서 클라이언트 실행 작업을 끌어 작업 흐름에 놓습니다.
검색 상자에 ScreenToPDF_OnInitialize를 입력 하고 표시되는 작업을 선택합니다.
이것은 무거운 작업을 수행할 작업이며 다운로드 버튼을 클릭하면 화면에 정의된 레이아웃으로 PDF 파일을 다운로드할 수 있습니다. 그러나 채워야 할 몇 가지 속성이 있습니다.
최근 드래그한 Client Action의 속성에서 Filename에 오류가 있습니다 . 파일을 다운로드하려면 이름을 정의해야 합니다. 파일 이름 을 "EmployeeDetail.pdf".
이 논리를 닫으려면 Service Studio의 오른쪽 사이드바에 있는 논리 탭으로 전환하십시오. Client Action 폴더를 마우스 오른쪽 버튼으로 클릭 하고 시스템 이벤트 추가를 클릭합니다 . 애플리케이션 준비 시 를 선택합니다 .
이것은 사용자가 브라우저에서 사용할 수 있도록 애플리케이션이 준비되면 자동으로 실행되는 시스템 이벤트입니다. 일부 논리를 실행하는 데 활용할 수 있습니다. 이 경우 앱에서 사용할 Ultimate PDF 구성 요소를 "활성화"하는 Ultimate PDF 구성 요소의 작업을 다시 활용합니다.
Run Client Action을 방금 생성한 Action의 흐름으로 끌어다 놓습니다 .
OnApplicationReady_UltimatePDF 작업을 선택합니다 .
그리고 끝났습니다. 애플리케이션을 게시하고 브라우저에서 테스트합니다. 직원 세부 정보로 이동하여 이력서를 다운로드해 보십시오.
학습자료 다운로드 ▼
개요
이 자습서에서는 Employee Directory 응용 프로그램을 계속 확장하여 이번에는 PDF 파일로 이력서를 만들고 다운로드할 수 있는 리소스를 구현합니다.
이 기능을 구현하기 위해 다음 요구 사항을 따르고자 합니다.
따라해보세요!
이 시점에서 Employee Directory 앱에는 5개의 화면이 있어야 합니다.
최신 신규 입사자 5명의 목록과 이번 달 직원의 생일 목록이 있는 대시 보드 화면. 이것은 응용 프로그램의 현재 기본 화면입니다.
필터 및 페이지 매김이 있는 직원 목록이 있는 직원 목록 .
직원 사진을 포함한 직원 데이터를 편집할 수 있는 직원 편집 화면 .
필터 및 페이지 매김이 있는 프로젝트 목록이 있는 프로젝트 목록 .
관련된 프로젝트 리더를 정의하여 프로젝트를 편집하거나 생성할 수 있는 프로젝트 편집 화면 .
이제 추가 화면 및 기능으로 이 앱을 확장합니다.
이력서 작성
이 튜토리얼에서는 프로젝트를 포함하여 직원 편집 화면에 표시되는 직원 정보를 기반으로 사용자가 이력서를 다운로드할 수 있도록 하는 로직과 UI를 생성합니다.
Forge 구성 요소와의 첫 번째 접촉 및 프로젝트에서 종속성을 정의하는 프로세스가 됩니다 .
Employee Directory 애플리케이션에서 우리는 목표를 달성하기 위해 세 가지 주요 단계를 수행해야 합니다.
EmployeeDetail 화면에 버튼을 추가하여 PDF를 다운로드합니다.
버튼을 직원 이력서의 모양과 느낌을 갖게 될 새 화면에 연결합니다.
Ultimate PDF 구성 요소를 활용하여 2개의 간단한 드래그 앤 드롭으로 PDF를 다운로드하는 애플리케이션의 논리를 정의합니다.
How?
이 섹션에서는 이전 섹션에서 설명한 시나리오를 구현하는 방법에 대한 철저한 단계별 설명을 보여줍니다.
시작하기
이 자습서에서는 이전 자습서를 이미 수행했으며 5개의 화면과 논리 화면 및 논리가 있다고 가정합니다.
아직 만들지 않은 경우 이전 자습서로 돌아가서 응용 프로그램을 만드는 것이 중요합니다.
이 연습을 시작하려면 EmployeeDirectory 모듈이 열린 Service Studio가 필요합니다. 아래 화면에 애플리케이션 소스가 표시되어야 합니다.
Forge에서 구성 요소 설치
OutSystems Forge는 앱 제공 시간을 단축하는 데 도움이 되는 재사용 가능한 개방형 코드 모듈, 커넥터, UI 구성 요소 및 비즈니스 솔루션의 저장소입니다. PDF 파일을 생성하고 다운로드하기 위해 Ultimate PDF Forge 구성 요소를 활용합니다 .
첫 번째 단계는 앱에서 사용할 수 있도록 환경에 설치하는 것입니다.
Service Studio에서 왼쪽 상단에 있는 Forge 탭을 클릭합니다.
검색 상자에 Ultimate PDF를 입력 하고 검색을 클릭합니다 . 이 구성 요소의 세부 정보를 열려면 첫 번째 옵션을 클릭하십시오.
설치...를 클릭하여 설치 프로세스를 시작합니다.
혹시라도 이 단계에서 일부 호환성 경고를 발견하더라도 걱정하지 마십시오. 때로는 관련 구성 요소와 다른 버전이 있을 수 있으며 이로 인해 이러한 비호환성이 발생할 수 있습니다. 따라서 학습용으로 만든 환경이라고 가정하고 강제 설치를 클릭하면 됩니다 .
이렇게 하면 Service Studio의 기본 응용 프로그램 영역으로 돌아갑니다. 앱이 설치되는 것을 볼 수 있습니다. 완료하는 데 시간이 걸립니다. 인내심을 가지십시오.
설치가 완료되면 환경에서 사용 가능한 앱이 표시됩니다.
구성 요소 참조
애플리케이션으로 돌아가서 가장 먼저 해야 할 일은 Employee Directory 앱에서 필요한 Ultimate PDF 구성 요소의 요소를 참조하는 것입니다. 구성 요소에서 응용 프로그램 모듈로 참조를 가져옵니다.
EmployeeDirectory 모듈을 열어 애플리케이션으로 돌아갑니다.
소켓 아이콘을 클릭하여 종속성 관리 상자를 엽니다.
이 옵션을 사용하면 환경에 있는 다른 응용 프로그램의 공용 요소를 참조할 수 있습니다. 이 경우 Ultimate PDF 응용 프로그램에서 원하는 요소를 검색하고 참조합니다.
토글을 모두 선택한 상태에서(1) 검색 상자에 UltimatePDF를 입력하고(2) 클릭하여 종속성 옵션을 엽니다. PrintLayout 및 ScreenToPDF를 선택합니다 (3).
이들은 PDF를 생성하는 데 사용할 시각적 요소입니다.
같은 대화 상자에서 마우스 휠을 아래로 굴려 OnApplicationReady_UltimatePDF (1) 및 ScreenToPDF_OnInitialize (2)를 선택합니다. 완료되면 적용을 클릭합니다 .
변경 사항을 저장하려면 모듈을 게시하십시오.
PDF 다운로드 기능 구현
이제 필요한 모든 것이 준비되었으므로 PDF를 다운로드하는 기능을 구현할 차례입니다.
다운로드 버튼
EmployeeDetail 화면을 두 번 클릭하여 편집 모드를 엽니다.
왼쪽 사이드바에서 Button 요소를 끌어 EmployeeDetail 화면의 작업 자리 표시자 에 놓습니다 .
Button 내부의 텍스트를 선택하고 Download 로 바꿉니다 .
왼쪽 사이드바에서 아이콘을 드래그하여 버튼 내부의 다운로드 텍스트 바로 앞에 놓습니다.
나타나는 새 대화 상자에서 원하는 아이콘 유형을 선택할 수 있습니다. 다운로드를 입력 하고 나타나는 다운로드 아이콘을 선택합니다.
오른쪽 사이드바에서 아이콘 속성을 보고 크기를 글꼴 크기 로 변경합니다.
이 속성은 아이콘의 크기를 제어하며 글꼴 크기 옵션은 텍스트와 동일한 크기의 아이콘을 넣습니다.
계속 아이콘의 속성에서 스타일 탭으로 전환하고 패딩 값을 5px 로 정의하여 아이콘 주위에 약간의 여백을 만듭니다.
아시다시피 Service Studio에 오류가 표시됩니다. 오류 메시지를 두 번 클릭하면 여전히 정의해야 하는 누락된 속성으로 안내됩니다.
이제 방금 전에 추가한 버튼에 있습니다. 오른쪽 사이드바에서 버튼의 속성으로 전환해 보겠습니다. On Click 속성이 없습니다. On Click 속성을 New Screen 으로 설정합니다 .
버튼의 On Click 속성은 버튼이 클릭 가능한 요소이기 때문에 필수이며 사용자가 버튼을 클릭할 때 버튼의 동작을 정의합니다. 이 경우 PDF에 대해 원하는 레이아웃이 있는 새 화면으로 이동합니다.
이름이 EmployeeDetailPDF 인 빈 화면을 만듭니다 .
이력서 화면
PDF 파일에 포함하고 싶은 정보를 포함하는 새로운 빈 화면을 방금 만들었습니다. 이제 Ultimate PDF 구성 요소에서 참조하는 요소의 도움을 받아 PDF 친화적인 레이아웃으로 화면을 만들 것입니다.
새 Screen의 위젯 트리를 열고 Layouts\LayoutsTopMenu를 삭제합니다.
모든 화면은 항상 변경하거나 삭제할 수 있는 기본 레이아웃으로 생성됩니다. 이 경우 Ultimate PDF 구성 요소의 레이아웃을 사용합니다.
Service Studio의 오른쪽 상단 섹션에 검색 옵션이 있습니다.
검색에 ScreenToPDF를 입력 하고 인터페이스 섹션에서 요소를 찾은 다음 화면으로 끌어다 놓습니다.
아래 이미지와 같은 것을 볼 수 있습니다.
이제 ScreentoPDF 요소가 있는 새 화면의 위젯 트리를 볼 수 있습니다. 컨테이너를 찾을 때까지 확장하고 삭제합니다.
이 컨테이너에는 몇 가지 사용 지침이 있으므로 삭제하여 화면을 정리할 수 있습니다. 이제 PDF를 생성하는 데 필요한 레이아웃이 생겼습니다.
오른쪽의 요소 트리로 돌아가 EmployeeDetail 화면을 확장하고 입력 매개변수 EmployeeId 와 GetEmployeeById 및 GetProjectsByProjectLeader 집계를 복사합니다.
재사용할 수 있으므로 EmployeeDetailPDF 화면 에 요소를 붙여넣습니다 .
이 단계 후에 Service Studio는 오류를 표시합니다. 이제 새 화면에 입력 매개변수가 있으므로 다운로드 버튼은 해당 매개변수에 대한 값을 전달해야 합니다. 고치자!
Service Studio 왼쪽 하단에서 오류가 있음을 나타내는 탭을 클릭합니다. EmployeeDetail 화면에서 오류 메시지를 두 번 클릭하여 단추 속성을 엽니다.
오른쪽 사이드바의 버튼 속성에서 EmployeeId 값을 GetEmployeeById.List.Current.Employee.Id 로 설정합니다 . 속성이 표시되지 않으면 해당 영역에서 아래로 스크롤하면 찾을 수 있습니다.
이렇게 하면 화면에 정보가 표시되는 직원의 ID가 실제로 이력서를 위해 새 화면에 전달된 ID인지 확인합니다.
최신 변경 사항을 저장하려면 모듈을 게시하십시오.
직원 세부 정보에 대한 UI 디자인
이제 이력서의 UI를 실제로 디자인할 차례입니다. 이력서가 어떻게 보여야 하는지 잊지 마세요.
EmployeeDetailPDF 화면을 두 번 클릭하여 엽니다.
왼쪽 사이드바에서 컨테이너를 드래그하여 화면에 놓습니다.
Service Studio 우측 상단의 Search 메뉴로 돌아가서 ColumnSmallLeft 를 검색하여 이전 단계에서 생성한 Container에 끌어다 놓습니다.
이 요소는 왼쪽에 더 작은 열이 있는 두 개의 열로 화면을 자동으로 나눕니다.
위젯 트리에서 Column1 요소를 마우스 오른쪽 버튼으로 클릭합니다. Insert Widget 을 클릭 한 다음 Image 를 클릭합니다 .
이미지의 속성 섹션에서 유형을 이진 데이터 로 변경 하고 이미지 콘텐츠를 GetEmployeeById.List.Current.EmployeePicture.Picture 로 변경합니다 .
이는 이미지 시각적 요소를 데이터베이스에 저장된 직원의 사진과 연결합니다.
여전히 이미지 속성에서 스타일 탭으로 전환하고 이미지 너비를 60px 로 , 이미지 클래스를 img-circle.
화면으로 돌아가 왼쪽 사이드바에서 Expression 요소를 끌어 ColumnSmallLeft 요소의 Column2 섹션에 놓습니다. 식의 값을 GetEmployeeById.List.Current.Employee.Name 으로 설정합니다 .
이 표현식에는 직원의 이름이 있습니다.
표현식을 마우스 오른쪽 버튼으로 클릭하고 Enclose in Container 를 클릭합니다 .
컨테이너 속성에서 스타일 클래스 를 "heading2".
새 식을 드래그하여 컨테이너 아래에 놓습니다. 해당 값을 GetEmployeeById.List.Current.Employee.JobPosition 으로 설정합니다 . 컨테이너에도 동봉하십시오.
이제 작업 위치에 대한 표현식이 있습니다.
왼쪽 사이드바에서 컨테이너를 드래그하여 이전에 만든 요소 아래에 놓습니다. 이 컨테이너의 스타일 클래스를 로 설정합니다 "padding-base".
새 식을 끌어서 새 컨테이너에 놓습니다. 해당 값을 GetEmployeeById.List.Current.Employee.Bio 로 설정합니다 .
그리고 이것으로 이력서에는 직원의 약력을 표시하는 표현식이 있습니다.
Service Studio의 오른쪽 상단에 있는 검색 도구로 다시 이동하여 Columns3 요소를 검색하고 끌어서 이전에 생성한 모든 요소 아래의 기본 페이지에 놓습니다.
표현식을 드래그하여 Columns3 요소의 첫 번째 열에 놓습니다. 해당 값을 GetEmployeeById.List.Current.Employee.Email 로 설정합니다 .
새 식으로 이전 단계를 반복하고 두 번째 열에 놓습니다. 해당 값을 GetEmployeeById.List.Current.Employee.Phone 으로 설정합니다 .
마지막 열의 경우 새 표현식을 사용하고 해당 값을 다음으로 설정합니다."Hired on: " + FormatDateTime(GetEmployeeById.List.Current.Employee.HiringDate,"dd/MM/yy")
이제 이메일, 전화번호 및 고용 날짜가 있는 세 개의 열이 있습니다. FormatDateTime 함수를 사용하면 날짜에 대해 원하는 형식(이 경우 일/월/년 형식)을 정의할 수 있습니다 .
이력서에 프로젝트 추가
이 시점에서 프로젝트만 누락됩니다. 해당 부분을 추가하려면 EmployeeDetail 화면의 UI를 활용합니다.
오른쪽 사이드바에서 요소 탭으로 전환합니다.
EmployeeDetail 화면을 두 번 클릭하고 위젯 트리 탭으로 전환합니다. MainContent를 확장하고 Container 및 List 요소를 선택하고 복사합니다.
요소 탭으로 다시 전환하고 EmployeeDetailPDF 화면을 두 번 클릭하여 연 다음 해당 화면의 위젯 트리로 다시 전환하십시오.
MainContent 자리 표시자에 요소를 붙여넣습니다. 이전 단계에서 추가한 다른 요소 바로 뒤에 새 요소가 있어야 합니다.
최신 변경 사항을 저장하려면 모듈을 게시하십시오. 거의 끝났습니다!
PDF 생성 및 다운로드 로직
이력서에 대한 UI를 정의했으므로 이제 사용자가 파일을 만들고 다운로드할 수 있도록 몇 가지 논리를 정의해야 합니다.
PDF를 다운로드하는 기능에는 약간의 트릭이 있습니다. 사용자가 다운로드 버튼을 클릭할 때 우리는 사용자가 새 화면으로 이동하는 것을 원하지 않습니다. 바로 지금 그런 일이 일어나더라도 말이죠. 우리가 원하는 기능은 사용자가 다운로드 버튼을 클릭하면 PDF가 생성되고 다운로드되는 것입니다. 그 기능을 만들어 봅시다.
위젯 트리를 종료하고 요소 탭으로 전환합니다.
EmployeeDetailPDF 화면 의 속성 탭에서 OnInitialize 이벤트를 선택합니다 .
모든 화면에는 일부 로직을 자동으로 트리거하는 몇 가지 이벤트가 있습니다. 이 경우 Screen이 초기화될 때 이 Action이 실행됩니다. 이 경우 Ultimate PDF의 작업 중 하나를 활용하여 PDF를 생성하고 다운로드하려고 합니다. 그 논리를 구현해 봅시다.
작업 흐름 내에서 왼쪽 사이드바에서 클라이언트 실행 작업을 끌어 작업 흐름에 놓습니다.
검색 상자에 ScreenToPDF_OnInitialize를 입력 하고 표시되는 작업을 선택합니다.
이것은 무거운 작업을 수행할 작업이며 다운로드 버튼을 클릭하면 화면에 정의된 레이아웃으로 PDF 파일을 다운로드할 수 있습니다. 그러나 채워야 할 몇 가지 속성이 있습니다.
최근 드래그한 Client Action의 속성에서 Filename에 오류가 있습니다 . 파일을 다운로드하려면 이름을 정의해야 합니다. 파일 이름 을 "EmployeeDetail.pdf".
이 논리를 닫으려면 Service Studio의 오른쪽 사이드바에 있는 논리 탭으로 전환하십시오. Client Action 폴더를 마우스 오른쪽 버튼으로 클릭 하고 시스템 이벤트 추가를 클릭합니다 . 애플리케이션 준비 시 를 선택합니다 .
이것은 사용자가 브라우저에서 사용할 수 있도록 애플리케이션이 준비되면 자동으로 실행되는 시스템 이벤트입니다. 일부 논리를 실행하는 데 활용할 수 있습니다. 이 경우 앱에서 사용할 Ultimate PDF 구성 요소를 "활성화"하는 Ultimate PDF 구성 요소의 작업을 다시 활용합니다.
Run Client Action을 방금 생성한 Action의 흐름으로 끌어다 놓습니다 .
OnApplicationReady_UltimatePDF 작업을 선택합니다 .
그리고 끝났습니다. 애플리케이션을 게시하고 브라우저에서 테스트합니다. 직원 세부 정보로 이동하여 이력서를 다운로드해 보십시오.
학습자료 다운로드 ▼