User Tools

Site Tools


kona_knowledge_base

Table of Contents

활용 방법

차트와 레포트 배경색상을 일치 시키기(투명처리)

  • 레포트 셀에 배경색이 있는 경우 차트의 색상을 일치 시키는 방법이다.
  • 차트의 배경을 투명처리 함으로써 손쉽게 레포트 배경색과 일치시킬 수 있다.
  • 차트의 bgAlpha 속성값을 0,0으로 준다.
  • 만일, 차트 경계선이 보인다면 showBorder를 0으로 주면 경계선도 없어진다.

차트의 숫자 스케일

  • numberForamtScale에 스케일 값을 지정한다. 예를 들어, '1000000'으로 입력하면 백만단위로 스케일하겠다는 의미이다. numberFormatScale은 numberFormatUnit과 쌍으로 속성을 이루는데 numberFormatScale이 '1000000'으로 한경우 numberFormatUnit은 '백만'으로 설정할 수 있겠다. 이렇게 하면 차트는 백만단위로 스케일을 하고, 값에 자동으로 '백만'이라는 단위명을 붙여준다. 만일 단위명을 붙이기 싫은 경우 numberFormatUnit에 ' ' 공백으로 지정하면 단위가 생략된다. 하지만, 이 경우 값의 오른쪽에 공백이 한칸 들어가서 중앙에 위치하지 않게 되는데, numberPrefix에도 ' ' 공백을 주면 중앙에 오게 맞출 수 있다.

그리드 값 정렬(Align)

  • 그리드 데이터를 좌/우/가운데 정렬하고자 하는 경우 그리드 데이터 속성그룹에 있는 align 속성을 이용한다. align 속성은 컬럼별로 다중값으로 입력이 되는 속성이다. 예를 들어, 컬럼이 4개짜리 인경우 align 속성에서 표현식을 체크한 후 left:left:right:right 이런식으로 입력한다. 첫번째 컬럼만 left이고, 나머지 컬럼은 right로 하고자 하는 경우에는 간단히 left:right라고만 해도 된다. :으로 구분하여 속성을 입력한 경우 자동으로 맨 마지막 속성을 반복 적용되게 되어 있다.
  • 그리드 컬럼헤더의 제목을 align하고 싶을 때에는 그리드 컬럼헤더 속성그룹에 있는 align 속성을 이용한다. 속성값 입력방법은 그리드 데이터 align 속성과 마찬가지이다.

그리드 컬럼 너비 설정(width)

  • 그리드 컬럼 너비는 그리드 컬럼헤더 속성그룹에 있는 width 속성을 이용한다. 그리드 컬럼헤더 속성 그룹은 컬럼 레벨에서 정할 수 있는 속성들을 모아놓은 집합이다. 컬럼별로 다중값으로 입력되는 속성이다. 예를 들어, 컬럼이 4개짜리 인경우 표현식을 체크한 후 100:150:150:200 이런식으로 입력한다. 첫번째 컬럼만 100이고, 나머지 컬럼은 자동으로 너비가 결정되게 하고 싶다면 100:*라고 하면 된다. *표시는 그리드 전체 너비에 따라 자동으로 너비를 계산하여 정한다는 설정이 된다.

스크롤 KPI에서 범위안에 보여질 그래프 갯수 조정

  • Scroll~ 로 시작되는 KPI에서 한 스크롤 범위안에 보여질 그래프의 갯수 조절.
    • 속성 » 그래프 » numVisiblePlot 속성(속성설명 없음) 에서 조절이 가능하다. 입력한 수치만큼의 데이터가 보여지고 나머지는 스크롤 하면 볼수있다.

OLAP 서버 데이터소스 등록

  • SAP BW, Microsoft Analysis Service, Mondrian 같은 OLAP 서버를 데이터 소스로 등록하여 사용할 수 있다. 데이터 소스 등록시 데이터 소스 유형을 OLAP으로 선택하고 속성값을 입력하면 된다.
  • 속성설명
속성 설명
URLXMLA 서비스 주소(Required)
사용자명접속가능한 사용자 ID(Required)
비밀번호비밀번호(Required)
데이터소스정보데이터소스공급정보(Optional)
카탈로그접근할 카탈로그(Optional)
  • SAP BW 등록 예
속성 예제값
URLhttp://sap.eyeq.co.kr:8000/sap/bw/xml/soap/xmla
사용자명guest
비밀번호guest
  • MSAS 등록 예
속성 예제값
URLhttp://localhost/olap/msmdpump.dll
사용자명XMLA_USER
비밀번호1234
데이터소스정보Provider=MS;
카탈로그Adventure Works DW
기타IP로 URL을 입력하는 경우 뒤에 :80을 반드시 붙여준다.
  • Mondrian 등록 예
속성 예제값
URLhttp://localhost:8180/mondrian-embedded/xmla
사용자명XMLA_USER
비밀번호1234
데이터소스정보Provider=Mondrian;DataSource=MondrianFoodMart;
카탈로그FoodMart

