Easy Heading Macro

navigationTitle	목차In this article
navigationExpandOption	expand-all-by-default

목표화면Target Screen

Image RemovedImage Added

템플릿 위치

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

Template 사용 방법
포털에서 보고서를 실행합니다.

정보

title	템플릿 보고서 정보

Template Report Information

This practice session utilizes a pre-configured template.

How to Use the Template:
1. Launch the report from the portal.
  
  Template Path : [PPDM] > [Templates] > [2. 조회,수정화면Data Entry] > [기본화면Basic Input] >"Template_인사관리HR Management"
2. 우측 상단의 Image Removed(다른 이름으로 저장) 버튼을 클릭하여 작업할 폴더에 저장합니다.
  저장한 보고서를 실행합니다.
  우측 상단의 Image Removed(보고서 편집) 버튼을 클릭하여 디자이너 창을 실행합니다Click the Save As Image Addedbutton in the top right and save it to your working folder.
3. Run the saved report.
4. Click the Edit Report Image Addedbutton in the top right to launch the Designer.

위젯 연결기

width	930
url	https://www.youtube.com/watch?v=1zeSPWWkAqg
height	520

Step 1.

데이터 연결하기

Establish Data Connections

1.1 조회 조건 컨트롤 생성데이터 조회를 위한 컨트롤을 생성합니다Create Inquiry Controls

Generate the necessary components for data filtering.

1. 조회기간 Date Range (입사일Join Date)

조회기간 컨트롤의 제목 라벨 컨트롤을 Navigate to UI Bot > Label을 선택하여 생성합니다.
컨트롤의 속성을 변경합니다 to create the title.
Set the control's property to "Period".
- Text : 조회기간
조회 조건으로 사용할 캘린더 컨트롤을
- Period
Navigate to UI Bot > Calendar > D From To를 선택하여 생성합니다 to create the date range picker.
Image Removed
컨트롤의 속성을 변경합니다Image Added
Set the control's properties.
- Name : VS_FROM_DATE
- Name2 : VS_TO_DATE
- InitDate : DATE(-10,F,F);NOW()
Image RemovedImage Added

2. 부서

부서 컨트롤의 제목 라벨 컨트롤을

Division

Create via UI Bot > Label을 선택하여 생성합니다.
컨트롤의 속성을 변경합니다 to create Division control's title.
Set the control's property.
- Text : 부서
조회 조건으로 사용할 콤보박스 컨트롤을
- Division
Navigate to UI Bot > ComboBox > MultiCombo를 선택하여 생성합니다 to use a combo box as a filter condition.
Image Removed
컨트롤의 속성을 변경합니다Image Added
Set the control's properties.
- Name : VS_DIVISION
- DataSource : 부서Division
- CaptionField : DIVISION
- ValueField : DIVISION
- Enable UseSelectText 활성화
- Enable AutoRefresh 활성화
Image RemovedImage Added
Image RemovedImage RemovedImage AddedImage Added

1.2 Bind List-Grid

데이터소스 연결

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

Image Removed

Data Source

Connect the "Grid" data source to the grid control and execute the report to verify the data stream.

Image Added

참고사항

title	참고 : 그리드 데이터소스 쿼리Reference : Grid Data Source Query Statement

코드 블럭

language	sql
title	그리드Grid
linenumbers	true
collapse	true

SELECT T1.EMP_NODIVISION
    , 'U0' AS IMG
    , T1.EMP_NM
    NO
	, T1.DIVISIONEMP_NM
    , T1.EMP_RANK
    , T1.GENDER
    	, T1.BIRTHENTER_DATE
    	, T1.ENTERBIRTH_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_EN T1
WHERE 1=1
  AND T1.ENTER_DATE BETWEEN @:VS_FROM_DATE AND @:VS_TO_DATE
  AND T1.DIVISION IN (@:VS_DIVISION)
ORDER BY  T1.EMP_NO, T1.DIVISION

Image RemovedImage Added

Step 2. Configure List-Grid

속성 설정하기

Properties

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

Image Removed

정렬 > 텍스트 정렬

참고사항

icon	false
title	Discription

필드명

화면표시명

필드유형

데이터

Description

Define the List-Grid's field types for optimized data entry.

Image Added

연락처

	Field Name	Caption	Field Type	Data	Alignment > Data Alignment
