Widget modal validation

[nic_2017]

I put together a widget (see below) that opens a modal and on that modal I have a few html fields that I would like to validate (if one field for example is blank I would like to have a javascript alert and to keep the modal open on the screen so that the user goes back and enter a value).

The problem with the client script below is that it detects that the html "first_name" is blank but it closes the modal. As I said I would like the modal to remain open.

What do I miss?

Thank you so much.

function(spModal,$scope) {
/* widget controller */
var c = this;

var shared = {};

c.addNew = function(size){
shared.Requests = c.data.Requests;

spModal.open({
size: size,
title: 'New request',
widget: '41fea546db1faf00ba4538ff9d961968',
buttons: [
{label: 'Create', primary: true}
],
shared: shared
}).then(function() {
if (document.getElementById("first_name").value.trim() == "")
{
alert("Please enter a valid first name.");
document.getElementById("first_name").focus();
return false;
}
$scope.data.action = "addNew";
c.data.Requests = shared.Requests;
c.server.update();
})
}//addNew

}//function

[Jon Barnes · Accepted solution]

I think there may be a limitation to using spModal here as when you make your "Create" button the primary button, it will automatically close it.

for this use case, I would consider moving over to using $uibModal directly here (which is actually what spModal eventually calls as well). this will give you greater flexibility for control of your modal.

The User Profile widget in your instance should have an example of how you can use $uibModal to render your modal (hint the template for the modal is in the body html of the widget). If you want to embed a widget inside of your modal, use the <sp-widget> directive inside of your modal body in the template.

https://<your-instance>/nav_to.do?uri=sp_widget.do?sys_id=6e6ac664d710120023c84f80de610318

[nic_2017]

You showed me the correct path with $uibModal.

Thanks so much!

[Tom Jiadd]

Hi Nic,

I have the same problem with you, can you give me a little help, how you use the $uibModal to achieve that?

Thanks a lot.