Html(Text)를 이용하여 Tab KPI 화면 구현

  • Tab으로 구성되는 KPI 화면이 필요한 경우가 있다.
  • Tab안에 들어갈 컨텐츠에 해당하는 KPI를 각각 준비해둔다.
  • Html(Text) Basic Object를 이용하여 Tab Contanier를 만들고 각 탭에 미리 만들어 둔 KPI를 보이게 한다.
  • 아래 예제는 2개의 탭을 구성하고, 각 탭에 kpi1과 kpi2를 보여주는 예제 코드이다.
<div id="tabs">
	<div id="tab1" class="x-hide-display">
	<p>
		<div id="kpi1" style="width: 900px;height: 500px;">kpi1</div>
	</p>
	</div>

	<div id="tab2" class="x-hide-display">
	<p>
		<div id="kpi2" style="width: 900px;height: 500px;">kpi2</div>
	</p>
	</div>
</div>

<script>
<!--
Ext.onReady(function(){
	var tabs = new Ext.TabPanel({
		renderTo: 'tabs',
		width:1000,
		height:650,
		activeTab: 0,
		plain:true,
		defaults:{autoScroll: true},
 		items:[
			{contentEl:'tab1', title: '첫번째탭'},
			{contentEl:'tab2', title: '두번째탭'}
		]
	});
});

showKPIObject('kpi1','kpi1_object_key','','');
showKPIObject('kpi2','kpi2_object_key','','');
-->
</script>

Drawing Pad를 이용하여 지도 구현

  • Drawing Pad를 이용하여 지도를 표시하고, 지도위 각 지역에 값을 표시할 수 있다.
  • 지도 이미지를 준비한다.
  • annotation의 image 타입으로 지도를 표시
  • annotation의 rectangle 타입으로 값을 출력할 박스 표시
  • annotation의 text 타입으로 값을 표시. 드릴다운이 필요한 경우 link 태그를 이용해 KPI나 Report 연결.
  • 아래 예제는 설명한 방법대로 우리나라 지도 위에 2지역에 숫자값을 출력하는 예이다.
<chart bgAlpha='0,0' showBorder='0' >
	<annotations>
		<annotationGroup id='Grp1' >
			<annotation type='image' x='0' y='0' URL='$contextPath/images/hira/urinara.jpg' />
		</annotationGroup>  

		<annotationGroup id='Grp2' >
			<annotation type='rectangle' x='160' y='35' toXPos='189' toYPos='50' radius='5' color='453269' />
			<annotation type='rectangle' x='87' y='71' toXPos='112' toYPos='89' radius='5' color='453269' />
		</annotationGroup>

		<annotationGroup id='Grp3' link="javascript:updateKPIObjects('map_target','S1=seoul');" >
			<annotation type='text' x='172' y='40' fontSize='10' isBold='1'     label='$data.get('1').get(0).get('value')' color='FFFFFF'/>
		</annotationGroup>

		<annotationGroup id='Grp4' link="javascript:updateKPIObjects('map_target','S1=chungNam');" >  
			<annotation type='text' x='98' y='76' fontSize='10' isBold='1'   label='$data.get('1').get(1).get('value')' color='FFFFFF'/>
		</annotationGroup>
	</annotations>
</chart>

사용자정의(Custom) 유니버스 사용

사용자정의 유니버스 적용 절차

  1. 유니버스 클래스 작성
  2. KONA Classpath 설정
  3. Spring에 Bean 등록
  4. KONA 서버 시작
  5. 사용자정의 유니버스 생성 및 설정

유니버스 클래스 작성 1

♦ CustomUniverseDataSource 상속

♦ 2개의 method 구현

  • 기본 아이템 목록 생성
List<UniverseItem> createDefaultItems(String id,RenderContext context)
  • 유니버스 데이터 생성
List<Map<String, Object>> fetchUniverseData(String id,RenderContext context)

♦ 사용하는 Jar 파일들

  • kona-engine.jar ( 위치: <KONA 설치 디렉토리>\Server\lib ) - 필수
  • spring.jar ( 위치 : <KONA 설치 디렉토리>\Server\lib ) - 필수
  • commons-collections.jar ( 위치 : <KONA 설치 디렉토리>\Server\lib )
  • oscache-2.4.1.jar ( 위치 : <KONA 설치 디렉토리>\Server\lib )
  • commons-logging.jar ( 위치 : <KONA 설치 디렉토리>\Server\lib )
  • 기타 필요한 jar 파일들
유니버스 클래스 작성 2 - createDefaultItems 구현

♦ “아이템참조용유니버스”의 아이템을 기본 아이템으로 사용하는 예제 <참조 유니버스가 등록되어 있어야 함>

  public List<UniverseItem> createDefaultItems(String id, RenderContext context) {
 
  	Universe srcUniverse = getUniverseManager().getUniverseByKey(“아이템참조용유니버스”);
 
  	if( universe_a == null ) {
  		throw new RuntimeException("아이템참조용유니버스는 존재하지 않습니다.");
  	}
 
  	List<UniverseItem> srcItems = getUniverseManager().getUniverseItems(srcUniverse.getId().toString());
 
  	return srcItems;
  }
