Creating complex portlet Personalize pages using the IBM WebSphere Portlet Factory Customizer builder

The IBM® WebSphere® Portlet Factory Portlet Customizer builder can be used to rapidly build a user interface for portlet configure and edit modes. This article takes you through the steps necessary to use this builder, in conjunction with other builders, to create an edit mode model in WebSphere Portlet Factory that allows the user to customize the portlet’s behavior.

Ying Du (ying_du@us.ibm.com), IT Specialist, IBM

Ying Du is an IT Specialist for IBM Software Services for Lotus, based in the Washington, D.C. area. She works with IBM WebSphere Portal in both infrastructure and application development capacities. You can reach Ying at ying_du@us.ibm.com.



08 July 2008

IBM WebSphere Portal Server V6.0 requires you to implement several predefined modes, which include configure, view, edit, edit default, and help modes. A portlet’s view mode is the runtime mode. Using a portlet’s edit mode, you can offer users various customizations that are relevant to the portlet, allowing each user to change per-user portlet preferences and personalize the portlet's look and feel. When implementing a portlet’s edit mode, you must determine what features the user might want to customize and then develop an appropriate edit mode page view. The portlet’s view mode must also implement behavior to respond to changes in settings made using the portlet’s edit mode.

The Portlet Customizer builder in IBM WebSphere Portlet Factory V6.0.1 is used to create edit and configure mode page views. This builder is easy to use with basic field types such as TextInput, Checkbox, RadioBox, Select, and TextArea. Some business situations require a portlet to define complex edit mode pages; for example, users might want to select options from one drop-down list and move them to another drop-down list, or they might want to use color picker inputs. Additionally, there are times when a user interface (UI) designer can give you prebuilt HTML for a portlet’s edit and configure modes; in that case, it's easier to import those pages instead of creating your own. This article covers the steps you take to address this scenario, using a sample portlet (see the file in the Downloads section of this article).

Prerequisites

To develop the sample portlet in this article, you need to install WebSphere Portal Factory Designer V6.0.1, which can be installed into Eclipse 3.1, 3.2, 3.2.1, or later, or into IBM Rational® Application Developer 6.0 or later. You should install WebSphere Portal Server V6.0 so that you can test the application locally. This article assumes that you are familiar with WebSphere Portlet Factory and have a basic understanding of portlet development concepts.


Portlet modes

A portlet mode defines the current state of the portlet and the way users interact with it. The portlet modes that are available for a given user depend on the permissions assigned to that user, the device used to access the portlet, and the configuration and implementation of the portlet. All portlets support the default, or View, mode. You can optionally implement other portlet modes depending on the portlet’s requirements. Edit mode lets users change any configuration settings published by the developer to personalize the portlet by clicking the Personalize button in the portlet’s title bar. Note, however, that users can get into edit mode only if the administrator has granted them Privileged user access to that portlet.


About the Portlet Customizer builder

The Portlet Customizer builder lets you override the default UI of a portlet’s configure and edit modes by using a custom WebSphere Portlet Factory model with which users can configure and personalize the portlet. A portlet’s edit mode uses profiles to personalize the portlet. Profiles are a set of parameters that are used to dynamically generate a personalized view mode, whereby one set of code produces a customized presentation, structure, and flow depending on the user’s roles and personalization settings.

When users click the Personalize button in a portlet’s title bar, the portlet goes into edit mode and displays a page view based on the Portlet Customizer builder. The edit mode page view lets users apply a WebSphere Portlet Factory profile or set of profile values. You can use this builder to limit the profile entries displayed and to specify the UI controls used to set profile values.


About the sample application

The sample included with this article illustrates the following scenario:

A portlet displays data from a Microsoft® Excel spreadsheet. Users can configure the portlet to display user-selected columns in a certain order and can also configure alerts. For example, users might want to highlight the rows that contain certain values in a particular column. Figure 1 shows an example in which the rows with a TITLE field equal to VP are highlighted in blue.

Figure 1. Sample alert highlighting rows containing VP
Sample alert highlighting rows containing VP

