Custom HTML attributes in UI framework
Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
3 hours 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.
0 REPLIES 0