Screwing With The IBM Connections Activity Stream

Customising the IBM Connections experience is a growing field, and the activity stream seems to be one of the most popular area for those customisations to take place…

It all started with this [blog entry: I love it! embed.ly in IBM Connections](http://www.lbenitez.com/2011/06/i-love-it-embedly-in-ibm-connections.html ) by Luis Benitez and a clients need to not use a third party library with associated API calls to generate their updates, and ended with a bit of swearing and chunk of JavaScript.

So what we want to do is loop thought all the status updates on any given connection page, and if we find a suitable bit of text i.e. a url we are going to pop that URL in an Iframe, but basically we could do anything we wanted

First lets steal most of the install instructions from Luis’s posting (these work for both V4 and V5 of connections)

• If it is not already there, copy footer.jsp to the customization directory. e.g., copy <WAS_PROFILE_ROOT>/installedApps/Activities.ear/oawebui.war/nav/templates/footer.jsp to <IC_INSTALL_ROOT>/data/shared/customization/common/nav/templates †
• Repeat for header.jsp e.g, copy <WAS_PROFILE_ROOT>/installedApps/Activities.ear/oawebui.war/nav/templates/header.jsp to <IC_INSTALL_ROOT>/data/shared/customization/common/nav/templates
• Switch to the <IC_INSTALL_ROOT>/data/shared/customization/common/nav/templates directory ‡
• Edit header.jsp
• At the beginning of the file, look for the last <div class=”lotusRightCorner”> Just before that, add the following code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

– Save and close the file
– Edit footer.jsp
– Scroll to the bottom of the file and now its time to add our own code

<script type="text/javascript">    
var customEmbed = {
    invoke: function(){
        //First Lets look for all the activity post contents and loop though them
        $(".lotusPostContent").each(function() {
        // we are looking for a youtube url in this example with regular expressions
        var pattern1 = /(http://)?(www.youtube.com|youtu.?be)/; 
        var testhtml = $(this).html();
            //As we are continusly looping thought the page content we dont want to embed the extra content twice
            //So im checking to see if there is already an iframe in the post content, also im looking to see if the html
            //at the start of the .lotusPostContent contains a vcard class, as that means that is not a real post but 
            //rather a "this posts was made by User X" kind of thing and can be ignore else you get mad nested updates
            if (pattern1.test(testhtml) && testhtml.indexOf("iframe") == -1 && testhtml.indexOf("<span class="vcard">") != 1) {
                $(this).append(customEmbed.addhtml($(this).html()));
            }       
        });        
    },
    addhtml: function(html){
        var pattern2 = /(http://)?(www.youtube.com|youtu.?be)/; 
        var srcrul = html.match(pattern1);
        //here we have used match to get the url we want so that we can stuff it into the iframe
        return '<div><iframe width="500" height="600" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling="no"src="' + srcrul[0] + '" ></iframe></div>'7;
    }
}
setInterval(function(){
    customEmbed.invoke();
},4000);
// I find that a 4 second loop is about right for this kind of thing
</script>

#####Notes:
– I’m using a setInterval vs a setTimeout, because some page navigation in connections only requests an update to the central pane not the footer and also we want items to update on the basis of user actions.
– I using $(this).append rather than directly updating the html as Connections uses a load of dojo attach for its social functions such as “like” buttons and messing with the HTML directly brakes these.
– The best place to test your Regular expresions is at [https://regex101.com](https://regex101.com/#javascript)
There you go, the template to do anything you want with status updates

† <WAS_PROFILE_ROOT> is where the profile for your app server is located, normally in windows somthing like X:IBMWebSphereAppServerprofilesAppSrv01
‡ <IC_INSTALL_ROOT> is where you installed connection on windows normally somthing like X:IBMConnections