페이지 트리
메타 데이터의 끝으로 건너뛰기
메타 데이터의 시작으로 이동

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



Start Release No : 7.0.400.20230511 / Update Release No :

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

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

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

기능 설명

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

  2. 사용 방법
    1. 구축한 프로젝트의 HTML, JSP 등의 페이지에 AUD Platfrom 라이브러리와 CSS 를 Include

      1. [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">



    2. 첨부된 [AudAdaptor.js] 파일을 해당 프로젝트에 복사 / 붙여넣기
    3. 해당 프로젝트가 시작되는 시점에 전역으로 [AudAdaptor] 객체를 생성.
      1. 해당 객체를 생성할 때, 파라미터로 AUD Platform 서버가 설치된 ContextPath 상의 아래 명시된 URL 값을 전달해야함. ( [Version Folder] : AUD 하위에 제품 폴더 버전 )
      2. 생성한 [AudAdaptor] 객체에 [Init] 함수를 실행

        Example code
        const [audUrl, setAudUrl] = useState('CONTENTPATH::/AUD/[Version Folder]');
        
        const audInit = () => {
        	const adaptor = new AudAdaptor(audUrl);
            adaptor.Init();
        
            setAudAdaptor(adaptor);
        }
        
        
        useEffect(() => {
            audInit();
          }, []);



    4. AudAdaptor 의 LoadDocument 함수를 통해 원하는 보고서를 특정 Div 영역에 호출

      1. Div DOM 의 id 정보와 열려고 하는 보고서 ID 정보를 파라미터 값으로 전달해야함
      2. Report Code 는 [AudAdaptor] 를 생성할 때 입력했던 URL 의 서버 상에 있는 보고서의 코드 값이여야 한다.

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



    5. Div DOM ID 를 통해 특정 Viewer 의 객체를 가지고 올 수 있고, 이를 통해 보고서 상의 [Script] 정보나 보고서 조회 등의 기능을 수행할 수 있다.
      1. viewer 의 GetReportScript 함수를 통해, 해당 보고서의 Script Text 정보를 추출 및 적용할 수 있다.

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

샘플 정보

  • 샘플 URL :
  • 샘플 파일

  파일 변경됨
JavaScript 파일 AudAdaptor.js 2023-05-15 by AUD팀

변경 전/후 제품 버전

변경 전(제품 버전)변경 후(제품 버전)

변경 전 :

변경 후 :

참고 자료

 여기를 클릭하여 펼치기...

  파일 변경됨
JavaScript 파일 AudAdaptor.js 2023-05-15 by AUD팀

문서 수정 이력

버전 날짜 댓글
현재 버전 (v. 10) 2023-07-06 13:46 AUD팀
v. 9 2023-07-06 13:46 AUD팀
v. 8 2023-07-05 16:14 guide
v. 7 2023-07-05 16:14 guide
v. 6 2023-07-05 16:14 guide
v. 5 2023-07-05 16:14 guide
v. 4 2023-07-05 16:14 guide
v. 3 2023-05-16 17:05 AUD팀
v. 2 2023-05-15 15:14 AUD팀
v. 1 2023-05-15 15:08 AUD팀

BCRM 정보

(BCRM접수번호)제목


...

  • 레이블 없음