Visual Builder

Get Involved. Join the Conversation.


    Dipak Chhablani
    How to use variables in JS functions in VBCS
    Topic posted July 16, 2018 by Dipak ChhablaniRed Ribbon: 250+ Points, tagged Custom Code, UI, Web 
    1006 Views, 3 Comments
    How to use variables in JS functions in VBCS

    Hi Team,

    I am trying to create File Picker component. I have defined the variables to hold the file names uploaded by the user using the File picker component.

    I would like to assign the value to a variable in custom javascript function. How do we get the handle for a variable in JS function?

    Please find the below screenshot for your reference.






    • Shay Shmeltzer

      Create a module function that accepts a parameter - then pass the variable value as that parameter to the function.

      Something like:

      PageModule.prototype.sum = function(one, two) {
      return one + two;


    • Shubham Kumar


      In node.js the following function runs as expected (i.e. the attribute values of the object passed to the function gets changed by the function)

      > function A (input_var) {
      ...       console.log("-----Inside PageModule.prototype.operateOnVar ---- ");
      ...       console.log("Before: ", input_var)
      ...       input_var.x = "Shubham";
      ...       input_var["y"] = "kumar";
      ...       console.log("After : ", input_var);
      ...       return input_var;
      ...     };
      > A
      [Function: A]
      > inp_var = {"x":"First Name", "y":"Last Name"}
      { x: 'First Name', y: 'Last Name' }
      > A(inp_var)
      -----Inside PageModule.prototype.operateOnVar ----
      Before:  { x: 'First Name', y: 'Last Name' }
      After :  { x: 'Shubham', y: 'kumar' }
      { x: 'Shubham', y: 'kumar' }
      > inp_var
      { x: 'Shubham', y: 'kumar' }


      However the same function does not work as expected in VBCS. The changes made to the object in the function does not reflect in the passed page variable. It seems a copy of the variable is being passed instead of a reference(correct me if I am wrong). As a workaround I can return the changed value and assign it to the page variable in action chain, but I am looking for a more efficient and direct way to achieve the above mentioned behavior because the objects I am modifying are large in size. 

      Thanks in advance for your help.



      • Shay Shmeltzer

        The correct way is to use the assign variable after a call to a JS function and assign the returned value to the variable.

        We specifically don't allow direct manipulation of variables to eliminate potential state issues for the variables.