The UI of the portlet’s edit mode includes two tabbed pages. The Columns tab provides two drop-down lists that let users select which columns in the database to display and in which order (see figure 2).

Figure 2. Edit mode Columns tab
Edit mode Columns tab

The Alerts tab includes two radio buttons and two drop-down lists from which users can select the field on which to set an alert, specify the value that triggers the alert, and specify the color to use when highlighting the row. Users can also select not to set alerts (see figure 3).

Figure 3. Edit mode Alerts tab
Edit mode Alerts tab

Our sample includes three models: a data provider model, a portlet model, and a portlet edit model. The data provider model provides access to a data source, the portlet model implements a UI for the portlet’s view mode, and the portlet edit model provides the UI for the portlet’s edit mode.


Create a project

Let's begin by creating a new WebSphere Portlet Factory project:

  1. Name the new project EditModeSample.
  2. Use the default value in the New WebSphere Portlet Factory Project wizards.
  3. Add the Excel Extension feature set (see figure 4).

    Figure 4. Add feature sets
    Add feature sets
  4. Next, you are prompted to specify a deployment configuration. Enter the deployment configuration settings relevant to your testing environment. For convenience, you can select the Auto Deploy option that automatically deploys the portlet WAR to your local test server. Click Finish.

Import resource files

This sample requires resource files that are available using the provided download link. The following steps add the necessary resources to your project:

  1. Create a folder in the WebContent folder, and name it sample_ui.
  2. Download the codesample.zip file using the download link.
  3. Unzip it to a temporary folder.
  4. Import the following resource files from the temporary folder to the sample_ui folder that you created in step 1:
    • Alerts.html
    • Columns.html
    • default_tabbedcustomizerpage_horizontal.html
    • EditPage.css
    • editpage.js
    • vcard.xml
    • vcard_gridtable.css
    • vcard_gridtable.html

Create the data provider

You begin the portlet implementation by creating the data provider model. The model is used to access a data source, which in this case is a Microsoft Excel spreadsheet:

  1. Right-click your project and select New - WebSphere Portlet Factory Model.
  2. Select your EditModeSample project, and click the Next button.
  3. Select Empty for your factory starter model.
  4. Create a folder for the model named Vcard using the Enter field or select the folder field, as shown in figure 5.
  5. Enter ExcelProvider for the model name; click Finish to create the new model.

    Figure 5. Save New Model screen
    Save New Model screen

Add the builders to the data provider model

You proceed with the implementation of the data provider model by adding builders to it. Builders are reusable software components that provide the foundation for all WebSphere Portlet Factory-based projects.

  1. First, add an Excel Import builder (see figure 6), and enter the following builder fields:
    • In the Name builder field, enter ExcelVCard.
    • In the File To Import builder field, select file /sample/ui/vard.xls.
    • Select Automatic for the Content Selection Method builder field.
    • Select Sheet1 for the Sheet builder field.
    • Select the Has Header Row builder option.
    Figure 6. Excel Import builder
    Excel Import builder
  2. Now, add a Service Definition builder by entering these values into the builder fields:
    • In the Service Name builder field, enter ExcelService.
    • Select the Add Testing Support builder input option, which creates a testing harness that lets you interactively test the service without needing to create a service consumer.
    • Select the Generate Main builder input option.
  3. Add a Service Operation builder by entering the following builder fields:
    • In the Data Service builder field, select ExcelService.
    • In the Operation Name field, enter GetVCards.
    • In the Action to Call builder field, select DataServices/ExcelVCard/execute.
    • Select No inputs for the Input Structure Handling builder field.

You can leave the remaining builder fields set to their default values. Test this model using a launch configuration appropriate to your testing environment.


Create a portlet model

