Dec
28
Written by:
Michael Washington
12/28/2014 8:37 AM
![image image](/Portals/0/Blog/Files/1/3275/Windows-Live-Writer-AngularJS-Posting-To-SharePoint-Newsfeed_1361E-image_c4459d42-f3c5-468f-938b-cf169b9f221a.png)
Posting to the SharePoint Newsfeed from an AngularJS application is simplified when you build your AngularJS (https://angularjs.org/) application in a Visual Studio LightSwitch Cloud Business App project.
Posting to the SharePoint Newsfeed is simple when using a normal LightSwitch Cloud Business App. That process is described at this link. However, when using AngularJS, a call using the SharePoint client object model (CSOM) will provide the functionality required.
The Application
![image image](/Portals/0/Blog/Files/1/3275/Windows-Live-Writer-AngularJS-Posting-To-SharePoint-Newsfeed_1361E-image_d38614d5-90ad-40a6-84de-511c4fb830a3.png)
The AngularJS application runs as a SharePoint Provider Hosted Application inside a Visual Studio LightSwitch Cloud Business App project. It allows “To Do” items to be viewed and added.
![image image](/Portals/0/Blog/Files/1/3275/Windows-Live-Writer-AngularJS-Posting-To-SharePoint-Newsfeed_1361E-image_69168628-1621-496d-a838-33baf9f70ec6.png)
When adding a new item, or selecting an exiting one (by clicking on it), a edit form appears.
![image image](/Portals/0/Blog/Files/1/3275/Windows-Live-Writer-AngularJS-Posting-To-SharePoint-Newsfeed_1361E-image_fd190e05-69aa-49d6-88bd-e2ef210a72f1.png)
After a item has been added, we can return to the main SharePoint site…
![image image](/Portals/0/Blog/Files/1/3275/Windows-Live-Writer-AngularJS-Posting-To-SharePoint-Newsfeed_1361E-image_c7fb4f40-01f4-4175-a97b-7b12eea743a0.png)
… select our “About me” page…
![image image](/Portals/0/Blog/Files/1/3275/Windows-Live-Writer-AngularJS-Posting-To-SharePoint-Newsfeed_1361E-image_7ccb329d-2aea-4462-845e-069665563cfc.png)
… and see that a post has been added to our Newsfeed.
Clicking on the link will take us directly to the application.
Creating The Application
![image image](/Portals/0/Blog/Files/1/3275/Windows-Live-Writer-AngularJS-Posting-To-SharePoint-Newsfeed_1361E-image_d7886a9b-f3d8-4c1f-b1d1-6f88b6d7fa0d.png)
We start with the SharePoint AngularJS application created in the article: An End-to-End AngularJS SharePoint Module using LightSwitch OData as a Back-End.
![image image](/Portals/0/Blog/Files/1/3275/Windows-Live-Writer-AngularJS-Posting-To-SharePoint-Newsfeed_1361E-image_d5ed9efe-9312-442a-ab4a-7b95633b0bce.png)
We open the project up and add Tenant permission.
![image image](/Portals/0/Blog/Files/1/3275/Windows-Live-Writer-AngularJS-Posting-To-SharePoint-Newsfeed_1361E-image_e8b0d712-daaa-4ab3-800c-e2e084716e72.png)
We also add User Profiles (Social).
![image image](/Portals/0/Blog/Files/1/3275/Windows-Live-Writer-AngularJS-Posting-To-SharePoint-Newsfeed_1361E-image_2bf6dbe1-69a1-44c4-8db4-36193a0f0f90.png)
We open the ToDo entity in the editor…
![image image](/Portals/0/Blog/Files/1/3275/Windows-Live-Writer-AngularJS-Posting-To-SharePoint-Newsfeed_1361E-image_a812868b-a88b-4d78-b76e-6bf05db623b0.png)
… and select the _Inserting method.
We use the following code for the method:
partial void ToDoes_Inserting(ToDo entity)
{
//Load the properties for the SharePoint web object.
var clientContext =
this.Application.SharePoint.GetHostWebClientContext();
Microsoft.SharePoint.Client.Web web = clientContext.Web;
// Get the current web
clientContext.Load(web);
clientContext.ExecuteQuery();
// Get the AngularLightSwitchSP URL
string AngularLightSwitchSP_url = "";
// Get the WebCollection
Microsoft.SharePoint.Client.WebCollection webs = web.Webs;
clientContext.Load<Microsoft.SharePoint.Client.WebCollection>(webs);
clientContext.ExecuteQuery();
// Loop thru each web to find AngularLightSwitchSP
foreach (Microsoft.SharePoint.Client.Web objWeb in webs)
{
if (objWeb.Title.ToLower() == "angularlightswitchsp")
{
// Get the URL
AngularLightSwitchSP_url = objWeb.Url;
}
}
// Create a link to include in the post.
SocialDataItem linkDataItem = new SocialDataItem();
linkDataItem.ItemType = SocialDataItemType.Link;
linkDataItem.Text = "link";
linkDataItem.Uri = AngularLightSwitchSP_url;
// Define properties for the post.
SocialPostCreationData postCreationData = new SocialPostCreationData();
postCreationData.ContentText =
entity.CreatedByInfo.FullName + " posted " + entity.TaskName + " {0}.";
postCreationData.ContentItems = new SocialDataItem[1] { linkDataItem };
// Get the SocialFeedManager instance.
SocialFeedManager feedManager = new SocialFeedManager(clientContext);
// Publish the post. This is a root post, so specify null for the
// targetId parameter.
feedManager.CreatePost(null, postCreationData);
clientContext.ExecuteQuery();
}
Note: You will need to add the following using statements to the class file:
using Microsoft.LightSwitch.Security.Server;
using Microsoft.SharePoint.Client.Social;
Note: You will need to add a reference to:
Microsoft.SharePoint.Client.UserProfiles
Located at ..Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\ISAPI\
Additional Functionality
See the following article for additional functionality added to this application:
Creating SharePoint Word Documents with AngularJS using LightSwitch
Links – Microsoft
Work with social feeds in SharePoint 2013
Posting on SharePoint 2013 newsfeed on behalf of someone else
Links – LightSwitch Help Website
Creating SharePoint Word Documents with AngularJS using LightSwitch
An End-to-End AngularJS SharePoint Module using LightSwitch OData as a Back-End
An End-To-End LightSwitch SharePoint Workflow Application
Advanced SharePoint Workflows Using HTTP Calls To LightSwitch
Deploy A LightSwitch Application To Office 365 / SharePoint Online
Exploring SharePoint 2013 Visual Studio Cloud Business Apps (LightSwitch)
Implementing Documents in a SharePoint 2013 Cloud Business App (LightSwitch)
Creating A SharePoint Online Testing Site
Creating A LightSwitch SharePoint 2013 Multi-Tenant Provider-Hosted Application
Download Code
The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx
(you must have Visual Studio 2013 (or higher) installed and a SharePoint Developer site to run the code)
2 comment(s) so far...
I registers lightswitchhelpwebsite.com site and receiving mail with verification. But when click to verification link, response message is "Invalid verification code". I registered your site three times, received same error message. What can I do to register your site.
By cahit on
5/29/2015 7:39 AM
|
@cahit - Click respond on the email verification email and tell me it wont let you in and I will fix it.
By Michael Washington on
5/29/2015 8:42 AM
|