Socialize Me: How To Add Lotus Connections Search to Portal Navigation

Monday, March 14, 2011

How To Add Lotus Connections Search to Portal Navigation

I recently stumbled upon a quick interesting tip in one of our internal blogs which I thought would be extremely valuable to share externally. The tip documents how to embed the Lotus Connections search into the navigation for WebSphere Portal. And by looking at the code snippet below, this could also serve as a launching pad to embed Connections search into other pages regardless of the technology behind them.

So here's our goal:

The following code snippet was added into the Portal JSPs:

<%-- Renders the search widget in the banner --%>
<div class="lotusSearchContainer">
<div id="themeSearchBoxContainer" class="wptheme-searchBoxContainer">
<div id="themeSearchBox"></div>
</div>

<script type="text/javascript">
    dojo.addOnLoad(function() {
        var c = {};
        c.connectionsUrl = "${wp.themeConfig['resources.urls.connections_base']}";
        c.proxiedConnectionsUrl = "${wp.themeConfig['resources.urls.connections_base.proxied']}";

        dojo.registerModulePath("lconn.core.SearchBar", c.proxiedConnectionsUrl
                + "/homepage/script/lconn/core/SearchBar");
        dojo.registerModulePath("lconn.core.TextBox", c.proxiedConnectionsUrl + "/homepage/script/lconn/core/TextBox")
        dojo.require("lconn.core.TextBox");
        dojo.require("lconn.core.SearchBar");

        var fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", c.proxiedConnectionsUrl + "/homepage/nav/lconn/styles/sprite-lconn.css");
        document.getElementsByTagName("head")[0].appendChild(fileref);

        var searchBar = new lconn.core.SearchBar(
                {
                    globalOptions : [ {
                        label : "Activities",
                        feature : "activities"
                    }, {
                        label : "Blogs",
                        feature : "blogs"
                    }, {
                        label : "Bookmarks",
                        feature : "dogear"
                    }, {
                        label : "Communities",
                        feature : "communities"
                    }, {
                        label : "Files",
                        feature : "files"
                    }, {
                        label : "Forums",
                        feature : "forums"
                    }, {
                        label : "Profiles",
                        feature : "profiles"
                    }, {
                        label : "Wikis",
                        feature : "wikis"
                    } ],
                    searchContextPath : c.connectionsUrl + "/search",
                    lblSearch : "Search",
                    lblSelectScope : "",
                    lblAllConnections : "All Connections",
                    lblAdvanced : "Advanced",
                    _blankGif : c.proxiedConnectionsUrl
                            + "/homepage/static/20101018.200549/nav/common/styles/images/blank.gif",
                    onSubmit : function() {
                        return true;
                    }
                }, dojo.byId("themeSearchBox"));
    });
</script></div>

In this case, c.connectionsUrl and c.connectionsUrlProxied point to the absolute URL of the connections server and the same but proxied through the WPS AJAX proxy. We generate the values of these at JSP execution time from a config variable in WAS admin console, but of course you can hard-code these if you wish. In our case the URLs look something like this:

c.connectionsUrl = "http://connections.company.com"

c.connectionsUrlProxied = "/wps/proxy/http/connections.company.com"

Thanks to the guys at ISSL for doing this.