We now add a portlet model to the project. This portlet acts as a service consumer of the service provider created in the previous steps. The portlet’s view mode is designed to display a table of data. Some builders in this model are profile-enabled, meaning that the builder input values for those builders could be set during run time, if a user updates his or her portlet preferences in edit mode. For example, Profiles control which columns are displayed and which rows are highlighted.

  1. Create a new model under WEB-INF/models/Vcard named VCardPortlet.
  2. Add a Service Consumer builder (see figure 7). This builder is used to consume data from the service from the data provider that you just created. Configure the Service Consumer builder using the following builder fields:
    • Enter VCards in the Name builder field.
    • In the Provider Model builder field, select Vcard/ExcelProvider.
    • Select the Add All Provider Operations builder option.
    Figure 7. Service Consumer builder
    Service Consumer builder
  3. Add a View & Form builder to display the data from the spreadsheet. This builder is used to display the results of a service or method call. Enter the following values into the appropriate builder fields:
    • Enter ViewPage in the Name builder field.
    • Select DataServices/Vcards/GetVCards using the View Data Operation builder field.
    • Select the Generate Main builder option under the Advanced settings.
    • Leave all other builder fields set to their default values.
  4. Add a Data Column Modifier builder. This builder is used to control the look and feel of the data table displayed on the page; it is profile-enabled to support user-customized displays. Users update the Profile values by placing the portlet into edit mode. Enter the following builder fields into the Data Column Modifier:
    • In the Name builder field, enter SummaryPageColumns.
    • In the Container Field builder field, select [ViewPage_ViewPage]ViewPage_ViewPage/ExcelContent/Row (see figure 8).
    Figure 8. Data Column Modifier builder, part 1
    Data Column Modifier builder, part 1
    • Select the Manage Columns builder option, and click the Profile Enable button Profile Enable button under Manage Columns (see figure 9).
    Figure 9. Data Column Modifier builder, part 2
    Data Column Modifier builder, part 2
  5. This step displays a Profile Input window (see figure 10). Click the Create Entry button to the right of the Profile Entry Name list.

    Figure 10. Profile Input window
    Profile Input window
  6. In the New Profile Entry window (see figure 11), enter following settings:
    • In the Name builder field, enter Columns.
    • Select TextInput in the UI Type builder field.
    • Leave all other builder fields set to their default values, and click OK.
    Figure 11. New Profile Entry window
    New Profile Entry window
  7. In the Profile Input window, select Columns for the Profile Entry Name builder field.
  8. Repeat the preceding steps to enter three additional profile entries: AlertFieldName, AlertFieldValue, and RowClass, leaving you with a total of four profile entries for this sample (figure 12). They are all TextInput type and are described as follows:
    • Columns is used to customize the display of the table and contains XML code for all the columns in the table. The default value for this setting is to use XML for column display, which is set automatically when you add a profile entry.
    • AlertFieldName contains the field used as the alert criteria. The default value is Title.
    • AlertFieldValue is the value for triggering an alert. The default value is VP.
    • RowClass is the class name for the row that is highlighted as an alert. The default value is tableRowStyle1.

    When complete, your Profile Set should display similar to the one shown in figure 12.

    Figure 12. Profile Set
    Profile Set
  9. Next, add five Variable builders named ProfiledRowClass, ProfiledRowFieldName, ProfiledRowFieldValue, FieldValue, and CurrentRowClass. Define each Variable using a Type builder field value of String (see figure 13).

    Figure 13. Variables
    Variables
    • ProfiledRowClass, ProfiledRowFieldName, and ProfiledRowFieldValue are profile-enabled for the Initial Value input. They map to the RowClass, AlertFieldName, and AlertFieldValue profile entries (see figure 14).
    • Variable FieldValue is used to temporarily store the current value of the field specified in the profile entry AlertFieldName for each table row. Clear the Initial Value builder field.
    • The CurrentRowClass Variable builder is used to set the class for the current row. Clear the Initial Value builder field.
    Figure 14. Profile-enabled Variable builder ProfiledRowClass
    Profile-enabled Variable builder ProfiledRowClass
  10. Add a Method builder and name it SetFieldValueString. This method is used to determine whether the current row contains the field specified by the current user’s profile entry AlertFieldName and assigns this field value to the FieldValue variable. Enter the following builder fields:
    • In the Name builder field, enter SetFieldValueString.
    • In the Return Type builder field, enter void.
    • In the Method Body builder, enter the code shown in listing 1.
    Listing 1. Method SetFieldValueString
    {
    String fieldname = webAppAccess.getVariables().getString("ProfiledRowFieldName");
    IXml rowXml= webAppAccess.getVariables().getXml("RowLoopVar");
    
    IXml column =  rowXml.findElement(fieldname.toUpperCase());
    String value = column.getText();
    
    webAppAccess.getVariables().setString("FieldValue", value);
    
    }
  11. Add an Action List builder GetRowStyle by entering the following builder fields (see figure 15):
    • In the Name builder field, enter GetRowStyle.
    • In the Return Type builder field, enter String.
    • In the Actions builder field, enter the actions shown in listing 2.
    Listing 2. Action List GetRowStyle
    Assignment!Variables/CurrentRowClass=tableRowStyle0
    !IF (${Variables/ProfiledRowFieldName}) THEN
    !IF (${Variables/ProfiledRowFieldName} != NoAlert) THEN
    SetFieldValueString
    !IF (${Variables/FieldValue} == ${Variables/ProfiledRowFieldValue}) THEN
    Assignment!Variables/CurrentRowClass=${Variables/ProfiledRowClass}
    !ENDIF
    !ENDIF
    !ENDIF
    Return!${Variables/CurrentRowClass}
    Figure 15. Action List builder
    Action List builder

    This action determines what style to use for the current table row and is referenced in the next step. Suppose, for example, that users want to highlight all rows containing the value VP in the Title field. This action is called as each row of the table is rendered to determine what row style to apply to it. If a row’s attribute meets a criterion configured by the user through the edit mode, this action displays the row using the class specified by the user. If it does not, the action returns the default class tableRowStyle().

  12. Add an Attribute Setter builder (see figure 16). This builder is used to set the class attribute of the table row dynamically and calls the GetRowStyle Action List builder created in the previous step. Enter the following builder fields:
    • In the Name builder field, enter RowAttribute.
    • Under Page Location, in the Page builder field, enter ViewPage_ViewPage.
    • Under Page Location, in the Tag builder field, enter DataContainer.
    • In the Attribute List builder field, add a Name attribute of class and a Value of ${MethodCall/GetRowStyle}, as highlighted in figure 16.
    Figure 16. Attribute Setter builder
    Attribute Setter builder
  13. Finally, add a Portlet Adapter builder (see figure 17) to add portlet support to your model. Enter the following builder fields for this builder:
    • In the Name builder field, enter VCardPortlet.
    • In the Portlet Title builder field, enter Edit Mode Sample VCard Portlet.
    • Select Custom Model for the Custom Edit Type builder field.
    • In the Custom Edit Model builder field, enter Vcards/VCardPortlet_Edit. This is the name of the model you create in the next section.
    • Leave all other builder inputs set to their default values.
    Figure 17. Portlet Adapter builder
    Portlet Adapter builder

