Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
Hi,
I'm new to mashup and currently following this tutorial
However, when I add the cleanup(); function in the page1 and page2 function, i will have an empty dashboard as below
Hi Hann,
You have a typo
u start with
var model = [];
notice u used model without an S at the end
buy then u push to :
models.push(model)}
notice now u typed modelS
so u need to fix the first declaration to:
var models = [];
here is my js script
/*
* Bootstrap-based responsive mashup
* @owner Enter you name here (xxx)
*/
/*
* Fill in host and port for Qlik engine
*/
var prefix = window.location.pathname.substr( 0, window.location.pathname.toLowerCase().lastIndexOf( "/extensions" ) + 1 );
var config = {
host: window.location.hostname,
prefix: prefix,
port: window.location.port,
isSecure: window.location.protocol === "https:"
};
//to avoid errors in dev-hub: you can remove this when you have added an app
var app;
require.config( {
baseUrl: (config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port : "" ) + config.prefix + "resources"
} );
require( ["js/qlik"], function ( qlik ) {
var control = false;
qlik.setOnError( function ( error ) {
$( '#popupText' ).append( error.message + "<br>" );
if ( !control ) {
control = true;
$( '#popup' ).delay( 1000 ).fadeIn( 1000 ).delay( 11000 ).fadeOut( 1000 );
}
} );
$( "body" ).css( "overflow: hidden;" );
function AppUi ( app ) {
var me = this;
this.app = app;
app.global.isPersonalMode( function ( reply ) {
me.isPersonalMode = reply.qReturn;
} );
app.getAppLayout( function ( layout ) {
$( "#title" ).html( layout.qTitle );
$( "#title" ).attr( "title", "Last reload:" + layout.qLastReloadTime.replace( /T/, ' ' ).replace( /Z/, ' ' ) );
//TODO: bootstrap tooltip ??
} );
app.getList( 'SelectionObject', function ( reply ) {
$( "[data-qcmd='back']" ).parent().toggleClass( 'disabled', reply.qSelectionObject.qBackCount < 1 );
$( "[data-qcmd='forward']" ).parent().toggleClass( 'disabled', reply.qSelectionObject.qForwardCount < 1 );
} );
app.getList( "BookmarkList", function ( reply ) {
var str = "";
reply.qBookmarkList.qItems.forEach( function ( value ) {
if ( value.qData.title ) {
str += '<li><a data-id="' + value.qInfo.qId + '">' + value.qData.title + '</a></li>';
}
} );
str += '<li><a data-cmd="create">Create</a></li>';
$( '#qbmlist' ).html( str ).find( 'a' ).on( 'click', function () {
var id = $( this ).data( 'id' );
if ( id ) {
app.bookmark.apply( id );
} else {
var cmd = $( this ).data( 'cmd' );
if ( cmd === "create" ) {
$( '#createBmModal' ).modal();
}
}
} );
} );
$( "[data-qcmd]" ).on( 'click', function () {
var $element = $( this );
switch ( $element.data( 'qcmd' ) ) {
//app level commands
case 'page1':
page1();
break;
case 'page2':
page2();
break;
case 'clearAll':
app.clearAll();
break;
case 'back':
app.back();
break;
case 'forward':
app.forward();
break;
case 'lockAll':
app.lockAll();
break;
case 'unlockAll':
app.unlockAll();
break;
case 'createBm':
var title = $( "#bmtitle" ).val(), desc = $( "#bmdesc" ).val();
app.bookmark.create( title, desc );
$( '#createBmModal' ).modal( 'hide' );
break;
}
} );
}
//callbacks -- inserted here --
//open apps -- inserted here --
var app = qlik.openApp('020bedf4-b476-466e-b9cc-dea592f73d9f', config);
//get objects -- inserted here --
var model = [];
page1();
function page1(){
cleanup();
app.getObject('QV03','ARNmpdM').then(model=>{models.push(model)});
app.getObject('QV02','ZxDKp').then(model=>{models.push(model)});
app.getObject('QV01','NaKQwM').then(model=>{models.push(model)});
}
function page2(){
cleanup();
app.getObject('QV03','JZMrdb').then(model=>{models.push(model)});
app.getObject('QV02','tmaqpf').then(model=>{models.push(model)});
app.getObject('QV01','nRxXG').then(model=>{models.push(model)});
}
function cleanup(){
$.each(models,function(i,e){
console.log('removed:', e);
e.close();
});
models =[];
}
//create cubes and lists -- inserted here --
if ( app ) {
new AppUi( app );
}
} );
This is the empty dashboard. I need to comment the cleanup(); in the function page1 and page2 to make the object appear. But that defeat the purpose of this tutorial
Hi,
have you checked the browser console for errors?
Looks like a type when you create the models array, the trailing s is missing. That might cause the cleanup function to break.
Hi Erik,
Below is the console. I've check the code, it is the same as the tutorial.
var model = [];
page1();
function page1(){
cleanup();
app.getObject('QV03','ARNmpdM').then(model=>{models.push(model)});
app.getObject('QV02','ZxDKp').then(model=>{models.push(model)});
app.getObject('QV01','NaKQwM').then(model=>{models.push(model)});
}
function page2(){
cleanup();
app.getObject('QV03','JZMrdb').then(model=>{models.push(model)});
app.getObject('QV02','tmaqpf').then(model=>{models.push(model)});
app.getObject('QV01','nRxXG').then(model=>{models.push(model)});
}
function cleanup(){
$.each(models,function(i,e){
console.log('removed:', e);
e.close();
});
models =[];
}
Hi Hann,
You have a typo
u start with
var model = [];
notice u used model without an S at the end
buy then u push to :
models.push(model)}
notice now u typed modelS
so u need to fix the first declaration to:
var models = [];
Hi Oz_Moyal,
Thanks. I have tried it and yes its the typo.
I'd like to know if the user already have the pro/analyzer base subscription license, do they need any other additional license to implement the mashup or to integrate the object to another app?
Thanks.