Part VI: Examples of Ribbons Customization in SharePoint / Office 365 - Send Email notification as reminder

As a follow up of my collection of examples regarding ribbons examples, i would like to share another simple example where you can make simple post-it note "reminder" to your email when you are in the SharePoint Office 365 environment and you don't need to be redirected to other page.

Before the example i would like to share the collection of SharePoint Ribbons examples from my articles:

• Send Email notification as reminder (new)
• Web Properties
• List Properties
• Google Chart
• Web Property Bags
• List Item Field Properties
• Create Document Set
• Add Custom Tab
• Add Custom Group to Custom Tab
• Add Custom Group Template with Checkbox Control
• Add Custom Control in Custom Group and Custom Tab
• Add Custom Group/Control (Large) in existing Tab
• Add Custom Group/Control (Large/Medium) in existing Tab
• Add FlyoutAnchor in Custom Tab/Custom Group
• Add Button Control in Existing Tab/Group
• Hide existing Ribbon control
• Replace existing Ribbon control
• Manage List/Library Visibility  in Site Content
• Display in Modal dialog Hidden Lists/Libraries
• Hidden  Document/Folder in Explorer Viewer
• Delete all Items to Recycle Bin
• Copy Document to another Folder
• Copy ListItem with Metadata
• Popup all SharePoint Apps
• Move Documents in Library with Metadata/versions
• OneNote Custom Actions (Create/Move Pages and Sections and conversion to Folder)

Creation of the Ribbon

For this example was used the SharePoint Ribbon Manager app for the XML structure and Code generation, don't worry i will shared bellow. 

Using the Ribbon Designer reused an existing XML structure to add new options that will be available in my SharePoint Site, as shown in the example Add Custom Ribbon Button in Site Page to Popup all SharePoint Apps.

The first thing i did was to create a new Tab and group area and then create the new Ribbon Button where the code was included in the Action area.

 The Ribbon Code Editor provide the support for the javascript Code for the associated action and then you just need to click save to be available in you SharePoint Portal.

XML Structure for the Ribbon

The XML for the ribbon can be access bellow where is defined the Tab/Group and Button and associated code to send the email notification.

<CommandUIExtension xmlns=\"http://schemas.microsoft.com/sharepoint/\">\n<CommandUIDefinitions>\n<CommandUIDefinition Location=\"Ribbon.Tabs._children\">\n<Tab Id=\"Email.Notification\" Title=\"Email Notification\" Description=\"Email Notification\">\n<Scaling Id=\"Email.Notification.Scaling\">\n<MaxSize Id=\"Notifications.Scaling.MaxSize\" GroupId=\"Notifications\" Size=\"LargeLarge\" />\n<Scale Id=\"Notifications.Scaling.Scale\" GroupId=\"Notifications\" Size=\"LargeLarge\" />\n</Scaling>\n<Groups Id=\"Email.Notification.Groups\">\n<Group Id=\"Notifications\" Title=\"Notifications\" Description=\"Notifications\" Template=\"Ribbon.Templates.Flexible2\">\n<Controls Id=\"Notifications.Controls\">\n<Button Id=\"Email.Button\" LabelText=\"Email Notification\" Image32by32=\"/_layouts/15/1033/images/formatmap32x32.png?rev=33\" Image32by32Left=\"-510\" Image32by32Top=\"-410\" ToolTipTitle=\"Email Notification\" Command=\"Email.Button.Command\" TemplateAlias=\"o1\" />\n</Controls>\n</Group>\n</Groups>\n</Tab>\n</CommandUIDefinition>\n<CommandUIDefinition Location=\"Ribbon.Templates._children\"><GroupTemplate Id=\"Ribbon.Templates.Flexible2\"><Layout Title=\"LargeLarge\" LayoutTitle=\"LargeLarge\"><OverflowSection DisplayMode=\"Large\" TemplateAlias=\"o1\" Type=\"OneRow\" /><OverflowSection DisplayMode=\"Large\" TemplateAlias=\"o2\" Type=\"OneRow\" /></Layout><Layout Title=\"LargeMedium\" LayoutTitle=\"LargeMedium\"><OverflowSection DisplayMode=\"Large\" TemplateAlias=\"o1\" Type=\"OneRow\" /><OverflowSection DisplayMode=\"Medium\" TemplateAlias=\"o2\" Type=\"ThreeRow\" /></Layout><Layout Title=\"LargeSmall\" LayoutTitle=\"LargeSmall\"><OverflowSection DisplayMode=\"Large\" TemplateAlias=\"o1\" Type=\"OneRow\" /><OverflowSection DisplayMode=\"Small\" TemplateAlias=\"o2\" Type=\"ThreeRow\" /></Layout><Layout Title=\"MediumLarge\" LayoutTitle=\"MediumLarge\"><OverflowSection DisplayMode=\"Medium\" TemplateAlias=\"o1\" Type=\"ThreeRow\" /><OverflowSection DisplayMode=\"Large\" TemplateAlias=\"o2\" Type=\"OneRow\" /></Layout><Layout Title=\"MediumMedium\" LayoutTitle=\"MediumMedium\"><OverflowSection DisplayMode=\"Medium\" TemplateAlias=\"o1\" Type=\"ThreeRow\" /><OverflowSection DisplayMode=\"Medium\" TemplateAlias=\"o2\" Type=\"ThreeRow\" /></Layout><Layout Title=\"MediumSmall\" LayoutTitle=\"MediumSmall\"><OverflowSection DisplayMode=\"Medium\" TemplateAlias=\"o1\" Type=\"ThreeRow\" /><OverflowSection DisplayMode=\"Small\" TemplateAlias=\"o2\" Type=\"ThreeRow\" /></Layout><Layout Title=\"SmallLarge\" LayoutTitle=\"SmallLarge\"><OverflowSection DisplayMode=\"Small\" TemplateAlias=\"o1\" Type=\"ThreeRow\" /><OverflowSection DisplayMode=\"Large\" TemplateAlias=\"o2\" Type=\"OneRow\" /></Layout><Layout Title=\"SmallMedium\" LayoutTitle=\"SmallMedium\"><OverflowSection DisplayMode=\"Small\" TemplateAlias=\"o1\" Type=\"ThreeRow\" /><OverflowSection DisplayMode=\"Medium\" TemplateAlias=\"o2\" Type=\"ThreeRow\" /></Layout><Layout Title=\"SmallSmall\" LayoutTitle=\"SmallSmall\"><OverflowSection DisplayMode=\"Small\" TemplateAlias=\"o1\" Type=\"ThreeRow\" /><OverflowSection DisplayMode=\"Small\" TemplateAlias=\"o2\" Type=\"ThreeRow\" /></Layout></GroupTemplate></CommandUIDefinition>\n</CommandUIDefinitions>\n<CommandUIHandlers>\n<CommandUIHandler Command=\"Email.Button.Command\" CommandAction=\"<Code>\" />\n</CommandUIHandlers>\n</CommandUIExtension>

