목록 및 공통 속성

아이템 목록

• 일반 아이템
  • Text
  • Html
  • Image
  • [Check]
  • SVG
  • Shape
  • Rating
  • Summary
  • [Bar]
  • Barcode
  • QRCode
  • DataMatrix
  • Space
  • Table
  • HtmlView
• 차트 아이템
  • Realchart
• 밴드 아이템
  • Simple Band
  • Table Band
  • CrossTab Band
  • BandGroup
• 컨테이너 아이템
  • Row Box
  • Column Box
  • List Box
  • Diagonal Box
  • [Data List]
  • Stack Container
  • Floting Container

기본 속성

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

Name

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

• 타입: string
• 기본값: undefined

Tag

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

• 타입: string
• 기본값: undefined

Visible

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

• 타입: boolean
• 기본값: true

Page Break

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

• 타입: PageBreakMode
• 기본값: none

Paper

종이 사이즈 관련 속성

Paper

Paper Orientation

종이의 방향을 설정합니다.

portait: 세로 방향
landscape: 가로 방향

• 타입: string
• 기본값: portrait

Paper Size

종이의 사이즈를 설정합니다.

종이의 사이즈는 A0 ~ A8 까지 있습니다.

• 타입: string
• 기본값: A4

Paper Width

종이의 너비를 설정합니다.

• 타입: string
• 기본값: 210mm

Paper Height

종이의 높이를 설정합니다.

• 타입: string
• 기본값: 297mm

Margin Left

종이의 왼쪽 여백을 설정합니다.

• 타입: string
• 기본값: 12mm

Margin Right

종이의 오른쪽 여백을 설정합니다.

• 타입: string
• 기본값: 12mm

Margin Top

종이의 위 여백을 설정합니다.

• 타입: string
• 기본값: 15mm

Margin Bottom

종이의 아래 여백을 설정합니다.

• 타입: string
• 기본값: 15mm

Design

RealReport Designer에서 디자인 표시 영역에 관련된 속성

Design Border

아이템의 디자인 가능한 경계 영역의 표시를 설정합니다.

• 타입: boolean
• 기본값: true

Design Width

아이템의 디자인 가능한 경계 영역의 넓이를 설정합니다.

• 타입: number
• 기본값: Bound Width

Design Height

아이템의 디자인 가능한 경계 영역의 높이를 설정합니다.

• 타입: number
• 기본값: Bound Height

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

Bounds

아이템의 위치 및 사이즈에 해당되는 속성

Width

아이템의 넓이를 설정합니다.

• 타입: number
• 기본값: undefined

Height

아이템의 높이를 설정합니다.

• 타입: number
• 기본값: undefined

Rotation

아이템의 회전 각도를 설정합니다.

• 타입: number
• 기본값: undefined

Left

아이템의 위치를 부모 요소 기준으로 "왼쪽"에서 설정합니다.

• 타입: number
• 기본값: undefined

Right

아이템의 위치를 부모 요소 기준으로 "오른쪽"에서 설정합니다.

• 타입: number
• 기본값: undefined

Top

아이템의 위치를 부모 요소 기준으로 "위"에서 설정합니다.

• 타입: number
• 기본값: undefined

Bottom

아이템의 위치를 부모 요소 기준으로 "아래"에서 설정합니다.

• 타입: number
• 기본값: undefined

Data

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

Data

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

• 타입: string
• 기본값: undefined

Value

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

• 타입: string
• 기본값: undefined

Max Row Count

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

• 타입: number
• 기본값: undefined

Box

박스에서 사용되는 속성

Items Align

컨테이너 내에 리포트 아이템들의 정렬을 설정합니다.

start: 위로 정렬 합니다.
middle: 중앙으로 정렬 합니다.
end: 아래로 정렬 합니다.

• 타입: string
• 기본값: false

Item Gap

컨테이너 내에 리포트 아이템들의 간격을 설정합니다.

• 타입: string
• 기본값: false

Overflow

컨테이너 내에 리포트 아이템들이 영역을 초과할 경우 표시 여부를 설정합니다.

• 타입: boolean
• 기본값: false

Section

섹션에서 사용되는 속성

Space Top

섹션 영역 위의 바깥쪽 여백을 설정합니다.

• 타입: number
• 기본값: undefined

Space Bottom

섹션 영역 아래의 바깥쪽 여백을 설정합니다.

• 타입: number
• 기본값: undefined

Overflow

컨테이너 내에 리포트 아이템들이 영역을 초과할 경우 표시 여부를 설정합니다.

• 타입: boolean
• 기본값: false

Styles

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

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

Cell Align

아이템의 좌우 정렬을 설정합니다.

• 타입: string
• 기본값: undefined

Vertical Align

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

• 타입: string
• 기본값: undefined

Writing Mode

아이템의 텍스트가 배치되는 방향을 설정합니다.

• 타입: string
• 기본값: undefined

Padding

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

• 타입: string
• 기본값: undefined

Padding Left

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

• 타입: string
• 기본값: undefined

Padding Top

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

• 타입: string
• 기본값: undefined

Padding Right

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

• 타입: string
• 기본값: undefined

Padding Bottom

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

• 타입: string
• 기본값: undefined

Border

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

• 타입: string
• 기본값: undefined

Border Left

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

• 타입: string
• 기본값: undefined

Border Right

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

• 타입: string
• 기본값: undefined

Border Top

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

• 타입: string
• 기본값: undefined

Border Bottom

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

• 타입: string
• 기본값: undefined