spModal: take control of the default buttons

[Rafael Pinto]

Hello. I have a widget which opens a modal with an embedded widget, in which I need the default buttons (OK and Cancel). However, once I am in the modal, I need to find a way to take control of the OK button: make it unclickable if certain inputs in my modal have not been filled, and broadcast an event to the external widget when OK is clicked.

Is there a way to achieve this using the embedded widget's client script?

Thank you.

[Mohith Devatte]

@Rafael Pinto so you need to do some action when you click on OK button in the sp modal ? and you r sp modal has some embedded widget right ?

can you share the code so that i can suggest a function to be placed once you click on ok?

[Rafael Pinto]

Hello, Mohith. Below are the HTML and Client Script of the external widget (the one that opens the modal). For now, it is very simple.

<div>
  <button ng-click="c.openModal()">
    Click here to add an account
  </button>
  <p>
    Account: {{c.account}}
  </p>
</div>

api.controller=function(spModal, $rootScope) {
  /* widget controller */
  var c = this;
	c.openModal = function() {
		spModal.open({
			title: "Add account",
			widget: "internal_widget",
			size: "lg"
		}).then(function (name) {
			console.log("Success.");
		});
	};
	
	$rootScope.$on("accountName", function(event, obj) {
		c.account = obj.account;
	});
	
};

Below are the HTML and Client Script of internal_widget, which is embedded in the modal, as well as the screenshot:

<div>
  <label for="inputAcc">
    Please type the account number
  </label>
  <input type="text" id="inputAcc" ng-model="c.acc" ng-change="c.sendInfo()"/>
</div>

api.controller = function($rootScope) {
    /* widget controller */
    var c = this;

    c.sendInfo = function() {
        var obj = {
            "status": "OK",
            "account": c.acc
        };
        $rootScope.$broadcast('accountName', obj);
    };

};

What I need is a way to block the user from submitting the modal if the input is not filled. For this reason, the default OK button from the modal should be controlled by me. In addition, I need to pass its value to the external widget once OK has been clicked. The way to do it would be to call the c.sendInfo function in the Client Script, but this also requires control of the default button.

I could omit the two default buttons when calling spModal.open in the external widget and create my own buttons. This would solve the problem. But then, there is another issue: the modal footer is still visible.

The solution I need would be to either take control of the default OK button or to omit the modal footer.

Thanks.

[Mohith Devatte]

hello @Rafael Pinto ,

i think it looks like we cant control the buttons but i have found a work around for you which is easy to use .

So then function in spModal works only after click on ok or cancel buttons so what we can do is when ever the value is entered we can let it submit or close and when ever the value is not entered we can re open the modal like below

and the value is being passed from internal widget to external widget with the below code.

I have put alert to confirm it .

YOU DONT HAVE TO CHANGE ANY THING IN INTERNAL WIDGET JUST TRY CHANGING YOU EXTERNAL WIDGET CLIENT CONTROLLER CODE TO BELOW AND SEE

Client controller of external widget:

api.controller=function(spModal, $rootScope,$scope) {
  /* widget controller */
  var c = this;
	c.account="";
		$rootScope.$on("accountName", function(event, obj) {
		alert(obj.account);
		c.account = obj.account;
	});
	
	c.openModal = function() {
		spModal.open({
			title: "Add account",
			widget: "internal_widget",
			size: "lg"
		}).then(function (name) {
			
			if(c.account!="")
				{
					alert('you are submitting the modal');
					
				
				}
			else
				{
alert('Please enter any value before submission')
						spModal.open({
			title: "Add account",
			widget: "internal_widget",
			size: "lg"
		})
				
				}
			
			
			
		});
	};
	

	
};

HOPE THIS HELPS

PLEASE MARK THE ANSWER CORRECT IF THIS HELPS YOU