Plugin JQuery Snippets on LCM pages

IdentityIQ (IIQ) IIQ Discussion and Questions
1

Hello Experts,

I have a requirement to add a hyperlink on identity text, and I have managed to using JQuery to fulfill this under Identity page under Identity Warehouse. However, this is not working under Manage Identity > View Identity. Looks like those LCM related pages are rendered dynamically, therefore, I can not inject any html there…?

This is the JQuery I used to inject the Identity pages under Identity Warehouse, and it’s working like a charm:

if (location.pathname.endsWith('define/identity/identity.jsf')) {
		let text = jQuery("#bodyDivTitle").text();
		const params = new URLSearchParams(window.location.search);
		let updatedInnerHtml = text + '<a href="'**** '" title="LINK">🔗</a>';
		jQuery("#bodyDivTitle").html(updatedInnerHtml);
	}

However, below JQuery doesnt working due to the suspected issued mentioned above:

if (location.href.includes('identities/identities.jsf#/identities')) {
		let text = jQuery("#identity-name").text();
		console.log(text);
		let updatedInnerHtml = text + '<a href="'*****'" title="LINK">🔗</a>';
		jQuery("#identity-name").html(updatedInnerHtml);
		console.log(jQuery("#identity-name").html()); < HERE is undefined.
	}

Any idea or suggesion on this? Potentially, we also want to inject some html under Manage User Access, but if those pages are rendered dynamically, I guess we have no chance to useing JQuery Snippets there?

Thanks and Regards,
Mike

2

You are going to need to use a MutationObserver to get this done…

The Mutation Observer will listen to the DOM and trigger code when a change happens, like a dynamic page adding content.

I found a good short example of one here:

1 Like
3

Great thanks @christian_cairney for the hint.
I have looked into it. And here is my solution with MutationObserver:

if (location.href.includes('identities/identities.jsf#')) {
		const targetNode = document.getElementById('identity-name');
		console.log(targetNode);
		const config = { attributes: true, childList: true, subtree: true };

		// Create an observer instance linked to the callback function
		// Callback function to execute when mutations are observed
		const observer = new MutationObserver(function(mutations_list, observer) {
			mutations_list.forEach(function(mutation) {
				console.log(mutation);
				let text = jQuery('#identity-name').text();
				if (text) {
					if (location.hash.split('/').length >= 3) {
						let updatedInnerHtml = text + '<a href="'****'" title="LINK">🔗</a>';
						jQuery("#identity-name").html(updatedInnerHtml);
						console.log(jQuery("#identity-name").html());
						console.log("Diconnect MutationObserver");
						observer.disconnect();
					} else {
						console.warn("Failed to split id from url hash: " + location.hash);
					}
				} else {
					console.warn("Can not find #identity-name");
				}
			});
		});
		// Start observing the target node for configured mutations
		observer.observe(targetNode || document, config);
	}

Best regards,
Mike

4

Additionally, for pages under Manage User Access, MutationObserver is not enough (for whatever reason).
We will need some plugin related to windows.hashchange.

5

Hmm… MutationObservers should pick up all dynamic content, even in the Manage User Access page… what are you trying to do?

6

Hello @christian_cairney,

This is just experimental, as I mentioned, not so sure about this, but under Manage User Access, javascript location can not return actual full path, therefore I have to use hashchange to detect the current page. Then I can invoke corresponding MutationObserver on each page.