목록 및 공통 속성
아이템 목록
- 일반 아이템
- 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
기본 속성
모든 아이템에 해당되는 기본 속성
이름 | 타입 | 설명 | 필수여부 |
---|---|---|---|
Name | string | 아이템에 고유한 이름을 설정합니다. | no |
Tag | string | 아이템에 태그값을 설정합니다. | no |
Visible | boolean | 아이템의 표시 여부를 설정합니다. | yes |
Page Break | PageBreakMode | 아이템을 출력하기 전에 페이지를 어떻게 나눌 것인지 대해 설정합니다. | no |
Name
아이템에 고유한 이름을 설정합니다.
- 타입: string
- 기본값: undefined
아이템 Event
에서 특정 아이템을 가져올 때 사용 가능
Tag
아이템에 태그값을 설정합니다.
- 타입: string
- 기본값: undefined
아이템 Event
에서 Tag
값과 일치하는 다수의 아이템을 선택할 때 사용 가능
Visible
아이템의 표시 여부를 설정합니다.
- 타입: boolean
- 기본값: true
Page Break
아이템을 출력하기 전에 페이지를 어떻게 나눌 것인지 대해 설정합니다.
- 타입: PageBreakMode
- 기본값: none
값 | 설명 |
---|---|
none | 페이지 나누기를 설정하지 않는다. |
before | 아이템을 출력하기 전에 페이지를 나눈다. |
after | 아이템을 출력한 후 페이지를 나눈다. |
both | 아이템을 출력 전후로 페이지를 나눈다. |
Paper
종이 사이즈 관련 속성
Paper
이름 | 타입 | 설명 | 필수여부 |
---|---|---|---|
Paper Orientation | string | 종이의 방향을 설정합니다. | no |
Paper Size | string | 종이의 사이즈를 설정합니다. | no |
Paper Width | string | 종이의 너비를 설정합니다. | no |
Paper Height | string | 종이의 높이를 설정합니다. | no |
Margin Left | string | 종이의 왼쪽 여백을 설정합니다. | no |
Margin Right | string | 종이의 오른쪽 여백을 설정합니다. | no |
Margin Top | string | 종이의 위 여백을 설정합니다. | no |
Margin Bottom | string | 종이의 아래 여백을 설정합니다. | 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 Border | boolean | 아이템의 디자인 가능한 경계 영역의 표시를 설정합니다. | yes |
Design Width | number | 아이템의 디자인 가능한 경계 영역의 넓이를 설정합니다. | no |
Design Height | number | 아이템의 디자인 가능한 경계 영역의 높이를 설정합니다. | no |
Design Border
아이템의 디자인 가능한 경계 영역의 표시를 설정합니다.
- 타입: boolean
- 기본값: true
Design Width
아이템의 디자인 가능한 경계 영역의 넓이를 설정합니다.
- 타입: number
- 기본값: Bound Width
Design Height
아이템의 디자인 가능한 경계 영역의 높이를 설정합니다.
- 타입: number
- 기본값: Bound Height
Event
아이템의 이벤트 함수 관련 로직을
javascript
문법으로 선언할 수 있는 속성
Return
구문에 올바른 반환 타입의 데이터를 설정하면 반환 타입의 정보대로 아이템이 설정된다.
이름 | 타입 | 설명 | 필수여부 |
---|---|---|---|
OnGetValue | ReportItemValueCallback | 아이템에 표시되는 값을 변경할 수 있는 이벤트 함수 관련 로직을 설정합니다. | no |
OnGetStyles | ReportItemStyleCallback | 아이템에 적용되는 스타일을 변경할 수 있는 이벤트 함수 관련 로직을 설정합니다. | no |
OnGetVisible | ReportItemVisibleCallback | 아이템의 표시 여부를 변경할 수 있는 이벤트 함수 관련 로직을 설정합니다. | no |
OnGetContextValue | ContextValueCallback | 아이템에 표시되는 값을 변경할 수 있는 이벤트 함수 관련 로직을 설정합니다. | no |
인자
인자 | 타입 | 설명 |
---|---|---|
ctx | PrintContext | 출력 관련 정보를 가지고 있는 객체 |
item | ReportItem | 아이템 관련 정보를 가지고 있는 객체 |
row | Number | 아이템이 DataRow 로 표시되는 경우에 각 줄의 행번호 정보 |
value | any | 아이템에 표시되는 값 |
OnGetValue
아이템에 표시되는 값을 변경할 수 있는 이벤트 함수 관련 로직을 설정합니다.
- 타입: ReportItemValueCallback
- 기본값: undefined
- 인자:
ctx
|item
|row
|value
- 반환 타입: string | number
OnGetValue Event
는 OnGetContextValue Event
보다 먼저 실행된다.
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, ... }
형태의 데이터를 반환하면 아이템 스타일을 변경할 수 있다.
사용법 예시
key
= camelCase 형식의 스타일 속성명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 Event
는OnGetValue Event
보다 나중에 실행됩니다.- visible 속성값보다 우선시 됩니다.
OnGetVisible 사용예제
아이템의 값이 "검출"인 경우 화면에 표시하지 않음
function onGetVisible(ctx, item, row, value) {
if (value === '검출') {
return false;
}
}
OnGetContextValue
아이템에 표시되는 값을 변경할 수 있는 이벤트 함수 관련 로직을 설정합니다.
- 타입: ContextValueCallback
- 기본값: undefined
- 인자:
ctx
- 반환 타입: string | number
OnGetContextValue Event
는 OnGetValue Event
보다 나중에 실행된다.
Bounds
아이템의 위치 및 사이즈에 해당되는 속성
이름 | 타입 | 설명 | 필수여부 |
---|---|---|---|
Width | number | 아이템의 넓이를 설정합니다. | no |
Height | number | 아이템의 높이를 설정합니다. | no |
Rotation | number | 아이템의 회전 각도를 설정합니다. | no |
Left | number | 아이템의 위치를 부모 요소 기준으로 "왼쪽"에서 설정합니다. | no |
Right | number | 아이템의 위치를 부모 요소 기준으로 "오른쪽"에서 설정합니다. | no |
Top | number | 아이템의 위치를 부모 요소 기준으로 "위"에서 설정합니다. | no |
Bottom | number | 아이템의 위치를 부모 요소 기준으로 "아래"에서 설정합니다. | no |
Width
아이템의 넓이를 설정합니다.
- 타입: number
- 기본값: undefined
Height
아이템의 높이를 설정합니다.
- 타입: number
- 기본값: undefined
Rotation
아이템의 회전 각도를 설정합니다.
- 타입: number
- 기본값: undefined
Left
아이템의 위치를 부모 요소 기준으로 "왼쪽"에서 설정합니다.
- 타입: number
- 기본값: undefined
Right
아이템의 위치를 부모 요소 기준으로 "오른쪽"에서 설정합니다.
- 타입: number
- 기본값: undefined
Top
아이템의 위치를 부모 요소 기준으로 "위"에서 설정합니다.
- 타입: number
- 기본값: undefined
Bottom
아이템의 위치를 부모 요소 기준으로 "아래"에서 설정합니다.
- 타입: number
- 기본값: undefined
Data
아이템에 데이터를 연결시키는 속성
이름 | 타입 | 설명 | 필수여부 |
---|---|---|---|
Data | string | 아이템에 리포트에 존재하는 데이터를 연결합니다. | no |
Value | string | 아이템에 연결된 데이터에서 표시할 필드를 설정합니다. | no |
Max Row Count | number | 아이템이 Band에 해당되는 경우 데이터가 표시될 수 있는 최대행을 설정합니다. | no |
Data
아이템에 리포트에 존재하는 데이터를 연결합니다.
- 타입: string
- 기본값: undefined
Value
아이템에 연결된 데이터에서 표시할 필드를 설정합니다.
- 타입: string
- 기본값: undefined
Max Row Count
아이템이 Band에 해당되는 경우 데이터가 표시될 수 있는 최대행을 설정합니다.
- 타입: number
- 기본값: undefined
Box
박스에서 사용되는 속성
이름 | 타입 | 설명 | 필수여부 |
---|---|---|---|
Items Align | string | 컨테이너 내에 리포트 아이템들의 정렬을 설정합니다. | no |
Item Gap | string | 컨테이너 내에 리포트 아이템들의 간격을 설정합니다. | no |
Overflow | boolean | 컨테이너 내에 리포트 아이템들이 영역을 초과할 경우 표시 여부를 설정합니다. | no |
Items Align
컨테이너 내에 리포트 아이템들의 정렬을 설정합니다.
start: 위로 정렬 합니다.
middle: 중앙으로 정렬 합니다.
end: 아래로 정렬 합니다.
- 타입: string
- 기본값: false
Item Gap
컨테이너 내에 리포트 아이템들의 간격을 설정합니다.
- 타입: string
- 기본값: false
Overflow
컨테이너 내에 리포트 아이템들이 영역을 초과할 경우 표시 여부를 설정합니다.
- 타입: boolean
- 기본값: false
Section
섹션에서 사용되는 속성
이름 | 타입 | 설명 | 필수여부 |
---|---|---|---|
Space Top | number | 섹션 영역 위의 바깥쪽 여백을 설정합니다. | no |
Space Bottom | number | 섹션 영역 아래의 바깥쪽 여백을 설정합니다. | no |
Space Top
섹션 영역 위의 바깥쪽 여백을 설정합니다.
- 타입: number
- 기본값: undefined
Space Bottom
섹션 영역 아래의 바깥쪽 여백을 설정합니다.
- 타입: number
- 기본값: undefined
Overflow
컨테이너 내에 리포트 아이템들이 영역을 초과할 경우 표시 여부를 설정합니다.
- 타입: boolean
- 기본값: false
Styles
아이템의 스타일과 관련된 속성
이름 | 타입 | 설명 | 필수여부 |
---|---|---|---|
Font Family | string | 아이템의 글꼴을 설정합니다. | no |
Font Size | number | 아이템의 텍스트 크기를 설정합니다. | no |
Font Style | string | 아이템의 글꼴체를 설정합니다. | no |
Text Decoration | string | 아이템의 텍스트에 선 스타일을 설정합니다. | no |
Font Weight | string | 아이템의 텍스트 굵기를 설정합니다. | no |
Color | string | 아이템의 텍스트 색상을 설정합니다. | no |
Background Color | string | 아이템의 배경 색상을 설정합니다. | no |
Text Align | string | 아이템의 텍스트 가로 정렬을 설정합니다. | no |
Cell Align | string | 아이템의 좌우 정렬을 설정합니다. | no |
Vertical Align | string | 아이템의 세로 정렬을 설정합니다. | no |
Writing Mode | string | 아이템의 텍스트가 배치되는 방향을 설정합니다. | no |
Padding | string | 아이템의 내부 여백을 설정합니다. | no |
Padding Left | string | 아이템의 왼쪽 내부 여백을 설정합니다. | no |
Padding Top | string | 아이템의 위쪽 내부 여백을 설정합니다. | no |
Padding Right | string | 아이템의 오른쪽 내부 여백을 설정합니다. | no |
Padding Bottom | string | 아이템의 아래쪽 내부 여백을 설정합니다. | no |
Border | string | 아이템의 테두리를 설정합니다. | no |
Border Left | string | 아이템의 왼쪽 테두리를 설정합니다. | no |
Border Right | string | 아이템의 오른쪽 테두리를 설정합니다. | no |
Border Top | string | 아이템의 위쪽 테두리를 설정합니다. | no |
Border Bottom | string | 아이템의 아래쪽 테두리를 설정합니다. | 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