こんにちは。hiroです。
今回でリセットボタンを完成させていきます。
アクションの設定方法
これからリセット機能を追加していきますが、そのためには その機能がボタンがクリックされたときにのみ動作するように設定する必要があります。
JavaScriptとHTMLの組み合わせでこれを実現するわけですが、その方法として次の二つが考えられます。
- HTML側でbuttonタグにon-click属性を設定する。
- JavaScript側でイベントリスナーを設定する。
なのですが、エクステンションを1.の方法で実装すると そもそも動きません。
原因は不明ですが、srcタグで直接書き込んでも動かないためHTML側で実装するのは難しいでしょう。
そのため、エクステンションでアクションの設定する際には2.のようにJavaScript側で実装していくことになります。
イベントリスナーでのアクションの設定
- HTMLのボタンをJavaScriptで取得
- JavaScriptでイベントリスナーを設定
- イベントリスナーに処理を記述
HTML要素の取得
test1.html
<div qv-extension class="npsod-canvas">
<button id="btn" class="btn-square">Reset</button>
<div id="test">test</div>
</div>
test1.js
define([
......
],
function ( qlik, btn_html, btn_css) {
$("<style>").html(btn_css).appendTo("head");
return {
support : {
....
},
paint: function ($element) {
$element.html(btn_html);
btn = document.getElementById('btn')
test = document.getElementById('test')
}
};
} );
イベントリスナーの設定
test1.js
define( [
......
],
function ( qlik, btn_html, btn_css) {
$("<style>").html(btn_css).appendTo("head");
return {
support : {
....
},
paint: function ($element) {
$element.html(btn_html);
btn = document.getElementById('btn');
test = document.getElementById('test');
btn.addEventListener('click', function(){
}, false);
}
};
} );
イベント処理の記述
test1.js
define( [
......
],
function ( qlik, btn_html, btn_css) {
$("<style>").html(btn_css).appendTo("head");
return {
support : {
....
},
paint: function ($element) {
$element.html(btn_html);
btn = document.getElementById('btn');
test = document.getElementById('test');
btn.addEventListener('click', function(){
test.textContent = 'piyo!';
}, false);
}
};
} );
リセット機能の実装
今回行う『絞り込みのリセット』など、QlikSenseに対して行う操作はQlikAPIを介して行います。『データのリロード』や『変数への代入』など、様々なAPIが用意されています。詳細は下のリンク先を参照してください。
qlik.currApp(this).clearAll();
test1.js
define( [
......
],
function ( qlik, btn_html, btn_css) {
$("<style>").html(btn_css).appendTo("head");
return {
support : {
....
},
paint: function ($element) {
$element.html(btn_html);
btn = document.getElementById('btn');
btn.addEventListener('click', function(){
qlik.currApp(this).clearAll();
}, false);
}
};
} );
test1.js
define( [
"qlik",
"text!./test1.html",
"text!./test1.css"
],
function ( qlik, btn_html, btn_css) {
$("<style>").html(btn_css).appendTo("head");
return {
support : {
snapshot: true,
export: true,
exportData : false
},
paint: function ($element) {
$element.html(btn_html);
btn = document.getElementById('btn');
btn.addEventListener('click', function(){
qlik.currApp(this).clearAll();
}, false);
}
};
} );
まとめ
全3回にわたってエクステンションの開発方法を紹介しましたがいかがでしたか。
QlikSense, JavaScript, HTML, CSSと様々な要素を活用することになりますが、このようにすることで新規エクステンションとしてリセットボタンを実装することができます。
