How to create pop-up plugin page

IdentityIQ (IIQ) IIQ Discussion and Questions
1

Which IIQ version are you inquiring about?

8.4

Please share any images or screenshots, if relevant.

image
image2538×1268 28.1 KB

Hi Experts,

I would like to know if it’s possible to create a pop-up plugin page instead of a full-page plugin. Are there any documentation resources I can refer to?

2

Hi!

Do you mean a kind of modal window?

To achieve this I used onClick event and have defined modal window:

 this.initializeModal = function () {
           this.modal    = document.getElementById("myModal");
           this.closeBtn = document.getElementById("closeModalWindow");
           this.attachEventListeners();
         };

         this.attachEventListeners = () => {
           this.closeBtn.onclick = () => this.closeModal();
           window.onclick        = (event) => {
             if (event.target === this.modal) {
               this.closeModal();
             }
           };
         };

<div id="myModal" class="modal">
		<div class="modal-dialog" role="document">
			
		</div>

</div>
3 Likes
3

Hi @abartkowski ,

Thanks for the idea.

Do you have any idea how to add a link in the red section I highlighted in the screenshot of the Track My Request page in SailPoint IIQ? When the user clicks the link, I would like a pop-up to appear.

image
image2532×399 26.1 KB

4

I would suggest inspecting this element on the GUI using the browser’s inspector tool. Identify the appropriate HTML tag, ID, or other attributes that clearly define this specific element. Then, I would modify the DOM by retrieving the corresponding element from the document. Next, I would modify this specific element by adding an <a> tag with the appropriate href, linking to the specific page you need.

Example code:

const targetElement = document.querySelector("#myElement");

if (targetElement) {
    const link = document.createElement("a");
    link.href = "https://example.com"; 
    link.textContent = "Click here";

    targetElement.parentNode.replaceChild(link, targetElement);
    link.appendChild(targetElement);

    console.log("Element successfully modified with a link.");
} else {
    console.error("Target element not found.");
}
2 Likes
5

You can create a component that appears as a pop-up on the screen when clicking a link, without the need to navigate to a different URL.

6

Hi @abartkowski ,

I found the respective class and tested it using the inspector tool. I was able to add an href link and redirect it to my plugin page. However, I’m stuck on locating this particular location in the IIQ folder.

I wonder where I should implement your code.

I added this in console:

document.querySelectorAll('.col-xs-10.m-t-xs > div:last-child').forEach(element => {
  element.insertAdjacentHTML('beforeend', '<a href="mypluginpageurl">Test Test Test</a>');
});

And below is the result:

image
image1615×562 30.9 KB

7

Hey @Bernardc

You should create onClick event for that and then show modal window.
You need to create new element in DOM.

8

Hi @abartkowski ,

Can you explain further regarding new element in DOM?

9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.