[{"id":"67b2b95f-f683-4673-9e3f-044c49b2a7f3","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"acab1450-345b-4d79-a421-187baa24391b","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"75c9ea99-cd27-4e93-ba23-1a432ed2b12f","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"43797034-f596-4394-b1d0-33bc526cfba3","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"0e8c9020-034a-45be-991e-37188b39617b","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"ab34db23-548a-41c6-b58b-517b1187b49c","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"1c11391d-eee8-4d4d-bb79-568bbb017981","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"6f75d947-a185-4b2e-b2ac-59ce51a75059","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"7846cdd1-836b-4043-9f80-8fd82a66c747","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"615b3ec7-a7af-4163-9d5d-92d540416ce8","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"bb600617-59cf-49b3-a718-9c4372065955","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"4f511fcc-370e-4f45-8ff9-9df6b7d41faf","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"34a7a849-27bc-4bbf-8790-b6fcef7c9247","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"c37d9457-4cf0-43c1-a77f-ccf2baa9920a","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"a7dd7d88-788d-4640-80a8-d5308b2629eb","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"95caf1c9-ae91-4f54-b77c-fe135dea7e4a","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]}]
사용자가 보고서를 디자인하고 TextBox 같은 새 보고서 항목을 추가하면 보고서 디자이너에서 자동으로 새 보고서 항목의 속성을 기본값으로 설정합니다. 예를 들어 새로 추가한 TextBox에는 Arial
글꼴 이름, 10pt
글꼴 크기, Normal
글꼴 스타일이 적용됩니다. 그러나 아래 설명된 절차에 따라 기본값을 재정의할 수 있습니다.
보고서 항목 템플릿
은 속성이 원하는 값으로 설정된 보고서 항목을 포함하는 일반적인 보고서입니다. 독립 실행형 보고서 디자이너 앱에서 보고서 항목 템플릿
을 만들 수 있습니다. 예를 들어 TextBox의 기본 글꼴 이름을 Times New Roman
으로 설정하려는 경우 템플릿 보고서에 TextBox를 추가하고 글꼴 이름을 그에 따라 설정할 수 있습니다.
새로 추가한 보고서 항목에는 글꼴 이름
같은 다양한 스타일 속성 외에도 기본 위치 및 치수가 적용됩니다. 치수는 UI의 오른쪽 아래에서 선택할 수 있는 보고서 디자이너의 현재 단위 시스템에 따라 임페리얼
또는 미터법
단위를 사용할 수 있습니다.
따라서 임페리얼
및 미터법
단위의 보고서 항목 템플릿을 둘 다 만드는 것이 좋습니다. 응용 프로그램 사용자가 하나의 단위 시스템만 사용하는 경우 단일 보고서 항목 템플릿을 만들어도 됩니다.
최종적으로, ActiveReportsJS는 연속 페이지 레이아웃 및 고정 페이지 레이아웃이라는 두 가지 유형의 보고서 레이아웃을 지원합니다. 고정 크기 같이 고정 페이지 레이아웃에서 지원되는 기본 보고서 항목 속성을 정의하려는 경우 고정 레이아웃 보고서 항목 템플릿을 만들 수 있습니다.
즉, 다음과 같은 네 가지 보고서 항목 템플릿을 만들 수 있습니다.
보고서 템플릿을 만든 후 응용 프로그램 코드에서 다음 모양의 개체를 초기화할 수 있습니다. ReportInfo
개체에 대한 설명은 설명서를 참조하십시오.
const reportItemTemplates = {
imperialTemplates: [
cplImperialReportTemplateInfo, // Report Info for the Continuous Page Layout Report Items Template with imperial units
fplImperialReportTemplateInfo // Report Info for the Fixed Page Layout Report Items Template with imperial units
],
metricTemplates: [
cplMetricReportTemplateInfo, // Report Info for the Continuous Page Layout Report Items Template with metric units
fplMetricReportTemplateInfo // Report Info for the Fixed Page Layout Report Items Template with metric units
]
}
예를 들어 React 앱의 공용 폴더 같은 응용 프로그램의 정적 자산 폴더 안에 보고서 템플릿을 저장한 후 코드에서 다음 개체를 초기화할 수 있습니다.
const reportItemTemplates = {
imperialTemplates: [
{id: "cpl-template-imperial.rdlx-json"}, // URL of the Continuous Page Layout Report Item Template with imperial units
{id: "fpl-template-imperial.rdlx-json"} // URL of the Fixed Page Layout Report Item Template with imperial units
],
metricTemplates: [
{id: "cpl-template-metric.rdlx-json"}, // URL of the Continuous Page Layout Report Item Template with metric units
{id: "fpl-template-metric.rdlx-json"} // // URL of the Fixed Page Layout Report Item Template with metric units
]
}
단일 보고서 항목 템플릿을 사용할 수도 있습니다. 예를 들어 응용 프로그램 사용자가 임페리얼
단위만 사용하는데 텍스트 상자 보고서 항목의 기본 글꼴 이름을 설정하려 한다고 가정합니다. 이 경우 reportItemTemplates 개체는 하나의 보고서 항목 템플릿 참조만 포함할 수 있습니다.
const reportItemTemplates = {
imperialTemplates: [
{id: "default-template.rdlx-json"}, // URL of the Continuous Page Layout Report Item Template with imperial units
]
}
React 보고서 디자이너 컴포넌트, Angular 보고서 디자이너 컴포넌트 또는 Vue 보고서 디자이너 컴포넌트를 사용하는 경우 컴포넌트 인스턴스의 customInitTemplates
속성을 사용하여 보고서 항목 템플릿을 전달할 수 있습니다. 예를 들면 다음과 같습니다.
import { Designer } from "@grapecity/activereports-react";
const reportItemTemplates = {
imperialTemplates: [
{id: "cpl-template.rdlx-json"}
]
}
function App() {
return (
<div id="designer-host">
<Designer customInitTemplates={reportItemTemplates} />
</div>
);
}
Pure JS 응용 프로그램에서 GC.ActiveReports.ReportDesigner.Designer
의 생성자는 특히 customInitTemplates
속성을 포함하는 두 번째 선택적 인수로 디자이너 구성 개체를 수락합니다.
var designer = new GC.ActiveReports.ReportDesigner.Designer(
"#designer-host",
{ customInitTemplates: reportItemTemplates }
);
Pure JS, React, Angular, Vue 응용 프로그램의 전체 예제는 라이브 데모를 참조하십시오.
카카오톡 채널 추가를 통해 GrapeCity의 최신 정보를 빠르게 받아 보세요!