IBM Lotus Component Designer V6.0: Client-side JavaScript techniques and demos

Write client-side and server-side JavaScript in IBM Lotus Component Designer components. Employ DHTML skills to develop IBM WebSphere Portal components using Lotus Component Designer. This article is an introduction to writing client-side JavaScript in Lotus Component Designer.

Jason English (jason_english@us.ibm.com), Information Developer, IBM

Jason English is an information developer at IBM Lotus in Cambridge, Massachusetts. He has worked for IBM Lotus for eight years and has written end user, application development, installation, and administration documentation for a variety of products, including IBM Lotus Notes, IBM Lotus Domino, and mobile software. He is currently writing installation and API documentation for IBM Lotus Component Designer.



Salvatore Mazzotta (Salvatore_Mazzotta@us.ibm.com), Systems Architect, IBM Lotus Business Partner Technical Enablement, IBM

Sal Mazzotta is a software engineer for IBM Lotus in Westford, Massachusetts, where he has focused on technology in support of collaboration. He has a B.S. in Civil Engineering and an M.S. in Civil Engineering - Structures from M.I.T. He works in IBM Lotus Business Partner Enablement where he helps Business Partners leverage Lotus products into service and software offerings. When not at Lotus, he reads mysteries, nonfiction, fiction, and so on.



01 May 2007

You can employ DHTML skills, including JavaScript, CSS, and DOM manipulation, to develop IBM WebSphere Portal components using IBM Lotus Component Designer. This article provides an introduction to writing client-side JavaScript in Lotus Component Designer, four scripting techniques, and four script demonstrations. You should understand basic JavaScript and be familiar with Lotus Component Designer.

You can write client-side and server-side JavaScript in your Lotus Component Designer components. Client-side JavaScript means the standard JavaScript that can be executed by browsers, such as Mozilla, Microsoft Internet Explorer, and Netscape, without making trips to the server. Server-side JavaScript is more powerful, and it not only can manipulate the UI like client-side script, but it also can access the Designer runtime context, server Java classes, and backend data store. This article focuses on client-side scripting in Lotus Component Designer components.

The techniques and demos are in the sample component in the Download section of this article . To see them, download the component (WDC file) to your computer and follow these steps to import it into Lotus Component Designer:

  1. Choose File - Import.
  2. In the Import dialog box, select IBM Lotus Component Designer - Component.
  3. Click Next.
  4. In the IBM Lotus Component Designer - Import Component dialog box, browse to the WDC file to import.
  5. Click OK.

The imported component displays in the Designer Navigator.

Writing client-side script in components

You can associate client-side JavaScript with UI control events in a component. Events occur during runtime; for example, a user clicking a button once is an event. To write a client-side script for an event, you select the control, click the Events tab in the Properties view, select Script Editor, and then click the Web Client tab.

To write a script, click in the editor and type. For example, the script in the technique00 page in the sample component (shown in figure 1) is associated with the onclick event of a button labeled Call Script. It references the whereAmI() and whoAmI() functions at the beginning.

Figure 1. Call Script button onClick event
Call Script button onlick event

The No Submission option is selected to prevent the server from reloading the page. Because the script doesn't need anything from the server, a server trip would be inefficient.

Clicking the Call Script button opens the dialog box shown in figure 2.

Figure 2. Call Script dialog box
Call Script dialog box

Using script libraries

You can use JavaScript libraries to store scripts that you can reference from other scripts elsewhere in your component. To use client-side JavaScript libraries, you must create them, make them available to pages, and then reference them from other scripts. Do the following tasks to use client-side JavaScript libraries:

First, create the library:

  1. Open Lotus Component Designer.
  2. Expand a component in the Designer Navigator.
  3. Expand the Resources section.
  4. Double-click Script Library.
  5. Click New Client Library.

Then, make the library available to a page:

  1. Open the page.
  2. In the Properties view, click the Resources tab.
  3. Click Add Script Library.
  4. Select the library.

