Working with Calendar events from Office 365

In this article post, let us look at the way of accessing the Office 365 calendar events programmatically using REST APIs.

In the samples shown, calendar events will be accessed from SharePoint portal pages using two ways. One way is to use the graph API and the other way is using the outlook API.

Outlook API vs Microsoft Graph API:

Outlook API has lot of API end points to access the mailbox data in office 365 or other Microsoft mailbox services. It has around 11 API subsets for accessing various components under outlook like calendar, contacts, etc.

Microsoft Graph API, helps getting connected to multiple Microsoft products or services. The services include outlook, teams, SharePoint, people etc. This also helps in accessing other user information as well.

Using Webhooks for Posting SharePoint Items into MS Teams with Flows

In my previous post, you would have seen posting the items into Microsoft Teams Channels as conversations using Microsoft Flows. The respective channels will be chosen by selecting the Teams service in the flow configurations.

In this post, let us try to achieve similar kind of functionality, but with a little different approach. As we are all aware that Microsoft Teams will support incoming webhook requests, let us try configuring the webhook URLs.

Webhook:

What is webhook? The external system which posts messages whenever data is available using the endpoint APIs.

How the webhook will help in Microsoft Teams? Take for an example, you are using Teams as a collaboration platform. You need to post data from multiple systems to the team channels for better collaboration. The webhook URL can be generated for a channel and can be shared with other external systems. Whenever the external system has the data for posting, the data will be sent to the teams using the API generated.

Working with Microsoft Teams from SharePoint Using Graph API

Let us see how to work with Microsoft teams from SharePoint programmatically using Graph APIs.

Microsoft has provided the Graph APIs to work with Microsoft Teams and its channels. Though, it is in a beta version. The graph APIs can be triggered from any of the portals. Here, let us only look at triggering the graph APIs from the SharePoint portals.

For example, the following graph API is used to get all the teams which you are part of.

• https://graph.microsoft.com/beta/me/joinedTeams

Application with Microsoft Teams Permissions 

First, you need to register the application in Microsoft dev portal, where you need to provide the necessary permissions for accessing the Microsoft Teams data from any portal.

• Login to the Microsoft applications portal https://apps.dev.microsoft.com
• Provide the name
• Copy the Application ID generated. (It will be used as client ID in the SharePoint code in the below section)
• Add the platform as web and then provide the redirect URL. In our sample, you need to provide the SharePoint page URL you will be using to test the functionality.
• In the Microsoft Graph Permissions, add User.ReadWrite.All and Group.ReadWrite.All permissions to the both the permissions (delegated and applications permissions).
• Then save and close the application.

Navigate to the SharePoint page, where you want to test the functionality. Add a content editor web part with jquery script reference.

Acquire Access Token​​ and Hit Microsoft Teams Graph API

Access Token to be acquired for getting the Microsoft Teams data. The request token will be generated by redirect URL. The redirect URL to be built with the help of authentication server URL, domain details, response type, client ID (generated above), resource URL (Graph API URL) and redirect URI (SharePoint Page where the functionality is tested). In the following script file, required logic to get the access token is written.

Once the page is redirected, the access token will be available in the redirected URL. We need to extract the token and the ajax call is made to the graph API using the access token.

Create a custom JavaScript file (teams.js) with the script content available in the below section.

	<script type="text/javascript" src="/SiteAssets/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="/SiteAssets/mymsteams.js"></script>
	<div id="mymsteams"></div>

