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 ,

Step 1: Create a Hidden Catalog Variable

In your catalog item, create a hidden variable (Type = “Hidden”).
Let’s call it:

Name: u_payroll_widget_data
Question: Widget Data
Type: Hidden

This will hold your JSON data from the widget.

Step 2: Update Your Widget Client Controller

You cannot call g_form.setValue() directly from inside a Service Portal widget unless you are using the catalog item widget context.

So instead of trying to access g_form directly, do this:

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

$scope.addRow = function() {
$scope.rows.push(angular.copy($scope.rows[0]));
};

$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);
}
};

// Watch for data changes and sync with catalog variable
$scope.$watch('rows', function(newValue) {
var value = JSON.stringify(newValue);
console.log("Widget data updated: " + value);

// send value to the hidden variable via the data object
$scope.data.u_payroll_widget_data = value;

// update server data (to sync with catalog item variable)
c.server.update();
}, true);
}

Step 3: Update Your Widget Server Script

You need to sync $scope.data.u_payroll_widget_data to the catalog item variable using the server script part of your widget.
Server Script:
(function() {
if (input && input.u_payroll_widget_data) {
// Sync data to the catalog item variable
data.u_payroll_widget_data = input.u_payroll_widget_data;

try {
var cart = $sp.getValue('cart_id');
if (cart) {
var item = new GlideRecord('sc_cart_item');
if (item.get(cart)) {
item.variables.u_payroll_widget_data = input.u_payroll_widget_data;
item.update();
}
}
} catch (e) {
gs.error('Error syncing widget data: ' + e.message);
}
}
})();

This ensures the hidden variable (u_payroll_widget_data) gets updated before the catalog item is submitted.
Step 4: Copy Data to RITM and SCTASK

Once the catalog item is submitted, the JSON data from the variable is now available in current.variables.u_payroll_widget_data.

You can copy it with a Flow Designer or Business Rule.

🔹 Example Business Rule (on RITM → after insert)
(function executeRule(current, previous /*null when async*/) {
try {
current.u_payroll_widget_data = current.variables.u_payroll_widget_data;
current.update();
} catch (e) {
gs.error("Error copying widget data to RITM: " + e.message);
}
})(current, previous);

Example Business Rule (on SCTASK → before insert)
(function executeRule(current, previous /*null when async*/) {
var ritm = current.request_item.getRefRecord();
if (ritm.u_payroll_widget_data) {
current.u_payroll_widget_data = ritm.u_payroll_widget_data;
}
})(current, previous);

If you share your widget type (custom or embedded in catalog item) and how it’s currently included (via sp-variable or sp-widget) then it will be good to debug. 

[C-G]

thank you @aruncr0122  - I made several attempts but ultimately nothing worked so I had to pivot to provide my org with a different/quicker solution