In this guide, we will explain how you can update Salesforce Table element with custom Javascript. If you have any questions, please email us support@formyoula.com.

A Salesforce Table element can create, update and show records for a Salesforce object.

This Guide explains how to use Table API with custom JavaScript.

Formyoula Salesforce Table element is using jQuery Data tables(https://datatables.net). Please go through the Data Tables manual for more details.

Table elements events.

"table:results:render:success": It can be useful to take an action on every draw event of the table - for example, you might want to update an external control with the newly displayed data, This event is designed for exactly that purpose and will execute on every draw.

"table:results:render:rowCallback" : This event allows you to 'post process' each row after it has been generated for each table draw, but before it is rendered into the document

Custom JS example on the table element

1. Get Table Records

//Get table instance using related id
var salesforce_table = $('#salesforce_table_f3ef-da79-8c3a').DataTable();
//Get table data
var table_data = salesforce_table.rows().data().toArray()

table_data return all available records in the table.

2. Get data for a specific row

//Get table instance using related id
var salesforce_table = $('#salesforce_table_f3ef-da79-8c3a').DataTable();
//Get row data
var row_data = salesforce_table.rows($(“row_id”)).data().toArray();

Please replace row_id with a valid Jquery selector.

3. Get row data once table row is rendered and update a column cell.

//Get table instance using related id
var salesforce_table = $('#salesforce_table_f3ef-da79-8c3a').DataTable();
//On row call back
formyoula.form_fields["f3ef-da79-8c3a"].on("table:results:render:rowCallback", function(row) {
  //Get row
  var current_row = salesforce_table.row($(row)).data();
  if (!current_row) return;
  //Update description to name +email
  var description = "Hello, My name is " + current_row.Name + " and My Email ID is " + current_row.Email
  //Update row
  current_row.Description = description;
  //update html
  $(row).find(".Description").text(description);
})

4. Get data for a table cell and set it to a text component.

//Get table instance using related id
var salesforce_table = $('#salesforce_table_f3ef-da79-8c3a').DataTable();
//On row call back
formyoula.form_fields["f3ef-da79-8c3a"].on("table:results:render:rowCallback", function(row) {
  //Get row
  var current_row = salesforce_table.row($(row)).data();
  if (!current_row) return;
  //Update description to name +email
  formyoula.form_fields["45fb-d530-c881"].set("value", formyoula.form_fields["45fb-d530-c881"].get("value") + " ,  " + current_row.Email)
})

Or same result can be achieved by doing a loop on table data

//Get table instance using related id
var salesforce_table = $('#salesforce_table_f3ef-da79-8c3a').DataTable();
//On row call back
formyoula.form_fields["f3ef-da79-8c3a"].on("table:results:render:success", function() {
  //Get table data
  var table_data = salesforce_table.rows().data().toArray();
  //var all_emais
  var all_email = ''
  table_data.forEach(function(row_data) {
    all_email = all_email + " , " + row_data.Email
  })
  //Update description to name +email
  formyoula.form_fields["45fb-d530-c881"].set("value", all_email)
});

5. Add a new record in Salesforce table.

var new_row = [{
  Id: "123456780", //Create a unique Id
  AccountId: "2392039082893",
  Name: "New Record",
  Description: "Test Description",
  Email: "test@test.com"
}]
//Add row data
formyoula.form_fields["f3ef-da79-8c3a"].trigger("table:row:new", new_row);

6. Update all row or column color.
 

//Update all rows color 
$("tr").css("background-color", "red")

7. Only update color for specific rows.

//Get table instance using related id
var salesforce_table = $('#salesforce_table_f3ef-da79-8c3a').DataTable();
//On row call back
formyoula.form_fields["f3ef-da79-8c3a"].on("table:results:render:rowCallback", function(row) {
    //Get row
    var current_row = salesforce_table.row($(row)).data();
    if (!current_row) return;
    //Update row color if description is blank
    if (!current_row.Description)  $(row).css("background-color", "red")
})

For any questions, please contact us - support@formyoula.com or the Formyoula in-app chat 🙂