AUD PLATFORM
페이지 트리

버전 비교

이전 버전 4

changes.mady.by.user guide

에 저장

비교대상

새 버전 현재

changes.mady.by.user guide

에 저장

키

  • 이 줄이 추가되었습니다.
  • 이 줄이 삭제되었습니다.
  • 서식이 변경되었습니다.

Easy Heading Macro
navigationTitle목차
selectorh1,h2
navigationExpandOptionexpand-all-by-default

...


...

실습

...

Release No : 7.0.500.20240516

실습
예제 ｜i-AUD 기능을 응용한 제품별 매출 현황 분석 화면

위젯 연결기
width1100
urlhttps://www.youtube.com/watch?v=ISZnmE5sRp4&list=PLwlugVSklJKt_ek90KTpoZAKykiCWhnqO&index=15
height600


참고사항
titleQuestions : 매출 실적 현황 화면 목표
  1. 조회조건에 따라 [조회] 버튼 클릭 시 데이터 조회
    Chart > OLAP Grid > 매출현황 보고 데이터(List Grid) 순차조회 되도록 설정

  2. 접속정보 표현
    접속자 ID : Session 정보
    접속시간 : Formula 이용

  3. 계산필드
    영업이익 : [매출액] - [원가] - [판매관리비]
    영업이익율 : GetVariationValue([영업이익]) / [매출액]

  4. 영업이익에 따른 조건부 서식
    영업이익율이 75% 이상인 경우 - 스타일 관리자의 "Olap_달성율2" 스타일 적용
    영업이익율이 70% 이하인 경우 - 스타일 관리자의 "Olap_달성율1" 스타일 적용

  5. Chart 클릭 시 이벤트
    OLAP과 "매출 현황 보고 (List Grid)" 조회
    클릭한 제품명을 라벨에 표현 (단, 보고서 Open 또는 [조회] 버튼 클릭 시 "▶ 제품 : 전체" 로 표현)

  6. 매출 현황 보고 입력 (실행계획)
    [저장] 버튼 클릭 시 조회 조건 "년월"과 차트에서 선택한 "제품" 기준으로 텍스트 박스에 입력한 데이터를 저장 및 수정
    데이터 저장 테이블 명 : EDU_DEV_COMMENT_EDIT

  7. 목표 화면과 동일하게 제작하기
    데이터 단위, 서식, 폰트 색상 등



Step 1. 조회 조건 컨트롤 생성하기

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


1.1 컨트롤 생성 및 배치

디자이너 화면에 컨트롤을 생성합니다.

No.구분컨트롤 종류Name기타
1년월 캘린더Calendar - MonthVS_YEARInitValue: DATE(0,0,0)
2제품 콤보박스ComboBox - MultiComboVS_PRODUCT

Behavior - UseSelectAllText 활성화

Event - AutoRefresh 활성화

3조회 버튼Button - ButtonBTN_REFRESHText: 조회
4차트Chart - ChartBar_Chart

Event - AutoRefresh 활성화

Event - DoRefresh 비활성화


1.2 데이터소스 등록

컨트롤에 연결할 데이터소스를 등록합니다.


메뉴 그룹에서 편집 그룹 > Script Editor를 선택하여 스크립트 에디터를 실행합니다.


1. 제품 콤보 박스(CB_PRODUCT)

  1. 데이터 소스 폴더를 우 클릭하여 데이터 소스를 추가합니다.


  2. 데이터 소스의 이름을 CB_PRODUCT로 변경합니다.


  3. Connection 목록에서 EDU를 선택하여 DB Connection을 설정합니다.

  4. 데이터를 불러올 쿼리를 작성합니다.

    코드 블럭
    languagesql
    firstline1
    titleCB_PRODUCT
    linenumberstrue
    collapsetrue
    SELECT PROD_L_CD
	 , PROD_L_NM
FROM PS_TD_PROD
GROUP BY PROD_L_CD
	   , PROD_L_NM
