Blank modal rendering on Adobe Document Cloud SDK viewer

New Here ,
Aug 13, 2021 Aug 13, 2021

Copy link to clipboard

Copied

I have a viewer on my website which is supose to show content from a PDF file. It loads perfectly sometimes, but most of the times it displayes a blank modal content. It does triggers an event APP_RENDERING_START but then no other messages can be seeing, neither the content is display inside the pop up modal when it opens. 

Any suggestions on what the problem might be as i didn't find many answers on web?

Thank you!

 

 

Views

165

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 16, 2021 Aug 16, 2021

Copy link to clipboard

Copied

Can you share your code?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 16, 2021 Aug 16, 2021

Copy link to clipboard

Copied

My answer gives always post flooding detected. Any idea why?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 16, 2021 Aug 16, 2021

Copy link to clipboard

Copied

This was my original message

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 16, 2021 Aug 16, 2021

Copy link to clipboard

Copied

Can you show the part of the code that is loading the API, not just the embed code?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 16, 2021 Aug 16, 2021

Copy link to clipboard

Copied

Sure, this is the div with the button that opens the modal and the div tag to the modal itself.

<div id="download-button" class="sticky_button">
							<a tabindex="0" class="bx--btn bx--btn--primary" onclick="IBMCore.common.widget.overlay.show('overlayExampleLarge'); return false;"  style="padding-right: 10px !important" type="button" id="pge—-footer-0__card-0__link-0" driverLocation="0" data-driverId="{{ smartpaper.next_step_01_title | slug }}" href="assets/pdf/Industry-4.0.pdf" download title="{{ smartpaper.next_step_01_title }}" target="_blank" rel="noopener noreferrer">
								Download PDF (1.5 MB)
							</a>
						</div>
						 <div class="ibm-common-overlay ibm-overlay-alt-three" data-widget="overlay" id="overlayExampleLarge" style="height: 100%">
							<div id="adobe-dc-view"></div>          
						</div>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 17, 2021 Aug 17, 2021

Copy link to clipboard

Copied

Hi @Joel_Geraci any idea on what is causing the issue?
Thank you!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 17, 2021 Aug 17, 2021

Copy link to clipboard

Copied

It looks like you are trying to have a button that opens the PDF file in a modal when clicked. If that is the case, take a look at my CodePen example here. The key to making Embed API work every time is to wrap whatever actions it is required for in the "adobe_dc_view_sdk.ready" callback. That way the buttons won't be enabled until Embed API is ready to display the PDF.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 17, 2021 Aug 17, 2021

Copy link to clipboard

Copied

It seems to be working perfetcly. Thank very much @Joel_Geraci 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 20, 2021 Aug 20, 2021

Copy link to clipboard

Copied

I'm putting this back as open, as it seems to be an issue 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 20, 2021 Aug 20, 2021

Copy link to clipboard

Copied

Hi @Joel_Geraci 

I realized that the code provided above doesn't seems to work on Firefox in Icognito tab in some specific cases. Is there any issue related to this?

Thank you!

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 20, 2021 Aug 20, 2021

Copy link to clipboard

Copied

I can't seem to reproduce that issue in Firefox. It's working fine with my CodePen on both macOS and Windows.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 25, 2021 Aug 25, 2021

Copy link to clipboard

Copied

@Joel_Geraci I guess this might be a bug then. We have the same piece of code working in Chrome and not in Firefox. Has it been tested on both browsers? Can this issue please be investigated?

Thank you!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 25, 2021 Aug 25, 2021

Copy link to clipboard

Copied

@Joel_Geraci Also, no errors have been displayed in the console when this happens...

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 25, 2021 Aug 25, 2021

Copy link to clipboard

Copied

Can you share the entire code for the page?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 25, 2021 Aug 25, 2021

Copy link to clipboard

Copied

