[{"id":"95caf1c9-ae91-4f54-b77c-fe135dea7e4a","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"0e8c9020-034a-45be-991e-37188b39617b","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"75c9ea99-cd27-4e93-ba23-1a432ed2b12f","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"1c11391d-eee8-4d4d-bb79-568bbb017981","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"a7dd7d88-788d-4640-80a8-d5308b2629eb","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"43797034-f596-4394-b1d0-33bc526cfba3","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"ab34db23-548a-41c6-b58b-517b1187b49c","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"bb600617-59cf-49b3-a718-9c4372065955","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"c37d9457-4cf0-43c1-a77f-ccf2baa9920a","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"4f511fcc-370e-4f45-8ff9-9df6b7d41faf","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"34a7a849-27bc-4bbf-8790-b6fcef7c9247","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"67b2b95f-f683-4673-9e3f-044c49b2a7f3","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"6f75d947-a185-4b2e-b2ac-59ce51a75059","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"7846cdd1-836b-4043-9f80-8fd82a66c747","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"615b3ec7-a7af-4163-9d5d-92d540416ce8","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"acab1450-345b-4d79-a421-187baa24391b","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]}]
        
(Showing Draft Content)

리소스 로케이터 사용

보고서가 하위 보고서를 포함하거나 드릴스루 상호 작용을 허용하는 경우 보고서에 다른 보고서에 대한 참조를 포함할 수 있습니다. 모듈 또는 JSON 데이터를 사용하여 보고서 컴포넌트에 보고서를 로드하는 경우 하위 보고서와 드릴스루 보고서에 대한 참조를 자동으로 확인할 수 없으므로 보고서 정의 개체를 ID로 반환하는 코드를 제공해야 합니다. 또한 런타임에 확인해야 하는 테마를 보고서에 사용할 수 있습니다. 보고서 뷰어 컴포넌트의 open 메서드리소스 로케이터 구현을 포함할 수 있는 개체인 두 번째 선택적 인수를 수락합니다. 예를 들면 다음과 같습니다.


// eslint-disable import/no-webpack-loader-syntax
import mainReport from '!json-loader!../reports/MainReport.rdlx-json';
import subReport from '!json-loader!../reports/Subreport.rdlx-json';
import drillthroughReport from '!json-loader!../reports/DrillthroughReport.rdlx-json';

this.reportViewer.open("MainReport", {
  ResourceLocator: {
    getResource: (resourceId: string) => {
      switch (resourceId) {
        case "MainReport": return mainReport;
        case "Subreport": return subReport;
        case "DrillThroughReport": return drillthroughReport;
        case "Theme": return fetch("assets/themes/light-theme.rdlx-json-theme").then(response => response.json());
      }
    },
  },
});

프로그래밍 방식으로 보고서 정의를 로드하는 경우 PageReport 인스턴스의 load 메서드에 리소스 로케이터를 전달할 수 있습니다. 예를 들면 다음과 같습니다.

const report = new GC.ActiveReports.Core.PageReport();
await report.load("MainReport", {
    resourceLocator: {
        getResource: (resourceId) => {
          return fetch("assets/" + resourceId).then(response => response.json());
        },
      },
);

getResource 함수는 보고서 정의나 동일한 정의로 확인되는 테마 개체 또는 Promise 개체를 반환할 수 있습니다.

Angular, React, Vue, Pure JS 응용 프로그램의 코드 샘플은 리소스 로케이터 데모를 참조하십시오.

X

카카오톡 채널 추가를 통해 GrapeCity의 최신 정보를 빠르게 받아 보세요!