Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

PDF Viewer core component won’t display on page

Avatar

Level 2

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

errorerror

ErrorPDFViewer2.PNG

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.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @oscarr38307878 

 

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.

asutosh_jena_0-1619767173557.png

Thanks!

View solution in original post

5 Replies

Avatar

Correct answer by
Community Advisor

Hi @oscarr38307878 

 

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.

asutosh_jena_0-1619767173557.png

Thanks!

Avatar

Level 2

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

Avatar

Level 2

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.