The CreatorCon Call for Content is officially open! Get started here.

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,078 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