Next, write a script that references the library. For example, in the technique01 page in the sample component we wrote an onclick event on a button labeled Call Script Library that uses two functions from the scrLibDemo client-side script library, whereAmI() and whoAmI(), which are shown in figure 3.

Figure 3. scrLibDemo client library
scrLibDemo client library

The whereAmI() function returns the text, "I am in scrLibDemo Client Side JavaScript Library."

The whoAmI() function returns the text, "I am '+who+' to scrLibDemo Client Side JavaScript Library." In the Call Script Library button script, we provided a parameter in whoAmI( ) (in this case, Sam) that is displayed by the "+who+" part of the function.

The client-side script in the Call Script Library button is shown in figure 4.

Figure 4. Call Script Library button onClick event
Call Script Library button onClick event

The No Submission option is selected here to prevent a reloading of the page from the server.

Clicking the Call Script Library button opens the dialog box shown in figure 5.

Figure 5. Call Script Library button dialog box
Call Script Library button dialog box

Client-side and server-side script on the same event

You can write client-side script and server-side script on the same event, and you can make the portlet more efficient by conditionally blocking the server-side script from executing a trip to the server.

For example, in the technique02 page in the sample component, we wrote both client-side and server-side script in an onclick event on the Save button. In the page itself, users can type text into the Subject field and click the Save button. A dialog box opens, giving users a choice to save a document or cancel. If they save a document, a document containing the typed data is saved and automatically displayed in the view. Users can delete saved documents by selecting them in the view and clicking the Delete Selected Documents button.

When there are server-side and client-side scripts on an event, the client-side scripts execute first. In the client-side script shown in figure 6, we give users a choice of whether or not to save the document. It displays a dialog box that contains the text "You are about to save a new document. Do you want to continue?" and OK and Cancel buttons. If the user clicks OK, the server-side script executes. If the user clicks Cancel, the return false; statement stops the server trip.

Figure 6. Save button onclick event client-side script
Save button onclick event client-side script

The server-side script shown in figure 7 saves a new document and reopens the current page so that the document displays as an entry in the view, showing any value the user typed in the Subject edit box. Because the script saves a document and Full Update is selected at the bottom of the Events properties view (meaning the entire server page is reloaded to the client after the event), clicking the Save button executes a trip to the server.

Figure 7. Save button onclick event server-side script
Save button onclick event server-side script

Clicking the Save button opens the dialog box shown in figure 8.

Figure 8. Save button dialog box
Save button dialog box

Accessing browser DOM element IDs in client-side script

You can access browser DOM element IDs in client-side script by embedding a server-side script that uses the #{id:<control_name>} syntax if the element is a constant or that uses the syntax #{javascript:getClientID(<computationG )} if the element is computed.

This technique is necessary because after Lotus Component Designer components are deployed to WebSphere Portal, JavaServer Faces (JSF) and WebSphere Portal add prefixes to the DOM element IDs on the server. For example, if at design time you create an edit box with the ID inputText1 (whatever you name the control is its ID), at runtime JSF and WebSphere Portal add a prefix such as:

viewPC_7_TASL1GL1006BC02USAQGJD30O3_:_id1:inputText1

These prefixes are different for each component instance, so they can't be inserted as literals into client-side scripts.

For example, in the technique03 page in the sample component, we change the color of the text in the What is Subject? button between red and black each time it is clicked, and we open a dialog box that tells the user the current button color. To do this, we need the DOM element ID of the button, which we get from the server using client-side script in the button's onclick event as shown in figure 9.

(Figure 9 displays the Script Editor, which is opened by clicking this icon JS editor icon in the Events tab.)

Figure 9. What is Subject? button onclick event client-side script
What is Subject? button onclick event client-side script

The #{id:<control_name>} server-side script runs on the server and returns the runtime ID of the control before the page is loaded to the browser.

NOTE: The #{id:<control_name>} syntax cannot be used in script libraries because script libraries are not processed before they are made available to a page in a browser.

Next we return and display the DOM element ID of the edit box in two ways: where the element name is a constant, and where the element name is computed. In the first example (as shown in listing 1), we return the ID of the Subject edit box, where the ID is a constant, using the syntax #{id:<control_name>}.

