Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Adobe PDF Embed API

  • gsoto
  • gsoto's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
1 year 6 months ago #232455 by gsoto
Adobe PDF Embed API was created by gsoto
Please help us help you and fill where relevant:
Your LimeSurvey version: 3.23.1
Own server or LimeSurvey hosting: Own server
Survey theme/template: Own template
==================
Embedding a PDF in HTML is kind of messy. It's clumsy and it's not responsive. Adobe published an API for embedding PDFs responsively. I would like to implement this API in Limesurvey.

This page gives example codes for using the API. I'm trying to implement the following code:
Code:
<div id="adobe-dc-view"></div> <script src="https://documentservices.adobe.com/view-sdk/viewer.js"></script> <script type="text/javascript"> document.addEventListener("adobe_dc_view_sdk.ready", function(){ var adobeDCView = new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"}); adobeDCView.previewFile({ content:{location: {url: "https://documentservices.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}}, metaData:{fileName: "Bodea Brochure.pdf"} }, {}); }); </script>

I got my personal client ID and registered it for use on my domain. How can I implement the script in a Limesurvey question? I tried placing the function inside a
Code:
$(document).ready(function())
I also tried placing the line
Code:
<script src="https://documentservices.adobe.com/view-sdk/viewer.js"></script>
inside the head.twig of the template. Both things I tried are not based on any real understanding, just browsing the workaround script page and taking bits from scripts that seem to work. I'm hoping there's a straightforward standard way to implement this.

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 6 months ago - 1 year 6 months ago #232463 by tpartner
Replied by tpartner on topic Adobe PDF Embed API
Did you replace <YOUR_CLIENT_ID> with a valid ID and are you trying it on an application domain regisered with Adobe?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 1 year 6 months ago by tpartner.

Please Log in to join the conversation.

  • gsoto
  • gsoto's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
1 year 6 months ago #232479 by gsoto
Replied by gsoto on topic Adobe PDF Embed API
I created credentials for my domain that I'm using, and I did replace <YOUR_CLIENT_ID> with my client ID. When I use the code in a local html file on my computer and view it in a web browser, the framework of the API loads and gives an error (which makes sense, because I'm not using it on the registered domain). When I use the code in a Limesurvey question as described in my original post, nothing loads at all. It just shows a blank page.

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 6 months ago #232487 by tpartner
Replied by tpartner on topic Adobe PDF Embed API
Look for errors in the console (F12).

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

  • gsoto
  • gsoto's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
1 year 6 months ago #232491 by gsoto
Replied by gsoto on topic Adobe PDF Embed API
The error console shows the following error:
Code:
Uncaught SyntaxError: Unexpected token '<' (at de:266:38)

I tried the exact same HTML code in a local file from my HD and in my Limesurvey question. I am using the same code with the same client ID. For the PDF file to display, I'm using the example PDF file provided by adobe with their example code.
Code:
<div id="adobe-dc-view"> </div>
<script src="https://documentservices.adobe.com/view-sdk/viewer.js"></script><script type="text/javascript">
    document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
        var adobeDCView = new AdobeDC.View({clientId: "d9a1ae01bd834b199560882fbe1450e4", divId: "adobe-dc-view"});
        adobeDCView.previewFile({
            content:{location: {url: "https://documentservices.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},
            metaData:{fileName: "Bodea Brochure.pdf"}
        }, {});
    });
</script>

When opening the local file in my browser, the PDF file is embedded as desired. The page contains the following script:
Code:
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "d9a1ae01bd834b199560882fbe1450e4", divId: "adobe-dc-view"});
adobeDCView.previewFile({content:{location: {url: "https://documentservices.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},
metaData:{fileName: "Bodea Brochure.pdf"} }, {});
});
</script>

In Limesurvey, nothing is shown. The same script on the page contains the following script:
Code:
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View(<span class='em-expression em-haveerror' ><span class='em-error' title=' ' ><span title='Undefinierte Variable' class='em-var em-var-error' >clientId</span></span><span class='em-error' title=' ' ><span title="Nicht-unterstützte Syntax"> : </span></span><span class="em-var-string">"d9a1ae01bd834b199560882fbe1450e4"</span>, <span class='em-error' title=' ' ><span title='Undefinierte Variable' class='em-var em-var-error' >divId</span></span><span class='em-error' title=' ' ><span title="Nicht-unterstützte Syntax"> : </span></span><span class="em-var-string">"adobe-dc-view"</span></span>);
adobeDCView.previewFile({ content:<span class='em-expression em-haveerror' ><span class='em-error' title=' ' ><span title='Undefinierte Variable' class='em-var em-var-error' >location</span></span><span class='em-error' title=' ' ><span title="Nicht-unterstützte Syntax"> : </span></span><span class='em-error' title=' ' ><span title="Nicht-unterstützte Syntax"> { </span></span><span class='em-error' title=' ' ><span title='Undefinierte Variable' class='em-var em-var-error' >url</span></span><span class='em-error' title=' ' ><span title="Nicht-unterstützte Syntax"> : </span></span><span class="em-var-string">"https://documentservices.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"</span><span class='em-error' title=' ' ><span title="Nicht-unterstützte Syntax"> } </span></span></span>,
metaData:<span class='em-expression em-haveerror' ><span class='em-error' title=' ' ><span title='Undefinierte Variable' class='em-var em-var-error' >fileName</span></span><span class='em-error' title=' ' ><span title="Nicht-unterstützte Syntax"> : </span></span><span class="em-var-string">"Bodea Brochure.pdf"</span></span>
}, <span class='em-expression em-haveerror em-error' title='Schlecht abgeschlossener Ausdruck - Konstante oder Variable erwartet; Kein gültiger Ausdruck' ></span>);
});
</script>

Does this help at all? If we don't get it to work, I'll find another way to display the PDF file – probably just a link to download the file so users can view it in whatever way suits them best.

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 6 months ago #232493 by tpartner
Replied by tpartner on topic Adobe PDF Embed API
ExpressionScript is throwing errors because you don't have spaces after opening curly braces and before closing curly braces.

Try this:

Code:
<div id="adobe-dc-view"> </div>
<script src="https://documentservices.adobe.com/view-sdk/viewer.js">
</script><script type="text/javascript">
    document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
        var adobeDCView = new AdobeDC.View({
      clientId: "<YOUR_CLIENT_ID>", 
      divId: "adobe-dc-view"
    });
 
        adobeDCView.previewFile({
            content:{
        location: {
          url: "https://documentservices.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"
        }
      },
            metaData:{
        fileName: "Bodea Brochure.pdf"
      }
        }, {  });
    });
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: gsoto

Please Log in to join the conversation.

  • gsoto
  • gsoto's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
1 year 6 months ago #232494 by gsoto
Replied by gsoto on topic Adobe PDF Embed API
This totally does the job. Thank you so much Tony!

Please Log in to join the conversation.

Lime-years ahead

Online-surveys for every purse and purpose