Preface – This post is part of the UI5 Integration Programs series.

Introduction

Outlook or Email Client Integration in SAP UI5 is a crucial aspect of modern-day business operations, as it streamlines the process of communication and data management within an organization. By integrating your email client with SAP UI5, you can efficiently manage emails, appointments, and contacts directly from your SAP system. This integration provides a seamless experience for users, improving productivity and reducing the time spent on manual tasks. With the help of SAP UI5’s intuitive interface and advanced features, you can easily manage your email and other communication needs, optimizing your work processes and increasing your overall efficiency.

When do we need to integrate Outlook or Email Client with UI5?

You may need to integrate Outlook or an Email Client with SAP UI5 in the following scenarios:

1. Centralized Communication Management: Integrating your email client with SAP UI5 allows you to manage all your communication in a single platform, reducing the time spent on switching between different systems.
2. Improved Productivity: By integrating your email client with SAP UI5, you can automate repetitive tasks such as sending emails, scheduling appointments, and updating contacts. This saves time and improves overall productivity.
3. Better Collaboration: Integrating your email client with SAP UI5 makes it easier for team members to communicate and collaborate on projects. You can easily share information and track email conversations directly from the SAP system.
4. Enhanced Data Security: By keeping all your communication within a secure platform like SAP UI5, you can ensure that sensitive information is protected and only accessible by authorized users.
5. Better Customer Experience: By integrating your email client with SAP UI5, you can provide a seamless and efficient customer experience. You can respond to customer inquiries, send updates, and manage customer information directly from your SAP system.

How to open up Outlook or Email Client from UI5 with preformatted text?

We can open up Outlook or another email client in UI5 in two different ways:

1. Using mailto URL scheme

To open Outlook or an Email Client from SAP UI5 with preformatted text, you can use a combination of JavaScript and the mailto URL scheme. Here’s an example of how you can achieve this:

var emailSubject = "SAP UI5 Email Integration";
var emailBody = "Hello,\n\nThis is an email generated from SAP UI5.\n\nBest regards,\nSAP UI5 Team";
var emailTo = "recipient@example.com";
var mailLink = "mailto:" + emailTo + "?subject=" + encodeURIComponent(emailSubject) + "&body=" + encodeURIComponent(emailBody);
window.location.href = mailLink;

2. Using sap.m.URLHelper.triggerEmail

The sap.m.URLHelper.triggerEmail method is a part of the SAP UI5 library and can be used to open the default email client with preformatted text. Here’s an example of how you can use this method:

In this method we will try to create something where you can even select fields from UI and pass them to email like shown below:

sap.m.URLHelper.triggerEmail("recipient@example.com", "SAP UI5 Email Integration", "Hello,\n\nThis is an email generated from SAP UI5.\n\nBest regards,\nSAP UI5 Team");

In this example, the triggerEmail method takes three parameters: the recipient’s email address, the email subject, and the email body. When this code is executed, it opens the default email client with the specified subject, body, and recipient.

This method provides a simpler and more convenient way to open the email client compared to manually constructing a mailto link. Additionally, it ensures that the email text is properly encoded for use in a URL.

View.xml

