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

[mballinger]

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 · Accepted solution]

@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!

[mballinger]

Thank you for providing the code. I am getting a "Page not found" error when I try to trigger the client script. I see the title, but inside the body, page not found, "The page you are looking for could not be found."

***EDIT***

I had to use the endpoint because it is a scoped app. I guess I am not following the logic behind it. How do I read the value from the variable I am passing? I am not able to get to print out someText. It is going straight to the "otherwise"

[MrMuhammad]

@mballinger 

Basically we are sending value in "id" variable using setPreference() method. Now inside UI page we are RenderProperties "RP" API to retrieve that value. Please have a look at the line between <g:evaluate> </g:evaluate> tag.

Next we are using <j:choose> tag which is an alternate to if else if. So <j:when test> will be checking the comparing the retrieved value with target value. In the example below someText variable stores the value we are recieving in the UI page and then comparing it with '12'. If it matches then Google will be displayed and rest will be ignored. If it doesn't match then it will go to next <j:when test> and if no test condition matches then default value <j:otherwise> will be executed.

<j:when test="${someText.equals('12')}"><a href='https://www.google.com'>Google</a></j:when>

Can you share the script that you have modified? 

[mballinger]

There was a typo on my end. Thank you so much for your help and sorry for the delay in response!

[rchittor]

This solution is not functioning as expected on my end on the ESC Portal. I am encountering a 'GlideDialogWindow is not defined' error. I have created a UI Page with the provided Jelly code and an onChange Catalog client script on a variable set, as described.

Could you please advise if there is something additional that needs to be added in the Client Script section of the UI Page, or if there is another aspect I might be overlooking?