1	DIVISION	부서Division	ComboBox	데이터소스 Datasource : 부서Division	Center
2	IMG	IMG	Image		Center
3	ENP_NO	사번ID			Center
4	EMP_NM	이름Name			Center
5	EMP_RANK	직급Rank	ComboBox	데이터소스 Datasource : 직급Rank	Center
6	GENDER	성별Gender	ComboBox	데이터소스 Datasource : 성별Gender	Center
7	ADDRESS	주소	Left	8	ENTER_DATE	입사일Join Date	DateTime	서식 Format > {0:yyyy-MM-dd}	Center
98	BIRTH_DATE생년월일	DOB	DateTime	서식 Format > {0:yyyy-MM-dd}	Center
109	EMAIL	이메일Email			Left
1110	PHONE_NO	Contact	MaskEdit	서식 Format > 000-0000-0000	Center
1211	LEAVE_YN퇴사여부	Resigned	CheckBox	CheckedValue : Y, UnCheckedValue : N	Center
1312	ETC	비고Notes			Left

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

Image Removed

각 필드의 화면표시명을 변경합니다.
Image Removed
보고서 화면에서 사용하지 않는 필드는 전체 선택하여 표시를 비활성화합니다

-Grid and select [Design] to launch the configuration window.

Image Added

Update the Caption for each field.
Image Added
Select and deactivate Show property to hide unused fields.
- C_USER, C_DATE, U_USER, U_DATE - 표시 비활성화
Image Removed
필드의 텍스트 정렬을 변경합니다.
- 정렬 - 텍스트 정렬Deactivate "Show"
Image Added
Set Data Align for all relevant fields.
- Alignment - Data Alignment : Center
Image Removed
필드 유형을 변경하여 값을 쉽게 변경할 수 있도록 설정합니다.
필드 명필드 유형부서 직급 성별
Image Added

Configure field types to enable intuitive data entry.

생년월일 입사일연락처

Field Names

Field Type

Division / Rank / Gender

펼치기

title	ComboBox

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

Image RemovedField Type & Data Source Configuration

Image Added

IMG

펼치기

title	Image

필드 유형 설정

Image Removed

Field Type Configuration

Image Added

DOB / Join Date

펼치기

title	DateTime

필드 유형, 서식 설정

Image Removed

Field Type & Format Configuration

Image Added

Contact

펼치기

title	MaskEdit

필드 유형, 서식 설정

(서식은 서식창에 입력합니다Field Type & Format Configuration

(Enter formats in the Format window.)

Image RemovedImage Added

퇴사여부Resigned

펼치기

title	CheckBox

필드 유형Field Type, CheckedValue, and UnCheckedValue 설정Configuration

Image Removed

IMG, 사번 필드의 수정 가능 기능을 비활성화합니다.

Image Removed

마지막으로 우 클릭 > 유효성 검사 메뉴를 통해 [퇴사여부] 데이터 수정 시 자동으로 입력될 초기 값을 설정합니다.
Image Removed

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

Image Removed

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

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

3.1 계산필드 추가

List Grid에 계산필드를 추가하기 위해 [디자인]을 클릭하여 디자인 설정창을 실행합니다.
Image Removed
Image Removed 버튼을 눌러 필드를 추가합니다.
Image Removed
필드를 생년월일 필드와 입사일 필드 사이로 이동하고, 기본 속성을 변경합니다.
- 화면표시명 : 근속년수
- 수정 가능 비활성화
- 병합 가능 비활성화
Image Removed
데이터 - 수식의 Image Removed 버튼을 클릭하여 수식 편집기 창을 실행합니다.
Image Removed
좌측 목록에서 YEAR 함수와 [입사일] 필드를 선택하여 수식을 작성한 후 적용 버튼을 눌러 수식 작성을 완료합니다.
Image Removed
Image Added
Deactivate the "Editable" property for IMG and EMP_NO(ID).
Image Added
Access right-click the List-Grid > Validation menu to set the default initial value for the [LEAVE_YN](Resigned) field when records are modified.
Image Added

Run the report to verify that the design configurations have been successfully applied.

Image Added

Step 3. Utilizing the Formula Editor

Calculate employee metrics such as "Years of Service" and "Headcount" using Formula Editor.

3.1 Add Calculated Fields

To add a new calculated field, click [Design] menu and open the Design window.
Image Added
Add Image Added button to insert a new field.
Image Added
Move the field between DOB and Join Date fields and set the default settings.
- Caption : Years of Service
- Deactivate Editable
- Deactivate Mergeable
Image Added
Navigate to Data > Formula and click Image Added button to open Formula Editor window.
Image Added
Use YEAR function and [Join Date] field on the left to calculate "Years of Service" and click Apply button to finish writing.
Image Added

패널

펼치기
title 사용한 수식 펼치기Expand Formula Used
YEAR(TODAY()) - YEAR([입사일Join Date]) + 1
서식의 Image Removed 버튼을 클릭하여 서식 편집기 창을 실행한 후 숫자 형식에 Click the Format Image Added button and enter "{0:N0] 년차"를 입력합니다Years" in the Numeric format field.
Image Removed
텍스트 정렬을 설정합니다Image Added
Set its data alignment.
- 정렬 Alignment - 텍스트 정렬Data Alignment : Center
Image Removed

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

Image Removed

Image Added

Run the report to confirm the "Years of Service" field has been successfully added.

Image Added

3.2 Apply Label Formula

활용

Label의 Formula를 활용하여 직원 수의 집계값을 표현합니다.
List Grid의 상단에 있는 [Label2] 컨트롤을 선택하여 Formula의 Image Removed 버튼을 클릭하여 수식 편집기 창을 실행합니다.
Image Removed
Use Formula property of a Label to display aggregated employee statistics.

Select [Label2] at the top of the List-Grid and click the Formula Image Added button to open the Formula Editor window.
Image Added

Image Removed
참고사항
icon false
title DiscriptionDescription
디자이너 내에서 컨트롤 찾는 방법
Image Removed
우측 상단의 "[폼 이름 How to Locate Controls
Image Added
Click the "[Form Name]'s Controls" 를 클릭합니다.
팝업창에서 컨트롤 목록을 확인할 수 있으며, Visible 상태 수정 및 선택한 컨트롤로 포커스가 맞춰져 컨트롤의 속성을 변경할 수 있습니다.
텍스트와 COUNTIF 함수를 + 연산자로 연결하여 총 직원 수, 여직원 수, 남직원 수를 라벨 컨트롤에 텍스트로 표현합니다.
in the top right of the Designer.
View the list of controls in the popup to modify visibility states or focus on specific components to edit their properties.

Combine static text and COUNTIF function using the + operator to display total, female, and male headcounts.
Image Added
패널

펼치기
title 사용한 수식 펼치기Expand Formula Used
"▶ 총 Total : " + COUNTIF(:DataGrid, "사번EMP_NO", "") + "명"
+
" ( 여직원 ▶ Woman : " + COUNTIF(:DataGrid, "사번EMP_NO", "[GENDER]='Ffemale'") + "명"
+
" / 남직원 ▶ Man : " + COUNTIF(:DataGrid, "사번EMP_NO", "[GENDER]='Mmale'") + "명 )"

Click the [적용] 버튼을 클릭하여 작성한 수식대로 직원수가 정상적으로 계산되는지 확인합니다.
Image RemovedApply] button to verify that the employee headcount is calculated correctly according to the formula.
Image Added