You are now ready to create the model for the portlet’s edit mode.


Edit mode model overview

You next proceed to create the portlet’s edit mode model, which implements the UI for the portlet’s edit mode. For the sample application, this model contains two tabbed pages that consist of imported HTML files. When you add a Portlet Customizer builder to the model, it automatically generates the UI input fields for all profile entries. You do not directly use those system-generated profile fields for UI customization, though, because the WebSphere Portlet Factory-generated edit mode cannot directly provide the functionality that you need. Instead, you set those profile fields as type Hidden Input.

When the Edit page is loaded, a JavaScriptâ„¢ function is invoked to fetch the values in the system-generated profile fields and place them in the appropriate UI controls. When users change the value using the WebSphere Portlet Factory-generated input controls, a JavaScript function is called to update the system-generated profile fields.

Create the edit mode model and add builders

Here you create the VcardPortlet_Edit model in the WEB-INF/models/Vcard folder:

  1. Add a Portlet Customizer builder, which automatically creates a default page or pages for your portlet’s edit mode, depending on your selections. If you choose to use multiple tabbed pages, WebSphere Portlet Factory assigns default page names such as editPage1, editPage2, and so on, depending on the number of tabbed pages that are selected.
  2. Enter the following builder fields for the Portlet Customizer builder (see figure 18):
    • In the Name builder field, enter DataEdit.
    • In the Portlet builder field, select Vcard/VCardPortlet.
    • In the Profile Sets builder field, select VCardPortletps.
    • Click the Update Input Values From Profile Set button. This action populates the table for the Input Values builder field. Set the VCardPortletps_Columns builder input to be on page 1 and the other three builder field values as page 2.
    • In the Tab Labels builder field, enter two Page Name/Tab Label pairs: editPage1/Columns and editpage2/Alerts (see figure 19).
    • In the Default Page URL builder field, enter /sample_ui/default_tabbedcustomizerpage_horizontal.html.
    • In the Stylesheet URL builder field, enter /sample_ui/EditPage.css.
    Figure 18. Portlet Customizer builder, part 1
    Portlet Customizer builder, part 1
    Figure 19. Portlet Customizer builder, part 2
    Portlet Customizer builder, part 2

    After the Portlet Customizer builder has been applied to the model, it creates the following artifacts for you:

    • Two Page builders, editPage1 and editPage2
    • The following Edit Mode fields for editPage1 and editPage2: VCardPortletps_Columns on editPage1, VCardPortletps_AlertFieldName, VCardPortletps_AlertFieldValue, and VCardPortletps_RowClass on editPage2
  3. Next, add a Data Field Modifier to customize the system-generated profile value input fields into Hidden Input fields (see figure 20). To do this, enter the following builder fields to the Data Field Modifier builder:
    • In the Name builder field, enter HideProfileFields.
    • In the Fields builder field, select all profile fields on editPage1 and editPage2.
    • Select No for the Is Required builder field.
    • In the Control Type builder field, select HiddenInput.
    Figure 20. Data Field Modifier builder
    Data Field Modifier builder

    Note that the sample portlet hides the input fields generated by the Portlet Customizer builder so that the UI controls provided by the imported pages can be used.

  4. Next, add an Imported Page builder to import HTML from the sample/ui/Columns.html file for editPage1 by entering the following values:
    • Enter ImportColumnPage into the Name builder field.
    • In the Page to Import builder field, select /sample_ui/Columns.html.
    • Leave all other fields set to their default values.
  5. Add an Inserted Page builder to place this page into the system-generated edit mode page titled EditPage1 (see figure 21).
    • In the Name builder field, enter InsertColumnPage.
    • Under Page Location, in the Page builder field, enter editPage1.
    • Under Page Location, in the Tag builder field, specify the data tag.
    • In the Page in Model builder field, select ImportColumnPage.
    Figure 21. Inserted Page builder
    Inserted Page builder
  6. Repeat step 4 and 5 to add another Imported Page builder and Inserted Page builder that import the HTML files for the editPage2 page. The Imported Page builder should import the /sample/ui/Alerts.html page. We take a closer look at the imported HTML files in the next section.
  7. Add a Method builder, using the Name builder field to call it fixupXML. This builder is used to update the XML for generated columns. Listing 3 provides a snippet of the code. The XML code for the various columns, defined by the profile entry value, Columns, includes the less than and greater than symbols. These two symbols are converted into &lt; and &gt; in HTML. This method is used to change them back to < and > so that columns are displayed properly.

    Listing 3. Method fixupXML
    {
    	try
    	{
    	   	//this method is used to replace the &lt; and &gt; chars 
    	   	that cause invalid xml error
    
    IXml portletInputs = webAppAccess.getVariables().getXml("portletInputs");
    		IXml columns =  portletInputs.findElement("VCardPortletps_Columns");
    		String columnText = columns.getText();
    		
    		// decode text
    		columnText = columnText.replaceAll("&lt;", "<");
    	    columnText = columnText.replaceAll("&gt;", ">");
    		
    		//replace the old text
    		columns.setText(columnText);	
    	}
    	catch(Throwable ex)
    	{
    	    ex.printStackTrace();
    	}
    }
  8. Add an Action List builder by entering the following:
    • In the Name builder field, enter Update.
    • In the Actions builder field, enter fixupXML and Update_renamed.
    • Leave the remaining builder fields set to their default values.
  9. Add two Button builders, okButton1 and okButton2, on editPage1 and editPage2, respectively. Both buttons call the action Update created in the previous step (see figure 22). Enter these inputs for okButton1:
    • In the Name builder field, enter okButton1.
    • Under Page Location, in the Page builder field, select editPage1.
    • Under Page Location, in the Tag builder field, enter okButton.
    • In the Label builder field, enter Done.
    • In the Action Type builder field, select Submit form and invoke action.
    • In the Action builder field, enter Update.
    Figure 22. Button builder
    Button builder

    Similarly, enter these settings for okButton2:

    • In the Name builder field, enter okButton2.
    • Under Page Location, in the Page builder field, select editPage2.
    • Under Page Location, in the Tag builder field, enter okButton.
    • In the Label builder field, enter Done.
    • In the Action Type builder field, select Submit form and invoke action.
    • In the Action builder field, enter Update.

