cancel
Showing results for 
Search instead for 
Did you mean: 
Workflow Hero

Cancel delete on repeating section row

Jump to solution

Is it possible to cancel the delete event on a repeating section row?

I have setup a prompt on the repeating section "RegisterRepeaterRowDeleting" event, if the user presses cancel I am throwing a JavaScript error to stop the row from being deleted, but I don't like this approach and wanted to know if there was any other way to stop the delete event from proceeding.

NWF.FormFiller.Events.RegisterRepeaterRowDeleting(function () {

   var confirmDelete = confirm("Are you sure you want to delete?");

    if (confirmDelete != true) {

       //this is the only way to stop deletion

       throw "Repeater deletion error thrown to cancel deleteion";

      //return false; -> just returning false didn't work

      }

});

NOTE: I have already tried just return false which did not work.

0 Kudos
Reply
6 Replies
Workflow Hero

Re: Cancel delete on repeating section row

Jump to solution

NOTE: If you just want the answer, please scroll down to 'THE ANSWER' section, and see there. Otherwise, happy learning! 




The Problem - Expanded / Explained

While the Nintex Events (some of which are listed here: JavaScript events in Nintex Forms) are indeed things that resemble normal events, they do not behave in the typical way that a native event would. 

Essentially, they are just calls which are triggered after you have initialized a native event on a control. So what's happening is you are clicking the Delete Row <img>?

  1. It fires the native Mouse Click Event
  2. The Mouse Click Event is getting handled by an Event Handler placed on the <img> element during the Repeater Row Generation. 
  3. That Event Handling function (from step 2) calls:
    NWF.FormFiller.Events.ExecuteRepeaterRowDeleting(currentRow);

    Which in turn will execute any functions that you have put inside of:
    NWF.FormFiller.Events.RegisterRepeaterRowDeleting();


    Located in the javascript in your Settings on you Form. 

  4. Once the RegisterRepeaterRowDeleting functions have resolved (if there are any), then it will continue on down making a final call to: 
    NWF.FormFiller.Events.ExecuteRepeaterRowDeleted(thisRepeaterControl);

    Which does the exact same thing as 'Deleting', only that it's called after the Row is gone. 

So, essentially, if you try to use those built in functions you're never going to be able to properly stop the Row from Deleting (unless you throw an exception as you have been) because its already in the middle of the function to delete it making the term 'Nintex Events' very misleading!

But that doesn't solve your problem... 

How do we do that? 

The Answer

We need to stop the 'Click' Event Handler that is set to the <img> ('X' delete button) on each Row during generation. Looking at the above numbered list, we basically need to squeeze something in between Steps 1. and 2. 

We can do that using the following code: 

NWF$(".nf-repeater-deleterow-image").on("click", function(event) {
  var targetElement = NWF$((event.target) ? event.target : event.srcElement);
  var thisRow = targetElement.parents(".nf-repeater-row");
  var siblingRowQty = thisRow.siblings(".nf-repeater-row:not(.nf-repeater-row-hidden)").length;

  if (siblingRowQty > 0) {
    if (!confirm("Are you sure you want to delete?")) {
      event.stopPropagation();
    }
  } else {
    event.stopPropagation();
  }

});


What is this doing differently? Here's the code with comments! 

The Answer - Expanded / Explained

// Instead of us using the built in Nintex Events, we are relying on the native Browser Events. 
// Specifically in this case, we're targeting any Mouse Click
// event that happens on an element with the class "nf-repeater-deleterow-image",
// which just so happens to be that little 'X' button that is on each Repeater Row.

NWF$(".nf-repeater-deleterow-image").on("click", function(event) {

  // First we need to grab the element on the page that our Mouse clicked on.
  // This looks a bit tricky but we're just testing to see if event.target
  // has *something* there otherthan undefined.
  // If it DOES, then we'll return it, and if it doesn't then we'll return
  // whatever is at event.srcElement instead.
  // This entire thing is wrapped in NWF$() so that we get a nice jQuery object
  // instead of an element node.
  //
  // If you're unfamiliar with Conditional Ternary Operators, please see:
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
  var targetElement = NWF$((event.target) ? event.target : event.srcElement);

  // Now that we have our targetElement, we need to find the Repeater Row that it's a part of.
  // We can do this by simply looking for the parent element with the 'nf-repeater-row' class
  // assigned to it.
  var thisRow = targetElement.parents(".nf-repeater-row");

  // Because Nintex will attempt to Delete a Repeater Row section even if there is only (1) Row,
  // we need to take matters into our own hands to prevent this from happening, otherwise,
  // your users will get a notification even when there is technically not a Row to delete.
  // The easiest way that I have found to do this is to just Count the other Rows that are in
  // the section. We can do this by looking at the siblings to our current Row, and returning the length.
  var siblingRowQty = thisRow.siblings(".nf-repeater-row:not(.nf-repeater-row-hidden)").length;

  // If there ARE other Rows then...
  if (siblingRowQty > 0) {

    // Ask the user if they actually want to delete said Row, and return the inverse of the answer.
    // So: OK = false // Cancel = true;
    if (!confirm("Are you sure you want to delete?")) {

      // If the user has Cancled the confirmation, then we need to stop ANY OTHER CLICK EVENT
      // HANLDER DOWN THE CHAIN FROM FIRING (which would include the event handler placed on
      // the <img> 'X' control during the time of Repeater Row generation)!!!

      // We can do this by using the 'stopPropagation()' function!
      // What this does is prevent the event from 'bubbling' up the DOM tree, and will prevent
      // any parent hanlders from being notified of the event! Essentially, this makes it invisible
      // do the default 'click' event handler that is set by the Nintex Repeater Row code!

      // To learn more about event bubbling, see:
      // https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Pro...
      // https://api.jquery.com/event.stoppropagation/
      event.stopPropagation();
    } else {
      // This 'else' block doesn't exist in the code above, but I have included it here
      // in the event that you'd like to do something else when people click on OK.
      // If not, that's alright too!
    }
   
  // If there ARE NOT other Rows then...
  } else {

    // Just like in the blocks above, if there is nothing to actually delete, then we
    // can simply stop the Event from being handled by calling the stopPropagation function.
    event.stopPropagation();
  }
});

I hope this helps you in your mission! 

Reply
Workflow Hero

Re: Cancel delete on repeating section row

Jump to solution

@nmarples Thanks for the detailed explanation and solution. Much appreciated.

0 Kudos
Reply
Workflow Hero

Re: Cancel delete on repeating section row

Jump to solution

Great answer

0 Kudos
Reply
Workflow Hero

Re: Cancel delete on repeating section row

Jump to solution

Thanks. 

Would it be possible to use this to delete the corresponding row id if it exists in the child list?

0 Kudos
Reply
Workflow Hero

Re: Cancel delete on repeating section row

Jump to solution

I have no idea what you're talking about in regards to the problem you're attempting to solve. 

If you're trying to solve a new problem, please start a new thread explaining it in detail and perhaps reference this thread with a link if you believe it to be relevant. 

Without any more details, it's impossible to say whether anything here would or would not be of use. 


0 Kudos
Reply
Workflow Hero

Re: Cancel delete on repeating section row

Jump to solution

Hi.

I am using this Nintex Workflow - Order and Order Items Relationship - Vadim Tabakman  to add and update records to a child list. It works great. The only thing I can not do is when i delete a row in a repeating section in the parent form I need it to delete in the child list as well. If not it becomes and orphan leaving the users not knowing if it should exists or not.

I was thinking I could try to start a workflow and send the OrderItemID to a delete item event. Is this even possible?

Thanks.

0 Kudos
Reply