view raw content edit web part hosted with ❤ by GitHub

	$(document).ready(function () {
	//var token = getParameterByName['access_token'];
	var token = getParameterByName('access_token');
	if (token == null || token == undefined) {
	// On Page load or if token not available on the URL.
	requestToken();
	}
	else {
	// Token available, extract the data
	$.ajax({
	url: "https://graph.microsoft.com/beta/me/joinedTeams",
	type: "GET",
	headers: { "Authorization": "Bearer " + token },
	success: function (data) {
	// Extract the data
	console.log(data);
	var myTeams = "";
	for (var i = 0; i < data.value.length; i++) {
	if (data.value[i].displayName != null) {
	myTeams += "<p>" + data.value[i].displayName + "</p>";
	}
	}
	$("#mymsteams").append(myTeams);
	},
	error: function (sender, args) {
	console.log("error");
	}
	});
	}
	});
	// Extract the access token from the URL
	function getParameterByName(name, url) {
	if (!url) url = window.location.href;
	name = name.replace(/[\[\]]/g, "\\$&");
	var regex = new RegExp("[?&#]" + name + "(=([^&#]*)|&|#|$)"),
	results = regex.exec(url);
	if (!results) return null;
	if (!results[2]) return '';
	return decodeURIComponent(results[2].replace(/\+/g, " "));
	}
	// Get the token using the redirect URL
	function requestToken() {
	var clientId = '9921bb32-b288-465b-9f74-11222f28534a';
	var replyUrl = 'https://nakkeerann.sharepoint.com/Pages/trainingpage.aspx';
	var resource = "https://graph.microsoft.com";
	var authServer = 'https://login.microsoftonline.com/nakkeerann.onmicrosoft.com/oauth2/authorize?';
	var responseType = 'token';
	var url = authServer +
	"response_type=" + encodeURI(responseType) + "&" +
	"client_id=" + encodeURI(clientId) + "&" +
	"resource=" + encodeURI(resource) + "&" +
	"redirect_uri=" + encodeURI(replyUrl);
	// Redirect to the URL, which will have access token on successful authentication
	window.location = url;
	}

view raw mymsteams.js hosted with ❤ by GitHub

Test

Test the functionality by hitting the SharePoint page URL. The snapshot shows the Microsoft Teams.

Post SharePoint Items into MS Teams using MS Flows

Posting SharePoint Items as Conversations in Microsoft Teams

Here let us see how to push the items from SharePoint into the Microsoft Teams Channels as conversations using Microsoft Flows. #MicrosoftTeams #MicrosoftFlow

This is simple, straight forward and out of the box approach. Microsoft Flow eases our job with out of the box configuration.

Consider a business scenario, whenever an item is created in the SharePoint repository, it has to be pushed into Microsoft Team’s channel for discussions. The following steps will helps you in configuring the flow out of the box.

Note: Assuming, the connections for teams and SharePoint services are being available in the Microsoft Flow portal. If not already created, you will be prompted to provide the account details when configuring the SharePoint or the Microsoft Teams components in the below steps. You can provide different or the same account details. The accounts to the SharePoint or Microsoft teams can also be configured on the Microsoft Flows portal by navigating to the connections component.

Steps Involved:

• Create a list in the SharePoint site.
• Create a channel in the Microsoft teams.
• Login to the Microsoft flows.
• Select the SharePoint service à "when an item is created" template.
• Provide the site details and list details.
• Click on New Step à Add an action option.
• Search for Microsoft teams and select it.
• Select Post Message option.
• From the drop down select the Microsoft Teams ID, Channel ID, and Message to be posted.
• Here, message to be posted can be customized. Click on the message text box and select the SharePoint item field by adding dynamic content. (picture shown below)

• Save the flow.

Test the Flow:

• Login to the SharePoint site and navigate to the list.
• Create an Item à Provide some data and save it.
• Login to the Microsoft Teams and navigate to the channel provided in the configuration.
• You can see the item created in the SharePoint list, posted as a conversation in the Team’s channel.

Removing Web Part from SPFx Solution

You would have seen adding web parts to the SharePoint framework solutions. Here, let us see how to remove the web part from the SharePoint framework solution manually.

Web Part Files:

• Navigate to your SPFx solution and the web parts folder inside it. (\src\webparts\)
• Locate your web part folder and delete it. (This will delete all the files created for your web part)

Configuration File Entries:

• Next, web part bundle needs to be removed from the config file (config.json).
• In the config.json, locate your web part entry and remove the same. 
• Similarly remove the localization file entry from the config file. 

For example, helloworld web part entry will look like,

	"localizedResources": {
	"HelloworldWebPartStrings": "lib/webparts/helloworld/loc/{locale}.js" // Remove this line
	}

view raw localized resource file entry in config.json hosted with ❤ by GitHub

	"helloworld-web-part": {
	"components": [
	{
	"entrypoint": "./lib/webparts/helloworld/helloworldWebPart.js",
	"manifest": "./src/webparts/helloworld/helloworldWebPart.manifest.json"
	}
	]
	}

view raw web part entry in config.json hosted with ❤ by GitHub

Library Files:

• Corresponding files should also be removed from the library folder.
• Navigate to /lib/webparts/ folder in the solution. Locate your web part and delete the same.