Qliksense mashup using Angular material - Qlik Community

prabhuappu · ‎2016-03-25

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

Francis_Kabinoff · ‎2016-03-28

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 · ‎2016-03-28

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.

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 · ‎2016-03-29

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.