Links in Tables

The Table tutorial will not be available for awhile, so here is a mini-tutorial on putting links in tables. It is another quick and dirty tutorial that assumes you know how to do things like bind to database tables and add bean properties.

  1. Drop a Table component on the page. Bind it to the Order > Tables > PRODUCT_TBL database table.

  2. Right-click on on the table and choose Table Layout.

  3. Have the table display the PRODUCT_NUM, PRODUCT_CODE, and DESCRIPTION.

  4. Select the PRODUCT_TBL.PRODUCT_CODE item in the Selected listbox.

  5. Choose Hyperlink from the drop-down list for the Component Type.

  6. Click OK.

  7. Double-click one of the abc text strings that appears in the column for the PRODUCT_CODE. The IDE adds a hyperlink1_action() method and opens the Java source at that method.

  8. Replace the method's body with the following code:
      return hyperlink1.getText().toString();  
  9. Click Design to switch to the Visual Designer.

  10. Right-click and choose Page Navigation.

  11. In the Page Navigation editor, right-click and choose New Page. Accept the default page name. Repeat until you have 6 pages in all.

  12. Drag from Page1.jsp to Page2.jsp. Type HW (name the link HW) and press Enter. Repeat for pages 3 through 7, naming the links SW, FW, BK, CB, and MS respectively (these are the product codes that the hyperlink's action method returns). You can cheat and just add pages 2 and 3. Just don't expect the other links to work.

  13. Go back to the source for Page1 and make sure the action method is still the same.

  14. Run the project and see if the links work. You might want to put values in the title property for each page convince yourself that the links are going to the right pages.

Let's say that you do not want to show the product code in the table, but you instead want the descriptions to be links to the detail pages and the detail page for a product still be different depending on the product code. Here is how you would do that.

  1. First add a String property to the request bean and name it productNum. (Right-click on Request Bean in the Projects window and choose Add > Property to open the dialog box for adding a property).

  2. In the Visual Designer for Page 1, right-click on the table and choose Table Layout.

  3. Select PRODUCT_TBL.PRODUCT_CODE and click the < button to move the product code from Selected to Available. This action removes that column from the Table component.

  5. Choose Hyperlink from the drop-down list for the Component Type.

  6. Click OK.

  7. Double-click one of the abc text strings that appears in the column for the PRODUCT_DESCRIPTION. The IDE adds a hyperlink action method and opens the Java source at that method. (While you are here, check to make sure the IDE removed the old hyperlink action method.)

  8. Replace the body of the method with this code:
           // Find out what row was clicked
           RowKey rowkey = tableRowGroup1.getRowKey();
           // Save product number so detail page knows what product to
           // provide detail info for
               "PRODUCT_TBL.PRODUCT_NUM", rowkey).toString());
           // Go to the detail page for that product's type
           return product_tblDataProvider.getValue(
  9. Right-click and choose Fix Imports. You might see a red squiggly line under the statement that calls getProductNum. This should go away after you build the application. Sometimes the synchronizer doesn't notice changes to the request bean until you compile all the files.

    Run and test.

Now, let's say that you only want people to go to detail pages for HW and SW.

Here is how to disable the links for all other product codes.

  1. Add this code to the Java source for Page1:
        private boolean linkDisabled;
        public boolean isLinkDisabled() {
            String productCode = product_tblDataProvider.getValue(
            if (productCode.equals("HW") ||
                    productCode.equals("SW")) {
                return false;
            } else {
                return true;
  2. In the Properties window for the hyperlink, click the (...) button for the disabled property.

  3. Click Use Binding. Click the Bind to an Object tab. Select Page1 > linkDisabled.

  4. Click OK.

  5. Run and Test.

What if you only had two types of detail pages, one detail page for HW, SW, and FW and one detail page for all the other product codes. How would you do that? See if you can make it happen.

Thanks to Felix and Fredrik who motivated me to write this blog entry.


i really like the GUI layout and colors :) and thanks for the tip.

Posted by afsina on January 14, 2006 at 01:01 PM PST #

Hello, thank you very much for this very good tutorial. It helped me a lot. I'm not sure if I was the one who motivated you to write this blog, but I posted the corresponding question in the EA-Forum. So maybe you have to correct my name from Fredrik to Felix :-) If I'm wrong, I have to become less self-absorbed... Ah and I found a typo: "First add a String property to the session bean and name it productNum..." -> has to be 'request bean' instead of 'session bean' to be consistent with the remaining text. Greetings, Felix

Posted by Felix Dreher on January 17, 2006 at 02:18 AM PST #

Thanks for the request bean correction. You are correct that your forum post motivated me to write the part about conditional links. I added you the acknowledgements.

Posted by Chris on January 17, 2006 at 02:44 AM PST #

Thank you! There is very little information out there on how to handle links in JSF tables. This was very helpful.

Posted by Rob Castellow on January 15, 2008 at 07:21 AM PST #

Post a Comment:
Comments are closed for this entry.



« July 2016