Pass variable values from RITM to Modal Window

[YenGar]

Hi all, 

I am trying to pass the variables for an RITM to a modal window so that when the user clicks a button, they see the variables in a sort of summary table view. I get the modal to open up but I am not understanding how to pass the variable values to the modal window. Note - this is from an approval record and I am trying to access the RITM variables to show the approver before they approve the record.

This is what I currently have:

<button type="button" ng-click="c.openDetailsModal(approval.sys_id)">View</button>

client script

 c.openDetailsModal= function(id) {
       console.log(id); //this shows me the correct sys id for the approval
       c.modalInstance = $uibModal.open({
       templateUrl: 'modalTemplate',
       scope: $scope
       }); 
 }

Template - here is where I am trying to at least get the task number to show up but it doesn't

<script type="text/ng-template" id="modalTemplate">
 <div class="panel panel-default">
 <div class="panel-heading">
 <h4 class="panel-title">Modal Window {{m.task.number}}</h4>
  </div>
 <div class="panel-body wrapper-xl">
 <h4><b>{{::approval.task.cat_item}}</b></h4>
                    <h4>Summary</h4>
                    <div ng-if="approval.variables.length > 0" ng-init="variable_toggle=true">

                      <div ng-repeat="variable in approval.variables" ng-if="variable_toggle">
                        <div ng-if="variable.name.indexOf('label_') == -1 && variable.name.indexOf('x_') == -1 && variable.value != 'false'">
                          <table>
                            <tr>
                              <td><label style="color:black">{{::variable.label}}: </label></td>
                              <td><div><label style="color:gray">{{::variable.display_value}}</label></div></td>
  </tr>

  </table>
  </div>
  </div>
  </div>
 <div class="panel-footer text-right">
 <button class="btn btn-primary" ng-click="c.closeModal()">${Close Modal}</button>
  </div>
  </div>
</script>

Any suggestions on how I could do this? 

Thank you!!

Yen

[Justin77]

If you're calling this from the Approval Record widget, the variables would be stored in data.variables, not approval.variables.  I'm not sure of your use case though because that widget should display variables OOTB.  If you aren't using the Approval Record widget for this, can you provide the server script for the widget that is calling the modal?

[YenGar]

Hi Justin, 

Thank you for your response! I am using a modified version of the approval widget. This is the server script I have:

//get users to allow bulk approvals
var userRole = new GlideRecord('sys_user_has_role');
userRole.addQuery('user', gs.getUserID());
userRole.addQuery('role', 'adbf7f9b1b36d050306b55392a4bcbac');
userRole.query();
if(userRole.next()){
	data.bulkApprover = true;
}
else{
	data.bulkApprover = false;
}

if (input.op == 'approved' || input.op == 'rejected') {
	var app = new GlideRecord("sysapproval_approver");
	if (app.get(input.target)) {
		if (app.state == 'requested') {
			app.comments = input.comment;
		}
		app.state = input.op;
		app.update();
	}
}

if (input.op == 'approveall') {
	for (var i = 0; i < input.checkedItems.length; i++) {
		var appItem = new GlideRecord('sysapproval_approver');
		appItem.get(input.checkedItems[i]);
		appItem.comments = input.comment;
		appItem.state = 'approved';
		appItem.update();
	}
}


var currTable = input.currTable || '';
var u = getMyApprovals();
var gr = new GlideRecord('sysapproval_approver');
var qc1 = gr.addQuery("state", "requested");
if (input)
	qc1.addOrCondition("sys_id", "IN", input.ids);
gr.addQuery("approver", u);
gr.orderByDesc("sys_created_on");
gr.query();

