Qlik Community

Qlik Sense Integration, Extensions, & APIs

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

prabhuappu
Contributor 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
Employee
Employee

Re: Qliksense mashup using Angular material

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

Re: Qliksense mashup using Angular material

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

Employee
Employee

Re: Qliksense mashup using Angular material

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.

Community Browser