문서
리포트 아이템
목록 및 공통 속성

목록 및 공통 속성

아이템 목록

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

기본 속성

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

이름타입설명필수여부
Namestring아이템에 고유한 이름을 설정합니다.no
Tagstring아이템에 태그값을 설정합니다.no
Visibleboolean아이템의 표시 여부를 설정합니다.yes
Page BreakPageBreakMode아이템을 출력하기 전에 페이지를 어떻게 나눌 것인지 대해 설정합니다.no

Name

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

  • 타입: string
  • 기본값: undefined
💡

아이템 Event에서 특정 아이템을 가져올 때 사용 가능

Tag

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

  • 타입: string
  • 기본값: undefined
💡

아이템 Event에서 Tag값과 일치하는 다수의 아이템을 선택할 때 사용 가능

Visible

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

  • 타입: boolean
  • 기본값: true

Page Break

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

설명
none페이지 나누기를 설정하지 않는다.
before아이템을 출력하기 전에 페이지를 나눈다.
after아이템을 출력한 후 페이지를 나눈다.
both아이템을 출력 전후로 페이지를 나눈다.

Paper

종이 사이즈 관련 속성

Paper

이름타입설명필수여부
Paper Orientationstring종이의 방향을 설정합니다.no
Paper Sizestring종이의 사이즈를 설정합니다.no
Paper Widthstring종이의 너비를 설정합니다.no
Paper Heightstring종이의 높이를 설정합니다.no
Margin Leftstring종이의 왼쪽 여백을 설정합니다.no
Margin Rightstring종이의 오른쪽 여백을 설정합니다.no
Margin Topstring종이의 위 여백을 설정합니다.no
Margin Bottomstring종이의 아래 여백을 설정합니다.no

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 Borderboolean아이템의 디자인 가능한 경계 영역의 표시를 설정합니다.yes
Design Widthnumber아이템의 디자인 가능한 경계 영역의 넓이를 설정합니다.no
Design Heightnumber아이템의 디자인 가능한 경계 영역의 높이를 설정합니다.no

Design Border

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

  • 타입: boolean
  • 기본값: true

Design Width

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

Design Height

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

Event

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

ℹ️

Return 구문에 올바른 반환 타입의 데이터를 설정하면 반환 타입의 정보대로 아이템이 설정된다.

이름타입설명필수여부
OnGetValueReportItemValueCallback아이템에 표시되는 값을 변경할 수 있는 이벤트 함수 관련 로직을 설정합니다.no
OnGetStylesReportItemStyleCallback아이템에 적용되는 스타일을 변경할 수 있는 이벤트 함수 관련 로직을 설정합니다.no
OnGetVisibleReportItemVisibleCallback아이템의 표시 여부를 변경할 수 있는 이벤트 함수 관련 로직을 설정합니다.no
OnGetContextValueContextValueCallback아이템에 표시되는 값을 변경할 수 있는 이벤트 함수 관련 로직을 설정합니다.no

인자

인자타입설명
ctxPrintContext출력 관련 정보를 가지고 있는 객체
itemReportItem아이템 관련 정보를 가지고 있는 객체
rowNumber아이템이 DataRow로 표시되는 경우에 각 줄의 행번호 정보
valueany아이템에 표시되는 값

OnGetValue

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

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

OnGetValue EventOnGetContextValue Event보다 먼저 실행된다.

OnGetValue 사용예제

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

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

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

ℹ️

밴드 데이터를 출력중인 아이템에서만 사용가능한 예제입니다.

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

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

ℹ️

밴드 데이터를 출력중인 아이템에서만 사용가능한 예제입니다.

onGetValue
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 가져와서 설정하기

ℹ️

밴드 데이터를 출력중인 아이템에서만 사용가능한 예제입니다.

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

OnGetStyles

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

설명

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

ℹ️

사용법 예시

  • key = camelCase 형식의 스타일 속성명
  • value = 적용될 값
return { 
    borderTop: '2px solid #red',
    borderBottom: '1px solid #red'
}

OnGetStyles 사용예제

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

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

OnGetVisible

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

설명

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

⚠️
  • OnGetVisible EventOnGetValue Event보다 나중에 실행됩니다.
  • visible 속성값보다 우선시 됩니다.

OnGetVisible 사용예제

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

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

OnGetContextValue

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

⚠️

OnGetContextValue EventOnGetValue Event보다 나중에 실행된다.

Bounds

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