Examine the imported HTML and JavaScript files

Let’s take a closer look at the imported HTML and JavaScript files.

The files columns.html and alerts.html refer to a JavaScript file named editpage.js that contains JavaScript functions used by the edit mode pages. The HTML file columns.html provides the UI for editPage1, which includes two drop-down lists named columnsToSelect, on the left, and columnsSelected, on the right. It also contains four buttons that can be used to move options from left to right, and up and down.

The onclick event defined for the preceding left, right, up, and down buttons calls a JavaScript function named UpdateProfileColumn(), which formats the column’s display value. The last line of the function stores the value into a hidden system field VCardPortletps_Columns. Listing 4 provides a snippet of code for the function:

Listing 4. JavaScript function UpdateProfileColumn
function UpdateProfileColumn(aform) {
 
    selectedList = aform.columnsSelected;
    
	pval = "<Columns>";
	if (selectedList.length<=0)
		return false;

	for(i=0; i < selectedList.length;i++)	{
		pval = pval + "<Column><Name>" + selectedList.options[i].text	+ 
		"</Name><Status>Show</Status><Heading>" + 
		selectedList.options[i].text+
		 "</Heading><Width /><Alignment>Default</Alignment>
		 <Sortable>Case Insensitive String</Sortable></Column>";
	}
	
    toSelectList = aform.columnsToSelect;
    if (toSelectList.length > 0) {
		for(i=0;i<toSelectList.length;i++)	{
	 		pval = pval + "<Column><Name>" + toSelectList.options[i].text +
	 		 "</Name><Status>Hide</Status><Heading>" + 
	 		 toSelectList.options[i].text+ "</Heading><Width />
	 		 <Alignment>Default</Alignment><Sortable>Case 
	 		 Insensitive String</Sortable></Column>" ;
		}
    }
	
	pval = pval + "</Columns>";	
	aform.VCardPortletps_Columns.value = pval;
}

