'Are you sure?' action

I do the same thing all the time… I do this exact thing the most but also I have confirmation windows with ROWS in a table that will be modified and give them a Row count of total edits to commit. 

Ooh! Neat idea. I wanted to do something similar with a Delete button, but couldn’t figure out best way to show all records from several different objects there are about to be deleted, for example, delete and Opportunity, and related Account, and Contact, and several custom objects all at once. 

Anyone know if there’s something to “show all records that have marked for deletion = TRUE” ?

The way i do it is create a UI only model with UI Only fields and just loop the model(s) and do the CreateRow() on the UI Only model and put in rows for the Confirmation display window. As long as you do the loops and createrow command before popping the popup that renders the table it is very fast, if you do the createrow command with the destination table rendered it will be very slow do to each row having to rerender the skootable. Its a very nice way to tally up changes or insert chunks etc… I then usually use a custom renderer to make the text black so it doesnt look like the unsaved changes fonts.

@[Jack Sanford] – You can use the isRowMarkedForDeletion() Model prototype method to check if a given row is marked for deletion — see the docs. So you could do it like this:

var model = skuid.$M(‘MyAwesomeModel’);
var allRowsMarkedForDeletion = skuid.$.map(model.getRows(),function(row){
    if (model.isRowMarkedForDeletion(row)) return row;
});
console.log(allRowsMarkedForDeletion);

Thanks Jarrod for blowing my mind! and thanks Zach for providing some instructions for putting it all together. 

This is a great situation where having the ability to write “custom actions” would be incredibly valuable.  The “custom action” could have a couple of properties (e.g. title, message, OKbuttonText, CancelButtonText) and then display the dialog as Zach outlined.  The solutions that folks have used (custom popup for each scneario, various templates to show/hide, specific snippets, etc.) all work but are a lot more work than should be necessary for a simple confirm dialog.

Hopefully a stock action will be added to the action framework but outside of waiting for that to be added, if you could write your own actions (“custom action”), the solution for confirm dialog could be developed in less than 30 minutes and be completely portable to all title/message situations.

+1 for “Custom Actions” :slight_smile:


I can’t get this to work. Can someone take a look at my snippet?

var $ = skuid.$;var openModel = skuid.$M('Opening') || skuid.$M('Open'),<br>&nbsp; &nbsp; openRow = openModel.getFirstRow();<br>&nbsp; &nbsp;&nbsp;<br>//get list of empty fields:<br>var emptyFields = [];<br>if (!openRow.Date_of_Birth__c) {emptyFields.push('Date of Birth');}<br>if (!openRow.LMP__c) {emptyFields.push('LMP');}<br>if (!openRow.Primary_Phone__c) {emptyFields.push('Primary Phone');}<br>console.log(emptyFields);<br>if (emptyFields.length){<br>&nbsp; &nbsp; var dfd = $.Deferred();<br>&nbsp; &nbsp; $('').text("The following fields are empty: " + emptyFields.join(", ") + ". Are you sure you want to continue?").dialog({<br>&nbsp; &nbsp; &nbsp; title: "Warning: Fields Are Empty",<br>&nbsp; &nbsp; &nbsp; resizable: true,<br>&nbsp; &nbsp; &nbsp; height: 180,<br>&nbsp; &nbsp; &nbsp; modal: true,<br>&nbsp; &nbsp; &nbsp; buttons: {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"Continue with empty fields": function(){<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(this).dialog("close");<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;dfd.resolve();<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"Cancel": function(){<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(this).dialog("close");<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;dfd.reject();<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}<br>&nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; });<br>&nbsp; &nbsp; return dfd.promise();<br>}


I’m successfully creating the $.Deferred(), but the dialog never pops up (so it can’t resolve).

I had to create an empty template component and use it to lauch the dialog:

<br /> $('#[IdOfTheTemplate]')&#46;text("The following fields are empty: " + emptyFields&#46;join(", ") + "&#46; Are you sure you want to continue?")&#46;dialog({ &#46;&#46;&#46;

Hi jack, sorry for the delay…

I have the empty template at the end of the page, just to have an empy div to play with.

Then I have

  1. an snippet to run the confirm dialog *all the logics of the open, confirm, cancel, on close,…
  2. several snippets to change the text of the div
    so each time I need a confirm action:

The first snippet changes the .html() of the div, this will ve the content of the dialog.
The second snippet launches the dialog
and the next snippets will be executed if the response is resolve.

Hey Matt,

I’ve done popups just in Javascript without a template component. Try this, it’s my working code with your text inserted. I think the main difference is in the first line.

$('<div />').html('The following fields are empty: ' + emptyFields.join(', ') + '. Are you sure you want to continue?').dialog({
       title: 'Warning: Fields Are Empty',
        modal: true,
        resizable: false,
        width: 450,
        height: 180,
        buttons: [{
            text: 'Continue with empty fields',
            click: function () {
                $(this).dialog("close");
                dfd.resolve();                
            },
        }, {
            text: 'Cancel',
            class: 'nx-button-secondary',
            click: function () {
                $(this).dialog("close");
                dfd.reject();                
            },
        }]
    });
}

Thanks, Pablo! That worked.

you are welcome ,

@ryan using $(‘

’) didn’t work for me, I don’t remember why right now

Here’s a generalised confirmation popup function that can be added to inline Javascript and then called from snippets or inline Javascript. I’m using this routinely now.

function popupConfirmation(dfd, title, text, confirmButtonText, cancelButtonText) {
    var $ = skuid.$;
    $('<div />').html(text).dialog({
        title: title,
        modal: true,
        resizable: false,
        width: 450,
        height: 200,
        buttons: [{
            text: confirmButtonText,
            click: function () {
                $(this).dialog("close");
                dfd.resolve();                
            },
        }, {
            text: cancelButtonText,
            class: 'nx-button-secondary',
            click: function () {
                $(this).dialog("close");
                dfd.reject();                
            },
        }]
    });
}

For those interested in how custom action support might work for this particular use case, check out https://community.skuid.com/t/custom-action-support?rfm=1&topic_submit=true.

Why isn’t this under consideration? Strange no?

Yes. Even with workarounds in javascript, a stock ‘Confirmation popup’ action would still be really useful. I would use it a lot more often than I do the workaround now (and my users would end up making fewer mistakes that I have to unravel).

How would you call the popupConfirmation from a snippet?

I want to use this so that once the field update happens on the model then I want to prompt the user if they are sure they want to make that change.  

Here’s how the popupConfirmation method I gave above can be called from a snippet:

var $ = skuid&#46;$;<br />var dfd = $&#46;Deferred();<br />popupConfirmation(dfd, 'Continue', 'Are you sure you want to continue?','Continue','Cancel');<br />return dfd&#46;promise();

You can call it in a snippet that is called from a Multiple Action item. If the deferred variable is rejected, the Multiple Action items after the snippet call will not be executed.

Thank you … I got this working and it was a huge help.

For V2 equivalent, something like this should work:

function popupConfirmation(dfd, title, text, confirmButtonText, cancelButtonText) {

const modal = skuid.utils.createModal({

title: title,

width: “450px”,

height: “200px”,

components: [

{

componentType: "skuid__text",

contents: text,

},

],

buttons: [{

label: confirmButtonText,

onClick: function() {

modal.cpi.close();

dfd.resolve();

},

}, {

label: cancelButtonText,

onClick: function() {

modal.cpi.close();

dfd.reject();

},

}],

});

}