Sample template text
Copy and paste this text into the Script field
on the Templates tab of the Web
Content page. Replace the [URL of tenant] placeholder text with the URL
of your tenant.
<style>
#${randomNamespace} .tablewide{
width:100%
}
#${randomNamespace} .mainprogress{
<#if getterUtil.getBoolean(redProgressbar.getData())>
background-color: lightcoral;
<#else>
background-color:#72E794;
</#if>
border-style: solid;
border-width: 1px;
border-color: grey;
border-radius: 5px;
}
#${randomNamespace} .subprogress{
width:0%;
<#if getterUtil.getBoolean(redProgressbar.getData())>
background-color: red;
<#else>
background-color: #178541;
</#if>
height: 29px;
border-radius: 5px;
}
#${randomNamespace} .main-div{
display: none;
}
#${randomNamespace} .alerts-wrapper{
display: none;
}
#${randomNamespace} .tdright{
text-align: right;
}
</style>
<div id="${randomNamespace}">
<div class="alerts-wrapper" id= "creditcarderror">
<header>
<svg class="icon alert" focusable="false" role="presentation">
<use xlink:href="#alert"></use>
</svg>
<span class="alert-title">Oppss</span>
</header>
<div class="content">
<p>
<#if (errormsg.getData())??>
${errormsg.getData()}
</#if>
</p>
</div>
</div>
<div class="content-box">
<header class="content-box-top">
<h3 style = "text-transform: uppercase;">
<#if (Title.getData())??>
${Title.getData()}
</#if>
</h3>
</header>
<div class="content">
<div class="loading-indicator" aria-live="polite" role="status" id ="spinner" >
<div class="animation-container">
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
</div>
<p class="loading-label"><#if (loadingmessage.getData())??>
${loadingmessage.getData()}
</#if>
</p>
</div>
<div class= "main-div padded-content" id="main">
<table>
<tbody>
<tr>
<th class= "customer__name"></th>
</tr>
<tr>
<td class= "customer__street-address"></td>
</tr>
<tr>
<td class= "customer__city-state-zip"></td>
</tr>
<tr>
<td class= "customer__country"></td>
</tr>
</tbody>
</table>
<hr class="solid">
<div>
<h3 id="creditLimitText">
<#if (Title.Text1gtv.getData())??>
${Title.Text1gtv.getData()}
</#if>
</h3>
<div>
<div class="mainprogress">
<div class="subprogress" id= "filler" ></div>
</div>
</div>
<table class="tablewide">
<tbody>
<tr>
<th >
<#if (Title.Textgoit.getData())??>
${Title.Textgoit.getData()}
</#if></th>
<td class= "spentDisplayer tdright"></td>
</tr>
</tobody>
</table>
<hr class="solid">
</div>
<div>
<table class="tablewide">
<tbody>
<tr>
<th class="title">
<#if (Title.Text18lo.getData())??>
${Title.Text18lo.getData()}
</#if></th>
<td class= "openorders tdright"></td>
</tr>
<tr>
<th class="title">
<#if (Title.Text18r8.getData())??>
${Title.Text18r8.getData()}
</#if>
</th>
<td class= "billedamount tdright"></td>
</tr>
<tr>
<th class= "title">
<#if (Title.Textpusm.getData())??>
${Title.Textpusm.getData()}
</#if>
</th>
<td class= "dueamount tdright"></td>
</tr>
<tr>
<th class= "title">
<#if (Title.Text2bc1.getData())??>
${Title.Text2bc1.getData()}
</#if>
</th>
<td class= "futureamount tdright"></td>
</tr>
</tbody>
</table>
</div>
<hr class="solid">
<div>
<table class="tablewide">
<tbody>
<tr>
<th class="title">
<#if (Title.Textpxk8.getData())??>
${Title.Textpxk8.getData()}
</#if>
</th>
<td class= "ordersmtd tdright"></td>
</tr>
<tr>
<th class="title">
<#if (Title.Textpnqi.getData())??>
${Title.Textpnqi.getData()}
</#if>
</th>
<td class= "ordersytd tdright"></td>
</tr>
<tr>
<th class="title">
<#if (Title.Text8psj.getData())??>
${Title.Text8psj.getData()}
</#if>
</th>
<td class= "orderslytd tdright"></td>
</tr>
</tbody>
</table>
</div>
<hr class="solid">
<div>
<table class="tablewide">
<tbody>
<tr>
<th class="title">
<#if (Title.Textllwz.getData())??>
${Title.Textllwz.getData()}
</#if>
</th>
<td class= "lastpayment tdright"></td>
</tr>
<tr>
<th class="title">
<#if (Title.Textemqv.getData())??>
${Title.Textemqv.getData()}
</#if>
</th>
<td class= "firstsales tdright"></td>
</tr>
<tr>
<th class="title">
<#if (Title.Text2877.getData())??>
${Title.Text2877.getData()}
</#if>
</th>
<td class= "lastsales tdright"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
function createNodeEl(element) {
return document.createElement(element);
}
function appendEl(parent, el) {
return parent.append(el);
}
function addCommasLargeNum(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
$(document).ready(function () {
const creditText = $('#${randomNamespace} .creditLimitText');
const spentDisplayer = $('#${randomNamespace} .spentDisplayer');
const customerNum = $('#${randomNamespace} .customer__number');
const customerName = $('#${randomNamespace} .customer__name');
const customerStreetAdd = $('#${randomNamespace} .customer__street-address');
const customerCityStateZip = $('#${randomNamespace} .customer__city-state-zip');
const customerCountry = $('#${randomNamespace} .customer__country');
const openorders = $('#${randomNamespace} .openorders');
const billedamount = $('#${randomNamespace} .billedamount');
const dueamount = $('#${randomNamespace} .dueamount');
const futureamount = $('#${randomNamespace} .futureamount');
const ordersmtd = $('#${randomNamespace} .ordersmtd');
const ordersytd = $('#${randomNamespace} .ordersytd');
const orderslytd = $('#${randomNamespace} .orderslytd');
const lastpayment = $('#${randomNamespace} .lastpayment');
const firstsales = $('#${randomNamespace} .firstsales');
const lastsales = $('#${randomNamespace} .lastsales');
let limitOut ="";
let spentOut ="";
const sxapiSFCustomerSummary = "https://[url of tenant]/o/generic-api/customerinformation";
fetch(sxapiSFCustomerSummary, {
method: "GET"
})
.then((res) => res.json())
.then(function (data) {
<#if getterUtil.getBoolean(Booleanfw67.getData())>
console.log("Customersummary information:");
console.log(data);
console.log("test " + data['t-custsummary'][0]);
</#if>
if(data.cErrorMessage !== "")
{
console.log("Error in credit component, summary");
console.log(data.cErrorMessage);
console.log(document.getElementById("#${randomNamespace}.error"));
document.getElementById("creditcarderror").style.display= "block";
document.getElementById("spinner").style.display= "none";
document.getElementById("main").style.display= "block";
}else{
let customerInfoDetails = data['t-custsummary'][0];
// Credit due
spentOut = customerInfoDetails['amtdue']+${Decimal1dqq.getData()}
appendEl(dueamount, (addCommasLargeNum(spentOut)));
// -- customer name
let customerNameOutput = customerInfoDetails['custname'];
appendEl(customerName, customerNameOutput);
// -- customer street
let customerStreetAddOutput = customerInfoDetails['addr1'];
appendEl(customerStreetAdd, customerStreetAddOutput);
// -- customer city state zipcode
let customerCityStateZipOutput = customerInfoDetails['city'] + " " + customerInfoDetails['state'] + " " + customerInfoDetails['zipcd'];
appendEl(customerCityStateZip, customerCityStateZipOutput);
// -- customer country
let customerCountryOutput = customerInfoDetails['countrycd'];
appendEl(customerCountry, customerCountryOutput);
// -- openorder
let openordersout = customerInfoDetails['openordamt'];
appendEl(openorders, openordersout);
// -- ordersmtd
let ordersmtdout = customerInfoDetails['salesMTD'];
appendEl(ordersmtd, ordersmtdout);
// -- ordersytd
let ordersytdout = customerInfoDetails['salesYTD'];
appendEl(ordersytd, ordersytdout);
// -- orderslytd
let orderslytdout = customerInfoDetails['salesLYTD'];
appendEl(orderslytd, orderslytdout);
// -- futureamount
let futureamountout = customerInfoDetails['futureamt'];
appendEl(futureamount, futureamountout);
// -- billedamount
let billedamountout = customerInfoDetails['billprdamt'];
appendEl(billedamount, billedamountout);
// -- firstsales
let firstsaleout = customerInfoDetails['firstsaledt'];
appendEl(firstsales, firstsaleout);
// -- lastsales
let lastsaleout = customerInfoDetails['lastsaledt'];
appendEl(lastsales, lastsaleout);
//Get creditcard
const sxapiSFCredit = "https://[url of tenant]/o/generic-api/credit";
fetch(sxapiSFCredit, {
method: "GET"
})
.then((res) => res.json())
.then(function (data) {
//Log data to console for debug
<#if getterUtil.getBoolean(Booleanfw67.getData())>
console.log("Credit information:");
console.log(data);
</#if>
if(data.cErrorMessage !== "")
{
console.log("Error in credit component, credit");
console.log(data.cErrorMessage);
document.getElementById("creditcarderror").style.display= "block";
document.getElementById("main").style.display= "block";
document.getElementById("spinner").style.display= "none";
}else{
let customerCreditDetails = data;
lastPaymentAmoutOut = customerCreditDetails['lastPaymentDate'];
appendEl(lastpayment,lastPaymentAmoutOut);
limitOut = customerCreditDetails['creditLimit'];
appendEl(spentDisplayer, (addCommasLargeNum(spentOut)+ " <#if (oflable.getData())??>${oflable.getData()}</#if> " + addCommasLargeNum(limitOut)));
if(spentOut == 0)
{
document.getElementById("filler").style.width = "0%";
}else{
document.getElementById("filler").style.width = ((spentOut/limitOut)*100).toFixed(1)+"%";
}
document.getElementById("spinner").style.display= "none";
document.getElementById("main").style.display= "block";
}
})
.catch(function (error) {
console.log(error);
document.getElementById("creditcarderror").style.display= "block";
})
}
})
.catch(function (error) {
console.log(error);
document.getElementById("creditcarderror").style.display= "block";
})
});
</script>