Hiding navigation on web page when printing

When printing a web page, we want to maximise the content area for printing. To do this, I want to hide the navigation area when user is printing the page.

For example in a page, there are 3 area, header, left navigation and content.

<div id="header">header</div>
<div id="nav">Left navigation</div>
<div id="content">Content area</div>

When user click on print, only the content area is printed. This can be control using a seperate CSS to hide certain area when printing.
The sample is below.

Add the css link in the page. The media type = "print".

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

In print.css

#header{display:none}
#nav{display:none}

This would hide the header and the nav div tag when printing.

Portlet Factory 6.1.2

Portlet Factory 6.1.2 is out. You can get the 60 days trial version here.
It looks like 6.1.2 is a new version and not an upgrade or fixpack for PF 6.1.

Highlighted Selected Content in Menu - WebSphere Content Management System

In a WebSphere Portal page, I inserted a few Web Content Viewer portlets. The top portlets shows a menu list the content. The bottom portlet will display the selected content from the list. The issue I had was highlighting the selected content in the menu.

From the forum, there were some suggestions but it didn't work for my case.

I manage to solve it by using the Content ID. The idea is, when the content is loaded, it can find which link in the menu is selected by the Content ID. Thus you can add in code to change the attributes.

In the menu component, I add in a class which is the content ID into the links.

<A HREF="<Placeholder tag="href"/>" class="<Placeholder tag="Idnum"/>"><Element context="autoFill" type="content" key="headline"/></A>

Then in the presentation template I added dojo code to put in another class into the selected content.

<script>
dojo.addOnLoad(function(){
dojo.query(".<IDCmpnt context="current" type="content" field="id"/>")
      .addClass("selectedContent")
});
</script>
<style>
.selectedContent{color:black;font-weight:bold;}
</style>

Thus when the content is loaded, it will search the page for the class <Idnum> and add in the class selectedContent. For the Idnum here, I use a class instead of id because in certain pages, there are more than 1 links to the same content.

Prepend javascript to an action button - Portlet Factory

I am creating a form, which is submitted and a thank you page is display. Only the Form section is change to Thank You after submission, without refreshing the whole page.

I used a Button builder and set that in the Post-Action Behavior. The issue that I had was when submitting, the button stays active. If the connection is fast, it does not matter but when I was working at a slow connection place, when submitting, it takes a few seconds before the Thank you page shows but the button is still active.

The button calls an action. I want the button to run additional Javascript before running the action. From the forum, I manage to find the solution.

The HTML Event Action can be used. Select the location you want to insert the javascript. Action type, I use "Run a script". Then put in the javascript. In Advance, use Prepend new value.



This is very useful to add in more actions before the button action is triggered.

Marking portal pages as hidden under the content root

In WebSphere Portal, when creating a new page under content root, it will be shown on the quick links navigation.
If you do not want a page that you create to appear in the main menu, you can hide the page. You can use own customize links or navigation to access the page via direct URL mapping.

To hide the page, it can be done through WebSphere Portal XML configuration interface. You do this by setting the hidden flag for the page parameter for the content-node tag in XML. You can use the following XML snippet:

<request xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="PortalConfig_1.4.xsd" type="update" create-oids="true">
<portal action="locate">
<content-node action="update" uniquename="com.mypage" active ="true">
<parameter name="com.ibm.portal.Hidden" type="string" update="set"><![CDATA[true]]></parameter>
</content-node>
</portal>
</request>

Make sure the uniquename is correct. You can get further details here.

This is a lot of work to achieve a simple thing. Wouldn't it be great if there's an option at the page property to hide or show it in the navigation.

Happy Deepavali

Happy Deepavali to all Indians.

My Wife blog

My wife, Trista started blogging. And also complaining that I'm away from her for a few months. Currently in Denmark working on WebSphere Portal project. Will be back Malaysia soon.

Her blog is here.