How to implement file viewer in WebClient using Office Web Viewer

How to implement file viewer in WebClient using Office Web Viewer

Reference

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. 



    • Related Articles

    • Web Embedded File

      This control template will allow you to display files within your WebClient page. Primarily this is used to display images dynamically on your page. 1) Copy WebEmbeddedFile.ctrl into your Custom Templates folder so that it can be referenced by ...
    • Web Controls

      What Are the Different Types of Controls? Include files (*.inc)   are evaluated within the referencing template and can be useful for repeated blocks of code. They can have parameters, such as :nc (do not evaluate comments) or :parameterName=pValue ...
    • How to Implement Image Gallery

      In this article, we will be showing an example how we can use other Javascript library other than Dojo Toolkit in WebClient and how to implement an image gallery using https://galleriajs.github.io/ 1. Create a Plex grid function where one of the grid ...
    • CM WebClient File Upload Setup

      File Upload This guide will show you how to upload files to your Web Server from your WebClient application. 1. Import the attached zip Java Project into your Eclipse Workspace. 2. Right click your Java Project, and select Properties. Under “Java ...
    • TrafficCam for Web

      Watch the Walkthrough We are going to develop a web application with CA Plex and CM First's WebClient templates. The application will allow us to access a network of real-time traffic cameras around the State of Maryland, view their live video feeds, ...