Step 1.

Connect Data

1.1

Creating Query Condition Controls

Create Controls for data retrieval.

1. 

Joining Period

1.  joining Period(입사 기간) 컨트롤의 제목으로 사용할 컨트롤을  To create a title for Joining Period(i.e., employment start period), select [UI Bot] > [Label]을 선택하여 생성합니다.

   

   
   

2.  컨트롤의 속성을 변경합니다 Modify the property of the Control.

           Text : Period

      3.  조회 조건으로 사용할 calendar 컨트롤을 To create a calendar Control for query condition, go to [UI Bot] > [Calendar] > [D From To]를 선택하여 생성합니다.

     4.   컨트롤의 속성을 변경합니다  Modify the properties of the Control.

            Name : VS_FROM_DATE

            Name2 : VS_TO_DATE

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

2. Division

1.  Division(부서) 컨트롤의 제목으로 사용할 컨트롤을  To create a title for Division Control, select [UI Bot] > [Label]을 선택하여 생성합니다.

   

    컨트롤의 속성을 변경합니다
2.  Modify the property of the Control.

            Text : Division

     3.  조회 조건으로 사용할 ComboBox 컨트롤을 Create a ComboBox Control for query condition by selecting [UI Bot] > [ComboBox] > [MultiCombo]를 선택하여 생성합니다.

          

     4.  컨트롤의 속성을 변경합니다Modify the properties of the Control.

          Name : VS_DIVISION

          DataSource : DIVISION(공통데이터소스 활용Using the common data source)

          CaptionField : DIVISION

          ValueField : DIVISION

          UseSelectText 활성화  UseSelectText : Activate

          AutoRefresh 활성화  AutoRefresh : Activate

1.2 Connecting List-Grid Datasource

       1.  그리드 컨트롤에 Connect the "GRID" Datasource 연결 후 보고서를 조회하여 정상적으로 실행되는지 확인합니다to the grid Control and execute the report to ensure it runs correctly.

         

         

그리드

참고사항
title 참고 : 그리드 데이터소스 쿼리
코드 블럭
language sql title	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

Step 2. Configure List-Grid

Properties

     1.   To edit the design of the [List-Grid] 컨트롤의 디자인을 수정하기 위해 컨트롤을 우 클릭 후 [디자인]을 선택해 디자인 창을 실행합니다 Control, right-click the Control and select [Design] to open the Design window.

     2.  보고서 화면에서 사용하지 않는 필드는 전체 선택하여 표시를 비활성화합니다Select all unused fields in the report and disable [Show] property.

           C C_USER, C_DATE, U_USER, U_DATE DATE :  Disable [Show] 비활성화Property
         

      3.  필드의 데이터 정렬을 변경합니다Change the data alignment of the fields.

            [Alignment] - [Data AlignmentData Alignment] : Center
           Image Modified

          4.  Field Type을 변경하여 값을 쉽게 변경할 수 있도록 설정합니다Change the field type to allow easier value modification.

      5.  Disable the [Editable] property for [IMG],  and [EMP_NM] 의 [Editable] 기능을 비활성화합니다.

           

     6.   IMG와 DIVISION 필드를 맨 위로 옮깁니다  Move the IMG and DIVISION fields to the top.

     7.  부서 필드 기준으로 셀을 병합하기 위한 설정을 합니다Configure settings to merge cells based on the DIVISION field.

           IMG~ETC Filterable : Disable Filterable, Mergeable 비활성화

           Merge Type : Vertical
          

     8. Column의 스타일을 변경하기 위한 설정을 합니다Configure settings to change the style of the columns.

      9.  보고서를 실행하여 설정한 디자인이 정상적으로 적용되었는지 확인합니다Execute the report to check if the configured designs are applied successfully.

   Step 3.

Utilizing the Formula Editor

     Formula Editor를 활용하여 YOS(근속년수), Employees count(직원 수)를 계산합니다 Use the Formula Editor to calculate YOS(Years of Service) and Employees count(The Number of Employees).

3.1

Adding Calculated Fields

1.  Click [디자인]을 클릭하여 디자인 설정을 실행합니다Design] on the ListGrid to open the Design window and add calculataed fields.

   

   
   

2.  Image Removed 버튼을 눌러 필드를 추가합니다 Add a new field by clicking Image Added button.
   
   
   
3. 필드를 Move the new field between BIRTH_DATE 필드와 DATE and ENTER_DATE 필드 사이로 이동하고, 기본 속성을 변경합니다fields, and modify its Common properties.

           화면표시명  Caption : YOS

           Editable Editable :  비활성화Disable

           Mergeable :  비활성화Disable

     4.  Data - Formula의Image Removed 버튼을 클릭하여 수식 편집기를 실행합니다Click theImage Added button under Data - Formula to open the Formula Editor.

     5.  좌측 목록에서 YEAR 함수와 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.

     6.  Format의 Image Removed 버튼을 클릭하여 Format 편집기 창을 실행한 후 숫자 형식에 Click the Image Added button next to Format section to open the Format Editor window, then enter "{0:N0} Year"를 입력합니다 as the number format.

     7.  Set Data Alignment을 설정합니다.

           Alignment - Data Alignment : Center

     8.  보고서를 실행하여 YOS 필드가 정상적으로 추가 되었는지 확인합니다Execute the report to check if the YOS field is successfully added.

