Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

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
Affirm 100
Level 10
asutosh_jena
Level 10

Likes

373 likes

Total Posts

480 posts

Correct Reply

133 solutions
Top badges earned
Affirm 100
Ignite 1
Establish
Give Back 50
Give Back 5
View profile

Avatar
Affirm 100
Level 10
asutosh_jena
Level 10

Likes

373 likes

Total Posts

480 posts

Correct Reply

133 solutions
Top badges earned
Affirm 100
Ignite 1
Establish
Give Back 50
Give Back 5
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
Establish
Level 4
Bhuwan_B
Level 4

Likes

56 likes

Total Posts

58 posts

Correct Reply

18 solutions
Top badges earned
Establish
Give Back
Boost 50
Boost 5
Boost 3
View profile

Avatar
Establish
Level 4
Bhuwan_B
Level 4

Likes

56 likes

Total Posts

58 posts

Correct Reply

18 solutions
Top badges earned
Establish
Give Back
Boost 50
Boost 5
Boost 3
View profile
Bhuwan_B
Level 4

29-04-2021