<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="https://gkms.sharepoint.com/sites/Khaitan/SiteAssets/jquery-3.1.1.js"></script>
<script type="text/javascript" src="https://gkms.sharepoint.com/sites/Khaitan/SiteAssets/jeditable.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js"></script>
<script type="text/javascript" src="https://gkms.sharepoint.com/sites/Khaitan/SiteAssets/jquery.SPServices-2014.02.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', retrieveListItems);
ExecuteOrDelayUntilScriptLoaded(CallOut, "callout.js");
var aHtml="";
var rowID;
var siteUrl = "https://gkms.sharepoint.com/sites/Khaitan/";
var restUrl="";
function retrieveListItems() {
// This piece of code retrieves list items from the list called "Resources"
// you can change the name of the list in the variable 'listName'
// Also, the fields revieved are 'ows_Title' and 'ows_Cost', you can change those too
$().SPServices({
operation: "GetListItems",
async: false,
listName: "KhaitanDocLib",
CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='EncodedAbsUrl'/></ViewFields>",
completefunc: function (xData, Status) {
//alert(xData.responseText);
$(xData.responseXML).SPFilterNode("z:row").each(function () {
var aHtml = "<a href=" + $(this).attr("ows_EncodedAbsUrl") + ">" + $(this).attr("ows_Title") + "</a>";
var tdHtml = "<tr class='gradeX' id='" + $(this).attr("ows_ID") + "'> <td class='DocLinkID'>" + aHtml + "</td>";
tdHtml += "<td class='two'>" + $(this).attr("ows_PracticeArea") + "</td>";
$(".tablebodyresources").append(tdHtml);
});
}
});
// the table is constructed dynamically where results are going to be placed
var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '<img class="editRowIMG" src="https://gkms.sharepoint.com/sites/Khaitan/Style Library/details_open.png" height="25" width="25" alt="EDIT"><img class="delItemImg" src="https://gkms.sharepoint.com/sites/Khaitan/Style Library/Delete.png" height="25" width="25" alt="Delete">';
nCloneTh.innerHTML = 'Actions';
nCloneTd.className = "center";
// this is an 'Add' image inserted in front of each row
$('#resourcepool thead tr').each(function () {
//this.insertBefore( nCloneTh, .childNodes[0]);
$(this).append(nCloneTh);
});
$('#resourcepool tbody tr.gradeX').append(nCloneTd);
var resourceTable = $('#resourcepool').dataTable();
//this is an event handler to handle users clicking on the 'Add' image in front of each row
$('#resourcepool').on( 'click', 'tbody tr .DocLinkID', function () {
rowID=this.parentElement.id;
//alert(rowID);
restUrl = "https://gkms.sharepoint.com/sites/Khaitan/_api/web/lists/getbytitle('KhaitanDocLib')/items("+rowID+")";
$.ajax({
url: restUrl,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
var metaDataCols ="";
$("#metadatav").html(metaDataCols);
alert("success");
$("#frame").attr("src", data.d.ServerRedirectedEmbedUrl);
metaDataCols="<table><tr><td>Practice Area:</td><td>"+data.d.PracticeArea+"</td><td>Sub Practice Area:</td><td>"+data.d.SubPracticeArea+"</td></tr>";
metaDataCols +="<tr><td>Comments</td><td>"+data.d.Comments+"</td></tr><table>";
$("#metadatav").append(metaDataCols);
$("#openDocID").attr("href", data.d.ServerRedirectedEmbedUrl);
GetDocNameLinkURL();
},
error: function (data) {
alert("error");
}
});//onclick of row
});
}//retrieve item method
function GetDocNameLinkURL(){
restUrl="https://gkms.sharepoint.com/sites/Khaitan/_api/web/lists/getbytitle('KhaitanDocLib')/items("+rowID+")/File";
$.ajax({
url: restUrl,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function(results){
//alert(results);
var docURL = results.d.LinkingUrl.split('?');
$("#downloadDocID").attr("href",docURL[0]);
var arr = results.d.Name.split('.');
$("#DocNameID").text(arr[0]);
}
});
}
function myFunction(){
alert("Document downloaded");
}// download completes
});//DOCUMENT.READY
</script>
<style type="text/css">
.edit-row-modal {
display: none;
}
</style>
</head>
<body id="dt_example">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="resourcepool">
<thead>
<tr>
<th>Name Of Document</th>
<th>Practice Area</th>
</tr>
</thead>
<tbody class="tablebodyresources"></tbody>
</table>
<div id="mydiv" width="100%" height="100%">
<h1 id="DocNameID"></h1>
<iframe Id="frame" height="440px"></iframe>
<div id="metadatav"></div>
<a id="openDocID"><input type="button" value="Open" ></a>
<a id="downloadDocID" onclick="myFunction()"><input type="button" value="Download" ></a>
</div>
</body>
</html>
