Div를 사용해 웹 애플리케이션에 Wyn 대시보드 임베드하기

임베디드 BI란?

임베디드 BI(Embedded BI)는 BI 솔루션을 기존의 비즈니스 프로세스 소프트웨어 안에 통합하는 것을 의미합니다. 독립 실행형 앱 대신 임베디드 BI 를 활용하면 조직의 애플리케이션 내부에서 직접 비즈니스 인텔리전스를 사용할 수 있습니다.

임베디드 BI는 일상 운영부터 장기 전략 수립까지 동일한 업무 환경에서 실행 가능한 인사이트를 제공하여 의사결정을 가속화합니다. Wyn의 Dashboard Viewer 와 Designer 는 두 가지 방식으로 임베드할 수 있습니다:

• iFrame으로 직접 임베드
• div 태그로 임베드

Wyn Dashboards API

이 글에서는 div와 Wyn Dashboards API로 Viewer/Designer를 임베드하는 과정을 단계별로 소개합니다.

카테고리 & 대시보드 가져오기

먼저 Wyn 서버에 저장된 카테고리와 대시보드 목록을 GraphQL로 가져옵니다.

GraphQL 요청 함수

 Copy 
 // jQuery ajax를 활용한 GraphQL 요청
function graphqlRequest(query) {
  return $.ajax({
    url: wynUrl + '/api/graphql?token=' + token,
    type: 'POST',
    data: JSON.stringify({ query }),
    dataType: 'json',
    contentType: 'application/json',
    processData: true,
    headers: getDefaultHeaders(),
    xhrFields: { withCredentials: true }
  });
} 

카테고리 가져오기

 Copy 
 function getCategoriesList() {
  return graphqlRequest(
    'query { ' +
      'tags { ' +
        'id, name, parentId, color, iconCssClass, isFavorites ' +
      '} ' +
    '}'
  ).then(function (result) {
    console.log(result);
    var categoriesList = getValue(result, 'data.tags') || [];
    return categoriesList;
  });
} 

대시보드 가져오기

 Copy 
 function getDashboardsList() {
  return graphqlRequest(
    'query { ' +
      'documenttypes(key: "dbd") { ' +
        'documents(orderby: "-created") { ' +
          'id, description, type, title, ' +
          'tags { id, name }, ' +
          'created_by { name }, created, ' +
          'modified_by { name }, modified ' +
        '} ' +
      '} ' +
    '}'
  ).then(function (result) {
    console.log(result);
    var dashboardsList = getValue(result, 'data.documenttypes.0.documents') || [];
    return dashboardsList;
  });
} 

API 참조 (테마/스크립트)

Wyn Dashboards API는 Wyn Enterprise 서버 설치 시 함께 제공됩니다. Bootstrap처럼 스크립트와 테마 리소스를 추가하세요.

Wyn Dashboard 테마

 Copy 
 <link rel="stylesheet"
 href="http://<WynServerUrl>/api/themefiles/dashboard.vendor.css?theme=dark-forest&version=4.1.16187.0&plugin=dashboards" />
<link rel="stylesheet"
 href="http://<WynServerUrl>/api/themefiles/dashboard.app.css?theme=dark-forest&version=4.1.16187.0&plugin=dashboards" /> 

Wyn Dashboard 스크립트

 Copy 
 <script src="http://<WynServerUrl>/lib/polyfills.js"></script>
<script src="http://<WynServerUrl>/api/PluginAssets/dashboards-4.1.16187.0/dashboard.common.js"></script>
<script src="http://<WynServerUrl>/api/PluginAssets/dashboards-4.1.16187.0/dashboard.table.js"></script>
<script src="http://<WynServerUrl>/api/PluginAssets/dashboards-4.1.16187.0/dashboard.dialog.js"></script>
<script src="http://<WynServerUrl>/api/PluginAssets/dashboards-4.1.16187.0/dashboard.app.js"></script> 

Viewer 생성 및 초기화

Viewer 인스턴스 생성

 Copy 
 var viewer = WynDashboards.create('DashboardViewer', {
  dashboardId: docId,         // 볼 대시보드 ID
  edition: 'EN',
  size: 'fitToScreen',
  actions: 'clearselection,annotation,analysispath',
  openfulldashboardmode: 'newwindow',
  containerFilterScope: '',
  version: '1.0.0',
  userId: username,           // 사용자명
  lng: 'en',
  baseUrl: wynUrl,            // Wyn 서버 URL
  token: token                // 액세스 토큰
}); 

Viewer 초기화

 Copy 
 viewer.initialize({
  container: document.querySelector('#viewer'),
  onClose: () => { /* 닫힘 이벤트 */ },
  onLoaded: (docName) => { /* 로드 완료 */ }
}); 

Designer 생성 및 초기화

Designer 인스턴스 생성

 Copy 
 var designer = WynDashboards.create('DashboardDesigner', {
  edition: 'EN',
  dashboardId: docId,
  enableDeveloperMode: true,
  containerFilterScope: '',
  version: '1.0.0',
  userId: username,
  lng: 'en',
  baseUrl: wynUrl,
  token: token
}); 

Designer 초기화

 Copy 
 designer.initialize({
  container: document.querySelector('#designer'),
  onClose: () => { /* 닫힘 */ },
  onSave: (docName) => { /* 저장 */ },
  onLoaded: (docName) => { /* 로드 완료 */ }
}); 

임베드용 컨테이너

 Copy 
 <div id="designer"></div>
<div id="viewer"></div> 

개별 시나리오 임베드

전체 대시보드 대신 scenario 옵션으로 특정 시나리오만 임베드할 수 있습니다.

 Copy 
 var viewer = WynDashboards.create('DashboardViewer', {
  scenario: 'column-3',
  dashboardId: docId,
  edition: 'EN',
  size: 'fitToScreen',
  actions: 'clearselection,annotation,analysispath',
  openfulldashboardmode: 'newwindow',
  containerFilterScope: '',
  version: '1.0.0',
  userId: username,
  lng: 'en',
  baseUrl: wynUrl,
  token: token
}); 

추가 리소스

• 문의: experts@wynenterprise.com
• 언어팩/샘플/커스텀 비주얼: Wyn GitHub