Introduction

Large enterprise companies normally have enormous amounts of information to communicate to their employees and partners. Users may want to customize their views of information based on their own preferences. For example, an employee might be interested in reading only the news about his or her business unit, while a manager or executive will probably want to see a broader scope of information across business units. WebSphere Portal V5 (Portal) provides pages and portlets to organize and present information, but they are either fixed or require some knowledge of portal administration. This article describes how you can develop a dynamic View Picker portlet to extend the existing portal usability, and provide novice users with a simple and intuitive view for selecting portal pages and portlets according to their interests.

Below is an example of a View Picker portlet for news.

Back to top

Designing and Implementing a View Picker Portlet

Before we get into the design, we need to understand how Portal allows users to control access to resources. The following steps show how to create a page named Test with the view access for a user's group named Test.

1. Log in as Administrator. For example, the user id is wpsadmin and the password is wpsadmin.
2. Select Administration, Access, Users and Groups, then New group to create a group named Test.
   Figure 2. Create New Group
   
   
3. Enter group name as Test and click OK.
4. Find and select the newly created entry Test in the group list.
5. Select New user and enter User ID and Password as test123. Set other required fields to any values you prefer. Click OK
   Figure 3. Create New User test123
   
   
6. Select Portal User Interface, Manage Pages, My Portal, then New Page to create a new page.
   Figure 4. Create New Page
   
   
7. Enter the page title as Test and click OK, then OK again to get back to the page list.
8. Find the newly created entry Test and select the key icon on the right to set page permission.
   Figure 5. Set Page Permission
   
   
9. Select Edit Role for the User entry, then Add to add the group Test.
10. Select the checkbox for the Test group, then click OK, and then Done.
    Figure 6. Add Test Group to User Role
    
    
11. Uncheck Allow Propagation and Allow Inheritance for the Privileged User entry, then click OK. This removes the all authenticated portal users group from the Privileged User role.
    Figure 7. Uncheck Privileged User
    
    
12. Select Log out and then Log in as user ID test123 and password test123.
13. Now, you should be able to view the page named Test on the page row. If you don't see it, click the right arrow button; the rest of the pages including the page Test should be visible.
14. If you would like to disable view access for the user test123, all you need to do is log in as Administrator and remove the member test123 from the group Test, and then log out and log back in as the user test123.

The concept of resource permission is simple. In order for a user to view a resource, the user must be in a group that has been assigned a role that has the View access. In the portlet design, we'll apply the same rule. A View.jsp is provided for the user to select his or her interested resources--either pages or portlets. Each resource is assigned a group by the Administrator during set-up. When the user submits the page, depending on the previous state of the selection, the portlet will add or remove the membership of the login user ID to or from the assigned groups. Following are the key points of the design:

• Resource groups are created using Websphere Portal administration to keep them more portable. Only names are involved, not the underlying LDAP attributes. For this reason, a naming convention for group names is defined. In this example, we use placegroup, pagegroup, and portletgroup as the prefixes of the group names for the top-level pages, the second-level pages, and portlets, respectively. For flexibility, the prefix string is defined in a portlet-specific configuration input parameter. When the portlet is initially loaded, it finds all the group names with the specified prefix and saves them in a cache. Since multiple portlet instances may be deployed on the same portal, another configuration parameter, instance ID, is used to differentiate the cache. The following figure shows the construction of the cache:
  Figure 8. Resource Group Cache
  
  
• When the View.jsp is submitted, the portlet reassigns the user membership to the newly selected groups. The following code example shows how this is done.

  //get user id String id = request.getUser().getID(); . . //add id to the selected group gp Principal principal = (Principal)UserManager.instance().findById(id); boolean done = gp.add(principal); GroupManager.instance().sync(gp); . . //remove id from the selected group gp Principal principal = (Principal)UserManager.instance().findById(id); boolean done = gp.remove(principal); GroupManager.instance().sync(gp);

  
  
• A property file is used to associate the group name with the more descriptive text. It also provides international language support by holding translated text for other languages.

  # ---------------------------- # # Resources for Picker Portlet # # ---------------------------- # # # resource title # text.placegroup.title = Top-level Pages text.pagegroup.title = Second-level Pages text.portletgroup.title = Portlets text.placegroup.newsstand.title = Newsstand text.pagegroup.national_news.title = National News text.pagegroup.corporate_news.title = Corporate News text.portletgroup.cbs_news.title = CBS News text.portletgroup.cnn_news.title = CNN News text.portletgroup.nbc_news.title = NBC News text.portletgroup.cat.title = Caterpillar News text.portletgroup.ibm.title = IBM News text.portletgroup.ge.title = General Electric News

  
  

Back to top

A Step-by-Step Example

To demonstrate how this works, we will set up an example called Newsstand, which contains two types of news: National News and Corporate News. The National News page contains NBC News, CBS News, and CNN News. The Corporate News page contains IBM News, Caterpillar News, and General Electric News. The following steps show how to do this:

1. Log in as Administrator.
2. Follow the example from the previous section to create a new user test123 in a new group named Test.
3. Create the following groups to represent the news resources.
   Figure 9. Group 1
   
   
   Figure 10. Group 2
   
   
4. Download the ViewPicker5.war file and install the View Picker portlet.
5. Select Administration, Portlets, then Install.
6. Enter the file path of ViewPicker5.war in the Directory field.
7. Click Next, then Install to complete the installation.
   Figure 11. Install View Picker Portlet
   
   
