Skip to main content
Announcements
Accelerate Your Success: Fuel your data and AI journey with the right services, delivered by our experts. Learn More
cancel
Showing results for 
Search instead for 
Did you mean: 
cmorri1988
Creator
Creator

Multiple Applications within Mashup - Pass Selections Between Them?

Hi All,

We are currently working towards several applications linked with document chaining due to performance issues and the amount of data we have (100bn+ rows).

I had a look at building a mash-up with applications split between different views as per image showing views along left hand side.

preview.PNG

What I would like to know is, can I pass a selection between views (or apps) even though the app, objects and data are specific to each view?

Thanks all!

-----------------------------------------------------------

JS File:

/*
*    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 workbench: 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) {
window.qlik = qlik;

qlik.setOnError( function (error) {
  console.log(error);
});

//callbacks -- inserted here --
//open apps -- inserted here --
var app = qlik.openApp('d9b976a6-3711-4534-88e6-9d0bcf5cac16', config);

var app1 = qlik.openApp('5722b2d1-19bb-4e56-ae8e-811f6e286283', config);


//get objects -- inserted here --



app1.getObject('QV1-03','c1c71856-698c-4d1b-bd43-02d7d6e257a2');
app.getObject('QV1-01','fghtpz');
app1.getObject('QV1-06','WVmjz');



app.getObject('KPI-02','Wgjkjn');

app.getObject('KPI-01','HmAguP');



app.getObject('qvfilters','7f775d4f-a325-4c0f-8e01-6d57202d690c');




//create cubes and lists -- inserted here --


if (app) {
 
  $(".filter-drawer-toggle, paper-menu paper-item").click(function() {
   qlik.resize();
  });
} else {
  $(".current-selections-placeholder span").css("display", "inline-block");
}

});

HTML file:


<!doctype html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Qlik Sense Mashup</title>
<meta charset="utf-8">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="cleartype" content="on">
<!--Polymer stuff -->
<script src="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="qliksense-card.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/iron-flex-layout/iron-flex-layout-classes.ht...">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/paper-header-panel/paper-header-panel.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/paper-toolbar/paper-toolbar.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/paper-icon-button/paper-icon-button.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/iron-icons/iron-icons.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/iron-pages/iron-pages.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/paper-menu/paper-menu.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/paper-item/paper-item.html">
<link rel="import" href="polymer-mixins.html">
<style is="custom-style" include="iron-flex iron-positioning"></style>
<style is="custom-style" include="polymer-mixins"></style>
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<!-- Qlik -->
<link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css">
<script src="../../resources/assets/external/requirejs/require.js"></script>
<!-- Bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>

<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

<!-- Project code -->
<link rel="stylesheet" href="PUBLYTICS4.css">
<script src="PUBLYTICS4.js"></script>
<!-- fontawesome -->
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">

</head>

<body class="fullbleed vertical layout">
<paper-drawer-panel right-drawer="" force-narrow="true" disable-edge-swipe="true">
  <div drawer="">
   <div class="drawer-title">Filters</div>
   <div class="filter-container">
    <div class="qvobject" id="qvfilters"></div>
   </div>
  </div>
  <paper-header-panel main="">
   <div class="paper-header">
    <paper-toolbar>
   
     <paper-icon-button icon="menu" id="nav-menu-button" class="visible-xs-block"></paper-icon-button>

     <div class="title"><img src="logo---qlik_white.png"> | Publytics </div> <!--TITLE-->

     <paper-icon-button class="filter-drawer-toggle" icon="help" data-toggle="modal" data-target="#basic"></paper-icon-button>
     <paper-icon-button class="filter-drawer-toggle" icon="more-vert" paper-drawer-toggle=""></paper-icon-button>
    </paper-toolbar>
   
   </div>
   <paper-drawer-panel id="nav-drawer" drawer-width="134px">
    <div drawer="">
     <paper-menu selected="0">

      <!-- LEFT NAV -->
      <!-- Edit <paper-item> to customize left panel -->
      <!-- A <paper-item> will navigate to the corresponding .paper-body view (below) -->
      <paper-item>
       <div class="icon">
        <i class="fa fa-tachometer" aria-hidden="true"></i>
       </div>
       <div class="menu-option">
        Executive Dashboard
       </div>
      </paper-item>
      <paper-item>
       <div class="icon">
        <i class="fa fa-compass" aria-hidden="true"></i>
       </div>
       <div class="menu-option">
        Sales View
       </div>
      </paper-item>
      <paper-item>
       <div class="icon">
        <i class="fa fa-file-text" aria-hidden="true"></i>
       </div>
       <div class="menu-option">
        Circulations View
       </div>
      </paper-item>
      <paper-item>
       <div class="icon">
        <i class="fa fa-holds-text" aria-hidden="true"></i>
       </div>
       <div class="menu-option">
        Holds View
       </div>
      </paper-item>
      <paper-item>
       <div class="icon">
        <i class="fa fa-demand-text" aria-hidden="true"></i>
       </div>
       <div class="menu-option">
        Demand View
       </div>
      </paper-item>
      <paper-item>
       <div class="icon">
        <i class="fa fa-demog-text" aria-hidden="true"></i>
       </div>
       <div class="menu-option">
        Demographics View
       </div>
      </paper-item>
      <paper-item>
       <div class="icon">
        <i class="fa fa-demog-text" aria-hidden="true"></i>
       </div>
       <div class="menu-option">
        Daily Transactional View
       </div>
      </paper-item>

    </paper-menu>
   </div>
   
    <iron-pages main="" selected="0">
     <!-- Each .paper-body contained within <iron-pages> is a view. Copy and paste to add more views. -->
     <!-- Don't forget to add a <paper-item> in the <paper-menu> above to be able to navigate to any view you add -->
     <div class="paper-body">
      <div class="container-fluid">
       <!-- A .qvplaceholder will become a droppable area in the dev-hub -->
       <!-- Each .qvplaceholder must have a unique id -->
       <!-- These .qvplaceholder objects below have an extra class, .kpi, which applies some simple styles intended for kpi objects -->
       <div class="row kpi-row">
        <div class="col-xs-12 col-sm-6 col-md-3">
         <div class="kpi-side"><i class="fa fa-user" aria-hidden="true"></i></div>
         <div class="kpi red-2 qvobject" id="KPI-01"></div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
         <div class="kpi-side"><i class="fa fa-child" aria-hidden="true"></i></div>
         <div class="kpi green-1 qvobject" id="KPI-02"></div>
        </div>
        <div class="col-xs-12 col-sm-6">
         <qliksense-card content-height="150px">
          <div class="with-title qvobject" id="QV1-06"></div>
         </qliksense-card>
        </div>
       <div class="row">
        <div class="col-xs-12 col-sm-12">
         <!-- Placing a .qvplaceholder within a <qliksense-card> will create a cardified object -->
         <qliksense-card content-height="300px">
          <!-- Adding the class .with-title to a .qvplaceholder within a <qliksense-card> will apply special styles intended for visualizations with titles -->
          <div class="with-title qvobject" id="QV1-01"></div>
         </qliksense-card>
        </div>
       </div>
       <div class="row">
        <div class="col-xs-12">
         <qliksense-card content-height="300px">
          <div class="card-title qvt-visualization-title"></div>
          <div class="with-title qvobject" id="QV1-03"></div>
         </qliksense-card>
        </div>
       </div>
      </div>
     </div>

     <div class="paper-body">
      <div class="container-fluid">
       <div class="row">
        <div class="col-xs-12 col-sm-8">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-01"></div>
         </qliksense-card>
        </div>
        <div class="col-xs-12 col-sm-4">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-02"></div>
         </qliksense-card>
        </div>
       </div>
       <div class="row">
        <div class="col-xs-12 col-sm-4">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-03"></div>
         </qliksense-card>
        </div>
        <div class="col-xs-12 col-sm-4">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-04"></div>
         </qliksense-card>
        </div>
        <div class="col-xs-12 col-sm-4">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-05"></div>
         </qliksense-card>
        </div>
       </div>
       <div class="row">
        <div class="col-xs-12 col-sm-4">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-06"></div>
         </qliksense-card>
        </div>
        <div class="col-xs-12 col-sm-8">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-07"></div>
         </qliksense-card>
        </div>
       </div>
      </div>
     </div>
    
     <div class="paper-body">
      <div class="container-fluid">
       <div class="row">
        <div class="col-xs-12 col-sm-8">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-01"></div>
         </qliksense-card>
        </div>
        <div class="col-xs-12 col-sm-4">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-02"></div>
         </qliksense-card>
        </div>
       </div>
       <div class="row">
        <div class="col-xs-12 col-sm-4">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-03"></div>
         </qliksense-card>
        </div>
        <div class="col-xs-12 col-sm-4">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-04"></div>
         </qliksense-card>
        </div>
        <div class="col-xs-12 col-sm-4">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-05"></div>
         </qliksense-card>
        </div>
       </div>
       <div class="row">
        <div class="col-xs-12 col-sm-4">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-06"></div>
         </qliksense-card>
        </div>
        <div class="col-xs-12 col-sm-8">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-07"></div>
         </qliksense-card>
        </div>
       </div>
      </div>
     </div>
    
     <div class="paper-body">
      <div class="container-fluid">
       <div class="row">
        <div class="col-xs-12 col-sm-6">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV3-01"></div>
         </qliksense-card>
        </div>
        <div class="col-xs-12 col-sm-6">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV3-02"></div>
         </qliksense-card>
        </div>
       </div>
       <div class="row">
        <div class="col-xs-12">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV3-03"></div>
         </qliksense-card>
        </div>
       </div>
      </div>
     </div>
          <div class="paper-body">
      <div class="container-fluid">
       <div class="row">
        <div class="col-xs-12 col-sm-6">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV3-01"></div>
         </qliksense-card>
        </div>
        <div class="col-xs-12 col-sm-6">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV3-02"></div>
         </qliksense-card>
        </div>
       </div>
       <div class="row">
        <div class="col-xs-12">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV3-03"></div>
         </qliksense-card>
        </div>
       </div>
      </div>
     </div>
          <div class="paper-body">
      <div class="container-fluid">
       <div class="row">
        <div class="col-xs-12 col-sm-6">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV3-01"></div>
         </qliksense-card>
        </div>
        <div class="col-xs-12 col-sm-6">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV3-02"></div>
         </qliksense-card>
        </div>
       </div>
       <div class="row">
        <div class="col-xs-12">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV3-03"></div>
         </qliksense-card>
        </div>
       </div>
      </div>
     </div>
     <div class="paper-body">
      <div class="container-fluid">
       <div class="row">
        <div class="col-xs-12 col-sm-8">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-01"></div>
         </qliksense-card>
        </div>
        <div class="col-xs-12 col-sm-4">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-02"></div>
         </qliksense-card>
        </div>
       </div>
       <div class="row">
        <div class="col-xs-12 col-sm-4">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-03"></div>
         </qliksense-card>
        </div>
        <div class="col-xs-12 col-sm-4">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-04"></div>
         </qliksense-card>
        </div>
        <div class="col-xs-12 col-sm-4">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-05"></div>
         </qliksense-card>
        </div>
       </div>
       <div class="row">
        <div class="col-xs-12 col-sm-4">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-06"></div>
         </qliksense-card>
        </div>
        <div class="col-xs-12 col-sm-8">
         <qliksense-card content-height="300px">
          <div class="with-title qvplaceholder" id="QV2-07"></div>
         </qliksense-card>
        </div>
       </div>
      </div>
     </div>
   
  
 

<!-- Modal -->
<div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
     <h4 class="modal-title">Help</h4>
    </div>
    <div class="modal-body">
     <p>
      If charts stipulate 'Own View' within the title, this is your view for Publisher's and Imprint's specific to your organization.
      Feedback can be left using the feedback link provided on each screen.
     </p>
    </div>
    <div class="modal-footer">
     <button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
    </div>
   </div>
   <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- End Modal -->

<script>
  var root = this.root;
  $(document).ready(function() {
   $("#nav-drawer paper-menu paper-item").click(function() {
    var index = $(this).index();
    Polymer.dom(root).querySelector("iron-pages").selectIndex(index);
   });
   $("#nav-menu-button").click(function() {
    Polymer.dom(root).querySelector("#nav-drawer").togglePanel();
   });
   $(window).resize(function() {
    Polymer.updateStyles();
   });
  });
</script>

</div></iron-pages></paper-drawer-panel></paper-header-panel></paper-drawer-panel></body></html>

0 Replies