Close Modal in Service Portal

[Ashley]

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 

[Calvaresi E_]

Add this on the cancel button:

data-dismiss="modal"

Let me know if it helps.

[Ashley]

Ok, will give it a go now

[Ashley]

So I tried the new code and nothing happened, here is all the html code:

<div class="panel panel-default" ng-if="::c.hasVariables(data.sc_cat_item._fields) && !c.options.isServiceWorkspace">
  <div class="panel-heading">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h3 ng-if="data.itemTitle" class="panel-title">{{data.itemTitle}}</h3>
    <h3 ng-if="!data.itemTitle" class="panel-title">${Variables}</h3>
  </div>
  <div class="panel-body" id="myModal">
    <sp-model form-model="data.sc_cat_item" mandatory="[]"></sp-model>
  </div>
  <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-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>
    <div style="clear: both;"></div>
  </div>
</div>
<div class="workspace-variables" ng-if="::c.hasVariables(data.sc_cat_item._fields) && c.options.isServiceWorkspace">
  <div class="variables">
    <sp-model form-model="data.sc_cat_item" mandatory="[]"></sp-model>
  </div>
  <div ng-if="c.showSave">
    <button class="btn btn-primary pull-right" name="save" ng-click="c.save()">${Save}</button>
    <div style="clear: both;"></div>
  </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}"/>

I changed the button from:

<button class="btn btn-danger pull-right" name="close" ng-click="c.closeModal()">${Cancel}</button>

To

<button class="btn btn-danger pull-right" name="close" data-dismiss="modal">${Cancel}</button>

So it didn't use the c.closeModal() function but nothing happened, checked the logs as well but nothing showed up, I even tried adding a 'X' in the top right hand corner but didn't do anything as part of the header:

<button type="button" class="close" data-dismiss="modal">&times;</button>

At a loss

[Calvaresi E_]

It doesn't work because that's not a modal..
To define a modal object, in the div you have to use modal class like this:

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>