Easy Heading Macro

navigationTitle	목차

...

navigationExpandOption	expand-all-by-default

...

실습

...

Release No : 7.0.500.20240516

...

예제 ｜List-Grid와 입력 컨트롤을 활용한 인사 관리 화면

위젯 연결기

width	1100
url	https://www.youtube.com/watch?v=nWbSefzdjjY&list=PLwlugVSklJKt_ek90KTpoZAKykiCWhnqO&index=14
height	600

Image Modified

정보

title	템플릿 보고서 정보

해당 실습 화면은 Template을 활용하여 진행합니다.

Template 사용 방법
1. 포털에서 보고서를 실행합니다.
  
  템플릿 위치 : [교육] > [개발자교육] > [Template] > "4. 인사 관리 화면"
  
  Image Modified
2. 우측 상단의 Image Modified(다른 이름으로 저장) 버튼을 클릭하여 작업할 폴더에 저장합니다.
3. 저장한 보고서를 실행합니다.
4. 우측 상단의 Image Modified(보고서 편집) 버튼을 클릭하여 디자이너 창을 실행합니다.

Step 1. 데이터 연결하기

1.1 조회 조건 컨트롤 생성

데이터 조회를 위한 컨트롤을 생성합니다.

1. 입사일

입사일 컨트롤의 제목 라벨 컨트롤을 UI Bot > Label을 선택하여 생성합니다.
Image Modified
컨트롤의 속성을 변경합니다.
- Text : 입사일
Image Modified
조회 조건으로 사용할 캘린더 컨트롤을 UI Bot > Calendar > D From To를 선택하여 생성합니다.
Image Modified
컨트롤의 속성을 변경합니다.
- Name : VS_FROM_DATE
- Name2 : VS_TO_DATE
- InitDate : DATE(F,F,F);NOW()
Image Modified

2. 부서

부서 컨트롤의 제목 라벨 컨트롤을 UI Bot > Label을 선택하여 생성합니다.
Image Modified
컨트롤의 속성을 변경합니다.
- Text : 부서
Image Modified
조회 조건으로 사용할 콤보박스 컨트롤을 UI Bot > ComboBox > MultiCombo를 선택하여 생성합니다.
Image Modified
컨트롤의 속성을 변경합니다.
- Name : VS_DIVISION
- DataSource : 부서
- CaptionField : DIVISION
- ValueField : DIVISION
- UseSelectText 활성화
- AutoRefresh 활성화
Image Modified
Image ModifiedImage Modified

1.2 List-Grid 데이터소스 연결

그리드 컨트롤에 "그리드" 데이터소스 연결 후 보고서를 조회하여 정상적으로 실행되는지 확인합니다.

Image Modified

참고사항

title	참고 : 그리드 데이터소스 쿼리

코드 블럭

language	sql
title	그리드
linenumbers	true
collapse	true

SELECT T1.EMP_NO
    , 'U0' AS IMG
    , T1.EMP_NM
    , T1.DIVISION
    , T1.EMP_RANK
    , T1.GENDER
    , T1.BIRTH_DATE
    , T1.ENTER_DATE
    , T1.ADDRESS
    , T1.EMAIL
    , T1.PHONE_NO
    , T1.LEAVE_YN
    , T1.ETC
    , T1.C_USER
    , T1.C_DATE
    , T1.U_USER
    , T1.U_DATE
 FROM PUBLIC.EDU_DEV_EMPLOYEE T1
WHERE 1=1
  AND T1.ENTER_DATE BETWEEN @:VS_FROM_DATE AND @:VS_TO_DATE
  AND T1.DIVISION IN (@:VS_DIVISION)
ORDER BY  DIVISION , T1.EMP_NO

Image Modified

Step 2. List-Grid 속성 설정하기

참고사항

icon	false
title	Discription

데이터를 쉽게 입력하기 위해 List-Grid의 필드 유형을 설정합니다.

