Easy Heading Macro

navigationTitle	목차
navigationExpandOption	expand-all-by-default

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

위젯 연결기

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

Image Removed

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

Template 사용 방법
포털에서 보고서를 실행합니다.
템플릿 위치

Target Screen

Image Added

정보

title

템플릿 보고서 정보

Template Report Information

This practice screen is based on a predefined Template.

How to Use the Template
1. Execute the report from the portal.
  Template Location : [BP_Training] > [Template] > "[Template] Employees Info Management"

Image Removed

1. Image Added

우측 상단의

1. Click the Image Modified(

다른 이름으로 저장) 버튼을 클릭하여 작업할 폴더에 저장합니다.
저장한 보고서를 실행합니다.
우측 상단의

Image Removed(보고서 편집) 버튼을 클릭하여 디자이너 창을 실행합니다

1. Save As) button in the upper right corner to save the report to your working folder.
2. Execute the saved report.
3. Click the Image Added(Edit Report) button in the upper right corner to launch the Designer window.

Step 1.

데이터 연결하기

Connect Data

1.1

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

Creating Query Condition Controls

Create Controls for data retrieval.

1. Joining Period

To create a title for Joining Period(
입사 기간) 컨트롤의 제목으로 사용할 컨트롤을 UI Bot > Label을 선택하여 생성합니다.
Image Removed
컨트롤의 속성을 변경합니다.
- Text : joining Period
Image Removed
조회 조건으로 사용할 calendar 컨트롤을 UI Bot > Calendar > D From To를 선택하여 생성합니다.
Image Removed
컨트롤의 속성을 변경합니다.
i.e., employment start period), select [UI Bot] > [Label].
Image Added
Modify the property of the Control.

Text : Period

Image Added

3. To create a calendar Control for query condition, go to [UI Bot] > [Calendar] > [D From To].

Image Added

4. Modify the properties of the Control.

Name : VS_FROM_DATE

Name2 : VS_TO_DATE

InitDate : DATE(-10,F,F);NOW()

Image Removed

Image Added

2. Division

Division(부서) 컨트롤의 제목으로 사용할 컨트롤을 UI Bot > Label을 선택하여 생성합니다.
Image Removed
컨트롤의 속성을 변경합니다.
To create a title for Division Control, select [UI Bot] > [Label].
Image Added
Modify the property of the Control.

Text : Division

Image Removed
조회 조건으로 사용할 ComboBox 컨트롤을 UI Bot > ComboBox > MultiCombo를 선택하여 생성합니다.

Image Removed
컨트롤의 속성을 변경합니다.

Image Added

3. Create a ComboBox Control for query condition by selecting [UI Bot] > [ComboBox] > [MultiCombo].

Image Added

4. Modify the properties of the Control.

Name : VS_DIVISION

DataSource : DIVISION(Using the common data source)

CaptionField : DIVISION

ValueField : DIVISION

UseSelectText 활성화

AutoRefresh 활성화

Image Removed

UseSelectText : Activate

AutoRefresh : Activate

Image Added

Image Modified

1.2 Connecting List-Grid Datasource

연결그리드 컨트롤에

1. Connect the "GRID" Datasource 연결 후 보고서를 조회하여 정상적으로 실행되는지 확인합니다.

Image Removed

참고사항

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

to the grid Control and execute the report to ensure it runs correctly.

Image Added

Image Added

그리드

코드 블럭

title
language	sql

Grid DataSource Query
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.EMAIL
    , T1.PHONE_NO
    , T1.LEAVE_YN
    , T1.ETC
    , T1.C_USER
    , T1.C_DATE
    , T1.U_USER
    , T1.U_DATE
 FROM 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  DIVISION , T1.EMP_NO

Image Removed

Step 2. Configure List-Grid

속성 설정하기 참고사항

icon	false
title	Discription

데이터를 쉽게 입력하기 위해 List-Grid의 Field Type을 설정합니다.

필드명필드유형데이터정렬 > 텍스트 정렬1EMP_NOCenter2IMGImageCenter3EMP_NMCenter4

Properties

1. To edit the design of the [List-Grid] Control, right-click the Control and select [Design] to open the Design window.

Image Added

2. Select all unused fields in the report and disable [Show] property.

C_USER, C_DATE, U_USER, U_DATE : Disable [Show] Property
Image Added

3. Change the data alignment of the fields.

[Alignment] - [Data Alignment] : Center
Image Added

4. Change the field type to allow easier value modification.

No.	Field	Field Type	Option
1	IMG	Image
2	DIVISION	ComboBox	Datasource : DIVISION

Center

3

5

EMP_RANK

ComboBox

Datasource : EMP_RANK

Center

4

