Rendering web pages using free marker and Suite scripts

Components

• SuiteScript
• HTML Template

Suite Script – Sample

/**
 * @NApiVersion 2.x
 * @NScriptType Suitelet
 * @NModuleScope SameAccount
 */
/*******************************************************************************
 * 
 * Author : Jobin and jismi created on:05/14/2019 SV
 * 
 ******************************************************************************/
 define(["SuiteScripts/Jobin and Jismi IT Services LLP/In house App/package.js","N/search", "N/record","N/ui/serverWidget","N/file","N/render" ], function(package,search, record,serverWidget,file,render) {

var SPRB = {
  type:"customrecord_satellite_phone_rentals",
  customer: "custrecord_satphone_customer",
  invoice : "custrecord_invoice_generated",
   license:"custrecord_jj_esign_license",
  signature:"custrecord_jj_esign_signature"
};


function onRequest(context){
try{

 var index = context.request.parameters.index?context.request.parameters.index:0;
   
var S = {
   type: "customrecord_satellite_phone_rentals",
   filters:
   [
      ["custrecord_satphone_out","is","F"],"AND",[SPRB.invoice,"anyof","@NONE@"]
   ],
   columns:
   [
      search.createColumn({name: "name",sort: search.Sort.ASC, label: "name"}),
      search.createColumn({name:"formulatext",formula : "{custrecord_satphone_customer}", label: "customer"}),
      search.createColumn({name: "internalid", label: "internalid"})
   ]
};

context.request.parameters.customer?S.filters.push("AND",["custrecord_satphone_customer.entityid","startswith",context.request.parameters.customer]):null;



var S_custpmers = {
   type: "customrecord_satellite_phone_rentals",
   filters:
   [
      ["custrecord_satphone_out","is","F"] ,"AND",["custrecord_satphone_customer","noneof","@NONE@"],"AND",[SPRB.invoice,"anyof","@NONE@"]
   ],
   columns:
   [
 //  search.createColumn({name: "custrecord_satphone_customer", label: "value", sort: search.Sort.ASC,  summary:"GROUP"}),
   search.createColumn({name:"formulatext",formula : "{custrecord_satphone_customer}", label: "text",summary:"GROUP"})      
   ]
};



var results = getResults(S,index);
var customers =getCustomers(S_custpmers);

log.debug("customers",customers);

var renderer = render.create();

renderer.templateContent = file.load(package.ASSETS.homePage).getContents();

         renderer.addCustomDataSource({
                  format: render.DataSource.OBJECT,
                  alias: "results",
                  data: results
                  });

         renderer.addCustomDataSource({
                  format: render.DataSource.OBJECT,
                  alias: "customers",
                  data: {current:context.request.parameters.customer?context.request.parameters.customer:"",
                          customers : JSON.stringify(customers)}
                  });

         renderer.addCustomDataSource({
                  format: render.DataSource.OBJECT,
                  alias: "package",
                  data: package
                  });

context.response.write(renderer.renderAsString());


}
catch(err)
{
  log.debug("error@onRequest",err);
}

}

        function getResults(S,index){
         var returnData={};
            var results = [];
            var pageData = search.create(S).runPaged({pageSize:50});

            var page = pageData.pageRanges;

           returnData.pageData = page;

                   if(page.length==0){
                     returnData.results=[];
                     returnData.currentLabel="No results"
                     return returnData;    
                   }

                    returnData.currentIndex=index;
                  //   returnData.currentLabel=page[index].compoundLabel;

                     returnData.currentLabel="Pages ("+(parseInt(index)+1)+" of "+page.length + ")";
                    

                    var start = (parseInt(index)*50)

                var data = pageData.fetch({index:index}).data;
                for (var j = 0; j < data.length; j++){
                    var R = data[j];
                    var obj = {};
                    for (var i = 0; i < S.columns.length; i++) 
                        obj[S.columns[i].label] = R.getValue(S.columns[i]);
                     obj.serial=start+j+1;

                    results.push(obj);
                }


                returnData.results=results;
            
            return returnData;
        }



        function getCustomers(S)
        {

            var results = [];
            results.push({text:"All",value:""});
            var pageData = search.create(S).runPaged({pageSize:1000});
            var page = pageData.pageRanges;
            for(var k=0;k<page.length;k++)
            var data = pageData.fetch({index:k}).data;
                for (var j = 0; j < data.length; j++){
                    var R = data[j];
                    results.push(R.getValue(S.columns[0]));
                }


                return results;

        }


        return{
         onRequest:onRequest
        }


});

HTML TEMPLATE

<html>
<head>
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <style>
  .dropdown-truncated {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  
  <div class="container">
<!--NAVIGATION-->
<div class="fixed-top">
  <div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="${package.PAGES.home}"><!-- <img width="5%" src="${package.ASSETS.home}"/> --> ZORRO E-SIGN</a>
</nav>
</div>
</div>
<!--NAVIGATION-->

<!--BODY-->

  <div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
  <a class="navbar-brand" href="${package.PAGES.home}"> </a>
</nav>
</div>


<nav class="navbar navbar-expand-lg navbar-light bg-light">

<div style="width:40%"><h3>Satellite Phone Rental Booking</h3></div>



  <div class="btn-group" style="width:35%">
    <div class="input-group" style="width:95%">
  <input type="text"  id="search_customers" class="form-control" placeholder="Search by customer" aria-label="Username" aria-describedby="basic-addon1" value="${customers.current}" onchange="search(this.value)">
    </div>
  </div>


<div class="btn-group" style="width:25%">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-truncated" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
    ${results.currentLabel}
  </button>
  <div class="dropdown-menu dropdown-menu-right"  aria-labelledby="dropdownMenuButton">
    <#list results.pageData as page>  
    <a class="dropdown-item" href="${package.PAGES.home}&index=${page.index}&customer=${customers.current}">${page.compoundLabel}</a>
    </#list>
  </div>
  </div>


</nav>



<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Customer</th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <#list results.results as sprb>
    <tr>
      <th scope="row">${sprb.serial}</th>
      <td>${sprb.name}</td>
      <td>${sprb.customer}</td>
      <td><button type="button" class="btn btn-outline-dark" onclick="javascript:window.location.href=('${package.PAGES.details}&recId=${sprb.internalid}')">Sign</button></td>
    </tr>
    </#list>
  </tbody>
</table>


 

<!--NAVIGATION-->
<nav class="navbar navbar-expand-lg navbar-light">
  <p> </p>
</nav>
<div class="fixed-bottom">
  <div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <p> </p>
</nav>
</div>
</div>
<!--NAVIGATION-->

</div>
<!--BODY-->

  <script>
  $( function() {
    var availableTags = ${customers.customers};
    $( "#search_customers" ).autocomplete({
      source: availableTags
    });
  } );


$('#search_customers').bind("keypress", function(e){
   if(e.which === 13){
     search(document.getElementById("search_customers").value);
    } 
})




  function search(value)
  {
    window.location.href="${package.PAGES.home}&customer="+encodeURIComponent(value);
  }
  </script>


</body>
</html>

Key Points

• Records can be merged with a template using “render.addCustomDataSource”
• Objects can be merged with the template using “renderer.addRecord”