Fügen Sie in ihrer project.html folgenden Code hinzu  
<div id=”showHide” class=”meinButton”>Chart ein-/ausblenden</div>
um ein neues Element zu erstellen, welches später unser Button sein soll. Dieser hat im Moment noch keine Funktion und sieht noch nicht aus wie ein Button. 

Ihre project.html sollte in etwa wie folgt aussehen:

<body style="overflow: auto">

<div id="showHide" class="meinButton">Chart ein-/ausblenden</div>
	
<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>

<!--Error Popup-->
<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>

 

Damit unsere Button auch aussieht wie ein Button fügen wir noch folgenden Code in unserer project.css hinzu:

.flex-container {
	display: flex;
	flex-wrap: wrap;
	margin: 0 45px 45px 0;
}

.qvplaceholder, .qvobject {
	flex: 1 1 auto;
	height: 300px;
	min-width: 250px;
	margin: 45px 0 0 45px;
}

.meinButton{
	border: 1px solid #afafaf;
	background-color: #efefef;
	color: #333;
	cursor: pointer;
	display: inline-block;
	padding: 5px;
	margin: 2px;
}

.meinButton:hover{
	background-color: #333;
	color:#fff
}

 

Nun fehlt unserem Button aber noch eine Funktion diese fügen wir nun mit Hilfe von jQuery in unserer project.js ein. Dazu benötigen wir das Schlüsselwort $ um damit ein Element in unserem HTML Dokument zu selektieren. Dies sieht dann wie folgt aus: $(‘Element(e)’), ein einzelnes Element sprechen Sie im Regelfall über seine ID an, die Notation ist dabei an CSS angelehnt. Nutzen Sie die # um eine ID anzusprechen $(‘#showHide‘) oder den . um eine Klasse anzusprechen $(‘.meinButton‘).

Um unserem Element nun eine Funktion bzw. ein sogenanntes Event hinzuzufügen benötigen wir die Funktion bzw. Methode on(). Dieser Methode kann man als Parameter mitgeben ob Sie beim klicken, hover, etc. reagieren soll und ein sogenannte Callback Funktion was beim auslösen passieren soll.

Das ganze sieht dann wie folgt aus: 

$(‘#showHide’).on(‘click‘,function(){
//was passieren soll
});

Um unsere Chart nun ein-/auszublenden benötigen wir nun eine weitere Funktion mit dem Namen toggle welches unser Chart nun ein- oder ausblendet, je nachdem ob es gerade sichtbar ist oder nicht.

Das ganze sieht dann so aus:
$(‘#showHide’).on(‘click’,function(){
//was passieren soll
  $(‘#QV02‘).toggle();
});

Das ganze solle in Ihrer project.js wie folgt aussehen:

require( ["js/qlik"], function ( qlik ) {
  qlik.setOnError( function ( error ) {
    $( '#popupText' ).append( error.message + "<br>" );
    $( '#popup' ).fadeIn( 1000 ); 
  } );
  $( "#closePopup" ).click( function () {
    $( '#popup' ).hide();
  } );

  //callbacks -- inserted here --
  //open apps -- inserted here --
  var app = qlik.openApp('Stage 3 - Layout DE.qvf', config);

  //get objects -- inserted here --
  app.getObject('QV04','keQuTJ');
  app.getObject('QV06','TtFdH');
  app.getObject('QV05','MjXwv');
  app.getObject('QV03','tEUkeF');
  app.getObject('QV02','bMZeARw');
  app.getObject('QV01','mhPzJ');
  //create cubes and lists -- inserted here --

  console.log(angular.version);
  console.log($.fn.jquery);

  $('#showHide').on('click',function(){
    //was passieren soll
    $('#QV02').toggle();
  });

} );

Das Ergebnis im Browser sollte wie folgt aussehen:

Wenn Sie auf den Button klicken sollte das Ergebnis in etwa so aussehen:

Wir wollen nun unser Beispiel ein wenig erweitern, es soll nicht nur das eine Chart ein-/ausgeblendet werden, sondern es soll ein Chartwechsel zwischen QV02 und QV03 stattfinden.

Dazu stellt jQuery neben der Funktion toggle() auch die beiden Funktionen show() und hide() an.

Nun müssen wir aber zuerst überprüfen ob das eine oder das andere Chart sichtbar ist, dies können wir mit der jQuery Funktion is() erreichen.

Das ganze sieht dann etwa wie folgt aus:

if($(‘Qv02’).is(‘:visible’)){
  $(‘Qv02’).hide();
  $(‘Qv03’).show();
}else{
  $(‘Qv03’).hide();
  $(‘Qv02’).show();
}

Unser geänderter Code sollte nun wie folgt aussehen:

$('#showHide').on('click',function(){
  //was passieren soll
  //$('#QV02').toggle();
  if($('#QV02').is(':visible')){
    $('#QV02').hide();
    $('#QV03').show();
  }else{
    $('#QV03').hide();
    $('#QV02').show();
  }
});

Und das Ergebnis im Browser vor ersten Klick: 

Das Ergebnis nach dem ersten Klick:

Das Ergebnis nach dem dritten Click:

Da es unschön aussieht das die Charts erst beide angezeigt werden nehmen wir noch 2 kleine Änderungen vor. 

Nr.1 wir erweitern unsere project.css um eine weitere Klasse welche das Objekt erst mal ausblendet.

.meinButton:hover{
  background-color: #333;
  color:#fff
}

.hideObject{
  display: none;
}

Nr.2 wir erweitern unsere project.html bei dem Element QV03 um die erstellte Klasse.

<div class="flex-container">
	<div id="QV01" class="qvobject"></div>
	<div id="QV02" class="qvobject"></div>
	<div id="QV03" class="qvobject hideObject"></div>
	<div id="QV04" class="qvobject"></div>
	<div id="QV05" class="qvobject"></div>
	<div id="QV06" class="qvobject"></div>
</div>

Das Ergebnis unser Chart ist erst mal ausgeblendet:

Drücken wir nun allerdings auf unseren Button wird von dem Chart Qv03 nur der Titel angezeigt und nicht das Chart. 

Damit unsere Chart nun wieder angezeigt wird müssen wir eine Funktion von qlik nutzen welches das Chart neu anpasst. Diese Funktion heißt qlik.resize()

Sie sollten diese Funktion wie folgt platzieren:

$('#showHide').on('click',function(){
  //was passieren soll
  //$('#QV02').toggle();
  if($('#QV02').is(':visible')){
    $('#QV02').hide();
    $('#QV03').show();
  }else{
    $('#QV03').hide();
    $('#QV02').show();
  }
  qlik.resize();
});

Nun ist die volle Funktion unseres Chartwechsels gegeben.

Share