6

GENDER

ComboBox

Datasource : GENDERCenter7

Defined items : female;F\|male;M
5	BIRTH_DATE	DateTime	Format > {0:dd-MM-yyyy}

Center

6

89EMAILLeft10

ENTER_DATE

DateTime

Format > {0:dd-MM-yyyy}

Center

7

PHONE_NO

MaskEdit

Format > 000-0000-0000

Center

8

11

LEAVE_YN

CheckBox

CheckedValue : Y, UnCheckedValue : N

Center12ETCLeft

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

Image Removed

각 필드의 caption 변경도 가능합니다.

Image Removed
보고서 화면에서 사용하지 않는 필드는 전체 선택하여 표시를 비활성화합니다.
C_USER, C_DATE, U_USER, U_DATE

- Show 비활성화

Image Removed

필드의 데이터 정렬을 변경합니다.

Alignment

- Data Alignment : Center

Image Removed

Field Type을 변경하여 값을 쉽게 변경할 수 있도록 설정합니다.

필드 명Field TypeDIVISION / EMP_RANK /
GENDER 펼치기

title	ComboBox

Field Type, Datasource 설정

1. DIVISION

Image Removed

2. EMP_RANK

Image Removed

3. GENDER

Image Removed

IMG

펼치기

title	Image

Field Type 설정

Image Removed

BIRTH_DATE / ENTER_DATE 펼치기

title	DateTime

Field Type, Format 설정

1. BIRTH_DATE, ENTER_DATE

Image Removed

PHONE_NO

펼치기

title	MaskEdit

Field Type, Format 설정

(Format 창을 클릭해서 입력합니다.)

Image Removed

LEAVE_YN

펼치기

title	CheckBox

Field Type, CheckedValue, UnCheckedValue 설정

Image Removed

IMG, EMP_NM 의 Editable 기능을 비활성화합니다.

Image Removed
IMG와 DIVISION 필드를 맨 위로 옮깁니다.

Image Removed

부서 필드 기준으로 셀을 병합하기 위한 설정을 합니다.

IMG~ETC Filterable, Mergeable 비활성화
Merge Type : Vertical

Image Removed

Column의 스타일을 변경하기 위한 설정을 합니다.

Image Removed

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

Image Removed

Step 3. Formula Editor를 활용하기

Formula Editor를 활용하여 YOS(근속년수), Employees count(직원 수)를 계산합니다.

3.1 계산필드 추가

List Grid에 계산필드를 추가하기 위해 [디자인]을 클릭하여 디자인 설정을 실행합니다.

Image Removed

Image Removed 버튼을 눌러 필드를 추가합니다.

Image Removed
필드를 BIRTH_DATE 필드와 ENTER_DATE 필드 사이로 이동하고, 기본 속성을 변경합니다.

화면표시명 : YOS
Editable : 비활성화
Mergeable : 비활성화

Image Removed
Data - Formula의

Image Removed 버튼을 클릭하여 수식 편집기를 실행합니다.

Image Removed

좌측 목록에서 YEAR 함수와 [ENTER_DATE] 필드를 선택하여 수식을 작성한 후 적용 버튼을 눌러 수식 작성을 완료합니다.
Image Removed

패널

펼치기

title	사용한 수식 펼치기

YEAR(TODAY()) - YEAR([ENTER_DATE]) + 1

Format의

Image Removed 버튼을 클릭하여 Format 편집기 창을 실행한 후 숫자 형식에

5. Disable the [Editable] property for [IMG] and [EMP_NM].

Image Added

6. Move the IMG and DIVISION fields to the top.

Image Added

7. Configure settings to merge cells based on the DIVISION field.

IMG~ETC : Disable Filterable, Mergeable

Merge Type : Vertical
Image AddedImage Added

8. Configure settings to change the style of the columns.

Image Added

9. Execute the report to check if the configured designs are applied successfully.

Image Added

Step 3. Utilizing the Formula Editor

Use the Formula Editor to calculate YOS(Years of Service) and Employees count(The Number of Employees).

3.1 Adding Calculated Fields

Click [Design] on the ListGrid to open the Design window and add calculataed fields.
Image Added
Add a new field by clicking Image Added button.
Image Added
Move the new field between BIRTH_DATE and ENTER_DATE fields, and modify its Common properties.

Caption : YOS

Editable : Disable

Mergeable : Disable

Image Added

4. Click theImage Added button under Data - Formula to open the Formula Editor.

Image Added

5. From the list on the left, select the YEAR function and [ENTER_DATE] field to create the formula, then click Apply button to complete the formula setup.

Image Added

6. Click the Image Added button next to Format section to open the Format Editor window, then enter "{0:N0} Year"

