How Can I Pass String Variable to Anonymous Adobe View SDK Script?

Question

I have a very basic knowledge of javascript and I have been unable to find a solution for my specific use of the Adobe View SDK API, though it seems like there should be a way. I am working on a web page to show newsletters in the pdf viewer. I have created a w3.css modal element so that I can open the viewer with a button click, and then close it with an "x" in the corner. The button click and the "x" toggle between the display style being "none" or "block". I really like this solution as it lets me use small images of the newsletters as the buttons, and it can be observed here: Test News Page by clicking on the newsletter image below May 4, 2020.

The ultimate goal I have is to be able to change the name of the pdf document that is opened in the viewer by clicking the button, which would need to pass a string variable called "docName" to the url called by the View SDK script. Since the url is already specified in the script inside my modal element when the page loads, here is the thinking I have for the additional script I need to pass my string variables: The button-click invokes my script (function changeName(docName)) and passes the "docName" variable. Then my script needs to pass this variable to the url in the View script (this is the part I don't know how to do), then refresh the page to reload my modal, and then change the display style of the modal to "block". I will copy the code for the View SDK below, showing where I need to insert the string variable with my document name:

<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
    var adobeDCView = new AdobeDC.View({clientId: "06179511ab964c9284f1b0887eca1b46", divId: "adobe-dc-view"});
    adobeDCView.previewFile({
        content:{location: {url: "https://www.shcsfarmington.org/" + docName + ".pdf"}},
        metaData:{fileName: "Newsletter_050420.pdf"}
    }, {embedMode: "FULL_WINDOW", defaultViewMode: "FIT_WIDTH"});
});
</script>

It seems like this should work, but with my limited knowledge of javascript I don't know how to pass this variable to the anonymous function in the View SDK code, and I would need as much detail and specifics in the syntax of the solution. I appreciate any help with this. Thanks.

EDIT: I thought maybe it would help to show the code for the function that I have come up with so far - then it could be examined and easier to debug and comment on:

<button id="CSS-050420" onclick="changeDoc('Newsletter_050420');"></button>
<script>
function changeDoc(docName) {

/* Need to pass docName to url=https://shcsfarmington.org/2020/news/Newsletter_" + newsDate + ".pdf"; */
window.location.reload(true);
document.getElementById('viewerModal').style.display='block'; 
}
</script>

Answer 1

I created a CodePen here for you to look at.

Basically, you'll load the first file when the SDK is ready but then you need to set the adobeDCView to null before recreating it.

function showPDF(url) {
    adobeDCView = null;
    fetch(url)
    .then((res) => res.blob())
    .then((blob) => {
        adobeDCView = new AdobeDC.View({
        // This clientId can be used for any CodePen example
        clientId: "e800d12fc12c4d60960778b2bc4370af",
        // The id of the container for the PDF Viewer
        divId: "adobe-dc-view"
        });
        adobeDCView.previewFile(
        {
            content: { promise: Promise.resolve(blob.arrayBuffer()) },
            metaData: { fileName: url.split("/").slice(-1)[0] }
        },
        {
            embedMode: "FULL_WINDOW",
            defaultViewMode: "FIT_PAGE",
            showDownloadPDF: true,
            showPrintPDF: true,
            showLeftHandPanel: false,
            showAnnotationTools: false
        }
        );
    });
}

The link click even will pass the url to the PDF and then display it.