The HTML file columns.html also calls the JavaScript function loadColumns() during the page load, using the following lines at the bottom of the file:

<script type="text/javascript">
loadColumns();
</script>

Listing 5 is a code snippet from the function loadColumns(). Note that the boldface line, xmlString = aform.VCardPortletps_Columns.value;, gets its value from the VCardPortletps_Columns field and uses it to set the options that display in the two drop-down lists.

Listing 5. JavaScript function loadColumns
function loadColumns() {
	aform = document.portlet_edit_form;
	availableList = aform.columnsToSelect;
	selectedList = aform.columnsSelected;
	
	xmlString = aform.VCardPortletps_Columns.value;
	arrayOfStrings = xmlString.split("<Column>");

	//skip the first element int the arrary because it returns only 
	value <Columns>
	for (var i=1; i < arrayOfStrings.length; i++) {
str = arrayOfStrings[i];

index1 = str.indexOf("<Name>");
index2 = str.indexOf("</Name>");
index3 = str.indexOf("<Status>");
index4 = str.indexOf("</Status>");
subName = str.substring(index1+6, index2);
subStatus = str.substring(index3+8, index4);
	
for(j=availableList.length-1; j>=0; j--)	{
	if(availableList.options[j].text == subName && subStatus=="Show"){
	    selectedList.appendChild(availableList.options.item(j));
	}
}
}

selectedList.style.width="120";
availableList.style.width="120";
selectNone(selectedList,availableList);
}