ORDER BY 1


  5. Execute 버튼을 클릭하여 작성한 쿼리를 실행합니다.


  6. 저장 아이콘을 클릭하여 작성한 데이터 소스를 저장합니다.


2. 차트(Bar_Chart)

  1. 데이터 소스 폴더를 우 클릭하여 데이터 소스를 추가합니다.

  2. 데이터 소스의 이름을 Bar_Chart로 변경합니다.

  3. 데이터를 불러올 쿼리를 작성합니다.

    코드 블럭
    languagesql
    firstline1
    titleBar_Chart
    linenumberstrue
    collapsetrue
    SELECT A.PROD_M_NM    AS 제품중분류명
	 , SUM(CAST(A.SALE_ACT AS BIGINT)) AS AMT
FROM(
	SELECT PROD_M_CD
		 , PROD_M_NM
		 , PROD_CD 
		 , SALE_ACT 
	FROM EDU_DEV_SALES
	WHERE TO_CHAR (TO_DATE( YEAR||MONTH ,'YYYYMM'),'YYYYMM') = @:VS_YEAR
	  AND PROD_L_CD IN ( @:VS_PRODUCT )
	) A
GROUP BY A.PROD_M_NM
	   , A.PROD_M_CD
ORDER BY A.PROD_M_CD


  4. Execute 버튼을 클릭하여 작성한 쿼리를 실행합니다.


  5. 저장 아이콘을 클릭하여 작성한 데이터 소스를 저장합니다.


1.3 컨트롤 속성 설정

컨트롤 속성을 설정합니다.


1. 제품 콤보 박스

  • DataSource : CB_PRODUCT
  • CaptionField : PROD_L_NM
  • ValueField : PROD_L_CD


2. 차트

  • DataSource : Bar_Chart


3. 차트 디자인 설정

  1. 차트 컨트롤을 우 클릭하여 디자인 설정 창을 엽니다.


  2. 차트 유형, 데이터 레이블 표시, Animation 변경
    • 차트 유형 : 묶은 가로 막대형
    • 데이터 레이블 : Value
    • Animation : 1000


  3. 데이터 단위 설정(1억)
    • 계열 - 기타 - 단위 : 100,000,000(1억)


  4. Y1축에 단위 표기 텍스트 추가
    • 축 - 기본 - 텍스트 : 단위: 억원


  5. 범례 표시 해제
    • 범례 - 표시 비활성화


Step 2. 변수 편집기 사용하기

변수 편집기를 활용하여 보고서에서 사용할 변수를 등록합니다.

...

  1. 메뉴 그룹에서 편집 그룹 > Variables를 선택하여 변수 편집기 창을 실행합니다.


  2. 변수 편집기에 보고서에서 사용할 변수를 등록합니다.
    1. 추가 버튼을 눌러 변수를 추가합니다.
    2. 변수명에 각각 VS_PRO_M, VN_FLD, VS_USER를 입력합니다.
    3. 확인 버튼을 눌러 변수 편집기 창을 닫습니다.


Step 3. Olap-Grid 생성하기


3.1 Olap-Grid 데이터 소스 등록 및 연결

Olap-Grid의 데이터 소스를 등록합니다.

...

  1. 편집 그룹 - Script Editor을 선택하여 스크립트 에디터를 실행합니다.


  2. 데이터 소스 폴더를 우 클릭하여 데이터 소스를 추가합니다.

  3. 데이터 소스의 이름을 OLAP으로 변경합니다.

  4. 데이터를 불러올 쿼리를 작성합니다.

    코드 블럭
    languagesql
    firstline1
    titleOLAP
    linenumberstrue
    collapsetrue
    SELECT A.GUBUN AS GUBUN
	, :VN_FLD AS 제품중분류명
	, SUM (A.SALE_ACT) AS 매출액
	, SUM (A.SALE_COST) AS 원가
	, SUM (A.SALE_PROFIT) AS 판매관리비
