[{"id":"5f98443c-9d59-4351-81ad-0910eb2535e7","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"50134b23-c8f4-4c83-8c49-4f7a4d307585","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"61551de1-9a9f-4a08-b71e-49ca882827f5","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"ebf0ce82-0782-496c-bd66-90f5433e31f2","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"50e4fa24-000f-45f0-8f09-9026e40c30ca","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"64f01bad-a9ca-47a2-b134-b485adffed2c","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"57569d12-0bea-4995-9743-1b5efb7dfda6","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"712bddae-c316-4524-add9-6dd487152146","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"afb74359-e66d-40e1-a5e2-f7a22468165d","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"cccfa340-c8a6-43ef-b2cd-f9fe44ce22dc","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"d404d4eb-0b25-4650-be78-033cc4aa3445","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"d778e74c-622b-47d6-b0b1-32e741ee6d1a","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"3103635f-71c9-4a28-8786-45ae6de6a49f","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"0d56fe97-9840-41da-931f-ad23201cd9e2","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"c90cdefc-81dd-4d8d-b8fa-ed93585c4b23","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"5d5d62ca-5108-4421-a925-f2c187eb2aeb","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"e588ca95-4aba-4e50-a99f-833a98531489","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"cc378615-c853-4f3e-994b-9a2260cc06a2","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"4a60e156-0f10-43a2-88bc-9d9691f15137","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"938d62d7-9526-479f-9798-31d0f9f58588","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9e4f342b-5dcb-4548-a84c-afe71cf5d736","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"0d50ab1e-81c0-49b2-b8cb-1f50a6f3e12b","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"0a0c904c-bbb2-4abe-a626-a06200fb57fe","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"224e6263-b410-4f17-8822-e19f965c509d","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"74546345-b13f-4465-a716-7bc0f9c19730","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"60452ec3-5f68-4e01-b8f0-22ea893bf4ce","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"8c3493e9-e62c-45b7-9268-825db731f79b","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]}]
        
(Showing Draft Content)

기본 보고서 항목 속성

사용자가 보고서를 디자인하고 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 응용 프로그램의 전체 예제는 라이브 데모를 참조하십시오.