How to Conditionally Activate a Popup Upon Clicking a Button

  • 1
  • Question
  • Updated 8 months ago
  • Answered
Hi All,

I have a skuid page that utilizes a Run Multiple Actions button used to save model changes on a number of models. 

The page contains a contact model. There is some background functionality that requires all the contacts to have an email entered before saving. 

I would like to find a way to have a popup appear if any of the contacts are missing an email address where the user could use the popup to fill in the email before proceeding to save. 

Basically I need a button with the following logic:
If all emails are not blank: Save
If any email is blank: Open Popup

I have tried playing with section merge syntax and UI Formulas to use on a logic branch formula  action kind of like this (with no success):

IF(
{{#Model.data}}
ISBLANK( {{Email}} )
{{/Model.data}}
,
True,
False
)

Does anyone know how this is achievable?
Photo of Michael Schniepp

Michael Schniepp

  • 1,808 Points 1k badge 2x thumb

Posted 8 months ago

  • 1
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
I would cheat and make two save buttons and have each conditionally render based on whether any email field is blank. One save button would open a pop up and the other would just save.
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Michael,

I think using a snippet to check the email fields will be your best option.  Run it before your save action and have the snippet create an error where you can put your popup action steps.

One other thought is to try and validate that each email field has a value before moving to the last step of saving.

Thanks,

Bill
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
The challenge is to determine whether the field is filled in ALL the rows on the model.  There are not currently easy ways to do this.  Bill's solution is good.  Write script that spins through all the rows and updates a field on a UI only model if email is blank.  Then in your AF sequence - after this script finishes (use a JQuery deferred statement) branch the sequence based on the value of that field.  If 0 go ahead.  If >0 open the popup. 

Admittedly not elegant.
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
What about a UI only formula that returns true if all email fields have values and then using that value in the branching logic of the action sequence?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
That formula would be super cool,  but at this point there is no way to evaluate a field on ALL the rows of a model in a formula.  There is also no way to declaratively access the model level summary values (SUM, AVG etc) to be used in branching logic. 

Stuff we know about and want to build.  Just haven't gotten there yet. 
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Ohhhhh.... sorry... I wasn’t understanding the scenario. I though a single record had multiple email fields and all had to be completed. Sooooo.... basically disregard all my contributions to this post.
Photo of Michael Schniepp

Michael Schniepp

  • 1,808 Points 1k badge 2x thumb
Yes it is a model of multiple contacts each with a single email on each record. I am trying to evaluate each contact in the record. 
Photo of Michael Schniepp

Michael Schniepp

  • 1,808 Points 1k badge 2x thumb
I ended up creating a UI-only checkbox field on the account model (only 1 record loaded at a time called SelectedAccount) called NullEmails. I wrote a JS Snippet that is executed when the save button is pressed that checks for empty emails and checks the box if there are any. The button action sequence looks like:

1. Run Snippet
2. Branch if false: Save Models
3. Branch if true: Open popup

It seems to work ok. The snippet is below. Let me know if anyone sees a problem with it or it can be improved. I am not experienced with JS. 

var dat = skuid.model.getModel('Contacts').getRows();
var count = 0;

Object.keys(dat).forEach(function(key) {
    if (!('Email' in dat[key])){
    	count++;
    }
});


var accountModel = skuid.model.getModel('SelectedAccount');
var account = accountModel.getFirstRow();

if(count > 0){
	accountModel.updateRow(account,'NullEmails', true);
	accountModel.save({callback: function(result){
		if (result.totalsuccess) {
			console.log("Success");
		} else {
			console.log("FAIL");
		}
	}});
}
Photo of Michael Schniepp

Michael Schniepp

  • 1,808 Points 1k badge 2x thumb
Ok, so one thing I could use help with; When I click this button multiple times it seems to only work as intended the first time. As in it doesn't seem to reset the count variable. Anyone got any pointers to getting this to work multiple times without a page refresh?