How to Display PDF File in G Web Development Software

Updated Jun 26, 2024

Environment

Software

  • G Web Development Software

While creating web applications, it cannot be denied that some will need to display PDFs, such as user manuals, reports, and more. In this article, we will share one approach to displaying PDF files in a web application built using G Web Development Software.

  1. Ensure the desired PDF is available online and can be accessed via a web browser. For demonstration purpose, this article will be using SCXI-1129 User Manual as the desired PDF.
  2. In the Panel, place a String Control from the Text palette. Rename it to URL.
  3. Place an HTML Container from the Decoration palette. 
  4. Right-click and select Create Reference. 
    2024-06-10_16h28_09.png
  5. Place Static Control Reference (HTML Container) into the Diagram, outside of the While loop.
  6. Place Obtain JavaScript Reference next to Static Control Reference (HTML Container) and connect both of them. 
    loop.jpg
  7. Launch a text editor and save the following code as iframe.js. This code is responsible for creating and appending an iframe into the HTML Container and updating the iframe source based on the link inserted into the URL string control.  
    (function () {
    'use strict';
    
    window.addIframe = function(container){
    var iframe = document.createElement("iframe");
    iframe.setAttribute("id", "iframe_id");
    iframe.height = "100%";
    iframe.width = "100%";
    container.appendChild(iframe);
    }
    
    window.insertURL = function(url){
    document.getElementById("iframe_id").src = url;
    }
    
}());
  8. Right-click WebApp.gcomp and select Import files. Import the iframe.js. 
  9. Right-click WebApp.gcomp and select New>>JavaScript Library Interface. Name it as Library.jsli. 
  10. Insert the following code to HTML script and link dependencies.  
    <script src="iframe.js"></script>
  11. Insert addIframe as value for Javascript Global and click Add function.
  12. Add a new JavaScript Reference parameter
    1. Click Add Parameter.
    2. Highlight the newly created parameter and expand the right Item pane.
    3. In the Item pane, configure the parameter's data type to be JS Reference.
    4. Rename it as container. 
      image.png
  13. Insert insertURL as value for Javascript Global and click Add function.
  14. Add a new JavaScript Reference parameter
    1. Click Add Parameter.
    2. Highlight the newly created parameter and expand the right Item pane.
    3. In the Item pane, configure the parameter's data type to be String.
    4. Rename it as url. 
      2024-06-10_16h12_11.png
  15. In the diagram of index.gviweb, drag-and-drop addIframe from Project Items>>Software>>WebApp>>Library. 
  16. Connect addIframe's container input with the Javascript reference out from Obtain JavaScript Reference. 
    2024-06-10_16h36_39.png
  17. Connect the error out from the addIframe to the while loop. 
    2024-06-10_16h42_47.png
  18. In the while loop, insert an event structure for URL string control's value change event. 
    2024-06-10_16h45_43.png
  19. In the URL's value change event, connect the URL string control to insertURL located at Project Items>>Software>>WebApp>>Library. 
    2024-06-10_16h51_06.png
  20. It is ready to run. The PDF will be displayed at the location the HTML Container is placed.

Below is the result of running it in G Web Development Software:
g web
Below is the result of running it in the browser:
browser

Related Links

Other Support Options

Ask the NI Community

Collaborate with other users in our discussion forums



Request Support from an Engineer

A valid service agreement or active software subscription may be required, and support options vary by country.