# 미리 정의된 리소스 사용

## Content



보고서 디자인 프로세스 중에는 사용자에게 미리 정의된 리소스 목록을 제공하는 것이 좋은 여러 지점이 있습니다.

- **공유** 탭에 있는 **이미지** 컨트롤의 **이미지** 속성. 자세한 내용은 [이미지 컨트롤](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Items/Data-Visualizers/Image) 페이지를 참조하십시오.
- **하위 보고서** 컨트롤의 **보고서 이름** 속성. 자세한 내용은 [하위 보고서 컨트롤](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Items/Supplemental-Report-Items/Subreport)을 참조하십시오.
- **보고서로 이동** 작업 매개 변수. 자세한 내용은 [드릴스루](/activereportsjs/docs/v4.1/ReportAuthorGuide/Interactivity) 페이지를 참조하십시오.

Angular, React 및 Vue 디자이너 컴포넌트는 각각 [ImageResourceInfo](@api/modules/reportdesigner.html#imageresourceinfo) 및 [ReportResourceInfo](@api/modules/reportdesigner.html#reportresourceinfo)의 배열인 ```imageList``` 및 ```reportList``` 속성을 제공합니다. 각 리소스는 기본적으로 응용 프로그램의 범위 내에서 확인할 수 있는 URL로 설정해야 하는 `id` 속성을 제공해야 합니다. 또한 리소스가 디자이너 UI에서 리소스 이름으로 사용할 `displayName` 속성을 제공할 수 있습니다. 

순수한 Js 응용 프로그램에서 사용 가능한 리소스를 등록하려면 [setResourceProvider 메서드](@api/classes/reportdesigner.designer.html#setresourceprovider)를 호출하고, 해당하는 리소스의 배열로 확인해야 하는 `Promise` 개체를 반환해야 하는 `getImagesList` 및 `getReportsList` 메서드가 있는 [ResourceProvider 개체](@api/interfaces/reportdesigner.resourceprovider.html)를 전달해야 합니다. 

Angular, React, Vue 및 순수 JavaScript 응용 프로그램에 대한 전체 샘플은 [라이브 데모 페이지](/activereportsjs/demos/features/designer-resources)를 참조하십시오.