Slack is an incredibly powerful team collaboration tool that has gained a lot of enterprise speed over the last few years. The ability to quickly message and collaborate on information would be an incredibly useful addition to SharePoint and Office 365. Unfortunately, there just aren’t any good SharePoint to Slack integration apps out there. In this post, we’ll cover the basics for making a simple messaging call from SharePoint to Slack where we post a link to the current SharePoint page.
To do this, we’ll go through the following steps:
- Create the Slack WebHook – we need an entry point into our team’s Slack Channel
- Add a button to the SharePoint page – we need to provide a simple way to trigger the Slack message posting action
- Wire it all up – Lastly, we’ll wire up the button to make the call to Slack
Create the Slack Integration WebHook
Slack, being the incredibly open platform that it is, conveniently provides a way for us to send messages to their system using their API. All that we will need to send these messages is a URL endpoint and a properly formed HTTP ‘POST’ call. That’s it, no authentication necessary. Wait, no authentication? Yup, using the Slack web site, you can build a custom integration WebHook endpoint that that you can just wire up and pump messages to.
Generating the custom web hook URL is simple with the following procedure:
- Navigate to the Custom Integrations page for your Slack team at https://yourteamname.slack.com/apps/build/custom-integration.
- Select the Incoming WebHooks option.
- On the Incoming WebHooks page, select the proper channel in the Post to Channel field or create a new channel to post to, then click the Add Incoming WebHooks Integration button.
- Once the new WebHook is created, take note of the WebHook URL that Slack provides. We’ll need this later when setting up our code.
Note: For the sake of simplicity of this article, we’ll be hardwiring the generated URL into our source code. This is NOT good practice for a production system and it’s only intended for our demo purposes here.
That’s all there is to it. We now have a Slack generated URL for posting our messages. Again, and I can’t stress this enough, protect this URL in a real world situation. Otherwise, anyone can just start ‘bot posting’ to your channel if they have this URL.
Add a button to SharePoint
Now that we have our entry point to send our Slack messages to, it’s time to get this into SharePoint to make it useful. What we want to do is add a button to a page (ideally every page in the site collection) and when this button is clicked, we make a post to our Slack channel with context information of the current page. To do this, we’ll add a Promoted Action link to the top right corner of the page which triggers the call to Slack.
Adding the Promoted Action link can be done using a little snippet of JavaScript after the page is loaded to inject the button in the right place. To do this, we can use a little bit of jQuery after the SharePoint JavaScript Object Model (JSOM) is loaded. This will ensure that all our necessary SharePoint metadata is where it needs to be before we get going. The following code snippet will wait for the SharePoint JSOM to load and will then inject the button into the page where we need it.
[code language=”javascript”]
function initPostToSlack() {
// Create the new Promoted Link structure
var promLink = ‘<a class=”ms-rtefocus-invalid ms-promotedActionButton” id=”s7_post_to_slack” href=”javascript:” onclick=”javascript:postPageToSlack();”>’;
promLink += ‘<span style=”height:16px;width:16px;position:relative;display:inline-block;overflow:hidden;” class=”s4-clust ms-promotedActionButton-icon”>’;
promLink += ‘<img src=”/_layouts/15/images/spcommon.png?rev=43#ThemeKey=spcommon” alt=”Post to Slack” style=”position: absolute; left: -218px; top: -48px;”>’;
promLink += ‘</span><span class=”ms-promotedActionButton-text”>Post to Slack</span></a>’;
// Add the new button to the Promoted Actions set
jQuery(‘#RibbonContainer-TabRowRight’).prepend(promLink);
}
// Ensure the SP JSOM is loaded before we worry about our stuff
jQuery( document ).ready(function() {
ExecuteOrDelayUntilScriptLoaded(initPostToSlack, “sp.js”);
});[/code]
That’s all there is to it for the button. Once the page loads, you should see the the Post to Slack button appear within the Promoted Actions links of the page.
Wire Up the Button
Now that we have the Slack WebHook created and a button on our page, all that’s left to do is to wire it up so that on button click, the current page information is posted to the Slack channel that we chose. To do this, add the following JavaScript to the page:
[code language=”javascript”]
function postPageToSlack() {
// Keep this URL private – Only hardcoded for sample purposes
var slackUrl = “https://hooks.slack.com/services/XXXXXXXXX/XXXXXXXXX/XXXXXXXXXXXXXXXXXXXXXXXX”;
// Build the Slack Message Payload
var payload = ‘payload=’ + JSON.stringify({
“text”: “<“+document.location.href+”|”+document.title+”>”,
“icon_emoji”:”:earth_americas:”,
“username”: _spPageContextInfo.userLoginName
})
// Post the message
jQuery.ajax({
url: slackUrl,
method: “POST”,
data: payload,
processData: false,
async: true,
dataType: ‘json’
}).done(function() {
console.log(‘Slack Post Success!’)
});
}[/code]
In the code above, we’re doing two things, creating the web request’s payload and then making the call to Slack. In the payload creation, we’re using some page specific metadata such as the page URL and Title. We’re also grabbing some SharePoint page context metadata from the _spPageContextInfo object to get the current user. This will give our Slack post more context to who’s actually making the post to the Slack Channel. Check out my other blog post on the full listing of _spPageContextInfo metadata that you can use when creating your Slack post. Don’t forget, in the code snippet above, you will have to replace the sample slackURL with the full WebHook URL that you created in the Create the Slack Integration WebHook above.
Once you’re done adding the code snippets to the page, you should be able to load the page, click the Post to Slack button and have your message appear within Slack. A quick click of the new button and you should be posting to your Slack Channel.
There you have it, that’s all it takes to get a message to post from SharePoint to the Slack Channel of your choosing. Keep in mind, the sample above is intended to be quick and dirty sample for a single page in SharePoint. If you wanted to move a solution like this to the entire site collection, you would use a more robust approach to injecting JavaScript into your site collection but that is out of the bounds of what we’re trying show here. Hit me up in the comments below if you have any questions on how to expand this sample further.
You can find the full source code in an HTML format here. To add it to your SharePoint page, simply download the HTML, update the WebHook URL to your generated URL, upload the HTML to a common location in your SharePoint site (i.e. Site Assets), then connect the HTML file to a Content Editor Web Part. This will quickly get you up and running with the sample above.
