- AUD팀님이 작성, 2023-07-06에 최종 변경
외부 라이브러리(React, Vue) 연결 가이드
Start Release No : 7.0.400.20230511 / Update Release No :
프로젝트명 : 기술연구소 내부 프로젝트
작성자 : 한재모 / 검수자 :
기능 정보 |
|
|
|
|
|
|
---|
기능 설명
- 목적
- 외부 라이브러리(React, Vue 등) 로 구축된 웹 프로젝트에서 AUD Platform 의 기능을 사용하고자 하는 목적
- 외부 라이브러리(React, Vue 등) 로 구축된 웹 프로젝트에서 AUD Platform 의 기능을 사용하고자 하는 목적
- 사용 방법
구축한 프로젝트의 HTML, JSP 등의 페이지에 AUD Platfrom 라이브러리와 CSS 를 Include
[CONTENTPATH::] 부분은 AUD 가 설치된 서버의 ContextPath 로 명시해주어야 함
Example code<script type="text/javascript" src="CONTENTPATH::/AUD/400/js/lib/audframework/release/bimatrix.lib.audframework.js"></script> <script type="text/javascript" src="CONTENTPATH::/AUD/400/js/lib/audframework/release/bimatrix.module.audframework.js"></script> <link rel="stylesheet" href="CONTENTPATH::/AUD/400/theme/skin-default-ko/css/bimatrix.module.audframework.css">
- 첨부된 [AudAdaptor.js] 파일을 해당 프로젝트에 복사 / 붙여넣기
- 해당 프로젝트가 시작되는 시점에 전역으로 [AudAdaptor] 객체를 생성.
- 해당 객체를 생성할 때, 파라미터로 AUD Platform 서버가 설치된 ContextPath 상의 아래 명시된 URL 값을 전달해야함. ( [Version Folder] : AUD 하위에 제품 폴더 버전 )
생성한 [AudAdaptor] 객체에 [Init] 함수를 실행
Example codeconst [audUrl, setAudUrl] = useState('CONTENTPATH::/AUD/[Version Folder]'); const audInit = () => { const adaptor = new AudAdaptor(audUrl); adaptor.Init(); setAudAdaptor(adaptor); } useEffect(() => { audInit(); }, []);
AudAdaptor 의 LoadDocument 함수를 통해 원하는 보고서를 특정 Div 영역에 호출
- Div DOM 의 id 정보와 열려고 하는 보고서 ID 정보를 파라미터 값으로 전달해야함
Report Code 는 [AudAdaptor] 를 생성할 때 입력했던 URL 의 서버 상에 있는 보고서의 코드 값이여야 한다.
Example code// audAdaptor.LoadDocument([Div ID], [Report Code]); audAdaptor.LoadDocument('aud-report-wrap', 'REP4F2A11CDAB014D438FAB8BA6556AF260');
- Div DOM ID 를 통해 특정 Viewer 의 객체를 가지고 올 수 있고, 이를 통해 보고서 상의 [Script] 정보나 보고서 조회 등의 기능을 수행할 수 있다.
viewer 의 GetReportScript 함수를 통해, 해당 보고서의 Script Text 정보를 추출 및 적용할 수 있다.
Example codeconst viewer = audAdaptor.GetViewer('aud-report-wrap'); const reportScript = viewer.GetReportScript(); // 보고서 내에 정의된 함수 실행 if(typeof reportScript.SetFromText === 'function') { reportScript.SetFromText(branch); } viewer.Refresh(); // 보고서 조회
세부 기능 명 | 내용 |
---|---|
Init(callback) | [AudAdaptor] AUD Platfrom 라이브러리 최초 설정을 위한 함수 AudAdaptor 객체를 생성 후, 최초 한 번 필수적으로 수행해야함 # callback : AUD Init 이 동작완료 된 후, 수행할 callback 정의 ( 필수 X ) |
LoadDocument(divId, reptCode) | [AudAdaptor] <Div> 태그 영역에 보고서를 실행하는 함수 <Div> 태그 ID 속성 값이 [Viewer] 모델의 고유 Key 값으로 설정됨 # divId : 해당 보고서를 실행하고자 하는 영역의 DOM ID 속성 값 # reptCode : 실행하고자 하는 보고서 코드 |
GetViewer(viewerId) | [AudAdaptor] 실행한 보고서 영역의 Viewer 객체를 가져오는 함수 # viewerId : 보고서를 실행한 DOM Id |
GetGlobalParams(key) | [AudAdaptor] AUD 전역에 설정된 변수 값을 가지고 오는 함수 # key : 등록한 KEY |
SetGlobalParam(key, value, dataType) | [AudAdaptor] AUD 전역에 변수 형태로 값을 설정하는 함수 # key : 등록할 KEY # value : 등록할 값 # dataType : DataType ( 0 : Numberic / 1 : String ) |
Refresh() | [AudViewer] 해당 Viewer 의 보고서를 조회하는 기능 Viewer 가 여러 개의 경우에도 해당 Viewer 영역에 있는 보고서만 조회가 발생한다 |
GetReportScript() | [AudViewer] 해당 Viewer 의 보고서에서 작성된 Script 를 반환하는 함수 보고서에 정의된 변수나 함수 등을 사용할 수 있도록 하기 위한 기능 |
GetVariable(key) | [AudViewer] 보고서 영역 상의 설정된 [Variable] 객체 내의 KEY 에 해당하는 값을 가지고 오는 함수 ※ GetGlobalParams 와 다르게 보고서의 전역 개념이다. 보고서가 새로 오픈되면 갱신된다. ( 우선 순위는 GetVariable 가 더 높음 ) |
SetVariable(key, value) | [AudViewer] 보고서 영역 상의 설정된 [Variable] 객체 내의 { KEY , VALUE } 구조로 값을 설정하기 위한 함수 # key : 등록할 고유 KEY # value : 등록할 값 |
변경 전/후 제품 버전 | 변경 전(제품 버전) | 변경 후(제품 버전) |
---|---|---|
변경 전 : 변경 후 : |
|
문서 수정 이력
BCRM 정보
(BCRM접수번호)제목
...
- 레이블 없음