Categories

Displaying Slack Channels in SharePoint

Displaying Slack Channels in SharePoint

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.

Image of DMC's Slack display in the SharePoint intranet

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. 

Slack SharePoint Bot

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!

Comments

sarath kumar
# sarath kumar
This is a very nice article. But can you guide me with clear code to step by step pls and I need to show attachments like images and videos and files posted in the channel and if I am posting from SharePoint online site it's better? Please make me a reply soon, I hope I will get the reply soon.

Thanks
Sachin Jain
# Sachin Jain
Hi Jordan,

This is very nice article and it is really very use full for me.
i have implemented the text messages but i am not able to show shared Images and Video from Slack to my sharepoint site.

Please suggest me how can we show images and video on sp site.

Post a comment

Name (required)

Email (required)

CAPTCHA image
Enter the code shown above:

Categories

Related Blog Posts