Step 1. Connect Data

1.1 Creating Query Condition Controls

Create Controls for data retrieval.

1.  Joining Period

1.  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.  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.  To create a title for Division Control, select [UI Bot] > [Label].

   

2.  Modify the property of the Control.

            Text : Division

     3.  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 : Activate

          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.

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_USER, C_DATE, U_USER, U_DATE : Disable [Show] Property
         

      3.  Change the data alignment of the fields.

            [Alignment] - [Data Alignment] : Center
           

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

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

           

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

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

           IMG~ETC : Disable Filterable, Mergeable

           Merge Type : Vertical
          

     8. 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

     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.  Add a new field by clicking  button.
   
   
   
3. Move the new field between BIRTH_DATE and ENTER_DATE fields, and modify its Common properties.

           Caption : YOS

           Editable : Disable

           Mergeable : Disable

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

     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.

     6.  Click the  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.  Execute the report to check if the YOS field is successfully added.

3.2 Utilizing Label Formula

Display the number of employees using the Formula in Label .

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

   Description

   How to Find the Controls In the Designer

   Click "[Form Name]'s Controls" 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.

   

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

   

    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.

1. Right-Click the List Grid Control in [Edit Mode], and select [Create Input Form] section.

   

     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.

         

     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.

   

   
   
   

   Description

   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

Configure CRUD operations using Modules.

1.  Click [Process Bot] icon () to open the Process Bot window, and double-click the [Report].
   
   
   
   
   
   
   
2.   Click [Activities] tab, and double-click the ‘DataGrid CRUD Template’ Module.
   
   
   
   
3.  After clicking the Module icon(), configure the detailed options.

           Select the options according to the Module status.

           Click the [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] button is clicked.
   
   
2.  Double-click the [BTN_LOG] Control.
   
   
   
3.   Click the [Activities] tab, and double-click the ‘Activate Form(Move to other form + Refresh)’ Module.
   
   
   
   
4. Click the Module icon () 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.

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

         

     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() 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.

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

     11.  Check if the report works as expected.