Yellowfinのバージョン9.7からNLQの機能を埋め込むことが可能に
Yellowfin9.7から自然言語クエリを使用してグラフを作成できるようになりました。
この機能自体も新しいのですが、これをそのままHTMLやその他のコンテンツにJavascriptを使用して埋め込むことも可能になりました。この機能を使用するためには、使用するビューを設定し、中の数字の良し悪しなどの設定など細かい設定が必要ですが、一旦設定してしまえ文章を作成するだけでチャートや検索の結果が導き出せるため、あまりシステムに詳しくない方にも使いやすいと思います。
簡単なサンプルコード
他のサンプルと似たような形で埋め込むことができます。他のサンプルは過去の記事を確認して頂くとして、基本的にはwiki通り、yellowfin.loadNLQ()で宣言することで埋め込みを可能にします。その他のオプションは下記のとおりです。
* element:HTML上の埋め込みたい場所を指定する。
* contentIntegration:オブジェクトでcontrols: [‘SAVE’, ‘ADD_TO’]を渡すことで保存ボタンとストーリー、ダッシュボード、プレゼンテーションに追加するボタンを表示させます。
* showWelcome:welcome画面を表示させるかどうか。ALWAYS、NEVER、NORMALが指定可です。
* popup:popupがtrueに設定されている場合、elementオプションの値に関わらず、NLQ UIはライトボックスに表示されます。elementオプションが設定されている場合でも、それは無視されます。
popupがfalseに設定されていて、elementオプションがnullではない場合、NLQ UIはライトボックスに表示されません。
popupがfalseに設定されていて、elementオプションがnullの場合、NLQ UIはライトボックスに表示されます。
* viewUUID:ユーザーが利用できるガイド付きNLQ有効のビューのUUIDです。このStringが渡され、そのビューがユーザーにとって有効な場合、ユーザーがビューを選択する画面はスキップされます。渡されたUUIDが、そのユーザーがアクセス可能なビューと一致しない場合は、ビューを選択する画面が表示されます。
あとはaddEventListnerで各イベントをトリガーとして取得処理できますが、ここでは使用していません。
以下の例はポップアップではなく、divのid=dashboardにNLQのUIを埋め込んでいます。
<html>
<body>
<meta charset="utf-8" />
<p><font size="3" color = "blue">NLQの埋め込み</font></p>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div id="dashboard" style='width:1000px;height:800px'></div>
<script>
var authUserId = 'admin@yellowfin.com.au';
var authUserPass = 'dammy';
var adminId = 'admin@yellowfin.com.au';
var adminPassword = 'test';
var body = {
signOnUser: {
userName: authUserId,
password: authUserPass
},
noPassword: true,
adminUser: {
userName: adminId,
password: adminPassword
}
};
//encode to JSON
var json_text = JSON.stringify(body);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:8940/api/rpc/login-tokens/create-sso-token');
xhr.responseType = 'json';
xhr.setRequestHeader('Authorization', 'YELLOWFIN ts=' + new Date().getTime() + ', nonce=123');
xhr.setRequestHeader('Accept', 'application/vnd.yellowfin.api-v1.2+json');
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.onload = () => {
var securityToken = xhr.response.securityToken;
let url = 'http://localhost:8940/JsAPI/v3?token=' + securityToken + '&clientOrg=Default';
let tp = 'text/javascript';
let sc = document.createElement('script');
sc.src = url;
sc.type = tp;
document.body.appendChild(sc);
setTimeout(function () {
yellowfin.showLoginPrompt = false;
yellowfin.init().then(() => {
yellowfin.loadNLQ({
showWelcome: 'ALWAYS',
viewUUID: '571493b1-1945-4a49-abe2-86df376f51e9',
element: document.querySelector('div#dashboard'),
//popup: 'true',
contentIntegrationOptions: {
controls: ['SAVE', 'ADD_TO']
}
});
});
}, 1000);
};
xhr.send(json_text);
</script>
</body>
</html>
終わりに
これまでの埋め込みサンプルに近い形で実装できることから割と簡単に埋め込むことができました。
基本的にはこの機能はボタンを押したらポップアップが起動するようにしてNLQを使うように設計されているのかなと思います。ボタンや要素のクリックイベントに仕込むのが一番かもしれないですね。