<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic Re: A simple widget, using standard &amp;lt;select&amp;gt; in Integration, Extension &amp; APIs</title>
    <link>https://community.qlik.com/t5/Integration-Extension-APIs/A-simple-widget-using-standard-lt-select-gt/m-p/1281030#M7045</link>
    <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;Hi Vegard,&lt;/P&gt;&lt;P&gt;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:&lt;/P&gt;&lt;P&gt;data = &lt;SPAN style="color: #3d3d3d; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13.3333px;"&gt;data.rows[this.value].dimensions[0].select()&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #3d3d3d; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13.3333px;"&gt;Which means that you will lose your original 'data' model.&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;Try assigning the ng-model to a new variable with ngInit. Something like (didn't tried it though):&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #3d3d3d; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px;"&gt;&amp;lt;select ng-init="selectedValue = ''" ng-model="selectedValue" &lt;/SPAN&gt;&lt;SPAN style="font-size: 10pt; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: #3d3d3d;"&gt;ng-change="data.rows[this.value].dimensions[0].select()"&lt;/SPAN&gt;&lt;SPAN style="color: #3d3d3d; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px;"&gt;&amp;nbsp; &amp;gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P style="font-size: 13px; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: #3d3d3d;"&gt;&amp;lt;option selected value="" &amp;gt;--Please make a selection--&amp;lt;/option&amp;gt;&lt;/P&gt;&lt;P style="font-size: 13px; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: #3d3d3d;"&gt;&amp;nbsp; &amp;lt;option ng-repeat="row in data.rows"&lt;/P&gt;&lt;P style="font-size: 13px; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: #3d3d3d;"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; value="{{selectedValue}}"&lt;/P&gt;&lt;P style="font-size: 13px; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: #3d3d3d;"&gt;&amp;nbsp; &amp;gt;{{row.dimensions[0].qText}}&amp;lt;/option&amp;gt;&lt;/P&gt;&lt;P style="font-size: 13px; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: #3d3d3d;"&gt;&amp;lt;/select&amp;gt;&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
    <pubDate>Wed, 01 Mar 2017 08:39:32 GMT</pubDate>
    <dc:creator />
    <dc:date>2017-03-01T08:39:32Z</dc:date>
    <item>
      <title>A simple widget, using standard &lt;select&gt;</title>
      <link>https://community.qlik.com/t5/Integration-Extension-APIs/A-simple-widget-using-standard-lt-select-gt/m-p/1281029#M7044</link>
      <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;Hi all,&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;I'm trying to make a simple widget, displaying the values of a dimension in a &amp;lt;select&amp;gt; element.&lt;/P&gt;&lt;P&gt;Simple enough, but naturally I'd like to make the selection pass the selection to Qlik Sense.&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;I've tried various variants.&amp;nbsp; Here is one:&lt;/P&gt;&lt;P&gt;&amp;lt;select &lt;SPAN style="font-size: 10pt;"&gt;ng-change="data.rows[this.value].dimensions[0].select()"&lt;/SPAN&gt;&amp;nbsp; &amp;gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp; &amp;lt;option selected value="" &amp;gt;--Please make a selection--&amp;lt;/option&amp;gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp; &amp;lt;option ng-repeat="row in data.rows" &lt;/P&gt;&lt;P&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; value="{{$index}}"&lt;/P&gt;&lt;P&gt;&amp;nbsp; &amp;gt;{{row.dimensions[0].qText}}&amp;lt;/option&amp;gt;&lt;/P&gt;&lt;P&gt;&amp;lt;/select&amp;gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;Angular says that I have to use ngModel. But using ng-model="data", the dropdownlist turns empty as soon as I select something.&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;Can anyone spot the flaw?&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;Cheers,&lt;/P&gt;&lt;P&gt;Vegard&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
      <pubDate>Tue, 28 Feb 2017 16:00:34 GMT</pubDate>
      <guid>https://community.qlik.com/t5/Integration-Extension-APIs/A-simple-widget-using-standard-lt-select-gt/m-p/1281029#M7044</guid>
      <dc:creator>vegard_bakke</dc:creator>
      <dc:date>2017-02-28T16:00:34Z</dc:date>
    </item>
    <item>
      <title>Re: A simple widget, using standard &lt;select&gt;</title>
      <link>https://community.qlik.com/t5/Integration-Extension-APIs/A-simple-widget-using-standard-lt-select-gt/m-p/1281030#M7045</link>
      <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;Hi Vegard,&lt;/P&gt;&lt;P&gt;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:&lt;/P&gt;&lt;P&gt;data = &lt;SPAN style="color: #3d3d3d; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13.3333px;"&gt;data.rows[this.value].dimensions[0].select()&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #3d3d3d; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13.3333px;"&gt;Which means that you will lose your original 'data' model.&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;Try assigning the ng-model to a new variable with ngInit. Something like (didn't tried it though):&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #3d3d3d; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px;"&gt;&amp;lt;select ng-init="selectedValue = ''" ng-model="selectedValue" &lt;/SPAN&gt;&lt;SPAN style="font-size: 10pt; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: #3d3d3d;"&gt;ng-change="data.rows[this.value].dimensions[0].select()"&lt;/SPAN&gt;&lt;SPAN style="color: #3d3d3d; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px;"&gt;&amp;nbsp; &amp;gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P style="font-size: 13px; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: #3d3d3d;"&gt;&amp;lt;option selected value="" &amp;gt;--Please make a selection--&amp;lt;/option&amp;gt;&lt;/P&gt;&lt;P style="font-size: 13px; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: #3d3d3d;"&gt;&amp;nbsp; &amp;lt;option ng-repeat="row in data.rows"&lt;/P&gt;&lt;P style="font-size: 13px; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: #3d3d3d;"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; value="{{selectedValue}}"&lt;/P&gt;&lt;P style="font-size: 13px; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: #3d3d3d;"&gt;&amp;nbsp; &amp;gt;{{row.dimensions[0].qText}}&amp;lt;/option&amp;gt;&lt;/P&gt;&lt;P style="font-size: 13px; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: #3d3d3d;"&gt;&amp;lt;/select&amp;gt;&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
      <pubDate>Wed, 01 Mar 2017 08:39:32 GMT</pubDate>
      <guid>https://community.qlik.com/t5/Integration-Extension-APIs/A-simple-widget-using-standard-lt-select-gt/m-p/1281030#M7045</guid>
      <dc:creator />
      <dc:date>2017-03-01T08:39:32Z</dc:date>
    </item>
    <item>
      <title>Re: A simple widget, using standard &lt;select&gt;</title>
      <link>https://community.qlik.com/t5/Integration-Extension-APIs/A-simple-widget-using-standard-lt-select-gt/m-p/1281031#M7046</link>
      <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;Using ng-init and ng-model did indeed remove the error message:&lt;/P&gt;&lt;P&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; Error: [$compile:ctreq] Controller 'ngModel', required by directive 'ngChange', can't be found!&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;However, the ng-change event never fires. I tried a few methods:&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="font-size: 10pt;"&gt;&amp;lt;select &lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp; ng-init="selectedValue = ''"&lt;/P&gt;&lt;P&gt;&amp;nbsp; ng-model="selectedValue"&lt;/P&gt;&lt;P&gt;&amp;nbsp; ng-change="console.log('ng-change', this.value); data.rows[this.value].dimensions[0].select()"&lt;/P&gt;&lt;P&gt;&amp;nbsp; qva-activate="console.log('qva-activate', this.value); data.rows[this.value].dimensions[0].select()"&lt;/P&gt;&lt;P&gt;&amp;nbsp; click="console.log('click', this.value); data.rows[this.value].dimensions[0].select()"&lt;/P&gt;&lt;P&gt;&amp;nbsp; onclick="console.log('onclick', this.value); data.rows[this.value].dimensions[0].select()"&lt;/P&gt;&lt;P&gt;&lt;SPAN style="font-size: 10pt;"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp; &amp;lt;option selected="" value=""&amp;gt;--Please make a selection--&amp;lt;/option&amp;gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp; &amp;lt;option&lt;/P&gt;&lt;P&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; ng-repeat="row in data.rows"&lt;/P&gt;&lt;P&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; value="{{$index}}"&lt;/P&gt;&lt;P&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; data-dim="row"&lt;/P&gt;&lt;P&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;gt;{{row.dimensions[0].qText}}&amp;lt;/option&amp;gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&amp;lt;/select&amp;gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;I got a response from the 'onclick' event:&lt;/P&gt;&lt;P&gt;&amp;nbsp;&amp;nbsp; onclick 3&lt;/P&gt;&lt;P&gt;But it is followed by:&lt;/P&gt;&lt;P&gt;&amp;nbsp;&amp;nbsp; Uncaught ReferenceError: data is not defined &lt;SPAN style="font-size: 10pt;"&gt;at HTMLSelectElement.onclick (analysis:1)&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="font-size: 10pt;"&gt;&lt;BR /&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="font-size: 10pt;"&gt;And I totally agree with the error message. I just don't understand how to get it in scope... ;-/&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="font-size: 10pt;"&gt;&lt;BR /&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
      <pubDate>Thu, 02 Mar 2017 15:15:04 GMT</pubDate>
      <guid>https://community.qlik.com/t5/Integration-Extension-APIs/A-simple-widget-using-standard-lt-select-gt/m-p/1281031#M7046</guid>
      <dc:creator>vegard_bakke</dc:creator>
      <dc:date>2017-03-02T15:15:04Z</dc:date>
    </item>
  </channel>
</rss>

