Domino's XPages Workshop Lab Manual

Lab 3 Profiles

Page 1 of 17
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 3 IBM ISV & DEVELOPER RELATIONS.

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
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 3 IBM ISV & DEVELOPER RELATIONS.

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 Step 4 Save and close the new form. 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

COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED.

LAB 3

IBM ISV & DEVELOPER RELATIONS.

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. In the profileForm Custom Control, select the Gender Combobox. In the Values tab specify (both Label and Value): - Male - Female - Confused

Step 8

Step 9

Select the Country Editbox control. On the Type-ahead tab, check the Enable type ahead box and make the Mode Partial. Make the Suggestions a computed value and add the following formula: @DbLookup(@DbName(), "keywordLookup", "Countries", "Values")

Step 10

Step 11 Step 12

Uncheck the Case-sensitive checkbox. 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
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 3 IBM ISV & DEVELOPER RELATIONS.

Step 13 Step 14

Save and close the profileForm Custom Control. Preview in both the Browser and Notes Client.

Page 5 of 17
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 3 IBM ISV & DEVELOPER RELATIONS.

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 Step 2 Step 3 Open the searchResults custom control. Add the styles.css resource to the custom control. Add 3 new lines at the top of the control (we will later add stuff there), just need the lines there for filler space. Drag a View control from the container control palette onto the page canvas.

Step 4

Page 6 of 17
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 3 IBM ISV & DEVELOPER RELATIONS.

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%. On the Display tab set the maximum rows to 10.

Step 7

Page 7 of 17
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 3 IBM ISV & DEVELOPER RELATIONS.

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
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 3 IBM ISV & DEVELOPER RELATIONS.

Step 10 Step 11

Save and close the searchResults custom control. 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
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 3 IBM ISV & DEVELOPER RELATIONS.

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 Step 2 Step 3 Step 4 Open the SearchForm custom control in the XPages editor. Add the styles.css resource to the custom control. Add a button and label it New profile, map it to the style class profilesButtonCommand. 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

COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED.

LAB 3

IBM ISV & DEVELOPER RELATIONS.

Step 6 Step 7 Step 8 Step 9 Step 10 Step 11 Step 12 Step 13

Insert a few blank lines after the button. Add a Label control and make it say Profile Search, make it bold font. Insert a blank line after this first label. Add a Label control and make it say Enter the search criteria:. Add an Editbox, stretch it in Designer to a width of about 250px. Add a Button named Search with the style class profilesButtonCommand. Save the searchForm custom control. 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
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 3 IBM ISV & DEVELOPER RELATIONS.

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 Step 17

Uncheck the Case-Sensitive box. Add a simple action to the Search button. Set the Action to Execute Script and add this formula: sessionScope.nameToSearch = requestScope.nameToSearch

Step 18 Step 19 Step 20 Step 21

Add a second simple action to Open Page to the results.xsp page. Save the changes you have made to the searchForm custom control. Open the searchResults Custom control. Add a Computed Field control at the top. Name it resultsComputedField and map it to the style class searchInfo. 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;

Step 22

Page 12 of 17
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 3 IBM ISV & DEVELOPER RELATIONS.

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 Step 25

Save the changes to the searchResults custom control and then close it. Preview the home XPage within both the Browser and Notes Client.

Page 13 of 17
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 3 IBM ISV & DEVELOPER RELATIONS.

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 Step 2 Step 3 Open the searchForm custom control and select the search Edit Box. On the Validation tab specify the minimum (3) and maximum (40) values for the search field. Specify an error message.

Step 4 Step 5

Save the changes to the searchForm custom control. 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
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 3 IBM ISV & DEVELOPER RELATIONS.

Step 6 Step 7

Open the profileForm custom control. 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
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 3 IBM ISV & DEVELOPER RELATIONS.

Step 9 Step 10

Save and close the profileForm custom control.

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

Page 16 of 17
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 3 IBM ISV & DEVELOPER RELATIONS.

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
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 3 IBM ISV & DEVELOPER RELATIONS.