Call JavaScript Using JavaScript Library Interface in G Web Development Software

One of the powerful features of G Web Development Software is it allows users to integrate JavaScript into web applications created from WebVI of G Web Development Software. This article shows how to integrate your custom JavaScript into WebVI by using JavaScript Library Interface (JSLI), from scratch.

1. Create a JavaScript file with the JavaScript function(s) you want to call on your WebVI.
   1. Create a JavaScript file and name it as SimpleMath.js.

   2. Insert the following code into the SimpleMath.js. It includes two JavaScript functions, SimpleAdd and SimpleMultiply.

      (function () {
          
          window.SimpleAdd = function (num1, num2) {
              var add = num1 + num2;
              return add;
          };
      	
          window.SimpleMultiply = function (num1, num2) {
              var multiply = num1 * num2;
              return multiply;
          };
      	
      }());

2. Create a G Web Development Software project.
   1. Launch G Web Development Software
   2. At menu bar, select File>>New>>Project 
   3. At menu bar, select File>>Save all to save the project on your Desktop within a folder with the name "Simple Math JSLI"
3. Integrate JavaScript into the project
   1. Import the JavaScript file, SimpleMath.js, by right-click WebApp.gcomp and select Import files
      • Note: If the project is not saved as instructed in step 2.3, the import files option will appear greyed out. 
   2. Select Copy in the following prompt
       
   3. Create a JavaScript Library Interface by right-click WebApp.gcomp and select New>>JavaScript Library Interface
   4. In Library.jsli, empty the HTML script and link dependencies and insert the following code:

      • <script src="SimpleMath.js"></script>

   5. Create JavaScript global function(s) by:
      1. Insert SimpleAdd to JavaScript global and click Add function
      2. Change the return data type to numeric
      3. Add two parameters by
         1. Click Add parameter, to add a numeric parameter with the name of num1
         2. Click Add parameter, to add a numeric parameter with the name of num2
      4. Repeat the previous three steps for the SimpleMultiply function.
4. Call the JavaScript function
   1. In Diagram, drag and drop the SimpleAdd and SimpleMultiply JavaScript functions from Project Items>>Software>>WebApp>>Library
   2. With controls and indicators connected, the WebVI can be run, and the JavaScript functions will be called accordingly.