The HTML file alerts.html serves a similar function. Listing 6 provides a snippet of code from some of the relevant functions. References to system-generated profile input fields in the code snippet are in boldface. For a complete list of functions, refer to the file editpage.js in the downloadable code.

Listing 6. JavaScript functions for alerts.html
//following functions are for the alerts page
function noAlert(aform) {
	aform.VCardPortletps_AlertFieldName.value="NoAlert";
}

function selectTitleAlert(aform) {
	aform.VCardPortletps_AlertFieldName.value="Title";
}


function setAlertTitleColor(aform) {
	aform.VCardPortletps_RowClass.value= aform.alert_title_color.options
[aform.alert_title_color.selectedIndex].value;

}

function setAlertTitleName(aform) {
	aform.VCardPortletps_AlertFieldValue.value= 
	aform.title_name.options[aform.title_name.selectedIndex].value;

}

function loadAlerts() {
	
	aform = document.portlet_edit_form;

	colorList = aform.alert_title_color;
	titleList = aform.title_name;

	for(i=0; i < colorList.length;i++)	{
	if (colorList.options[i].value==aform.VCardPortletps_RowClass.value)
	colorList.options[i].selected = true;	
	}
	for(i=0; i < titleList.length;i++)	{
	if (titleList.options[i].value==aform.VCardPortletps_AlertFieldValue.value)
	titleList.options[i].selected = true;	
	}


	if (aform.VCardPortletps_AlertFieldName.value=="Title") {
		aform.alerts_radio[0].checked = true;
		aform.alerts_radio[1].checked = false;
	} else {
		if (aform.VCardPortletps_AlertFieldName.value=="NoAlert"){
			aform.alerts_radio[0].checked = false;
			aform.alerts_radio[1].checked = true;
		}
	}
}

Test the portlet

Now that you have completed all three models, let’s test them.

  1. Right-click the project and select Build Portlet Factory WAR - Build Portlet War (see figure 23). This function builds the project into a portlet and deploys it to your local WebSphere Portal server automatically. (Note that the build process can take a few minutes.)

    Figure 23. Build Portlet WAR
    Build Portlet WAR
  2. Open your browser window, type in the URL of your local WebSphere Portal server, and add the portlet to a page. You should see the portlet Edit Mode Vcard Sample portlet (see figure 24).

    Figure 24. Sample portlet before it is personalized
    Sample portlet before it is personalized
  3. Click the Personalize button in the portlet title bar to put the portlet into edit mode. If you personalize columns and alerts as shown in figures 25 and 26, you should see a personalized table similar to the one shown in figure 27.

    Figure 25. Edit mode page 1: Configure Columns
    Edit mode page 1: Configure Columns
    Figure 26. Edit mode page 2: Configure Alerts
    Edit mode page 2: Configure Alerts
    Figure 27. Sample portlet after it is personalized
    Sample portlet after it is personalized

Conclusion

We have shown how quickly you can build a portlet with more than one edit mode page containing complex UI controls. Each portlet provides its own set of opportunities to offer user customization options. Using the techniques described in this article, you can now create a portlet with sophisticated edit mode pages that allow users to configure and personalize it.


Download

DescriptionNameSize
Sample scripts for this articleEditModeSample_downloads.zip21KB

Resources

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into WebSphere on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=WebSphere
ArticleID=317958
ArticleTitle=Creating complex portlet Personalize pages using the IBM WebSphere Portlet Factory Customizer builder
publish-date=07082008