유니버스 클래스 작성 3 - fetchUniverseData 구현

유니버스 데이터가 [아이템코드 + Column Index + Row Index] 형태로 표시.

  protected List<Map<String, Object>> fetchUniverseData(String id, RenderContext context) {
  	List<UniverseItem> items = createDefaultItems(id, context);
  	ListOrderedMap dataMap = null;
  	List<Map<String, Object>> dataList = new ArrayList<Map<String, Object>>();
 
  	for(int rowIndex=0; rowIndex<10; rowIndex++ ) {
  		dataMap = new ListOrderedMap();
  		for (int index=0;index<items.size();index++) {
  			UniverseItem item = items.get(index);
  			//CONDITION 타입은 skip
  			if (item.getType() == UniverseItemType.CONDITION) {
  				continue;
  			}
  			//데이터 : {ItemCode} + {index} + {row Index}
  			dataMap.put(item.getCode(), item.getCode() + Integer.toString(index) +    Integer.toString(rowIndex));
  		}
  	dataList.add(dataMap);
  	}
  	return dataList;
  }
KONA Classpath 설정

♦ Jar file export

  • 가령 “custom_universe.jar” export ( “kona-ext.jar”권장 )

Windows registry에 classpath 설정(예전방식-비추천)

  • registry path : HKEY_LOCAL_MACHINE/SOFTWARE/Droplet/DropletServer/JavaApps
  • 아래 예는 “C:\Program Files\KONA\custom_universe.jar” 로 설정

WEB Server classpath 설정(예전방식-비추천)

  • KONA 설치 디렉토리의 Tomcat을 사용하는 경우 아래 path에 “custom_universe.jar”를 복사한다.
  • “C:\Program Files\KONA\apache-tomcat-6.0.16\webapps\kona\WEB-INF\lib”

♦ WAS/Droplets 홈디렉토리의 .kona/lib에 “kona-ext.jar”복사(새로운 방식)

  • 홈디렉토리의 .kona/lib에 커스텀 유니버스 jar 파일을 복사한다. 단, WAS와 Droplets 계정이 다르다면 양쪽에 복사한다.\\이 방식의 경우 Droplets에서 load할 jar 파일 설정을 별도로 할 필요가 없다.
Spring에 Bean 등록(Droplets과 WAS 양쪽 모두 설정해줘야 함)

KONA-context.xml 편집(예전방식-비추천)

<import resource="classpath:KONA-context-extension.xml" />

KONA-context-extension.xml 에 Bean 설정(예전방식-비추천)

<context:component-scan base-package="com.eyeq.kona.custom_universe" />
<bean id="my_custom_universe" class="com.eyeq.kona.custom_universe.CustomUniverse"/>

♦ 홈디렉토리의 .kona/context.xml 편집(새로운 방식)

  • context.xml에 커스텀 유니버스 jar 파일의 클래스를 설정한다.
  • bean id 는 마지막에 CU 를 붙여서 커스텀 유니버스라는것을 구분한다.

<bean id=“cust-univCU” class=“com.eyeq.kona.kisa.CustUniv” />

  • toga-admin-v2 작업시 사용성 개선을 위해 커스텀 유니버스 화면을 변경하였고, 그에 따라 아래와 같이 CustomUniverseBeanStore의 constructor-arg 에 맵형태로 정의한 bean을 추가해야 한다.
  <bean id="customUniverseBeanStore" class="com.eyeq.kona.store.CustomUniverseBeanStore">
      <constructor-arg>
          <map>
              <entry key="tempCU" value-ref="tempCU"/>
          </map>
      </constructor-arg>
  </bean>
  <bean id="tempCU" class="com.eyeq.kona.custom.universe.Temp"/>

♦ 설정 후 KONA 재시작

사용자정의 유니버스 생성 및 설정
  • 유니버스 생성

  • Spring에 등록한 Bean 이름 설정

유니버스 실행 결과

샘플 : 소스유니버스 XML, 사용자 정의 유니버스 XML, 사용자 정의 유니버스에 대한 Java source 포함.

유니버스에서 가져오기를 통해 테스트할 수 있다.

디버깅이 필요하다면 원격 디버깅을 통해 디버그 환경을 설정한다.

서버사이드 페이징 처리

KPI 속성 설정

♦ 일반 그리드에서만 사용 가능하다.

  • 속성 구분:그리드
  • enableSmartRendering: 체크하기
  • smartRenderingBufferSize: 한번에 보여줄 row 크기 설정 예: 10

유니버스 쿼리 설정

  • 쿼리타입 설정중 CountSQL 탭에 전체 쿼리 결과 row를 갖고 올 수 있는 쿼리를 생성
예: select count(*)  from TABLE_NAME
  • 쿼리타입 설정중 CountSQL 탭에 체크박스를 체크하기
  • 쿼리타입 설정중 SQL 탭에 쿼리에 한번에 보여줄 row 크기를 설정하기(쿼리에 조건절을 주기)
where num between $dataOffset+1 and $dataOffset+$pageSize