Step 4. CRUD

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

Configuration

Enable data creation, inquiry, updates, and deletions using Create Input Form and DB Upload features.

4.1

입력 폼 생성

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

[편집 모드]에서 List Grid 컨트롤을 우 클릭하여 [입력 폼 생성] 항목을 선택합니다.

Image Removed
List Grid에 있는 필드 유형대로 라벨과 입력 컨트롤이 생성됩니다.

Image Removed
목표화면과 같이 컨트롤들을 배치합니다.

Image Removed

Create Input Form

Link input controls to the List-Grid using the "CreateInputForm" feature.

In [Edit Mode], right-click the List-Grid and select [CreateInputForm] menu.
Image Added
Labels and input controls will be auto-generated based on the grid's field types.
Image Added

Rearrange and style these controls to match the target layout.
Image Added

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

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

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

참고사항

icon	false
title	Discription

Description

Controls generated via "CreateInputForm" can be resized or repositioned,

and unused components can be deleted.

Additionally the text and design properties of these controls can be fully customized.

4.2

실행 계획 디자인

Execution Plan Design

Open the DB Bot - DB Upload
를 선택하여 실행 계획 디자인 창을 실행합니다
menu to configure the execution plan.
Image Removed
Image Added
Image RemovedImage Added

참고사항
icon false
title Discription
템플릿 보고서이기 때문에 실행 계획 디자인이 일부분 작성되어 있습니다.
데이터 컨트롤을 연결하여 컬럼 연결이 자동으로 되는 것을 확인합니다.
데이터 컨트롤
Description
Since this is a template, the core logic is pre-defined.
Connect Data control to verify that the DataGrid is correctly mapped to the database columns.
- Data control : DataGrid
Image RemovedImage Added

Step 5. Process Bot

설정하기

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

Configuration

Configure data CRUD and navigate actions using Process Bot.

Click the Process Bot() 버튼을 눌러 Process Bot 설정 창을 실행합니다button to launch the configuration window.

5.1

데이터 저장 모듈

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

Data Persistence Module

Configure CRUD operations using functional modules.

Click Process Bot 아이콘icon() 을 클릭하여 프로세스 봇 창을 실행하고, Report 를 더블 클릭합니다.
Image Removed
Activities 탭을 클릭하고, Modules > 기능별 > 데이터 저장 > '데이터 그리드 CRUD 기능(실행 계획)' 모듈을 더블 클릭합니다.
Image Removed
모듈 아이콘(Image Removed)을 클릭 후, 세부 옵션을 설정합니다.
- 모듈 구성 내용에 맞게 옵션 선택
- [저장] 버튼 눌러 모듈 설정 완료
Image Removed

