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

Technical Questions
1

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="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://moqui.org/xsd/xml-screen-2.1.xsd"
        allow-extra-path="true" default-menu-include="false">
    <actions>
        <log level="info" message="Entering ViewPrintPdf.xml filename ${filename}"/>
    </actions>
    <widgets>
        <render-mode><text type="html,js,vuet,qvt"><![CDATA[
             <html><body>
            <div id="adobe-dc-view"></div>
            <script src="https://documentcloud.adobe.com/view-sdk/main.js"></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. . .
               adobeDCView.previewFile({
                  content:{location: {url: "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},
                  metaData:{fileName: "Bodea Brochure.pdf"},
          }, previewConfig);

               adobeDCView.registerCallback(
                   AdobeDC.View.Enum.CallbackType.SAVE_API,
                   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) => {
                         resolve({
                            code: AdobeDC.View.Enum.ApiResponseCode.SUCCESS,
                            data: {
                               /* Updated file metadata after successful save operation */
                               metaData: {fileName: "${filename}"}
                            }
                         });
                      });
                   },
                   saveOptions);

            });
            </script>
            </body></html>
]]></text></render-mode>
    </widgets>
</screen>
2

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;
                        window.location.reload();
                    } else {

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