PDF Viewer core component won’t display on page

[oscarr38307878]

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

error

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.

[Bhuwan_B]

Please check below URL's and see if these are of some help.

https://github.com/adobe/aem-core-wcm-components/tree/master/content/src/content/jcr_root/apps/core/...

https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/pdf-view...

https://aemcomponents.dev/content/core-components-examples/library/page-authoring/pdf-viewer.html

[oscarr38307878]

Resolved.

[Asutosh_Jena_ · Accepted solution]

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.

Thanks!

[oscarr38307878]

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

[oscarr38307878]

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.