Create modal pop-up from link in Catalog Item description?

Todd Chaikin
Tera Contributor

‎10-24-2023 02:19 PM

Is there a way to open a modal pop-up from a link I create in the catalog item description field?

 

The problem I'm running into is that it seems to be sanitizing my input (I guess SN doesn't want any scripting done in the Description field). I can't add an "onclick" to an <a> tag.

ToddChaikin_0-1698182184537.png

ToddChaikin_1-1698182209457.png

And after hitting save:

ToddChaikin_2-1698182223261.png

 

Has anyone else solved for this particular requirement or have any suggestions for a workaround?

 

 

0 Helpfuls
  • 1,562 Views
2 REPLIES 2

Danish Bhairag2
Tera Sage
Tera Sage

‎10-24-2023 02:37 PM

Hi @Todd Chaikin ,

 

I don't think what you are trying to do is possible or not but may be u can try some workaround if your end objective is just to showcase users some pop up.

 

U can make use of UI page(to display additional info) which can be called via client script.

There can be 2 ways via which the UI page can appear.

  • You can create a onLoad script & call the UI page (this will appear whenever anyone opens this catalog item).
  • You can have a onChange script which will trigger on change of a variable(you can create one new checkbox variable & add the logic in client script like whenever it's true call the UI page).

 

Hope this helps!

 

Thanks,

Danish

 

0 Helpfuls

ChrisBurks
Mega Sage

‎10-26-2023 10:29 AM

There are a few ways to do something like this. It just depends on what is desired.

1) The easiest way if you just want to have more information shown/hidden is to leverage the "details" and "summary" html tags. Together they can make a drop-down affect.

<div class="m-b-xl">
<p>Leverage the use of "details" and "summary" html tags. They work like an accordion with no javascript needed. However, it will need some CSS styling.</p>
    <details>
        <summary><span style="text-decoration: underline;">Read more here</span></summary>
        <p class="m-t padding">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </details>
</div>

When viewed in the editor it will appear not to work. But when rendered on an actual page the "P" element will be hidden. The user can click on the "Read more here" text and the "p" element will display.

 

2) Leverage an onLoad Client script to add an even to your anchor tag or button with an ID attribute. DOM manipulation is usually not recommended in ServiceNow but there is an exception. The exception is when you have complete control of html elements and their attributes and it's in Service Portal. In this case these components will be your own, thus minimizing the chance of breaking in an upgrade. Do the following:

In the description of the catalog item create a button or anchor tag and add a unique id to it.

<button id="myModalBtn" class="btn btn-primary">For Modal</button>

 

Now in an onLoad client script create an event listener for the element and leverage the out-of-box spModal api. (Make sure you select "All" for the UI type field on the client script form)

function onLoad() {
   //Type appropriate comment here, and begin script below
   MyModalBtn.addEventListener('click', function(){
	spModal.alert("Hi, here is some more text")
   })
}

 

Here's an example of both together

show_hide_text_pop_up.gif