Currently I have a table with multiple columns. What i wanted was to create a flag system. After clicking the data in the “problem summary” Column id like it to change the color of the data to red. and also update the data in the “Flag” Column from False to True.
- Task: Upon clicking the Data in the "Problem Summary" column , I want to:
- Change the font color of the clicked Problem Summary to red (which is working fine currently).
- Update the "Flag" column for the corresponding row from 'False' to 'True' in my database.
Here's the JavaScript code I'm using in the Column Formatting section for the Problem_Summary:
<script>
function highlightProblemSummary(element) {
element.style.color = 'red';
// Traverse to the closest row (parent <tr>)
var closestRow = element.closest('tr');
if (closestRow) {
var cells = closestRow.querySelectorAll('td'); // Get all <td> elements within the row
// Assuming ID is in the first cell and Problem Summary in the second cell
if (cells.length > 1) {
var identifier = cells[0].innerText.trim(); // Adjust index based on your table structure
console.log('ID:', identifier);
}
} else {
console.log('Row or ID column not found.');
}
console.log('Problem Summary clicked!');
}
</script>
This all works fine. For now it changes the color of the data to red once clicked. and is able to get the ROW Id and is shown in the console log. Shown below :
Then to update the Flag Column to “True” once clicked i made a dynamic action.
and this was the action when it is clicked :
the problem was that i needed the row ID to only update the row that was clicked. How can i do this? I want to move the row id from the column formatting into here. Or is there a complete different way to do this?