How to implement file viewer in WebClient using Office Web Viewer

How to implement file viewer in WebClient using Office Web Viewer

Reference
https://www.microsoft.com/en-us/microsoft-365/blog/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/

How to implement the FileViewer.ctrl

The FileViewer.ctrl template is applied over an edit control in your Plex panel, at runtime the control will be hidden to the user. Each time its value change, it will call the Office Viewer using the field's value as the URL of the file we want to open in the viewer 

IMPORTANT:

To use the office viewer tool and the FileViewer.ctrl, you need to have a file that is accessible from the cloud via a public domain and also the URL has to be encoded in URL encoding using percent-encoding. 

  1. Create a field and set the control name of the field to fileUrl:MainArea:template=FileViewer:default


    FileViewer.ctrl
    will be attached in this article and it should be placed in your custom template Java project. 


  2. Create a button to trigger the file viewer event

  3. Create a field to place the URL of your file.

  4. Do a put to set the value of the URL.
     

  5. Test your function



    Note
    :
    After you press the “Open File” button, it will automatically open your file with the office viewer.




    Generating the URL of a file located in the application server


    In this example, we will cover how to upload a local file from your server to the public domain of your server that you own and then encrypt the URL, so that your file is accessible over the Internet and can be used with the office viewer.
     

    1. Create a field and set the control name of the field to fileUrl:MainArea:template=FileViewer:default


    FileViewer.ctrl
    will be attached in this article and it should be placed in your custom template Java project. 

    2. C
    reate a button to trigger the file viewer event.  
     

    3. Create 3 Fields in your panel: 
          1. FileName 
          2. File Path 
          3. WebSite 


    1.  
    1. Call an API that contains the following code: 

    Parameters: 
    &(1:): FilePath (This field will contain the path where the documents are located) 
    &(2:): FileName (This field will contain the name of the document to open) 
    &(3:): FileURL (This field will contain the URL processed by the source code) 
    &(4:): Website (This field will contain the domain you will upload your file) 

    // Generate a random number from 1 to 90 
    // Create a directory in the web context based on the generated random number 
    // Copy the file from your source directory to the newly created directory 
    // Create the url to access the new file 
    import java.io.File; 
    import java.io.FileInputStream; 
    import java.io.FileOutputStream; 
    import java.io.IOException; 
    import java.io.FileNotFoundException; 

    import java.net.URLEncoder; 

    import java.nio.channels.FileChannel;  
    { 
        int random = (int)(Math.random() * 90 + 1); 
        com.adcaustin.webclient.IWebApp webApp = (com.adcaustin.webclient.IWebApp)(Object) fnc.getApp(); 
        javax.servlet.http.HttpServletRequest req = (javax.servlet.http.HttpServletRequest) webApp.getFromUserStorage("javax.servlet.http.HttpServletRequest"); 
        String path = req.getSession().getServletContext().getRealPath("/"); 
        java.io.File destPath = new java.io.File(path + random); 
        java.io.File destFile = new java.io.File(path + random + "\\" + &(2:)); 
        destPath.mkdir(); 
        String fileName = &(2:).toString(); 
        String srcUrl = &(1:) + "\\" + fileName; 
        java.io.File srcFile = new java.io.File(srcUrl); 
        FileChannel source = null; 
        FileChannel destination = null; 
     
        try { 
            /** 
             * getChannel() returns unique FileChannel object associated a file 
             * output stream. 

             */ 
            source = new FileInputStream(srcFile).getChannel(); 
            destination = new FileOutputStream(destFile).getChannel(); 
            if (destination != null && source != null) { 
                destination.transferFrom(source, 0, source.size()); 
                String webPath = &(4:) + req.getContextPath() + "/" +                random + "/" + fileName; 
                &(3:).fromString(URLEncoder.encode(webPath, "UTF-8")); 
            } 
        } catch (FileNotFoundException e) { 
            e.printStackTrace(); 
        } catch (IOException e) { 
            e.printStackTrace(); 
        } finally { 
            if (source != null) { 
                try { 
                    source.close(); 
                } catch (IOException e) { 
                    e.printStackTrace(); 
                } 
            } 
            if (destination != null) { 
                try { 
                    destination.close(); 
                } catch (IOException e) { 
                    e.printStackTrace(); 
                } 
            } 
        } 
    } 

  1. 5. Do a put to set the value of the URL. 
     


  1. Optional: you can create a new API to delete the folders and files that are older than certain number of days.
     

  1. 6. Test your function. 


    Note
    :
    After you press the “Open File” button, it will automatically open your file with the office viewer.