Listing 1. What is Subject? button onclick event client-side script
// get ID of DOM element where name of DOM element is a constant
retVal = retVal + "\n\nName of DOM element is a constant \"inputTextSubject\"";
var idSubject = '#{id:inputTextSubject}';
// get DOM element of Subject text input field
var elSubject = document.getElementById(idSubject);
retVal = retVal + "\nSubject ID is << "+idSubject+" >>";
retVal = retVal + "\nSubject value is \t<< "+elSubject.value+" >>";

In the second example (as shown in listing 2), we return the ID of the Subject edit box, where the ID is computed, using the syntax #{javascript:getClientID(<computation>)}.

Listing 2. What is Subject? button onclick event client-side script
// get ID of DOM element where the name of the element is computed - see Technique IV
retVal = retVal + "\n\nName of DOM element is computed \"inputText\"+\"Subject\"";
idSubject = '#{javascript:getClientId("inputText"+"Subject")}';
// get DOM element of Subject text input field
elSubject = document.getElementById(idSubject);
retVal = retVal + "\nSubject ID is << "+idSubject+" >>";
retVal = retVal + "\nSubject value is \t<< "+elSubject.value+" >>";

alert( retVal );

The alert method opens the dialog box shown in figure 10.

Figure 10. What is Subject? button dialog box
What is Subject? button dialog box

Accessing server variables in client-side script

You can access any server variable by embedding server-side script that uses the syntax #{javascript:<server_script>} into your client-side script. This technique runs the server-side script and inserts the return value in the client-side script before loading the page in the browser. It expands on the use of #{javascript:getClientID(<computation>)} described in the previous section.

For example, in the technique04 page in the sample component, the Show Server Side Variables button opens a dialog box displaying the values of server-side variables that return the following information:

  • The current user's user name
  • The component's locale
  • The current page's runtime DOM element ID prefix (the prefix prepended to all DOM elements by JSF and WebSphere Portal)

We also return the following information to show how the #{id:<control_name>} syntax from the previous section, "Accessing browser DOM element IDs in client-side script," relates to the #{javascript:<server_script>} syntax:

  • The full Subject edit box runtime DOM element ID
  • Any value that the user typed into the Subject edit box

We get these values from the server using client-side script in the button's onclick event as shown in figure 11.

Figure 11. Show Server Side Variables button onclick event client-side script
Show Server Side Variables button onclick event client-side script

The alert method opens the dialog box shown in figure 12.

Figure 12. Show Server Side Variables button dialog box
Show Server Side Variables button dialog box

NOTE: The #{javascript:<server_script>} syntax cannot be used in script libraries because script libraries are not processed before they are made available to a page in a browser.


Expand and collapse: manipulating CSS styles

You can manipulate Cascading Style Sheet (CSS) properties in client-side JavaScript. This demonstration uses the style.display property to expand and collapse sections of a page. Part 1 shows how to create sections using twisties (down arrowright arrow ), and Part 2 shows how to create sections using plus and minus symbols (plus symbolminus symbol ). Because both parts use the same functionality and the same basic JavaScript, this article describes only the twisties (down arrowright arrow ).

User experience

Users click the twisty or plus sign to expand the sections as shown in figure 13. They click the twisty or minus sign to collapse the sections, as shown in figure 14.

Figure 13. Results of clicking expand twisty
Results of clicking expand twisty

How it's done

The demo uses these design elements:

  • The demoCSS_Styles page, which displays the demo
  • The ccSection custom control, which contains the UI controls and JavaScript for the twisties (down arrowright arrow )
  • The ccSectionPlusMinus custom control, which contains the UI controls and JavaScript for the plus/minus symbols (plus symbolminus symbol )

We use custom controls because they are the best way to reuse functionality multiple times in a page or in other pages or components.

Both examples in Part 1 contain a ccSection custom control (shown in figure 15) that contains two images, a table, an editable area, and an editable area in a one-cell table. Editable areas make convenient containers for other UI controls. After the custom control is placed on a page, you can add other controls to the editable areas.

