Delete "button" on child item with refresh for document library

Forums vLooup for SharePoint Delete "button" on child item with refresh for document library

This topic contains 24 replies, has 6 voices, and was last updated by  Alexander Bautz 6 days, 12 hours ago.

  • Author
    Posts
  • #9968

    chgrnet
    Participant

    Is there a way for you to add a delete button option associated with a child item that shows in a parent list? And once the item is deleted, refresh your vLookup list?

  • #9993

    avala
    Participant

    On a similar note, when you delete a child item from the “popup” window it refreshes the parent item- loosing any work you may have done. Would love to see this “fixed.”

  • #10072

    Alexander Bautz
    Keymaster

    I’m not sure how to prevent the automatic refresh of the parent when deleting a child item in a dialog, but you can add a delete button to vLookup like described below.

    Add this code to vLookup:
    In the ViewFields section in the vLookup backend, add a “custom field” (not an actual field in the list) by adding this in the “Field” input:

    [Custom field]

    Then add this to the “Special configuration”:

    {"function":"init_delete_vLookuChild"}

    Then add this in the custom js textarea:

    function init_delete_vLookuChild(a,item){
    	return "<span style='cursor:pointer' onclick='doDeleteItem(\""+item.get_item("ID")+"\")'>Delete</span>";
    }
    
    function doDeleteItem(id){
    	if(confirm("Are you sure you want to delete this item?")){
    		var dRes = spjs.utility.deleteItem({"listName":"New Task(s)","id":id});
    		if(dRes.success){
    			$("#vLookupManualRefresh_vLookupTasks").click();
    		}
    	}
    }

    PS: Change the field name “vLookupTasks” for your own field.

    You should now have a custom “link” in your vLookup table to delete the child item.

    Alexander

    • #10348

      chgrnet
      Participant

      I apologize if I am missing something simple, but when I follow these instructions, I get the error I attached. Did I setup the ViewField correctly? Maybe I need to create an actual field?

  • #10365

    Alexander Bautz
    Keymaster

    I’m actually not sure when I added support for using [custom field], but just change it for “ID” and it should work.

    Alexander

    • #10371

      chgrnet
      Participant

      I am using 2.252 of vLookup. I did try ID and it did not fail, but it just showed the ID number and there was no link.

  • #10401

    Alexander Bautz
    Keymaster

    This version should handle the custom function setup so it might be something else. Do you see any errors in the developer console (hit F12 > Console)?

    Alexander

    • #10411

      chgrnet
      Participant

      No errors, just what I included in the screen shots above.

  • #10447

    Alexander Bautz
    Keymaster

    Hi,
    Are you 100% sure the vLookup frontend file is up to date in the form?

    Alexander

  • #12175

    Říha Michal
    Participant

    Hi,
    I have no error, but nothing is deleted.
    I try change listName “New Task(s)” to my name of document library but with no success.

    var dRes = spjs.utility.deleteItem({"listName":"New Task(s)","id":id});

    Michal

  • #12177

    Říha Michal
    Participant

    I solved it. For child document library – delete document. It is not possible delete via item ID but you need exact document url.
    Here it is – JS in textarea:

    
    
    function init_delete_vLookuChild(a,item){
    	return "<span style='cursor:pointer' onclick='deleteItem2(\""+ item.get_item('FileDirRef') + "/"+ item.get_item('FileLeafRef') + "\")'>Smazat</span>";
    }
    
    function deleteItem2(URL,fin){
    	var r = confirm("Smazat přílohu:" + URL);
    	if (r == false) return;
    	var clientContext;
    	var oWebsite;
    	var fileUrl=URL;
    	clientContext = new SP.ClientContext.get_current();
    	oWebsite = clientContext.get_web();
    	clientContext.load(oWebsite);
    	clientContext.executeQueryAsync(
    		function () 
    		{
    			this.fileToDelete = oWebsite.getFileByServerRelativeUrl(fileUrl);
    			this.fileToDelete.deleteObject();
    			clientContext.executeQueryAsync(
    				Function.createDelegate(this, successHandler),
    				Function.createDelegate(this, errorHandler)
    			);
    			 }, errorHandler);
    	function successHandler() {
          $("#vLookupManualRefresh_vLookupOpravneni").click();
          $("#vLookupManualRefresh_vLookupUcet").click();
          $("#vLookupManualRefresh_vLookupExistence").click();
          $("#vLookupManualRefresh_vLookupDramaturgickyPlan").click();
          $("#vLookupManualRefresh_vLookupLiterarniUkazka").click();
          $("#vLookupManualRefresh_vLookupPodrobnyPopis").click();
          $("#vLookupManualRefresh_vLookupZivotopis").click();
          $("#vLookupManualRefresh_vLookupProspekty").click();
          $("#vLookupManualRefresh_vLookupPrehledAkci").click();
          $("#vLookupManualRefresh_vLookupScenar").click();
          $("#vLookupManualRefresh_vLookupVyrocniZpravy").click();
    	}
    	function errorHandler()   {alert("Error"); }
    }

    I have several vLookups in parent list and I only do not know, how to call “refresh” for particular vLookup – according to vLookup in which I use delete function. Therefore I call vLookupManualRefresh for all of them.
    Alexander, do you have some idea, how to refresh only current vLookup?
    Michal

  • #12235

    Alexander Bautz
    Keymaster

    I’m glad you figured it out. I did not catch that you tried to delete a document.

    You can use “my method” by adding the “docFullUrl” like this:

    function init_delete_vLookuChild(a,item){
    	return "<span style='cursor:pointer' onclick='deleteItem(\""+item.get_item('ID')+"\",\""+ item.get_item('FileDirRef') + "/"+ item.get_item('FileLeafRef') + "\")'>Smazat</span>";
    }
    
    function doDeleteItem(id,docURL){
    	if(confirm("Are you sure you want to delete this item?")){
    		var dRes = spjs.utility.deleteItem({"listName":"DocumentLibrary_GUID_OR_DISPLAY_NAME","id":id,"docFullUrl":docURL});
    		if(dRes.success){
    			$("#vLookupManualRefresh_vLookupTasks").click();
    		}
    	}
    }

    Alexander

    • This reply was modified 3 years, 3 months ago by  Alexander Bautz. Reason: Fixed typo
  • #12747

    Říha Michal
    Participant

    Thanks, your method works perfect.

    Is it possible to call #vLookupManualRefresh only for affected vLookup? I have 12 vLookups and need refresh only one that I am working with. I can do 12 doDeletexy() functions but I am not sure if it is perfect sollution.

    Michal

  • #12781

    Alexander Bautz
    Keymaster

    Yes, the selector has the field name in it: vLookupManualRefresh_vLookupTasks so you can target one field specifically.

    You can also call the function like this:

    spjs.vLookup._init("vLookupTasks",false,true);

    Change “vLookupTasks” for your field.

    Alexander

  • #13595

    Říha Michal
    Participant

    Yes it works – but not in list view. How is it possible to refresh vlookup after item delete in list view?
    Many thanks
    Michal

  • #13613

    Alexander Bautz
    Keymaster

    Hi,
    Of course you could reload the entire list view, but I guess this is not what you want?

    Currently there is not built in method to refresh only one “line” in a list view. I’ll see if can get this added to a new release, but currently you can remove the deleted like like this snippet shows:

    <script>
    function init_delete_vLookuChild(a,item){
    	return "<span style='cursor:pointer' onclick='doDeleteItem(this,\""+item.get_item("ID")+"\")'>Delete</span>";
    }
    
    function doDeleteItem(elm,id){
    	if(confirm("Are you sure you want to delete this item?")){
    		var dRes = spjs.utility.deleteItem({"listName":"The list formerly known as Tasks","id":id});
    		if(dRes.success){
    			if(spjs.vLookup.data.isListView){
    				// Remove deleted line in list view
    				$(elm).parents(".vLookupTableRow:first").remove();
    			}else{
    				$("#vLookupManualRefresh_vLookupTasks").click();
    			}		 
    		}
    	}
    }
    </script>

    It will not recalculate “totals”, but it will remove the line from the table.

    Alexander

  • #13625

    Říha Michal
    Participant

    Hi Alexander,

    thanks, but how to change the code for deleting document from document library. I use this code with no “elm”:

    
    
    <script type="text/javascript">
    function init_delete_vLookuChild(a,item){
        return "<span style='cursor:pointer; font-style: italic; color: gray;' onclick='deleteItem3(\""+item.get_item('ID')+"\",\""+ item.get_item('FileDirRef') + "/"+ item.get_item('FileLeafRef') + "\")'>Delete</span>";  
    }
    
    function deleteItem3(id,docURL){
    	if(confirm("Delete document:" + docURL + "?")){
    		var dRes = spjs.utility.deleteItem({"listName":"7BBBADE3-1C24-417C-991E-BCF007CD6873","id":id,"docFullUrl":docURL});
    		if(dRes.success){
    	  spjs.vLookup._init("vLookupVyuctovani",false,true);
              //$("#vLookupManualRefresh_vLookupVyuctovani").click();
            }
    	}
    }
    </script>

    How to refresh entire list view? I suppose I can use it as well.

    Thanks a lot

    Michal

  • #13650

    Alexander Bautz
    Keymaster

    Try this:

    <script type="text/javascript">
    function init_delete_vLookuChild(a,item){
        return "<span style='cursor:pointer; font-style: italic; color: gray;' onclick='deleteItem3(this,\""+item.get_item('ID')+"\",\""+ item.get_item('FileDirRef') + "/"+ item.get_item('FileLeafRef') + "\")'>Delete</span>";  
    }
    
    function deleteItem3(elm,id,docURL){
    	if(confirm("Delete document:" + docURL + "?")){
    		var dRes = spjs.utility.deleteItem({"listName":"7BBBADE3-1C24-417C-991E-BCF007CD6873","id":id,"docFullUrl":docURL});
    		if(dRes.success){
    			// Remove deleted line in list view
    			$(elm).parents(".vLookupTableRow:first").remove();
    			// Or use this to refresh the page
    			// location.href = location.href;
            }
    	}
    }
    </script>

    I added “this” to the call to “deleteItem3” and picked up “elm” in the function. The “refresh entire page” looks a bit strange with location.href = location.href, but the reason for not using location.reload() is to avoid the “Confirm form Resubmission” alert in the list view.

    Hope this helps,
    Alexander

  • #13666

    Říha Michal
    Participant

    Works perfect!

    Note: ID column must be present in view.

    Thanks a lot

    Michal

  • #18371

    Greg Yamane
    Participant

    Sorry, read through the above trail and am trying to understand what is the solution to delete a child item from a list, not a document from a document library? Is it the solution posted in comment 10072?

    https://spjsblog.com/forums/topic/delete-button-on-child-item-with-refresh-for-document-library/#post-10072

  • #18394

    Alexander Bautz
    Keymaster

    Hi,
    Same approach as in the above snippet, but remove the “docFullUrl” part as this is only used in documents.

    Alexander

  • #26420

    MYH
    Participant

    Hi Alex, when we make the vLookup field as read only the delete button will be clickable?

    • #26425

      Alexander Bautz
      Keymaster

      I’ll fix it so any custom button will be disabled when setting it as readonly.

      Alexander

  • #27254

    MYH
    Participant

    HI alex any update please on this?

  • #27266

    Alexander Bautz
    Keymaster

    This was fixed in DFFS package v4.4.4.2 published on July 31, 2019: https://spjsblog.com/dffs/dffs-change-log/#SPJS-vLookup_v22135

    Any buttons (also ones inserted in custom code) will be removed if the field is set as readonly. Please note that only buttons created like this:

    <input type="button" onclick="myClickFunction()" value="My button">

    and not like this:

    <button onclick="myClickFunction()">My button</button>

    This is handled in the DFFS_frontend.css file so this must be updated for this to apply.

    Let me know if you have any questions.

    Alexander

You must be logged in to reply to this topic.