Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Blank modal rendering on Adobe Document Cloud SDK viewer

New Here ,
Aug 13, 2021 Aug 13, 2021

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!

 

 

773
Translate
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

Can you share your code?

Translate
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

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

Translate
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

This was my original message

Translate
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

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

Translate
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

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>
Translate
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

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

Translate
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

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.

Translate
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

It seems to be working perfetcly. Thank very much @Joel Geraci 

Translate
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

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

Translate
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

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!

 

Translate
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

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

Translate
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

@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!

Translate
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

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

Translate
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

Can you share the entire code for the page?

Translate
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
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>
Translate
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
LATEST

@Joel Geraci Any ideas on what is going on with the framework?

Thank you!

Translate
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