The first editable area is named facetSectionSubject and contains the subject of the section. The second editable area is named facetSectionContent and contains the contents of the section.

Figure 15. ccSection custom control
ccSection custom control

In the demoCSS_Styles page, facetSectionSubject contains a label displaying the text, Project Manager, and facetSectionContent contains some text.

The keys here are the images. The imageExpand image (right arrow ) has the following client-side JavaScript attached to its onclick event:

document.getElementById('#{id:tableSectionContent}').style.display='block';
document.getElementById('#{id:imageExpand}').style.display='none';
document.getElementById('#{id:imageCollapse}').style.display='inline';

This script does the following (as shown in figure 13):

  1. Displays tableSectionContent.
  2. Removes imageExpand from the display.
  3. Displays imageCollapse in place of imageExpand.

The imageCollapse image (down arrow) has the following client-side JavaScript attached to its onclick event:

document.getElementById('#{id:tableSectionContent}').style.display='none';
document.getElementById('#{id:imageExpand}').style.display='inline';
document.getElementById('#{id:imageCollapse}').style.display='none';

This script does the following (as shown in figure 14):

  1. Removes tableSectionContent from the display.
  2. Displays imageExpand.
  3. Removes imageCollapse from the display (imageExpand takes its position).

DHTML client-side validation

JavaServer Faces (JSF) offers client-side validation and server-side validation constructs, and Lotus Component Designer supports them. They are not designed to enable validation of complex client-side business rules, though. This demo suggests one way to do so. It uses client-side and server-side scripts on the same event. The client-side script validates the page. If the page is valid, a document is saved and the page is replaced. If the page is not valid, error messages are displayed to the user.

User experience

The demoDHTML page contains a button labeled Save and a table with two columns and four rows. The first column contains one label in each cell, the second column contains one edit box and one custom control in each cell. The bottom of the page contains another button labeled Delete Selected Documents and a view.

The user enters data into the UI controls and clicks Save. Any conditions that make the document invalid are shown under the field in an error control; see figures 16 and 17. The user corrects the data and clicks Save again. This repeats until the document is valid, at which point it is added to the backend datastore and automatically displayed in the view.

Figure 16. Edit boxes with error in Object field
Edit boxes with error in Object field
Figure 17. Edit boxes with errors in all fields
Edit boxes with errors in all fields

How it's done

The demo uses these design elements:

  • demoDHTML page, which displays the demo
  • The ccClientError custom control, which displays error messages
  • The scrLibValidation client library, which contains validation functions
  • The scrLibStrings client library, which contains error message text

There are three conditions on the edit boxes:

  1. They all require data.
  2. The Object edit box must have a minimum length of 10 characters.
  3. The date in the Start Date date time picker must be earlier than the date in the End Date date time picker. This is made fairly obvious by text on the page.

Client-side script in the Save button picks up the values entered in the edit boxes and calls on script in the scrLibValidation library to validate them. If they are all valid, it saves a document containing the data and replaces the current page. If one or more values are invalid, it gets invalid messages from the scrLibString library to display error messages in the custom controls below the invalid UI controls. For example, if the user enters a value of less than 10 characters in the Object edit box, he or she sees the error shown in figure 16.

This behavior stems from client-side and server-side scripts attached to the Save button. As explained in the previous section, "Client-side and server-side script on the same event," when both types of script are attached to the same event, client-side executes first, then server-side. On the Save button the client-side script uses the isDocValid() function to call the scrLibValidation library and to validate the page. If the page is valid the server-side script executes, saving a document and replacing the page. If the page is invalid, a return false; statement prevents a trip to the server, and error messages from the scrLibStrings library are displayed below the invalid edit boxes.

(There is also a button labeled Check scrLibVersions, whose client-side script opens a dialog box displaying the versions of available script libraries. This is intended as a development aid in design-time only and is hidden, meaning its Visible property is deselected.)

Listing 3 is a sample section of isDocValid(), which can be reused in other components.