Image Modified

	필드명	화면표시명	필드유형	데이터	정렬 > 텍스트 정렬
1	DIVISION	부서	ComboBox	데이터소스 : 부서	Center
2	IMG	IMG	Image		Center
3	ENP_NO	사번			Center
4	EMP_NM	이름			Center
5	EMP_RANK	직급	ComboBox	데이터소스 : 직급	Center
6	GENDER	성별	ComboBox	데이터소스 : 성별	Center
7	BIRTH_DATE	생년월일	DateTime	서식 > {0:yyyy-MM-dd}	Center
8	ENTER_DATE	입사일	DateTime	서식 > {0:yyyy-MM-dd}	Center
9	ADDRESS	주소			Left
10	EMAIL	이메일			Left
11	PHONE_NO	연락처	MaskEdit	서식 > 000-0000-0000	Center
12	LEAVE_YN	퇴사여부	CheckBox	CheckedValue : Y, UnCheckedValue : N	Center
13	ETC	비고			Left

List Grid 컨트롤의 디자인을 수정하기 위해 컨트롤을 우 클릭 후 [디자인]을 선택해 디자인 창을 실행합니다.

Image Modified

각 필드의 화면표시명을 변경합니다.
Image Modified
보고서 화면에서 사용하지 않는 필드는 전체 선택하여 표시를 비활성화합니다.
- C_USER, C_DATE, U_USER, U_DATE - 표시 비활성화
Image Modified
필드의 텍스트 정렬을 변경합니다.
- 정렬 - 텍스트 정렬 : Center
Image Modified

필드 유형을 변경하여 값을 쉽게 변경할 수 있도록 설정합니다.

필드 명

필드 유형

부서 직급 성별

펼치기

title	ComboBox

필드 유형, 데이터소스 설정

Image Modified

IMG

펼치기

title	Image

필드 유형 설정

Image Modified

생년월일 입사일

펼치기

title	DateTime

필드 유형, 서식 설정

Image Modified

연락처

펼치기

title	MaskEdit

필드 유형, 서식 설정

(서식은 서식창에 입력합니다.)

Image Modified

퇴사여부

펼치기

title	CheckBox

필드 유형, CheckedValue, UnCheckedValue 설정

Image Modified

IMG, 사번 필드의 수정 가능 기능을 비활성화합니다.
Image Modified
부서 필드 기준으로 셀을 병합하기 위한 설정을 합니다.
- IMG~비고 병합 가능 비활성화
- 병합 방식 : Vertical
Image Modified Image Modified
Column의 스타일을 변경하기 위한 설정을 합니다.
Image Modified Image Modified

보고서를 실행하여 설정한 디자인 항목이 정상적으로 적용되었는지 확인합니다.

Image Modified

Step 3. 수식 편집기 활용하기

수식 편집기를 활용하여 근속년수, 직원수를 계산합니다.

3.1 계산필드 추가

List Grid에 계산필드를 추가하기 위해 [디자인]을 클릭하여 디자인 설정창을 실행합니다.
Image Modified
Image Modified 버튼을 눌러 필드를 추가합니다.
Image Modified
필드를 생년월일 필드와 입사일 필드 사이로 이동하고, 기본 속성을 변경합니다.
- 화면표시명 : 근속년수
- 수정 가능 비활성화
- 병합 가능 비활성화
Image Modified
데이터 - 수식의 Image Modified 버튼을 클릭하여 수식 편집기 창을 실행합니다.
Image Modified
좌측 목록에서 YEAR 함수와 [입사일] 필드를 선택하여 수식을 작성한 후 적용 버튼을 눌러 수식 작성을 완료합니다.
Image Modified

패널

펼치기
title 사용한 수식 펼치기
YEAR(TODAY()) - YEAR([입사일]) + 1
서식의 Image Modified 버튼을 클릭하여 서식 편집기 창을 실행한 후 숫자 형식에 "{0:N0]년차"를 입력합니다.
Image Modified
텍스트 정렬을 설정합니다.
- 정렬 - 텍스트 정렬 : Center
Image Modified

