Xpages Lab 03 Profiles

Domino's XPages Workshop

Lab Manual

Lab 3

Profiles

COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 3 IBM ISV & DEVELOPER RELATIONS.

Page 1 of 17

Introduction:In this lab, you will learn how to provide data to the different controls on the XPage and how to enable type-ahead functionality in XPages.

Description:This lab introduces further concepts around custom controls and how to use Notes Documents within XPages. The profileForm custom control has combobox design elements. You will provide static and dynamic lookup for the possible values for this controls. XPages allows to show data from Domino views in a page. There can be more than one. In this exercise you will show the list of profiles in the results page. You will complete the search page and show search results in the result page. The result page will show either search results or all profiles. You will learn about data validation and how to add data validation to the search and the profile form. You will use mandatory fields, minimum input length fields and custom validation fields.

Objective:At the end of the lab, you should be able to:

• Know how to show data from a Notes view in xPages

• Know how to propagate data from one form to another

• Understand how to implement data validation

Procedure:

SECTION 1: PROVIDE DATA TO DIFFERENT CONTROLS & ENABLE TYPE-AHEAD

In this section, you will learn how to provide data to the different controls on the xPage and how to enable type-ahead functionality in xPages. The profileForm custom control has combobox design elements. You will provide static and dynamic lookup for the possible values for this controls.

Step 1 Create a Notes New Form named keywords.


Page 2 of 17

Step 2 Add the following fields: Name (Text) Values (Text, Allow Multiple Values)

Select New Line as the ONLY delimiter for both options above.

Step 3 Save and close the new form.

Step 4 Create a New View called keywordLookup. The selection conditions will be By Formula:

SELECT form=”keywords”

Step 5 Change the first column to show the Name field. Make it sorted Ascending.

Step 6 Preview the form in your Notes Client and Name the document TimeZones. Add the text from TimeZones.txt, which is located in the C:\Lab Files\codeSnippets directory, into the Values field. Save and close the document.


Page 3 of 17

Step 7 Preview the form again and Name this document Countries. Add the text from Countries.txt into the Values field. Save and close the document.

Step 8 In the profileForm Custom Control, select the Gender Combobox. In the Values tab specify (both Label and Value):- Male- Female- Confused

Step 9 Select the Country Editbox control. On the Type-ahead tab, check the Enable type ahead box and make the Mode Partial.

Step 10 Make the Suggestions a computed value and add the following formula:

@DbLookup(@DbName(), "keywordLookup", "Countries", "Values")

Step 11 Uncheck the Case-sensitive checkbox.

Step 12 Select the TimeZones Combobox control. On the Values tab, click on Add formula Item and add this formula:

@DbLookup(@DbName(), "keywordLookup", "TimeZones", "Values")


Page 4 of 17

Step 13 Save and close the profileForm Custom Control.

Step 14 Preview in both the Browser and Notes Client.


Page 5 of 17

Things to Explore: Change the Country Edit box to a combobox and make it work with the same data source as used for the type ahead.

Further Readings:

Online Help

SECTION 2: SHOW DATA FROM A NOTES VIEW IN XPAGES

In this section, you will learn how to show data from a Notes view in XPages. XPages allows to show data from Domino views in a page. There can be more than one. In this section, you will show the list of profiles in the results page.

Step 1 Open the searchResults custom control.

Step 2 Add the styles.css resource to the custom control.

Step 3 Add 3 new lines at the top of the control (we will later add stuff there), just need the lines there for filler space.

Step 4 Drag a View control from the container control palette onto the page canvas.


Page 6 of 17

Step 5 Select profiles as the View option in the helper dialog. Press OK.

Step 6 Click on the View in the design editor, then under the View tab of the Properties set the width to 100%.

Step 7 On the Display tab set the maximum rows to 10.


Page 7 of 17

Step 8 Click on the Full Name column header. Check the Sort Column option in the View Column Header tab inside Properties.

Step 9 Click on the Full Name column. Check the Show value in this column as links option. Also select the read-only option.


Page 8 of 17

Step 10 Save and close the searchResults custom control.

Step 11 Preview your results.xsp page in the both the Browser and Notes Client.

Things to Explore: 1) Add an extra column that only contains the word “Edit” and opens the documents in edit mode.

2) Replace that word with an edit icon.

3) Add a column that list all the contacts from the same country (this probably requires an additional view in the databases).


Page 9 of 17

Further Readings:

http://www.lotus911.com/nathan/escape.nsf/d6plinks/NTFN-7FRG79

SECTION 3: IMPLEMENT SEARCH AND RESULTS PAGES

In this section, you will learn how to use the xPages Scope contexts with advanced data binding and how to propagate data from one form to another. Further you will learn how to show a subset of view data only. You will complete the search page and show search results in the result page. The result page will show either search results or all profiles.

Step 1 Open the SearchForm custom control in the XPages editor.

Step 2 Add the styles.css resource to the custom control.

