Page History
...
Yellowfin サーバーは、サードパーティ製アプリケーションとして扱われるため、認証に問題が生じることがあります。そのため、サイト上のサードパーティ製Cookieを拒否するブラウザ (IncognitoモードのSafariおよびChrome) は、Yellowfin JS APIを拒否します。さらに、「Same Site」フラグに関するセキュリティの変更により、必要なすべてのCookieを受け入れるようにwebサーバーを構成することが困難になりました。
外部JSAPIのみが、下記の機能を提供します。
- logoff()
- newSession()
- init()
内部JSAPIは、Yellowfinのページが読み込まれたときに完全に読み込みがされるため、init()を必要としません。
...
Yellowfinアプリケーションでページを読み込むと、JsAPI オブジェクトがページのウィンドウオブジェクトに追加されます。開発者はカスタムヘッダー、コードモード、またはJavaScriptをグラフを利用してアクセスできます。
...
レポートの読み込み
レポートの読み込みオプションは、高度な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
}; |
| horizontalrule |
|---|
| Styleclass | ||
|---|---|---|
| ||
...