Update Selected row data in Service Portal (Custom Widget)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎08-20-2024 11:53 PM
I made widget and Angular-template for update selected row.
when user checked checkbox in lists in SP widget, i need to save every selected row data and pass to angular-template.
i made checkbox, but i do not know how can i do for pass selected data.
It based on OOB Data Table Widget, but add some custom fields.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎08-21-2024 12:14 AM - edited ‎08-21-2024 12:21 AM
Hello JaeikL,
In ServiceNow, when you create a custom widget based on the OOB Data Table Widget, you can access the selected rows using the selectedRows
property of the widget.
Here's an example of how you can achieve this:
- In your widget's client script, add a function that will be called when the checkbox is checked or unchecked. You can use the
onChange
event of the checkbox to trigger this function.
function onSelectChange() {
var selectedRows = this.widget.selectedRows;
var selectedData = [];
// Loop through the selected rows and extract the data
selectedRows.forEach(function(row) {
var rowData = row.data;
selectedData.push({
// Extract the fields you need from the row data
field1: rowData.field1,
field2: rowData.field2,
// ...
});
});
// Pass the selected data to the Angular template
this.widget.angularTemplateScope.selectedData = selectedData;
}
In this example, this.widget.selectedRows
returns an array of selected rows, and this.widget.angularTemplateScope
is the scope of the Angular template.
- In your Angular template, you can access the
selectedData
array using theangularTemplateScope
:
<!-- Your Angular template -->
<div ng-repeat="row in selectedData">
{{ row.field1 }} {{ row.field2 }} <!-- Display the selected data -->
</div> - To pass the selected data to the Angular template, you need to update the
angularTemplateScope
in your widget's client script. You can do this by adding the following line to youronSelectChange
function:
this.widget.angularTemplateScope.$apply();
This will update the Angular template with the new selectedData
array.
- Finally, don't forget to add the
ng-repeat
directive to your Angular template to display the selected data.
By following these steps, you should be able to pass the selected row data from the Data Table Widget to your Angular template.
If you found my response helpful, I would greatly appreciate it if you could mark it as "Accepted Solution" and "Helpful."
Your support not only benefits the community but also encourages me to continue assisting. Thank you so much!
Thanks and Regards
Ravi Gaurav | ServiceNow MVP 2025,2024 | ServiceNow Practice Lead | Solution Architect
CGI
M.Tech in Data Science & AI
ï”— YouTube: https://www.youtube.com/@learnservicenowwithravi
ï”— LinkedIn: https://www.linkedin.com/in/ravi-gaurav-a67542aa/