6 Replies Latest reply on Nov 3, 2016 1:11 PM by Scott A Johnson

    Working Widget HTML code NOT working in HTML Tile code - Why?

    jordan.van.bergen@copaco.com

      We have the following HTML widget code that's working on an overview page:

       

      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>  
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>  
      
      
      <div class="container-fluid" ng-app="myApp" ng-controller="ControllerJWH as vm" style="height:70px;"> 
          <div style="float:left;display:block;margin:10px 10px 10px 0px;">
            <img src="{{vm.jiveUser.thumbnailUrl}}" id="plaatje" style="height:50px;">
          </div>
          <div style="float:left;display:block;margin:10px 10px 10px 0px;">  
              <p><b>Welcome to Jive {{vm.jiveUser.displayName}}.</b><br />
          </div>  
      </div>  
      
      
      <script>  
      (function() {  
          'use strict';  
        
        
          angular  
              .module('myApp', ['ngAnimate'])  
              .controller('ControllerJWH', ControllerJWH)  
              .config(config);  
               
          config.$inject = ['$httpProvider'];  
          ControllerJWH.$inject = ['$http'];  
        
        
          /* @ngInject */  
          function ControllerJWH($http) {  
              var vm = this;  
              vm.title = 'ControllerJWH';  
        
        
              activate();  
        
        
              ////////////////  
        
        
              function activate() {  
                  $http.get('https://coco.copaco.com/api/core/v3/people/@me')  
                      .then(function(result) {  
                          vm.jiveUser = result.data;  
                          console.log(result);  
                      }, function(err) {  
                          console.log(err);  
                      });  
        
        
              }  
          }  
          function config($httpProvider) {  
              $httpProvider.interceptors.push(function() {  
                  return {  
                      'request': function(config) {  
                          config.transformResponse.unshift(function(a) {  
                              var split = a.split("\n");  
                              if (a[0] === '{') {  
                                  return a;  
                              } else {  
                                  return a.split("\n").slice(1).join("\n");  
                              }  
                          });  
                          return config;  
                      }  
                  };  
              });  
          }  
      })();  
      
      
      </script> 
      

       

      This will present a picture of the current logged in user and a welcome message. This is working with widget content HTML. The same if we copy paste this into a Tile [Create an HTML Tile] it won't work. Why is this?

       

      Hope someone has the solution. Try the code above on your setup in a HTML widget and it will show info from the rest api using angularjs ;-)

       

      How to get this working widget HTML code to work in a created HTML Tile?