Qlik Senseでエクステンション開発解説：リセットボタン＜第三回: リセット機能の実装＞

作成者: hiro｜2020年6月17日

こんにちは。hiroです。

今回でリセットボタンを完成させていきます。

下準備
ボタン表示の実装
リセット機能の実装　(今回)

アクションの設定方法

これからリセット機能を追加していきますが、そのためには その機能がボタンがクリックされたときにのみ動作するように設定する必要があります。

JavaScriptとHTMLの組み合わせでこれを実現するわけですが、その方法として次の二つが考えられます。

HTML側でbuttonタグにon-click属性を設定する。
JavaScript側でイベントリスナーを設定する。

なのですが、エクステンションを1.の方法で実装すると そもそも動きません。

原因は不明ですが、srcタグで直接書き込んでも動かないためHTML側で実装するのは難しいでしょう。

そのため、エクステンションでアクションの設定する際には2.のようにJavaScript側で実装していくことになります。

イベントリスナーでのアクションの設定

それでは早速、イベントリスナーを使ってボタンにアクションを設定していきます。流れとしては次のようになります。

HTMLのボタンをJavaScriptで取得
JavaScriptでイベントリスナーを設定
イベントリスナーに処理を記述

HTML要素の取得

まずJavaScript側でHTMLの要素を取得できるようid属性を設定します。第二回で作成したHTMLを次のように変更し、id属性を設定します。

test1.html

<div qv-extension class="npsod-canvas">
<button id="btn" class="btn-square">Reset</button>
<div id="test">test</div>
</div>

buttonタグの後ろに追加したdivタグは動作確認用のものです。

このようにHTMLの要素にid属性を付与することで、指定したid名を使ってJavaScriptで取得できるようになり、次のようにgetElementById関数の引数に指定したidを入れることで指定したHTML要素を読み込むことができます。

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に、testと書かれたテキストに相当するインスタンスが変数testに格納されました。これらのインスタンスを活用してイベントを設定していきます。

イベントリスナーの設定

取得したHTML要素にイベントリスナーを設定することで、あるイベントが起きた時に特定の処理を実行することができます。JavaScriptではaddEventListenerメソッドを使うことでイベントリスナーを設定します。

今回はボタンに対してイベントリスナーを設定するので、ボタン要素を取得して格納したbtnのaddEventListenerメソッドを実行します。

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);
       }
    };
} );

addEventLisenerメソッドの第一引数でイベントを指定し、第二引数に行う処理を関数の形で記述します。第三引数はイベント伝達の方法を指定するものですが、こちらはfalseにすれば問題ありません。

今回の場合はクリックされたときがトリガーになるので、第一引数に'click'を指定します。

イベント処理の記述

最後に、イベントの処理をaddEventListenerの第二引数に入れた関数の中に記述していきます。今回はイベントリスナーの動作確認だけできれば十分ですので、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(){
                test.textContent = 'piyo!';
            }, false);
        }
    };
} );

testのtextContent属性を変更することで表示される文字列を変更することができます。今回はそれを利用して動作確認を行います。

これでイベントリスナーによるアクションの設定が完了しました。最後に動作確認をし、次のようにボタンをクリックすることで'test'の文字が変われば成功です。

リセット機能の実装

イベントの設定方法を紹介したところで、いよいよ絞り込みのリセット機能をイベントリスナーに実装していきます。

今回行う『絞り込みのリセット』など、QlikSenseに対して行う操作はQlikAPIを介して行います。『データのリロード』や『変数への代入』など、様々なAPIが用意されています。詳細は下のリンク先を参照してください。

ただし、リンクのところに書いてあるようにすべて英語で書かれており日本語版がありませんので、その点についてはご了承ください。

QlikAPI reference(英語)

今回行うリセット処理ではApp APIのclearAllメソッドを使用します。clearAllメソッドではリセットを行うアプリケーションに対してメソッドを実行するので、現在使用しているアプリケーションを取得するqlikモジュールのcurrAppメソッドを組み合わせて次のようにします。

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);
        }
    };
} );

これでリセット機能の追加が完了です。最後に動作確認をし問題なく動けばリセットボタンが完成になります。

完成したJavaScriptのコードを改めて載せておきます。

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と様々な要素を活用することになりますが、このようにすることで新規エクステンションとしてリセットボタンを実装することができます。

完全な記事を表示

Qlik Senseでエクステンション開発解説：リセットボタン ＜第三回: リセット機能の実装＞