Hi there, I'm pretty new to mashups/extensions development and I'm learning starting from tutorials with QSEoW.
I went through a first tutorial without any particular issue, but then I tried to build a session app. I'm able to create the app, set the script, reload and create an object but, for some reasons, I'm not able to show the object in the html page. It actually fill the div with a qv-object, but it 's empty. Here is a simplified version of my code.
var config = {
host: window.location.hostname,
prefix: window.location.pathname.substr( 0, window.location.pathname.toLowerCase().lastIndexOf( "/extensions" ) + 1 ),
port: window.location.port,
isSecure: window.location.protocol === "https:"
};
require.config( {
baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port : "") + config.prefix + "resources"
} );
require( ["js/qlik"], function ( qlik ) {
qlik.on( "error", function ( error ) {
$( '#popupText' ).append( error.message + "<br>" );
$( '#popup' ).fadeIn( 1000 );
} );
$( "#closePopup" ).click( function () {
$( '#popup' ).hide();
} );
var sessionApp = qlik.sessionApp(config);
var script = "Load Chr(RecNo()+Ord('A')-1) as Alpha, RecNo() as Num autogenerate 26;"
sessionApp.setScript(script).then(function(setScriptResult){
sessionApp.doReload().then(function(doReloadResult){
sessionApp.visualization.create('barchart',["Alpha","=Sum([Num])"],{title:"Bar chart on the fly"}).then(function(bar){
console.log(bar.model.id);
bar.show("QV01");
/*bar.exportData({format:'CSV_T', state: 'A'}).then(function (link) {
window.open(link);
});*/
});
})
});
} );
Please note that I'm even able to export a csv file with the table model behind the visualization!
And here is the html file
<!doctype html>
<html>
<head>
<title>First Mashup Example</title>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css">
<script src="../../resources/assets/external/requirejs/require.js"></script>
<script src="FirstMashupExample.js"></script>
<style>
<!--div.flex-container {
display: flex;
flex-wrap: wrap;
margin: 0 45px 45px 0;
}
div.qvobject {
flex: 1 1 auto;
height: 300px;
min-width: 400px;
margin: 45px 0 0 45px;
position: relative
}-->
</style>
</head>
<body>
<div class="flex-container">
<div id="QV01" class="qvobject"></div>
<div id="QV02" class="qvobject"></div>
<div id="QV03" class="qvobject"></div>
<div id="QV04" class="qvobject"></div>
<div id="QV05" class="qvobject"></div>
<div id="QV06" class="qvobject"></div>
</div>
<div id="popup">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closePopup"><span aria-hidden="true">�</span></button>
<p id="popupText"></p>
</div>
</body>
</html>
What happens?
