EmbedUrl not working

Question & Answer
,
1

Hi

I am using GenerateEmbedUrlForRegisteredUserAsync to generate embedded URL, this api returning the URL which is working fine if I put that inside iframe, but not working when using through javascript sdk

working fine if I use Iframe

<iframe width="100%"
              height="900"
              src="@ViewBag.embeddUlr">
</iframe>

not working if I use below code, showing not authorized

const embedDashboard = async () => {

            const {
                createEmbeddingContext,
            } = QuickSightEmbedding;

            const embbedURL = '@ViewBag.embeddUlr';


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

Hi @Saveen ,

Check the following guide : QuickSight Developer Portal ( How to embed it > Get embedding URL )

1 Like
3

@Koushik_Muthanna The api returning the URL and its working fine if I use Iframe. but not working If I use javascript sdk.

below code is not working

const embedDashboard = async () => {

            const {
                createEmbeddingContext,
            } = QuickSightEmbedding;

            const embbedURL = '@ViewBag.embeddUlr';


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

Hello @Saveen, were you able to get the embed url to work as needed or do you still need assistance on this?

5

Hello @Saveen .

The QuickSight 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,
            } = QuickSightEmbedding;            


            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!