보고서를 실행하여 근속년수 필드가 정상적으로 추가 되었는지 확인합니다.

Image Modified

3.2 Label Formula 활용

Label의 Formula를 활용하여 직원 수의 집계값을 표현합니다.

List Grid의 우측 상단에 있는 [Label2] 컨트롤을 선택하여 Formula의 Image Modified 버튼을 클릭하여 수식 편집기 창을 실행합니다.
Image Modified

참고사항
icon false
title Discription

...

디자이너 내에서 컨트롤 찾는 방법

Image Modified

우측 상단의 "[폼 이름]'s Controls"를 클릭합니다.

팝업창에서 컨트롤 목록을 확인할 수 있으며, Visible 상태 수정 및 선택한 컨트롤로 포커스가 맞춰져 컨트롤의 속성을 변경할 수 있습니다.

텍스트와 COUNTIF 함수를 + 연산자로 연결하여 총 직원 수, 여직원 수, 남직원 수를 라벨 컨트롤에 텍스트로 표현합니다.

Image Modified

패널

펼치기

title	사용한 수식 펼치기

"▶ 총 : "+COUNTIF(:DataGrid, "사번", "")+"명 "
+
"▶ 여직원 : "+COUNTIF(:DataGrid, "사번", "[GENDER] = 'F'")+"명 "
+
"▶ 남직원 : "+COUNTIF(:DataGrid, "사번", "[GENDER] = 'M'")+"명"

[적용] 버튼을 클릭하여 작성한 수식대로 직원수가 정상적으로 계산되는지 확인합니다.
Image Modified

Step 4. CURD 설정하기

입력 폼 생성과 DB Upload 기능을 활용하여 데이터 생성, 조회, 업데이트, 삭제 동작을 설정합니다.

4.1 입력 폼 생성

입력 폼 생성을 활용하여 입력 컨트롤과 List-Grid를 연결합니다.

[편집 모드]에서 List Grid 컨트롤을 우 클릭하여 [입력 폼 생성] 항목을 선택합니다.
Image Modified
List Grid에 있는 필드 유형대로 라벨과 입력 컨트롤이 생성됩니다.
Image Modified
목표화면과 같이 컨트롤들을 배치합니다.
Image Modified

참고사항
icon false
title Discription

...

입력 폼 생성으로 생성된 컨트롤들은 위치나 크기를 변경할 수 있으며

사용하지 않는 컨트롤들은 삭제할 수 있습니다.

또한 컨트롤의 텍스트나 디자인을 변경할 수 있습니다.

4.2 실행 계획 디자인

DB Bot - DB Upload를 선택하여 실행 계획 디자인 창을 실행합니다.
Image Modified
Image Modified

참고사항
icon false
title Discription

...

템플릿 보고서이기 때문에 실행 계획 디자인이 일부분 작성되어 있습니다.
데이터 컨트롤을 연결하여 컬럼 연결이 자동으로 되는 것을 확인합니다.
- 데이터 컨트롤 : DataGrid
Image Modified

Step 5. Process Bot 설정하기

Process Bot을 활용하여 데이터 CRUD와 화면 변경 동작을 설정합니다.

Process Bot(Image Modified) 버튼을 눌러 Process Bot 설정 창을 실행합니다.

Image Modified

5.1 데이터 저장 모듈

모듈을 활용하여 CRUD 동작을 설정합니다.

Process Bot 아이콘(Image Modified)을 클릭하여 프로세스 봇 창을 실행하고, Report 를 더블 클릭합니다.
Image Modified
Activities 탭을 클릭하고, Modules > 기능별 > 데이터 저장 > '데이터 그리드 CRUD 기능(실행 계획)' 모듈을 더블 클릭합니다.
Image Modified

...

모듈 아이콘(Image Modified)을

...

