Enhancing SAP UI5 Applications with Twilio SMS Integration

1. Introduction

In this tutorial, you'll learn how to use Twilio with a SAPUI5 application to send SMS messages easily. SAPUI5 is great for building user-friendly apps, and Twilio makes sending SMS simple. Whether you're making a notification system, just want SMS features, this guide will help you. By the end, you'll know how to use Twilio's API with SAPUI5 to send SMS messages securely.

2. Sign Up for a Twilio Free Account

Link for Twilio Account creation.

Step - 1

Sign Up >> Email Verified >> Verify Phone Number >> Verification code.

Step - 2 

Setup Build planSelect Continue Button

Click on Create New Account

By Clicking on the Get Start with Twilio Button a new Twilio Account is created.

Step - 3

Get phone number

Step - 4

Account dashboard
Note: The given Account SID, Auth Token and Twilio Phone Number Used in controller logic.

Step - 5

Super networks >> Phone Numbers

Step - 6

Managed >> Verified Caller IDs

Step - 7

Add Caller ID (If need to add new Phone numbers).

The "Add Caller ID" option in the Twilio API allows you to register a phone number as a verified caller ID.This means you can use that phone number as the caller ID when making outbound calls or sending SMS messages through Twilio.

Enter the Phone number and click on the Verify number >> Enter the OTP and Proceed. 

3. View.xml Code

Here is the Pic of the .xml code which is related to the Send SMS.

   <VBox id="idForm" class="Form" width="35%">
        <Title id="idFormTitle" text="User Details" level="H2" class="FormTitle" />
        <!-- Name Field -->
        <FlexBox id="idFieldName" justifyContent="SpaceBetween" alignItems="Center" class="FormTitle">
            <Label id="idNameLabel" text="Name:" class="formLabel" />
            <Input id="idNameInput" value="" placeholder="Enter Name" type="Text" />
        </FlexBox>
        <!-- Mail Field -->
        <FlexBox id="idFieldMail" justifyContent="SpaceBetween" alignItems="Center" class="FormTitle">
            <Label id="idMailLabel" text="Mail:" class="formLabel" />
            <Input id="idMailInput" value="" placeholder="Enter Email" type="Email" />
        </FlexBox>
        <!-- Phone Field -->
        <FlexBox id="idFieldPhone" justifyContent="SpaceBetween" alignItems="Center" class="FormTitle">
            <Label id="idPhoneLabel" text="Phone:" class="formLabel" />
            <Input id="idPhoneInput" value="" placeholder="Enter Phone Number" type="Tel" />
        </FlexBox>
        <!-- Submit Button -->
        <FlexBox id="idFieldSubmit" justifyContent="End" class="FormTitle">
            <Button id="idSubmitButton" text="Submit" press="onSubmit" type="Emphasized" />
        </FlexBox>
    </VBox>

4. CSS Code

.Form {
    background-color: rgba(8, 0, 0, 0.548);
    padding: 2rem;
    border-radius: 2rem;
    position: relative;
    z-index: 1;  
}
.FormTitle {
    color: yellow;
    font-size: x-large;
    font-weight: bolder;
    height: inherit;
}
.formLabel{
    color: white;
}

5. Controller Logic

            onSubmit: async function () {

              // Collecting input values
                var sName = this.byId("idNameInput").getValue();
                var sMail = this.byId("idMailInput").getValue();
                var sPhone = this.byId("idPhoneInput").getValue();
                // Basic validation for all fields
                if (!sName || !sMail || !sPhone) {
                    sap.m.MessageBox.warning("Please fill in all fields.");
                    return;
                }
                // Validate phone number format (10 digits)
                var phoneRegex = /^d{10}$/;
                if (!phoneRegex.test(sPhone)) {
                    sap.m.MessageBox.error("Phone number must be 10 digits long.");
                    return;
                }
                // Send SMS to the provided phone number using Twilio API
                var accountSid = '<------------------->'; // Your Twilio Account SID
                var authToken = <------------------->'; // Your Twilio Auth Token
                var DriverPhoneNo = "+91" + sPhone; // Assuming the country code is India
                var toNumber = DriverPhoneNo;
                var fromNumber = '+1234567890'; // Twilio number
                var messageBody = 'Hello ' + sName + ', we have received your details. Name: ' + sName + ' Mail: ' + sMail + ' Phone: ' + sPhone + ' Thank you!';
                // Twilio API URL
                var url = `https://api.twilio.com/2010-04-01/Accounts/${accountSid}/Messages.json`;
                // Payload for sending SMS
                var payload = {
                    To: toNumber,
                    From: fromNumber,
                    Body: messageBody
                };
                // Sending SMS using AJAX
                $.ajax({
                    url: url,
                    type: 'POST',
                    headers: {
                        'Authorization': 'Basic ' + btoa(accountSid + ':' + authToken)
                    },
                    data: payload,
                    success: function (data) {
                        sap.m.MessageToast.show("SMS sent successfully to " + sPhone);
                        // Clear input fields after submission
                        this.byId("idNameInput").setValue("");
                        this.byId("idMailInput").setValue("");
                        this.byId("idPhoneInput").setValue("");
                    }.bind(this),
                    error: function (error) {
                        sap.m.MessageBox.error("Failed to send SMS: " + error.message);
                    }
                });
            },
Here By Passing the input Values and Clicking on the Assign Button, it will send the SMS to the Receiver's Phone Number.
Note:  The Receiver Phone number should be Verified in the Twilio Account.

Here is the View (UI) of the above VBox code(.xml)