이름타입설명필수여부
Widthnumber아이템의 넓이를 설정합니다.no
Heightnumber아이템의 높이를 설정합니다.no
Rotationnumber아이템의 회전 각도를 설정합니다.no
Leftnumber아이템의 위치를 부모 요소 기준으로 "왼쪽"에서 설정합니다.no
Rightnumber아이템의 위치를 부모 요소 기준으로 "오른쪽"에서 설정합니다.no
Topnumber아이템의 위치를 부모 요소 기준으로 "위"에서 설정합니다.no
Bottomnumber아이템의 위치를 부모 요소 기준으로 "아래"에서 설정합니다.no

Width

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

  • 타입: number
  • 기본값: undefined

Height

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

  • 타입: number
  • 기본값: undefined

Rotation

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

  • 타입: number
  • 기본값: undefined

Left

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

  • 타입: number
  • 기본값: undefined

Right

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

  • 타입: number
  • 기본값: undefined

Top

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

  • 타입: number
  • 기본값: undefined

Bottom

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

  • 타입: number
  • 기본값: undefined

Data

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

이름타입설명필수여부
Datastring아이템에 리포트에 존재하는 데이터를 연결합니다.no
Valuestring아이템에 연결된 데이터에서 표시할 필드를 설정합니다.no
Max Row Countnumber아이템이 Band에 해당되는 경우 데이터가 표시될 수 있는 최대행을 설정합니다.no

Data

아이템에 리포트에 존재하는 데이터를 연결합니다.

  • 타입: string
  • 기본값: undefined

Value

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

  • 타입: string
  • 기본값: undefined

Max Row Count

아이템이 Band에 해당되는 경우 데이터가 표시될 수 있는 최대행을 설정합니다.

  • 타입: number
  • 기본값: undefined

Box

박스에서 사용되는 속성

이름타입설명필수여부
Items Alignstring컨테이너 내에 리포트 아이템들의 정렬을 설정합니다.no
Item Gapstring컨테이너 내에 리포트 아이템들의 간격을 설정합니다.no
Overflowboolean컨테이너 내에 리포트 아이템들이 영역을 초과할 경우 표시 여부를 설정합니다.no

Items Align

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

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

  • 타입: string
  • 기본값: false

Item Gap

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

  • 타입: string
  • 기본값: false

Overflow

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

  • 타입: boolean
  • 기본값: false

Section

섹션에서 사용되는 속성

이름타입설명필수여부
Space Topnumber섹션 영역 위의 바깥쪽 여백을 설정합니다.no
Space Bottomnumber섹션 영역 아래의 바깥쪽 여백을 설정합니다.no

Space Top

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

  • 타입: number
  • 기본값: undefined

Space Bottom

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

  • 타입: number
  • 기본값: undefined

Overflow

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

  • 타입: boolean
  • 기본값: false

Styles

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

이름타입설명필수여부
Font Familystring아이템의 글꼴을 설정합니다.no
Font Sizenumber아이템의 텍스트 크기를 설정합니다.no
Font Stylestring아이템의 글꼴체를 설정합니다.no
Text Decorationstring아이템의 텍스트에 선 스타일을 설정합니다.no
Font Weightstring아이템의 텍스트 굵기를 설정합니다.no
Colorstring아이템의 텍스트 색상을 설정합니다.no
Background Colorstring아이템의 배경 색상을 설정합니다.no
Text Alignstring아이템의 텍스트 가로 정렬을 설정합니다.no
Cell Alignstring아이템의 좌우 정렬을 설정합니다.no
Vertical Alignstring아이템의 세로 정렬을 설정합니다.no
Writing Modestring아이템의 텍스트가 배치되는 방향을 설정합니다.no
Paddingstring아이템의 내부 여백을 설정합니다.no
Padding Leftstring아이템의 왼쪽 내부 여백을 설정합니다.no
Padding Topstring아이템의 위쪽 내부 여백을 설정합니다.no
Padding Rightstring아이템의 오른쪽 내부 여백을 설정합니다.no
Padding Bottomstring아이템의 아래쪽 내부 여백을 설정합니다.no
Borderstring아이템의 테두리를 설정합니다.no
Border Leftstring아이템의 왼쪽 테두리를 설정합니다.no
Border Rightstring아이템의 오른쪽 테두리를 설정합니다.no
Border Topstring아이템의 위쪽 테두리를 설정합니다.no
Border Bottomstring아이템의 아래쪽 테두리를 설정합니다.no

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 관련 속성이 모두 설정될 경우 Border Left, Right, Top, Bottom 테두리 설정값이 우선시 된다.

Border Left

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

  • 타입: string
  • 기본값: undefined

Border Right

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

  • 타입: string
  • 기본값: undefined

Border Top

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

  • 타입: string
  • 기본값: undefined

Border Bottom

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

  • 타입: string
  • 기본값: undefined