FROM(
	SELECT CASE WHEN TO_CHAR (TO_DATE( YEAR||MONTH ,'YYYYMM'),'YYYYMM') = :VS_YEAR THEN '당월' ELSE '전월' END AS GUBUN
	    , PROD_M_CD
		, PROD_M_NM
		, PROD_CD 
		, PROD_NM  
		, SALE_ACT
		, SALE_COST
		, SALE_PROFIT 
	FROM EDU_DEV_SALES
	WHERE 1=1
	    AND (TO_CHAR (TO_DATE( YEAR||MONTH ,'YYYYMM'),'YYYYMM') = TO_CHAR( TO_DATE(@:VS_YEAR, 'YYYYMM') - interval '1 month','YYYYMM') -- 전월
		OR TO_CHAR (TO_DATE( YEAR||MONTH ,'YYYYMM'),'YYYYMM') = @:VS_YEAR ) -- 당월
		AND PROD_L_CD IN ( @:VS_PRODUCT )
	 
	) A
WHERE 1=1
  AND A.PROD_M_NM = @:VS_PRO_M
GROUP BY A.GUBUN
    , @:VN_FLD


  5. 우측 Parameters에서 필수 입력값인 변수의 Value를 임의로 입력한 후 Execute 버튼을 클릭하여 작성한 쿼리를 실행합니다.
    • VN_FLD   : PROD_M_NM
    • VS_YEAR : 202305


  6. 저장 아이콘을 클릭하여 작성한 데이터 소스를 저장합니다.

  7. UI Bot > Grid > Olap-Grid를 선택하여 컨트롤을 생성합니다.


  8. 컨트롤을 화면에 배치한 후 속성을 설정합니다.
    • Name : PivotGrid
    • DataSource : OLAP
    • AutoRefresh 활성화
    • DoRefresh 비활성화


3.2 Olap-Grid 계산 필드 추가

OLAP 그리드의 디자인 창을 활용하여 계산필드를 추가합니다.


1. 필드 수정

  1. OLAP 그리드 컨트롤을 우 클릭하여 디자인 설정 창을 실행합니다.


  2. 목표 화면에 맞게 필드의 위치를 변경합니다.


  3. 매출액 필드를 클릭한 후 단위를 1000000(백만)으로 설정합니다.


2. 계산 필드_영업이익

영업이익을 구하는 계산 필드를 추가합니다.

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


  2. 추가한 필드를 Data 영역으로 이동합니다.


  3. 필드의 속성을 수정합니다.
    • 캡션 : 영업이익
    • 단위 : 1,000,000(백만)


  4. 수식의 버튼을 클릭하여 수식 편집기 창을 실행합니다.


  5. 좌측 목록에서 Sum 함수와 필드를 선택하여 수식을 작성한 후 적용 버튼을 눌러 필드에 적용합니다.


    펼치기
    title사용한 수식 펼치기

    Sum([매출액]) - Sum([원가]) - Sum([판매관리비])



3. 계산 필드_영업이익율

영업이익율을 구하는 계산 필드를 추가합니다.

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


  2. 추가한 필드를 Data 영역으로 이동합니다.


  3. 필드의 속성을 수정합니다.
    • 캡션 : 영업이익율
    • 서식 : {0:P1} (서식 편집기 활용)


  4. 수식의 버튼을 클릭하여 수식 편집기 창을 실행합니다.


  5. 좌측 검색 창에 함수를 검색하여 아래와 같이 작성한 후 적용 버튼을 눌러 필드에 적용합니다.

    펼치기
    title사용한 수식 펼치기

    GetVariationValue("[영업이익]", false) / Sum([매출액])


3.3 Olap-Grid 조건부 서식

수식 편집기를 활용하여 영업이익율의 값이 특정 조건일 경우 조건에 따른 서식을 적용하는 조건부 서식을 적용합니다.

