What happening in the spmodal?

[Sathwik1]

What happening in the below 2 mentioned lines?

value: c.name.... my understanding is... there is no value initialized so... it will be empty,,,text box will be empty...

suppose if I written anywhere like c.name ="sathwik" then in text box it shows sathwik...

c.name =name

what exactly happening in this step? and what is the use of it...

and suppose in text box if I write something, that I need to send to server side..in such scenarios what should I need to write...

is it fine it I write input.name will it works?

function(spModal) {
  var c = this;
  c.onOpen = function() {
        //ask the user for a string
        spModal.open({
            title: 'Give me a name',
            message: 'What would you like to name it?',
            input: true,
            value: c.name
        }).then(function(name) {
            c.name = name;
        })
    }
}

[Sathwik1]

@AnirudhKumar 

[AnirudhKumar · Accepted solution]

Hello again Sathwik!

Your understanding of how the code works is correct.

Now what exactly is happening in c.name =name?

The then() function has a response parameter, here they call it name (you can even put any other word there lol) and it holds whatever we typed  in the box. This is assigned to c.name.

Once this happens, anywhere in your client controller, even in other functions, you will be able to get the value that was entered in the pop up by simply calling c.name again.

I added some alerts in your code to make it transparent.

HTML:

<div>
  <button class="btn btn-primary" ng-click="c.onOpen()">Open Pop up</button>
  <button class="btn btn-primary" ng-click="c.getBoxVal()">Get what was typed in box</button>
</div>

Client controller:

api.controller = function(spModal) {
    var c = this;

    c.onOpen = function() {
    alert('calling function now... you can see that c.name is undefined ->' + c.name);
        
	//ask the user for a string
        spModal.open({
            title: 'Give me a name',
            message: 'What would you like to name it?',
            input: true,
            value: c.name
        }).then(function(name) {
	alert('Inside then function... We get back whatever was typed in the input field ->' + name);
            c.name = name;
        });

    };
	
	
	c.getBoxVal = function()
	{
		alert(c.name);
	};
};

Now to send the name that was entered to the server, we use c.server.update() inside the then() function itself

c.onOpen = function() {
        //ask the user for a string
        spModal.open({
            title: 'Give me a name',
            message: 'What would you like to name it?',
            input: true,
            value: c.name
        }).then(function(name) {
            c.data.name = name;
	    c.server.update();
        });
    };

So in the above code we have set the name to c.data.name (we can even call it c.data.nickname or c.data.newName or anything). And then you can catch this value in server with input.name ( or input.nickname) depending on what variable you used earlier.

Nice to see you learning on a Saturday. Good job 🙂

[Sathwik1]

Thank you so much.. it helps me a lot..

So, based on above code I am getting one textbox..if I want two text boxes how should I write..can you please help me with that as well..

I tried but not able to get it.

@AnirudhKumar