3 Replies Latest reply: Mar 29, 2016 8:32 AM by Francis Kabinoff RSS

    Qliksense mashup using Angular material

    prabhu appu

      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:

       

       

      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