3.2 Utilizing Label Formula

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

Image Removed

Display the number of employees using the Formula in Label .

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

   참고사항
   icon false title DiscriptionDescription
   디자이너 내에서 컨트롤 찾는 방법우측 상단의 "[폼 이름 How to Find the Controls In the Designer Click "[Form Name]'s Controls"를 클릭합니다. 팝업창에서 컨트롤 목록을 확인할 수 있으며, Visible 상태 수정 및 선택한 컨트롤의 속성을 변경할 수 있습니다. Image Removed

   텍스트와 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

   
   

2. 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'")

   
   

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

Step 4.

 Configure CRUD Settings

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

4.

1 Create Input Form

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

1. Right-Click the List Grid Control in [Edit Mode]에서 List Grid 컨트롤을 우 클릭하여 , and select [Create Input Form] 항목을 선택합니다 section.

   Image RemovedImage Added

     2.  When the [Input Form Settings] 창이 나타나면 생성할 Row 혹은 Column 수를 입력하고 [확인]을 선택합니다. List Grid에 있는 Field Type대로 라벨과 입력 컨트롤이 생성됩니다 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.

         

     3.  목표 화면과 같이 컨트롤을 배치합니다Arrange the Controls as shown in the target screen.

4.2 Execution Plan Design

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

   Image Modified

   
   
   

   참고사항
   icon false title DiscriptionDescription
   Template 보고서이기 때문에 Execute Plan 일부가 작성되어 있습니다.

   Data Control을 연결하여 Column 연결이 자동으로 되는 것을 확인합니다

   Some part of the Execution Plan is already written, because it is the Template Report.

   
   

2. Verify that columns are automatically mapped when connecting the Data Control.

           [Data Control] : DataGrid

Step 5. Configure Process Bot

Configure data CRUD operations and screen transition using Process Bot.

5.

1 Data Saving Module

Module을 활용하여 CRUD 동작을 설정합니다Configure CRUD operations using Modules.

1.  Click [Process Bot] 아이콘icon () 을 클릭하여 프로세스 봇 창을 실행하고, to open the Process Bot window, and double-click the [Report] 를 더블 클릭합니다.
   
   
   
   
   
   
   
2.   Click [Activities]  탭을 클릭하고, 'DataGrid CRUD Template' Module을 더블 클릭합니다tab, and double-click the ‘DataGrid CRUD Template’ Module.
   
   
   
   
3.  Module 아이콘 After clicking the Module icon()을 클릭 후, 세부 옵션을 설정합니다, configure the detailed options.

           Module 구성 내용에 맞게 옵션 선택 Select the options according to the Module status.

           Click the [저장] 버튼 눌러 Module 설정 완료Save] button to complete the Module settings.

5.2 Form change Module

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

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

1.  Set it to navigate to the Log Form when the [BTN_LOG] 버튼 클릭 시 LOG 폼으로 이동하는 동작을 설정합니다 button is clicked.
   
   
2.  Double-click the [BTN_LOG] 컨트롤을 더블 클릭합니다 Control.
   
   
   
3.    Click the [Activities] 탭을 클릭하고, 'Activate tab, and double-click the ‘Activate Form(Move to other form + Refresh)' Module을 더블 클릭합니다’ Module.
   
   
   
   
4. Click the Module 아이콘icon () 을 클릭 후, 세부 옵션을 설정합니다and configure the detailed options.

          Module 구성 내용에 맞게 옵션 선택  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] 버튼 클릭 시 LOG form으로 이동 및 DataGrid1 컨트롤 조회 설정 is clicked.

           Click the [저장] 버튼 눌러 Module 설정 완료Save] button to complete the module configuration.

     5.  Connect the [BTN_LOG] > OnClick 이벤트와 Module을 연결합니다 event to the Module.

         

     6.  Set it to navigate to the MAIN Form when the [BTN_MAIN] 버튼 클릭 시 MAIN 폼으로 이동하는 동작을 설정합니다 button is clicked.

     7.   Double-click the [BTN_MAIN] 컨트롤을 더블 클릭합니다 Control.

     8.    In the [Activities] 탭을 클릭하고 tab, go to Modules > 컨트롤별 > Form > '폼 활성화 시키기(폼 이동 기능 + 조회 설정)' Module을 더블 클릭합니다By Controls > Form, and double-click ‘Activate the Form(Move to other form + Query Configuration)’ Module.

           Module 아이콘  Click Module icon() 을 클릭 후, 세부 옵션을 설정합니다to configure the detailed options.

           Module 구성 내용에 맞게 옵션 선택 Select the appropriate options according to the Module configuration.

            Set it to navigate to MAIN Form and to Query using DataGrid Control when [BTN_MAIN] 버튼 클릭 시 MAIN 폼으로 이동 및 DataGrid 컨트롤 조회 설정LOG] is clicked.

              Click the [저장] 버튼 눌러 Module 설정 완료Save] button to complete the module setup.

     9.  Connect [BTN_MAIN]  > OnClick이벤트와 Module을 연결합니다> OnClick event to the Module.

     10.  아래와 같이 프로세스 봇이 설정 되었는지 확인하고 저장합니다Save it after checking the process bot is configured as shown below.

     11.  보고서가 정상적으로 작동하는지 확인합니다Check if the report works as expected.