Page History
...
Styleclass | ||
---|---|---|
| ||
これは何を意味するのか?
「内部JS API」という用語を使用する場合、これは以下により使用されるツールを指します。
- Web アプリケーション機能を構築するYellowfin 開発チーム
- Yellowfin コードモードまたはカスタムヘッダーを使用する外部の開発者
「外部JS API」は、開発者が外部ページにYellowfin コンテンツを埋め込むために使用するツールを指します。
このように、Yellowfin JS APIは事実上2つあります。
外部JS APIは、Yellowfinのコンテンツを外部ページに埋め込む開発者向けに提供されています。外部JS APIについての詳細は、外部wikiにて提供しています。
内部JS APIは、Yellowfin 開発チームによって使用されています。外部の開発者は、Yellowfin コードモードまたはカスタムヘッダーを介してコードにアクセスするときに、知らないうちにこのバージョンのJS APIを使用しています。
各JS APIの詳細については、以下に示します。
外部JS API
JS APIを外部で使用する場合、Yellowfin ロード APIとコンテンツ APIのすべてにアクセスできます。つまり、コンテンツのUUIDを提供すれば、任意のコンテンツをロードできます。
API」とは、Yellowfinにログインした開発者が、Yellowfinのコードモード、カスタムヘッダー、JavaScriptを使って使用するツールを指します。
「外部JS API」とは、開発者がYellowfinのコンテンツを外部のページに組み込む際に使用するツールを指します。Yellowfin 9.7以前では、2つのAPIが異なるツールセットを提供していましたが、Yellowfin 9.7以降では、YellowfinにログインしたユーザーがほとんどのAPIの機能の利用ができます。
両方のJS APIも、Yellowfin Loading APIとコンテンツAPIのすべてにアクセスできるので、コンテンツのUUIDがわかれば、どんなコンテンツでも読み込むことができます。
ほとんどの場合、レポートまたはダッシュボードのリストサービスは、Yellowfin web サービスを使用してYellowfin コンテンツオブジェクトを取得し、それらのオブジェクトから提供されるUUIDを使用してJS APIにオブジェクトをロードすることで作成できます。これにより、Yellowfin レポート、ダッシュボードおよびストーリーを使用しながら、完全にカスタマイズされたUIを構築できるため、コンテンツ構築は開発者以外でも実現できます。レポート、ダッシュボード、ストーリー、ガイド付きNLQを使用しながら、完全にカスタマイズされたUIを構築できるため、コンテンツ構築は開発者以外でも実現できます。
考慮点
Yellowfin サーバーは、サードパーティ製アプリケーションとして扱われるため、認証に問題が生じることがあります。そのため、サイト上のサードパーティ製Cookieを拒否するブラウザ (IncognitoモードのSafariおよびChrome) は、Yellowfin JS APIを拒否します。さらに、「Same Site」フラグに関するセキュリティの変更により、必要なすべてのCookieを受け入れるようにwebサーバーを構成することが困難になりました。
もうひとつの問題は、機能の動作方法の違いです。以下の表は、動作が異なる機能、または外部JS APIでまだ有効になっていない機能の一覧を示します。
...
シグナルウィジェットを埋め込むことはできますが、含まれるリンクは機能しません。
...
外部JSAPIのみが、下記の機能を提供します。
- logoff()
- newSession()
- init()
内部JSAPIは、Yellowfinのページが読み込まれたときに完全に読み込みがされるため、init()を必要としません。
内部のJS APIにアクセスするには?
Yellowfinアプリケーションでページを読み込むと、JsAPI オブジェクトがページのウィンドウオブジェクトに追加されます。開発者はカスタムヘッダー、コードモード、またはJavaScriptをグラフを利用してアクセスできます。
例えば、
Code Block | ||
---|---|---|
| ||
window.JsAPI
//Or Simply
JsAPI |
これを利用して、他のコンテンツを読み込むことができます
レポートの読み込み
レポートの読み込みオプションは、高度なAPI wikiページにあります。
Code Block | ||
---|---|---|
| ||
JsAPI.loadReport({
reportUUID: 'the-uuid-to-load',
element: document.querySelector('#myInternalReport')
}); |
ダッシュボードの読み込み
ダッシュボードの読み込みオプションは、高度なAPI wikiページにあります。
Code Block | ||
---|---|---|
| ||
JsAPI.loadDashboard({
dashboardUUID: 'dashboard-uuid-to-load',
element: document.querySelector('#myInternalDashboard')
}); |
ストーリーの読み込み
ストーリーの読み込みオプションは、高度なAPI wikiページにあります。
Code Block | ||
---|---|---|
| ||
ガイド付きNLQの読み込み
ガイド付きNLQの読み込みオプションは、高度なAPI wikiページにあります。
Code Block | ||
---|---|---|
| ||
JsAPI.loadNLQ(); |
または
Code Block |
---|
JsAPI.loadNLQ({
element: document.querySelector('#myNLQContainer')
}); |
Styleclass | ||
---|---|---|
| ||
...
例
例1:スライドアウト式ダッシュボード
下記は、ダッシュボード上でボタンがクリックされたときに、ダッシュボードを読み込む例です。
HTML
Code Block | ||
---|---|---|
| ||
<canvas-area xmlns="http://www.w3.org/1999/xhtml" canvas-uuid="e3db80a5-5f8f-4ae9-887d-f26ed1fecc2d">
<text-title publish-uuid="906b4057-e4c6-4913-8624-84c2f6596c26" width="959" height="141" left="25" top="9" line-spacing="normal" character-spacing="0" rotation="0" name="Title" on-click="none" style="z-index: 2;"><div>Example Dashboard that demonstrates opening the Sales Performance Dashboard in a slide out</div></text-title>
<canvas-button publish-uuid="9c97e800-3dbb-477a-9cc4-398194ab6888" width="222" height="102" top="150" left="35" plugin-name="com.hof.mi.widgetcanvas.widgettemplate.CodeButtonTemplate" text-color="#333740" name="DashboardButton" on-click="none" style="background-color: rgb(219, 221, 229); border-radius: 0px; border: 2px solid rgb(219, 221, 229); z-index: 2; opacity: 1.0;"></canvas-button>
</canvas-area> |
CSS
Code Block | ||
---|---|---|
| ||
* div.embeddedDashboard {
width:600px;
height:100%;
position:fixed;
top:0;
right:0;
overflow:auto;
background:white;
padding-top:50px;
z-index:100;
}
* div.embeddedDashboard div.closeIcon {
position:absolute;
right:0;
top:0;
width:50px;
height:50px;
z-index:10000;
background-image: url('images/close_popup_grey.svg');
background-repeat: no-repeat;
background-position: center;
cursor:pointer;
} |
JavaScript
Code Block | ||
---|---|---|
| ||
let canvas = this.apis.canvas;
//In this example the dashboard is Sales Performance, this can be changed to whatever dashboard is required.
let Dashboard_To_Load = 'e7409ff2-f846-44e1-a603-b78ec51b20b9';
this.onRender = function () {
//Get the Canvas Button from the Page.
let button = canvas.select('DashboardButton');
//Add an event listener so when it is clicked, we can display the Dashboard_To_Load
$(button).on('click', () => {
//Create a Dashboard Element
let $dash = $('<div/>').addClass('embeddedDashboard');
let $closeIcon = $('<div/>').addClass('closeIcon');
$dash.append($closeIcon);
$closeIcon.on('click.closeDashboard', function() {
$dash.remove();
$closeIcon.off('closeDashboard');
});
$('body').append($dash);
JsAPI.loadDashboard({
element: $dash[0],
dashboardUUID: Dashboard_To_Load
});
});
};
/**
* Called when the canvas and all its child elements are removed from the page.
*/
this.onRemove = function () {
// Insert your code here. This is an ideal place for removing event listeners
}; |
内部JS API
現在Yellowfin JS APIは、外部JS API内に存在するロード APIにアクセスすることはできません。つまり、コンテンツをロードするには、Yellowfin アクションを使用する必要があります。これは外部の開発者は、レポートやその他のコンテンツの表示方法をあまり制御できないということです。まずは、Yellowfinによりロードし、(そして、ほとんどの場合) レンダリングをしなくてはいけません。
すべてのYellowfin コンテンツとその個々の機能は、コンテンツ APIと内部でレンダリングされるコンテンツで使用できます。そのため、Yellowfinでは一般的に、まず内部で機能を構築してから、外部で動作させるようにしています。
考慮点
コンテンツ APIは、コードモードを介してのみ使用することができます。これらにロード APIはありません。
...
horizontalrule |
---|
Styleclass | ||
---|---|---|
| ||
...