Visual Builder

Get Involved. Join the Conversation.

Topic

    Vinod Kumar Kv
    Upload and read CSV file records and insert into VBCS...
    Topic posted November 17, 2018 by Vinod Kumar KvBronze Medal: 1,250+ Points, tagged Business Objects, JET, REST, UI, Web 
    767 Views, 9 Comments
    Title:
    Upload and read CSV file records and insert into VBCS object
    Summary:
    Upload and read CSV file records and insert into VBCS object
    Content:

    Hi,

    How do we upload and read CSV file records and insert into  VBCS object. 

    We want CSV file upload functionality in VBCS. I cannot see any file picker component in VBCS UI but there is  <oj-file-picker> in oracle jet cookbook. Wondering how we can implement file upload in VBCS

    We need to upload the CSV file using file picker then we want to read it record by record, do some filtering and then do batch insert into object. How can we achieve this?

    Thanks

    Version:
    ORACLE VISUAL BUILDER CLOUD SERVICE Version: 18.3.3
    Code Snippet:

    Comment

     

    • Christopher Maggiulli
      You can very simply use this by opening up the metadata console and adding "oj-file-picker": { "path":"ojs/oj-file-picker" }

      This same thing can be done for any oracle jet component.

      As for processing of the file are you using VBCS as a standalone solution or are you using OIC? If I were to tackle this I would add the file picker as you have indicated, then I would create an integration in ICS or OSB that accepts a file and uses the File Adapter to manipulate the CSV content.

      https://oracle-integration.cloud has a few good examples of manipulating CSV data in ICS, and as always Shay as a good tutorial about adding JET components to VBCS https://blogs.oracle.com/vbcs/adding-new-oracle-jet-ui-component-to-visual-builder-cloud-service
    • Christopher Maggiulli
      Also here is a gist that might help (not my GitHub) https://gist.github.com/amroamer/c2e417706c62d44be269984b257493ec

      That gist illustrates how you can read a CSV file using the JET JavaScript/file picker tag. I personally would still use an integration, especially if you are then going to write that data to a different system and/or if the CSV file is large or of unknown size. If you don't have ICS or OSB then this will definitely suffice though.
    • Vinod Kumar Kv

      Hello Christopher Maggiulli,

      I am not using  ICS or OSB integration. and I am not aware of how to convert code mentioned in below URL to map VBCS file upload.

      https://gist.github.com/amroamer/c2e417706c62d44be269984b257493ec

      It will be good if you please provide VBCS sample implementation with and without  ICS or OSB integration.

      Thanks

    • Christopher Maggiulli

      Here is an example project that illustrates

      1. Adding the file picker JET component to a VBCS project
      2. Building action chain that triggers on select event
      3. Two JavaScript methods used for accessing file information

      The JavaScript methods are not actually necessary in this regard since you could simply map the page variables to $event.details.file[i].* however I included them so you could implement a FileReader or whatever you want to do with the files.

    • Vinod Kumar Kv

      Hello Christopher Maggiulli,

      Thanks a lot for sharing the code.

      Thanks

      • Christopher Maggiulli

        No problem please let me know if that solves your issue.  For me - it was important to remember that the platform gives me full access to JavaScript and the DOM.  Sometimes when I'm struggling to implement an oracle JET element I will first implement something in vanilla JavaScript and / or JQuery.  Then I will slowly start implementing it the Oracle way until it's completely moved over

    • Vinod Kumar Kv

      Hello  Christopher Maggiulli,

      I tried your sample code. This code is only accessing filename and size.

      I am using below code to read file and log contents:

      var reader = new FileReader();
          reader.addEventListener("loadend", function() {
            self.csvFileContent(reader.result);
            console.log("Content: "+reader.result);
          });
          reader.readAsText(selectedFile.files[0]);

      is there ant better way to do it?

       

      Thanks,

       

    • Vinod Kumar Kv

      Hello,

      I am not able to show the CSV content in VBCS UI.

      Because reader.addEventListener is in asynchronous mode I am not able to get the contents from this module function and show them on VBCS ui using assign variable.

      Any thoughts how to achieve this?

      CSV data VBCS function:

      PageModule.prototype.getFile = function(selectedFile) {
          console.log(selectedFile.files[0].name);
          console.log(selectedFile.files[0].size);
          var csvFile = selectedFile.files[0];
          var self = this;
          self.csvFileContent = ko.observable("");
          console.log("Nav");
          //var reader = new FileReader();

          var reader = new FileReader();
          reader.addEventListener("loadend", function() {
            self.csvFileContent(reader.result);
            console.log("Content: "+reader.result);
            return reader.result;
          });

          reader.readAsText(csvFile);
          

        };

       

      Thanks