를 입력합니다

as the number format.

Image Modified

7. Set Data Alignment

을 설정합니다

.

Alignment

Alignment - Data Alignment : Center

Image Removed

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

Image Removed Image Added

8. Execute the report to check if the YOS field is successfully added.

Image Added

3.2 Utilizing Label Formula

활용

Label의 Formula를 활용하여 직원 수 정보를 표현합니다.

List Grid의 우측 상단에 있는 [Label2] 컨트롤을 선택하여 Formula의

Image Removed 버튼을 클릭하여 Formula Editor를 실행합니다.

Image Removed

Display the number of employees using the Formula in Label .

Select the [Label2] Control at the top-right of the ListGrid and click theImage Added button under the Formula to open the Formula Editor.

Image Added

참고사항
icon false
title DiscriptionDescription
디자이너 내에서 컨트롤 찾는 방법
Image Removed
우측 상단의 "[폼 이름 How to Find the Controls In the Designer
Click "[Form Name]'s Controls"를 클릭합니다.
팝업창에서 컨트롤 목록을 확인할 수 있으며, Visible 상태 수정 및 선택한 컨트롤로 포커스가 맞춰져 컨트롤의 속성을 변경할 수 있습니다.
텍스트와 COUNTIF 함수를 + 연산자로 연결하여 Total, Female, Male Count를 텍스트로 표현합니다
at the top right.
In the popup window, you can view the list of Controls, and modify their Visible status and the properties of the selected Control.
Image Added

Display Total, Female, Male Count as text by connecting text and COUNTIF function with + operator.
패널

펼치기
title 사용한 수식 펼치기Expand Used Formula
"▶ Total : "+COUNTIF(:DataGrid, "EMP_NO", "")+" "
+
"▶ Female : "+COUNTIF(:DataGrid, "EMP_NO", "[GENDER] = 'female'")+" "
+
"▶ Male : "+COUNTIF(:DataGrid, "EMP_NO", "[GENDER] = 'male'")

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

Image Added

Step 4.

CURD 설정하기

Configure CRUD Settings

Use the Create Input Form과 and DB Upload 기능을 활용하여 데이터 생성, 조회, 업데이트, 삭제 동작을 설정합니다features to configure Data create, read, update, and delete operations.

4.

1 Create

1 Create Input Form

Connect input Control and the List-Grid using the Create Input Form을 활용하여 입력 컨트롤과 List-Grid를 연결합니다.

Right-Click the List Grid Control in [Edit Mode]
에서 List Grid 컨트롤을 우 클릭하여
, and select [Create Input Form]
항목을 선택합니다
section.
Image Removed
List Grid에 있는 Field Type대로 라벨과 입력 컨트롤이 생성됩니다.
Image Removed
목표 화면과 같이 컨트롤을 배치합니다.
Image Removed
Image Added

2. When the [Input Form Settings] window appears, enter the number of rows or columns to generate and click [OK]. Labels and input Controls will be created based on the field types in the List Grid.

Image Added

3. Arrange the Controls as shown in the target screen.

Image Added

참고사항

title
icon	false

Discription

Description

Create Input Form으로 생성된 컨트롤은 위치나 크기를 변경할 수 있으며

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

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

Controls, generated by the Create Input Form, can be repositioned or resized, and unused Controls can be deleted.

In addition, the text or the style of each Control can be modified.

4.2 Execution Plan Design

Select [DB Bot
- DB Upload를 선택하여 실행 계획 디자인 창을 실행합니다
] > [DB Upload] to open Execution Plan Design window.
Image Modified

참고사항
icon false
title DiscriptionDescription
Template 보고서이기 때문에 Execute Plan 일부가 작성되어 있습니다.
Data Control을 연결하여 Column 연결이 자동으로 되는 것을 확인합니다.
- Data Control : DataGrid
Some part of the Execution Plan is already written, because it is the Template Report.
Verify that columns are automatically mapped when connecting the Data Control.

[Data Control] : DataGrid

Image Modified

Step 5. Configure Process Bot

설정하기

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

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

Image Removed

5.1 데이터 저장 Module

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

Process Bot 아이콘(Image Removed)을 클릭하여 프로세스 봇 창을 실행하고, Report 를 더블 클릭합니다.

Image Removed
Activities 탭을 클릭하고, 'DataGrid CRUD Template' Module을 더블 클릭합니다.

