Multiple Applications within Mashup - Pass Selections Between Them?

cmorri1988 — Fri, 27 Apr 2018 14:39:52 GMT

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.

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">

<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.html">
<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>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">

<link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css">
<script src="../../resources/assets/external/requirejs/require.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>

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

<link rel="stylesheet" href="PUBLYTICS4.css">
<script src="PUBLYTICS4.js"></script>

<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>

     <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">

<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">
     
     
     <div class="paper-body">
      <div class="container-fluid">
       
       
       
       <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">
         
         <qliksense-card content-height="300px">
          
          <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="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>
   
</div>

</div>

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

topic Multiple Applications within Mashup - Pass Selections Between Them? in App Development

Multiple Applications within Mashup - Pass Selections Between Them?