Join the Team Forms community

T
S
A
C
H

Applying an On Change from inside a Data Grid to the Row that it is triggered from

Updated 3 weeks ago

I am building a Data Grid that has multiple components on it and when the component labelled 'employees' is changed, I want the entire row to be updated to reflect different data that I have mapped from data sources.

Running the following line sets the entire Data Grid to the row that I wanted set,

Plain Text
      instance.root.getComponent('DataGrid').setValue(updatedRow) 

however I can't find a way to update just the row that the change is happening in.

Marked as solution

Hi Callum,

The easiest way to achieve this is by updating the row variable. For example, the steps below should work if using synchronous logic:

  1. Open the settings for the components/columns you will be updating and ensure you set the "redraw on" property to "any change". This step ensures the values you set in JavaScript are re-drawn and visible in the form.

  2. Open the settings for the component that will trigger the change (e.g. the employee) and add the following code to the On Change property. Note that you will need to adapt the code below to match your specific form and requirements.

JavaScript
const vehicle = instance.getValue() //Returns the value of the current component

row.brand = vehicle.brand
row.model = vehicle.model


Here is an example of the output:

View full solution
A
C
1 comment·2 replies

Hi Callum,

The easiest way to achieve this is by updating the row variable. For example, the steps below should work if using synchronous logic:

  1. Open the settings for the components/columns you will be updating and ensure you set the "redraw on" property to "any change". This step ensures the values you set in JavaScript are re-drawn and visible in the form.

  2. Open the settings for the component that will trigger the change (e.g. the employee) and add the following code to the On Change property. Note that you will need to adapt the code below to match your specific form and requirements.

JavaScript
const vehicle = instance.getValue() //Returns the value of the current component

row.brand = vehicle.brand
row.model = vehicle.model


Here is an example of the output:

What if it is an asynchronous logic, if I need to use data sources in the logic?

Ideally the SharePoint drop-down (employee object) should contain all the fields you need to populate the rest of the columns to avoid asynchronous logic which could have performance impacts and complicates the code.

However, if its unavoidable you can still set the row variables properties asynchronously, but you need to call instance.root.redraw() after to manually reflect the changes in the form response. Here is an example which uses a delay function to simulate an async function call.

JavaScript
function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function updateColumns(){
    const vehicle = instance.getValue() 
    await delay(1000)
    row.brand = vehicle.brand
    row.model = vehicle.Model
    instance.root.redraw()
}

updateColumns()