Update Selected row data in Service Portal (Custom Widget)

JaeikL
Tera Contributor

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. 

1 REPLY 1

Ravi Gaurav
Giga Sage
Giga Sage

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:

  1. 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.

    1. In your Angular template, you can access the selectedData array using the angularTemplateScope:

      <!-- Your Angular template -->
      <div ng-repeat="row in selectedData">
      {{ row.field1 }} {{ row.field2 }} <!-- Display the selected data -->
      </div>

    2. 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 your onSelectChange function:
    3. this.widget.angularTemplateScope.$apply();

This will update the Angular template with the new selectedData array.

  1. 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/