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.
vegard_bakke
Not applicable

A simple widget, using standard <select>

Hi all,

I'm trying to make a simple widget, displaying the values of a dimension in a <select> element.

Simple enough, but naturally I'd like to make the selection pass the selection to Qlik Sense.

I've tried various variants.  Here is one:

<select ng-change="data.rows[this.value].dimensions[0].select()"  >

  <option selected value="" >--Please make a selection--</option>

  <option ng-repeat="row in data.rows"

     value="{{$index}}"

  >{{row.dimensions[0].qText}}</option>

</select>

Angular says that I have to use ngModel. But using ng-model="data", the dropdownlist turns empty as soon as I select something.

Can anyone spot the flaw?

Cheers,

Vegard

2 Replies
Not applicable

Re: A simple widget, using standard <select>

Hi Vegard,

That's right, ng-change requires an ng-model to be bound with. But if you set ng-model="data", this means that when you select a value in your dropdown list, the ng-change event will be fired and it will try to override 'data' like this:

data = data.rows[this.value].dimensions[0].select()

Which means that you will lose your original 'data' model.

Try assigning the ng-model to a new variable with ngInit. Something like (didn't tried it though):

<select ng-init="selectedValue = ''" ng-model="selectedValue" ng-change="data.rows[this.value].dimensions[0].select()"  >

<option selected value="" >--Please make a selection--</option>

  <option ng-repeat="row in data.rows"

     value="{{selectedValue}}"

  >{{row.dimensions[0].qText}}</option>

</select>

vegard_bakke
Not applicable

Re: A simple widget, using standard <select>

Using ng-init and ng-model did indeed remove the error message:

      Error: [$compile:ctreq] Controller 'ngModel', required by directive 'ngChange', can't be found!

However, the ng-change event never fires. I tried a few methods:

<select

  ng-init="selectedValue = ''"

  ng-model="selectedValue"

  ng-change="console.log('ng-change', this.value); data.rows[this.value].dimensions[0].select()"

  qva-activate="console.log('qva-activate', this.value); data.rows[this.value].dimensions[0].select()"

  click="console.log('click', this.value); data.rows[this.value].dimensions[0].select()"

  onclick="console.log('onclick', this.value); data.rows[this.value].dimensions[0].select()"

>

  <option selected="" value="">--Please make a selection--</option>

  <option

      ng-repeat="row in data.rows"

      value="{{$index}}"

      data-dim="row"

      >{{row.dimensions[0].qText}}</option>

</select>

I got a response from the 'onclick' event:

   onclick 3

But it is followed by:

   Uncaught ReferenceError: data is not defined at HTMLSelectElement.onclick (analysis:1)


And I totally agree with the error message. I just don't understand how to get it in scope... ;-/