PDF Viewer core component won’t display on page | Community
Skip to main content
O
Oscar Omar31292027ezxc
Level 2
April 30, 2021
Solved

PDF Viewer core component won’t display on page

  • April 30, 2021
  • 3 replies
  • 4598 views

Core Components installed v. 2.16.0

https://github.com/adobe/aem-core-wcm-components/releases/tag/core.wcm.components.reactor-2.16.0

AEM 6.4.8.3

Follow this article on how to use PDFs in AEM with the PDF Viewer Component integrated with the PDF Embed API.

What I’ve done so far:

  1. Installed Core components core.wcm.components.all-2.16.0.zip
  2. Create context aware configuration
  3. In AEM navigate to: /conf and create the following structure

     /conf
         /mysite                           sling:Folder
              /sling:configs             nt:unstructured
                  /com.adobe.cq.wcm.core.components.internal.services.pdfviewer.PdfViewerCaConfig

                   Add Property = clientId, value = key obtained by registering for the view sdk api

  1. Overlaid /apps/core/wcm/components/pdfviewer
    Under /apps/mysite/components/content/pdfviewer
  2. On /apps/mysite/components/content/pdfviewer/v1/pdfviewer
    Add property sling:resourceSuperType value /apps/core/wcm/components/pdfviewer/v1/pdfviewer
    Modify property componentGroup value General
  3. Under etc/designs/mysite/clientlib, embed core.wcm.components.pdfviewer.v1 (Found here)
  4. Lastly on mysite parent node /content/mysite/jcr:content
    add property = sling:configRef value =/conf/mysite
    (Found here)

ERROR1:

GET http://mysite/content/dam/mysite/myfile.pdf 404 (Not Found)                                               VM20825 granite.js:266

ERROR2:

Uncaught (in promise) {code: "PREVIEW_RENDERING_FAILED"}                                                                page.html:1

Our author instance has http://mysite/author as contextPath, which is not reflected in Error 1

File reference should be http://mysite/author/content/dam/mysite/myfile.pdf
which does display the asset

Would Apache Sling Context-Aware Configuration - Override help me fix this?
Not sure how to add  /author in the override syntax for [{contexPath}]

Thanks for all your help.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Asutosh_Jena_

Hi @oscar omar31292027ezxc 

 

Here are the steps I have followed and it works perfectly fine for me:

  1. Created an OSGi config with com.adobe.cq.wcm.core.components.internal.services.pdfviewer.PdfViewerCaConfig under /conf/we-retail/sling:configs path.
  2. Added the clientId property (Tried with one that I have generated form Adobe as well. You can try using "28b07c6be4d544f188dc2f36e33b196b" id. Both worked for me). If the clientId is not authorized to use in your domain (in mycase it's localhost), you will get an error while rendering the PDF with an error message "This application domain (http://localhost:4502) is not authorized to use the provided PDF Embed API Client ID."
  3. Added the sling:conf property on /content/we-retail/jcr:content node with a value of "/conf/we-retail"
  4. Overlay the pdfviewer component from /apps/core/wcm/components/pdfviewer/v1/pdfviewer to /apps/weretail/components/content/pdfviewer and removed all the child nodes.
  5. Added the sling:resourceSuperType property with value as core/wcm/components/pdfviewer/v1/pdfviewer
  6. Updated the componentGroup to We.Retail from .core-wcm
  7. Navigate to /apps/weretail/clientlibs/clientlib-base location and add core.wcm.components.pdfviewer.v1 as the embed property where the clientlib is loaded on the page. This will ensure the required CSS and JS files are loaded for the component.
  8. Navigate to http://localhost:4502/editor.html/content/we-retail/language-masters/en/experience.html page drag and drop PDF Viewer component on page.
  9. Configure any PDF. I did with /content/dam/core-components-examples/library/sample-assets/Bodea Brochure.pdf save the dialog.
  10. This will render the PDF.

Thanks!

3 replies

Asutosh_Jena_
Community Advisor
Asutosh_Jena_Community AdvisorAccepted solution
Community Advisor
April 30, 2021

Hi @oscar omar31292027ezxc 

 

Here are the steps I have followed and it works perfectly fine for me:

  1. Created an OSGi config with com.adobe.cq.wcm.core.components.internal.services.pdfviewer.PdfViewerCaConfig under /conf/we-retail/sling:configs path.
  2. Added the clientId property (Tried with one that I have generated form Adobe as well. You can try using "28b07c6be4d544f188dc2f36e33b196b" id. Both worked for me). If the clientId is not authorized to use in your domain (in mycase it's localhost), you will get an error while rendering the PDF with an error message "This application domain (http://localhost:4502) is not authorized to use the provided PDF Embed API Client ID."
  3. Added the sling:conf property on /content/we-retail/jcr:content node with a value of "/conf/we-retail"
  4. Overlay the pdfviewer component from /apps/core/wcm/components/pdfviewer/v1/pdfviewer to /apps/weretail/components/content/pdfviewer and removed all the child nodes.
  5. Added the sling:resourceSuperType property with value as core/wcm/components/pdfviewer/v1/pdfviewer
  6. Updated the componentGroup to We.Retail from .core-wcm
  7. Navigate to /apps/weretail/clientlibs/clientlib-base location and add core.wcm.components.pdfviewer.v1 as the embed property where the clientlib is loaded on the page. This will ensure the required CSS and JS files are loaded for the component.
  8. Navigate to http://localhost:4502/editor.html/content/we-retail/language-masters/en/experience.html page drag and drop PDF Viewer component on page.
  9. Configure any PDF. I did with /content/dam/core-components-examples/library/sample-assets/Bodea Brochure.pdf save the dialog.
  10. This will render the PDF.

Thanks!

    O
    Oscar Omar31292027ezxcAuthor
    Level 2
    April 30, 2021

    Thanks for taking the time Jena, your steps pretty much match what I described on mine, with the exception that I did not remove the child nodes from the overlay and perhaps you meant to leave the pdfviewer node and not the folder?... or maybe that is the node you used instead?...anyhow, I replicated your steps in WeRetail and still failed. I think the issues is (as stated on my last paragraph) with our application not having the same contextPath in my URL as the AEM default...we included the word /author after the localhost:4502 http://my.site/author/editor.html/content/we-retail/language-masters/en/experience.html

    O
    Oscar Omar31292027ezxcAuthor
    Level 2
    May 5, 2021

    I was able to resolve our issue by following @vijayalakshmi_s OSGI factory approach here. In addition of overriding the WCM modes for edit and preview under /apps/site/components/content/pdfviewer/v1/pdfviewer/pdfviewer.html to account for our custom context path /author to reference back to the Assets Manager.

    Terms & ConditionsAccessibility statement

    Loading footer...