Recently I created
a jQuery add-in that was supposed to add a custom button to each document in
the document library. I found 2 different approaches for the same.
1. Edit XML of the document library in designer.
2. Create a J Query add-in that would add a
custom button.
I found
Approach 1 to be easy to do but it was risky to modify the XML of the Document
library. So the only option that I was left with was to create a j Query add-in.
There can be
number of requirements for which you may need to add a custom button to
document library, lets take an example of adding a custom download a copy
button to each item of document library.
Below is the
code sample that will add a download a button link to your document library
<script
type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script
type="text/javascript">
//Declaration
//Position
of the button
var buttonPosition
= 3; // Value must me greater than 1
var idArray
= "";
var siteUrl;
//Executes
when document is ready
$(document).ready(function(){
//Gets Web's absolute url
siteUrl=_spPageContextInfo.webAbsoluteUrl;
//Gets url of title link button
of item
idArray = document.getElementsByClassName("ms-listlink");
//Custom method to add Button to
library
AddCustomButton ();
});
//Add button
to each item in library
function AddCustomButton()
{
var i=0;
//Fetch Table header row
$('#onetidDoclibViewTbl0 thead
tr').each(function()
{
$(this).find('th').each(function($index){
//check position
of current th
if($index ==
buttonPosition)
{
//
Add a blank header so that Headers remain aligned
$(this).after('<th><a
unselectable="on"
class=""
aria-describedby="Ribbon.Documents.Copies.Download_ToolTip"
mscui:controltype="Button" role="button" id="Ribbon.Documents.Copies.Download-Large"></a></th>');
}
});
});
//Try to get library rows
$('#onetidDoclibViewTbl0 tbody
tr').each(function()
{
var
isFolder = false;
{
// find column's
position
$(this).find('td').each(function($index){
var imgTag =
$(this).find('img');
if(imgTag
!= undefined)
{
var
srcUrl = imgTag.attr('src');
if(srcUrl
!= undefined && srcUrl.indexOf("folder.gif") > 0)
{
isFolder=true;
}
else
{
//if
position matches
if($index
== buttonPosition && isFolder == false)
{
//generate
"Download a copy" menu option like url
var
url = siteUrl + "/_layouts/15/download.aspx?SourceUrl="+idArray[i]
//
set an image button and add above url to it
$(this).after('<td><a
unselectable="on" title= Download a Copy
href="javascript:;" onclick="window.open(\''+ url + '\')"
class=""
aria-describedby="Ribbon.Documents.Copies.Download_ToolTip"
mscui:controltype="Button" role="button" id="Ribbon.Documents.Copies.Download-Large">Download
a Copy'</a></td>');
}
if($index
== buttonPosition && isFolder == true)
{
$(this).after('<td><a
unselectable="on" title="" href="javascript:;"
class="" aria-describedby="Ribbon.Documents.Copies.Download_ToolTip"
mscui:controltype="Button" role="button"
id="Ribbon.Documents.Copies.Download-Large"></a></td>');
}
}
}
});
}
// counter to get values from
idArray
i++;
});
}
</script>
You can use
this snippet for number of options that can be added to a document library.
Regards,
Keyur Pandya
Comments
Post a Comment