<mvc:View controllerName="ChatGPTGen.ChatGPTGen.controller.Main" xmlns:table="sap.ui.table" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="App to show Email Client Integration in SAP UI5">
                    <content>
                        <table:Table id="customerTable" selectionMode="Single" rows="{/customers}" enableColumnReordering="false">
                            <!-- columns for customer name, address, and email -->
                            <table:columns>
                                <table:Column width="20%">
                                    <table:label>
                                        <Label text="Name"/>
                                    </table:label>
                                    <table:template>
                                        <Text text="{name}"/>
                                    </table:template>
                                </table:Column>
                                <table:Column width="30%">
                                    <table:label>
                                        <Label text="Address"/>
                                    </table:label>
                                    <table:template>
                                        <Text text="{address}"/>
                                    </table:template>
                                </table:Column>
                                <table:Column width="50%">
                                    <table:label>
                                        <Label text="Email"/>
                                    </table:label>
                                    <table:template>
                                        <Text text="{email}"/>
                                    </table:template>
                                </table:Column>
                            </table:columns>
                        </table:Table>
                    </content>
                    <!-- buttons for creating, editing, and deleting records -->
                    <footer>
                        <Bar>
                            <contentLeft>
                                <Button id="createButton" text="Create" press="handleCreate"/>
                                <Button id="editButton" text="Edit" press="handleEdit"/>
                                <Button id="deleteButton" text="Delete" press="handleDelete"/>
                                <Button id="onHelpPress" text="Help" press="onHelpPress"/>
                            </contentLeft>
                        </Bar>
                    </footer>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

Controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageBox"
], function (Controller, MessageBox) {
    "use strict";
    return Controller.extend("ChatGPTGen.ChatGPTGen.controller.Main", {
        onInit: function () {
            var oModel = new sap.ui.model.json.JSONModel();
            oModel.setData({
                customers: [{
                    name: "John Doe",
                    address: "123 Main St",
                    email: "john.doe@example.com"
                }, {
                    name: "Jane Doe",
                    address: "456 Oak Ave",
                    email: "jane.doe@example.com"
                }]
            });
            // set the model on the core so that it is available to the entire application
            sap.ui.getCore().setModel(oModel);
            // bind the table to the model
            this.byId("customerTable").setModel(sap.ui.getCore().getModel());
        },
        // handler for creating a new customer record
        handleCreate: function () {
            // implement your logic for creating a new customer here
        },
        // handler for editing a customer record
        handleEdit: function () {
            // get the selected customer from the table
            var oTable = this.byId("customerTable");
            var oSelectedCustomer = oTable.getSelectedItem();
            // implement your logic for editing the selected customer here
        },
        // handler for deleting a customer record
        handleDelete: function () {
            // get the selected customer from the table
            var oTable = this.byId("customerTable");
            var iSelectedIndex = oTable.getSelectedIndex();
            // check if a customer is selected
            if (iSelectedIndex === -1) {
                sap.m.MessageToast.show("Please select a customer to delete");
                return;
            }
            // remove the selected customer from the model data
            var aCustomers = sap.ui.getCore().getModel().getData().customers;
            aCustomers.splice(iSelectedIndex, 1);
            sap.ui.getCore().getModel().setData({
                customers: aCustomers
            });
            // show success message and refresh the table
            sap.m.MessageToast.show("Your selected row is deleted");
            // oTable.getBinding("items").refresh();
        },
        onHelpPress: function () {
            // Get data from selection on screen
            if (window.getSelection().baseNode === null) {
                MessageBox.error(
                    "Please highlight the field and value for which you want to report issue!"
                );
            } else {
                var selectedData = window.getSelection().focusNode.nodeValue;
                var getSelectedField = window.getSelection().anchorNode.nodeValue;
                // Check if there was any selection
                if (selectedData === null || getSelectedField === null) {
                    MessageBox.error(
                        "Please highlight the field and value for which you want to report issue!"
                    );
                } else {
                    // Trigger email with custom email data
                    sap.m.URLHelper.triggerEmail("contact@rudelabs.in", "RUDE LABS: Data Issue for Customer " + selectedData, "Hello " + "Team" +
                        ", \n\n" +
                        "Kindly look into the Address with the following details: \n" +
                        "Customer name: " + selectedData + "\n" +
                        "Current Address: " + getSelectedField + "\n" +
                        "Reporter User ID: " + sap.ushell.Container.getService("UserInfo").getId() + "\n\n\n\n" +
                        "Thanks & Regards," + "\n" +
                        sap.ushell.Container.getService("UserInfo").getUser().getFullName()
                    );
                }
            }
        }
    });
});

Output