Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

Close Modal in Service Portal

Ashley
Kilo Sage

‎03-20-2019 03:48 PM

Good Evening,

I'm trying to get something to work that I thought was going to be easy to do... yep I am kicking myself for thinking that,

I have cloned over the widget "sp-variable-editor" as I have been asked to add a "Cancel" button next to the currently available save button, the only problem is that I can't get the modal to close.

My code so far:

<div ng-if="c.showSave" class="panel-footer">
    <button class="btn btn-danger pull-right" name="close" ng-click="c.closeModal()">${Cancel}</button>
    <button class="btn btn-primary pull-left" name="save" ng-click="c.save()">${Save}</button>
    <div style="clear: both;"></div>
  </div>

 

function($scope, $document, $rootScope, i18n, $uibModal,spModal) {
	var c = this;

	c.closeModal = function() {
		c.modalInstance.close();
	}

	c.save = function() {
		var activeElement = $document.activeElement;
		if (activeElement)
			activeElement.blur();
		if (!g_form.submit('none'))
			return false;
		c.server.update().then(function() {
			g_form.addInfoMessage(i18n.getMessage('Variable saved'));
			if (c.options.isServiceWorkspace == true) { //Workspace handler
				if (window.parent === window) {
					console.warn("Parent is missing. Is this called inside an iFrame?");
					return;
				}
				window.parent.postMessage({
					messageType: 'IFRAME_MODAL_MESSAGE_TYPE',
					modalAction: 'IFRAME_MODAL_ACTION_CONFIRMED',
					modalId: 'sn-modal-iframe-singleton'
				}, location.origin)
			}
			if (c.data.table == "sc_cart_item")
				$rootScope.$broadcast("$sp.service_catalog.cart.update");
		});
	};

 

When looking at the Console Logs in Chrome I am getting an error: 

js_includes_sp.jsx?v=12-20-2018_1717&lp=Wed_Oct_17_14_49_51_PDT_2018&c=23_404:12319 TypeError: Cannot read property 'close' of undefined
at api.controller.c.closeModal (sp-variable-editor-new.js:33)
at fn (eval at compile (js_includes_sp.jsx?v=12-20-2018_1717&lp=Wed_Oct_17_14_49_51_PDT_2018&c=23_404:13095), <anonymous>:4:257)
at expensiveCheckFn (js_includes_sp.jsx?v=12-20-2018_1717&lp=Wed_Oct_17_14_49_51_PDT_2018&c=23_404:14027)
at callback (js_includes_sp.jsx?v=12-20-2018_1717&lp=Wed_Oct_17_14_49_51_PDT_2018&c=23_404:17117)
at ChildScope.$eval (js_includes_sp.jsx?v=12-20-2018_1717&lp=Wed_Oct_17_14_49_51_PDT_2018&c=23_404:14789)
at ChildScope.$apply (js_includes_sp.jsx?v=12-20-2018_1717&lp=Wed_Oct_17_14_49_51_PDT_2018&c=23_404:14808)
at HTMLButtonElement.<anonymous> (js_includes_sp.jsx?v=12-20-2018_1717&lp=Wed_Oct_17_14_49_51_PDT_2018&c=23_404:17122)
at HTMLButtonElement.dispatch (js_includes_sp.jsx?v=12-20-2018_1717&lp=Wed_Oct_17_14_49_51_PDT_2018&c=23_404:3003)
at HTMLButtonElement.elemData.handle (js_includes_sp.jsx?v=12-20-2018_1717&lp=Wed_Oct_17_14_49_51_PDT_2018&c=23_404:2877)

Any ideas would be great

Kind Regards

Ashley 

0 Helpfuls
  • 7,230 Views
5 REPLIES 5

Ashley
Kilo Sage
In response to Calvaresi E_

‎03-21-2019 05:01 AM

So I have converted it into a Modal and the shopping cart edit cart button is working fine:

<!-- Modal -->
<div ng-if="::c.hasVariables(data.sc_cat_item._fields) && !c.options.isServiceWorkspace">
  <div id="myModal" role="dialog">
    
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header" ng-if="::c.hasVariables(data.sc_cat_item._fields) && !c.options.isServiceWorkspace">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3 ng-if="data.itemTitle">{{data.itemTitle}}</h3>
        <h3 ng-if="!data.itemTitle">${Variables}</h3>
      </div>

      <div class="modal-body">
        <sp-model form-model="data.sc_cat_item" mandatory="[]"></sp-model>
      </div>

      <div ng-if="c.showSave" class="modal-footer">
        <button class="btn btn-danger pull-right" name="close" data-dismiss="modal">Cancel</button>
        <button class="btn btn-primary pull-left" name="save" ng-click="c.save()">${Save}</button>
        <button class="btn btn-danger pull-right" name="close" ng-click="c.closeModal()">${Call Function}</button>
      </div>
    </div>
    <div ng-if="::!c.hasVariables(data.sc_cat_item._fields)">
      <h4 class="text-a-c">${There are no variables associated}</h4>
    </div>
    <now-message key="Variable saved" value="${Variable saved}"/>
  </div>
</div>

I'm wondering if the problem is because the Open part of the Modal sits in the Large and Small Shopping Cart Templates which is part of the SC Shopping Cart Widget, I did go into them and added the extra bits:

"data-toggle="modal" data-target="#myModal"

from using this as an example:

https://www.w3schools.com/bootstrap/bootstrap_modal.asp

but nothing seems to be working for me

0 Helpfuls