(예: select num, A, B, C from TABLE_NAME where num between $dataOffset+1 and $dataOffset+$pageSize ) num: 쿼리의 데이타 ROW ID (예: 1 2 ..) $dataOffset: 자동적으로 연산되어 시작할 rowid 값 $pageSize: KPI 그리드 속성에서 셋팅한 smartRenderingBufferSize값.

  • 쿼리 실행 설명
위의 쿼리가 처음 호출될때는 :
SELECT num, A, B, C FROM TABLE_NAME 
    WHERE num BETWEEN 0+1 AND 0+10
 
두번째 호출될때는 :
SELECT num, A, B, C FROM TABLE_NAME 
    WHERE num BETWEEN 10+1 AND 10+10
  • MS SQL SERVER 2000에서 페이징 처리
SELECT * FROM (
    SELECT TOP x * FROM (
        SELECT TOP y FIELDS FROM TABLE
            WHERE conditions 
            ORDER BY TABLE.FIELD  ASC) AS foo
        ORDER BY FIELD DESC) AS bar
ORDER BY FIELD ASC
  • x is the number of rows you want returned and y is x+offset.

차트의 라벨에 라인바꾸기

  • 라벨값에 &lt;BR&gt;가 포함되어야 함.
    • 예: cat&lt;BR&gt;dog (cat<BR>dog과 같은 의미이나 xml에서 <>는 태그로 인식하기 때문에 인코딩)
  • KPI의 상용자 속성에 아래와 같은 값을 넣어줌. (라벨과 툴팁에 html 태크가 반영되도록 설정한 것임)
<styles>
        <definition>
            <style name='myHTMLFont' type='font' isHTML='1' />
        </definition>
        <application>
            <apply toObject='TOOLTIP' styles='myHTMLFont' />
            <apply toObject='DATALABELS' styles='myHTMLFont' />
        </application>
</styles>
  • 적용되는 차트
    • Bar 관련 차트(Bar2D, MSBar2D, MSBar3D…)
    • Radar 차트

레포트에서 Grid KPI의 cell 값 가져오기

♦ Grid에서 특정 cell 값 및 보이지 않는 유니버스의 값 가져오기

Grid cell 값 가져오기 적용 절차

  1. Grid KPI id 설정
  2. Javascript 함수 정의
  3. 함수 호출을 위한 Text(Html) KPI 작성
  4. Text(Html) KPI를 레포트에 배치하고 미리 보기를 통해 확인
  5. Grid KPI에서 필요한 유니버스 데이터를 설정
  6. Javascript 함수 수정
  7. 레포트 실행 결과 확인

Grid KPI id 설정
  • 레포트에 추가된 KIP의 “id” 속성 값을 설정한다. 아래 예에서는 “key_power” 설정

Javascript 함수 정의
  • 레포트의 “script” 속성을 통해 함수를 정의

function getSelectedCell() {
  //grid 객체를 가져온다.
  var grid = document.getElementById("key_power").grid;
  //rowId를 얻는다.
  var rowId = grid.getSelectedRowId();
  //column Id를 얻는다.
  var cellIndex = grid.getSelectedCellIndex();

  if( rowId != null && cellIndex >= 0 ) {
    //row id, cell index, 그에 해당하는 cell 값을 띄운다.
    alert( rowId + ", " + cellIndex + "(" + grid.cells(rowId, cellIndex).getValue() + ")" );
  } else {
    alert("선택 안됨");
  }
}
함수 호출을 위한 Text(Html) KPI 작성
  • 사용자 속성에서 anchor를 통해 Javascript 함수 호출
<a href="javascript:getSelectedCell()">Grid Cell</a>
Text(Html) KPI를 레포트에 배치하고 미리 보기를 통해 확인
  • 레포트에서 작성된 Text(Html) KPI를 추가하고 적절한 위치 설정 (position, left, top 속성을 통해 설정)
Grid KPI에 필요한 유니버스 데이터를 설정
  • Grid KPI에서 표시되지 않지만 showReport를 통해 넘겨야 할 값(예:제품코드,회원번호 등)이 있는 경우 필요한 데이터에 대한 아이템 이름을 유니버스에서 확인.
  • “그리드 데이터” 구분의 “expression” 속성을 통해 해당 유니버스 아이템 값을 표시
  • 3번째 컬럼에 “COL3_1” 이라는 유니버스 아이템 값을 뿌리고 style을 통해 안보이도록 처리.
#if( $colIndex==2 )
  $value<span id="kpi_id" style="visibility:hidden;">$dataRow.COL3_1</span>
#else
  $value
#end
Javascript 함수 수정
  • 레포트에 등록된 Javascript 함수를 수정
