Custom Widget - Send Email Not Working.

[yuvarajkate]

Hey! I made a custom widget to send emails from the Service Portal itself. but it is not working. Can you just go through and tell me where i might be going wrong. I have debugging set up at every step to solve the errors still getting the same response. According to the console logs the input is receiving invalid data. 

Here is my Code.

1.HTML:

<div class="widget-container">
    <h3>Send an Email</h3>
    <form>
        <div class="form-group">
            <label for="emailTo">To:</label>
            <input type="email" id="emailTo" ng-model="emailData.to" class="form-control" required>
        </div>
        <div class="form-group">
            <label for="emailSubject">Subject:</label>
            <input type="text" id="emailSubject" ng-model="emailData.subject" class="form-control" required>
        </div>
        <div class="form-group">
            <label for="emailBody">Body:</label>
            <textarea id="emailBody" ng-model="emailData.body" class="form-control" rows="5" required></textarea>
        </div>
        <button type="button" class="btn btn-primary" ng-click="sendEmail()">Send Email</button>
    </form>
</div>

2.Client Script:

api.controller = function($scope, spModal) {
    $scope.emailData = {
        to: '',
        subject: '',
        body: ''
    };

    $scope.sendEmail = function() {
        console.log("Sending email data to server:", $scope.emailData);
        alert("Sending email with data: " + JSON.stringify($scope.emailData));

        $scope.server.update({
            emailData: $scope.emailData
        }).then(function(response) {
            console.log("Server response:", response);
            alert("Server response: " + JSON.stringify(response));

            if (response.success) {
                spModal.alert('Email sent successfully!');
                $scope.emailData = { to: '', subject: '', body: '' };
            } else {
                spModal.alert('Failed to send email: ' + response.error);
            }
        });
    };
}

3.Server Script:

(function() {
    try {
        // Log the raw input object
        gs.info("Input received in server script: " + JSON.stringify(input));

        if (!input || !input.emailData) {
            gs.error("Invalid input structure: " + JSON.stringify(input));
            data.success = false;
            data.error = "Invalid input data.";
            return;
        }

        var emailData = input.emailData;
        gs.info("Email data extracted: " + JSON.stringify(emailData));

        if (!emailData.to || !emailData.subject || !emailData.body) {
            gs.error("Missing required email fields: " + JSON.stringify(emailData));
            data.success = false;
            data.error = "Missing required email fields.";
            return;
        }

        var grEmail = new GlideRecord('sys_email');
        grEmail.initialize();
        grEmail.setValue('type', 'send-ready');
        grEmail.setValue('recipients', emailData.to);
        grEmail.setValue('subject', emailData.subject);
        grEmail.setValue('body', emailData.body);
        grEmail.insert();

        gs.info("Email record inserted successfully.");
        data.success = true;
    } catch (e) {
        gs.error("Error in server script: " + e.getMessage());
        data.success = false;
        data.error = e.getMessage();
    }
})();

[PraveenK1149237]

<div class="widget-container">
<h3>Send an Email</h3>
<form>
<div class="form-group">
<label for="emailTo">To:</label>
<input type="text" id="emailTo" ng-model="emailData.to" class="form-control" required>
</div>
<div class="form-group">
<label for="emailSubject">Subject:</label>
<input type="text" id="emailSubject" ng-model="emailData.subject" class="form-control" required>
</div>
<div class="form-group">
<label for="emailBody">Body:</label>
<textarea id="emailBody" ng-model="emailData.body" class="form-control" rows="5" required></textarea>
</div>
<button type="button" class="btn btn-primary" ng-click="sendEmail()">Send Email</button>
</form>
</div>

Server script 

(function() {

    try {

        if (input.emailData) {

            var grEmail = new GlideRecord('sys_email');

            grEmail.initialize();

            grEmail.setValue('type', 'send-ready');

            grEmail.setValue('recipients', input.emailData.to);

            grEmail.setValue('subject', input.emailData.subject);

            grEmail.setValue('body', input.emailData.body);

            grEmail.insert();

            data.result = "Email send Succesfully";

        }

    } catch (e) {

        gs.error("Error in server script: " + e.getMessage());

        data.success = false;

        data.error = e.getMessage();

    }

})();


client script 

api.controller = function($scope) {

    $scope.emailData = {

        to: '',

        subject: '',

        body: ''

    };

    $scope.sendEmail = function() {

        if ($scope.emailData.to == "" || $scope.emailData.subject == "" || $scope.emailData.body == "") {

            alert("Kindly fill the fields");

        } else {

            $scope.data.emailData = $scope.emailData;

            alert(JSON.stringify($scope.emailData));

            $scope.server.update().then(function(response) {

                if ($scope.data.result) {

                    alert($scope.data.result);

                }

            });

        }

    };

}

It will insert the record in the sys_email table but there is no notification designed for it so i would not recommend this approach what you should do is configure a notiifcation and then set it to Event fire in when to run then create a new event and in the use gs.eventQueue() metod 

this is how you will use it in server script
gs.eventQueue("event_name","",input.emailData.to,JSON.stringify(input.emailData));
tick the send to param 1 in the who will receive section on the notification.
create a email script and use the event.param2 to access the this --> JSON.stringify(input.emailData) and parse it and the design the email in the email script then call the email script in the notification. 

Please mark helpful if this helps.

[vishwajeet5550 · Accepted solution]

The HTML form structure for the email widget appears correct, but the issue with receiving invalid input may stem from the client or server scripts. First, ensure that the emailData object is properly initialized in the client script, with fields for to, subject, and body. Without initialization, AngularJS may not correctly bind form inputs. Additionally, verify that the sendEmail() function includes proper validation to check if all fields are filled before sending data to the server. If the validation is missing, incomplete, or incorrect, the server may receive empty or undefined values. Also, check that the client-side code correctly uses $spHttp.post() or $http.post() to send emailData to the server. On the server side, confirm that the script validates the incoming input data and handles any missing or invalid fields appropriately. If any of these areas are misconfigured, they could lead to the invalid input error you're encountering. Sharing your client and server scripts would help in pinpointing the exact issue.