Hi everybody,
I would like to display all items from a sharepoint data inside a datagrid component. It works well.
But I want to edit the 'test' component inside the datagrid.
In this example, the first column comes from the sharepoint data source. when I want to write something in the second column, it doesn’t work. It's impossible to write something. It bugs...
I use this code (logic inside the datagrid component) and the Redraw On is on 'any change'
// Create a function
async function updateDataGrid(){
// Get all items from the data-source using its id (replace 'yourDataSourceId' with your actual data source id)
var items = await tf.getDataSource('xxxxxxxxxxxx');
// Apply a filter based on data in the form (adjust the filter condition as needed)
var filteredItems = items.filter(i => i?.competence === 'Bâtiment');
// Use a "Map" to rename the columns from the data source to match the names of field names used in the data-grid
var gridItems = filteredItems.map(i => {
return {
requisitionNumber: i?.id,
items: i?.type_intervention,
preuvePhoto: i?.photo,
echeance : i?.echeance,
batiment : i?.batiment,
etage : i?.etage,
emplacement : i?.emplacement,
tache : i?.tache,
urgence : i?.urgence,
test : ''
};
});
// Set the value of the data-grid component programmatically
instance.root.getComponent('i_batiment').setValue(gridItems);
}
// Invoke the function
updateDataGrid();
Thanks in advance !
Hi Katia,
You mention you used the provided code in the "logic" for that data-grid. Would you mind elaborating further on this? Is it placed inside the calculated value property or is it using the logic feature?
If using the logic feature what event are you using as the trigger? A screen shot of your logic tab may help.
Hi Katia,
You mention you used the provided code in the "logic" for that data-grid. Would you mind elaborating further on this? Is it placed inside the calculated value property or is it using the logic feature?
If using the logic feature what event are you using as the trigger? A screen shot of your logic tab may help.
Hi Katia,
If placing the provided code in the onChange or in the trigger I would expect the exact behaviour you are describing, this is because the On Change code will run every time there is a change to the response, essentially overriding the change you try to manually input.
Try instead adding your code to the "Custom Default Value" property in the data tab. The "Custom default value" should run your code one time when the form is initialised.
Hi Erin,
Sorry. Now, I have a new problem with this process. When I write something and when I submit the form, it delete my updates.
Thank you in advance for your help...
You are right that the data-grid values appear to clear. I was able to resolve the issue by placing a check before calling the instance.setValue(). In my example below I only set the value if the number of rows is less than I expect.
Changed Code:
if(instance.getValue().length < 4)
instance.root.getComponent('inventoryList').setValue(gridItems)Full Code:
// Create a function
async function updateDataGrid() {
console.log('updating stuff')
// Get all items form the data-source using its id (from step 1)
const items = await tf.getDataSource('40fqxx52k2kh')
// Apply a filter based on data in the form
const filteredItems = items.filter(i => i?.Location === 'Storage Unit A')
// IMPORTANT: Use a "Map" to rename the columns from the data source to match the
// names of field names used in the data-grid
const gridItems = filteredItems.map(i => {
return {
item: i?.Item,
quantity: i?.Quantity,
comment: ''
}
})
// Set the value of the data-grid component programatically
if(instance.getValue().length < 4)
instance.root.getComponent('inventoryList').setValue(gridItems)
}
// Invoke the function
updateDataGrid()// Create a function
async function updateDataGrid() {
// Get all items from the data-source using its id (replace 'yourDataSourceId' with your actual data source id)
var items = await tf.getDataSource('ew7d0kwqpqhq');
// Apply a filter based on data in the form (adjust the filter condition as needed)
var filteredItems = items.filter(i => i?.competence === 'Bâtiment');
// Use a "Map" to rename the columns from the data source to match the names of field names used in the data-grid
var gridItems = filteredItems.map(i => {
return {
requisitionNumber: i?.id,
items: i?.type_intervention,
preuvePhoto: i?.photo,
echeance: i?.echeance,
batiment: i?.batiment,
etage: i?.etage,
emplacement: i?.emplacement,
tache: i?.tache,
urgence: i?.urgence,
test: ''
};
});
// Set the value of the data-grid component programmatically
if(instance.getValue().length < 100){
instance.root.getComponent('i_batiment').setValue(gridItems);
}
}
// Invoke the function
updateDataGrid();
I can see that your checking weather there are less than 100 rows in your data-grid. This would mean that the filter is ineffective as that data grid would away contain less than 100 rows. The idea of the filter is to only update the data-grid when it has not yet been populated.
You can for example go into your data-grid and change the default number of rows to 1. Then in your if statement change that to instance.getValue().length <= 1