3.2 Adding a tab to the IBM Connections Home page

Previous | Next

You can add tabs to the IBM Connections Home page to provide additional information and links. For example, if you use the IBM Connections Home page as the landing page for your intranet, you can include tabs for internal or external web pages on the Home page. You can also add links to IBM Connections applications.

By default, the Home page has three tabs with these labels, as show in the screen capture:

Getting Started
The Updates tab provides a summary view.
The Search tab provides the federated search feature.

The tabs that display on the Home page are determined by a template that is located in source application files. The template can be customized by adding the necessary HTML to create the tab. The location of the template is in the "installedApps" directory of the WebSphere Application Server on which Home page is installed.

Adding a tab is essentially a simple HTML writing exercise. You create a standard HTML link that points to the desired location and wrap this link inside a list item tag. The CSS included in the page takes care of all the necessary styles for the elements and makes the tab look consistent with the other tabs. For example, the following HTML snippet produces a tab labeled IBM that links to http://www.ibm.com:

<li id="widgetTab" style="${widgetTabStyle}"><a href="http://www.ibm.com" role="button" aria-pressed="false">IBM</a></li>

Adding many tabs can alter the layout of the page or hide other elements on the page, such as the search field. If you want is to provide multiple links from a central place, consider adding one tab that loads a page containing all the links. This method allows you to categorize the links and keep the user interface consistent. Alternatively, you could add a menu item to the navigation bar. For more information about adding a menu, see 2.1 Matching the user interface to your company brand and policies and search for Adding a link or a menu to the navigation bar.

Before you begin
Turn on customization debugging capability so that you can view your changes without having to restart the IBM Connections server. For more information about customization debugging, see 1.2 IBM Connections customization variables.

Procedure
In our example, we add a tab that links to another page outside the IBM Connections Home page.

1.3 Source application files

1.2 IBM Connections customization variables

Tip

Administration

<!-- Getting Started Tab -->

<% if (selected.equalsIgnoreCase("gettingStarted")) {%>

<li id="gettingStartedTab" class="lotusSelected"><a href="javascript:void(0);" role="button" aria-pressed="true"><core:message label="${gettingStarted}"/></a></li><% } else { %>

<li id="gettingStartedTab"><a href="${pageContext.request.contextPath}/web/gettingStartedPage.action" role="button" aria-pressed="false"><core:message label="${gettingStarted}"

/></a></li><% } %>

<%-- Updates Tab --%>

<% if (selected.equalsIgnoreCase("updates")) {%>

<li id="mainTab" class="lotusSelected"><a href="javascript:void(0);" role="button" aria-pressed="true"><core:message label="${updates}"/></a></li><% } else { %>

<li id="mainTab"><a href="${pageContext.request.contextPath}/web/displayHomePage.action" role="button" aria-pressed="false"><core:message label="${updates}" /></a></li><% } %>

<%-- Widgets Tab --%>

<% pageContext.setAttribute("widgetTabStyle", "display:none;"); %>

<c:if test="${ sessionScope.isWidgetTabEnabled }"><%pageContext.setAttribute("widgetTabStyle", "display:block;"); %>

</c:if><% if (selected.equalsIgnoreCase("widgets")) {%>

<li id="widgetTab" class="lotusSelected" style="${widgetTabStyle}"><a href="javascript:void(0);" role="button" aria-pressed="true"><core:message label="${widgets}"/></a></li><% } else { %>

<li id="widgetTab" style="${widgetTabStyle}"><a href="${pageContext.request.contextPath}/web/widgets" role="button" aria-pressed="false"><core:message label="${widgets}"/></a></li><% } %>

<%-- IBM Tab --%>

<li id="newTab" style="${widgetTabStyle}"><a href="http://www.ibm.com" role="button" aria-pressed="false">New Tab</a></li>

<%-- Admin Tab --%>

<c:if test="${ sessionScope.isAdmin }"><% if (selected.equalsIgnoreCase("admin")) {%>

<li id="adminTab" class="lotusSelected"><a href="javascript:void(0);" role="button" aria-pressed="true"><core:message label="${admin}"/></a></li><% } else { %>

<li id="adminTab"><a href="${pageContext.request.contextPath}/admin/openAdminPage.action" role="button" aria-pressed="false"><core:message label="${admin}"/></a></li><% } %>

</c:if></ul><script type="text/javascript">dojo.require("lconn.core.aria.Toolbar");

new lconn.core.aria.Toolbar("pageTabs");

</script>

1.4 Publishing customizations with the wsadmin tool

The following figure shows the result. A new tab titled New Tab is added.

Parent topic: 3.0 Customizing the Home page

Article information

Category:

IBM Redbooks: Customizing IBM Connections 3.0.1

Tags:

Redbooks

This Version:

Version 1

November 21, 2011

11:10:06 AM

by Amanda J Bauman IBMer

Attachments (0)

Versions (1)

Comments (0)

Copy and paste this wiki markup to link to this article from another article in this wiki.

Link:

Version ComparisonCompare version with version
	Version	Date	Changed by	Summary of changes
	This version (1)	Nov 21, 2011 11:10:06 AM	Amanda J Bauman