...

  1. 스타일 탭에서 조건부 서식의 버튼을 클릭하여 수식 편집기 창을 실행합니다.


  2. 수식 편집기의 함수를 활용하여 조건부 서식의 수식을 아래와 같이 작성한 후 적용 버튼을 눌러 컨트롤에 적용합니다.

    펼치기
    title사용한 수식 펼치기

    CASE(
    AND( FIELD_KEY == "RATE", CELL_VALUE >=0.75) ,
    "BXBCC12812D9AC4E23916AC6DC37F45076",
    AND( FIELD_KEY == "RATE", CELL_VALUE < 0.70) ,
    "BX2E8AC4D90FFC4040AC703B83A5E73CB9",
    "")


    참고사항
    iconfalse
    titleDiscription

    CASE 함수는 SWITCH로 검색하여 사용합니다.


    참고사항
    iconfalse
    titleDiscription

    적용할 스타일은 스타일 명을 검색하여 사용합니다.

    스타일 명 : Olap_달성율1, Olap_달성율2


  3. 서식을 적용할 필드(영업이익율)의 필드 명을 수식에 맞춰서 RATE로 변경합니다.


3.4 Olap-Grid 기타 속성 설정

목표 화면에 맞게 컨트롤의 속성을 변경합니다.

  1. 설정

    설정 탭에서 컨트롤의 디자인 설정을 합니다.


  2. 기타
    기타 탭에서 사용하지 않는 기능들을 비활성화 합니다.


  3. 마지막으로 확인 버튼을 눌러 Olap-Grid의 디자인 창 편집을 완료합니다.


Step 4. Process Bot 활용 동작 설정하기

 Process Bot을 활용하여 보고서의 동작을 설정합니다.

4.1 콤보박스 속성 지정

  1. 상단 메뉴에서 [Process Bot]을 실행합니다.



  2. [Process Bot] 창의 좌측 목록에서 'VS_PRODUCT'를 더블 클릭합니다.


  3. Activities 탭을 클릭하고, '전체 선택'로 검색 >'멀티 콤보박스 전체 선택으로 변경' 모듈을 더블 클릭합니다.


  4. 모듈 아이콘()을 클릭 후, 세부 옵션을 설정합니다.

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


  5. 콤보박스에 데이터가 연결될 때, 모듈을 실행되기 위해 'OnDataBindEnd'를 Drag하여 모듈과 연결합니다. 


4.2 Chart 조회 시, 변수값 설정 및 Olap-Grid 조회

  1. Object 탭을 클릭하고, 'Bar_Chart'를 더블 클릭합니다.


  2. Activities 탭을 클릭하고, '세팅하기'로 검색 >'[Variable] 변수 여러 개 값 세팅하기' 모듈을 더블 클릭합니다.


  3. 모듈 아이콘()을 클릭 후, 세부 옵션을 설정합니다.

    • 모듈 구성 내용에 맞게 옵션 선택
    • 변수명에 ' VN_FLD,VS_PRO_M '을 입력합니다.
    • 세팅할 값에 ' PROD_M_NM, '을 입력합니다.
      (※ ',' 뒤에 값을 비운 이유는 VS_PRO_M 변수에 null 값을 주기 위함)
    • [저장] 버튼 눌러 모듈 설정 완료


  4. Chart에 데이터가 연결될 때, 모듈을 실행되기 위해 'OnDataBindEnd'를 Drag하여 모듈과 연결합니다.


4.3 차트 클릭 시 변수값 설정 및 Olap-Grid 조회

  1. Object 탭을 클릭하고, 'Report'를 더블 클릭합니다.


  2. Activities 탭을 클릭하고, 'Point'로 검색 >'차트 Point 클릭 시 변수 설정하기' 모듈을 더블 클릭합니다.


  3. 모듈 아이콘()을 클릭 후, 세부 옵션을 설정합니다.

    • 모듈 구성 내용에 맞게 옵션 선택
    • 클릭할 차트를 'Bar_Chart'로 선택하고 해당 차트의 Point 값을 담을 변수를 'VS_PRO_M'으로 입력합니다.
    • 추가로 세팅할 변수에 변수명을 'VN_FLD' 변수값에 'PROD_NM'을 입력합니다.
    • 차트를 클릭한 후, 컨트롤을 조회하기 위해 'PivotGrid'를 선택 합니다.
    • [저장] 버튼 눌러 모듈 설정 완료


  4. 보고서가 OPEN될 때, 모듈을 실행되기 위해 'OnDocumentLoadComplete'를 Drag하여 모듈과 연결합니다.


