Custom Widget 이란?

SAC의 커스텀 위젯은 SAC에 기본으로 제공되는 위젯의 확장된 버전이다.

기본으로 제공되지 않는 형식의 데이터를 시각화하고자 할 때 유용하게 쓸 수 있다.
기본적으로 제공되는 위젯처럼 다음과 같은 내용들을 수용 가능한 위젯이다.

• 캔버스의 위젯 메뉴에서 확인 가능하다.
• 캔버스 내에서 이동 및 사이즈 조절이 가능하다.
• 위젯 형태로 존재 한다.
• script 를 등록 할 수 있다.

커스텀 위젯은 간단한 파일들의 set으로 이루어진다. 기본적으로 JSON파일과 JavaScript 파일로 이루져 있다. 필요하다면 추가적인 JS, CSS 파일 등을 추가하여 만들수있다.

Web Component

커스텀 위젯은 웹 컴포넌트로 구현된다. 웹 컴포넌트는 HTML DOM 안에서 Custom HTML Element 형태로 제공 되는데,Custom Element의 렌더링과 스타일링은 HTML DOM으로부터 고립적이다. 이는 웹 페이지의 HTML DOM과 custom Element의 HTML DOM을 분리하여 작동함으로써 가능하다.

웹 컴포넌트는 HTML, CSS(Optional), JavaScript(ECMAScript 2015)로 이루어진다.

제한사항

현재 커스텀 위젯은 구글 크롬과 엣지에서만 동작한다.

지원하지 않는 Feature

• Theme , CSS
• 새로고침 일시 중지
• Viewport 로딩
• 데이터 블렌딩
• 의견 남기기
• 번역
• Data Change Insight
• Search to Insight
• Export (PDF Export의 부록에 첨부되지 않음)
• remote server로부터 이미지를 사용중이라면 pdf export시 cors에러 발생이 있을 수 있다. remote server에서 정책 적용 필요.

CORS

커스텀위젯은 Same-origin 정책과 CORS 메커니즘을 따른다. 커스텀 위젯이 XMLHttpRequest나 HTTP requset 를 사용하려면 CORS 에러 방지를 위해 Access-Control-Allow-Origin: *와 같은 정책 등록이 필요하다.

Data Blending

• 빌더패널에서 다음과 같은 기능 사용이 불가

  • 컬러 선택

  • 차트 애드온

  • 차트 속성

  • 디멘전 이름 변경 및 예약되지 않은 데이터

  • 차원 입력 컨트롤

  • 계수 입력 컨트롤, 계정 입력 컨드롤

  • (BW Model) 하이라키 레벨 선택

  • 하이라키의 하위 노드만 보이기

  • API 미동작
    getDataSource().getComments, getDataSource().load, getDataSource().getDataExplorer, getDataSource().getDataSelections.

  • 유니버셜 계정 모델은 지원 불가

  • 커스텀 위젯의 데이터 블렌딩은 view modedㅔ서만 가능

  • 필터라인은 적용 불가

  • 커스텀 위젯은 인풋 컨트롤로 인한 변경이 편집모드에서는 조회 불가.

Hosting

호스팅 관점에서의 커스텀 위젯은 두개의 타입의 파일들로 이루어져 있다. JSON파일과 리소스 파일이다.

커스텀 위젯의 JSON파일은 커스텀 위젯의 Metadata를 갖고있다.
URL을 통해서 리소스 파일의 참조를 정의한다.

리소스 파일은 커스텀 위젯이 동작하도록 하는 파일이다. Javascript, CSS, HTML, 이미지 드잉 포함 될 수 있다.

리소스 파일을 웹서버나 SAC에 업로드 할 수있다.

• HTTPS를 지원하는 HTTP 웹서버
  : 웹서버는 리소스 파일들의 저장소로 동작한다. 리소스 팡리은 정적이고 웹서버에서 처리나 실행되지는 않는다. JSON파일이 URL을 통해 웹 리소스 파일을 호출한다.
  커스텀 위젯이 웹 브라우저이 렌더링 될 때, 커스텀 위젯 프레임워크는 JSON에 있는 URL을 통해 리소스 파일을 참조한다. 브라우저는 리소스 파일을 웹서버에 요청한다.
  커스텀 위젯 프레임워크는 권한이나 인가 기능을 제공하지 않는다.
  웹서버는 퍼블릭, 프라이빗 모두 가능하며 SAC쪽에서 URL로 접근이 가능해야 한다.
  아파치 웹서버나 node.js 서버 등 웹서버들을 활용 가능하다.
  SAC는 웹서버와 연결하지 않는다. SAC는 웹서버에 요청만 한다.
• SAP Analytics Cloud에 업로드
  : SAC에 업로드 하기 위해서는 JSON파일의 URL이 아래와 같이 슬래시로 시작하도록 작성하면 된다.

"webcomponents": [
 {
 "kind": "main",
 "tag": "com-sap-sample-coloredbox",
 "url": "/coloredbox_main.js",
 "integrity": "",
 "ignoreIntegrity": true
 },
 {
 "kind": "styling",
 "tag": "com-sap-sample-coloredbox-styling",
 "url": "/coloredbox_styling.js",
 "integrity": "",
 "ignoreIntegrity": true
 },
 {
 "kind": "builder",
 "tag": "com-sap-sample-coloredbox-builder",
 "url": "/coloredbox_builder.js",
 "integrity": "",
 "ignoreIntegrity": true
 }
 ],

: 그 다음, 리소스 파일을 ZIP파일로 압축하여 JSON과 ZIP파일을 모두 업로드 한다.

주의

• 커스텀 위젯 권한이 있어야 업로드 가능
• 리소스 파일의 확장자는 무조건 .zip이어야 한다.
• zip파일의 크기는 5mb가 넘지 않아야 한다.
• zip파일은 리소스 파일에만 지원된다.(웹 컴포넌트 JS, 스타일링 패널, 빌더 패널, CSS,HTML, icon은 미지원)
• zip파일 내부의 서브 경로는 미지원
• 각 테넌트별로 25개의 커스텀 위젯을 업로드 할 수 있음.