topic Re: Pass STORE Variable to iFrame URL in Webex for Developers

Pass STORE Variable to iFrame URL

Daryl Clark — Fri, 15 Dec 2023 21:54:38 GMT

I am looking to pass a variable from the STORE Data Provider as part of an iFrame URL. For example:

"widgets": {
"comp1": {
"attributes": {
"src": "https://test/{$STORE.agent.agentId}"
},
"comp": "agentx-wc-iframe"
}
}

The value is not being passed, rather the literal string that I put in. Any ideas?

Re: Pass STORE Variable to iFrame URL

ntheolog — Sat, 16 Dec 2023 00:05:10 GMT

Its treating it as a string. A better approach would be to pass it in as $STORE.agent.agentId and the handle it in the widget/app as this.src.

Screen shot:
[A screenshot of a computer code Description automatically generated]

Layout.json

"attributes": {
"src": https://test/{$STORE.agent.agentId}<>,
"src": "$STORE.agent.agentId"
},

inside web component.

constructor() {
this.src = “”
}

Somewhere in your code….
Let url = “https://www.test.com/${this.src}<>”

Re: Pass STORE Variable to iFrame URL

Daryl Clark — Sat, 16 Dec 2023 01:10:37 GMT

Thanks....I wish I knew what that all meant. Remember this is a "agentx-wc-iframe" so I'm just loading a URL in the page. I don't exactly know what you mean by all of this. Could you share a complete json widget example?

Re: Pass STORE Variable to iFrame URL

momeraj — Tue, 19 Dec 2023 12:21:59 GMT

class IframeComponent extends HTMLElement {

constructor() {

super();

this.attachShadow({ mode: 'open' });

}

connectedCallback() {

this.render();

}

get paramater() {

return this.getAttribute('paramater');

}

set paramater(val) {

if (val) {

this.setAttribute('paramater', val);

} else {

this.removeAttribute('paramater');

}

render() {

this.shadowRoot.innerHTML = `

<style>

iframe {

width: 100%;

height: 100%;

border: none;

}

</style>

}

if (!customElements.get('iframe-component')) {

customElements.define('iframe-component', IframeComponent);

}

1. host this widget somewhere in cloud so that it is accessible through internet
2. in side layout json
"attributes": {
"parameter": "$STORE.agent.agentId"
},

Re: Pass STORE Variable to iFrame URL

Daryl Clark — Tue, 19 Dec 2023 22:30:43 GMT

Thank you for this, it was super helpful to put me on the right track. I wanted to make it work just how you had it before trying to modify it for my use case. I am just getting a grey screen in my WxCC NAV panel.

{ "nav": { "align": "top", "icon": "share-screen", "iconType": "momentum", "label": "Test IFrame", "navigateTo": "test-iframe-2" }, "page": { "id": "test-iframe-2", "layout": { "areas": [ [ "comp1" ] ], "size": { "cols": [ 1 ], "rows": [ 1 ] } }, "widgets": { "comp1": { "attributes": { "parameter": "$STORE.agent.agentId" }, "comp": "widget-one", "script": "https://<redacted>/iframe.js" } } }, "visibility": "SCREEN_POP" }

class IframeComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); } connectedCallback() { this.render(); } get paramater() { return this.getAttribute('paramater'); } set paramater(val) { if (val) { this.setAttribute('paramater', val); } else { this.removeAttribute('paramater'); } } render() { this.shadowRoot.innerHTML = ` <style> iframe { width: 100%; height: 100%; border: none; } </style> <iframe src="https://www.javascripttutorial.net/${this.paramater}"></iframe> `; } } if (!customElements.get('iframe-component')) { customElements.define('iframe-component', IframeComponent); }

Re: Pass STORE Variable to iFrame URL

ramesh-t — Wed, 17 Apr 2024 13:49:04 GMT

I tried above shared code but with my url , buts its not working , is there any other method to get user details in iframe page.

Re: Pass STORE Variable to iFrame URL

ramesh-t — Wed, 17 Apr 2024 14:02:13 GMT

I tried above shared code but with my url , buts its not working , is there any other method to get user details in iframe page.