How to edit modal that displays when exiting a new catalog request/incident?

[Jesse_H]

I've been asked to modify the modal that pops up when you back out of creating a ticket or catalog request in the Employee Center.

Any ideas on how to modify this? Specifically the help text for the close 'X' icon.

I found an angular provider that I believe controls all of this:

Widget Angular Provider

cfConfirmModal

 /nav_to.do?uri=%2Fsp_angular_provider.do%3Fsys_id%3Da80cfb6b730c3300cd69f021c4f6a783%26sysparm_record_target%3Dsp_angular_provider

But it's referencing data.helpTxt and I'm not too sure where that is coming from. You'll see this function referenced at the beginning of the code:

function cfConfirmModal($rootScope, $uibModal)

Any suggestions?
Thank you!

[-O- · Accepted solution]

That is service spSCNavStateManager (/scripts/app.$sp/service_catalog/service.spSCNavStateManager.js) used by the standard Catalog Item widget (widget-sc-cat-item-v2), displaying a modal using service spModal (/scripts/app.$sp/service.spModal.js). The latter ultimately displays the dialog box using angular template with id sp-modal.html.

So one solution, that works for me is to add a template to widget hrm-catalog-item (which embeds widget-sc-cat-item-v2) that overwrites the standard modal template. For this one needs to create a new record in table sp_ng_template where Widget will be "HRM Catalog Item", ID will be "sp-modal.html" and Template will be the customized version of the original:

<div class="modal-header" ng-style="options.headerStyle">
	<button type="button" class="close pull-right" ng-click="$dismiss()" title="Close modal" data-toggle="tooltip" data-placement="bottom" aria-label="Close modal" autofocus="autofocus">×</button>
	<h1 class="modal-title h4" ng-bind-html="options.title" id="modal-title"></h1>
</div>
<div class="modal-body" ng-keyup="keyPress($event.keyCode)">
	<p ng-if="options.message" ng-bind-html="options.message"></p>
	<p ng-if="options.errorMessage" class="alert alert-danger ng-binding ng-scope" role="alert" ng-bind-html="options.errorMessage"></p>
	<div ng-if="options.widget">
		<sp-widget widget="options.widget"></sp-widget>
	</div>
	<div ng-if="options.input">
		<form name="form.xpForm" ng-if="options.input" ng-submit="submit()">
			<div class="form-group">
				<label for="xpInput" ng-if="options.label"><span class="field-decorations"><span class="fa fa-asterisk mandatory" title="Required" style="padding-right: .25em" aria-label="Required "></span>{{options.label}}</span></label>
				<input id="xpInput" type="text" class="form-control" placeholder="{{options.label}}" ng-model="input.value" required="true" ng-change="changed=true" ng-blur="clearFocusListCache()"
					   ng-if="!options.values || options.values.length === 0" autocomplete="off"></input>
				<div class="input-group" ng-if="options.values">
					<input id="xpInput" type="text" class="form-control" placeholder="{{options.label}}" ng-model="input.value" required="true" ng-change="changed=true" ng-blur="clearFocusListCache()" autocomplete="off"></input>
					<div class="input-group-btn" dropdown="true">
						<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle="true" data-toggle="dropdown"><span class="caret"></span></button>
						<ul class="dropdown-menu pull-right">
							<li ng-repeat="value in options.values"><a href="" ng-click="input.name = value">{{value}}</a></li>
						</ul>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
<div class="modal-footer" ng-style="options.footerStyle">
	<button ng-repeat="button in options.buttons track by button.label" sp-focus-if="button.focus" ng-disabled="button.primary &amp;&amp; options.input &amp;&amp; form.xpForm.$invalid" class="btn btn-default {{button.class}}"
			ng-class="{'btn-primary':button.primary}" ng-click="buttonClicked(button)">{{button.label}}</button>
</div>

I customized mine by adding

<hr />
<p style="background-color: blue; color: white;">This is white text on blue background...</p>
<hr />

between the header and body divs and the dialog looks like:

Back to your original question, you need to modify the 2nd line of the template. E.g. commenting it out (

<div class="modal-header" ng-style="options.headerStyle">
	<!--button type="button" class="close pull-right" ng-click="$dismiss()" title="Close modal" data-toggle="tooltip" data-placement="bottom" aria-label="Close modal" autofocus="autofocus">×</button-->
	<h1 class="modal-title h4" ng-bind-html="options.title" id="modal-title"></h1>
</div>
<hr />
<p style="background-color: blue; color: white;">This is white text on blue background...</p>
<hr />
<div class="modal-body" ng-keyup="keyPress($event.keyCode)">
	<p ng-if="options.message" ng-bind-html="options.message"></p>
...

) removes the close button completely:

Hope it will work for you too - for the moment I cannot tell if the possibility of overwriting an OOB template is by design or some coincidence.

[Jesse_H]

Thank you for taking the time to walk through this! I appreciate it.

[-O-]

You're welcome 🙂

[Community Alums]

I know you found your solution, but I wanted to add an alternative which isn't quite so involved but still gets the job done. 

I also wanted to remove the 'x' close modal button and the tooltip from every modal on the service portal. This can be done quickly and easily via the CSS options for the Portal: 

'Service Portal > Portal', select your portal, scroll down to 'CSS variables' and add:

.modal-header > .tooltip {
display: none !important;
}

.modal-header .close {
display:none;
}

*Note, this applies to all Modals on the portal.