Button on SPO Page that copies the URL of an item in a list view web part with a checkmark next to it
-
16-02-2021 - |
سؤال
Basically, if ONE document in a document library LVWP is checked, a button should become active. When clicked, the button will copy that document's absolute encoded URL to the clipboard. It doesn't have to be pretty or slick, it just has to work. I don't know how to use powershell and would prefer a solution that could be dropped in the Page's script editor WP.
If there are no items checked or more than one items checked, the button (when clicked) should prompt an alert box saying something like "Make sure only 1 item is checked"
I cannot create a calculated column because I've exceeded my list view threshold. If this wasn't the case, I'd create a calculated column using:
CALUCLATED COLUMN
="<div class='input-group mb-3'>"&"<input type='text' class='form-control text-copyurl'
value='"&urlText&"' id='urlToCopy'>"&"<div class='input-group-append'>"&
"<button class='btn btn-light btn-sm btn-copyurl' onclick='myCopyUrlFunction()'>"&
"<i class='fa fa-clone' aria-pressed='true'></i>"&" "&"Copy"&"</button>
</div>
</div>"
SCRIPT REFERENCE
function myCopyUrlFunction() {
var copyText = document.getElementById("urlToCopy");
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
Thanks in advance!
المحلول
Assuming SPO is in classic mode:
- Make sure script editor web-part is available. If not, follow the steps here to enable it.
- Edit the viewing page and add a script editor web part and then insert the script
- Note: Change the document library name to your document library
Here the script that I've used:
<div>
<input type='button' value='Copy Url of Selected File' onclick="javascript:clickMethod();"/>
<input type='text' value="Url to be copied" id="urlToCopy" style="width:400px;"/>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function clickMethod() {
var ctx = SP.ClientContext.get_current();
var items = SP.ListOperation.Selection.getSelectedItems(ctx);
var selectedId = "";
var selectedAllIds = "";
var selectedDocUrl="";
var selectedFileTitle="";
var item;
var counter=0;
for (item in items)
{
selectedAllIds += '|' + items[item].id;
selectedId=items[item].id;
counter+=1;
}
if(counter==0)
{
alert ("No Document Selected");
}
else if (counter>1)
{
alert ("More than one document selected");
}
else
{
//Replace "OutLookLibrary" with your document library name
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('OutLookLibrary')/items?$filter=ID eq " + selectedId + "&$select=FieldValuesAsText&$expand=FieldValuesAsText";
GetDocFileUrl(url);
}
}
function GetDocFileUrl(url){
$.ajax({
url: url,
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: function(data){
data.d.results.forEach(function(item){ // no need for oldskool for loops
console.log(item);
var docItem=item;
var fileAbsoluteUrl=GetBaseUrl(_spPageContextInfo.webAbsoluteUrl) + docItem.FieldValuesAsText.FileRef;
//update update the txtbox with the absolute URL
$("#urlToCopy").val(fileAbsoluteUrl);
//copy url to clipboard
myCopyUrlFunction();
});
},
error: function(error){
// error handler code goes here
alert("Error Retrieving Data");
}
});
}
function GetBaseUrl(urlFull)
{
var pathArray = urlFull.split( '/' );
var protocol = pathArray[0];
var host = pathArray[2];
var baseUrl= protocol + '//' + host;
return baseUrl;
}
function myCopyUrlFunction() {
var copyText = document.getElementById("urlToCopy");
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
</script>