How to make sweet alerts working in service portal

Prithvi Ramesh1 · ‎08-09-2023

This is the sweet alert i have developed but i am not able to view this in service portal so are there any steps as to make sweet alerts working in service portal.

Mohith Devatte · ‎08-09-2023

Hello @Prithvi Ramesh1 ,

I am sure you must have created UI scripts with JS and CSS files to integrate sweet alerts with service now in native view.

So if you want this in portal you have create dependencies in your portal record and add your UI scripts containing JS and CSS code like below

1) Open you portal record by navigating to portals in left navigator

2) Open your theme record and scroll down to related lists

3)Create a new JS include and CSS include record and select type as UI script and tag your UI script over there

Create JS include to tag JS UI script

and a CSS include record to tag CSS UI script.

Hope this helps

Mark my answer correct if this helps you

THanks

Prithvi Ramesh1 · ‎08-09-2023

Thanks for you response but i have developed this sweet alert using client script so i am unaware of the UI Script so can you please guide me on that?

Mohith Devatte · ‎08-09-2023

@Prithvi Ramesh1 can you please post your client script code here ?

Community Alums · ‎08-10-2023

Hi Prithvi,

Here's how you could use the alert() function and a custom modal dialog:

Using spUtil:

function showSweetAlert() {
var options = {
title: "Hello!",
text: "This is a SweetAlert!",
icon: "success",
buttons: {
confirm: {
text: "OK",
value: true,
visible: true,
className: "btn-primary"
}
}
};

spUtil.get('spModal').open(options).then(function() {
// Handle the user's interaction (if needed)
});
}

<button class="btn btn-primary" ng-click="showSweetAlert()">Show SweetAlert</button>

Creating a Custom Modal Dialog:
First, create a new widget or modify an existing one to include a modal dialog. For instance, let's say you're using Bootstrap for styling:


<button class="btn btn-primary" onclick="showCustomModal()">Show Custom Alert</button>

<div id="customModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Custom Alert</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
This is a custom alert message.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>

function showCustomModal() {
$('#customModal').modal('show');
}
In this example, the showCustomModal() function is triggered when the button is clicked, and it displays the custom modal dialog. You can further customize the modal dialog's appearance and behavior as needed.