How to pass a variable value from the client script to a popup modal in a service portal widget?

patricklatella
Mega Sage

Hi all, I've got a variable value in the client script of a service portal widget.  The value is actually defined in the server script first, and then I have it passing to the client where I was using it in a addInfoMessage.  I now want to use the value in a popup modal...but I'm having trouble passing the value into the HTML script for the popup.  Anyone able to help?  thanks!

In my Client Script I've got the value defined like this, and it's capturing the correct value from the server.

var queueNumber = c.data.count;

 

And here is the script for the popup modal in the HTML Script:

<script>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Popup Modal</h4>
</div>
<div class="panel-body wrapper-xl">
Thank you, a ticket has been created on your behalf. You are number {{Here's where I want the "queueNumber" value to show}} in the queue. You will now be redirected to the home screen.
</div>
<div class="panel-footer text-right">
<button class="btn btn-primary" ng-click="c.closeModal()">${Close}</button>
</div>
</div>
</script>

1 ACCEPTED SOLUTION

I figured it out...everything was correct except this line in my client script:

c.data = {};//needed to remove this

this was clearing the data object and that's why the popup modal was showing blank for this...I had that in there from a previous function and forgot to delete when I moved to the popup modal.

So the HTML script for the popup modal was correct.  (The {{c.data.count}} was already being defined in my server script)

<!--popup modal-->
<script type="text/ng-template" id="modalTemplate">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Hello</h4>
</div>
<div class="panel-body wrapper-xl">
Thank you, a ticket has been created on your behalf. You are number {{c.data.count}} in the queue. You will now be redirected to the Tech Hub home screen.
</div>
</div>
</div>
</script>
<!--end popup modal-->

and this was the final bit of the Client script to trigger the popup modal.

c.server.update().then(function(response){

//popup modal
c.modalInstance = $uibModal.open({
templateUrl: 'modalTemplate',
scope: $scope
});

//end popup modal
}
}

 

thanks again for your help Asifnoor!

View solution in original post

6 REPLIES 6

I figured it out...everything was correct except this line in my client script:

c.data = {};//needed to remove this

this was clearing the data object and that's why the popup modal was showing blank for this...I had that in there from a previous function and forgot to delete when I moved to the popup modal.

So the HTML script for the popup modal was correct.  (The {{c.data.count}} was already being defined in my server script)

<!--popup modal-->
<script type="text/ng-template" id="modalTemplate">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Hello</h4>
</div>
<div class="panel-body wrapper-xl">
Thank you, a ticket has been created on your behalf. You are number {{c.data.count}} in the queue. You will now be redirected to the Tech Hub home screen.
</div>
</div>
</div>
</script>
<!--end popup modal-->

and this was the final bit of the Client script to trigger the popup modal.

c.server.update().then(function(response){

//popup modal
c.modalInstance = $uibModal.open({
templateUrl: 'modalTemplate',
scope: $scope
});

//end popup modal
}
}

 

thanks again for your help Asifnoor!

Glad it worked.