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,
instance.root.getComponent('DataGrid').setValue(updatedRow) however I can't find a way to update just the row that the change is happening in.
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:
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.
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.
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:
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:
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.
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.
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.
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()