8. To demonstrate the effect of news portlets, the Web Page (iFrame) portlet is used. Download the webPage.war and install the portlet.
9. Select Manage Portlets, Web Page, Copy, and then Modify Parameter to clone a news portlet named News NBC.
10. In order to be able to distinguish each news portlet, make sure you select set title for selected locale and change the title from Web Page to News NBC.
11. Finally, select Activate/Deactivate to activate the NBC News portlet.
    Figure 12. Copy WebPage Portlet
    
    
12. Follow the same steps to clone rest of the news portlets, CBS News, CNN News, IBM News, Caterpillar News, and General Electric News.
    Figure 13. Create News Portlets
    
    
13. Following the example of the previous section, create a new page named Newsstand under My Portal to hold two new pages: National News and Corporate News. Also, create a new page named View Picker to host the picker portlet.
    Figure 14. Create Newsstand, National News, and Corporate News pages
    
    
14. Set the page permissions for the Newsstand, National News, Corporate News, and View Picker pages. Uncheck the Allow Propagation and Allow Inheritance selections for the Privileged User entry, and then click OK. This removes the all authenticated portal users group from the Privileged User role.
15. Select Edit Role for the User entry, then Add to add a specific page group to the User Role of each page as shown below:

    Page	Group
    Newsstand	placegroup-newsstand
    National News	pagegroup-national_news
    Corporate News	pagegroup-corporate_news
    View Picker	Test

    Note that for page Newsstand, the Allowed Propagation checkbox on the User entry also needs to be unchecked so that the placegroup-newsstand will not be propagated to child-level pages.

16. Assign each news group to each news portlet as follows:
    1. Select Access, Resource Permissions, and then Portlets.
    2. Enter News in the Search For: field to find all the news portlets.
    3. Locate each news portlet that we created earlier, select Assign Access, and then Edit Role of the User entry.
    4. Select Add to add a news group, for example, group portletgroup-cbs_news is assigned to portlet CBS News, and so on.
17. Follow the exact same procedure and add the User Role of the View Picker portlet with the Test group.

    Portlet	Group
    NBC News	portletgroup-nbc_news
    CBS News	portletgroup-cbs_news
    CNN News	portletgroup-cnn_news
    View Picker	Test

18. Select Portal User Interface, Manage Pages, and locate the View Picker entry.
19. Select the Edit Page Layout icon on the right.
20. Select Add portlets, check the View Picker portlet, and then click OK and Done.
    Figure 15. Add View Picker Portlet
    
    
21. The final step is to add news portlets to both the National News and the Corporate News pages. Instead of following the previous step, you can also select the wrench icon on the top right to show tools.
22. Select Newsstand, National News, and then Edit to add national news portlets.
    Figure 16. Edit National News Page
    
    
    Figure 17. Add National News Portlets
    
    
23. Select the Edit icon to add the URL to each national news portlet. For example, enter in http://cnn.com for CNN News, http://cbs.com for CBS News, and http://nbc.com for NBC News.
24. Follow the exact same steps to add news portlets to the Corporate News page. Fill in http://ibm.com for IBM News, http://caterpillar.com for Caterpillar News, and http://ge.com for General Electric News.
25. Now, let's test our View Picker portlet. Log in as user test123. Select the View Picker page and make sure all checkboxes are checked. Log out and log back in to validate the Newsstand page. You should be able to view all six news portlets.
    Figure 18. National News Page
    
    
    Figure 19. Corporate News Page
    
    
26. Select the View Picker page and uncheck CBS News and General Electric News. Log out and log back in. CBS News and General Electric News should no longer be visible.
27. Finally, let's uncheck the National News checkbox. Log out and log back in to view the Newsstand page. Only Corporate News page is visible.
    Figure 20. Uncheck National News Page
    
    

Back to top

Conclusion

The purpose of the View Picker portlet is to demonstrate the fundamental concept of resource authorization. By associating resources with the groups, developers can provide a more intuitive user interface for novice users. Future enhancements can be made to provide a builder tool to reduce the complexity of the set-up by automating the creations of View Picker portlets for different purposes.

Back to top

Acknowledgments

I'd like to thank David Tai for initiating the discussion of Portal authorization and leading my solution to a potentially better user interface as presented in this article. I'd also like to thank Brad Bouldin for taking time to review the article.

Back to top

Downloads

Name	Size	Download method
ViewPicker5.war	21KB	FTP|HTTP
ViewPicker42.war	21KB	FTP|HTTP
webpage.war	51KB	FTP|HTTP

Information about download methods

Resources

• IBM WebSphere Portal Family
  
  
• IBM WebSphere Portal for Multiplatforms Version 5.0 InfoCenter
  
  
• IBM WebSphere Portal for Multiplatforms Version 5.0 Portlet API Javadoc
  
  
• IBM WebSphere Portal for Multiplatforms Version 4.1 Portlet Development Guide
  
  

About the author

Fetchi Chen is a consultant for IBM Software Services for WebSphere in Austin. He has over 20 years of software development experience. He has designed system software and has delivered solutions to many companies within different industries. He is an IBM-certified solution developer for WebSphere Portal and a Sun-certified Enterprise Architect for J2EE. Fetchi earned his Masters degree from Penn State University.

Rate this article

Comments

Back to top

Table of contents

• Introduction
• Designing and Implementing a View Picker Portlet
• A Step-by-Step Example
• Conclusion
• Acknowledgments
• Downloads
• Resources
• About the author
• Comments

Next steps from IBM

• Try: WebSphere Portal Express
• Briefing: WebSphere flexible business processes
• Buy: WebSphere Portal Express

Dig deeper into WebSphere on developerWorks

Try IBM PureSystems. No charge.

Experience today!

---

Get started with the cloud-based trial and pattern development kit.

Special offers