function getSelectedCell() {
  //grid 객체를 가져온다.
  var grid = document.getElementById("key_power").grid;
  //rowId를 얻는다.
  var rowId = grid.getSelectedRowId();
  //column Id를 얻는다.
  var cellIndex = grid.getSelectedCellIndex();

  if( rowId != null && cellIndex >= 0 ) {
    //row id, cell index, 그에 해당하는 cell에서 span tag의 text element를 표시.
    var spanArr = grid.cells(rowId, cellIndex).cell.getElementsByTagName("span");
    
    if( spanArr != null && spanArr.length > 0 ) {
      alert( rowId + ", " + cellIndex + "(" + spanArr.item(0).firstChild.nodeValue + ")" );
    } else {
      alert("값이 없음");
    }
  } else {
    alert("선택 안됨");
  }
}
레포트 실행 결과 확인
  • Text(Html)의 anchor를 통해 값을 얻어오는 것을 확인.

레포트 검색조건 파라미터 입력시 주의할 점

  • 상황 : 특정 레포트에서 다른 레포트로 '필수값이 아니며, 기본값이 설정되지 않은…' 검색조건을 그냥 넘기면 레포트 조회가 중단되어 화면이 비정상적으로 출력됨.
YYYY=$globalParameters.YYYY,MM=$globalParameters.MM <- 필수값이고 기본값이 설정된 검색조건
  • 조치방법 : '필수값이 아니며, 기본값이 설정되지 않은…'검색조건에 한해서는 사용자가 선택한 값이 있을 때에만 넘겨야 합니다.
#if($globalParameters.BIZ_AREA)BIZ_AREA=$globalParameters.BIZ_AREA,#{end} 
## 파라미터 값이 있는지를 체크하는 로직을 반영하여 처리 

그리드 enableMultiline 속성

데이타가 영어, 숫자일경우 white-space를 포함해야한다. 이때 데이타의 공백이 줄바꿈되어진다.


dhtmlxgrid 측의 답변..

Question posted by Rajakrishna on Mar 05, 2009 06:15
    open in interactive version
:: DHX Grid :: Wrapping the text when no delimiter present.

Hi,

How can I wrap the text present in the cell of the grid when there is not delimiter present in the text.

Example of the text:

1. sdfdsfsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfsdfsdfsdf
2. rajakrishna_working_in_dhtmlx@gmail.com

Answer posted by dhxSupport on Mar 05, 2009 08:00

To wrap text to a new line you can use mygrid.enableMultiline(true)

**Unfortunately if your text has some long words without white-spaces - such words will not be breaked in few lines**

그리드 체크박스 연결시 검색조건과의 linkStatus 동기화

검색조건에 설정된 값들과 현재 그리드 행의 값과 비교해서 포함될 경우 true로 리턴

#if("$!dataRow.[Universe_Item]" != "" && $list.contains($globalParameters.[Search_Condition_Key], "$!dataRow.[Universe_Item]"))
    true 
#else
    false
#end

그리드 스마트렌더링(enableSmartRendering) 적용 시 고려할 점

♦ 대량 데이터를 뿌리는 그리드에서 스크롤바를 움직이면 해당 위치에 대한 데이터들이 뿌려지도록 한다.

방법 2가지(둘 중 택1)

  1. 그리드 > enableMultiline 속성 체크
  2. 그리드 > awaitedRowHeight 속성 값 설정

1. enableMultiline 속성 체크
  • cell에 표시되는 그리드 값이 긴 경우 해당 cell과 row의 높이가 커지는 단점이 있다.

2. awaitedRowHeight 속성 값 설정
  • enableMultiline 속성을 사용하지 않는 경우에 사용하는데, cell의 높이를 픽셀로 지정하는 방식이다.
  • 값은 일반적으로 24 정도가 적당한데, 값을 설정한 다음 미리보기를 통해서 스크롤을 움직여봐야 한다.
  • 스크롤을 움직여서 해당 그리드 데이터가 잘 표시되면 그대로 사용하면 되겠지만, 값이 크면 아래쪽에 공백이 보이고, 같이 작으면 위쪽에 공백이 보인다. 따라서, 미리보기를 통해 적절한 awaitedRowHeight 값을 찾는 과정이 필요하다.

값이 큰 경우 설정과 결과( 30 )


값이 작은 경우 설정과 결과( 20 )


적절한 경우 설정과 결과( 24 )


