topic How can I use AngularJS Material on a Qlik Sense Mashup? in Integration, Extension & APIs

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

Anonymous — Mon, 09 Apr 2018 20:35:58 GMT

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>

<divid="popup">

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

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

</button>

<pid="popupText"></p>

</div>

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

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

.run(function () {

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

});

</script>

</body>

</html>

---HTML---

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

m_s — Wed, 11 Apr 2018 14:24:49 GMT

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