4.4 조회 버튼 클릭 시 차트 조회

  1. Object 탭을 클릭하고, 'BTN_Refresh'를 더블 클릭합니다.


  2. Activities 탭을 클릭하고, 'Refresh'를 더블 클릭합니다.


  3. 모듈 아이콘()을 클릭 후, 세부 옵션을 설정합니다.

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


  4. Button을 클릭할 때, 모듈이 실행되기 위해 'OnClick'을 Drag하여 모듈과 연결합니다.


  5. 저장을 클릭하여 Process Bot을 저장합니다.

...

설정한 Process가 정상적으로 동작하는지 확인합니다.


Step 5. Label 컨트롤 활용하기

보고서에 현재 시간과 접속한 사람의 아이디를 나타내는 라벨을 추가합니다.


5.1 현재 시간

현재 시간을 나타내는 라벨 컨트롤을 추가합니다.

  1. UI Bot에서 Label 컨트롤을 생성합니다.


  2. Formula의 더 보기 버튼을 클릭하여 수식 편집기 창을 실행합니다.


  3. 수식 편집기의 함수를 활용하여 현재 시간을 컨트롤에 표시합니다.

    펼치기
    title사용한 수식 펼치기

    ToDate(NOW(), ["yyyy-MM-dd HH:mm:ss"])



5.2 접속 정보

접속한 사람의 아이디를 나타내는 라벨 컨트롤을 추가합니다.

...

라벨 컨트롤에 설정한 값이 정상적으로 표시되는지 확인합니다.


Step 6. CRUD 설정하기

매출 현황 분석 항목을 입력할 수 있는 폼을 생성합니다.


6.1 컨트롤 생성 및 배치

No.구분컨트롤 종류NameText기타
1그룹Group


2타이틀Label
매출 현황 분석
3제품LabelVS_PRODUCT_NM
텍스트 우측 정렬
4입력 창InputBox - RichTextBox


5저장 버튼ButtonBTN_SAVE저장
6그리드Grid - List-GridDataGrid


6.2 List-Grid 데이터 소스 작성

데이터 저장을 하기 위한 ListGrid의 데이터 소스를 작성합니다.

...

코드 블럭
languagesql
firstline1
titleData1
linenumberstrue
collapsetrue
select *
from EDU_DEV_COMMENT_EDIT
where 1=1
and yymm = :VS_YEAR
and PRODUCT_NM =( case when :VS_PRO_M = '' then '전체' else :VS_PRO_M end )


6.3 List-Grid 동작 설정

List-Grid 내용을 저장하기 위해 Process Bot에 동작을 설정 합니다.

  1. List-Grid 조회 설정

    • 상단 메뉴에서 [Process Bot]을 실행합니다.
    • Bar_Chart가 DataBindEnd될 때, 그리고 Chart Point를 클릭 했을 때 조회하도록 설정합니다.
    • (Chart의 Point값을 변수로 다시 데이터 조회)



  2. List-Grid 초기 값 설정

    • List-Grid의 변수인 'VS_PRO_M'이 전체인 경우, 빈 행을 추가 하기 위해 설정
    • Object 탭에서 'DataGrid'를 선택합니다.
    • Activities 탭을 클릭하고, '행 추가'로 검색 > '데이터 그리드에 데이터가 없을 시 행 추가' 모듈을 더블 클릭합니다.
    • 모듈 아이콘()을 클릭 후, 세부 옵션을 설정합니다. > 'DataGrid' 선택 > [저장] 버튼 눌러 모듈 설정 완료
    • List-Grid의 데이터와 연결될 때, 모듈을 실행되기 위해 'OnDataBindEnd'를 Drag하여 모듈과 연결합니다.



  3. 제품명을 표시할 Label 컨트롤의 속성을 설정합니다.

    • Label 컨트롤 'VS_PRODUCT_NM'의 Formula를 클릭합니다.
    • 좌측 목록에서 IF 함수와 제품명 변수 'VS_PRO_M'을 선택하여 수식을 작성한 후 [적용] 버튼을 눌러 필드에 적용합니다.


    코드 블럭
    languagejs
    firstline1
    titleOnDataBindEnd
    linenumberstrue
    collapsetrue
    IF(:VS_PRO_M = null, "▶ 제품 : 전체", "▶ 제품 : "+:VS_PRO_M)