그리드/크로스탭에서 enableRowspan 속성을 쓰지 않고 행병합된 모양을 만들기

  • 현재 enableRowspan 속성은 enableSmartRendering과 함께 사용할 수 없고 경우에 따라서는(예를들어 splitAt 적용시) 성능 저하를 일으키는 등의 제약 사항을 가진다. 이 경우 다음과 같은 방법을 활용하면 실제 enableRowspan 속성을 사용하지 않고도 행병합된 모양을 표현할 수 있다.
  • 그리드 데이터의 styleClass 속성 설정
    • 행병합 대상이 되는 셀(공백으로 표시되어야하는 부분)에 표현식을 통해 특정 클래스(예 - 'blank)를 설정한다.
#if("$!value"=="" )blank#end
  • 크로스탭의 경우 병합되는 셀은 자동으로 'merged-cell'이라는 클래스가 설정된다.
  • 포탈 스타일 설정
    • 포탈 스타일을 아래와 같이 오버라이드해서 불필요한 셀 경계선을 제거한다. 이 때 '#CDC7AE' 부분은 사용중인 그리드 스킨에 알맞는 색으로 변경한다.
/* 그리드의 경우 */
div.gridbox table.obj td {
  border-top: 1px solid #CDC7AE;
  border-bottom: none;
}

div.gridbox table.obj td.blank {
  border-top: none;
}
/* 크로스탭의 경우 */
div.gridbox table.obj {               /* 맨 아래 한줄 경계선이 나오도록 */
  border-bottom: 1px solid #CBCBCB;   
}

div.gridbox table.obj td {            /* 모든 셀의 아래 경계선을 제거 */
  border-top: 1px solid #CBCBCB;      
  border-bottom: none;
}
 
div.gridbox table.obj td.merged-cell { /* 병합된 셀의 위 경계선 제거 */
  border-top: none;
}

그리드 컬럼 헤더에 행병합과 열병합을 동시에 적용하기

현재 사용중인 그리드 컴포넌트는 행병합과 열병합을 동시에 지원하지 않는다.
하지만 아래와 같이 직접 자바스크립트를 통해 테이블 셀 객체를 참조하면 이러한 제약을 피해갈 수 있다.
만일 2행짜리 컬럼헤더가 있고 첫번째, 두번째 컬럼이 위아래로 병합되어 있는 경우 이 둘을 합치려면 가장 왼쪽 위의 컬럼에 해당하는 td 객체를 지정해서 colspan 속성을 2로 설정하면 된다.
이 때, 컬럼별 너비를 유지하기 위해 그리드 객체 내부적으로 보이지 않는 행이 추가되어 있기 때문에 화면에 보이는 첫번째 행의 인덱스는 0이 아닌 1이 된다.
따라서 아래와 같은 자바 스크립트를 해당 그리드나 크로스탭 KPI의 onXLE 속성에 추가하면 2×2의 병합된 컬럼 헤더를 얻을 수 있다.
이 때, 헤더의 라벨이 하나씩 옆으로 밀리므로 다음 라인에서 밀리는 열을 셀을 삭제한다.

this.hdr.rows[1].cells[0].setAttribute("colSpan", 2);
this.hdr.rows[1].deleteCell(1);
  • updateHeaders 속성이 체크되어야 틀어지지 않음
  • 크로스탭의 경우 또는 열고정 되어있을 경우 'this.hdr' 대신 'this._fake.hdr'을 사용.
  • 열고정된 그리드에서의 병합은 'this.hdr' 대신 'this._fake.hdr'을 사용한다.
  • 하지만 데이터가 아무것도 없을 때 열고정이 풀리므로 this._fake.hdr 사용시 자바스크립트 에러가 발생하고 병합되지 않게되는데 이때는 데이터가 있는지 판단하여 구분할 수 있다.
if(this.getRowsNum() != 0){
  this._fake.hdr.rows[1].cells[0].setAttribute("colSpan", 2);
  this._fake.hdr.rows[1].deleteCell(1);
}else{
  this.hdr.rows[1].cells[0].setAttribute("colSpan", 2);
  this.hdr.rows[1].deleteCell(1);
}

쓰기 기능

쓰기 버튼 활성화 - KPI 오브젝트 등록 화면의 실행탭에서 실행(신규,저장,취소,저장,삭제,사용자)을 등록한다. 등록된 순서대로 버튼이 생성된다.

쓰기 필드 활성화
 * 그리드 - 컬럼헤더 속성의 type을 ed 혹은 edn으로 지정함. 
 * HTMLKKPI - 사용자 속성에 input 혹은 textarea(htmleditor일 경우)로 쓰기 화면을 만든다.

쓰기 기능 구현 : 유니버스의 등록SQL, 수정SQL, 삭제SQL에 해당 쿼리 작성.
예제) 유니버스의 등록SQL, 수정SQL, 삭제SQL

등록

INSERT into TEST_CROSSTAB (type, sales_year, sub_type, result )
  values (  '$dataRow.get("TYPE_NAME")', 
    '$dataRow.get("SALES_YEAR")', 
    '$dataRow.get("SUB_TYPE")',
    '$dataRow.get("RESULT")')


수정

UPDATE TEST_CROSSTAB
  SET RESULT = '$dataRow.get("RESULT")'
  where SALES_YEAR = '$dataRow.get("SALES_YEAR")' 
  and TYPE = '$dataRow.get("TYPE_NAME")'
  and SUB_TYPE = '$dataRow.get("SUB_TYPE")'


삭제

DELETE from TEST_CROSSTAB
  where SALES_YEAR = '$dataRow.get("SALES_YEAR")' 
  and TYPE = '$dataRow.get("TYPE_NAME")' 
  and SUB_TYPE = '$dataRow.get("SUB_TYPE")'
예제) HtmlKPI의 사용자 속성(에디터포함)
에디터 : 'ADDRESS' 필드 입력에 사용된 예제이다.

	<script type="text/javascript">
	// <![CDATA[
		   initHTMLEditor('ADDRESS');
	// ]]>
	</script>
