PDF Viewer core component won’t display on page

Avatar

Avatar
Boost 1
Level 1
oscarr38307878
Level 1

Like

1 like

Total Posts

13 posts

Correct reply

1 solution
Top badges earned
Boost 1
Affirm 1
View profile

Avatar
Boost 1
Level 1
oscarr38307878
Level 1

Like

1 like

Total Posts

13 posts

Correct reply

1 solution
Top badges earned
Boost 1
Affirm 1
View profile
oscarr38307878
Level 1

29-04-2021

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Applaud 25
Level 10
asutosh_jena
Level 10

Likes

593 likes

Total Posts

705 posts

Correct reply

207 solutions
Top badges earned
Applaud 25
Give Back 100
Boost 500
Affirm 100
Ignite 1
View profile

Avatar
Applaud 25
Level 10
asutosh_jena
Level 10

Likes

593 likes

Total Posts

705 posts

Correct reply

207 solutions
Top badges earned
Applaud 25
Give Back 100
Boost 500
Affirm 100
Ignite 1
View profile
asutosh_jena
Level 10

30-04-2021

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!

Answers (1)

Answers (1)

Avatar

Avatar
Affirm 50
Level 6
Bhuwan_B
Level 6

Likes

133 likes

Total Posts

124 posts

Correct reply

50 solutions
Top badges earned
Affirm 50
Give Back 5
Boost 100
Give Back 3
Affirm 25
View profile

Avatar
Affirm 50
Level 6
Bhuwan_B
Level 6

Likes

133 likes

Total Posts

124 posts

Correct reply

50 solutions
Top badges earned
Affirm 50
Give Back 5
Boost 100
Give Back 3
Affirm 25
View profile
Bhuwan_B
Level 6

29-04-2021