dynamic data in a modal

[Justin Dreher]

Hi all,

A recent feature/request has been dropped on me and I need some guidance on the matter. The request is to have a modal appear when the page loads and for it to contain all of the users information from the platform view, such as name, room number, building name, etc. I have the modal done, and it loads correctly, and I have written the code to grab their information for another widget that works as intended. I thought that I could use the same code to bring the information to the modal without any major modification. Therein lies the problem, when the modal loads it has no data in it. It appears blank, so to me that says that it is not able to pull the data. Through some research I have found a possible fix is to pass the data to the "$rootScope" object, which is passed to the modal in the client script.

So my question is this: How can I pass the data to the $rootScope, so as to make it appear in my modal?

Below is my code for reference.

HTML

<div ng-show="!loadingIndicator" ng-init="c.modalInstance()"></div>
 
<script type="text/ng-template" id="modalTemplate">
	<div class="panel-body">
  <h2 style="text-align: center;">Is this information correct?</h2>
  <ul id="list">
    <li><h4><u>Name</u><p>{{data.user}}</p></h4></li>
    <hr>
    <li><h4><u>Title</u><p>{{c.data.title}}</p></h4></li>
    <hr>
    <li><h4><u>Phone Number</u><p>{{c.data.phone}}</p></h4></li>
    <hr>
    <li><h4><u>Room Number</u><p>{{c.data.room}}</p></h4></li>
    <hr>
    <li><h4><u>Building</u><p>{{c.data.building}}</p></h4></li>
    <hr>
    <li><h4><u>District</u><p>{{c.data.district}}</p></h4></li>
  </ul>
</div>
		<div class="panel-footer text-right">
    	<a class="btn btn-danger" uib-tooltip="This will open a new request" href="https://scricdev.service-now.com/sp?id=sc_cat_item&sys_id=60e3f8154fc22280f33f0195f110c729">${This information is not correct, Change it!}</a>
			<button class="btn btn-success" ng-click="c.closeModal()">${This information is correct!}</button>
		</div>
	</div>
</script>

Client Script

function($uibModal, $rootScope) {
	var c = this;
	
		c.modalInstance = function(){
			$uibModal.open({
			templateUrl: 'modalTemplate',
			scope: $rootScope
		});
	}
	
 
	c.closeModal = function() {
		c.modalInstance.close();
	}
 
}

Server Script

(function($rootScope) {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */

	data = [];
	
	//get all of the users information
	//name
	data.user = gs.getUserDisplayName()
	//phone number
	data.phone = gs.getUser().getRecord().getDisplayValue('phone')
	//room number
	data.room = gs.getUser().getRecord().getValue('u_room__')
	//email address
	data.email = gs.getUser().getRecord().getValue('user_name')
	//building name
	data.building = gs.getUser().getRecord().getDisplayValue('u_building')
	//primary district
	data.district = gs.getUser().getRecord().getDisplayValue('u_district')
	//department, not used because most department names are too long
	//to be attractive looking
	//data.department = gs.getUser().getRecord().getDisplayValue('department');
	//job title
	data.title = gs.getUser().getRecord().getDisplayValue('title')
	
	data.push($rootScope);
	
})();

Thanks for any and all help!

-Justin

[patricklatella]

Hi Justin,

were you able to figure this out?  I'm doing something very similar, trying to pass a dynamic variable into the popup modal, but same as your example it's just showing blank where I've got the {{c.data.object}}.

Were you able to achieve this?

[patricklatella]

hi again Justin, I actually figured it out.  My script had been clearing the data object in the client script (oops), so after removing that it worked perfectly.

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

<!--popup modal-->
<script>
<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 home screen.
</div>
</div>
</div>
</script>
<!--end popup modal-->

and this was the 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
}
}