Quicksight Q Iframe not Destroyed

Question & Answer
, ,
1

I am embedding the quicksight Q bar in the angular application. When I navigate from the quicksight page to another page and return to the quicksight page, the previous iframe is still there and I see two Q bars, one the old one and another the new one. How to destroy the old session

Here is my angular code

    async embedQSearchBar(embedUrl: string): Promise<void> {
        try {
            const {createEmbeddingContext} = QuickSightEmbedding;

            const embeddingContext = await createEmbeddingContext({
                onChange: (changeEvent, metadata) => {
                    console.log('Context received a change', changeEvent, metadata);
                },
            });
            console.log('>>>>>. Embedding context created:', embeddingContext);

            const containerDiv = document.getElementById('pymntSearch');

            const frameOptions = {
                url: embedUrl,
                container: containerDiv,
                height: '500px',
                width: '1000px',

                onChange: (changeEvent, metadata) => {
                    console.log('Frame onChange:', changeEvent, metadata);
                    switch (changeEvent.eventName) {
                        case 'FRAME_MOUNTED':
                            console.log('Experience frame is mounted.');
                            break;            
                    }
                },
            };
            const contentOptions = {
                hideTopicName: false,
                allowTopicSelection: true,

                onMessage: (messageEvent, experienceMetadata) => {
                    console.log('Content onMessage:', messageEvent, experienceMetadata);
                    switch (messageEvent.eventName) {
                        case 'Q_SEARCH_OPENED':
                            console.log('Q Search content expanded');
                            break;
                        case 'CONTENT_LOADED':
                            console.log('Q Search is loaded.');
                            break;
                    }
                }
            };
            console.log('Embedding Q Search Bar with frameOptions:', frameOptions, 'and contentOptions:', contentOptions);

            this.embeddedQSearchBarExperience = await embeddingContext.embedQSearchBar(frameOptions, contentOptions);
            console.log('Embedded Q Search Bar Experience:', this.embeddedQSearchBarExperience);
        } catch (error) {
            console.error('Error embedding Q Search Bar:', error);
        }
    }

Please help to resolve this issue

2

Hi @jayakumarim,
The issue you’re seeing, with old iframes persisting and causing multiple QuickSight Q bars to appear, happens because previous instances aren’t being cleaned up properly.

While I’m not an Angular developer, I believe you need to ensure the old QuickSight Q bar instance is removed or destroyed before embedding a new one. You could try removing the container element where the QuickSight Q bar is embedded to remove any old iframes before creating a new instance. This will likely need to be done on load every time a user views the page.

Let me know if you have any additional questions!

1 Like
3

It is working, Thank you @Brett

1 Like