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

[chgrnet]

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?

[avala]

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.”

[Alexander Bautz]

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

[chgrnet]

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?

Attachments:

1. 

   CustomFieldError.png
   

2. 

   CustomField.png
   

[Alexander Bautz]

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

Alexander

[chgrnet]

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.

[Alexander Bautz]

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

[chgrnet]

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

[Alexander Bautz]

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

Alexander

[Michal Riha]

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

[Michal Riha]

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

[Alexander Bautz]

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 8 years, 4 months ago by Alexander Bautz. Reason: Fixed typo

[Michal Riha]

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

[Alexander Bautz]

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

[Michal Riha]

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

[Alexander Bautz]

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

[Michal Riha]

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

[Alexander Bautz]

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

[Michal Riha]

Works perfect!

Note: ID column must be present in view.

Thanks a lot

Michal

[Greg Yamane]

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

[Alexander Bautz]

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

Alexander

[HYM]

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

[Alexander Bautz]

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

Alexander

[HYM]

HI alex any update please on this?

[Alexander Bautz]

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

[William Ellis]

I have noticed that the ‘Delete’ word does not appear in my ListViews, only on the forms where I am showing the child records. Is there something else I have to do to have the delete functionality in a listview?

[Alexander Bautz]

Hi,
The reason it does not work in a list view is because the custom js you have added in the form does not load in a list view. You can try to add a script editor web part in the list view to include the relevant custom js there (wrapped in a script tag).

Alexander

[Steve]

Hi Alex,
that’s perfect solution for deleting child items in the parent folder, but I’d like to ask you how to delete the parent folder. I’m also sending the attachment where you can see the folder and child item inserted. When I click on “Smazat” it’s asking me if I am aware of deleting the item – I press OK and the child item is deleted.
But, I’d like to delete also the parent folder.
Would you help me with that?
Thank you
Steo

Attachments:

1. 

   Delete_folderparent.png
   

[Alexander Bautz]

Sorry for the late reply.

The folder is a separate item in the list and if you want to delete it when the last item inside it is deleted you must use some custom js. When when you delete an item this code must find the folder of the item you are deleting, query this folder for all content to ensure it is empty and then delete it.

You find a code example for deleting a folder here: https://www.c-sharpcorner.com/UploadFile/91b369/delete-a-folder-in-sharepoint-2013-using-javascript-jsom/

See if this gets you on the right track.

Alexander

[Author]

Posts