EmbedUrl not working

Q&A
,
5

Hello @Saveen .

The Quick Sight embedding SDK 2.0 adds several enhancements and functionality including the use of asynchronous requests in JS (supporting promises) to optimize performance.

This changes a bit the way you need to code as the code is not executed sequentially, instead you will need to work with the promise handlers that get executed once the promise is actually fulfilled.

Based on this you will need to slightly change the code:

const embedDashboard = async (embbedURL = '@ViewBag.embeddUlr') => {

            const {
                createEmbeddingContext,
            } = Quick SightEmbedding;            


            const embeddingContext = await createEmbeddingContext();

            const containerDiv = document.getElementById("embedding-container");

            const frameOptions = {
                // replace the value below with the one generated via embedding API
                url:embbedURL,
                container: containerDiv,
                height: "700px",
                width: "1000px",
                
            };

            const contentOptions = {
                toolbarOptions: {
                    export: false,
                    undoRedo: false, // use this option to show or hide the undo and redo buttons
                    reset: false, // use this option to show or hide the  reset button
                },
               
                attributionOptions: {
                    overlayContent: false,
                },
            };

            const embeddedDashboard = await embeddingContext.embedDashboard(frameOptions, contentOptions)
        }

This should work assuming ‘@ViewBag.embeddUlr’ is already set to the embeddUrl when the embedDashboard promise handler is executed. So make sure you execute embedDashboard () async function when the @ViewBag.embeddUlr variable is already set after your server side component calls the GenerateEmbedUrlForRegisteredUser or GenerateEmbedUrlForAnonymousUser APIs.

Pseudocode with JQuery AJAX:

$.get(URL_FOR_SERVER_SIDE_COMPONENT, function(data){
     const embedDashboard = async (embbedURL = data.body ) => {
         ..... function code mentioned earlier ....
     };
       
      // call to embedDashboard function here as we have the value for the URL returned by your server side component
     embedDashboard();

}); // End of AJAX handler to the server side component

Hope it helps, marking this as solution to help other members of the community., otherwise let us know.

Thank you for posting into the QS community!