Button on SPO Page that copies the URL of an item in a list view web part with a checkmark next to it

Question

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!

Answer 1

Assuming SPO is in classic mode:

1. Make sure script editor web-part is available. If not, follow the steps here to enable it.
2. Edit the viewing page and add a script editor web part and then insert the script
3. 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>