외부 라이브러리(React, Vue) 연결 가이드

Start Release No : 7.0.400.20230511 / Update Release No :

프로젝트명 : 기술연구소 내부 프로젝트

작성자 : 한재모 / 검수자 :

기능 정보			API Open			UI Open			Read Only			Not Use			Hidden			Not Recommend

도움말

icon	false
title	기능 설명

목적
1. 외부 라이브러리(React, Vue 등) 로 구축된 웹 프로젝트에서 AUD Platform 의 기능을 사용하고자 하는 목적

사용 방법

구축한 프로젝트의 HTML, JSP 등의 페이지에 AUD Platfrom 라이브러리와 CSS 를 Include

[CONTENTPATH::] 부분은 AUD 가 설치된 서버의 ContextPath 로 명시해주어야 함

코드 블럭

language	js
theme	FadeToGrey
firstline	1
title	Example code
linenumbers	true

<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] 함수를 실행

코드 블럭

language	js
theme	FadeToGrey
firstline	1
title	Example code
linenumbers	true

const [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 의 서버 상에 있는 보고서의 코드 값이여야 한다.

코드 블럭

language	js
theme	FadeToGrey
firstline	1
title	Example code
linenumbers	true

// audAdaptor.LoadDocument([Div ID], [Report Code]);
audAdaptor.LoadDocument('aud-report-wrap', 'REP4F2A11CDAB014D438FAB8BA6556AF260');

Div DOM ID 를 통해 특정 Viewer 의 객체를 가지고 올 수 있고, 이를 통해 보고서 상의 [Script] 정보나 보고서 조회 등의 기능을 수행할 수 있다.

viewer 의 GetReportScript 함수를 통해, 해당 보고서의 Script Text 정보를 추출 및 적용할 수 있다.

코드 블럭

language	js
theme	FadeToGrey
firstline	1
title	Example code
linenumbers	true

const 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 : 등록할 값

정보

title	샘플 정보

샘플 URL :
샘플 파일

첨부 파일

patterns	.jsp,.zip,.xml,.js,.mtsd,.xlsx,.xlsb,.mtzb,.mtvx,.mtx,.*mtxz,

변경 전/후 제품 버전

변경 전(제품 버전)

변경 후(제품 버전)

변경 전 :

변경 후 :

공간 바로가기

페이지 트리

버전 비교

이전 버전 2

새 버전 3

키

외부 라이브러리(React, Vue) 연결 가이드

공간 바로가기

페이지 트리

페이지 이력

버전 비교

이전 버전 2

새 버전 3

키

외부 라이브러리(React, Vue) 연결 가이드