Adding a status bar to the Simple Theme | HCL Digital Experience
The status bar is an optional feature that displays system messages.
About this task
The status bar displays error, warning, and informational messages at the beginning of the page. For example, if you try to add restricted content to a page, a message appears in the status bar that explains the restriction. By default, the Simple Theme does not include the status bar, but you can add one in a new custom dynamic content spot.
Procedure
- Create a WAR file by opening Eclipse and clicking .
- Create the following directory structure beneath your WebContent directory: WebContent/themes/html/YourResourceRootDirectory. The resource root directory is referenced in the XML file that you use to deploy your new WAR file. In this example, the resource root directory is customDynamicSpots.
-
Create a status JSP by using the following sample code:
<%@ page session="false" buffer="none"%> <%@ page trimDirectiveWhitespaces="true"%> <%-- The div in which the statusbar prints out any message it receives --%> <div class="wpthemeInner"> <div id="wpthemeStatusBarContainer" class="wpthemeStatusBarContainer"> <%-- Renders a message in the status bar alerting the user that javascript is disabled. Javascript is required for the statusbar to work --%> <noscript> <div class="wpthemeMessage" role="alert" wairole="alert"> <img class="wpthemeMsgIcon wpthemeMsgIconError" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Error" /> <span class="wpthemeAltText">Error:</span><div class="wpthemeMessageBody"> Javascript is disabled. You need to enable javascript in order for this theme to operate properly.</div> </div> </noscript> </div> </div>
-
Create a plugin.xml file in your WebContent directory by using the following sample
code:
Note: This sample code uses the dynamicContentSpots directory, which holds the JSP file.
<?xml version="1.0" encoding="UTF-8"?> <plugin id="com.yourcompany.customtheme" name="Custom Theme Modules" provider-name="Your Company" version="1.0.0"> <extension id="wp_dynamicContentSpots_custom" point="com.ibm.portal.resourceaggregator.module"> <module id="wp_dynamicContentSpots_custom"> <contribution type="dyn-cs"> <sub-contribution type="markup" ref-id="theme_status"> <uri value="mc:wp_status_bar@res:{war:context- root}/themes/html/customDynamicSpots/status.jsp"/> </sub-contribution> </contribution> </module> </extension> </plugin>
- To create the WAR file, right-click on the project and select .
-
Install the WAR file.
- Log in to the WebSphere® Integrated Solutions Console.
- Click Install. . Then, click
- Select your WAR file and click Next.
- Select Fast Path and click Next.
- Click Next to accept the default settings that are presented in next several pages. Stop when you reach the page entitled Map context roots for web modules.
-
On the page entitled Map context roots for web modules,
set your context root. You will refer to this context root when you deploy the
WAR file. In this example, the context root is
/custom-dyn-cs
. - Save your changes. From the list of applications, select your WAR file and click Start.
-
Deploy the WAR file by creating a new XML file. You can use the following sample
code to create the file:
- Add the new module to your profile.
-
Add your new custom dynamic content spot to the theme template as the first element
in the MainContent directory by using the
following code string:
<a rel="dynamic-content" href="dyn-cs:id:theme_status"></a>
.