Monday, December 26, 2016

Create a JQuery Template in SharePoint

Script File :-

<script src="../../SiteAssets/jquery.tmpl.js"></script>

function CreateJqueryTemplate()
{
     $(".hideThead").show();
    $("#itemList tbody").children().remove();
    items.push({
          Link: url,
 Department: upgdept,
 Confirmed: confirmedStatus,
 Answered: approvedStatus,
 Unanswered: pendingStatus,
 UPGLink: upg
        });
    $( "#itemTemplate" ).tmpl( items ).appendTo( "#itemList tbody" );
}

<script id="itemTemplate" type="text/x-jquery-tmpl">
<tr>
  <td style="background-color:#E6E6E6"><a target="_blank" href="${Link}">Resp_Main_Link : ${Department}</a></td>
  <td style="background-color:#E6E6E6">${Confirmed}</td>
  <td style="background-color:#E6E6E6">${Answered}</td>
  <td style="background-color:#E6E6E6">${Unanswered}</td>
</tr></script>

Aspx File :-

<tr>
<td width="100%">
<table id="itemList" border="1" style="border-collapse:collapse" width="100%">
<thead class="hideThead"><tr>
<td width="25%" align="center" style="background-color:#0078ae;color:white"><b>Target Department</b></td>
<td width="25%" align="center" style="background-color:#0078ae;color:white"><b>Confirmed</b></td>
<td width="25%" align="center" style="background-color:#0078ae;color:white"><b>Answered</b></td>
<td width="25%" align="center" style="background-color:#0078ae;color:white"><b>Unanswered</b></td>
</tr></thead>
<tbody></tbody></table>
 </td>
</tr>

No comments:

Post a Comment

Clearing Person/Group Values

To clear out or empty the values in person or group columns, how you do it depends on if the column is single-value or multi-value. For ...