Application Developmentpublic

Visual Builder

Get Involved. Join the Conversation.

This is a public Forum  public

Topic

    Lanke Dibora
    Not able to import external js file in to VBCSAnswered
    Topic posted September 18, 2019 by Lanke DiboraBlue Ribbon: 750+ Points 
    151 Views, 31 Comments
    Title:
    Not able to import external js file in to VBCS
    Summary:
    Not able to import external js file in to VBCS
    Content:

    HI,

    I have followed the below url and tried, its not working for me.

    https://blogs.oracle.com/vbcs/importing-and-using-javascript-libraries-in-your-visual-builder-custom-code

    Imported gl-matrix.js as shown in attached file.

    Below is the js code.

    define(["flows/main/resources/gl-matrix"],
      function(glmatrix) {
        'use strict';

        var PageModule = function PageModule() {};

        PageModule.prototype.testFun = function() {
          var filesArr = [];
         
          var myVce3 =  glmatrix.vec3.create();
          glmatrix.vec3.set(myVce3, 0, 2.0);
          return myVce3;
        }
        return PageModule;
      });

    But I'm getting the below error.

     

     

     

    Image:
    Document:
    Error.PNG (27KB)

    Best Comment

    Lanke Dibora

    Hi,

    I have imported the exact file what I have downloaded.

    Please verify ,I have imported exactly under resources where glmatrix js imported.

    Please find the files I have imported.

    SourceTree.PNG (23KB)

    Comment

     

    • Duncan Mills

      When you have a situation like this open the Browser Developer tools and look at the network tab as the page loads you should see the load request for the gl-matrix.js file and I suspect that you'll see that there is an error - e.g. the location that you have defined in your define block does not actually map to where you have put the library 

      • Lanke Dibora

        Hi,

        Thanks for your quick response.

        I have traced Network logs as well. Didn't find any error showing 200 status.Please find attachment.

        And the path I didnt provided manually, clicked  CTL+ space --> select Url and from list of js files have selected.

        Please assist me in this.

         

        Thanks in advance.

         

    • Duncan Mills

      Goo so you've seen that the library can be found, that's always the first step, it's not worth proceeding if that bit has not worked. 

      Apart from that it's a matter of debugging  -  as it happens your code works just fine for me (I imported the gl-matrix-min.js though)

      • Lanke Dibora
        Hi, Thank you. Can you please share your js code and the screenshot of the path where you imported the file exactly. Thanks in advance.
    • Duncan Mills

      Here's the code: 

      define(['resources/gl-matrix-min'], function(glmatrix) {
  
  'use strict';

  var PageModule = function PageModule() { 
   };
   
   PageModule.prototype.doIt = function(){
     var myVce3 =  glmatrix.vec3.create();
      glmatrix.vec3.set(myVce3, 0, 2.0);
   }
  

  return PageModule;
});

      And the js file is imported under just /resources in my case:

       

       

    • Duncan Mills

      Well that just looks like you've imported the wrong thing into your application - have you checked the file in the source tree?

    • Duncan Mills

      The thing that you have imported is simply not a javascript file - it's HTML - e.g. you have not grabbed the right file in the first place. So Visual Builder is just giving you back the file you gave to it. It looks like you just saved off a link from GitHub thinking that would give you the file it pointed to whereas it give you the viewing page for that file. 

      I suggest you use the 'clone or download' > 'Download ZIP' option from the GitHub screen for the project, unzip the project files and locate the actual JS file(s) you need. ZIP those up and then import just that into Visual Builder

    • Duncan Mills

      You really need to show the actual code you have used to access the file, or better still provide the application it's impossible to guess in this case what might be wrong. 

      Please remember as well that you are plugging in someone else's library that we know nothing about - we can't help you with the details of using that. 

    • David Konecny

      I faced similar problem of loading xlsx.js and not being able to use it. It is not VB issue. The problem is that xlsx.js (you can look into its source code) is written in a way which expect it to be registered in RequireJS config. That is, open your web application JSON file and add into the root:

        "requirejs": {
          "paths": {
            "xlsx": "https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.1/xlsx.mini.min"
          }
        }

      with that in place you can use it in your page simply like this:

      define(["xlsx"], function(xlsx) {
       

      The CND URL should be replaceable with VB specific local file. That's the recommended approach.

      If for some reason you do not want to change your RequireJS config you can still load xlsx without it but way to do is following: if you look into xlsx.js you will see there that it initialises itself as RequiresJS Module using this code:

      define('xlsx', function() { if(!XLSX.version) make_xlsx_lib(XLSX); return XLSX; });
       

      which means that in order to load you would have to write something like this:
       

      define(["resources/xlsx"], function() {
        'use strict';
        var PageModule = function PageModule() {
          require(["xlsx"], function(xlsx) {
            alert("version of xlsx: "+xlsx.version);
          });
        };
        return PageModule;
      });

       

      where resources/xlsx is your local VB copy of the library.

      -David

      • Lanke Dibora

        HI David,

        Thank you for your update , will try the same.

        • Lanke Dibora

          Hi,

          I tried the same and can able to read the xlsx file.

          Here I'm facing one issue while calling the xlsx method "sheet_to_json" for converting into  json format.

          My Sample code

           

           require(["xlsx"], function(xlsx) {
            console.log("version of xlsx: " + xlsx.version);
            workbook = xlsx.read(binary, {
              type: 'binary'
            });
            var first_sheet_name = workbook.SheetNames[0];
            /* Get worksheet */
            var worksheet = workbook.Sheets[first_sheet_name];
            console.log("JSON Array------------->", xlsx.utils.sheet_to_json(worksheet, {
              header: 1,
              raw: true
            }));

           

          And the xlsx method is below.

          function sheet_to_json(sheet, opts) {
          if(sheet == null || sheet["!ref"] == null) return [];
          var val = {t:'n',v:0}, header = 0, offset = 1, hdr = [], v=0, vv="";
          var r = {s:{r:0,c:0},e:{r:0,c:0}};
          var o = opts || {};
          var range = o.range != null ? o.range : sheet["!ref"];
          if(o.header === 1) header = 1;
          else if(o.header === "A") header = 2;
          else if(Array.isArray(o.header)) header = 3;
          switch(typeof range) {
          case 'string': r = safe_decode_range(range); break;
          case 'number': r = safe_decode_range(sheet["!ref"]); r.s.r = range; break;
          default: r = range;
          }
          if(header > 0) offset = 0;
          var rr = encode_row(r.s.r);
          var cols = [];
          var out = [];
          var outi = 0, counter = 0;
          var dense = Array.isArray(sheet);
          var R = r.s.r, C = 0, CC = 0;
          if(dense && !sheet[R]) sheet[R] = [];
          for(C = r.s.c; C <= r.e.c; ++C) {
          cols[C] = encode_col(C);
          val = dense ? sheet[R][C] : sheet[cols[C] + rr];
          switch(header) {
          case 1: hdr[C] = C - r.s.c; break;
          case 2: hdr[C] = cols[C]; break;
          case 3: hdr[C] = o.header[C - r.s.c]; break;
          default:
          if(val == null) val = {w: "__EMPTY", t: "s"};
          vv = v = format_cell(val, null, o);
          counter = 0;
          for(CC = 0; CC < hdr.length; ++CC) if(hdr[CC] == vv) vv = v + "_" + (++counter);
          hdr[C] = vv;
          }
          }
          for (R = r.s.r + offset; R <= r.e.r; ++R) {
          var row = make_json_row(sheet, r, R, cols, header, hdr, dense, o);
          if((row.isempty === false) || (header === 1 ? o.blankrows !== false : !!o.blankrows)) out[outi++] = row.row;
          }
          out.length = outi;
          return out;
          }
           
          When I'm uploading the xlsx file the console giving the empty Array as shown
           
        • Lanke Dibora

          Hi,

          I tried the same and can able to read the xlsx file.

          Here I'm facing one issue while calling the xlsx method "sheet_to_json" for converting into  json format.

          My Sample code

           

           require(["xlsx"], function(xlsx) {
            console.log("version of xlsx: " + xlsx.version);
            workbook = xlsx.read(binary, {
              type: 'binary'
            });
            var first_sheet_name = workbook.SheetNames[0];
            /* Get worksheet */
            var worksheet = workbook.Sheets[first_sheet_name];
            console.log("JSON Array------------->", xlsx.utils.sheet_to_json(worksheet, {
              header: 1,
              raw: true
            }));

           

          And the xlsx method is below.

          function sheet_to_json(sheet, opts) {
          if(sheet == null || sheet["!ref"] == null) return [];
          var val = {t:'n',v:0}, header = 0, offset = 1, hdr = [], v=0, vv="";
          var r = {s:{r:0,c:0},e:{r:0,c:0}};
          var o = opts || {};
          var range = o.range != null ? o.range : sheet["!ref"];
          if(o.header === 1) header = 1;
          else if(o.header === "A") header = 2;
          else if(Array.isArray(o.header)) header = 3;
          switch(typeof range) {
          case 'string': r = safe_decode_range(range); break;
          case 'number': r = safe_decode_range(sheet["!ref"]); r.s.r = range; break;
          default: r = range;
          }
          if(header > 0) offset = 0;
          var rr = encode_row(r.s.r);
          var cols = [];
          var out = [];
          var outi = 0, counter = 0;
          var dense = Array.isArray(sheet);
          var R = r.s.r, C = 0, CC = 0;
          if(dense && !sheet[R]) sheet[R] = [];
          for(C = r.s.c; C <= r.e.c; ++C) {
          cols[C] = encode_col(C);
          val = dense ? sheet[R][C] : sheet[cols[C] + rr];
          switch(header) {
          case 1: hdr[C] = C - r.s.c; break;
          case 2: hdr[C] = cols[C]; break;
          case 3: hdr[C] = o.header[C - r.s.c]; break;
          default:
          if(val == null) val = {w: "__EMPTY", t: "s"};
          vv = v = format_cell(val, null, o);
          counter = 0;
          for(CC = 0; CC < hdr.length; ++CC) if(hdr[CC] == vv) vv = v + "_" + (++counter);
          hdr[C] = vv;
          }
          }
          for (R = r.s.r + offset; R <= r.e.r; ++R) {
          var row = make_json_row(sheet, r, R, cols, header, hdr, dense, o);
          if((row.isempty === false) || (header === 1 ? o.blankrows !== false : !!o.blankrows)) out[outi++] = row.row;
          }
          out.length = outi;
          return out;
          }
           
          When I'm uploading the xlsx file the console giving the empty Array as shown
           
          • David Konecny

            That looks like xlsx library issue. Im not familiar with the library. I would raise the question with them. 

            Or are you saying that the same code works outside of VB app?

            -David

             

            • Lanke Dibora

              HI,

              Thank you for your update I didn't try outside the VB.

              Could you please let me know whether you have raised question with them.

              Please update me if they gave any solution for the same.

               

              Thanks In Advance.

            • Lanke Dibora

              HI,

              Thank you for your update I didn't try outside the VB.

              Could you please let me know whether you have raised question with them.

              Please update me if they gave any solution for the same.

               

              Thanks In Advance.

              • Lanke Dibora

                HI,

                 

                Please suggest me the way how can I achieve this.

                This is the priority task which I need to complete.

    • Duncan Mills

      The scope of this forum is to specifically help with Visual Builder, unfortunately we don't have the time to help with random programming tasks in third party code.

      • Lanke Dibora

        Thank you for your update 

        Could you please suggest me any other to achieve this.

        • David Konecny

          Read the documentation for xlsx. Grab one of their examples (from their website; assuming they have some) and try to run it first to make sure all is working fine and you can get basic end to end solution working. Then expand on it and turn it into a solution you are after. You could also debug their code from your app and see why it is not returning any data. You could try to run your app against very simple excel file too to narrow down whether the problem is in your code or in complexity of your excel file. Failing all that you could find xlsx forum and ask for help there. Sometimes trying different library is way to go as well. Googling it may reveal useful info too.

          -David

           

     

    community forum