View SDK - How to Pass String Variable with Button Click to URL of File Location?

Report · May 18, 2020

For my web page I want to use the Adobe View SDK so the visitor can view various PDF files by clicking a button to load them. All of my files will reside in the same directory on my server, so the only part of the URL that would need to be passed in a variable is the file name, or in my sample "docName". I have created a test page that shows my desired viewer function Here I have been able to create the variable "docName" and by assigning the value in the script everything works fine, and the correct document is loaded. Currently I am making the viewer appear with a button click by using a w3.css modal element to contain the View SDK code, and the button simply changes the style of the modal from "none" to "display"

Here is the code for this test:

<html>
<head>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<style>
#pdfModal {
	margin-left: auto;
	margin-right: auto;
	padding-top: 50px;
	display: none;
}
</style>
</head>
<body>

<button class="w3-button w3-round-large" onclick="document.getElementById('pdfModal').style.display='block';">Open 1</button>


<!-- PDF Modal -->
<div id="pdfModal" class="w3-modal">
  <div class="w3-modal-content">
	<header class="w3-container">
	<span onclick="document.getElementById('pdfModal').style.display='none'" 
        class="w3-button w3-display-topright">&times;</span>
	<h2>PDF Viewer</h2>
	</header>
 	
  <div id="adobe-dc-view" style="height:550px"></div>
  <script type="text/javascript">
  document.addEventListener("adobe_dc_view_sdk.ready", function()
   {
      var docName = "Newsletter_050420.pdf";
	  var adobeDCView = new AdobeDC.View({clientId: "06179511ab964c9284f1b0887eca1b46", divId: "adobe-dc-view"});
      adobeDCView.previewFile(
     {
         content:  {location: {url: "https://www.shcsfarmington.org/2020/news/" + docName}},
         metaData: {fileName: docName}
     }, {embedMode: "FULL_WINDOW", defaultViewMode: "FIT_WIDTH"});
   });
  </script>
  </div>
 </div>
 
 </body>
</html>

I have read in the documentation that it is possible to pass variables to the script, but the sample does not cover my specific need, and my knowledge of javascript is basic at best. What I need is a "helper function" or some other method so that when a visitor clicks on the button for each document, the "onclick" causes the "docName" variable (in my sample) to be updated and passed to the "url" parameter and the "fileName" parameter of the "adobeDCView.previewFile" function. I believe this should be possible, but after numerous tries using my basic skills I have not been able to accomplish this task. I would appreciate any and all help. Thanks.

[This post moved from Get Started to DC SDK board by Moderator.]

Report · May 19, 2020

Hi, I have tried to solve your problem. Below sample might help your cause

<html>
<head>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<style>
#pdfModal {
	margin-left: auto;
	margin-right: auto;
	padding-top: 50px;
	display: none;
}
</style>
</head>
<body>

<button class="w3-button w3-round-large" onclick="(function(){
      document.getElementById('pdfModal').style.display='block';
      // Pass name accordingly
      showFile('Newsletter_050420.pdf');
  })();">Open 1</button>

<button class="w3-button w3-round-large" onclick="(function(){
    document.getElementById('pdfModal').style.display='block';
    // Pass name accordingly
    showFile('Newsletter_050420.pdf');
})();">Open 2</button>


<!-- PDF Modal -->
<div id="pdfModal" class="w3-modal">
  <div class="w3-modal-content">
	<header class="w3-container">
	<span onclick="document.getElementById('pdfModal').style.display='none'" 
        class="w3-button w3-display-topright">&times;</span>
	<h2>PDF Viewer</h2>
	</header>
 	
  <div id="adobe-dc-view" style="height:550px"></div>
  <script type="text/javascript">

  function showFile(docName) {
    function adobePreview() {
      var adobeDCView = new AdobeDC.View({clientId: "06179511ab964c9284f1b0887eca1b46", divId: "adobe-dc-view"}); 
      adobeDCView.previewFile(
       {
           content:  {location: {url: "https://www.shcsfarmington.org/2020/news/" + docName}},
           metaData: {fileName: docName}
       }, {embedMode: "FULL_WINDOW", defaultViewMode: "FIT_WIDTH"});     
    }
    // Checking whether SDK loaded or not
    if (AdobeDC && AdobeDC.View) {
      adobePreview();
    } else {
      document.addEventListener("adobe_dc_view_sdk.ready", adobePreview);
    }
  }
  </script>
  </div>
 </div>
 </body>
</html>

Also, I saw that your intent is to show the PDF document in a modal. I am pleased to inform you that we will be releasing a new embed mode soon in our next release which seems to be more suited for your case. Please stay tuned for the next release.

Report · May 19, 2020

Thank you so much for that solution, it appears to work exactly as I had hoped. I will look forward to checking the next release, where would be the best place to look for the announcement? Thanks again - great help!!

View SDK - How to Pass String Variable with Button Click to URL of File Location?

1 Correct answer