Custom HTML attributes in UI framework

Jan Ujcic1 · 3 weeks ago

Hi everyone,

I'm trying to embed a Qlik visualization in a custom UI framework component but I am encountering some issues when trying to add custom HTML attributes to the view function. Iframes are an alternative way of embedding Qlik visualizations in ServiceNow but third-party cookie browser blocking is an issue which we cannot easily solve which is why I tried to see if a custom component could work.

This is my current code:

import { createCustomElement } from "@servicenow/ui-core";
import snabbdom from "@servicenow/ui-renderer-snabbdom";
import styles from "./styles.scss";

const QLIK_LIB_ID = "qlik-embed-lib";

const view = (state) => {
	const { properties } = state;
	console.log(properties.extraAttrs);
	return (
		<div class="container" id="13451">
			<h2 className="test-class">{properties.testText}</h2>
			<qlik-embed
				id="visualization"
				ui="analytics/chart"
				app-id="123"
				object-id="abc"
				{...properties.extraAttrs}
			></qlik-embed>
		</div>
	);
};

createCustomElement("olbv-test-component", {
	renderer: { type: snabbdom },
	view,
	styles,
	setInitialState() {
		if (!document.getElementById(QLIK_LIB_ID)) {
			const script = document.createElement("script");
			script.id = QLIK_LIB_ID;
			script.src="https://cdn.jsdelivr.net/npm/@qlik/embed-web-components@1/dist/index.min.js";
			script.type = "application/javascript";
			script.crossOrigin = "anonymous";
			script.setAttribute(
				"data-host",
				"https://qlik-host.eu.qlikcloud.com"
			);
			script.setAttribute("data-auth-type", "Oauth2");
			script.setAttribute("data-client-id", "123");
			script.setAttribute(
				"data-redirect-uri",
				"https://servicenowinstance.service-now.com/oauth-callback"
			);
			script.setAttribute("data-access-token-storage", "session");
			script.setAttribute("data-auto-redirect", "true");
			document.head.appendChild(script);
		}
	},
	properties: {
		extraAttrs: {
			default: {
				id: "visualization",
				ui: "analytics/chart",
				"app-id": "123",
				"object-id": "abc",
			},
		},
		testText: {
			default: "Test text",
		},
	},
});

I was able to inject the script successfully but I cannot make the custom attributes work for <qlik-embed>. I tried passing them in through different options but it doesn't work. Is there a specific way to handle this?

Additional issue that I'm facing is handling the redirect from Qlik which is usually put into oauth-callback.html and I'm not sure where I could handle this in ServiceNow (I had no luck with UI pages):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <script crossorigin="anonymous" type="application/javascript" data-host="https://qlik-host.eu.qlikcloud.com"
        src="https://cdn.jsdelivr.net/npm/@qlik/embed-web-components@1/dist/oauth-callback.min.js"></script>
</head>

</html>

Any information or advice is much appreciated.