개요
이 자습서에서는 EmployeeDetail 화면에서 사용자가 직원의 사진을 업로드할 수 있는 새로운 기능을 사용하여 Employee Directory 애플리케이션을 확장합니다 .
이 새로운 기능을 구현하려면 데이터 모델을 확장하여 직원 사진을 저장하고 사진을 직원과 연결합니다. 여기서 직원은 한 장의 사진만 가질 수 있고 사진은 한 직원에게만 속합니다.
마지막으로 사진을 업로드한 다음 표시할 수 있도록 EmployeeDetail 화면을 수정합니다.
따라해보세요!
이 시점에서 Employee Directory App에는 두 개의 화면이 있어야 합니다. 하나는 직원을 나열하고 다른 하나는 직원 정보를 편집하는 것입니다.
이 자습서에서 응용 프로그램을 사용하면 직원 세부 정보 화면에서 직원에게 사진을 추가할 수 있습니다.
직원 상세 화면
직원 세부 정보 화면은 데이터베이스에 저장된 직원의 모든 정보를 표시합니다. 사용자가 직원 목록 화면에서 직원 이름을 클릭하거나 직원 추가 옵션을 선택하면 이 화면으로 이동해야 합니다.
직원 정보 보기 외에도 저장 버튼을 클릭하여 데이터를 수정하고 변경 사항을 데이터베이스에 저장할 수 있습니다. 이제 각 직원 세부 정보 화면에서 각 직원의 사진을 업로드하고 데이터베이스에 저장할 수 있기를 원합니다.
How?
이 섹션에서는 이전 섹션에서 설명한 시나리오를 구현하는 방법에 대한 철저한 단계별 설명을 보여줍니다.
시작하기
이 자습서에서는 Service Studio 액셀러레이터를 사용하여 직원 및 EmployeeDetail 화면 이라는 두 개의 화면을 이미 만들었다고 가정합니다 .
직원 및 EmployeeDetail 화면을 아직 만들지 않은 경우 이전 자습서로 돌아가서 직원 사진을 계속 사용하는 것이 중요합니다. 그렇지 않으면 수업 자료에서 사용할 수 있는 빠른 시작 응용 프로그램을 설치하십시오.
새 엔티티 생성
이제 작업 중인 Service Studio 및 EmployeeDirectory 모듈 로 돌아가서 직원 사진을 데이터베이스에 보관할 엔터티를 만드는 것으로 시작하겠습니다.
오른쪽 상단 모서리에서 데이터 탭을 선택하고 데이터베이스를 마우스 오른쪽 버튼으로 클릭한 다음 엔터티 추가를 선택합니다.
새 엔터티의 이름을 EmployeePicture 로 지정합니다 .
이제 엔티티의 속성을 추가할 차례입니다. 새로 생성된 엔터티를 마우스 오른쪽 버튼으로 클릭하고 엔터티 속성 추가를 선택합니다 .
속성 이름을 그림 으로 지정 하고 해당 데이터 유형이 Binary Data 로 설정되어 있는지 확인합니다 . 이것은 실제 그림이 저장될 속성입니다.
OutSystems는 자동으로 데이터 유형을 이진 데이터로 변경합니다. 이름을 기반으로 필드의 데이터 유형을 추측하는 액셀러레이터입니다. 그러나 데이터 유형이 원하는 유형인지 다시 확인하는 것이 항상 중요합니다.
다른 속성을 생성하려면 이전 단계를 반복합니다. 이름을 Filename으로 지정 하고 Data Type 속성이 Text 로 설정되어 있는지 확인합니다 .
이제 EmployeePicture와 Employee 엔터티 간의 관계를 만들어야 합니다. 그렇게 하려면 EmployeePicture 엔터티의 Id 속성을 선택하고 데이터 유형 드롭다운을 확장한 다음 Employee Identifier 를 찾을 때까지 아래로 스크롤합니다 . 데이터 유형을 변경하려면 선택하십시오.
이 경우 Employee Picture는 Employee Entity의 확장과 같습니다. 따라서 직원과 해당 사진은 데이터베이스에서 동일한 고유 식별자를 공유합니다( ID 는 동일한 값을 가짐).
또한 데이터베이스의 각 요소(예: 직원, 사진 등)를 고유하게 식별하는 Id 특성은 OutSystems에서 자동으로 생성되지만 나중에 해당 속성을 변경할 수 있습니다.
엔티티는 다음과 같아야 합니다.
데이터베이스에서 그림 가져오기
이 시점에서 직원 사진을 포함하도록 데이터 모델을 조정했습니다. 이제 이 새로운 기능을 지원하기 위해 EmployeeDetail 화면을 변경해야 합니다. EmployeeDetail 화면을 채우기 위해 가져온 데이터를 조정하고 사진도 포함하도록 만들어 보겠습니다.
Service Studio의 인터페이스 탭 으로 전환하고 오른쪽 사이드바에서 EmployeeDetail 화면을 확장한 다음 GetEmployeeById 요소를 두 번 클릭하여 엽니다.
이 요소를 집계라고 합니다. Aggregate는 SQL에 대한 지식 없이도 엔티티에서 데이터를 가져옵니다. 구체적으로 이 집계는 직원 엔터티 에서 데이터를 가져온 다음 EmployeeDetail 화면을 채우는 데 사용됩니다.
이제 EmployeePicture 엔터티에서도 데이터를 가져와야 합니다. 방금 연 집계에서 소스 추가 버튼을 클릭합니다.
표시되는 팝업 대화 상자에서 EmployeePicture 엔터티를 선택하고 선택을 클릭합니다 .
Aggregate는 이제 두 개의 엔티티(직원과 사진)에서 데이터를 가져옵니다. 엔티티는 서로 관련되어 있으므로 OutSystems는 자동으로 엔티티 간에 조인을 생성합니다.
생성된 조인이 With 또는 Without 로 설정되어 있는지 확인하십시오 . 즉, 사진이 있는지 여부에 관계없이 직원 정보를 가져옵니다.
사진 업로드
Aggregate가 준비되었으므로 EmployeeDetail 화면의 보이는 부분에서 작업해야 합니다. 따라서 직원 정보가 포함된 양식에 사용자가 직원 사진을 업로드할 수 있는 추가 필드가 있는지 확인해야 합니다.
EmployeeDetail 화면을 두 번 클릭하여 엽니다.
GetEmployeeById 및 그 안에 있는 EmployeePicture를 확장하여 엔터티의 특성을 확인합니다. Picture 특성을 끌어 EmployeeDetail 화면의 이름 입력 필드 바로 위에 놓습니다.
이렇게 하면 업로드라는 새 요소가 화면에 자동으로 생성됩니다. 이것은 사용자가 앱에서 사진을 업로드할 수 있게 해주는 요소입니다. Picture 속성은 이진 데이터이므로 OutSystems는 속성이 Screen에 놓일 때 자동으로 Upload 요소를 생성합니다.
이제 모듈에 오류가 있습니다. 방금 추가한 업로드 요소를 선택합니다 . Service Studio의 오른쪽을 보면 Upload 요소의 속성을 찾을 수 있습니다.
File Content는 Aggregate에서 드래그한 Picture 속성에 자동으로 연결되었습니다. 이제 그에 따라 파일 이름을 설정해야 합니다 .
파일 이름 속성을 GetEmployeeById.List.Current.EmployeePicture.Filename 으로 설정합니다 .
그림에서 자동으로 발생하는 것처럼 여기서는 업로드 요소의 파일 이름 속성을 Aggregate에서 가져온 파일 이름 특성으로 설정합니다.
여전히 Upload 요소의 속성에서 Accept 속성을 Image 로 설정합니다 .
이렇게 하면 업로드에 첨부된 이미지 요소가 자동으로 추가되므로 사용자가 이미지를 업로드하자마자 화면에서 이미지 미리보기를 볼 수 있습니다.
최신 변경 사항을 저장하려면 모듈을 게시하십시오 .
완료되면 브라우저에서 열기 라는 파란색 버튼을 클릭하면 브라우저에서 변경 사항을 볼 수 있습니다. 사진 몇 장을 업로드해 보세요. 아직 데이터베이스에 저장하지 않는다는 것을 잊지 마십시오. 따라서 EmployeeDetail 화면에서 사진이 미리보기로 나타나도록 하는 것이 목표입니다.
직원 사진을 데이터베이스에 저장
이제 이 기능이 예상대로 작동하도록 하려면 마지막 부분만 있으면 됩니다. 앱 사용자가 EmployeeDetail 화면의 저장 버튼을 클릭할 때마다 직원의 사진을 데이터베이스에 저장하는 몇 가지 논리를 추가해야 합니다.
논리 탐색
Service Studio의 오른쪽 사이드바에서 EmployeeDetail 화면을 확장하면 SaveDetail 요소를 찾을 수 있습니다.
OutSystems에서 이 요소는 Action 이라고 합니다 . 작업은 애플리케이션에서 실행되는 논리 흐름을 만들 수 있는 위치입니다.
SaveDetail 작업을 두 번 클릭하여 엽니다.
SaveDetail 작업에는 이미 몇 가지 로직이 구축되어 있습니다. 이 Action은 EmployeeDetail 화면이 생성될 때 자동으로 생성되며 해당 화면에서 저장 버튼을 클릭하면 자동으로 실행됩니다. 이 작업에는 이미 몇 가지 논리가 생성되어 있지만 지금은 걱정하지 마십시오. 사진 저장에 집중합시다!
EmployeeCreateOrUpdate 요소를 두 번 클릭하여 엽니다. 이제 다음 이미지의 오른쪽에서 볼 수 있는 것처럼 새로운 흐름이 표시되어야 합니다.
Service Studio의 오른쪽 사이드바에서 현재 논리 탭에 있음을 알 수 있으며 여기에서 EmployeeCreateOrUpdate 요소도 볼 수 있습니다.
이 EmployeeCreateOrUpdate 요소는 작업이기도 하며 이미 생성된 데이터베이스에 직원 정보를 저장하는 논리가 있습니다.
EmployeeCreateOrUpdate 요소를 확장하면 이 작업에 대한 입력 및 출력 매개변수를 볼 수 있습니다. 작업은 한 직원의 모든 정보가 포함된 직원 레코드인 소스를 입력으로 받습니다. 액션이 실제로 데이터베이스에 저장할 데이터가 있는 요소입니다.
따라서 이제 직원 사진을 포함하려면 EmployeePicture 정보를 수신하기 위한 새 입력 매개변수를 추가하는 것부터 시작하여 사진도 저장하도록 이 논리를 확장해야 합니다.
데이터베이스에 그림을 저장하는 논리 만들기
EmployeeCreateOrUpdate 작업을 마우스 오른쪽 버튼으로 클릭하고 입력 매개변수 추가를 선택합니다.
이름을 SourcePicture로 지정 하고 데이터 유형을 EmployeePicture 로 설정합니다.
데이터 탭으로 전환하고 EmployeePicture 엔터티를 확장합니다. 그런 다음 CreateOrUpdateEmployeePicture 요소를 끌어 Assign 및 End 요소 위에 놓습니다.
CreateOrUpdateEmployeePicture 는 Entity가 생성될 때 자동으로 생성되어 사진 정보로 데이터베이스를 업데이트하는 Action입니다. 원하는 위치로 드래그하기만 하면 나머지는 OutSystems가 알아서 처리합니다! 이러한 요소에 대해 더 알고 싶다면 여기에서 확인할 수 있습니다.
작업 중인 논리 흐름으로 돌아가서 방금 드래그한 요소를 한 번 클릭하고 오른쪽 사이드바에서 해당 속성을 확인합니다. 이 작업은 데이터베이스에 사진을 저장해야 하므로 오류가 발생했습니다. Source를 이전에 생성한 SourcePicture 입력 매개변수 로 설정합니다 .
여기서 우리는 EmployeeCreateOrUpdate Action이 이전에 생성한 입력 매개변수를 통해 수신하는 직원 사진을 실제로 데이터베이스로 전송하고 있습니다.
이제 Employee와 EmployeePicture가 동일한 식별자를 공유한다고 말한 것을 기억하십니까? 이제 실제로 동일하게 만들 때입니다. 작업 흐름에서 파란색 요소를 클릭합니다. 이는 할당 요소로, 변수에 값을 여러 번 할당할 수 있습니다.
할당 요소의 속성 내에서 첫 번째 비어 있는 드롭다운을 선택하고 변수 선택을 클릭합니다.
SourcePicture Id를 선택 하고 선택을 클릭합니다.
아래 드롭다운(값 필드)에서 Expression Editor 를 선택합니다 .
새 대화 상자에서 범위 아래의 CreateOrUpdateEmployee 작업을 확장하고 Id를 두 번 클릭하여 선택합니다. 위의 텍스트 상자에 표현식이 완전히 보이는지 확인하십시오. 표시되면 닫기를 클릭합니다.
할당 요소는 다음과 같아야 합니다.
로직 완료 및 앱 테스트
마무리까지 한 단계만 남았습니다. 이 마지막 단계는 모든 것을 하나로 묶고 EmployeeDetail 화면에서 사용자가 업로드한 사진이 실제로 데이터베이스로 전송되고 있음을 보장합니다.
인터페이스 탭과 EmployeeDetail 화면 아래의 SaveDetail 작업 으로 돌아가서 두 번 클릭하여 엽니다. 흐름에서 EmployeeCreateOrUpdate 요소를 한 번 클릭합니다 . Action이 이전에 그림에 추가한 입력 매개변수와 정확히 일치하는 SourcePicture를 기대하고 있기 때문에 이제 오류가 있음을 알 수 있습니다. SourcePicture 속성을 GetEmployeeById.List.Current.EmployeePicture 로 설정합니다 .
모듈을 게시하고 브라우저에서 테스트합니다. 이제 직원에게 사진을 추가할 수 있습니다. 그런 다음 세부 정보 화면에서 저장 버튼을 클릭하고 직원 목록으로 돌아간 다음 방금 수정한 동일한 직원 세부 정보 페이지로 다시 돌아갑니다. 사진이 아직 거기에 있습니까? 그렇다면 사진을 성공적으로 저장한 것입니다. 축하해요!!!
레이아웃 사용자 지정
이 시점에서 새 기능이 작동하지만 레이아웃은 여전히 개선될 수 있습니다. 따라서 다음 단계에서는 사용자 지정 방법을 보여줍니다. 오른쪽의 "빈" 열을 제거하고 양식의 필드를 재배포하여 양식이 화면의 전체 너비를 차지하도록 합니다. 원하는 만큼 창의력을 발휘할 수 있습니다! 이것은 단지 예일 뿐입니다!
Service Studio로 돌아가 인터페이스 탭에 있는지 확인하고 EmployeeDetail 화면을 두 번 클릭하여 엽니다.
화면 구조를 보려면 위젯 트리 옵션을 클릭하십시오 .
이 옵션은 Service Studio에서 화면을 열 때마다 나타납니다. 화면 내부의 모든 요소의 구조를 보여주며, 조각을 제자리에 올바르게 설정하는 데 큰 도움이 됩니다.
MainContent 영역을 확장한 다음 Form 내부의 컨테이너 에 도달할 때까지 그 안에 중첩된 모든 첫 번째 요소를 확장합니다. 지금까지의 페이지 구조입니다.
다음 이미지와 같이 Form1을 클릭하고 Adaptive\Columns2 요소 위로 드래그하여 Form1을 선택합니다 . 이 Adaptive\Columns2 요소는 화면을 2개의 열로 나누는 데 도움이 됩니다. 이 변경으로 양식이 페이지의 전체 너비를 채웁니다.
그러나 Columns2 요소를 제거하는 것은 원하지 않습니다. 우리는 양식 자체가 2개의 열로 분리되어 있는지 확인하고 싶습니다. 여기서 일부 필드는 왼쪽에 있고 일부는 오른쪽에 있습니다. 따라서 Columns2 요소를 Form1 내부로 이동 하고 내부의 첫 번째 요소로 만듭니다.
Adaptive\Columns2 요소와 그 안에 있는 Column2를 확장 하고 이미지를 삭제합니다. 이것은 페이지의 오른쪽 열에 나타난 이미지 이며 우리는 그것을 원하지 않습니다.
이제 필드를 배포하겠습니다. 각 컨테이너는 내부에 레이블과 입력 요소가 있는 양식의 필드입니다. 컨테이너가 많으므로 몇 가지 숫자를 사용하겠습니다. CTRL+클릭을 사용하여 첫 번째, 일곱 번째 및 아홉 번째 컨테이너를 선택합니다. Picture(첫 번째), Bio(일곱 번째) 및 IsActive(아홉 번째) 필드를 나타내는 컨테이너를 검색해 보겠습니다.
이제 선택한 컨테이너를 열 2 섹션 내부로 드래그합니다.
마지막 컨테이너를 제외한 나머지 컨테이너를 선택합니다. 여기에는 저장 및 뒤로 버튼이 있으며 열 외부에 유지됩니다.
Column1 내부로 끌어다 놓습니다 . 다음과 같은 결과를 얻어야 합니다.
이제 브라우저에서 앱을 게시하고 테스트하십시오! 원하는 경우 레이아웃을 자유롭게 조정하고 사용자 지정할 수 있습니다.
학습 자료 다운로드 ▼
개요
이 자습서에서는 EmployeeDetail 화면에서 사용자가 직원의 사진을 업로드할 수 있는 새로운 기능을 사용하여 Employee Directory 애플리케이션을 확장합니다 .
이 새로운 기능을 구현하려면 데이터 모델을 확장하여 직원 사진을 저장하고 사진을 직원과 연결합니다. 여기서 직원은 한 장의 사진만 가질 수 있고 사진은 한 직원에게만 속합니다.
마지막으로 사진을 업로드한 다음 표시할 수 있도록 EmployeeDetail 화면을 수정합니다.
따라해보세요!
이 시점에서 Employee Directory App에는 두 개의 화면이 있어야 합니다. 하나는 직원을 나열하고 다른 하나는 직원 정보를 편집하는 것입니다.
이 자습서에서 응용 프로그램을 사용하면 직원 세부 정보 화면에서 직원에게 사진을 추가할 수 있습니다.
직원 상세 화면
직원 세부 정보 화면은 데이터베이스에 저장된 직원의 모든 정보를 표시합니다. 사용자가 직원 목록 화면에서 직원 이름을 클릭하거나 직원 추가 옵션을 선택하면 이 화면으로 이동해야 합니다.
직원 정보 보기 외에도 저장 버튼을 클릭하여 데이터를 수정하고 변경 사항을 데이터베이스에 저장할 수 있습니다. 이제 각 직원 세부 정보 화면에서 각 직원의 사진을 업로드하고 데이터베이스에 저장할 수 있기를 원합니다.
How?
이 섹션에서는 이전 섹션에서 설명한 시나리오를 구현하는 방법에 대한 철저한 단계별 설명을 보여줍니다.
시작하기
이 자습서에서는 Service Studio 액셀러레이터를 사용하여 직원 및 EmployeeDetail 화면 이라는 두 개의 화면을 이미 만들었다고 가정합니다 .
직원 및 EmployeeDetail 화면을 아직 만들지 않은 경우 이전 자습서로 돌아가서 직원 사진을 계속 사용하는 것이 중요합니다. 그렇지 않으면 수업 자료에서 사용할 수 있는 빠른 시작 응용 프로그램을 설치하십시오.
새 엔티티 생성
이제 작업 중인 Service Studio 및 EmployeeDirectory 모듈 로 돌아가서 직원 사진을 데이터베이스에 보관할 엔터티를 만드는 것으로 시작하겠습니다.
오른쪽 상단 모서리에서 데이터 탭을 선택하고 데이터베이스를 마우스 오른쪽 버튼으로 클릭한 다음 엔터티 추가를 선택합니다.
새 엔터티의 이름을 EmployeePicture 로 지정합니다 .
이제 엔티티의 속성을 추가할 차례입니다. 새로 생성된 엔터티를 마우스 오른쪽 버튼으로 클릭하고 엔터티 속성 추가를 선택합니다 .
속성 이름을 그림 으로 지정 하고 해당 데이터 유형이 Binary Data 로 설정되어 있는지 확인합니다 . 이것은 실제 그림이 저장될 속성입니다.
OutSystems는 자동으로 데이터 유형을 이진 데이터로 변경합니다. 이름을 기반으로 필드의 데이터 유형을 추측하는 액셀러레이터입니다. 그러나 데이터 유형이 원하는 유형인지 다시 확인하는 것이 항상 중요합니다.
다른 속성을 생성하려면 이전 단계를 반복합니다. 이름을 Filename으로 지정 하고 Data Type 속성이 Text 로 설정되어 있는지 확인합니다 .
이제 EmployeePicture와 Employee 엔터티 간의 관계를 만들어야 합니다. 그렇게 하려면 EmployeePicture 엔터티의 Id 속성을 선택하고 데이터 유형 드롭다운을 확장한 다음 Employee Identifier 를 찾을 때까지 아래로 스크롤합니다 . 데이터 유형을 변경하려면 선택하십시오.
이 경우 Employee Picture는 Employee Entity의 확장과 같습니다. 따라서 직원과 해당 사진은 데이터베이스에서 동일한 고유 식별자를 공유합니다( ID 는 동일한 값을 가짐).
또한 데이터베이스의 각 요소(예: 직원, 사진 등)를 고유하게 식별하는 Id 특성은 OutSystems에서 자동으로 생성되지만 나중에 해당 속성을 변경할 수 있습니다.
엔티티는 다음과 같아야 합니다.
데이터베이스에서 그림 가져오기
이 시점에서 직원 사진을 포함하도록 데이터 모델을 조정했습니다. 이제 이 새로운 기능을 지원하기 위해 EmployeeDetail 화면을 변경해야 합니다. EmployeeDetail 화면을 채우기 위해 가져온 데이터를 조정하고 사진도 포함하도록 만들어 보겠습니다.
Service Studio의 인터페이스 탭 으로 전환하고 오른쪽 사이드바에서 EmployeeDetail 화면을 확장한 다음 GetEmployeeById 요소를 두 번 클릭하여 엽니다.
이 요소를 집계라고 합니다. Aggregate는 SQL에 대한 지식 없이도 엔티티에서 데이터를 가져옵니다. 구체적으로 이 집계는 직원 엔터티 에서 데이터를 가져온 다음 EmployeeDetail 화면을 채우는 데 사용됩니다.
이제 EmployeePicture 엔터티에서도 데이터를 가져와야 합니다. 방금 연 집계에서 소스 추가 버튼을 클릭합니다.
표시되는 팝업 대화 상자에서 EmployeePicture 엔터티를 선택하고 선택을 클릭합니다 .
Aggregate는 이제 두 개의 엔티티(직원과 사진)에서 데이터를 가져옵니다. 엔티티는 서로 관련되어 있으므로 OutSystems는 자동으로 엔티티 간에 조인을 생성합니다.
생성된 조인이 With 또는 Without 로 설정되어 있는지 확인하십시오 . 즉, 사진이 있는지 여부에 관계없이 직원 정보를 가져옵니다.
사진 업로드
Aggregate가 준비되었으므로 EmployeeDetail 화면의 보이는 부분에서 작업해야 합니다. 따라서 직원 정보가 포함된 양식에 사용자가 직원 사진을 업로드할 수 있는 추가 필드가 있는지 확인해야 합니다.
EmployeeDetail 화면을 두 번 클릭하여 엽니다.
GetEmployeeById 및 그 안에 있는 EmployeePicture를 확장하여 엔터티의 특성을 확인합니다. Picture 특성을 끌어 EmployeeDetail 화면의 이름 입력 필드 바로 위에 놓습니다.
이렇게 하면 업로드라는 새 요소가 화면에 자동으로 생성됩니다. 이것은 사용자가 앱에서 사진을 업로드할 수 있게 해주는 요소입니다. Picture 속성은 이진 데이터이므로 OutSystems는 속성이 Screen에 놓일 때 자동으로 Upload 요소를 생성합니다.
이제 모듈에 오류가 있습니다. 방금 추가한 업로드 요소를 선택합니다 . Service Studio의 오른쪽을 보면 Upload 요소의 속성을 찾을 수 있습니다.
File Content는 Aggregate에서 드래그한 Picture 속성에 자동으로 연결되었습니다. 이제 그에 따라 파일 이름을 설정해야 합니다 .
파일 이름 속성을 GetEmployeeById.List.Current.EmployeePicture.Filename 으로 설정합니다 .
그림에서 자동으로 발생하는 것처럼 여기서는 업로드 요소의 파일 이름 속성을 Aggregate에서 가져온 파일 이름 특성으로 설정합니다.
여전히 Upload 요소의 속성에서 Accept 속성을 Image 로 설정합니다 .
이렇게 하면 업로드에 첨부된 이미지 요소가 자동으로 추가되므로 사용자가 이미지를 업로드하자마자 화면에서 이미지 미리보기를 볼 수 있습니다.
최신 변경 사항을 저장하려면 모듈을 게시하십시오 .
완료되면 브라우저에서 열기 라는 파란색 버튼을 클릭하면 브라우저에서 변경 사항을 볼 수 있습니다. 사진 몇 장을 업로드해 보세요. 아직 데이터베이스에 저장하지 않는다는 것을 잊지 마십시오. 따라서 EmployeeDetail 화면에서 사진이 미리보기로 나타나도록 하는 것이 목표입니다.
직원 사진을 데이터베이스에 저장
이제 이 기능이 예상대로 작동하도록 하려면 마지막 부분만 있으면 됩니다. 앱 사용자가 EmployeeDetail 화면의 저장 버튼을 클릭할 때마다 직원의 사진을 데이터베이스에 저장하는 몇 가지 논리를 추가해야 합니다.
논리 탐색
Service Studio의 오른쪽 사이드바에서 EmployeeDetail 화면을 확장하면 SaveDetail 요소를 찾을 수 있습니다.
OutSystems에서 이 요소는 Action 이라고 합니다 . 작업은 애플리케이션에서 실행되는 논리 흐름을 만들 수 있는 위치입니다.
SaveDetail 작업을 두 번 클릭하여 엽니다.
SaveDetail 작업에는 이미 몇 가지 로직이 구축되어 있습니다. 이 Action은 EmployeeDetail 화면이 생성될 때 자동으로 생성되며 해당 화면에서 저장 버튼을 클릭하면 자동으로 실행됩니다. 이 작업에는 이미 몇 가지 논리가 생성되어 있지만 지금은 걱정하지 마십시오. 사진 저장에 집중합시다!
EmployeeCreateOrUpdate 요소를 두 번 클릭하여 엽니다. 이제 다음 이미지의 오른쪽에서 볼 수 있는 것처럼 새로운 흐름이 표시되어야 합니다.
Service Studio의 오른쪽 사이드바에서 현재 논리 탭에 있음을 알 수 있으며 여기에서 EmployeeCreateOrUpdate 요소도 볼 수 있습니다.
이 EmployeeCreateOrUpdate 요소는 작업이기도 하며 이미 생성된 데이터베이스에 직원 정보를 저장하는 논리가 있습니다.
EmployeeCreateOrUpdate 요소를 확장하면 이 작업에 대한 입력 및 출력 매개변수를 볼 수 있습니다. 작업은 한 직원의 모든 정보가 포함된 직원 레코드인 소스를 입력으로 받습니다. 액션이 실제로 데이터베이스에 저장할 데이터가 있는 요소입니다.
따라서 이제 직원 사진을 포함하려면 EmployeePicture 정보를 수신하기 위한 새 입력 매개변수를 추가하는 것부터 시작하여 사진도 저장하도록 이 논리를 확장해야 합니다.
데이터베이스에 그림을 저장하는 논리 만들기
EmployeeCreateOrUpdate 작업을 마우스 오른쪽 버튼으로 클릭하고 입력 매개변수 추가를 선택합니다.
이름을 SourcePicture로 지정 하고 데이터 유형을 EmployeePicture 로 설정합니다.
데이터 탭으로 전환하고 EmployeePicture 엔터티를 확장합니다. 그런 다음 CreateOrUpdateEmployeePicture 요소를 끌어 Assign 및 End 요소 위에 놓습니다.
CreateOrUpdateEmployeePicture 는 Entity가 생성될 때 자동으로 생성되어 사진 정보로 데이터베이스를 업데이트하는 Action입니다. 원하는 위치로 드래그하기만 하면 나머지는 OutSystems가 알아서 처리합니다! 이러한 요소에 대해 더 알고 싶다면 여기에서 확인할 수 있습니다.
작업 중인 논리 흐름으로 돌아가서 방금 드래그한 요소를 한 번 클릭하고 오른쪽 사이드바에서 해당 속성을 확인합니다. 이 작업은 데이터베이스에 사진을 저장해야 하므로 오류가 발생했습니다. Source를 이전에 생성한 SourcePicture 입력 매개변수 로 설정합니다 .
여기서 우리는 EmployeeCreateOrUpdate Action이 이전에 생성한 입력 매개변수를 통해 수신하는 직원 사진을 실제로 데이터베이스로 전송하고 있습니다.
이제 Employee와 EmployeePicture가 동일한 식별자를 공유한다고 말한 것을 기억하십니까? 이제 실제로 동일하게 만들 때입니다. 작업 흐름에서 파란색 요소를 클릭합니다. 이는 할당 요소로, 변수에 값을 여러 번 할당할 수 있습니다.
할당 요소의 속성 내에서 첫 번째 비어 있는 드롭다운을 선택하고 변수 선택을 클릭합니다.
SourcePicture Id를 선택 하고 선택을 클릭합니다.
아래 드롭다운(값 필드)에서 Expression Editor 를 선택합니다 .
새 대화 상자에서 범위 아래의 CreateOrUpdateEmployee 작업을 확장하고 Id를 두 번 클릭하여 선택합니다. 위의 텍스트 상자에 표현식이 완전히 보이는지 확인하십시오. 표시되면 닫기를 클릭합니다.
할당 요소는 다음과 같아야 합니다.
로직 완료 및 앱 테스트
마무리까지 한 단계만 남았습니다. 이 마지막 단계는 모든 것을 하나로 묶고 EmployeeDetail 화면에서 사용자가 업로드한 사진이 실제로 데이터베이스로 전송되고 있음을 보장합니다.
인터페이스 탭과 EmployeeDetail 화면 아래의 SaveDetail 작업 으로 돌아가서 두 번 클릭하여 엽니다. 흐름에서 EmployeeCreateOrUpdate 요소를 한 번 클릭합니다 . Action이 이전에 그림에 추가한 입력 매개변수와 정확히 일치하는 SourcePicture를 기대하고 있기 때문에 이제 오류가 있음을 알 수 있습니다. SourcePicture 속성을 GetEmployeeById.List.Current.EmployeePicture 로 설정합니다 .
모듈을 게시하고 브라우저에서 테스트합니다. 이제 직원에게 사진을 추가할 수 있습니다. 그런 다음 세부 정보 화면에서 저장 버튼을 클릭하고 직원 목록으로 돌아간 다음 방금 수정한 동일한 직원 세부 정보 페이지로 다시 돌아갑니다. 사진이 아직 거기에 있습니까? 그렇다면 사진을 성공적으로 저장한 것입니다. 축하해요!!!
레이아웃 사용자 지정
이 시점에서 새 기능이 작동하지만 레이아웃은 여전히 개선될 수 있습니다. 따라서 다음 단계에서는 사용자 지정 방법을 보여줍니다. 오른쪽의 "빈" 열을 제거하고 양식의 필드를 재배포하여 양식이 화면의 전체 너비를 차지하도록 합니다. 원하는 만큼 창의력을 발휘할 수 있습니다! 이것은 단지 예일 뿐입니다!
Service Studio로 돌아가 인터페이스 탭에 있는지 확인하고 EmployeeDetail 화면을 두 번 클릭하여 엽니다.
화면 구조를 보려면 위젯 트리 옵션을 클릭하십시오 .
이 옵션은 Service Studio에서 화면을 열 때마다 나타납니다. 화면 내부의 모든 요소의 구조를 보여주며, 조각을 제자리에 올바르게 설정하는 데 큰 도움이 됩니다.
MainContent 영역을 확장한 다음 Form 내부의 컨테이너 에 도달할 때까지 그 안에 중첩된 모든 첫 번째 요소를 확장합니다. 지금까지의 페이지 구조입니다.
다음 이미지와 같이 Form1을 클릭하고 Adaptive\Columns2 요소 위로 드래그하여 Form1을 선택합니다 . 이 Adaptive\Columns2 요소는 화면을 2개의 열로 나누는 데 도움이 됩니다. 이 변경으로 양식이 페이지의 전체 너비를 채웁니다.
그러나 Columns2 요소를 제거하는 것은 원하지 않습니다. 우리는 양식 자체가 2개의 열로 분리되어 있는지 확인하고 싶습니다. 여기서 일부 필드는 왼쪽에 있고 일부는 오른쪽에 있습니다. 따라서 Columns2 요소를 Form1 내부로 이동 하고 내부의 첫 번째 요소로 만듭니다.
Adaptive\Columns2 요소와 그 안에 있는 Column2를 확장 하고 이미지를 삭제합니다. 이것은 페이지의 오른쪽 열에 나타난 이미지 이며 우리는 그것을 원하지 않습니다.
이제 필드를 배포하겠습니다. 각 컨테이너는 내부에 레이블과 입력 요소가 있는 양식의 필드입니다. 컨테이너가 많으므로 몇 가지 숫자를 사용하겠습니다. CTRL+클릭을 사용하여 첫 번째, 일곱 번째 및 아홉 번째 컨테이너를 선택합니다. Picture(첫 번째), Bio(일곱 번째) 및 IsActive(아홉 번째) 필드를 나타내는 컨테이너를 검색해 보겠습니다.
이제 선택한 컨테이너를 열 2 섹션 내부로 드래그합니다.
마지막 컨테이너를 제외한 나머지 컨테이너를 선택합니다. 여기에는 저장 및 뒤로 버튼이 있으며 열 외부에 유지됩니다.
Column1 내부로 끌어다 놓습니다 . 다음과 같은 결과를 얻어야 합니다.
이제 브라우저에서 앱을 게시하고 테스트하십시오! 원하는 경우 레이아웃을 자유롭게 조정하고 사용자 지정할 수 있습니다.
학습 자료 다운로드 ▼