Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
Anonymous
Not applicable

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
m_s
Partner - Creator II
Partner - Creator II

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']);

});