목록 및 공통 속성

아이템 목록

일반 아이템

• 텍스트
• 이미지
• 요약
• 바코드
• 바
• 사인
• 도장

밴드 아이템

• 밴드

컨테이너 아이템

• 박스

기본 속성

모든 아이템에 해당되는 기본 속성

Name

아이템에 고유한 이름을 설정합니다.

• 타입: string
• 기본값: undefined

Tag

아이템에 태그값을 설정합니다.

• 타입: string
• 기본값: undefined

Visible

아이템의 표시 여부를 설정합니다.

• 타입: boolean
• 기본값: true

Page Break

아이템을 출력하기 전에 페이지를 어떻게 나눌 것인지 대해 설정합니다.

• 타입: PageBreakMode
• 기본값: none

Excel

셀 배치나 병합 혹은 셀 수식을 적용할 수 있는 속성

Row

셀의 행 위치값을 설정합니다.

• 타입: number

Col

셀의 열 위치값을 설정합니다.

• 타입: number

Row Span

셀의 행 병합을 설정합니다.

• 타입: number

Col Span

셀의 열 병합을 설정합니다.

• 타입: number

Event

아이템의 이벤트 함수 관련 로직을 javascript 문법으로 선언할 수 있는 속성

인자

OnGetValue

아이템에 표시되는 값을 변경할 수 있는 이벤트 함수 관련 로직을 설정합니다.

• 타입: ReportItemValueCallback
• 기본값: undefined
• 인자: ctx | item | row | value
• 반환 타입: string | number

OnGetValue 사용예제

아이템의 값이 "0" 이하인 경우 데이터를 변경

function onGetValue(ctx, item, row, value) {
    if (value <= 0) {
        return '무료';
    }
}

밴드 데이터 출력중 값이 A가 아니라면 빈값으로 변경

function onGetValue(ctx, item, row, value) {
    // 데이터 이름이 DataSet1인 밴드 데이터의 Field1 필드의 row 번째 값
    let val = ctx.getValue("DataSet1", row, "Field1");
 
    if (val !== "A") {
        return "";
    }
}

다른 필드 값에 따라 이미지 경로 변경

function onGetValue(ctx, item, row, value) {
    // 데이터 이름이 DataSet1인 밴드 데이터의 Field1 필드의 row 번째 값
    const companyName = ctx.getValue("DataSet1", row, "Field1");
 
    // companyName 값에 따라 이미지 경로를 return
    if (companyName === "RealGrid") {
        return "./image/" + companyName;
    }
    
    return value;
}

Assets에 추가된 이미지 목록에서 image 가져와서 설정하기

function onGetValue(ctx, item, row, value) {
    // 이 이벤트는 ImageItem 에서 사용하는 예제입니다.
    const animal = ctx.getValue("sampleData", row, "animal");
 
    return ctx.assets.getImage(animal);
}

OnGetStyles

아이템에 적용되는 스타일을 변경할 수 있는 이벤트 함수 관련 로직을 설정합니다.

• 타입: ReportItemStyleCallback
• 기본값: undefined
• 인자: ctx | item | row | value
• 반환 타입: object

설명

반환 타입에서 { key: value, ... } 형태의 데이터를 반환하면 아이템 스타일을 변경할 수 있다.

return { 
    borderTop: '2px solid #red',
    borderBottom: '1px solid #red'
}

OnGetStyles 사용예제

아이템의 값이 "검출"인 경우 스타일을 변경

function onGetStyles(ctx, item, row, value) {
    if (value === '검출') {
        return {
            color: 'red',
            backgroundColor: 'gray'
        };
    }
}

OnGetVisible

아이템의 표시 여부를 변경할 수 있는 이벤트 함수 관련 로직을 설정합니다.

• 타입: ReportItemVisibleCallback
• 기본값: undefined
• 인자: ctx | item | row | value
• 반환 타입: boolean

설명

true|false 형태의 불리언 값를 반환하여 해당 아이템의 표시 여부를 설정할 수 있습니다.

OnGetVisible 사용예제

아이템의 값이 "검출"인 경우 화면에 표시하지 않음

function onGetVisible(ctx, item, row, value) {
    if (value === '검출') {
        return false;
    }
}

OnGetContextValue

아이템에 표시되는 값을 변경할 수 있는 이벤트 함수 관련 로직을 설정합니다.

• 타입: ContextValueCallback
• 기본값: undefined
• 인자: ctx
• 반환 타입: string | number

Data

아이템에 데이터를 연결시키는 속성

Data

아이템에 사용할 데이터를 연결합니다.

• 타입: string
• 기본값: undefined

Value

연결된 데이터에서 표시할 필드를 설정합니다.

• 타입: string
• 기본값: undefined

Max Row Count

연결된 데이터에서 표시될 수 있는 최대행을 설정합니다.

• 타입: number
• 기본값: undefined

Styles

아이템의 스타일과 관련된 속성

Border

아이템의 테두리를 설정합니다.

• 타입: string
• 기본값: undefined

Border Left

아이템의 왼쪽 테두리를 설정합니다.

• 타입: string
• 기본값: undefined

Border Right

아이템의 오른쪽 테두리를 설정합니다.

• 타입: string
• 기본값: undefined

Border Top

아이템의 위쪽 테두리를 설정합니다.

• 타입: string
• 기본값: undefined

Border Bottom

아이템의 아래쪽 테두리를 설정합니다.

• 타입: string
• 기본값: undefined

Font Family

아이템의 글꼴을 설정합니다.

• 타입: string
• 기본값: undefined

Font Size

아이템의 텍스트 크기를 설정합니다.

• 타입: number
• 기본값: undefined

Font Style

아이템의 글꼴체를 설정합니다.

• 타입: string
• 기본값: undefined

Text Decoration

아이템의 텍스트에 선 스타일을 설정합니다.

• 타입: string
• 기본값: undefined

Font Weight

아이템의 텍스트 굵기를 설정합니다.

• 타입: string
• 기본값: undefined

Color

아이템의 텍스트 색상을 설정합니다.

• 타입: string
• 기본값: undefined

Background Color

아이템의 배경 색상을 설정합니다.

• 타입: string
• 기본값: undefined

Text Align

아이템의 텍스트에 가로 정렬을 설정합니다.

• 타입: string
• 기본값: undefined

Vertical Align

아이템의 세로 정렬을 설정합니다.

• 타입: string
• 기본값: undefined

Padding

아이템의 내부 여백을 설정합니다.

• 타입: string
• 기본값: undefined