</p>
<p>company-id <input name="COMPANY_ID" type="text" value="$data.get('1').get(0).get('COMPANY_ID')" />
</p>
<p>company-name <input name="COMPANY_NAME" type="text" value="$data.get('1').get(0).get('COMPANY_NAME')" />
</p>
<p>enable <input checked="checked" name="ENABLE" type="checkbox" value="1" />
</p>
<p>address <input name="ADDRESS2" type="text" value="$data.get('1').get(0).get('ADDRESS')" />
</p>
<p>update_date <input name="UPDATE_DATE" type="text" value="$data.get('1').get(0).get('UPDATE_DATE')" />
</p>

<form enctype="application/x-www-form-urlencoded">
	<textarea id="ADDRESS" name="ADDRESS" style="width: 100%;" cols="20" rows="2">
	</textarea>
</form>
<p><a href="javascript:toggleHTMLEditor('ADDRESS');">Add/Remove editor</a>
</p>
예제) 실행 전, 후 스크립트

* 저장시 다른 KPI를 새로고치고 싶다면
KPIObject의 실행등록에서 '저장실행' 등록시 
'후 스크립트'에 다음과 같이 target kpi의 code를 지정한다.
--> refreshKPIObjects('kpiobject_key1;kpiobject_key2')

* 저장시 특정 조건에 따라 저장을 하지 않도록 하고 싶다면 
KPIObject의 실행등록에서 '저장실행' 등록시 
'전 스크립트'에 특정조건에 해당할 경우 'return;' 을 넣어주는 스크립트를 작성한다.

KPI 권한을 표현식으로 체크

  • $objectPermission.isGranted(String)
  • $objectPermission.isGranted(List<String>)
  • $objectPermission.isGranted(String[])
  • String에 넣을 수 있는 값 : WRITE(수정), CREATE(생성), READ(읽기), DELETE(삭제)
  • DATA_READ(데이터읽기), DATA_INSERT(데이터입력), DATA_UPDATE(데이터수정), DATA_DELETE(데이터 삭제)
예1)
#if($objectPermission.isGranted('WRITE'))
..
#else
..
#end

예2)
#if($objectPermission.isGranted(['WRITE','CREATE']))
..
#else
..
#end 

자바스크립트로 페이지 제목/저작권/주소/상태표시줄 바꾸기

  • 원래 페이지 제목, 저작권, 주소 등은 포탈 단위로 관리자에서 설정할 수 있으나, 경우에 따라 레포트나 KPI오브젝트 로딩시 특정한 메시지를 해당 영역에 표시해야하는 경우가 발생한다. 이런 경우 자바 스크립트에서 아래 API를 사용해서 처리할 수 있다.
  • 페이지 제목
page.getTitle(); //현재 페이지 제목 가져오기
page.setTitle("제목"); //페이지 제목 바꾸기
  • 브라우저 상태표시줄 (브라우저 종류 및 보안 설정에 따라 동작 안할 수도 있음)
page.getStatus();
현재 상태표시줄 내용 가져오기
page.setStatus("test");
상태표시줄 내용 바꾸기
  • 저작권 (템플릿에 따라 보이지 않을 수도 있음)
page.getCopyright();
현재 저작권 내용 가져오기
page.setCopyright("copyright");
저작권 내용 바꾸기
  • 주소 (템플릿에 따라 보이지 않을 수도 있음)
page.getAddress();
현재 주소 내용 가져오기
page.setAddress("address");
주소 내용 바꾸기

레포트 제목 및 팝업 레포트 제목 수정하기(레포트 : frameTitle 속성)

  • 레포트 제목 변경 설정

  • 레포트 제목 적용 모습

  • 팝업 레포트 변경 설정

  • 팝업 레포트 제목 적용 모습

그리드 셀의 드릴다운(하이퍼링크) 여결 언더라인을 제거하고, 스타일 적용

  • 해당 셀의 스타일 클래스 명을 style 속성에서 overide 한다. 그리고, 포털 스타일에서 해당 스타일을 정의한다.
.nolink span.link {         /* 드릴다운 연결의 링크에 대한 nolink 스타일 클래스 정의 */
  text-decoration : none;   /* 언더 라인 제거 */
  color : blue;             /* 글꼴 색상을 변경 */
}

저장 KPI의 실행 스크립트

  • 변수 dataRows 을 후처리스크립트에서 사용할 수 있도록 제공한다.
dataRows : List<Map<String, Object>>
String: universe item code
Object : value

입력된 row가 하나 일 경우의 예제는 다음과 같다.
후처리 스크립트에서 다음과 같이 쓸 수 있다.

예)
var parameters='ISSUE_NO='+dataRows[0].ISSUE_NO+',UP_ID='+dataRows[0].ISSUE_NO;updateKPIObjects('ATTACH_FILE_LIST', parameters);

* 제약사항

1.입력 저장시 자동생성된 아이템을 위와 같이 쓰고자 할 경우에는
개발자 서비스에서 유니버스 아이템의 자동생성을 체크해야만 한다.
위의 예를 들면 'ISSUE_NO'와 같은 자동생성 아이템.

2. dataRows는 입력, 수정시에만 사용할 수 있다.


* 실행 스크립트 추가 

