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: 
prabhuappu
Creator II
Creator II

Qliksense mashup using Angular material

Hi,

How to use angular material in qliksesne mashup. I'm getting error while injecting ngMaterial in angular module.

below is the code that i'm using,

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

        //'app': '../extensions/AngularMaterial/app',

        'angular': '../extensions/AngularMaterial/bower_components/angular/angular',

        'ngAnimate': '../extensions/AngularMaterial/bower_components/angular-animate/angular-animate.min',

        'ngAria': '../extensions/AngularMaterial/bower_components/angular-aria/angular-aria.min',

        'ngMessages': '../extensions/AngularMaterial/bower_components/angular-messages/angular-messages.min',

        'ngMaterial': '../extensions/AngularMaterial/bower_components/angular-material/angular-material.min'

    }

} );

require( ["js/qlik", 'angular', 'ngAnimate', 'ngAria', 'ngMessages', 'ngMaterial'],

function ( qlik, angular, ngAnimate, ngAria, ngMessages, ngMaterial ) {

  $("#closeerr").on('click',function(){

  $("#errmsg").html("").parent().hide();

  });

  qlik.setOnError( function ( error ) {

  $("#errmsg").append("<div>"+error.message+"</div>").parent().show();

  } );

  //

     angular.module('BlankApp', ['ngMaterial']);

  //callbacks -- inserted here --

  //open apps -- inserted here --

  //get objects -- inserted here --

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

} );

HTML File:

<body ng-app="BlankApp"  role="document" style="overflow: auto">

     <md-button>Data</md-button>

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

     <script src="AngularMaterial.js"></script>

</body>

Please refer the attached image for error message. I'm not sure whether i'm following a proper way to do this. Please help me.

Thanks in Advance.

Regards,

Prabhu Appu

3 Replies
Francis_Kabinoff
Former Employee
Former Employee

It looks like you are loading angular, but angular is already loaded for you with capability api. id suggest checking out the resources below

Using AngularJS in your mashup ‒ Qlik Sense

GitHub - erikwett/helpdesk-angular: Qlik Sense mashup example using AngularJS

prabhuappu
Creator II
Creator II
Author

Thanks for the reply Francis,

I followed the steps provided in the link. I can see the version of the angular used in qliksense is 1.2.15. but AngularMaterial requires Angular 1.3.x or higher.

1.PNG

Please let me know if we can use latest version. if so could you please tell me ho to do that.

regards,

Prabhu Appu

Francis_Kabinoff
Former Employee
Former Employee

Hi Prabhu,

You will need to use the version of Angular.js that the capability api provides, which is, as you pointed out, v1.2.15.