Code:

javascript:
function processSendEmails() {
   var from = _spPageContextInfo.userEmail,
        to = _spPageContextInfo.userEmail,
        subject =  _spPageContextInfo.webTitle + " - " + _spPageContextInfo.userDisplayName ;
  
 var body = prompt("Please enter Email Body!", "");
if (body != null)
    {
     sendEmail(from, to, body + "<br/><a href='"+_spPageContextInfo.webAbsoluteUrl+_spPageContextInfo.webServerRelativeUrl+"'>link</a>", subject);
    }
}
function sendEmail(from, to, body, subject) {
    //Get the relative url of the site
    var siteurl = _spPageContextInfo.webServerRelativeUrl;
    var urlTemplate =  "/_api/SP.Utilities.Utility.SendEmail";
    var shouldNotDisappearAfterTimeout = false;
    var obj; var waitDialog;
    $.ajax({
        contentType: 'application/json',
        url: urlTemplate,
        beforeSend : function(){
            waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose("Loading", "Please wait");
            obj = SP.UI.Notify.showLoadingNotification(shouldNotDisappearAfterTimeout);
        },
        type: "POST",
        data: JSON.stringify({
            'properties': {
                '__metadata': {
                    'type': 'SP.Utilities.EmailProperties'
                },
                'From': from,
                'To': {
                    'results': [to]
                },
                'Body': body,
                'Subject': subject
            }
        }),
        headers: {
            "Accept": "application/json;odata=verbose",
            "content-type": "application/json;odata=verbose",
            "X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
        },
        success: function(data) {
           waitDialog.close();  
           SP.UI.Notify.removeNotification(obj);
           SP.UI.Notify.addNotification('Email Sent Successfully', false);
        },
        error: function(err) {
            alert('Error in sending Email: ' + JSON.stringify(err));
        }
    });
}
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', processSendEmails);

How the solution will looks like

After the Ribbon is created, you can access to your SharePoint Site and a new Tab is available with a option email notification.

When you click in the button a prompt option will appear with a text option, there you can send some text that will appear in your office 365 email .

in your right corner of office 365 you will receive an alert regarding the send email in SharePoint site with  the box added in the prompt text area.

Done and very simple, you can create a simple reminder with this example.

I hope you like this example.

Best regards, 

André Lage