Need to create new native record from widget HTML button

bishalsharm · ‎05-28-2025

Hi Team,

Here, I am sharing the widget code including HTML,Client and Server script.

I am not able to create a record in a scoped table, when click on submit button.
Please find below the widget configuration and its pictorial repressentation.

Body HTML Template:

<div>
    <div ng-if="c.submissionMessage" class="alert alert-info">
        {{c.submissionMessage}}
    </div>
    <br>
    <p>Is this request for you?</p>
    <select ng-model="c.formData.requestForSelf"
            ng-change="c.onRequestForSelfChange()"
            class="form-control"
            name="requestForSelf">
        <option value="None">-- None --</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
    </select>
    <br><br>
    <div ng-show="c.formData.requestForSelf === 'No'">
        <p>Who is this request for?</p>
        <select ng-model="c.formData.selectedUser"
                ng-options="user.value as user.label for user in c.data.users"
                ng-change="c.onUserChange()"
                class="form-control"
                name="userSelect">
            <option value="">-- Select a User --</option>
        </select>
        <br><br>
    </div>
    <div>
        <p>Select the access bundles you want to request.</p>
        <widget id="access_bundle_widget"></widget>
        <br>
        <label for="justification">Justification</label>
        <textarea ng-model="c.formData.justification"
                  class="form-control"
                  name="justification"
                  rows="4"
                  placeholder="Enter additional comments"></textarea>
    </div>
    <br>
    <button ng-click="c.submitForm()" class="btn btn-primary">Submit</button>
</div>

Server Script:

(function() {
    // Initialize data object
    data.users = [];
    data.loggedInUserId = gs.getUserID();
    data.submissionMessage = '';
    data.errorMessage = '';
    
    gs.info('Server script started. User ID: ' + data.loggedInUserId);
    
    // Query sys_user table for user dropdown
    var userGr = new GlideRecord('sys_user');
    userGr.addQuery('active', true);
    userGr.orderBy('name');
    userGr.query();
    while (userGr.next()) {
        var userName = userGr.getDisplayValue('name') || userGr.getValue('sys_id');
        if (userName) {
            data.users.push({
                value: userGr.getValue('sys_id'),
                label: userName
            });
        }
    }
    gs.info('Fetched ' + data.users.length + ' users: ' + JSON.stringify(data.users.slice(0, 5), null, 2));
    
    // Log raw input
    gs.info('Raw input: ' + (input ? JSON.stringify(input, null, 2) : 'null'));
    
    // Handle form submission
    if (input) {
        // Ensure action is set
        input.action = input.action || 'submit';
        gs.info('Action set to: ' + input.action);
        
        if (input.action === 'submit') {
            try {
                var requestGr = new GlideRecord('x_paler_acc_cat_ag_access_request');
                if (!requestGr.isValid()) {
                    data.errorMessage = 'Error: Table x_paler_acc_cat_ag_access_request does not exist or is inaccessible.';
                    gs.error('Table validation error: x_paler_acc_cat_ag_access_request');
                    return;
                }
                requestGr.initialize();
                
                // Map requested_for
                var requestedFor = input.requestForSelf === 'Yes' ? data.loggedInUserId : (input.requestForSelf === 'No' ? input.selectedUser : null);
                if (!requestedFor || requestedFor === '' || requestedFor === 'undefined') {
                    data.errorMessage = 'Error: No valid user selected. requestForSelf=' + input.requestForSelf + ', selectedUser=' + input.selectedUser;
                    gs.error(data.errorMessage);
                    return;
                }
                requestGr.setValue('requested_for', requestedFor);
                
                // Map selected checkboxes to opted_access_bundles
                if (input.selectedCheckboxes && input.selectedCheckboxes.length > 0) {
                    requestGr.setValue('opted_access_bundles', input.selectedCheckboxes.join(', '));
                    gs.info('Mapped checkboxes: ' + input.selectedCheckboxes.join(', '));
                } else {
                    requestGr.setValue('opted_access_bundles', '');
                    gs.info('No checkboxes selected');
                }
                
                // Map justification
                requestGr.setValue('justification', input.justification || '');
                
                // Insert record
                var recordId = requestGr.insert();
                if (recordId) {
                    data.submissionMessage = 'Request submitted successfully! ID: ' + recordId;
                    gs.info('Record inserted: ' + recordId);
                } else {
                    data.errorMessage = 'Error: Failed to insert record. Check permissions.';
                    gs.error('Failed to insert record');
                }
            } catch (e) {
                data.errorMessage = 'Error during submission: ' + e.toString();
                gs.error('Submission error: ' + e.toString());
            }
        } else {
            data.errorMessage = 'Error: Invalid action. Expected "submit", got ' + (input.action || 'undefined');
            gs.error('Invalid action: ' + (input.action || 'undefined'));
        }
    } else {
        data.errorMessage = 'Error: No input data received';
        gs.error('No input data received');
    }
    
    // Ensure response is returned
    return { data: data };
})();