5.2 폼 이동 모듈

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

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

Image Removed
Activities 탭을 클릭하고, Modules > 컨트롤별 > Form > '폼 활성화 시키기(폼 이동 기능 + 조회 설정)' 모듈을 더블 클릭합니다.

Image Removed
모듈 아이콘(

Image Removed)을 클릭 후, 세부 옵션을 설정합니다.

모듈 구성 내용에 맞게 옵션 선택
BTN_LOG 버튼 클릭 시 LOG 폼으로 이동 및 DataGrid1 컨트롤 조회 설정
[저장] 버튼 눌러 모듈 설정 완료

Image Removed
BTN_LOG > OnClick 이벤트와 모듈을 연결합니다.

Image Removed
BTN_MAIN 버튼 클릭 시 MAIN 폼으로 이동하는 동작을 설정합니다.
BTN_MAIN 컨트롤을 더블 클릭합니다.

Image Removed
Activities 탭을 클릭하고, Modules > 컨트롤별 > Form > '폼 활성화 시키기(폼 이동 기능 + 조회 설정)' 모듈을 더블 클릭합니다.

Image Removed
모듈 아이콘(

Image Removed)을 클릭 후, 세부 옵션을 설정합니다.

모듈 구성 내용에 맞게 옵션 선택
BTN_MAIN 버튼 클릭 시 MAIN 폼으로 이동 및 DataGrid 컨트롤 조회 설정
[저장] 버튼 눌러 모듈 설정 완료

Image Removed
BTN_MAIN > OnClick 이벤트와 모듈을 연결합니다.

Image Removed

아래와 같이 프로세스 봇이 설정 되었는지 확인하고 저장합니다.

Image Removed

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

Image Removed

변경 이력

to launch the window and double-click the Report object.
Image Added
From the Activities tab, navigate to Modules > Save Data and double-click the 'DataGrid CRUD Template' module.
Image Added
Click the module icon(Image Added) to configure detailed options:
- Select options according to the module configuration.
- Click [Save] button to complete the module setup.
Image Added

5.2 Form Navigation Modules

Configure navigation to different forms upon button clicks within the report.

Configure the action to navigate to the Log form when the BTN_LOG button is clicked.
Double-click the BTN_LOG button.
Image Added
From the Activities tab, navigate to Modules and double-click the 'Activate Form(Move to other form + Refresh)' module.
Image Added
Click the module icon(Image Added) to configure detailed options:
- Select options according to the module configuration.
- Configure navigation to the LOG form and inquiry for DataGrid1 upon clicking BTN_LOG button.
- Click [Save] button to complete the module setup.
Image Added
Link this module to the BTN_LOG > OnClick event.
Image Added
Configure the action to navigate to the MAIN form when the BTN_MAIN button is clicked.
Double-click the BTN_MAIN.
Image Added
From the Activities tab, navigate to Modules and double-click the 'Activate Form(Move to other form + Refresh)' module.
Image Added
Click the module icon(Image Added) to configure detailed options:
- Select options according to the module configuration.
- Configure navigation to the MAIN form and inquiry DataGrid upon clicking BTN_MAIN button.
- Click [Save] button to complete the module setup.
Image Added
Link this module to the BTN_MAIN > OnClick event.
Image Added
Verify that the Process Bot is configured as shown below and save.
Image Added

Verify that the report is functioning correctly.

Image Added

페이지 트리

버전 비교

이전 버전 2

새 버전 3

키

Step 1.

Establish Data Connections

1.2 Bind List-Grid

Data Source

Step 2. Configure List-Grid

Properties

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

3.1 계산필드 추가

Step 3. Utilizing the Formula Editor

3.1 Add Calculated Fields

3.2 Apply Label Formula

Step 4. CRUD

Configuration

4.1

Create Input Form

4.2

Execution Plan Design

Image Added

Step 5. Process Bot

Configuration

5.1

Data Persistence Module

5.2 폼 이동 모듈

5.2 Form Navigation Modules

페이지 트리

페이지 이력

버전 비교

이전 버전 2

새 버전 3

키

Step 1.

Establish Data Connections

1.2 Bind List-Grid

Data Source

Step 2. Configure List-Grid

Properties

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

3.1 계산필드 추가

Step 3. Utilizing the Formula Editor

3.1 Add Calculated Fields

3.2 Apply Label Formula

Step 4. CRUD

Configuration

4.1

Create Input Form

4.2

Execution Plan Design

Image Added

Step 5. Process Bot

Configuration

5.1

Data Persistence Module

5.2 폼 이동 모듈

5.2 Form Navigation Modules