Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

Announcements
Qlik® Product Spotlight: Discover what’s possible. Get more from our products.
See for yourself. Register today.
yblake
Contributor II

How to catch "clear selections" event ?

Extensions receive a paint event when user quit selection mode (by clicking on the red cross or green validation icons).

But is there any event fired when user just clear current selections by clicking on the dashed rectangle with gray cross icon (the icon highlighted in yellow/red circle in the following picture) ?

unselect.png

Is there any way to hide this icon (and lasso one) ?

Thanks in advance for help.

1 Solution

Accepted Solutions
yblake
Contributor II

Re: How to catch "clear selections" event ?

After selecting a value thru selectValues API, a clear function is defined that calls clearSelectedValues. It seems possible to override this default clear function :

In the paint function, get angular scope :

var scope = angular.element($element).scope();

Then after call to selectValues API, override default clear function definition :

scope.selectionsApi.clear = function () {console.log('clear');};

Clicking the clear selections icon will then log 'clear' to the console. A custom clear function may handle clearSelections() thru backendApi and custom user visual feedback.

6 Replies
Not applicable

Re: How to catch "clear selections" event ?

Hi,

The default-view has this funtion firing when the selections are cleared

clearSelectedValues: function(a) {

  a.find(".selected").removeClass("selected")

  },

I modified a version of getSelectionToolbar function to hide the lasso and clearSelections buttons.

getSelectionToolbar: function() {

            var a, b = this,

                c = this.$scope,

                d = this.backendApi;

            return  a = {

                backendApi: d,

                selectionsApi: c.selectionsApi,

                showMenu: !1,

                showLock: !1,

                hasState: function(a) {

                    if (!a) return !0;

                    for (var b = d.getDimensionInfos(), c = 0; c < b.length; ++c)

                        for (var e = 0; e < a.length; ++e)

                            if (b.qStateCounts[a] > 0) return !0;

                    return !1

                },

                buttons: [ {

                    name: "Tooltip.CancelSelections",

                    tid: "selection-toolbar.undo",

                    isIcon: !1,

                    iconClass: "icon-cancel",

                    buttonClass: "sel-toolbar-cancel",

                    action: function() {

                        c.selectionsApi.cancel()

                    }

                }, {

                    name: "Tooltip.ConfirmSelections",

                    tid: "selection-toolbar.refresh",

                    iconClass: "icon-tick",

                    buttonClass: "sel-toolbar-confirm",

                    action: function() {

                        c.selectionsApi.confirm()

                    },

                    isDisabled: function() {

                        return !c.selectionsApi.selectionsMade

                    }

                }],

                menuButtons: []

            }

        },

Hope this helps

//Karl

yblake
Contributor II

Re: How to catch "clear selections" event ?

Seems there are a bunch of functions like "toggleLasso" or "isLassoing" that could help improving extension interface...

But what is the correct way to "override" default-view functions ?  I tried to add the clearSelectedValues function in an extension, but nothing happened...

Not applicable

Re: How to catch "clear selections" event ?

I'm no expert, considering I only programmed with Javascript for 1 month, but I got it working. My approach is alot of trial and error and I have no clue of the correct way of things.

Have you tried my snippet above with a console.log to see if it's triggered?

yblake
Contributor II

Re: How to catch "clear selections" event ?

The basic answer seems to use "selectable" and "selected" class for elements, as proposed by chart extension template. Theses classes default to css styles :

.qv-selections-active .selectable-group *,

.qv-selections-active .selectable {

  opacity: 0.3;

}

.qv-selections-active .selected,

.qv-selections-active .selected * {

  opacity: 1;

  stroke-width: 1;

  stroke: #666;

}

The extension should styles all selectable elements with "selectable" class, and is responsible for toggling dynamically selected elements "selected" class.

Note that the selections API changes Article element (which embed extension object container div) class to "qv-selections-active" when users start selecting some values.

The default view clearSelectedValues function just does the job, simply by removing all active "selected" selectors.

It's possible to override default styles, i.e :

.qv-object-<extension name> div .selectable {

  color: green;

}

.qv-object-<extension name> div .selected {

  color: blue;

}

yblake
Contributor II

Re: How to catch "clear selections" event ?

After selecting a value thru selectValues API, a clear function is defined that calls clearSelectedValues. It seems possible to override this default clear function :

In the paint function, get angular scope :

var scope = angular.element($element).scope();

Then after call to selectValues API, override default clear function definition :

scope.selectionsApi.clear = function () {console.log('clear');};

Clicking the clear selections icon will then log 'clear' to the console. A custom clear function may handle clearSelections() thru backendApi and custom user visual feedback.

maxim1500
Contributor

Re: How to catch "clear selections" event ?

Hi,

I tried both solutions for my extension, and it does not appear to work. Selection works with the ".selected" class, the other elements are rendered at 30% alpha. But the clear button won't remove the class. Selection is kept even after the selection is applied. Also, I tried to override the clear method, and it is never called. Maybe something changed with the apis since 2014?

Thanks!