Vuet render mode > embedded pdf document does not automatically reload [without manual browser reload]

Hi, I’m working on an webapplication using moqui that embeds pdf documents in the web browser using Adobe PDF Embed API [which is a client side javascript library], To accomplish this, i have a screen widget with render mode as html,js,vuet,qvt, and have included the html/javascript code from Adobe > PDF Embed API; [included below]
As you can see in the code snippet below the code changes the url to the pdf file in the line > content:{location: {url: “http://localhost:8080/hmstatic/pdf/${filename}”}},
, at which point the browser url changes to the new url pointing to the pdf file [as expected], but the browser does not automatically render the pdf automatically until browser is reloaded manually using the browser reload button or Ctrl+R,

there is some reference to Client Rendered Vue Screen in online help which i read thru but unfortunately could not solve the above issue, Moqui Documentation Apparently we need the Vue Router [Javascript Router] component to kick in and reload the template / vue [pdf file] automatically, Appreciate any pointers on how this can be achieved, i’m including the screen that references PDF Embed API [from Adobe];

Everything works as expected when we load the browser manually after the screen is loaded, but we need to avoid the manual reload

Code Reference

<screen xmlns:xsi="" xsi:noNamespaceSchemaLocation=""
        allow-extra-path="true" default-menu-include="false">
        <log level="info" message="Entering ViewPrintPdf.xml filename ${filename}"/>
        <render-mode><text type="html,js,vuet,qvt"><![CDATA[
            <div id="adobe-dc-view"></div>
            <script src=""></script>
            <script type="text/javascript">
            // Store the UI options in a constant
            const previewConfig = {
               showDownloadPDF: false,
               showPageControls: true, //showPageControls needs to be true when showZoomControl: true
               showZoomControl: true,
               showAnnotationTools: false,
               embedMode: "FULL_WINDOW",  // embedMode includes LIGHT_BOX, FULL_WINDOW
               showPrintPDF: ${showPrintPDF}

            const saveOptions = {
                   autoSaveFrequency: 0,
                   enableFocusPolling: false,
                   showSaveButton: false
            document.addEventListener("adobe_dc_view_sdk.ready", function () {
               var adobeDCView = new AdobeDC.View({clientId: "40f5598045e64160babc289e96b45054", divId: "adobe-dc-view"});

               // Consume previewConfig here. . .
                  content:{location: {url: " Brochure.pdf"}},
                  metaData:{fileName: "Bodea Brochure.pdf"},
          }, previewConfig);

                   function(metaData, content, options) {
                      /* Add your custom save implementation here...and based on that resolve or reject response in given format */
                      return new Promise((resolve, reject) => {
                            code: AdobeDC.View.Enum.ApiResponseCode.SUCCESS,
                            data: {
                               /* Updated file metadata after successful save operation */
                               metaData: {fileName: "${filename}"}


I was able to solve this using window.location.reload [as below], maybe there is a better way to solve this, but this works

            // JavaScript anonymous function
            (() => {
                if (window.localStorage) {

                    // If there is no item as 'reload'
                    // in localstorage then create one &
                    // reload the page
                    if (!localStorage.getItem('reload')) {
                        localStorage['reload'] = true;
                    } else {

                        // If there exists a 'reload' item
                        // then clear the 'reload' item in
                        // local storage
            })(); // Calling anonymous function here only
1 Like