6.4 컨트롤 속성 변경

데이터 CRUD를 위해 컨트롤의 속성을 변경합니다.


1. List-Grid

  • Visible 비활성화
  • DataSource : Data1
  • DoRefresh 비활성화

...

참고사항
title참고 : 개행 문자 설정 방법

RichTextBox는 개행 문자를 입력할 수 있는 컨트롤입니다.

개행 문자를 저장하려면 ListGrid에서 해당 필드의 속성을 변경해야 합니다.

  1. DataGrid에서 마우스 우 클릭 후 [디자인] 창을 실행합니다.


  2. [COMMENT_TXT] 필드의 데이터 > 필드 유형, 라인높이 비율을 설정합니다.
    • 필드 유형 : MultiLineText
    • 라인높이 비율 : 1 이상




2. RichTextBox

List-Grid의 필드에 데이터 바인딩합니다.

  • Binging : DataGrid - COMMENT_TXT


6.5 실행 계획 디자인

데이터 CRUD를 위해 DB Upload Plan을 설정합니다.

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



  2. 테이블 검색 - DB 선택 - edu_dev_comment_edit 테이블 선택 - 확인을 선택하여 DB와 테이블을 연결합니다.


  3. 데이터 컨트롤 선택 영역에서 DataGrid를 선택하여 데이터 컨트롤을 연결합니다.
    -


    참고사항
    title참고 : 컬럼 연결

    선택한 데이터 컨트롤에 연결된 테이블과 실행 계획 디자인의 테이블이 동일하면 컬럼 연결은 자동으로 됩니다.

    그렇지 않은 경우 컬럼 연결 셀을 더블 클릭하여 데이터 컨트롤 상의 컬럼과 연결합니다.


  4. 데이터 유형에 맞춰 YYMM 컬럼과 PRODUCT_NM 컬럼의 Key 유형을 Primary로 설정합니다.



  5. 데이터 유형을 변경하여 데이터 생성 및 수정 시 UserCode가 저장되도록 설정합니다.
    • CREATE_USER, UPDATE_USER : UserCode



  6. 신규 데이터만 저장할 컬럼과 업데이트 데이터만 저장할 컬럼의 저장 모드를 변경합니다.
    • CREATE_DT, CREATE_USER : InsertOnly
    • UPDATE_DT, UPDATE_USER : UpdateOnly



  7. YYMM 필드의 사용자 지정 영역을 더블 클릭하여 년월 컨트롤의 Name을 변수로 연결합니다.

    펼치기
    title사용한 수식 펼치기

    :VS_YEAR


  8. PRODUCT_NM 필드의 사용자 지정 영역을 더블 클릭하여 결과에 따라 제품명이 설정되도록 함수를 작성합니다.

    펼치기
    title사용한 수식 펼치기

    (case when :VS_PRO_M = '' then '전체' else :VS_PRO_M end)


  9. 확인 버튼을 눌러 실행 계획 디자인 창을 닫습니다.


6.6 Process Bot 활용 저장 동작 설정

프로세스 봇을 활용하여 저장 버튼에 동작을 설정합니다.

...