Hi All,

I have one email template which sends blank email body when i click on 'send test and verify' button available within email template. I could figure out the reason for this, data loads in table through script which appears fine in HTML preview but it sends blank email. When i hardcode the data directly within some HTML elements it sends. Below is my code please see once and let me know where am i doing wrong?

<messaging:emailTemplate subject="Quote {!relatedTo.SBQQ__PrimaryQuote__r.Name} for {!relatedTo.Account.Name} requires approval. This Opportunity is owned by {!relatedTo.Owner.Name}." recipientType="User" relatedToType="Opportunity">
    
    <messaging:htmlEmailBody >
        <script src="{!URLFOR($Resource.AutoCompleteComboBox, 'jquery-1.7.2.js')}"></script>
        <link rel="stylesheet" type="text/css" href="{!URLFOR($Resource.TrNgGrid, 'trnggrid/css/bootstrap.min.css')}"/> 
        <link rel="stylesheet" type="text/css" href="{!URLFOR($Resource.TrNgGrid, 'trnggrid/css/treeGrid.css')}"/> 
        <script src="{!URLFOR($Resource.TrNgGrid, 'trnggrid/js/angular.js')}"/>
        <script src="{!URLFOR($Resource.TrNgGrid, 'trnggrid/js/tree-grid-directive.js')}"/>    
    <style>
        th {
            white-space: nowrap;
            background: #F2F3F3;
            border-width: 0 0 1px 1px;
            border-color: #E0E3E5;
            color: #000;
            padding: 5px 2px 4px 5px;
        }

        th span {white-space: nowrap;
            background: #F2F3F3;
            border-width: 0 0 1px 1px;
            border-color: #E0E3E5;
            color: #000;
            font-size: .9em;
            font-weight: bold;
            padding: 5px 2px 4px 5px; }
        .tree-grid i.indented {
          padding: 2px;
          display: none;
        }
        body {
          font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
          font-size: 12px;
        }
    </style>
    <script>
    console.log('enter');
        (function() {
  var app, deps;

  deps = ['treeGrid'];

  app = angular.module('treeGridTest', deps);

  app.controller('treeGridController', function($scope, $timeout) {
    var tree;
     
    var rawTreeData = [{"VPAuthority":20000.0000,"Total":20000.00,"SalesPrice":20000.00,"RepAuthority":20000.0000,"Quantity":1.00,"qlsId":"a3RM00000003uJOMAY","ProductName":"Charge Integrity","ParentId":null,"MgrAuthority":20000.0000,"ListPrice":20000.0000},{"VPAuthority":8000.0000,"Total":8000.00,"SalesPrice":8000.00,"RepAuthority":8000.0000,"Quantity":1.00,"qlsId":"a3RM00000003uJPMAY","ProductName":"Implementation Fee","ParentId":"a3RM00000003uJOMAY","MgrAuthority":8000.0000,"ListPrice":8000.0000},{"VPAuthority":0.0000,"Total":0.00,"SalesPrice":0.00,"RepAuthority":0.0000,"Quantity":1.00,"qlsId":"a3RM00000003uOrMAI","ProductName":"Clinical Link Basic","ParentId":null,"MgrAuthority":0.0000,"ListPrice":0.0000},{"VPAuthority":0.0000,"Total":0.00,"SalesPrice":0.00,"RepAuthority":0.0000,"Quantity":15.00,"qlsId":"a3RM00000003uOsMAI","ProductName":"Clinical Link - Monthly Block Pricing (Separate)","ParentId":"a3RM00000003uOrMAI","MgrAuthority":0.0000,"ListPrice":0.0000},{"VPAuthority":0.0000,"Total":0.00,"SalesPrice":0.00,"RepAuthority":0.0000,"Quantity":0.00,"qlsId":"a3RM00000003uOtMAI","ProductName":"Implementation Fee","ParentId":"a3RM00000003uOsMAI","MgrAuthority":0.0000,"ListPrice":0.0000}];
   // console.log('strQLsJson=====',rawTreeData);
   // rawTreeData = JSON.parse(rawTreeData);
    var myTreeData = getTree(rawTreeData, 'qlsId', 'ParentId');
   
   $scope.tree_data = myTreeData; 
   $scope.my_tree = tree = {};
   $scope.expanding_property = {
            field: "ProductName",
            displayName: "Product Name"};
    $scope.col_defs = [
        
        { field: "Quantity"},
        { field: "SalesPrice", displayName: "Sales Price"},
        { field: "ListPrice", displayName: "List Price"},
        { field: "SalesPrice", displayName: "Sales Price"},
        { field: "Total", displayName: "Total"},
        { field: "RepAuthority", displayName: "Rep Authority"},
        { field: "MgrAuthority", displayName: "Mgr Authority"},
        { field: "VPAuthority", displayName: "VP Authority"}
        //{ field: "Approval" }

    ];
    $scope.my_tree_handler = function(branch){
        console.log('you clicked on', branch)
    }
    
function getTree(data, primaryIdName, parentIdName){
    if(!data || data.length==0 || !primaryIdName ||!parentIdName)
        return [];

    var tree = [],
        rootIds = [],
        item = data[0],
        primaryKey = item[primaryIdName],
        treeObjs = {},
        parentId,
        parent,
        len = data.length,
        i = 0;

    while(i<len){
        item = data[i++];
        primaryKey = item[primaryIdName];           
        treeObjs[primaryKey] = item;
        parentId = item[parentIdName];

        if(parentId){
            parent = treeObjs[parentId];    

            if(parent.children){
                parent.children.push(item);
            }
            else{
                parent.children = [item];
            }
        }
        else{
            rootIds.push(primaryKey);
        }
    }

    for (var i = 0; i < rootIds.length; i++) {
        tree.push(treeObjs[rootIds[i]]);
    };
    console.log('exit');
    return tree;
}

  });

}).call(this);

    
    </script>
    <body ng-app="treeGridTest" ng-controller="treeGridController" style="margin:20px">
    
    <div ng-model="showMinDir" ng-value="false">
        <div ng-show="!showMinDir">
            <tree-grid tree-data="tree_data" tree-control="my_tree" col-defs="col_defs" expand-on="expanding_property" on-select="my_tree_handler(branch)" expand-level="5" icon-leaf= "glyphicon glyphicon-globe"></tree-grid>
        </div>
    </div>
 

    <div>Hii</div>
  </body>

       
    </messaging:htmlEmailBody>
 </messaging:emailTemplate>