변수 actionContext추가.
선스크립트에서 선언하고 후 스크립트에서 쓰고자 하는 변수가 있다면
변수를 다음 같이 actionContext에 넣어주어야 한다.
actionContext.변수명 = 값

1. 조건에 따라 원하는 그리드 셀의 styleClass 속성을 적절한 값(예 - 'blink')으로 설정하거나 expression속성에서 해당 조건만 <span class=“blink”>$value</span>로 처리한다.

2. 그리드의 onXLE 속성에 아래와 같은 코드를 입력한다.

 startBlink();
 blink 시간을 조절 하고 싶을때 (단위 : 초)
 startBlink(5);

3. 관리자 포탈 메뉴의 스타일 탭에 아래와 같은 코드를 입력한다.

 .blink {
 }

엑셀 업로드 기능 추가

  • KPI 디자이너 의 실행탭에서 엑셀 업로드 기능 추가한 후 한번에 insert 만 하고 싶을때 실행 전 스크립트에 options.insertOnly=true; 를 입력해주면 select 로 key를 확인 하지 않고 insert 만 실행한다.

사용자가 소속된 그룹 확인

  • 유니버스나 속성을 로그인 사용자가 속한 그룹을 통해 제어하고자 할 때 로그인 사용자가 속한 그룹을 표현식을 통해 확인할 수 있다. 사용자가 “Administrators” 그룹에 속하는지 아래와 같이 확인할 수 있다.
#if( $user.groups.contains("Administrators") )
    Admin그룹 
#else
    Admin 그룹 아님
#end

그리드의 컬럼헤더 접힘,펼침(collapse) 기능

  • 컬럼헤더를 만들때 해당하는 컬럼명 앞에 {#collapse}3: 을 입력해주면 가능하다
  • 예)
col1,col2,col3,col4
구분,전사,합계,평균     ==>  구분,{#collapse}3:전사,합계,평균
  • 위와 같이 입력 하였을경우 전사 컬럼에 - 아이콘이 생기고 그것을 클릭하면 합계와 평균이 전사컬럼쪽으로 접혀서 보이지 않게 된다
  • {#collapse} 뒤에 붙는 숫자는 영향을 받는 컬럼갯수을 의미(현재 컬럼포함)
  • 기본 상태는 펼침으로 보이나 최초 로딩시에 collapse/expand 를 결정 할 수 있다.
  • 예)그리드 onXLE 속성에
elem.grid.collapseColumns(1); 
또는
elem.grid.expandColumns(1);

jQuery UI Tab 사용하기

  • 필요 라이브러리를 .kona 아래 css와 script 폴더에 넣는다
  • html KPI를 하나 생성하고 사용자 속성에 아래와 같이 작성(여기서는 3개의 탭을 구성함.)
<div id="tabs" style="height:100%;">
  <ul>
      <li><a href="#tabs-1" id="CSTBGM0220_01">전사</a>
      <li><a href="#tabs-2" id="CSTBGM0220_02">부서별 집계현황</a>
      <li><a href="#tabs-3" id="CSTBGM0220_03">사업장별 집계현황</a>
  </ul>
  <div id="tabs-1" style="height:100%;"></div>
  <div id="tabs-2" style="height:100%;"></div>
  <div id="tabs-3" style="height:100%;"></div>
</div>
* 단 li 링크의 id 는 호출되는 KPI 아이디로 한다.
* 다음으로 스크립트 란에 아래와 같은 내용을 작성한다.
jQuery("#tabs").tabs({
    show: function(event, ui) {
		showKPIObject(ui.panel.id, ui.tab.id,'$globalParameters 에 담길 파라미터','$parameters 에 담길 파라미터');
    }
});

//아래는 각 탭을 클릭하여도 showKPIObject(); 를 한번씩만 호출하는 예제
/*
var tabId = "";
var num = 0;
jQuery("#tabs").tabs({
  show: function(event, ui) {
		num = num+1;
		if(num > 1){
			if(tabId.indexOf(ui.tab.id) < 0){
      		showKPIObject(ui.panel.id, ui.tab.id);
			tabId = tabId+ui.tab.id;
			}
		}else{
		showKPIObject(ui.panel.id, ui.tab.id);
		tabId = tabId+ui.tab.id;
		}
    }
});
*/
  • 완성 예제

저장 유니버스에서 발생하는 에러메세지 재정의 하기

// 포털 리소스->스크립트 또는 KONA_HOME 디렉터리의 scripts 폴더 내 작성
// 오라클의 경우 에러내용에 항상 ORA- 로 시작하는 코드가 포함됨. 아래처럼 특정 문구를 포함된 경우를 캐치하여 메세지를 재정의 할 수 있음
function translateActionMessage(message) {
	if (message && message.indexOf("ORA-00001") != -1) {
		return "중복된 데이터입니다.";
	}else if(message && message.indexOf("ORA-01400") !=-1){
 		return "Null 을 삽입할 수 없습니다.";
	}
	return message;
}
kona_knowledge_base.txt · Last modified: 2017/11/20 13:34 by jeonjehun86