How to use a variable in Adobe's pdf embed API as URL-value?

Question

I use the Adobe PDF Embed API (https://www.adobe.io/apis/documentcloud/dcsdk/docs.html?view=view) to display pdfs within modals on a site of mine. As I want the modals to only change in one tiny detail (the file-url of the pdf displayed there) I wanted to use the filename dynamically. So I did that:

       document.addEventListener("adobe_dc_view_sdk.ready", function() {
                                var adobeDCView = new AdobeDC.View({
                                    clientId: "xyz",
                                    divId: "adobe-dc-view"
                                });
                                adobeDCView.previewFile({
                                    content: {
                                        location: {
                                            var model_filename_chosen = "https://www.URL.com/files/" +
                                                var model_filename;
                                           // Does get printed correctly
                                            console.log(model_filename_chosen);
                                          //doesn't get parsed at all
                                            url: model_filename_chosen
                                        }
                                    },
                                    metaData: {
                                        fileName: "Something"
                                    }
                                }, {

                                });
                            });

And that in the header before it

function openFahrzeugModal(data) {
        x = new bootstrap.Modal(document.getElementById("modalFahrzeug"));
        x.toggle();
        $('#input_model_hidden').val(data);
        var model_filename = data;
        console.log(data);
    }

And the trigger for those looks then something like that:

<a onclick="openFahrzeugModal('myfile1.pdf')">
   

So any log does get printed correctly but the pdf isn't shown at all, the modal opens up correctly. The variable does get printed in other elements of the modal correctly but within the Adobe embed-thing the result is empty. I do use the same domain for the code and the file and my API-key is valid. As soon as I enter a static URL (the same basically as the one that gets printed on the console) the pdf gets shown correctly.

Why is that and what would I need to fix?

Answer 1

It's a timing issue. The code you have on top will run as soon as our library is loaded. What you want instead is for the previewFile code to run only on user input. I'd modify openFahrzeugModal such that it will run that part. Something like this:

function openFahrzeugModal(data) {
   x = new bootstrap.Modal(document.getElementById("modalFahrzeug"));
   x.toggle();
   $('#input_model_hidden').val(data);
   var model_filename = data;
   var model_filename_chosen = "https://www.URL.com/files/" +  model_filename;

   adobeDCView.previewFile({
      content: {
         location: {
           url: model_filename_chosen
         }
      },
      metaData: {
         fileName: "Something"
      }
   }, {
   });
 }

I typed that by hand so it may not be perfect. Do know however that you don't want to run your click event until the library is ready. Normally I'd assign the click handler in JS, not HTML, and do it inside the event handler for adobe_dc_view_sdk.ready.