클릭 후, 세부 옵션을 설정합니다.
- 모듈 구성 내용에 맞게 옵션 선택
- [저장] 버튼 눌러 모듈 설정 완료
Image Modified

5.2 폼 이동 모듈

보고서 내의 버튼 클릭 시 다른 폼으로 이동하는 동작을 설정합니다.

BTN_LOG 버튼 클릭 시 LOG 폼으로 이동하는 동작을 설정합니다.
BTN_LOG

...

컨트롤을 더블 클릭합니다.
Image Added
Activities 탭을 클릭하고, Modules > 컨트롤별 > Form > '폼 활성화 시키기(폼 이동 기능 + 조회 설정)' 모듈을 더블 클릭합니다.
Image Added
모듈 아이콘(Image Added)을 클릭 후, 세부 옵션을 설정합니다.
- 모듈 구성 내용에 맞게 옵션 선택
- BTN_LOG 버튼 클릭 시 LOG 폼으로 이동 및 DataGrid1 컨트롤 조회 설정
- [저장] 버튼 눌러 모듈 설정 완료

...

Image Added
BTN_LOG > OnClick 이벤트와 모듈을 연결합니다.
Image Added
BTN_MAIN 버튼 클릭 시 MAIN 폼으로 이동하는 동작을 설정합니다.

...

BTN_MAIN

...

컨트롤을 더블 클릭합니다.

...

Image Added
Activities 탭을 클릭하고, Modules > 컨트롤별 > Form > '폼 활성화 시키기(폼 이동 기능 + 조회 설정)' 모듈을 더블 클릭합니다.
Image Added
모듈 아이콘(Image Added)을 클릭 후, 세부 옵션을 설정합니다.
- 모듈 구성 내용에 맞게 옵션 선택
- BTN_MAIN 버튼 클릭

...

- 시 MAIN 폼으로 이동

...

- 및 DataGrid 컨트롤 조회 설정
- [저장] 버튼 눌러 모듈 설정 완료

...

Image Added
BTN_MAIN > OnClick 이벤트와 모듈을 연결합니다.
Image Added
아래와 같이 프로세스 봇이 설정 되었는지 확인하고 저장합니다.
Image Added

보고서가 정상적으로 작동하는지 확인합니다.

Image Modified

변경 이력

페이지 트리

버전 비교

이전 버전 2

새 버전 현재

키

실습

예제 ｜List-Grid와 입력 컨트롤을 활용한 인사 관리 화면

Step 1. 데이터 연결하기

1.1 조회 조건 컨트롤 생성

1. 입사일

2. 부서

1.2 List-Grid 데이터소스 연결

Step 2. List-Grid 속성 설정하기

Step 3. 수식 편집기 활용하기

3.1 계산필드 추가

3.2 Label Formula 활용

Step 4. CURD 설정하기

4.1 입력 폼 생성

4.2 실행 계획 디자인

DB Bot - DB Upload를 선택하여 실행 계획 디자인 창을 실행합니다.

Image Modified

Step 5. Process Bot 설정하기

5.1 데이터 저장 모듈

5.2 폼 이동 모듈

페이지 트리

페이지 이력

버전 비교

이전 버전 2

새 버전 현재

키

실습

예제 ｜List-Grid와 입력 컨트롤을 활용한 인사 관리 화면

Step 1. 데이터 연결하기

1.1 조회 조건 컨트롤 생성

1. 입사일

2. 부서

1.2 List-Grid 데이터소스 연결

Step 2. List-Grid 속성 설정하기

Step 3. 수식 편집기 활용하기

3.1 계산필드 추가

3.2 Label Formula 활용

Step 4. CURD 설정하기

4.1 입력 폼 생성

4.2 실행 계획 디자인

DB Bot - DB Upload를 선택하여 실행 계획 디자인 창을 실행합니다.

Image Modified

Step 5. Process Bot 설정하기

5.1 데이터 저장 모듈

5.2 폼 이동 모듈