Create a pop up alert with a clickable link through a catalog client script

mballinger · ‎08-25-2022

Hello,

I have a request to create a pop up alert with a clickable hyperlink, but I am struggling to do this. I haven't found much on this. What I need is an onChange() Catalog Client Script that will display an alert() that has a clickable link.

We have used the g_form.addInfoMessage(), but the business does not want this, they want it through the form of a pop-up. We are trying not to achieve this with a modal but using the alert().

Does anyone have any idea how to do this?

If this cannot be done through the alert(), how can I do this with the use of a modal?

Thanks!

MrMuhammad · ‎08-25-2022

@mballinger - Please try this.

Update the client script to send the value as a window property using setPreference to the UI page. I'm sending an hardcoded value for testing but please replace it with whatever value you like to send.

function onChange(control, oldValue, newValue, isLoading) {
	if (isLoading || newValue == '') {
		return;
	}

	var dialog = new GlideDialogWindow("open_google"); //Render the dialog containing the UI Page 'task_comments_dialog'
	dialog.setTitle("POPUP WITH HYPER LINK"); //Set the dialog title
	dialog.setPreference('id', '12'); // Replace '12' with your dynamic value.
	//dialog.setPreference('id', 'ABC'); 
	dialog.render(); //Open the dialog

}

Recieve that on the page and as you have multiple values to choose from so you can use choose tag of jelly script to do this.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

	<g:evaluate>
		var someText = RP.getWindowProperties().get('id'); // Receiving the value from Client script via GliadeDialogWindow
	</g:evaluate>			 
	<j:choose>
		<j:when test="${someText.equals('12')}"><a href='https://www.google.com'>Google</a></j:when>
		<j:when test="${someText.equals('XYZ') }"><a href='https://www.google.com'>Youtube</a></j:when>
		<j:otherwise>Sorry, we could not find the record you specified.</j:otherwise>
	</j:choose>

</j:jelly>

Hope that helps!

Helpful and Correct tags are highly appreciated!

Regards,
Muhammad

View solution in original post

Pavankumar_1 · ‎08-25-2022

Hi,

if it is ok use g_form.addInfoMessage then use below link

https://community.servicenow.com/community?id=community_question&sys_id=e5394e151b16ec1038739979b04bcbc3

or build custom alert box refer below.

https://www.saaswithservicenow.in/post/how-to-create-custom-popup-alert-box

Thanks,

Pavankumar

If it helps please click Accept as Solution/hit the Thumb Icon.
ServiceNow Community MVP 2024.
Thanks,
Pavankumar

mballinger · ‎08-25-2022

Thanks for your response Pavan! As I mentioned above, the business wants to display it as a pop-up alert

MrMuhammad · ‎08-25-2022

Hi,

Please use GlideDialogWindow() API in your client script

function onChange(control, oldValue, newValue, isLoading) {
	if (isLoading || newValue == '') {
		return;
	}

	var dialog = new GlideDialogWindow("open_google"); //Render the dialog containing the UI Page 'task_comments_dialog'
	dialog.setTitle("POPUP WITH HYPER LINK"); //Set the dialog title
	dialog.render(); //Open the dialog
	

//Type appropriate comment here, and begin script below

}

Create a UI page with name "url_box" and inside that just use below

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<a href='https://www.google.com'>LINK</a>
</j:jelly>

You are done!

I must have a working example in my PDI. I'll share if I can find it right away.

Hope that helps!

Regards,

Muhammad

Regards,
Muhammad

MrMuhammad · ‎08-25-2022

@mballinger This is how it works.

Regards,
Muhammad

mballinger · ‎08-25-2022

Thanks for providing the solution. There are 5 different links, I want to show them based off of the selection they are making from the record producer. How can I pass different links based off of what they are selecting?