Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

Announcements
BI & Data Trends 2021. Discover the top 10 trends emerging in today. Join us on Dec. 8th REGISTER
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Contributor III
Contributor III

How can I use AngularJS Material on a Qlik Sense Mashup?

Hi, I am trying to create an AngularJS Mashup using the AngularJS Material‌, but I've run into some problems. I am using the dependencies (animate, aria and messages) in the same version of the Qlik Sense AngularJS (v 1.5.8) but no matter what it still doesn't work. I've found an old post where fka‌ briefly talks about this issue but I could not find any example of a successful implementation.

Does anyone here know how to use AngularJS Material in a mashup? Is there any AngularJS example out there with this library?

I've tried importing those JS via HTML and inside the require, no luck so far:

---JS---

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

};


require.config( {

    baseUrl: ( config.isSecure?"https://":"http://" ) +config.host+ (config.port?":"+config.port:"") +config.prefix+"resources"

  ,paths: {

  ngAnimate: "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min",

  ngAria: "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min",

  ngMessages: "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min",

  ngMaterial: "https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min"

  }

});


// require(['js/qlik', 'ngAnimate', 'ngAria', 'ngMessages', 'ngMaterial'], function (qlik, ngAnimate, ngAria, ngMessages, ngMaterial) {

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('Helpdesk Management.qvf', config);


//get objects -- inserted here --

app.getObject('QV02','hRZaKk');

app.getObject('QV01','a5e0f12c-38f5-4da9-8f3f-0e4566b28398');

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


} );

---JS---
---HTML---
<!DOCTYPE html>

<htmlqva-bootstrap="false">


<head>

  <metacharset="UTF-8">

  <metaname="viewport"content="width=device-width, initial-scale=1.0">

  <metahttp-equiv="X-UA-Compatible"content="ie=edge">

<!-- ////////////////////////////////////////////////////////// -->

  <linkrel="stylesheet"href="../../resources/autogenerated/qlik-styles.css">

  <scriptsrc="../../resources/assets/external/requirejs/require.js"></script>

<!-- ////////////////////////////////////////////////////////// -->

  <linkrel="stylesheet"href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">

  <linkrel="stylesheet"href="iron.css">

  <title>Document</title>

</head>


<bodyng-app="MyApp"layout="column">

  <md-button>

  Button-A

  </md-button>

  <md-button>

  Button-B

  </md-button>

  <md-button>

  Button-C

  </md-button>


  <divid="QV02"class="qvobject"style="width:100%;height:200px;"></div>


<!--Error Popup-->

  <divid="popup">

  <buttontype="button"class="close"data-dismiss="modal"aria-label="Close"id="closePopup">

  <spanaria-hidden="true">×</span>

  </button>

  <pid="popupText"></p>

  </div>


<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> -->

  <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>

  <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>

  <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script>

  <scriptsrc="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>

  <scriptsrc="iron.js"></script>


  <script>

angular.module('MyApp', ['ngMaterial'])

  .run(function () {

console.log("Starting the 'starter-app' module");

  });

  </script>


</body>


</html>

---HTML---

1 Reply
Highlighted
Partner
Partner

Hello Bernardo,

I found a little workaround for this issue, I hope it will fulfill your requirements! I changed the app & object ids so you need to replace those before trying it out. The chart will be loaded after you click on "Button-A".

It works by creating two angular-modules, one for ngMaterial, the other one for Qlik Sense:

HTML:

<!DOCTYPE html>

<html qva-bootstrap="false">

<head>

  <meta charset="UTF-8">

  <meta name="viewport"content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible"content="ie=edge">

  <link rel="stylesheet"href="../../resources/autogenerated/qlik-styles.css">

  <link rel="stylesheet"href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">

  <title>Document</title>

</head>

<body layout="column">

<div id="material" ng-controller="controller.main">

  <md-button ng-click="displayChart()">

  Button-A

  </md-button>

  <md-button>

  Button-B

  </md-button>

  <md-button>

  Button-C

  </md-button>

</div>

 

 

<div id="qlik">

<div id="QV02" style="width:100%; height:200px;"></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> 

</div>

  <script src="../../resources/assets/external/requirejs/require.js" data-main="mashuptests.js"></script>

</body>

</html>

JS:

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

};

require.config({

baseUrl: (config.isSecure ? "https://" : "http://") + config.host + (config.port ? ":" + config.port : "") + config.prefix + "resources",

paths: {

ngAnimate: "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min",

ngAria: "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min",

ngMessages: "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min",

ngMaterial: "https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min"

}

});

require(['angular', 'js/qlik', 'ngMaterial', 'ngAria', 'ngMessages'], function (angular, qlik) {

qlik.setOnError(function (error) {

$('#popupText').append(error.message + "<br>");

$('#popup').fadeIn(1000);

});

$("#closePopup").click(function () {

$('#popup').hide();

});

// create and bootstrap qlik sense angular module

var module = angular.module('QlikSenseWebApp', ['ngAnimate', 'ngRoute']);

angular.bootstrap(document.getElementById('qlik'), ['qlik-angular', 'QlikSenseWebApp']);

// create and bootstrap angular material

var material = angular.module('QlikSenseMaterial', ['ngMaterial']);

// create controller for handling button clicks etc.

material.controller('controller.main', function ($scope) {

$scope.displayChart = function(){

var app = qlik.openApp('456942a2-d3e2-40a5-bad6-985e80294f05', config);

//get objects -- inserted here --

app.visualization.get('cQT').then(function (viz) {

console.log(viz);

viz.show('QV02');

})

};

console.log('controller loaded');

});

angular.bootstrap(document.getElementById('material'), ['QlikSenseMaterial']);

});