Pass STORE Variable to iFrame URL

[Daryl Clark]

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?

[ramesh-t]

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.

[momeraj · Accepted solution]

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);

}

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

[Daryl Clark]

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);
}

[ramesh-t]

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.

[ntheolog]

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}<>”

[Daryl Clark]

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?