const clientId = "XXXXXXXXXXXX";

        function fetchPDF(urlToPDF) {
            return new Promise((resolve) => {
                fetch(urlToPDF)
                    .then((resolve) => resolve.blob())
                    .then((blob) => {
                        resolve(blob.arrayBuffer());
                    })
            })
        }

        function showPDF(urlToPDF) {
            var adobeDCView = new AdobeDC.View({
                    clientId: clientId,
                    divId: "adobe-dc-view"
                });
                var previewFilePromise = adobeDCView.previewFile(
                    {
                        content: { promise: fetchPDF(urlToPDF) },
                        metaData: { fileName: urlToPDF.split("/").slice(-1)[0] }
                    },
                    
                );
        }

        document.addEventListener("adobe_dc_view_sdk.ready", function () {

            document.getElementById("pge—-footer-0__card-0__link-0").addEventListener("click", function () {
                showPDF("https://XXXXXXXXX.pdf")
            });

            /* Register the callback to receive the events */
            adobeDCView.registerCallback(
                /* Type of call back */
                AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,
                /* call back function */
                
                function (event) {
                    console.log(event);
                    
                    if (event.type === 'PAGE_VIEW'){
                        let pageNumber = event.data.pageNumber;
                        let pageTitle = document.title.replace(' | ', '');
                        let pageHref = document.location.origin+document.location.pathname;

                        if (pages.includes(pageNumber)){

                        }
                        else {
                            console.log(pageNumber);
                            pages.push(pageNumber);
                            console.log(pages);
                            window.history.replaceState('', pageTitle+' PDF '+pageNumber, pageHref+'#'+pageNumber);
                            digitalData.page.pageInfo.pageID = documentTitle+' - PDF '+pageNumber;
                            
                        }  
                    }

                    if (event.type === 'HYPERLINK_OPEN'){
            
                        if (event.data.type === 'internal'){
                            console.log('clicked: pdf nav link');
                        }
                        else if (event.data.type === 'external'){
            
                            let hyperlink = event.data.url;

                            if (hyperlink.includes('ibm.com')){
                                console.log('clicked: IBM link');

                                let eventInfo = {
                                    type               : "pageclick",
                                    primaryCategory    : "PAGE CLICK",
                                    eventName          : hyperlink
                                };
                                
                                console.log(eventInfo);
                            }
                            else {
                                console.log('clicked: external link');

                                let eventInfo = {
                                    type               : "pageclick",
                                    primaryCategory    : "EXTERNAL LINK",
                                    eventName          : hyperlink
                                };
                              
                                console.log(eventInfo);
                            }
                        }
                    }

                    if (event.type === 'DOCUMENT_DOWNLOAD'){
                        console.log('downloaded PDF');

                        let eventInfo = {
                            type               : "pageclick",
                            primaryCategory    : "DOWNLOAD",
                            eventName          : "Download PDF"
                        };
                        
                        console.log(eventInfo);
                    }

                    if (event.type === 'DOCUMENT_PRINT'){
                        console.log('printed PDF');

                        let eventInfo = {
                            type               : "pageclick",
                            primaryCategory    : "DOWNLOAD",
                            eventName          : "Download PDF"
                        };
                        
                        console.log(eventInfo);
                    }
                },
                /* options to control the callback execution */
                {
                    /* Enable PDF analytics events on user interaction. */
                    enablePDFAnalytics: true,
                }
            );

        });

        // Add arrayBuffer if necessary i.e. Safari
        (function () {
            if (Blob.arrayBuffer != "function") {
                Blob.prototype.arrayBuffer = myArrayBuffer;
            }
            function myArrayBuffer() {
                return new Promise((resolve) => {
                    let fileReader = new FileReader();
                    fileReader.onload = () => {
                        resolve(fileReader.result);
                    };
                    fileReader.readAsArrayBuffer(this);
                });
            }
        })();

        </script>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 26, 2021 Aug 26, 2021

Copy link to clipboard

Copied

LATEST

@Joel_Geraci Any ideas on what is going on with the framework?

Thank you!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources