DMC recently updated our SharePoint intranet site to SharePoint 2016, and with that upgrade, we decided to do a refresh of the UI.
We concentrated on adding interesting and useful items to the homepage. One of those pieces of content was a display of our office-specific Slack channels.
This blog explores what I had to learn and do in order to implement a Slack display inside a SharePoint web part page.
Getting Ready in Slack
My first step was to learn how to communicate with Slack. Knowing that I wanted to keep this display lightweight and I wasn't too worried about displaying tokens to users on an intranet site, I decided to utilize Slack's web API. This API uses HTTP-style RPC methods with simple authentication tokens. There is the option to use OAuth 2.0 and negotiate tokens based on users, but for a simple one-way display application, I did not think it necessary. That said, I knew I still needed a token of some sort and didn't want to use my own, so I set up a Slack Bot user to facilitate the communication.
Talking with Channels
Now that I had an authentication token, I could actually start communicating with our Slack channels and reading information from them. Since we were already using jQuery on other parts of the site, I could just make a simple ajax call to Slack and start receiving data immediately:
//Get messages
$.ajax({
url: "https://slack.com/api/channels.history?token=" + botAuthToken + "&channel=" + channel + "&count=" + historyAmount + "&pretty=1"
}).then(function (data) {
if (data["ok"] && data["ok"] === true) {
slackMessages = data["messages"];
}
});
Once I got the messages, I was able to parse them out with the help of the Slack Message documentation. However, I didn't only want to display text. I also wanted to show users' profile pictures and any emojis used in messages (especially custom ones like the office dog: 
). I used the users.list and emojis.list actions to get all of the possibilities, and then constructed the HTML for a post as follows:
for(var key in slackEmojis)
{
if(messageText.indexOf(":"+key+":") > 0)
{
messageText = messageText.replace(":"+key+":",'<span class="emoji emoji-sizer" style="background-image:url('+slackEmojis[key]+')" title="'+key+'"> </span>');
}
}
$("#dmcHomeSlack").append(
'<ts-message class="message">'+
'<div class="message_gutter">' +
'<div class="message_icon">' +
'<a href="https://dmcinfo.slack.com/team/'+ userInfo["name"]+'" target="https://dmcinfo.slack.com/team/'+ userInfo["name"]+'" style="background-image: url(\''+ userInfo["profile"]["image_32"]+'\')" aria-hidden="true"></a>' +
'</div>' +
'</div>' +
'<div class="message_content ">' +
'<a class="message_sender" href="https://dmcinfo.slack.com/team/'+ userInfo["name"]+'" target="https://dmcinfo.slack.com/team/'+ userInfo["name"]+'">'+ (userInfo["real_name"] !== "" ? userInfo["real_name"] : userInfo["name"])+'</a>' +
'<span class="message_body">'+ messageText+'</span>' +
'</div>' +
'</ts-message>');
This markup takes advantage of the styles that Slack itself uses, so I didn't have to worry much about writing custom CSS to work on our homepage.
All in all, this was a pretty straightforward implementation. Slack offers plenty of documentation on how to access data, and parsing messages is simple once you start receiving them.
If you're interested in any additional details, or would like to explore options for your own SharePoint site, don't hesitate to contact DMC!