Client Controller:

api.controller = function($scope, $timeout) {
    var c = this;
    
    // Initialize variables
    c.formData = {
        requestForSelf: 'None',
        selectedUser: '',
        justification: '',
        selectedCheckboxes: []
    };
    c.submissionMessage = '';
    
    console.log('Client script initialized at ' + new Date().toISOString());
    console.log('Users from server:', JSON.stringify(c.data.users || [], null, 2));
    
    // Reference embedded widget
    try {
        c.checkboxesWidget = $scope.getWidget('0be97d1d9338221076cd764efaba107a');
        console.log('Checkbox widget loaded:', !!c.checkboxesWidget);
    } catch (e) {
        console.error('Failed to load access_bundle_widget:', e.message);
    }
    
    // Watch selectedItems
    $scope.$watch('c.checkboxesWidget.selectedItems', function(newVal) {
        c.formData.selectedCheckboxes = newVal || [];
        console.log('Updated checkboxes:', c.formData.selectedCheckboxes);
    }, true);
    
    c.onRequestForSelfChange = function() {
        if (c.formData.requestForSelf !== 'No') {
            c.formData.selectedUser = '';
        }
        console.log('onRequestForSelfChange - requestForSelf:', c.formData.requestForSelf, 'selectedUser:', c.formData.selectedUser);
    };
    
    c.onUserChange = function() {
        console.log('onUserChange - selectedUser:', c.formData.selectedUser);
    };
    
    c.submitForm = function() {
        c.submissionMessage = '';
        var payload = {
            action: 'submit',
            requestForSelf: c.formData.requestForSelf,
            selectedUser: c.formData.requestForSelf === 'No' ? c.formData.selectedUser : '',
            justification: c.formData.justification || '',
            selectedCheckboxes: c.formData.selectedCheckboxes
        };
        console.log('Submitting form:', JSON.stringify(payload));
        
        if (!payload.requestForSelf || payload.requestForSelf === 'None') {
            c.submissionMessage = 'Please select whether the request is for you.';
            console.error('Submit failed: Invalid requestForSelf:', payload.requestForSelf);
            return;
        }
        if (payload.requestForSelf === 'No' && (!payload.selectedUser || payload.selectedUser === '')) {
            c.submissionMessage = 'Please select a user.';
            console.error('Submit failed: No user selected for requestForSelf=No');
            return;
        }
        
        c.server.update(payload).then(function(response) {
            console.log('Raw response:', JSON.stringify(response, null, 2));
            $timeout(function() {
                var responseData = response.data || response.result || response;
                if (responseData) {
                    c.submissionMessage = responseData.submissionMessage || responseData.errorMessage || 'Unknown error occurred.';
                    if (responseData.submissionMessage) {
                        c.formData.requestForSelf = 'None';
                        c.formData.selectedUser = '';
                        c.formData.justification = '';
                        c.formData.selectedCheckboxes = [];
                    }
                } else {
                    c.submissionMessage = 'Error: No response data received.';
                    console.error('No response data:', response);
                }
            });
        }, function(error) {
            $timeout(function() {
                c.submissionMessage = 'Client-side error: ' + error.toString();
                console.error('Submission error:', error);
            });
        });
    };
};

I have attached the picture of the widget. Please suggest me what need to be done here.

Best Regards,

Bishal Sharma

palanikumar · ‎05-28-2025

HI,

Is the Widget created in the scope of the table or in a different scope

Thank you,
Palani

bishalsharm · ‎05-28-2025

@palanikumar

this widget is created in scope

bishalsharm · ‎05-28-2025

@palanikumar

this widget is created in the scope of the table.