Step 3 Add a button and label it New profile, map it to the style class profilesButtonCommand.

Step 4 Add a simple action to the button to open the profile page.

Step 5 Check the Do not validate or update data box in the Server Options pane.


Page 10 of 17

http://www.lotus911.com/nathan/escape.nsf/d6plinks/NTFN-7FRG79

Step 6 Insert a few blank lines after the button.

Step 7 Add a Label control and make it say Profile Search, make it bold font.

Step 8 Insert a blank line after this first label.

Step 9 Add a Label control and make it say Enter the search criteria:.

Step 10 Add an Editbox, stretch it in Designer to a width of about 250px.

Step 11 Add a Button named Search with the style class profilesButtonCommand.

Step 12 Save the searchForm custom control.

Step 13 Preview the home.xsp XPage in your browser.

Step 14 Add an Advanced Data Binding to the Editbox:- Scoped Variable: requestScope- Variable Name: nameToSearch


Page 11 of 17

Step 15 Select the EditBox and change to the Type Ahead tab. Check the box for Enable Type Ahead and then select the Mode: partial. Specify a computed suggestion list with the following formula:

@DbColumn(@DbName(), "profiles", 0)

Step 16 Uncheck the Case-Sensitive box.

Step 17 Add a simple action to the Search button. Set the Action to Execute Script and add this formula:

sessionScope.nameToSearch = requestScope.nameToSearch

Step 18 Add a second simple action to Open Page to the results.xsp page.

Step 19 Save the changes you have made to the searchForm custom control.

Step 20 Open the searchResults Custom control.

Step 21 Add a Computed Field control at the top. Name it resultsComputedField and map it to the style class searchInfo.

Step 22 On the Value tab of the field, select JavaScript and add the following script fragment:

var criteria = sessionScope.nameToSearch;var title = "Profile search results for: ";if(null != criteria && criteria != ""){ title += criteria;}else{ title = "No search criteria provided.";}return title;


Page 12 of 17

Step 23 Select the View control and click on the All Properties tab. Expand the data entry.Add the following computed expression for keys:

sessionScope.nameToSearch

Step 24 Save the changes to the searchResults custom control and then close it.

Step 25 Preview the home XPage within both the Browser and Notes Client.


Page 13 of 17

Things to Explore: 1) Write the search term into the application context (you will need a proper javascript object for that) and display a text on the pages “Today's popular searches:” with the search strings mostly used.

SECTION 4: ADD DATA VALIDATION TO THE FORMS IN SCRAPBOOK

In this section, you will learn how to add data validation to the forms in the Scrapbook application. Add data validation to the search and the profile form. You will use mandatory fields, minimum input length fields and custom validation fields.

Step 1 Open the searchForm custom control and select the search Edit Box.

Step 2 On the Validation tab specify the minimum (3) and maximum (40) values for the search field.

Step 3 Specify an error message.

Step 4 Save the changes to the searchForm custom control.

Step 5 Preview the home XPage within the browser to test out this new validation. Enter less than 3 charactes and try to search.


Page 14 of 17

Step 6 Open the profileForm custom control.

Step 7 Add the Validation of Required Field to both FirstName and LastName edit boxes.

Step 8 Add validation to the LastName field of must not be the same as FirstName by going to the onClick event of the the Save button then the Client script editor for the event. Enter the following script:

(***** PLEASE CHECK THE FIELD NAMES BEFORE YOU APPLY THIS SCRIPT *****)

var firstName = dojo.byId("#{id:firstName1}");var lastName = dojo.byId("#{id:lastName1}");if (firstName.value == lastName.value){alert("The First Name and Last Name must be different");return false;}else{return true;}

NOTE: The reason we need to check the field names is that you may have called them something different and it's good practice to ck them before you try the page.


Page 15 of 17

Step 9 Save and close the profileForm custom control.

Step 10 Preview the profile.xsp page within both the Browser and Notes Client.


Page 16 of 17

Things to Explore: 1) Use a JavaScript regular expression (Google helps) to add a “Is this a valid email” to an email field.

2) Use a requestScope variable isDraft to avoid validations when a document is is in draft mode (make something up how draft mode works).

Further Readings:

javaScript: http://www.ecma-international.org/publications/standards/Ecma-262.htm

JavaScript RegEx: http://www.regular-expressions.info/javascript.html

Summary:

Congratulations! You have completed this third lab of the XPages workshop.

In this lab, you completed the following procedures:

• Provided data to different controls and enabled Type-Ahead

• Showed data from a Notes View within an XPage

• Implemented Search and Results pages within the Scrapbook XPages app

• Added data validation to the forms in the Scrapbook application


Page 17 of 17

http://www.regular-expressions.info/javascript.html

http://www.ecma-international.org/publications/standards/Ecma-262.htm

Date post:	04-Sep-2014
Category:	Documents
Upload:	dias-ibragimov
View:	135 times
Download:	6 times