Mashup APIs - add button to set variable using setContent Method

[pnowicki]

All,

I have a qlik sense mashup html which is up and running.  I want to be able to change variables I have in my script through a web interface.  Ideallly, I want to create an input box and button into my mashup which will update a variable in qlik sense.  I've seen code examples in existing mashups on using the setContent Method, but not quite sure how to have that interact with an input box and button combination.  Does anyone have an example of this already working? 

[Francis_Kabinoff · Accepted solution]

The setContent() method was deprecated with Qlik Sense 2.1, you may want to use the setStringValue() method instead.

A super simple example with jQuery, which is loaded with the mashup api, might look something like

HTML

<input id="input-val">

<button id="submit-button">

  Submit

</button>

JS

$("#submit-button").click(function() {

  app.variable.setStringValue("MYVAR", $("#input-val").val());

});

where "MYVAR" is the name of your qlik sense variable

[pnowicki]

Ok, this is helpful but not able to get it to work.  It all seems very straight forward but when I click the submit button nothing seems to happen.  I've tried both setStringValue and setContent. 

I have an object that just displays the variable value and I'll know it is working when the submit button takes the value from the input box and updates the variable value in that object. 

What else could be missing? 

in my HTML:

<input id="input-val">

  <button id="submit-button">

  Submit

  </button>

in my JS file:

$(function() {

  $("#submit-button").click(function() {

  app.variable.setContent("wToday", $("#input-val").val());

  });

});

[pnowicki]

Ok, I figured out what I was doing wrong.  In my JS file, I needed to have this in the same section as my app.getObject calls are made, before I included this in a separate function section which didn't work since it couldn't recognize the app.  I was able to troubleshoot using the inspect feature of google chrome, which really helped debug it.  Thanks Francis for your help!

$('#submit-button').on('click', function() {

  var app = qlik.openApp('App_ID', config);

  app.variable.setContent('wToday', $("#input-val").val());

  });

[Francis_Kabinoff]

Awesome! I was just writing a reply with some instructions on checking this out in the dev tools, but seems you found your way, nice!  Yep, any reference to 'app' will have to be in the same "scope" where 'app' is defined.