Visual Builder

Get Involved. Join the Conversation.

Topic

    Abhilasha Singh
    How to set the value of columns of current row of table from...
    Topic posted September 23, 2019 by Abhilasha SinghRed Ribbon: 250+ Points, tagged Action Flows, Custom Code, JET, Layout, UI 
    72 Views, 10 Comments
    Title:
    How to set the value of columns of current row of table from JavaScript.
    Summary:
    How to set the value of columns of current row of table from JavaScript.
    Content:

    My requirement is to have empty table on screen with ability to input text in few columns. on value change of first column an action change is defined that calls a rest service and returns records that are displayed in a popup. Based on selected record from popup few fields of the table needs to be set. I am trying to achieve this by calling a JS function from action chain. But I am unable to get access of the current row of the table.
     

    Comment

     

    • Preetesh Dongre

      Hi Bhilashas,

      You won't be able to get the reference of the table row in JS to set the values what you need to do is, pass variable(I blv. ADP in your case) and values to set in JS, iterate through ADP and set the value/s, once done return the variable(ADP) from JS and in action flow assign the returned value back to ADP.

      Regards,

      Preetesh

      • Abhilasha Singh

        Hi Preetesh,

        Thanks for your reply.But my requirement is set the column of the specific row that is selected now(i.e in which the value is entered). How do I get that in JS which row in the ADP to be set?

        Thanks,

        Abhilasha

    • Shay Shmeltzer

      You can use a PageModule function in your page that returns the values for the options attribute of the selectOneChoice based on a value from the current row.

      So your select would look something like:

      <oj-select-one :id="[['deptlist' + $current.index]]" options="{{ $page.functions.popList($current.row.name) }}" options-keys.value="id" options-keys.label="department" value="{{ $current.row.department }}"></oj-select-one>

      And your page function would look something like:

        PageModule.prototype.popList = function(fname){
          var retArray;
          if (fname == "Shay"){
             retArray = [{department : "Shay1", id : "1"}, {department : "Shay2", id : "2"}];
          }
          else {
             retArray = [{department : "Marketing", id : "3"}, {department : "Sales", id : "4"}];   
          }
          return retArray;
        }

      • Abhilasha Singh

        Hi Shay,

        May be I am unable to understand your approach. My requirement is to have an empty table with 5-10 rows available for entry. for instance first column is item number, next item description and some more item related columns. If some goes to the first row and enter some value in item column it hits a rest API that gets all the items that matches the input text and shows all those records in a popup that has a table. Now one can select one of those record and click ok to close the dialog. at this point the selected value should be set in the row where the value was entered. 

        Hope it is clear to you. Please let me know if you need more details. I was thinking if we can capture the selected row id of the table into a variable when we enter the text and pass that id to JS and pass ADP to the JS and update that row of ADP with the selected values from the popup. I am still unable to get the row index. 

        Thanks,

        Abhilasha

        • Shay Shmeltzer

          In that case your table will be based on an ADP variable.

          You'll insert empty rows into the data[] array in the ADP.

          Then in your table you can hook up a variable to the raw-value attribute of the item number field in the table.

          You add a value event to that field, in it you grab the raw-value of the field and pass it to your call to the REST that brings in the data you need.

          (Example of using raw-value here - Reacting to Key-Press Events in Visual Builder

          • Abhilasha Singh

            Hi Shay,

            This part is done. I am able to call the REST service on value change on that field and displaying the results from REST call in a table in the popup. Now when I select a record on the table in popup, it should set the selected row (there are multiple fields that has to be set on the main table) on the corresponding row in the table main table on the screen. 

            Thanks,

            Abhilasha

            • Shay Shmeltzer

              In the event on clicking a link in the row you get the row KEY variable as an input - use this as a parameter to a JS method that will update that row in the array of data[] in the ADP. Pass the array and the id to the method - change the value in the row - and return the array.

              Then use assign variable to assign it back to the ADP.data[]

              • Abhilasha Singh

                Hi Shay,

                Thanks a lot for the response. It worked well for the first row. It calls the rest service and set the selected values in the first row. Wherein when I go and enter some value in 2nd row it calls the rest service gets the results but page becomes unresponsive with below warning. 

                "Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952"

                I saw few links on this issue but I am not able to understand where should I update this as 'passive'.

                Thanks,

                Abhilasha

                 

                • Abhilasha Singh

                  Hi Shay,

                  I could debug and see where exactly it is becoming unresponsive. I am using JS function to open the modal dialog that contains the table with item details. For the second call it fails in opening the modal dialog. Can you please let me know what could be the issue.

                  Thanks,

                  Abhilasha