Service Portal - Modal Window - g_form.setDisplayValue('variable_set', true); is not executing on main widget

[Neevi]

We have a custom widget for catalog item variables in which we have a custom Create New button. On click of Create New button, we have modal window (dialogue window in SP) to open new record from custom table & save the record back in table.

Please refer this link - https://serviceportal.io/modal-windows-service-portal/

Query -

On click of Close Model, we are loosing $scope from the main widget. Because of which other custom buttons like Next & Back buttons are not working as expected.

g_form.setDisplayValue('variable_set', true); is not executing.

Please let me know if you have any solution for this.

We have tried $scope.page, $uibModalStack.dismissAll(); c.modalInstance.close(); to get back the scope on main page.

HTML Side:

<div>
<button class="btn btn-primary" ng-click="c.openModal()">${Data Collector}</button>
</div>

<script type="text/ng-template" id="modalTemplate">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Data</h4>
</div>
<div class="panel-body wrapper-xl">
<sp-widget widget="c.formWidget"></sp-widget>
</div>
<div class="panel-footer text-right">
<button class="btn btn-primary" ng-click="c.closeModal()">${Close}</button>
</div>
</div>
</script>

Client Side:

c.openModal = function() {
c.modalInstance = $uibModal.open({
templateUrl: 'modalTemplate',
scope: $scope
});
},

spUtil.get("widget-form", {sys_id: "-1", table: "<custom_table>"}).then(function(response) {

c.formWidget = response;

});        // widget-form is OOB widget to show table record

c.closeModal = function() {
$uibModalStack.dismissAll();
//c.modalInstance.close();

}

we have .next() and .back() function which uses g_form.setDisplayValue('variable_set', true); which is not executing.

Please provide your suggestions.

[Jon Barnes]

can you export your custom widget to xml and attach it here. If I can see your entire widget, I should be able to help you sort it out.

[Neevi]

Hello Jon,

Please find attached XML of update set.

I have cloned "SC Catalog Item Deprecated" widget. Added to new page "inc_data".

Try this page - (on OOB item "Windows Surface Pro 4)

https://<instance_name>.service-now.com/sp?id=inc_data&sys_id=ae44f5804f889200086eeed18110c73f 

On click of Next button = Hide variable set (initially it works)

On click of Back button = Show variable set (initially it works)

On click of Incident data collector = open modal window.

Now, Back and Next button is not hiding or showing variable set. (doesn't work once modal window is opened & closed)

We have tried both -

c.modalInstance.close();
$uibModalStack.dismissAll();

Please find attached XML of update set.

Thanks,

Rishabh

[Jon Barnes]

Yes I can see the issue now. the problem is with this angular event listener on line 93 of your client controller:

$scope.$on('spModel.gForm.initialized', function(e, gFormInstance) {...

the issue is that g_form gets replaced with the g_form of the other form from the modal when it renders. this replaces the g_form object that relates to the catalog item.

You may want to explore the if statement on line 94 of your client controller and see if you can better detect that the new g_form that gets initialized is not the g_form related to this contoller and don't assign g_Form to that new gFormInstance.

does that make sense?

You could explore changing the if statement on line 94 from this:

if (gFormInstance.getSysId() != -1 && gFormInstance.getSysId() != c.getItemId())

to this:

if (gFormInstance.getSysId() != c.getItemId())

I think this would solve your issue, but this is untested, and you would need to validate this in your instance.

[Neevi]

Thanks Jon.

It resolved our issue, but we are still working on the impact analysis of the change.

I will revert back to you once it is complete.

Cheers,

Rishabh