var tableCategories = {};
var approvals = [];
var ids = [];
while (gr.next()) {
	var task = getRecordBeingApproved(gr);
	if (!task.isValidRecord())
		continue;

	var task_table = task.getLabel();

	if (currTable != '' && task_table.toLowerCase() != currTable)
		continue;

	/***Approval expiration calculation***/
	var nd = gr.sys_created_on.getDisplayValue();
	//console.log('created date is :'+nd);
	var fd = new GlideDateTime(nd);
	fd.addDays(30);
	//console.log('future date will be:'+fd);
	data.exp = fd.getNumericValue();
	/***/

	if(gr.getValue("state") == 'requested') 
		ids.push(gr.getUniqueValue());
	var t = {};
	t.number = task.getDisplayValue();
	t.sys_id = task.getValue('sys_id');
	t.short_description = task.short_description.toString();
	if (task.isValidField("opened_by") && !task.opened_by.nil())
		t.opened_by = task.opened_by.getDisplayValue();

	// requestor >> opener
	if (task.isValidField("requested_by") && !task.requested_by.nil())
		t.opened_by = task.requested_by.getDisplayValue();

	t.start_date = task.start_date.toString();
	t.end_date = task.end_date.toString();
	t.price = task.getDisplayValue("u_total_price");
	t.u_item_cost_center = task.getDisplayValue("u_item_cost_center");
	//t.created = task.sys_created_on.toString();
	t.cat_item = task.getDisplayValue("cat_item");
	t.comments = task.cat_item.u_require_comments.toString();
	t.table = task.getLabel();

	if (task.getValue("recurring_price") > 0)
		t.recurring_price = task.getDisplayValue("recurring_price");

	t.recurring_frequency = task.getDisplayValue("recurring_frequency");

	var j = {};
	j.sys_id = gr.getUniqueValue();
	j.table = gr.getRecordClassName();
	j.task = t;
	j.item = gr.item.name;
	var wfact = gr.wf_activity.getRefRecord();
	j.wf_act_name = wfact.name.toString();
	if (task)
		j.variables = $sp.getRecordVariablesArray(task);
	j.state = gr.getValue("state");
	j.stateLabel = gr.state.getDisplayValue();
	j.sys_created_on = gr.sys_created_on.getDisplayValue();
	j.opened_at = gr.opened_at.getDisplayValue();
	j.expiration = data.exp;
	approvals.push(j);
}
data.ids = ids;
data.approvals = approvals;
data.tableCategories = tableCategories;
data.expiration = fd.toString();

function getRecordBeingApproved(gr) {
	if (!gr.sysapproval.nil())
		return gr.sysapproval.getRefRecord();

	return gr.document_id.getRefRecord();
}

function findObject(obj, key, val) {
	obj.map(function (item) {
		if (item.table == val) {
			return true;
		} else {
			return false;
		}
	});
}

Lines 94 - 108 (var j) is where i'm grabbing the variables.

[Justin77 · Accepted solution]

Ok so a couple things...

 c.openDetailsModal= function(id) {
       console.log(id); //this shows me the correct sys id for the approval
       c.modalInstance = $uibModal.open({
       templateUrl: 'modalTemplate',
       scope: $scope
       }); 
 }

When you assign the scope of the modal to "$scope", "$scope" is the widget $scope service, which we use for a multitude of things (including modals) and WOULD pull the right information for you, but because of how your server script is laid out, I assume the HTML that calls that function is within an ng-repeat.  Ng-repeats actually create their own child scope, so "$scope" is actually the parent scope of the scope you are trying to read here.  I recommend either utilizing the "c" object variable to pass the approval record to the modal, or pass the approval record as a parameter into the "c.openDetailsModal" function and write a "$scope.approval = [approval record function parameter name here]".  If you go with the second option, I strongly recommend clearing $scope.approval once the modal closes, it helps with consistency and will save you some headache in the long run.

[YenGar]

Thank you Justin and @Tony DiRienzo for you help on this. I got it working to display the RITMs variables in the modal.

This is how the table looks - still have to adjust some things here and there like the (i) that displays the modal, I want it to be next to the number instead of above but that's all CSS stuff.  

Thank you both for your help on this!

Yeny