Pop up window on change of Category variable

[Shwetha Nair]

Hi All,

I have a requirement to show a pop up window containing two links : Google :https://google.com , SN :https://servicenow.com  on user selecting values as Request Info. , general Inquiry in Category field in one of the Catalog Item . This popup will have a 'X' button & Done button to close the popup in either right side corners respectively. Please find attached for better understanding, expecting a result very close.

Thanks,

Shwetha 

[Dr Atul G- LNG]

SNOW 🙄 it's SN or ServiceNow.

[Ankur Bawiskar]

@Shwetha Nair 

you can use onChange catalog client script and use modal to show the html content

How to display custom popup while submitting a Service catalog in Service portal 

Glidewindow catalog client script Onload not working on service portal 

Modal Windows in Service Portal

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Shwetha Nair]

hi @Ankur Bawiskar ,

This is the first time I am creating a UI page therefore I am facing some issue.

I have created a UI page, but i am unable to call this in onchange client script in my catalog form.

Here is the Ui page :

Name : dialog_window_appsupport

HTML :

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly xmlns:j="jelly:core" xmlns:g="glide">

    <g:ui_form>

        <div class="support-modal">

            <!-- Modal Header with X button to close -->

            <div class="modal-header">

                <span class="close" onclick="closeModal()">×</span>

                <div class="modal-header-content">Choose your support option</div>

            </div>

            <!-- Modal Body with hyperlinks -->

            <div class="support-modal-body" style=" width:200px; height:150px;">

                <div class="support-link-group" style="display: flex; flex-direction: column; gap: 15px;">

                    <!-- Link for Google -->

                    <a href="https://google.com" target="_blank" title="Opens in a new tab" class="support-link-anchor-tag">

                        <img role="img" src="Search_Onhover.svg" class="icon-position" alt="Google search" aria-label="Google search" />

                        <span class="support-modal-link" tabindex="0">Google Search</span>

                    </a>

                    <!-- Link for ServiceNow-->

                    <a href="https://servicenow.com" target="_blank" title="Opens in a new tab" class="support-link-anchor-tag">

                        <img role="img" src="sn_icon.svg" class="icon-position" alt="ServiceNow" aria-label="ServiceNow" />

                        <span class="support-modal-link" tabindex="0">ServiceNow</span>

                    </a>

                </div>

            </div>

            <!-- Modal Footer with Done button -->

            <div class="modal-footer">

                <button type="button" class="btn btn-primary" onclick="closeModal()">Done</button>

            </div>

        </div>

    </g:ui_form>

    <!-- JavaScript to handle modal behavior -->

    <script>

        function closeModal() {

            // Close the modal by hiding it (or any other logic to hide it)

            var modal = document.querySelector('.support-modal');

            modal.style.display = 'none';

        }

    </script>

</j:jelly>

Can you help me with Client side code to call the UI page, 

[Ankur Bawiskar]

@Shwetha Nair 

if you are using native then you can use GlideDialogWindow() to call the UI page

var dialog = new GlideDialogWindow("dialog_window_appsupport"); // give ui page name here
dialog.setSize(750,1200);
dialog.setTitle("Support Options");
dialog.render();

If my response helped please mark it correct and close the thread so that it benefits future readers.