Custom SharePoint 2013 Listview Using Javascript

Sesuai judul posting diatas, Custom Listview SharePoint 2013 Using Javascript

Cara untuk membuat custom view untuk list di SharePoint 2013 cukup mudah. Hal yang perlu kita siapkan adalah sebuah list dan sebuah file javascript yang digunakan untuk melakukan render ulang tampilan standar listview.

Recommended Reading:
Get Attachments SharePoint using Javascript

Untuk dapat menambahkan javascrit di dalam SharePoint, Anda memerlukan SharePoint Designer.
SharePoint Designer 2013 dapat download di-link berikut :

SP Designer 2013 (1/3)
SP Designer 2013 (2/3)
SP Designer 2013 (3/3)

Poin yang ingin saya sampaikan adalah bahwa utuk melakukan manipulasi tampilan di SharePoint, Anda hanya perlu melakukan manipulasi rendering menggunakan javascript pada saat list telah diload dan sudah dalam bentuk HTML selain itu kita dapat memanfaatkan SP.js yang telah disediakan oleh SharePoint yang berisi class yang diguakan untuk mengakses web service yang terdapat pada SharePoint.

Dibawah ini contoh skrip untuk melakukan manipulasi pada SharePoint List :

var d = document;
var siteSOP = "/directorates/hrga/hrsop/";
var siteSOPAttachments = "/directorates/hrga/hrsop/Lists/Job Description V2/Attachments/"

SP.SOD.executeFunc('SP.js', 'SP.ClientContext', retrieve);
function retrieve() {
var clientContext = new SP.ClientContext(siteSOP);
    var oList; 
    if (d.getElementById("div_jobdesc") != null){
oList = clientContext.get_web().get_lists().getByTitle('Job Description V2');
}        
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml(
        '<View><Query>' + 
        '<Where><Geq><FieldRef Name=\'ID\'/>' + 
        '<Value Type=\'Number\'>1</Value></Geq></Where>' +
        '<OrderBy><FieldRef Name=\'Location\' Ascending=\'TRUE\'/></OrderBy>' + 
        '<OrderBy><FieldRef Name=\'Directorate\' Ascending=\'TRUE\'/></OrderBy>' + 
        '<OrderBy><FieldRef Name=\'Function\' Ascending=\'TRUE\'/></OrderBy>' +
        '<OrderBy><FieldRef Name=\'Job Description\' Ascending=\'TRUE\'/></OrderBy>' +
        '</Query>' + 
        '</View>'
    );
    this.collListItem = oList.getItems(camlQuery);        
    clientContext.load(collListItem);
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceededLink), 
        Function.createDelegate(this, this.onQueryFailedLink)
    );
} 

function onQuerySucceededLink(sender, args) {
    var stable = '';
    var listItemEnumerator = collListItem.getEnumerator();    
    var i = 0;
    stable += "<table id='tbljobdesc' style='width:100%;' border='1'>";
    stable += "<tr style='background-color:black; color:white;'>";      
stable += "<th style='width:30%;'>Job Descriptions</th>";
stable += "<th style='width:10%;'>Location</th>";
stable += "<th style='width:20%;'>Directorate</th>";
stable += "<th style='width:20%;'>Function</th>";
stable += "<th style='width:15%;'>Department</th>";
stable += "<th></th>";
stable += "</tr>";
    while (listItemEnumerator.moveNext()) {
    i += 1;          
        var oListItem = listItemEnumerator.get_current();        
stable += "<tr id='tr" + i + "'>";      
stable += "<td id='tr" + i + "_td0'>" + oListItem.get_item('Title') + "</td>";
stable += "<td id='tr" + i + "_td1'>" + oListItem.get_item('Location') + "</td>";
stable += "<td id='tr" + i + "_td2'>" + oListItem.get_item('Directorate') + "</td>";
stable += "<td id='tr" + i + "_td3'>" + oListItem.get_item('Function') + "</td>";
stable += "<td id='tr" + i + "_td4'>" + oListItem.get_item('Department') + "</td>";
stable += "<td>";
stable += "<input type='text' id='input" + i + "' value='" + oListItem.get_item('ID') + "' style='display:none' />";
stable += "<div id='div" + i + "'></div>";
stable += "</td>";
stable += "</tr>";
}
  stable += "</table>";  
if (d.getElementById("div_jobdesc") != null){
d.getElementById("div_jobdesc").innerHTML = stable.toString();
}
}

function onQueryFailedLink(sender, args) {
    if (d.getElementById("div_jobdesc") != null){
d.getElementById("div_jobdesc").innerText = 'Request Job Description. ' + args.get_message();
}
}

Semoga sedikit pencerahan diatas dapat bermanfaat dan jika ada yang ingin ditanyakan lebih detail, silahkan memberika komentar di bawah.



Salam,