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

Community Alums · ‎08-25-2022

Do you want to do this in the platform (UI16) or Portal? There are a couple of options.

In the platform, you can open a UI page using GlideModal which could display the link. In the portal, you can utilize 'spModal.open({})'. Both will work in a catalog client script.

Example:

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

	if (condition === true) {
		// Check for Service Portal or Platform
		if (window) {
			var glideModal = new GlideModal("ui_page");
			glideModal.setTitle("Page Title");
			glideModal.setBackdropStatic(true);
			glideModal.render();
		} else {
			spModal.open({
		title: 'Lease Document',
		message: getMessage('Message') + '<br /> <br /><a href="' + URL + '" target="_blank"><img src="image.jpg" width="75" height="75"/></a>' + '<br /><br />' + getMessage('Message 2'),
		buttons: [
			{label:'✔ ' + getMessage('Close'), cancel: true}
		]
	});
		}
	}
}

Hope that points you in the right direction!

mballinger · ‎08-25-2022

@timmo - Thanks for your response. This will be done in UI16 and not portal.

How can I build a simple UI Page with a button click ok to close? I just need a generic UI Page similar to the alert() pop up modal

mballinger · ‎08-25-2022

@timmo - I'm using a UI Page that is out of the box glide_form_basic. Do you know how I can pass a URL to this modal? the URL will be changeable so would like to control everything through the catalog client script if possible, but this is what I have so far:

var gm = new GlideModal("glide_confirm_basic", false, 600);
gm.setTitle("Title Message");
gm.setPreference("title", "<a href='https://www.google.com'>LINK</a>");
gm.render();

Community Alums · ‎08-25-2022

That is what you would need. A simple UI page would just contain HTML. You can put the link in there, and a 'Close' button. There are multiple examples on the instance you can find- just look in the 'UI Pages' module, copy one and update to meet your needs