Sample SFDC Query Template

See the sample code below, or download the Sample_template.txt file attached to this article. 

<style>
#tableExport th, #tableExport td {
.container {
width:100% !important;
max-width: 1300px !important;
}
.samewidth{
width:100px;
}
.table.table-striped.small {
overflow: scroll;
height: 600px;
display: block;
}
table.table.table-striped.small tr th:nth-of-type(1),
table.table.table-striped.small tr td:nth-of-type(1),
table.table.table-striped.small tr th:nth-of-type(10),
table.table.table-striped.small tr td:nth-of-type(10) {
min-width: 100px !important;
}

white-space: nowrap;
}
</style>

<script>
$('#export_btn').click(function () {
var btn = $(this);
btn.button('loading');
setTimeout(function () {
btn.button('reset');
}, 2000);
});

var app = angular.module('ziftAppModule',[]);
app.filter('replaceCommas', function() {
return function(input) {
return input.replace(/,/g,'');
};
});

var angScope = getScope('ziftAppModule');
angScope.monthFilter;
angScope.yearFilter;

$(document).on("change",".month_filter",function(){
var monthName = $(this).children('option:selected').text();
if(monthName == 'Select a month'){
angScope.monthFilter = "";
$("#sfdc-query-list table th.clickable:last").click();
}
else{
filterMonth(monthName);
}
});

$(document).on("change",".year_filter",function(){
var yearVal = $(this).children('option:selected').text();
if(yearVal == 'Select a year'){
angScope.yearFilter = "";
$("#sfdc-query-list table th.clickable:last").click();
}
else{
filterYear(yearVal);
}
});

function getScope(ctrlName) {
var sel = 'html[ng-app="' + ctrlName + '"]';
return angular.element(sel).scope();
}
function filterMonth(monthName){
angScope.monthFilter = monthName;
$("#sfdc-query-list table th.clickable:last").click();
}
function filterYear(year){
angScope.yearFilter = year;
$("#sfdc-query-list table th.clickable:last").click();
}
function clearFilters(){
$(".searchField").val('');
$("select.month_filter").children("option:first").prop('selected', true);
$("select.year_filter").children("option:first").prop('selected', true);
angScope.searchText = "";
angScope.monthFilter = "";
angScope.yearFilter = "";
$("#sfdc-query-list table th.clickable:last").click();
}
angScope.exportResults2 = function(data) {
const blob = new Blob(["\ufeff", data], {
type: 'text/csv;charset=utf-8'
});
const link = document.createElement('a');
link.download = 'export.csv';
link.href = window.URL.createObjectURL(blob);;
link.click();
}

angScope.exportTable2 = function(tableSelector) {
var table = angular.element(tableSelector)[0];
var csvString = '';
if (table) {
for (var i = 0; i < table.rows.length; i++) {
var rowData = table.rows[i].cells;
for (var j = 0; j < rowData.length; j++) {
var text = rowData[j].innerText || rowData[j].textContent;
text = text.replace(/"/g, '\\\"');

if (Date.parse(text) && text.split(/[\-\/]+/).length == 3) {
text = new Date(text+' 00:00:00.000Z').toISOString().substring(0,10);
}
else {
text = '"' + text + '"'; // wrap in quotes so commas in the string do not lead to data in wrong cols
}

csvString = csvString + text + ",";
}
csvString = csvString.substring(0, csvString.length - 1);
csvString = csvString + "\n";
}
csvString = csvString.substring(0, csvString.length - 1);
}
return angScope.exportResults2(csvString);
}
</script>

<div id="sfdc-query-list" class="row list-view entrust-table">
<div class="col-md-12">
<div class="row zift-header">
<div class="col-sm-8">
<h2>
Deal Registration: Opportunity Details
</h2>
</div>
</div>

<div class="row">

<div class="col col-md-1 text-right" >
<a ng-click="exportTable2('#tableExport');" download='DealRegOppDetails.csv' class="btn btn-default" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i>" id="export_btn"> Export to CSV</a>
</div>
</div>

<div class="row">
<div>
<div class="row zift-header">
<h3>{{ r.name | i18n }}</h3>
</div>
<table class="table table-striped small" id="tableExport">
<thead>
<th>{{ 'Created Date' | i18n }}</th>
<th>{{ 'Entrust Sales Rep' | i18n }}</th>
<th>{{ 'Account' | i18n }}</th>
<th>{{ 'Opportunity ID' | i18n }}</th>
<th>{{ 'Primary Product Interest' | i18n }}</th>
<th>{{ 'End Customer' | i18n }}</th>
<th>{{ 'Amount' | i18n }}</th>
<th>{{ 'Currency' | i18n }}</th>
<th>{{ 'Stage' | i18n }}</th>
<th>{{ 'Close Date' | i18n }}</th>
<th class="samewidth">{{ 'Lost Reason' | i18n }}</th>
<th class="samewidth">{{ 'Won Reason' | i18n }}</th>
</thead>
<tbody>
<tr ng-repeat="r in queryResults.list">
<td class="text-right">{{ r.CreatedDate | date:'MM-dd-yyyy'}}</td>
<td class="text-right">{{ r.Owner.Name }}</td>
<td class="text-right">{{ r.Partner_Text__c}}</td>
<td class="text-right">{{ r.Auto_Gen_Opportunity_ID__c }}</td>
<td class="text-right">{{ r.Deal_Reg_Primary_Product_Interest_Text__c}}</td>
<td class="text-right">{{ r.End_Customer__r.Name }}</td>
<td class="text-right">{{ r.Amount | number}}</td>
<td class="text-right">{{ r.CurrencyIsoCode }}</td>
<td class="text-right">{{ r.StageName }}</td>
<td class="text-right">{{ r.CloseDate | date:'MM-dd-yyyy' }}</td>
<td class="text-right">{{ r.Lost_Reason__c }}</td>
<td class="text-right">{{ r.Won_Reason__c }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>