Image Removed
Module 아이콘(

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

Module 구성 내용에 맞게 옵션 선택
[저장] 버튼 눌러 Module 설정 완료

Configure data CRUD operations and screen transition using Process Bot.

5.1 Data Saving Module

Configure CRUD operations using Modules.

Click [Process Bot] icon (Image Added) to open the Process Bot window, and double-click the [Report].

Image Added

Image Added
Click [Activities] tab, and double-click the ‘DataGrid CRUD Template’ Module.

Image Added
After clicking the Module icon(Image Added), configure the detailed options.

Select the options according to the Module status.

Click the [Save] button to complete the Module settings.

Image Modified

5.2 Form change Module

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

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

Image Removed
Activities 탭을 클릭하고, 'Activate

Set navigation to another form when a button is clicked within the Report.

Set it to navigate to the Log Form when the [BTN_LOG] button is clicked.
Double-click the [BTN_LOG] Control.
Image Added
Click the [Activities] tab, and double-click the ‘Activate Form(Move to other form + Refresh)' Module을 더블 클릭합니다’ Module.
Click the Module 아이콘icon () 을 클릭 후, 세부 옵션을 설정합니다.
- Module 구성 내용에 맞게 옵션 선택
- BTN_LOG 버튼 클릭 시 LOG form으로 이동 및 DataGrid1 컨트롤 조회 설정
- [저장] 버튼 눌러 Module 설정 완료
Image Removed
BTN_LOG > OnClick 이벤트와 Module을 연결합니다.
Image Removed
BTN_MAIN 버튼 클릭 시 MAIN 폼으로 이동하는 동작을 설정합니다.
BTN_MAIN 컨트롤을 더블 클릭합니다.
Activities 탭을 클릭하고, Modules > 컨트롤별 > Form > '폼 활성화 시키기(폼 이동 기능 + 조회 설정)' Module을 더블 클릭합니다.
Module 아이콘(Image Removed)을 클릭 후, 세부 옵션을 설정합니다.
Module 구성 내용에 맞게 옵션 선택
BTN_MAIN 버튼 클릭 시 MAIN 폼으로 이동 및 DataGrid 컨트롤 조회 설정

[저장] 버튼

눌러 Module 설정 완료

BTN_MAIN >

OnClick

이벤트와 Module을 연결합니다.

Image Removed

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

Image Removed

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

Image Removed

and

configure the detailed options

.

Select the options according to the Module structure.

Set it to navigate to the Log Form and trigger a quert on the DataGrid1 Control when the [BTN_LOG] is clicked.

Click the [Save] button to complete the module configuration.

Image Added

5. Connect the [BTN_LOG] > OnClick event to the Module.

Image Added

6. Set it to navigate to the MAIN Form when the [BTN_MAIN] button is clicked.

7. Double-click the [BTN_MAIN] Control.

8. In the [Activities] tab, go to Modules > By Controls > Form, and double-click ‘Activate the Form(Move to other form + Query Configuration)’ Module.

Click Module icon(Image Added) to configure the detailed options.

Select the appropriate options according to the Module configuration.

Set it to navigate to MAIN Form and to Query using DataGrid Control when [BTN_LOG] is clicked.

Click the [Save] button to complete the module setup.

9. Connect [BTN_MAIN] > OnClick event to the Module.

Image Added

10. Save it after checking the process bot is configured as shown below.

Image Added

11. Check if the report works as expected.

Image Added

변경 이력

페이지 트리

버전 비교

이전 버전 2

새 버전 현재

키

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

Step 1.

Connect Data

1.1

Creating Query Condition Controls

1. Joining Period

2. Division

1.2 Connecting List-Grid Datasource

Step 2. Configure List-Grid

Properties

Step 3. Formula Editor를 활용하기

3.1 계산필드 추가

Step 3. Utilizing the Formula Editor

3.1 Adding Calculated Fields

3.2 Utilizing Label Formula

Step 4.

Configure CRUD Settings

4.

1 Create Input Form

4.2 Execution Plan Design

Image Modified

Step 5. Configure Process Bot

5.1 데이터 저장 Module

Configure data CRUD operations and screen transition using Process Bot.

5.1 Data Saving Module

5.2 Form change Module

페이지 트리

페이지 이력

버전 비교

이전 버전 2

새 버전 현재

키

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

Step 1.

Connect Data

1.1

Creating Query Condition Controls

1. Joining Period

2. Division

1.2 Connecting List-Grid Datasource

Step 2. Configure List-Grid

Properties

Step 3. Formula Editor를 활용하기

3.1 계산필드 추가

Step 3. Utilizing the Formula Editor

3.1 Adding Calculated Fields

3.2 Utilizing Label Formula

Step 4.

Configure CRUD Settings

4.

1 Create Input Form

4.2 Execution Plan Design

Image Modified

Step 5. Configure Process Bot

5.1 데이터 저장 Module

Configure data CRUD operations and screen transition using Process Bot.

5.1 Data Saving Module

5.2 Form change Module