Listing 3. Sample section of isDocValid()
	if( ! isDocValid() )
{
//	alert("Invalid Document!");
	return false;
} 
/*
 * validates this page using
 *     atomic functions in scrLibValidation
 *     validation messages in scrLibStrings
 *
 */
function isDocValid()
{
	// pick up DOM elements for validation
	var elSubject = document.getElementById('#{id:inputTextSubject}');
	var elObject = document.getElementById('#{id:inputTextObject}');
	var elStartDate = document.getElementById('#{id:dateTimePickerStartDate}');
	var elEndDate = document.getElementById('#{id:dateTimePickerEndDate}');	

	// pick up places to put error messages
	var errSubject = document.getElementById('#{id:ccClientErrorSubject:errMessage}');
	var errObject = document.getElementById('#{id:ccClientErrorObject:errMessage}');
	var errStartDate = document.getElementById('#{id:ccClientErrorStartDate:errMessage}');
	var errEndDate = document.getElementById('#{id:ccClientErrorEndDate:errMessage}');

	// clear out any old error messages
	clearMessages( errSubject, errObject,errStartDate, errEndDate );

	var isDocValid = true;
	var lsPartValid = true;
	var msg = "";

	// validate Subject
	msg = getString("#Subject#Required#");
	isPartValid = isGiven( elSubject, errSubject, msg);
	isDocValid = isDocValid && isPartValid;

	// validate Object
	msg = getString("#Object#Required#");
	isPartValid = isGiven( elObject, errObject, msg);

	// only check length if Object input
	if( isPartValid )
	{
		var minObject = 10;
		msg = getString("#Object#Min#Length#");
		msg = msg+" ( "+minObject.toString()+" )";
		isPartValid = hasMinLength( elObject, errObject, msg, minObject);
	}
	isDocValid = isDocValid && isPartValid;

Listing 4 is a sample section of scrLibValidation, which can be reused in other components.

Listing 4. Sample section of scrLibValidation
 /*
 * checks if field is of minimum length
 *
 * el - DOM element of field
 * err - DOM element to receive error message
 * msg - error message
 * min - minimum # characters
 */
function hasMinLength( el, err, msg, min )
{
	var isValid = false;
	var length = el.value.length;
	isValid = (length > min);
	if( ! isValid )
		setMessage( err, msg );
	return isValid;
 }


/*
 * set error message onto page
 *
 * err - DOM element to receive error message
 * msg - error message
 */
function setMessage( err, msg)
{
   err.innerHTML = msg;
   err.style.color = 'red';
   return;
}

Listing 5 is a sample of scrLibStrings, whose structure can be reused in other components, but its specifics must be modified for the particular component.

Listing 5. Sample section of scrLibStrings
	var keyString =
		{     "#Object#Min#Length#" : "Object has a minimum length of ",

/*
 * returns validation message for input key
 */
function getString( key )
{
	return keyString[key];
}

Using AJAX type-ahead

You can implement AJAX type-ahead functionality with client-side script.

User experience

The demoAJAX_typeAhead page contains three edit boxes, a Save button, and a view for looking at saved documents. We used this pattern in the sections, "Client-side and server-side script on the same event" and "DHTML client-side validation."

The demo focuses on the type-ahead functionality in the Category edit box. When the user begins typing in that control, the AJAX functionality matches the letters against the existing category names and a pop-up box opens with matches. The user can choose from the pop-up list. Alternatively, the user may enter new values as shown in figure 18.

Figure 18. Example type-ahead for h
Example type-ahead for h

How it's done

The demo uses these design elements:

  • The demoAJAX_typeAhead page, which displays the demo
  • The vqCatDocs view query, whose category column contains values used in type-ahead functionality
  • The srcLibUtil client library, which contains scripts that trim user-typed categories into comma-separated lists for storing in XML elements
  • The scrLibCategory server library, which contains scripts that return an array of categories and that populate the type-ahead pop-up

Users enter data in the edit box, that data is stored, and then it is made available by type-ahead functionality in the same edit box for users to select. Follow these steps:

  1. Client-side script in the onclick event of the Save button (shown in listing 6) picks up data typed in the Category edit box. It assumes that the data is a comma-separated list (CSL). It then calls the trimCSL() function in the scrLibUtils library, which splits the values in the list, trims the white spaces, makes the values unique, and joins the values again into a new CSL.
Listing 6. Client-side script in the onclick event of the Save button
// pick up contents of Category: field, assumed to be CSL
var elCat = document.getElementById('#{id:inputTextCategory}');
var category = elCat.value;
// split CSL, trim elements, unique them, join into CSL
// replace contents of Category: field with results
elCat.value = trimCSL( category, ",", " " );
  1. Server-side script on the button saves the document, and then it replaces the demoAJAX_TypeAhead page:

    document.save();
    context.redirectToPage("demoAJAX_TypeAhead")


    Because the Category edit box is bound to the \category element in the schemaCatDoc schema, the new CSL is stored in the document's \category element.
  2. The getCategories() function in the scrLibCategory library (shown in listing 7) returns an array of values from the \category field of saved documents in the data store.
Listing 7. getCategories() function
/*
 * returns array of categories 
 * stored in schema as CSL in category 
 */
function getCategories()
{
    var cat = document.getStringValue("/schemaCatDoc/category");
    if( cat == null || cat == "" )
    {
	    cat = "<Not Categorized>";
    }
    return cat.split(",");
}
  1. The category column in the vqCatDocs view query is bound to getCategories() as shown in figure 19.
Figure 19. category column of the vqCatDocs view query
category column of the vqCatDocs view query
  1. The getAjaxCategories() function (shown in listing 8), also in the scrLibCategory library, pulls the array that getCategories() placed in the category column of the vqViewQuery view query and joins the values with commas.
Listing 8. getAjaxCategories() function
/*
 * returns CSL of categories 
 * pulled from category column in vqCatDocs view query
 *
 */
function getAjaxCategories()
{
	var cat = new Array();
	/*
	cat[0] = "Saab";
	cat[1] = "Volvo";
	cat[2] = "BMW";
	*/

	cat = database.openView("vqCatDocs").getColumnsValues("category");
	cat = cat.join(',');
	return cat;
}
  1. The type-ahead properties of the Category edit box (as shown in figure 20) enable and configure the type-ahead feature, including executing the getAjaxCategories() function each time the page reloads.
Figure 20. Category edit box type-ahead properties
Category edit box type-ahead properties

String resourcing

You can display the results of string resourcing using client-side JavaScript.

User experience

Users select an ID from the Terminology ID field and an item from the Key field, and then click the Find String Resource button. The value associated with the Terminology ID and Key pair is returned, if available, as shown in figures 21 and 22.

Figure 21. Returned string resource for NonProfit Co.
Returned string resource for NonProfit Co.
Figure 22. Returned string resource for Hedge Fund Inc.
Returned string resource for Hedge Fund Inc.

How it's done

The demo uses these elements:

  • The demoString Resourcing page, which displays the demo
  • A table with six rows and two columns
  • Five labels in the first table column, which identify the controls in the second column
  • Two combo boxes in the second table column, in which users select the terminology ID and key of the string
  • A Find String Resource button in the first table column, which returns the string resource
  • Two edit boxes in the second table column, which display the returned string resource
  • The srcLibStringsTerminology client library, which contains script that uses user-selected values to return data

The demo UI displays the results of string resourcing, which is done using JavaScript Object Notation (JSON) arrays. Refer to the developerWorks article, "Mastering Ajax, Part 10: Using JSON for data transfer."

Each selection option in the Terminology ID and Key combo boxes is assigned a value; for example, in the Terminology ID combo box, NonProfit Co. is assigned the value NPC. These assignments are displayed in the Values tab of the Combo Box properties as shown in figure 23.

Figure 23. Terminology ID combo box Values properties
Terminology ID combo box Values properties

Client-side script in the Find String Resource button's onclick event (shown in listing 9) picks up the values from the Terminology ID field and Key field, calls getString( tid, key ) to retrieve the resourced value, and places the results in the Status, Field name, and Validation message fields.

Listing 9. Find String Resources button onclick client-side script
var elTid = document.getElementById('#{id:comboBoxTid}');
var elKey = document.getElementById('#{id:comboBoxKey}');
var elStatus = document.getElementById('#{id:inputTextStatus}');

var elFN = document.getElementById('#{id:inputTextFN}');
var elVM = document.getElementById('#{id:inputTextVM}');

elStatus.value = "";
elFN.value = "";
elVM.value = "";

var tid = elTid.value;
var key = elKey.value;

elStatus.value = "Tid / Key = <"+tid+">/<"+key+">";
elFN.value = getString( tid, key );
elVM.value = getString( tid, key+"Required#" );

return false;

The script uses the getString() function from the scrLibStringTerminology client library (shown in listing 10) to use the Terminology ID field and Key field values to find a JSON array and to return the correct values to the Field name and Validation message fields.

Listing 10. getString() function
function getString( tid, key )
{
	// if tid not specified, use default keyString[]
	if( tid == "" || tid == null || tid == "none" )
	{
		// alert("<<<<none");
		return keyString[key]
	}
	else
	{
		try
		{
			// use keyString_tid[] if it exists
			// alert("<<<<< "+"keyString_"+tid);
			var assocArray = eval("keyString_"+tid);
			return assocArray[key];
		}
		catch(err)
		{
			// use default keyString[] if keystring_tid[] does not exist
			// and eval throws exception
			// alert("<<<<< error");
			return keyString[key];
		}
	}
}

The getString() function relies on associative arrays (shown in listing 11) at the bottom of the same script library. Each array is for a specific value in the Terminology ID combo box; for example, the keyString array is for the none given label, and the keyString_NPC array is for the NonProfit Co. label.

Listing 11. Associative arrays
/*
 * contains associative array for each TID, Terminology Id
 *     keyString     default array
 *     keyString_NPC array for NonProfit Co,
 *     keyString_HFI array for Hedge Fund, Inc.
 *
 */

var keyString =
{
	"#Subject#" : "Subject:",
	"#Object#" : "Object:",
    "#Subject#Required#" : "Subject is required.",
    "#Object#Required#" : "Object is required.",
    "#XXXXX#" : "XXXXX"
} 

var keyString_NPC =
{
	"#Subject#" : "Subject:*",
	"#Object#" : "Object:*",
    "#Subject#Required#" : "Please enter Subject.",
    "#Object#Required#" : "Please enter Object.",
    "#XXXXX#" : "XXXXX"
} 

var keyString_HFI =
{
	"#Subject#" : "SUBJECT:**",
	"#Object#" : "OBJECT:**",
    "#Subject#Required#" : "SUBJECT IS REQUIRED!",
    "#Object#Required#" : "OBJECT IS REQUIRED!",
    "#XXXXX#" : "XXXXX"
}

The getString() function works like this: If no terminology ID is specified (meaning the user selected none given), the script uses the Key field value to return values from the default keyString associative array. For example, if the user selects none given in the Terminology ID field and selects subject in the Key field, then the script returns Subject: to the Field name field, and Subject is required. to the Validation message field.

If a terminology ID is specified, the script evaluates "keystring_" + the ID and returns that value's associative array. For example, if the user selects NonProfit Co. the script evaluates the value keyString_NPC and returns values from the keyString_NPC associative array.


Conclusion

A variety of Web application tasks is appropriately handled in the browser without a trip to the server, including manipulating style sheets, performing validation, leveraging AJAX type-ahead functionality, and performing string resourcing. We see them as we use the Web, and we have built them into the Web applications. You can use the techniques and demonstrations in this article to create powerful client-side script in your Lotus Component Designer components that performs those tasks in your WebSphere Portal applications.


Download

DescriptionNameSize
Code sampleClientScript.wdc74KB

Resources

Learn

Discuss

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 IBM collaboration and social software on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Lotus, WebSphere
ArticleID=216200
ArticleTitle=IBM Lotus Component Designer V6.0: Client-side JavaScript techniques and demos
publish-date=05012007