take table data from widget and add to RITM and SCTASK

[C-G]

hi everyone, 

I've created a simple and dynamic widget to use on the service portal so that users can add info into each row and copy rows as needed (like a multi-row but with the ability to duplicate rows). but when the catalog item is submitted, the RITM does not include the widget with the table and data, and it's also not appearing on the task generated.

how do I get widget data to appear in my RITM and SCTASK records? And can I also get that widget data into an email notification as a table??

[aruncr0122]

Hi @C-G ,

When you use a custom widget in a catalog item, its data isn’t automatically stored with the RITM — you have to explicitly pass it to the record.

Steps to make it work:
1. Store widget data in a variable

Use a hidden variable in the catalog item, e.g. u_widget_data.

From your widget’s client controller, before submission, set the variable value:

$scope.data.u_widget_data = JSON.stringify($scope.rows); // rows = your table data

Then use:

g_form.setValue('u_widget_data', JSON.stringify($scope.rows));

This ensures the data is submitted along with the form.

2. Copy data from variable to RITM & SCTASK

Use a Flow Designer or Business Rule on sc_req_item:

(function executeRule(current, previous) {
var data = current.variables.u_widget_data;
if (!data)
return;

// Example: store parsed JSON in a field or use it in SCTASK creation
var tasks = JSON.parse(data);
// You can also set current.description = data; or insert to a child table
})(current, previous);

If you’re generating Catalog Tasks, use a Run Script action in the flow to copy that same variable to sc_task.description or a custom field.

3. Show data in email notifications

In your notification email, use a mail script to parse the JSON and build an HTML table:

(function() {
var result = '';
var data = current.variables.u_widget_data;
if (!data) {
result = 'No data submitted.';
} else {
var rows = JSON.parse(data);
result += '<table border="1" style="border-collapse:collapse;width:100%;">';
result += '<tr><th>Column1</th><th>Column2</th></tr>';
rows.forEach(function(row) {
result += '<tr><td>' + row.col1 + '</td><td>' + row.col2 + '</td></tr>';
});
result += '</table>';
}
template.print(result);
})();

Then reference it in the email body:

${mail_script:widget_table_display}

Summary :

Use a hidden variable to capture widget data (JSON).

Copy it to RITM/SCTASK using BR or Flow.

Render it in notifications using a mail script.

Thanks!

[C-G]

thank you for the guidance @aruncr0122  - follow up question though; when you say custom field, you mean in the RITM table and Task tables? Or you mean I can copy the data into the hidden variable and show it on the RITM and SCTASK as that variable?

[aruncr0122]

You can either keep the widget data in a hidden catalog variable (like u_widget_data) or copy it to a custom field on the RITM and SCTASK.

Before submission, set the variable value in your widget:

g_form.setValue('u_widget_data', JSON.stringify($scope.rows));

Then use a Flow or Business Rule to copy that data:

current.u_widget_data = current.variables.u_widget_data;

Note: current.u_widget_data refers to the field on the RITM/SCTASK, while current.variables.u_widget_data is the catalog item’s hidden variable.

[C-G]

here's my current client script, but it's not updating the hidden variable and setting it with "g_form" kept returning errors. any other suggestions?

function($scope) {
$scope.rows = [
{
dept: '',
cost_center: '',
date: '',
recorded_hours: '',
recorded_pay: '',
hours_should_be: '',
pay_should_be: '',
job_code: ''
}
];

$scope.addRow = function() {
$scope.rows.push({
dept: '',
cost_center: '',
date: '',
recorded_hours: '',
recorded_pay: '',
hours_should_be: '',
pay_should_be: '',
job_code: ''
});
};

$scope.cloneRow = function(index) {
var rowToClone = angular.copy($scope.rows[index]);
$scope.rows.splice(index + 1, 0, rowToClone);
};

$scope.removeRow = function(index) {
if ($scope.rows.length > 1) {
$scope.rows.splice(index, 1);
}
};

//set hidden variable and trigger server update
$scope.$watch('rows', function(newValue){
var value = JSON.stringify(newValue);
console.log("new value in rows is: "+value);
$scope.data.u_payroll_widget_data = value;
c.server.update();
}, true);
}