How to Send an email in a SharePoint Hosted app?

How to Send an Email in a SharePoint Hosted app?

We can send email to the Users / Group in SharePoint Hosted app by using workflow Email Activity.

In SharePoint 2013 Online there aren't any API's available to send email, so to send email in Office 365 online, we'll have to do the following,

While Creating SharePoint Hosted app In Visual Studio, Create a site workflow, after that from the toolbox add the "Email" Activity to workflow,

This activity requires, "TO", "Subject" and "Body" arguments. 
Now we'll create the three arguments of the workflow, we'll pass these arguments when we'll start the workflow.

Now you'll need to provide activity arguments, Body and Subject arguments are simple you can just pass the argBody and argSubj workflow arguments as is, 

but for TO field you'll have to covert the string argTOEmail into Collection,

We'll create a new Collection object of type string.

add this to create the Email collection,

 new System.Collections.ObjectModel.Collection<string>() { argTOEmail }  

our workflow is now complete, 
We'll start our email workflow using JavaScript Object Model.  Include the following code snippet in your app.js file,

 
var context = null;
var web;
var wfManager;
var subscription;
var params;
var _wss;
var argSubj;
var argBody;
var argTOEmail;
function send(Subject, Body, ToEmail) {  
   context = SP.ClientContext.get_current();  
   web = context.get_web();  
   argSubj = Subject;  
   argBody = Body;  
   argTOEmail = ToEmail;  
   wfManager = new SP.WorkflowServices.WorkflowServicesManager.newObject(context, web);  
   context.load(wfManager);  
   context.executeQueryAsync(initWorkflowSubScriptionService);  
 }  

The above code will load the Workflowmanager and on-success will call  initWorkflowSubScriptionService function.

initWorkflowSubScriptionService will start the workflow, and hence will send the email,

 function initWorkflowSubScriptionService() {  
   _wss = wfManager.getWorkflowSubscriptionService();  
   context.load(_wss);  
   context.executeQueryAsync(  
     function (sender, args) {  
       subscription = _wss.getSubscription("f248e55e-495c-4c9b-b4de-618033d6be3b");  
       params = new Object();  
       params["argSubj"] = argSubj;  
       params["argBody"] = argBody;  
       params["argTOEmail"] = argTOEmail;  
       context.executeQueryAsync(  
         function (sender, args) {  
           wfManager.getWorkflowInstanceService().startWorkflow(subscription, params);  
           context.executeQueryAsync(  
             function (sender, args) {  
             },  
             function (sender, args) {  
               console.log("Something went wrong in starting workflow: " + args.get_message() + '\n' + args.get_stackTrace());  
             }  
           )  
         }  
       )  
     },  
       function (sender, args) {  
         console.log("Something went wrong in starting workflow: " + args.get_message() + '\n' + args.get_stackTrace());  
       }  
     );  
 }  

So now you'll just need to call the function send like this 
send ("This is Subject","This is body","test@test.onmicrosoft.com");

There are however some restrictions, 
You can send email only to the Current Domain users.
and using the above approach you can only send email to only one recipient,  
I'll write another blog post on how to send Email to Multiple recipient in SharePoint Hosted app using workflow and Javascript Object Model

How to add Client People Picker in SharePoint Hosted Apps

Configure Client People Picker Control in SharePoint Hosted Apps

In this Post I'll show you how to add People Picker on SharePoint hosted App. Its Very Simple Following is the code to add control on App page.

1:  <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">  
2:    <SharePoint:ClientPeoplePicker AllowEmailAddresses="true" Required="true" ValidationEnabled="true" ID="peoplePicker"   
3:      runat="server" VisibleSuggestions="3" Rows="1" PrincipalAccountType="User,DL,SecGroup,SPGroup" AllowMultipleEntities="true" CssClass="ms-long ms-spellcheck-true" Height="85px" />  
4:  </asp:Content>  

and following is the code I added in App.js file to get the Users from the control in JavaScript.

1:  var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePicker_TopSpan;  
2:    var users = peoplePicker.GetAllUserInfo();  
3:    var userInfo = '';  
4:    for (var i = 0; i < users.length; i++) {  
5:      var user = users[i];  
6:      var userobj = oWebsite.ensureUser(user["Key"].split('|')[2]);  
7:      userInfo += userobj + ' ' ;
8:    }

where peoplePicker_TopSpan is the id of people Picker Control.

People Picker in SharePoint Hosted App.

Update List Permissions in SharePoint Hosted Apps SP2013

Update List Permissions in SharePoint Hosted Apps 

In this Post we'll update the permissions of the list and give Administrator Access to SharePoint Users. Here is how,

In Previous Post I've mentioned on how to add People Picker Control in SharePoint Hosted App.
Check it http://hasan-nasir.blogspot.com/2013/04/how-to-add-client-people-picker-in.html

1:  <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">  
2:    <SharePoint:ClientPeoplePicker AllowEmailAddresses="true" Required="true" ValidationEnabled="true" ID="peoplePicker"   
3:      runat="server" VisibleSuggestions="3" Rows="1" PrincipalAccountType="User,DL,SecGroup,SPGroup" AllowMultipleEntities="true" CssClass="ms-long ms-spellcheck-true" Height="85px" />  
4:    <input type="button" onclick="UpdatePermisions();" title="UpdatePermisions" />  
5:  </asp:Content>  

Now we'll see how to Break Permissions Inheritance of the list and how to add users in the list and give them administrator access.

'Use Strict' in SharePoint 2013 APPS

SharePoint 2013 Apps uses a lot of JavaScript, and SharePoint-Hosted Apps majorly rely on JSOM. 

While I was working with SharePoint 2013 Apps I copied some of the JavaScript code used in SP2013 App samples provided by Microsoft Community but code was not working, everything was perfect, the code copy pasted as is but still it’s not working.

I tried to find the bug and tried to fix the code but was not successful so I then downloaded the whole sample APP and deployed it on SharePoint Online, It worked!!!

So what’s the difference, the only line extra I had in my code was 'use strict' which visual studio adds to the app.js file by default when you create a new SP2013 APP. so when i removed that line my App Worked.

So what is this 'use Strict',

​In ECMAScript5 'use strict' mode is introduced which is as its name states restricts developer from doing a lot of things; you can read more about it here.  http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

So why not simply remove this line, because it’s been added by visual studio by default and also because it’s becoming a new programming standard and if you've read the link by now it’s a better way to write JS.

So now when you are writing apps you'll also have to learn how to program in strict mode, you'll learn to write better JavaScript Code.