Xpages Workshop Complete Labs01-33

Exercise 1
1.What will you learn

You will become familiar with the basic working of the XPages editor and the
components palette.
2.Task Description
You will create the mandatory “Hello World” code example and prepare some structure
for the subsequent exercises.
3.Detailed Steps
1. Create a new database (<CTRL> + N) on the server and call it “xpages1”
© 2008 IBM Corporation page 1/5

Exercise 1
2. Create one xPage:
- hwPage
3. Create one Custom Control:

- hwControl

Exercise 1
4. Add a Label control as a test control ("hello XPages world!").
Continued...
Press <CTRL> + S to save (or File/Save from the menu)

Exercise 1
Add your new hwControl Custom Control to the XPage hwPage.
Press <CTRL> + S to save (or File/Save from the menu)

5. Set the Access Control options to allow Anonymous access to Manager.
6. Set web launch option in Application Properties:
- Open designated XPage: hwPage
- Click on “preview in browser” button.

Exercise 1
4.The Result
5.Things To Explore
• Can you change the Output from static “Hello World” to include the current time? (Use
the caret for entering JavaScript and the date() function)
• Can you show your name (which would be Anonymous if you are not logged in)
together with Hello World
6.Further Readings

Exercise 2

You will become familiar with conditional display of information in XPages. You will learn
the difference between full and partial refresh.
2.Task Description
Change your custom control to contain an input field to collect the users name and a
button to update the page to show “Hello [Name entered]“.

Exercise 2
3.Detailed Steps
1. Add a panel to the hwControl Custom Control, name it “helloPanel”

Exercise 2
2. Add a label to the panel: “Your Name please”

Exercise 2
3. Add an Edit Box, name it yourName

Exercise 2
4. Add a button label it “Say Hello”

Exercise 2
5. Add a custom property to the custom control: (click on an empty part of the page)
Call it iknowyou
6. Add code to the button's onClick event:

- Add Action

Exercise 2

Exercise 2
7. - Basic: Execute Script
var txtControlValue = getComponent("yourName").getValue();
getComponent("label2").setValue("Hello "+txtControlValue);
compositeData.iknowyou = true;

Exercise 2
8. Test the result
9. Change the “Visible” properties of the input box and the button to computed:

Exercise 2
Use the following formula:
!compositeData.iknowyou
10.Preview the result
NOTE To preview the result you will need to change the focus to the hwPage, as you
can't preview a custom control.
Be sure to save both before you hit the preview button.

Exercise 2
11.Change the server option for the button event from “Full Update” to “Partial Update”
and select the helloPanel
12.Add some text above and below the panel

13.Preview the result in the browser

Exercise 2
4.The Result

Exercise 2
5.Things To Explore
• [options here]
6.Further Readings
[links here]

Exercise 3

You will build the foundation for our sample application and learn about application
structure that allows styling your application easily.
2.Task Description
You will create three XPages that will provide access to our sample application. You will
prepare some structure for the subsequent exercises.
3.Detailed Steps
1. Create a new database called xScrapbook.
Don't forget to change the default access for Anonymous in the access control
list.

Exercise 3
2. Create three XPages:
- home
- results
- profile
Repeat 2,3 & 4 for each subsequent Xpage.

Exercise 3
3. Create one Custom Controls:
- container

Exercise 3
4. Add nested panels to your custom control. A panel translates into a DIV element
using the HTML rendering but can contain additional logic. Panels are commonly
used for styling or partial refresh operations.
Important: make sure to use the names below!
(You'll also notice that the outline below does not match the picture, the text
below is correct.)
- Panel: frame
- Panel: header
- Panel: headerInner
- Panel: main
- Panel: tabBar
- Panel: content
5. Add a label control into the headerInner panel and give it a Label of Scrapbook.

Exercise 3
6. Add your new container Custom Control to each of the XPages (home, results,
profile).

Exercise 3
7. Import the css stylesheet into stylesheet resources styles.css from the workshop
resources media (depending on your class: a memory stick, a CD, a URL, a network
location)

Exercise 3
8. Import all of the images into image resources

Exercise 3
9. Add the style resource styles.css to the container control.

Exercise 3
10.On the styles tab of each panel (6 panels) map the class to the corresponding named
style sheet class.
TIP- Use the outline to navigate the panels easily.

Exercise 3
11.Go back to the label you added to the headerInner panel and map it to the class
headerInnerTitle.

Exercise 3
12.Set web launch option in Application Properties:
- Open designated xPage: home
4.The Result
Use the preview button from a page to see the results.

Exercise 3
5.Things To Explore
• Can you create a custom control that shows the current user name (Anonymous if
you are not logged in and add that to the newly created pages
• Create a style that puts that custom control in one corner (pick one) of the screen.
6.Further Readings
• http://www.w3schools.com/css/
• http://www.w3.org/Style/CSS/
• http://www.alistapart.com/
• http://www.csszengarden.com/

Exercise 4

You will learn how to create a custom control that has a customizable content area. You
will use the control in the sample application.
2.Task Description
You will extend the existing container control to include a tabbed control and a content
area. The content area allow you add individual content into it, effectively creating a new
container control type.
3.Detailed Steps
1. Open the container custom control
2. Add a “Tabbed Panel” into the “tabBar” Panel control
Drag and drop from the “container controls pallet.
3. The Tabbed Panel needs to have 3 tabs:
- Home (name: homeTab)
- Results (name: resultsTab)
- Profile (name: profileTab)
Right click on tabbed panel to add another tab.

Exercise 4
Use the outline to select the tabs and get to their properties.

Exercise 4
4. Add an “Editable Area” control into the “content” area. Drop it where “facet_1” is in the
picture
5. Create three more Custom controls:

- searchForm
- profileForm
- searchResults
Tip: add some temporary content to these controls to be able to see their proper
operation.
6. Add each of the new custom controls to their own XPage Editable Areas as follows:
- searchForm into home
- searchResults into results
- profileForm into profile
e.g. Drag and drop the searchForm custom control onto the green cirlce on the home
XPage.

Exercise 4
4.The Result
Change the URL to see each page. e.g. home.xsp, results.xsp & profile.xsp
We connect up the navigation tabs in Exercise 14.

Exercise 4
5.Things To Explore
• Can you add “Editable Areas” to xPages?
• Can you add more than one “Editable Area to a custom control?
6.Further Readings

Exercise 5

You will learn how to display notes documents in XPages using form properties and
simple data binding.
2.Task Description
Create a profile form (Classic Notes) and map the profile form to an XPage. Add data
binding to the profile XPage to show data stored in the Notes form.

Exercise 5
3.Detailed Steps
1. Create a new Notes form named “profile”. Use the following fields:
FullName (Computed Text)
Formula: @Trim(FirstName + " " + LastName)
Email (Text)
TimeZone (Text)
AboutMe (Rich Text)
Gender (Text)
Country (Text)
FirstName (Text)
LastName (Text)
DOB (Date Time)

Exercise 5
2. On the Form defaults for “On web access” use “Display xPage instead”, set it to the
profiles xPage.
3. Create a new view named “profiles” with the view selection formula SELECT
form=”profile” and the following columns:
FullName (Sorted Ascending, Sortable / Click to Sort – Both)
TimeZone
Email

Exercise 5
4. Create some documents in the Notes Client with the profile form and then Preview
the view in the browser and open a document from the view (which would be pretty
empty other than our header)
5. Open the profileForm custom control (you created that in exercise 04). Click on the
page in the design editor, so it gets the focus.
6. On the data tab add a “Domino Document” datasource. Choose “profile” as the form.

Exercise 5
7. Click on the “All properties tab and expand the “data” entry,
then expand the dominoDocument entry and select “OnSave” for the
computeWithForm option
8. Save the custom control and close it. Then reopen it to make the date palette refresh.
9. Select the data palette and enable the “Select controls dialog box” button

Exercise 5
10.Select all the field bindings except for “Full Name” and the “DOB” (use shift+click to
select multiple)

Exercise 5
11.Drag & drop all the selected field bindings to the “profileForm” page in the design
editor
12.In the helper dialog change the following control types”

- About Me: RichText
- Gender: Combobox
- TimeZone: Combobox
Click on OK

Exercise 5
13.Right click inside a cell in the resulting table and choose to append 3 rows in the
helper dialog
14.Reorder the row contents using drag & drop to group related fields together.
15.Add a label control and a Date Time Picker control for the DOB field. Add a new row
in the table if needed.

Exercise 5
16. Bind the Date Time Picker to the field DOB
set the display type to “date / time”
Preview the XPage for your control in your browser, empty and with data (you need to
enter them using the Notes form, since we don't have action buttons for now).

Exercise 5
4.The Result
5.Things To Explore
• Add a field starsign to the profile form and create a combobox with the star signs as
selection
6.Further Readings
[Links]

Exercise 6

You will learn how page flow works in XPages and how to code actions behind action
buttons.
2.Task Description
You will complete the “profileForm” custom control from exercise 5.
3.Detailed Steps
1. Add the styles.css to the profileForm Custom Control (we need that to comfortably
pick the styles)
2. Add 4 button controls into the last table row (add one table row if needed) and label
them as:
- Save
- Delete
- Cancel
- Edit

Exercise 6
3. Change the button type for the “Save” button to “Submit”
4. Set the class to profilesButtonSubmit on the style tab

5. Add a simple action on the events tab: “Open Page” : home.xsp

Exercise 6
6. Add a computed “Visible” property for the “Delete Button”
In the JavaScript Editor add this formula:

!document1.isNewNote()
7. Set the class to profilesButtonCommand

Exercise 6
8. Add another simple action that deletes the document and returns to the home.xsp
page.
9. Change the button type for the “Cancel” button to cancel

10.Change the class to “profilesButtonCancel”
11. Add the simple action to open “home.xsp”
12.Apply the class profilesButtonCommand to the Edit button
Create a computed “Visible” property for the Edit button with this formula:
!document1.isEditable()
13.Add the simple Action to the event “Document Mode: Edit Mode”
Preview the page in the browser

Exercise 6
4.The Result

Exercise 6
5.Things To Explore
• Hide the edit button if the current minute it odd (1, 3, 5 ... 59) (Doesn't make sense
but is fun to play with)
• Check the page properties, there are alternatives for the page navigation for success
and failure
6.Further Readings
• Online help

Exercise 7

You will learn how to provide data to the different controls on the xPage and how to
enable type-ahead functionality in xPages.
2.Task Description
The profileForm custom control has combobox design elements. You will provide static
and dynamic lookup for the possible values for this controls.
3.Detailed Steps
1. Create a Notes form named “keywords”
Add the following fields
Name (Text)
Values (Text, Allow Multiple Values)
Select “New Line” as the ONLY delimiter for both options below.
2. Create a Notes view called “keywordLookup”.

The selection formula will be;
SELECT form=”keywords”
Change the first column to show the “Name” field.
Make it sorted Ascending.

Exercise 7
3. Preview the form in your Notes client and call the document “TimeZones”, add the
text from “codeSnippets/TimeZones.txt”. Escape out of the document and save it.
Preview the form again and call this document “Countries”, add the text from
“codeSnippets/Countries.txt”. Escape out of the document and save it.
4. In the profileForm Custom Control select the Gender Combobox. In the “Values” tab
specify:
- “Male”
- “Female”
- “Confused”
5. Select the “Country” Editbox control. On the Type-ahead tab check the Enable type
ahead box and make the Mode “Partial”.
6. Make the Suggestions a computed value and add the following formula:
@DbLookup(@DbName(), "keywordLookup", "Countries", "Values")
7. Uncheck the Case-sensitive checkbox.

Exercise 7
8. Select the “TimeZones” Combobox control. On the Values tab click on “Add formula
Item
and add this formula:

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

Exercise 7
4.The Result

Exercise 7
5.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.
6.Further Readings
• Online help

Exercise 8

You will learn how to show data from a Notes view in xPages.
2.Task Description
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.
3.Detailed Steps
1. Open the searchResults custom control
2. Add the styles.css resource to the custom control
3. Add 3 new lines at the top of the control (we will later add stuff there)
4. Drag a View Control from the control palette onto the page canvas

Exercise 8
5. Select “profiles” as the view option in the helper dialog. Press OK
6. Click on the view in the design editor, set the width to 100%
7. On the display tab set the maximum rows to 10

Exercise 8
8. Click on the “Full Name” column header
Check the “Sort Column” option in the View Column Header tab

Exercise 8
9. Click on the “Full Name” column. Check the “Show value in this column as links”
10.Select the read-only option
Preview your result in the browser

Exercise 8
4.The Result
5.Things To Explore
• Add an extra column that only contains the word “Edit” and opens the documents in
edit mode.
• Replace that word with an edit icon
• Add a column that list all the contacts from the same country (this probably requires
an additional view in the databases)
6.Further Readings
http://www.lotus911.com/nathan/escape.nsf/d6plinks/NTFN-7FRG79

Exercise 9

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.
2.Task Description
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.
3.Detailed Steps
1. Open the “SearchForm” custom control in the xPages editor
2. Add a button “New profile”, map it to the style “profilesButtonCommand”.
3. Add a simple page action to the button.
4.
5. Check the “no data validation” box in the Server Options pane.

Exercise 9
6. Add a label “Profile Search”, make it bold.
7. Add a label “Enter the search criteria:”
8. Add an Editbox, stretch it in Designer to about 250px
9. Add a button named “Search” with the class profilesButtonCommand
- Preview the XPage in your browser
10.Add an Advanced Data Binding to the Editbox:
- Scoped Variable: requestScope
- Variable Name: nameToSearch
11.Select the EditBox and change to the type-ahead tab. Select “partial”, Specify a
computed suggestion list with the following formula
@DbColumn(@DbName(), "profiles", 0)
12.Uncheck the Case-Sensitive box.
13.Add an simple action to the Search button “Execute Script” add this formula:
sessionScope.nameToSearch = requestScope.nameToSearch
14.Add a second simple action “Open Page” -> results.xsp
15.Open the “searchResults” Custom control
16.Add a computed Field control at the top. Name it “resultsComputedField” and map it

Exercise 9
to the class “searchInfo”
17.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;
18. Select the View Control and click on the “All Properties” tab. Expand the data entry.
add the following computed expression for keys:
sessionScope.nameToSearch

Exercise 9
4.The Result
5.Things To Explore
• 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.
6.Further Readings
[links]

Exercise 10

You will add data validation to the forms in the sample application.
2.Task Description
Add data validation to the search and the profile form. You will use mandatory fields,
minimum input length fields and custom validation fields.
3.Detailed Steps
1. Open the searchForm custom control and select the searchBox.
2. On the validation tab specify the minimum (3) and maximum (40) values for the
search field.
3. Specify an error message

Exercise 10
4. Test the pages
5. Open the profileForm custom control

6. Add “Required Field” to FirstName and LastName and check the results
Add validation to the LastName field: must not be the same as FirstName by going to the
onClick event of the the Save button then the Client script 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;
}
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.

Exercise 10
4.The Result

Exercise 10
5.Things To Explore
• Use a JavaScript regular expression (Google helps) to add a “Is this a valid email” to
an email field.
• Use a requestScope variable isDraft to avoid validations when a document is is in
draft mode (make something up how draft mode works)
6.Further Readings
• javaScript: http://www.ecma-international.org/publications/standards/Ecma-262.htm
• JavaScript RegEx: http://www.regular-expressions.info/javascript.html

Exercise 11

You will explore the different modes of data validation and use server side validation and
the error display components. You will become familiar with xPages' error handling
concepts and capabilities.
2.Task Description
You will create in your xScrapbook database a new page to explore the 2 server side
error handling controls and their use. This exercise doesn't constitute a part of our
sample application.
3.Detailed Steps
1. Open the Scrapbook database and create a new xPage called “validationTest”
2. Add 5 fields:
Name, TagLine, Color (drop down list with red, yellow, green), myCheckbox (a
checkbox) and itemCount

Exercise 11
3. Make the Name field a mandatory field and add an error message
4. Give the TagLine field a minimum length of 4 and a maximum of 40, create an error
message.

Exercise 11
5. Make the itemCount a numeric display (in data)
and check out the dataConverter xp:convertNumber (in all properties)
Preview the results in the browser – we will introduce server side validation there
6. Add a “Display Error” control next to the Name control. Set its “Show error messages
for” property to “name”

Exercise 11
7. Select the name control and in “all properties” - data section, set “disable
clientSideValidation” to true
Add a Submit button and then test it in the browser.

Exercise 11
8. Add a “Display Errors” control into some space between the fields and the submit
button
9. Set the “disableClientSideValidation” on the TagLine control
Test in browser

Exercise 11
1.The Result
2.Things To Explore
• Use a Script library for validation
• When would you use client side and when server side validation?
1.Further Readings

Exercise 12

You will understand how to use server and client side JavaScript libraries for validation
(or other purposes).
2.Task Description
Create 2 JavaScript Libraries with sample code (provided). One client JavaScript, One
server JavaScript. Link them into your sample plage.
3.Detailed Steps
1. In Designer, expand Code in the Navigator and double-click on Script Libraries
2. Create a new JavaScript Library and name it “ClientSideValidation”
3. Paste the following code into the library:
function checkSearchField(element, length, message){
if(null != element){
if(element.value == ""){
alert(message);
element.focus();
return false;
}
if(element.value.length < length){
alert(
"Please enter a value of at least " +
length + " characters."
);
element.select();
return false;
}
return true;
}
}

Exercise 12
4. On the validationTest page click the resource panel and choose “Add Script library”
and add the “ClientSideValidation” library
Select the submit button and select the onClick event, client side!
Add the following code:
var element = dojo.byId("#{id:TagLine}");
checkSearchField(element, 4, "We need a tag line");
5. Add a new script library “New Server JavaScript Library”

Name it “ServerSideValidation”

Exercise 12
6. Add the following code:
function requiredFieldCheck(editBoxComponent, labelComponent,
requiredMessage){
var value = editBoxComponent.getValue();
if(null == value || value == ""){
labelComponent.setValue(requiredMessage);
return false;
}
return true;
}
7. Add the server side script library to the page.
8. Add a new label behind the TagLine edit control and call it TagLabel. Make sure the
label itself blank.
9. Add a simple action group “Execute script” to the submit button:
requiredFieldCheck(
getComponent("TagLine"),
getComponent("TagLabel"),
"Please provide a tag line!");
Preview in Browser

Exercise 12
4.The Result
5.Things To Explore
• What alternatives to alert boxes can you use?
6.Further Readings

Exercise 13

You will use a custom validator using a regular expression and another one using your
own JavaScript code.
2.Task Description
Add 3 fields to your test form: eMail, test1,test2. Validate the eMail field to have a valid
formed eMail address using a regular expression. Validate that the test2 field has the
same content as test1 field using JavaScript.
3.Detailed Steps
1. Add 3 fields: eMail, test1, test2
2. click on the eMail field and switch to the all properties panel and data and validators

Exercise 13
3. Click on add validator, select validateConstraint

Exercise 13
4. Use the following regular expression: [\w-]+@([\w-]+\.)+[\w-]+
- Test the result in the browser -
5. Add a validation to the field test2 to make sure that test1 and test2 have the same
value. Use a validateExpression validator and add the following expression
(important: Expression, not clientScript:
var v1 = getComponent("test1").getValue();
var v2 = this.getSubmittedValue();
return v1==v2
Test it.

Exercise 13
4.The Result
5.Things To Explore
• How to validate a URL to be a possible www URL
• Use functions from a JavaScript library for validations.
6.Further Readings
• http://www.regular-expressions.info/javascript.html
• http://regexlib.com/
• http://regexpal.com/

Exercise 13

Exercise 14

You will learn how to complete the tab navigation and how to communicate state
information.
2.Task Description
Make sure, that the right tab is displayed based on the xPage loaded. Make sure, that
the complete list of profiles is shown when the results page is opened directly rather than
through a query.
3.Detailed Steps
1. Open the “container” custom control
2. select the “resultsTab” tab (right click on it in the design editor)
3. select the “Select Active Tab Contents” context menu option
4. On the Events tab for the “Results” Tab add an “Execute Script” simple action with
this formula: sessionScope.nameToSearch = null
(this clears an eventually entered search term)
5. Add another simple action “Open Page” specify “Results.xsp” and “no data validation.

Exercise 14
6. Repeat step 3 & 5 (but not 4) for the other 2 tabs. Specify the respective pages.
7. Click on the custom control (the outline is a good place to do that) and then select the
property definition
8. Click “Add new property” name it “selectedTabId” type “String”

(You don't need to provide validation or visibility rules here
9. Select the Tabbed Panel in the design editor and edit the “Tab opened by default”
option as a computed option use this formula:
compositeData.selectedTabId
10. Open all the 3 XPages (home, profile, results) and select the container control there.
Click on all properties

Exercise 14
11.For each page enter the corresponding tab.
Check your result in the browser
1.The Result
One question typically asked: Can't I just have one page and use partial page refresh to
switch the tabs? The answer: yes of course. But then you loose direct adressability of a
page.
2.Things To Explore
Rewire the application, so it only uses a single xPage. Define a mechanism that still
would allow to open a specific results page.
3.Further Readings

Exercise 15

You will learn how to use the Java perspective to add a Page Icon to your page.
2.Task Description
You will familiarize yourself with Eclipse's perspectives and you will add an icon file to
give your application a unique identifier in the browser address bar and bookmarks.
3.Detailed Steps
1. Open your sample application in Domino Designer
2. Select Window – Open Perspective – Other
3. Select Java

Exercise 15
(Note: in your installation you most likely will see a different set of perspectives
available)
4. The navigator on the left shows the Notes database as a series of folders:

Exercise 15
5. Navigate to the WebContent folder and import the favicon.ico file.

6. Remark: the WebContent directory fulfills the same function as the WebContent
directory in a J2EE application. You could introduce additional content here at your
own risk.
7. To switch back select: Window – Open Perspective – Other – Domino Designer
8. Edit the page properties for your xPages and set the pageIcon to favicon.ico and the
page title to something meaningful:

Exercise 15
4.The Result
5.Things To Explore
Obviously Domino Designer is a regular Eclipse IDE application. So most of the things
you know about eclipse will work here:
• Add additional files to the NSF using the Eclipse Java perspective
• Open a form or a view while in the Java perspective
• Add standard Eclipse plug-ins (e.g. Aptana.com or XMLSpy.com)
6.Further Readings
• http://www.eclipseplugincentral.com/
• http://eclipse-plugins.info/
• http://www.eclipse.org/articles/using-perspectives/PerspectiveArticle.html
• http://java.sun.com/j2ee/tutorial/1_3-fcs/doc/WebComponents3.html

Exercise 16

You will prepare additional form and view elements to complete the application.
2.Task Description
Every profile will be able to list connected profiles. To be able to do this we need a form
that stores this connection information and a view that lists these connections. In the
next exercise you will put these elements to use in your profiles application.
3.Detailed Steps
1. Create a new classic Notes form named “friend”
2. Add 3 fields to that form:
- FriendID (Text – Editable)
- Name (Text – Editable)
- Email (Text – Editable)
3. Create a Notes view named “friends”
4. Use this view selection formula: SELECT form = “friend”
5. Add the following columns (all sorted ascending):
- FriendID
- Name
- eMail
4.The Result

Exercise 16
5.Things To Explore
• Add additional fields like: friendTags (Multi-Value)

Exercise 17

You will learn how to use the repeat control. It will allow you you have free form
repeating elements
2.Task Description
On the profile custom control you will add a form that allows to add a profile as a friend
as well as the list of current friends with the option to remove them.
3.Detailed Steps
1. Open the profileForm custom control
2. At the bottom add a table with 5 rows and 2 columns and name it friendsTable
3. Add a visibility formula to that table: !document1.isNewNote()
4. Merge the 2 columns in the first row and add a heading “Your friends”
5. In Row 2 Col 1 add a label: Friend Name
6. In Row 3 Col 1 add a label: Friend eMail
7. In Row 2 Col 2 add a Editbox: friendName
8. In Row 3 Col 2 add a Editbox: friendEmail
9. Add a type-ahead formula for the friendName field (partial):
@DbColumn(@DbName(), "profiles", 0)
10.Add a simple code execution event to the onBlur event of the friendName field:
var value = @DbLookup(@DbName(), "Profiles", getComponent
("friendName").getValue(), "email");
var email = getComponent("friendEmail");
if(null != value){
email.setValue(value);
}
11. In Row 4, column 2 add a button name “cmdfriendsButton” label “Add as friend”
12. Add code to the onClick event:

var newFriendDoc = database.createDocument();
newFriendDoc.appendItemValue("Form", "friend");

Exercise 17
newFriendDoc.appendItemValue("FriendID", document1.getNoteID());
newFriendDoc.appendItemValue("Name",
getComponent("friendName").getValue());
newFriendDoc.appendItemValue("Email",
getComponent("friendEmail").getValue());
newFriendDoc.save();
getComponent("friendName").setValue("");
getComponent("friendEmail").setValue("");
13. Select the server Option “Partial Update” and select “friendsTable”

Exercise 17
14. Add a panel in row 5 column 2 and call it “friendsContainer” we will use that as a
refresh target later on.
15.Add a “Repeat” container inside the friendsContainer, name it “friendsRepeat”
16. Set the collection variable to friend
17. As data binding add JavaScript

if(!document1.isNewNote()){
var friendsView = database.getView("friends");
friendsView.refresh();
return friendsView.getAllDocumentsByKey(document1.getNoteID ());
}
18. Add a panel inside the repeat control. The panel is used as container for the data
binding. Call it friendsPanel. Can use that for styling the friend list (optional)
19. Add 2 computed fields below each other and use Javascript data binding to bind
them to:
- friend.getItemValueString("Name")
- friend.getItemValueString("Email")
20.Add a link label it “(Remove)”

21.Add a script to the onClick event:
friend.removePermanently(true)
22.Select Partial Update to the element friendsContainer

Exercise 17
Test your application.
4.The Result
5.Things To Explore
• Is the onBlur event the right place for our friend lookup?
• Move the entire friend mechanism into a custom control. Use control properties to
communicate with the main page/control
6.Further Readings

Exercise 18

You will learn about Themes and visual customization.
2.Task Description
You first will explore the Themes used in the discussion template and after that you will
create a new Theme for use with your application.
3.Detailed Steps
1. Create a new database based on the discussion template.
2. Set the access control of the database to allow for anonymous access (otherwise you
can't preview stuff without a server)

Exercise 18
3. Open the database in the browser and check out the functionality, both in the Notes
client and the browser.
4. Open the database in Designer and change the theme in the application properties:

Exercise 18
5. Open a theme in the Designer and have a look inside
6. Create a Theme for your own application (scrapbook or profiles) and add this code:
<control override="false">
<name>InputField.EditBox</name>
<property mode="concat">
<name>style</name>
<value>;height:20px;font-size:18px;
</value>
</property>
</control>

Exercise 18
7. Modify the <theme> tag to be;
<theme extends=”oneui”>
8. Set your application to use your new theme.

9. Preview in browser

Exercise 18
1.The Result
2.Things To Explore
Themes can extend other themes. There can be server wide themes or database
specific themes. Themes can use JavaScript to determine settings (as can be seen in
the Discussion template themes).
You also can add code to switch a theme on the fly:
var curID = context.getThemeId();
var newID = (curID == "webstandard") ? "oneui" : "webstandard";
context.setSessionProperty("xsp.theme", newID)
(Doesn't work in the Beta 2 build)

Exercise 18
3.Further Readings
Domino Designer help

Exercise 19

You will learn how to use a combination of client and server side JavaScript.
2.Task Description
There are two tasks: 1) Before a server side action is performed you execute a client
side script that determines if that server-side script should execute at all.
2) In a client side script you want to use server side script constructs.
3.Detailed Steps
1. Open the profileForm custom control.
2. Navigate to the link inside the friends repeat control that contains the “Remove”
command. Your server side code should look like that:
3. Click on the Client tab and enter the following formula:

if (confirm(“Are you sure to remove that friend?\n(You always can
talk about it)”)) {
return true;
} else {
return false
}
4. Test the new check in the browser.

Exercise 19
5. Create a new xPage in your scrapbook database.

6. Create a button with this server side code:
sessionScope.myVariable = “Test”
7. Create some buttons to test the following client side JavaScript Code:
8. tmp = “#{javascript:@DbName()}”; alert(tmp)
9. tmp = “#{sessionScope.myVariable}”; alert(tmp)
4.The Result
5.Things To Explore
• What happens if you use ${...} instead of #{...} for your macro inclusion
6.Further Readings
• http://www.jmackey.net (Category Domino 8.5 – XPages)
• http://particletree.com/features/a-guide-to-unobtrusive-javascript-validation/
• http://ajaxian.com/archives/fvalidator-unobtrusive-javascript-tool-for-easy-handling-

Exercise 19
form-validation

Exercise 20

You will learn how to call a Notes agent from xPages and hand over the document for
processing.
2.Task Description
Use your scrapbook database. Create one form with 3 fields: color, shape (editable,
text), statement (text, computed when composed, formula -> empty string), create a view
to show those documents. Put both onto a single xpage and make an agent process the
document when saved in xPages.
3.Detailed Steps
1. Create a notes form “AgentDemo” with 3 fields: color, shape (editable, text),
statement (computed when composed, formula -> empty string)
2. Create a view “AgentDemos” with 3 columns to show color, shape, statement. Use
this view selection formula: SELECT (Form = “AgentDemo”)
3. Create a new xPage “AgentSample” and add entry fields for color and shape, below
add a button to save the form and below that add a view to see the existing
document. (Don't forget the data binding!) It should look about this (feel free to make
it pretty):
4. In the button select a simple action to save all data sources and to load the same
page again:

Exercise 20
Test your page. It will create new entries with an empty statement column (not that
this example makes any business sense, that's why it is in your scrapbook).
5. Locate the data events of the xPage (near the root) and expand the events linked to
the document:
6. Add the following code:

ag = database.getAgent("agFromXpage");
noteid = agSampleDoc.getDocument().getNoteID();
ag.run(noteid)
7. Create a new LotusScript agent (the good old fashioned way), call it “agFromXpage”

Exercise 20
8. Add the following code (again not too useful):

Sub Initialize
Dim db As NotesDatabase
Dim doc As NotesDocument
Dim s As New NotesSession
Dim ag As NotesAgent
Dim noteid As String
Set db = s.CurrentDatabase
Set ag = s.CurrentAgent
noteid = ag.ParameterDocID
Dim statement As String

Set doc = db.GetDocumentByID(noteid)
If doc Is Nothing Then
Print "Document not found"
Exit Sub
End If
If doc.color(0) ="" Or doc.shape(0) = "" Then
Statement = "Half baken data entry, too bad!"
Else
Statement = "You choose " + doc.color(0) + " and "+ doc.shape(0)
End If
Call doc.ReplaceItemValue("Statement",Statement)
Call doc.Save(True,True)
End Sub
Important remark here:

Exercise 20
In a “classic” WebQuerySave agent a handle to the current document is obtained using
NotesSession.DocumentContext. That handle returns the NotesDocument after it has
been processed by the server BEFORE it hits the disk. You can use
NotesDocument.SaveOptions = “0” to prevent a save.
In xPages currently you hand over a NodeID (not a universal-ID!) to the agent and the
agent code needs to use NotesSession.currentAgent.ParameterDocID to get the ID of
the document and retrieve it. The document will be in it's saved state (so if you call an
agent other than from the PostSave event you will have an OLD copy of the data to
work on (which can be useful too).
In a WebQuerySave agent “Print” statements are sent back to the browser. Currently
the xPages implementation doesn't support this, so you might need to write return
information into a field in the document, so xPages can pick them up from there.
4.The Result
5.Things To Explore
• Use an auxiliary document to transport values to/from an agent.
• Checkout the difference between run and runOnServer
• Let your agent call a web service
6.Further Readings

Exercise 21

You will learn how to use existing @Formula in your documents
2.Task Description
You happen to have existing forms with well designed default @Formula and Input
translations you want to re-use. Enhance the example from the previous form to take
advantage of back-end @formula
3.Detailed Steps
1. Open the Notes form from Exercise 20 and enhance the field color with the following
default and input translation formulas:
Default: “Green”
Input translation: @Trim(@ProperCase(@thisValue))
2. Add an input translation to the shape field:

@Implode(@Trim(@Unique(“Shape”:@Explode(@ThisValue;" ")));" ")
... and a default value of your choice.
3. Open the xPage, select the xPage element, open the all properties tab
4. Navigate to the data/data/dominoDocument[0] property and set computeWithForm to
“both”

Exercise 21
Test the form
4.The Result
This behavior is slightly different from the classic “default value”/”input translation”
behavior. ComputeWithForm executes input translation formula even for new documents
onLoad.
5.Things To Explore
• How does the behavior change when you select only one option?
6.Further Readings

Exercise 22

You will learn how to convert an existing Notes view into an XPage automatically.
2.Task Description
In your applications there are a lot of views. To accelerate deployment of XPage based
applications you want to automate the creation of XPage based view access.
3.Detailed Steps
1. Copy the file ViewToXpage.xslt from the workshop resources to the directory
[YourNotesDataDirectory]\xsl
2. Select the database where you want to create a new XPages.
3. Use Tools – DXL Utilities – Transformer
4. Select the view you want to transform and the ViewToXpage.xslt file

Exercise 22
(In real life you use a small agent to automate that)

5. Use Window – Show Eclipse View – Other – Java – Package Explorer

Exercise 22

Exercise 22
6. Open the new newXPage.xsp file you have just created using notepad. Now save it
using UTF-8

Exercise 22
7. In the package explorer select the xpages folder, right click and select import:

Exercise 22
8. Select the file you just created:

Exercise 22
4.The Result
A fully functional but barebone XPage.
5.Things To Explore
The transformation is based on XSLT. So altering the XSLT file (make a copy first) will
lead to different results. 2 challenges here:
• Modify the stylesheet, so it uses the visuals of our sample application
• Modify the stylesheet, so it features an input form on top of the view to enter new
data.
Tip: Create the desired outcome xPage in Domino designer first. Design it until it looks
good, works well. Use 2-3 sample fields. Then wrap the pages into an XSLT
transformation replacing the sample data with xsl:apply-template statements.
6.Further Readings
• Michael Kay: XSLT 2.0
• http://www.w3schools.com -> XML and XSLT

Exercise 23

You will learn how to use a collection of multi-value fields in a Notes document as data
source for a table in XPages.
2.Task Description
In existing Notes applications you can find a typical pattern: a set of multi-value fields
holds data that would live in a child table if you use a relational database as a
persistence layer. This approach has the clear advantage of having all relevant data in
one document which makes it very portable (email routing, archival, workflow etc.)
You will dynamically generate a table with one row for each value in the input field.
3.Detailed Steps
1. Create a Notes form called “MultiValueSource”, with the following fields:
Subject - Text
Color - MultiValue Text
Shape - MultiValue Text
Taste - MultiValue Text
2. Create a new Server JavaScript Library “TableWalker”
3. Copy the content of tableWalker.txt into this new script library.

4. Create a new xPage: twDemo.xsp
5. Add the new script library to the resources
6. Add a Domino Document data source “multiDoc” to the page:

Exercise 23
7. Add a edit control “subject” to the page and bind it to the subject field.
8. Add a table with 5 columns and 3 rows to the page, call it “repeatTable”
9. In row 1 add labels in col 2-4: Color, Shape, Taste
10.In Row 2 col1 add 2 buttons, use button images and no text, call the buttons:
addRowAbove (Image /actn097.gif ) addRowBelow (Image /actn096.gif)
These can be found in C:\domino\data\domino\icons directory.
11.In Row 2 col 5 add a button (no text) called “deleteButton (Image /vwicn038.gif)
12.Make all the buttons 25x25 pixels wide
13.In columns 3,4,5 add edit boxes named color, shape, taste
14.Merge the cells in row 3
15.Add 2 buttons: Add / Save
16.Add visual style as you deem fit.

17. Add a repeat control below the table. Name it “fieldGroup”, the collection name
“fieldGroup” and the Index name “rowIndex”, select “JavaScript” for the data binding

Exercise 23
18.Add the following code to the data binding:

var scopeVariableName = "group";
var fieldNames = "color,taste,shape";
tableWalker.getDataSource(scopeVariableName,multiDoc,fieldNames)
19. Add the following code to the “addRowAbove” button:

tableWalker.addRow("group", rowIndex)
20. Add the following code to the “addRowBelow” button:

tableWalker.addRow("group", rowIndex+1)
21. Add the following code to the “deleteButton” button:

tableWalker.removeRow("group", rowIndex)
22. Add the following code to the “add” button:

tableWalker.addRow("group")
23. Add the following code to the “save” button:

tableWalker.updateDocument("group", multiDoc)
multiDoc.save()
24. Now the tricky part: use the outline view (on the left side, best to maximize it for this
operation by double clicking on the header) to reorder the elements. Your outline
currently looks like this:

Exercise 23
Rearrange the elements until they look like that: (might be a bit tricky in the
beginning)

Exercise 23
The repeat element envelopes the middle row of this table.

Tip: if you don't like drag & drop you can use the source code to rearrange the
elements as well.
25. Adjust the data binding for the 3 fields: color, shape and taste. Select “Advanced”

Exercise 23
“Expression Language and add “fieldGroup[0]” (fieldGroup[1], fieldGroup[2]
respectively):
You may need to close and re-open the XPage to see the changes.
Note: you also could select “Custom” and add: #{fieldGroup[0]}
4.The Result
Click on Add to see new lines.
5.Things To Explore
• Use other UI elements than simple entry boxes for entering data.
• Add validation to the fields
• Create a custom control, that can use a property to determine the # of data columns
6.Further Readings
• Table walker for Notes clients:

Exercise 23
http://www-
10.lotus.com/ldd/sandbox.nsf/ecc552f1ab6e46e4852568a90055c4cd/f2acda4419a5e
3cd00256c0e00314e05?OpenDocument&Highlight=0,tablewalker

Exercise 24

You will learn how to use embedded HTML and JavaScript including Dojo.
2.Task Description
Create a new XPage in your scrap book database to explore the possibilities of
embedded JavaScript and HTML.
3.Detailed Steps
1. Create a new XPage “PlayWithHTML”
2. Switch from the Design to the Source view:
You should see a bare xPage:
Important note: all xPage elements use the namespace xp:, Don't use it for your stuff.
3. You can add any HTML inside the the xp:view and it will be rendered in your page:
<h1>This is a HTML headline</h1>
Amazing isn't it?

Exercise 24
4. xPages renders any markup in computed fields into literal strings. To use controls to
actually output HTML you need to disable output-escaping (this is very useful e.g. In
views to render custom hyperlinks). Output-escaping is defined in the all properties
section of any control.
5. Stuff added to the xPage source or a computed field can include JavaScript or CSS
statements. Be aware that they become part of the page body (inside the
<body></body> tags). Try to add this JavaScript:
<script language="Javascript">
XSP.addOnLoad(function () {
initLocal(); } );
</script>
This will call an additional function once your page has been loaded. The function can
be in a library (recommended or elsewhere on the page.
6. When working with client side script (e.g. In Dojo calls) you need to provide the ID of
the element. Since xPages is designed to run in various environments where
elements can be repeated, the html/DOM it is only generated at rendering time. To
access the ID you need to call a server-side function. Inside an xPages event this is
easy using the syntax #{id:NameOfYourElement}. However you might want to
reference an element outside of an event.
7. Add a new label to the page. Name it FancyLabel. We use it as target for the Demo.

Exercise 24
In real life applications you will probably do more fancy things there.
8. Add a computed field to the top of the page and add the following code to it. Make
sure you set the escape property to false:
var out = '<script type="text/javascript">\n';

out += 'function initLocal() {\n';
out += 'var flName = "'+getClientId("fancyLabel")+'";\n';
out += 'alert("anytime you are ready to mess with " + flName);\n';
out += 'var fl = dojo.byId(flName);\n';
out += 'fl.innerHTML = "Hello World";\n';
out += '}\n</script>\n';
out
9. Preview in Browser, you should get a prompt and a hello world in red
4.The Result
5.Things To Explore
• Use a view datasource to render a Dojo graphics
6.Further Readings
• http://www.w3schools.com Learn XML (NameSpace)

Exercise 24
• http://www.w3c.org XML definition
• http://www.dojotoolkit.org

Exercise 25

You will localize an XPage to support more than one language.
2.Task Description
Your application should be available in multiple languages.
3.Detailed Steps
1. Open the XPages tab of the application properties
2. Check the “Create property files for text localization”

3. Add languages

Exercise 25
You need to specify the default language!
4. Select Project – Clean... to rebuild your project
5. Go back to the localization options and select the “Do not modify existing property
files”
6. Add the “Package Explorer” View to the “Domino Designer” perspective

Exercise 25

Exercise 25
7. Navigate to the xPages folder. You will find the property files for each language there:

Exercise 25
8. Edit the content of the property files with your language:
9. Change the default language of your browser to see the same page in different
languages:
10.For double byte languages the property file needs to use an extended syntax.

Exercise 25
世界您好 would be written as \u4e16;\u754c\u60a8\u597d
4.The Result
5.Things To Explore
• Access properties in JavaScript
• Define your own properties for your custom controls
6.Further Readings
• http://www-10.lotus.com/ldd/ddwiki.nsf/dx/07102008101402MKECU6.htm
• http://www-10.lotus.com/ldd/ddwiki.nsf/dx/07102008113225MKEED5.htm
• http://www-10.lotus.com/ldd/ddwiki.nsf/dx/FAQ-XPages-Whats-in-property-files.htm

Exercise 26

You will learn how to call a Java function in XPages.
2.Task Description
Some code is better written in Java (low level network communication, stuff that readily
exists etc.). You will create a Java Class and call it from your XPage.
3.Detailed Steps
1. Switch to the Java perspective:
Locate the WebContent/WebInfo folder and create a directory source and below a
directory javaSample

Exercise 26
2. Create a new JavaClass helloWorld

Exercise 26
3. Use the following code:

package javaSample;
public class HelloWorld {
public String sayHello(String whoAreYou) {

return "Hello " + whoAreYou +", nice to meet you" ;
}
}
4. You need to change the classpath to include this directory:

Exercise 26

Exercise 26
5. Switch back to the Domino Designer perspective

6. Create a new xPage (or recycle your previous HelloWorld page)
7. Add a label, an editBox (named myName), a button and a computed field
8. Bind the computed field to requestScope.ourGreeting
9. Add action code to the button (server side)
var greetMe = new javaSample.HelloWorld;
var myName = getComponent("myName").getValue();
var result = greetMe.sayHello(myName);
requestScope.ourGreeting = result;
10. Test it

Exercise 26
1.The Result
2.Things To Explore
3.Further Readings

Exercise 27

First, you will learn how to “componentize” your XPages application. We will re-use and
assemble XPages components together with NSF and Web components into a
Composite Application.
2.Task Description
You will transform your stand-alone Scrapbook application into a re-usable component.
Afterwards, you will create a NSF-based Composite Application and add the newly built
component there.
3.Detailed Steps
1. Open Domino Designer from the desktop icon.
2. Open your xScrapbook application.
3. Navigate to Composite Applications > Components. Right-click on New

Component.
4. Name the new component MyViewComponent.

Exercise 27
5. Select results as the XPage to use for View mode.
6. Save the new component and navigate back to Lotus Notes. Create a new Composite
Application MyScrapbookCA there. Select the – Blank Composite Application –
template for the new application.

Exercise 27
7. The application opens in read mode, displaying an empty page. From the Actions
menu, select Edit Application:
8. From the right-hand palette, select My Palette, then, from the Add Component drop-
down, select Add NSF Component.

Exercise 27
9. Name the new component MyScrapbook.
Select Browse and – from the Domino server – choose your Scrapbook application.
Locate the MyViewComponent.component element. Click OK twice.
Note: You might notice the effect that, although you have selected the Scrapbook
application on the server, the Filename still points to some other database.
This effect has been reported to mostly occur in a VMWare scenario. To fix it,
proceed with the following steps:
• Close both Domino Designer and Lotus Notes.
• Shutdown Lotus Domino (quit on the console) and restart the server.
• Open the Composite Application in Notes and try again.

Exercise 27
10.Drag the MyScrapbook component from the right-hand palette into the empty middle
area of your screen and drop it there. The result should look like this:
11.Click File > Save and Close. The application is getting opened in Notes.

Exercise 27
4.The Result
Notice that the previously displayed authentication dialog – when you tested your XPage
in a web browser – has been skipped. In Lotus Notes, you are already authenticated
since you logged in.
This ID based authentication has been automatically mapped to the corresponding
Internet authentication – a real Single SignOn!
5.Things To Explore
6.Further Readings

Exercise 28

We will wire our previously XPages component to interact with your inbox within a
2.Task Description
You will create the interfaces required to enable our component for exchanging data with
other parties. As a second component, you will add your inbox to the Composite
Application.
3.Detailed Steps
1. Switch back to edit mode (via Actions > Edit Application), then right-click to Blank
Page in the left-hand navigator. Select Edit Page Properties.

Exercise 28
2. Name the page MyScrapbook.
3. Save and Close your application. Notice that the tab name has been changed. While
having the Scrapbook application opened in Notes, select Actions > Edit
Application from the main menu.
4. From the right-hand Component Palette switch to Component Library.

Exercise 28
5. Drag the Notes Mail View component to the lower end of the middle area and drop it
there. The result should look like this:
6. Save and Close the editor.

Exercise 28
7. Switch back to Domino Designer and navigate to the MyViewComponent
component. Add an event sendTo which publishes a String property. Save the
component.
8. Navigate to your custom controls. Open the profileForm.
9. Next to the Email edit box, create a Send Email URL Link control.

Exercise 28

Exercise 28
10.Assign a new client-side Simple Action to that link. From the Category drop-down,
select Component and let the link publish our new component property:
11.Select Compute value… to specify the Event Value.

Exercise 28
12.Add the following code:
13.Click OK and save the XPage. Back in Lotus Notes, turn your application into edit
mode again.
14.Right-click on the MyScrapbook page, then select Wiring from the menu.

Exercise 28
15.Click the Disable strict type checking button on the lower end of the page. Then,
drag the sendTo property from MyScrapbook onto the second Create new memo
using… action of the Notes Mail View.
16.Close the Wiring tab, then Save and Close the editor. The application comes up in
Notes. Open a profile (e.g. Max Mustermann) and click on Send Email.
17.A new mail should be created.

Exercise 28
18.Navigate back to the MyViewComponent component in Domino Designer. Add a
second event authorEvent, which consumes a property sent from outside.
19.Save the component. Then, right-click to the Custom Components element in the
navigator and select New Custom Control.
20.Name the new control authorEventHandler.
21.From the Events tab, create a New Component Event and name it authorEvent.

Exercise 28

Exercise 28
4. We will add two Server-side Simple Actions there. First, let the event trigger a script
execution:
5. Second, let the event open the results page.

Exercise 28
6. Save and close the newly created custom control. Open the container custom
control. Drag the authorEventHandler custom control to the end of the current
control.
7. As the result, you should see the embedded custom control both on the page and as
part of the Outline.
8. Save and close the current custom control.

Exercise 28
9. Back in Lotus Notes, edit your Composite Application again. Right-click on the
MyScrapbook page, then select Wiring from the menu.
10.Right-click on the Notes Mail View component and click on Select as wire source.
11.Drag the From property from the Notes Mail View onto the authorEvent action of
the MyScrapbook component.
12.Close the Wiring editor, then Save and Close the Composite Application Editor.

Exercise 28
13.From the application, create a Scrapbook profile for yourself.
1. From the Inbox component, create two new mails: one sent to you, the other one
sent to someone you might imagine (e.g. muster@mm.com).
At least one of the mails should contain the name of an (English) colleague - John
Doe is a good example. The purpose of this will become more clearly in the next
exercises.
14.After sending, you should have two mails in your inbox (OK, the second one is a
router-generated delivery error, but just to show…). Click on the mail you have sent to
yourself.

Exercise 28
4.The Result
The corresponding profile from Scrapbook – if existing - should be opened, while the
search for “Mail Router” doesn’t return any match.
5.Things To Explore
6.Further Readings

Exercise 29

The My Widgets feature is installed with Notes since release 8.0.1. Widgets also enable
power users and administrators to create and edit widgets, and deploy them to users to
engage a Notes form, view, or document or third party services such as Web page, feed,
or Google Gadget.
This lab demonstrates how to leverage the Lotus Notes My Widgets feature and
programmatically wire a widget with XPages and other NSF components.
2.Task Description
You will enable the My Widgets feature on Notes client side. Afterwards, you will add a
Web widget to your sidebar and re-use this widget as part of our previously created

Exercise 29
3.Detailed Steps
1. Open the Lotus Notes preferences by selecting File > Preferences.
2. Navigate to the Widgets section. Enable the Show Widget Toolbar and the My
Widgets Sidebar panel option.

Exercise 29
3. Save and close the preferences. Notice the new My Widgets sidebar component.
From the upper right component header menu, select Get Started…
4. Our widget will consume a Web Page, therefore select the Web Page option.
5. Specify www.yasni.com as our Web source.
6. Specify a HTTP POST as the submit option of choice.

Exercise 29
7. From the list of forms, select the one available. Click Next.
8. Navigate to the Advanced tag and enable the Configure name property.
9. Finish your widget creation.

Exercise 29
10.Open your MyScrapbookCA application in Composite Application Editor (via
Actions > Edit Application). Select My Palette from the right-hand menu and notice
the now available widget you created before.
11.Drag the newly created widget component and drop it next to the mail component.
12.Save and Close the editor.

Exercise 29
13.Back in Domino Designer, navigate to the MyViewComponent component. Add a
new publishing event searchTopic.
14.Save the component, and then navigate to the searchResults custom control.
15.Select the View element, then, from the Properties tab, open the All Properties
section.
16.Navigate to data\var and name the view collection variable rowData.

Exercise 29
17.Right-click to the Email column of the view and select Insert Column from the menu.
18.Navigate to the View Column Header section of the Properties and label it Search
Yasni.

Exercise 29
19.Select Data from the column properties.
20.Add the following Computed value code:
21.From the Events tab, add a Client-side Simple Action.

Exercise 29

Exercise 29
22.We will publish our component property searchTopic there:
23.Add the following Event Value code:
24.Let the property get published by clicking a link:
25.Save and close the searchResults custom control.

Exercise 29
26.Back in Lotus Notes, open your Composite Application in edit mode. Open the
Wiring editor again. Connect the searchTopic property to the name action.
27.Re-arrange (if you want) and test the resulting application.

Exercise 29
4.The Result
The “Search Yasni” link should initiate a Yasni search based on the profile chosen and
return the corresponding results.
5.Things To Explore
6.Further Readings

Exercise 30

The My Widgets feature is installed with Notes since 8.0.1. Using available policy and
preference settings, an administrator – you - can control which users can display My
Widgets in their sidebar as well as various levels of access to My Widgets functionality.
End users will typically not see My Widgets in their sidebar, yet still access widgets that
are available when they act on Live Text in their (i)Notes documents.
2.Task Description
In this section, you will create and deploy the policies required for enabling the My
Widgets feature for Notes and iNotes users.
3.Detailed Steps
1. If Domino has not been started, start it now.
2. Open Domino Administrator from the desktop icon.
3. Assure that you are connected to the Domino server.
4. Create a new widget catalog on your Domino server.
Note: You could either achieve that by creating a new application based on the
toolbox.ntf template or – as used in this exercise – create a replica from an existing
catalog (widgetcatalog.nsf) hosted on www.noteswidgets.com.
5. Navigate to the Configuration tab. From the right-hand menu select Policies >
Create.

Exercise 30
6. Create a new Mail Settings document.
7. Name the new Setting iNotesWidgets. Navigate to the Lotus iNotes tab and select
Configuration.
8. Navigate to the Widget Settings. Enable the Show the Widgets folder in the Mail
outline option.

Exercise 30
9. Save and close the new document. Again, select Policies > Create to build a new
Dynamic Desktop Settings document.
10.Name the Settings document Widgets. Navigate to the Widgets tab and enforce the
following settings (keep the defaults for all other options) on client side:
Widget catalog server: <your server>

Widget catalog application name: <your catalog>

Exercise 30
11.Save and close the Settings document. Click on Policy > Create again to build a new
Policy.
12.Name the explicit Policy /MyWidgets. Select the Widgets Desktop and
iNotesWidgets Mail Settings documents to assign.

Exercise 30
13.Save and close the Policy. Then, navigate to the People & Groups tab. Select
Groups from the left-hand navigator and create a new group containing all users:
14.Save and close the new group.

Exercise 30
15.Assign the /MyWidgets policy to the All group:
16.If a warning dialog comes up, click Yes to overwrite existing assignments.
17.Navigate to the Domino console. Run the following command:
tell adminp process mail policy

Exercise 30
4.The Result
You have created and deployed the policies required for enabling the Notes and iNotes
users to leverage the My Widgets feature.
5.Things To Explore
6.Further Readings

Exercise 31

You learn how to start enabling your XPage application into a Web widget.
2.Task Description
As a next step, we will modify our existing Scrapbook application, enabling it to run as a
Web widget that could later be called via Live Text. As the result, our application will
open the corresponding profile for a user selected within a Notes document.
This requires our application to accept and process a person’s name by either HTTP
POST or GET request.
But - Although our home XPage is being rendered as a Web form, the Dojo technology
used by XPages prohibits a “simple” form submit. Why?
Simply said - Clicking the Search button does more than just POSTing the form. The two
simple actions we implemented there generated tons of JavaScript code which is getting
executed if you click the button. This code sets most of the data to post within the form
dynamically (and does some more strange things) before sending it to the Domino
server or Notes client.
Only posting the “static” form as usually triggered by Live Text wouldn’t have any result
for our XPage – because of the missing (Dojo-initiated) data set within the form.
Therefore, we will extend our home XPage to also accept and process a simple HTTP
GET request.

Exercise 31
3.Detailed Steps
1. Open the Scrapbook application in Domino Designer. Open the home XPage.
2. Navigate to the Events tab. From the Page navigator, select beforePageLoad and
click Add Action.
3. Add an Execute Script action containing the following code:
v = facesContext.getExternalContext().getRequest().getParameter(“name”);
if (v != null)
{
url = @LeftBack(context.getUrl().toString(),”/”) +
facesContext.getExternalContext().getRequestContextPath();
sessionScope.nameToSearch = v;
facesContext.getExternalContext().redirect(url + “/results.xsp”);
}

Exercise 31
4. Save and close the home XPage.
5. Close Domino Designer and Lotus Notes, if opened.

Exercise 31
4.The Result
You have enabled your Scrapbook application to initiate a profile search based on a
HTTP GET request.
5.Things To Explore
6.Further Readings

Exercise 32

You learn how to add your XPage application as a Web widget to the Notes sidebar.
2.Task Description
We will create a Web widget pointing to our Scrapbook application and configure its Life
Text triggered behavior. As the result, our application will open the corresponding profile
for a user selected within a Notes document.
3.Detailed Steps
1. Start Lotus Notes.
Note: The following steps are only required in our lab scenario to assure that the
policy is getting assigned directly.
2. Open you local names.nsf.
3. By holding down the CTRL + SHIFT keys, select View > Go To from the main menu.
Navigate to the ($Policies) view:
4. Remove all exiting policies from the view.

Exercise 32
5. Restart Lotus Notes.
6. Open the Lotus Notes preferences by selecting File > Preferences. Navigate to the
Widgets tab and notice that the widget catalog information specified during last
exercise has been deployed.
If not already done in a previous lab, enable the Show Widget Toolbar and the My
Widgets Sidebar panel option.
7. Click OK to save the preferences.
8. Notice the My Widgets sidebar component. From the upper right component header
menu, select Get Started…

Exercise 32

Exercise 32
10.Specify <your server>/XScrapbook.nsf/home.xsp as our Web source then click
Next >.
11.Specify a HTTP GET as the submit option of choice.
12.You might need to authenticate with the Domino Web Server. Provide your
credentials and assure to enable the Remember my password box, and then click
OK.

Exercise 32
13.The home XPage is getting opened. Extend the URL of the XPage by the following
QueryString parameter:
?name=Nobody
14.Notice: Do not click the Load URL button before selecting Next >.
15.From the Configure a Widget dialog, name the widget Search Profile, then navigate
to the Advanced tab.
16.Enable the Configure name option and click Next >.
17.Click Finish.
18.The new widget has been added to the My Widgets sidebar component.

Exercise 32
19.Right-click on the new widget, then select Configure a New Action.
20.Select the Person recognizer and specify person.name as the type property. The
results should be displayed in a New Window.
21.Click OK.

Exercise 32
22.Navigate to your inbox. Open the mail we sent during exercise 28:
23.After a couple of seconds, the name of the colleague – in this case John Doe - should
be underlined:
24.Click on the name and select the first menu item:

Exercise 32
25.Your Scrapbook application comes up within a new window, showing the results
page. Our search would not return any match if there is no profile available for this
person:
26.If the search failed, create a new profile for – in this case – John Doe and try again.
27.In a last step, we will publish this newly created widget to our company’s widget
catalog. Therefore, right-click on the new widget and select Publish to Catalog.

Exercise 32
28.Name the widget Search Profile from Notes, the save and close the document.
4.The Result
Your widget is now fully functional and could be downloaded and installed by other
users.
5.Things To Explore
6.Further Readings

Exercise 33

You learn how to add your XPage application as a Web widget to the iNotes navigator
pane.
2.Task Description
Since 8.5, you can define a set of widgets that are integrated into the Lotus iNotes mail
client, and you can specify the toolbox catalog and category names from which users
can select and install their own widgets. These widgets display in the Widgets folder in
the navigation pane. When a user launches a widget, it may optionally solicit some input
within a dialog or from selected text on the page, and then eventually open an external
Web page in a new tab or a new browser window. Users can enter any text that is
required by the service (such as text to be translated by a translation service), and the
application results or output is displayed.
Our next steps will demonstrate how to create and deploy a widget that leverages our
Scrapbook application to an iNotes user.
Notice the following Limitations (from 8.5 InfoCenter):
There are a number of limitations regarding the use of widgets with Lotus iNotes
compared to the Notes client. These are listed below. Catalog widgets should be tested
with Lotus iNotes to make sure that they work well on that platform prior to making them
available to Lotus iNotes users. Catalog widgets are made available to Lotus iNotes
users by adding "iNotes 8.5" to the platform field in the catalog document for the widget,
and by including them in a category, or categories, specified in inotes_config.xml. Note
that filtering widget catalog entries by platform type is relatively expensive from a server
performance standpoint compared to filtering by category, so to maximize server
performance, avoid including widgets that cannot support iNotes in the categories used
to expose widgets to iNotes users. Following is a list of widget limitations when using
widgets with Lotus iNotes:
• Only widget definitions (<palleteItem> elements) with

providerId="com.ibm.rcp.toolbox.web.provider.WebServicesPalleteProvider" are
supported at this time.
• The only supported output targets for a widget is a Lotus iNotes tab panel and a new
browser window. The <actionType> element in the widget XML specifies the default
output target. The sidebar and floating window targets are not supported. If the
<actionType> element for the widget specifies an unsupported output target, then the
output will be displayed in a Lotus iNotes tab panel. Note that the user can override

Exercise 33
the default output target by selecting the desired target in the Open context menu
item for the widget..
• The only supported contentTypeId for <contextData> elements is
content.textSelection.
• It is possible for users navigating a Web site within a tab panel in Lotus iNotes to click
on a link that will navigate to a different top level browser page. Due to browser
architecture, there is no way for Lotus iNotes to prevent this from occurring. It is best
to avoid using tab panels with Web sites that contain such links and to open these
web pages in a new browser window instead.
• Lotus iNotes cannot detect selected text within a Web page that is displayed in a
Lotus iNotes tab pane for the purpose of passing the selected text as an input
parameter to a widget, if the Web page is served from a different server than Lotus
iNotes.
3.Detailed Steps
1. From the My Widgets sidebar component header menu, select Get Started… again.

Exercise 33
3. Specify <your server>/XScrapbook.nsf/home.xsp as our Web source, then click
Next >.
4. Specify a HTTP GET as the submit option of choice.
5. You might need to authenticate with the Domino Web Server. Provide your
credentials and assure to enable the Remember my password box, then click OK.

Exercise 33
6. The home XPage is getting opened. Extend the URL of the XPage by the following
QueryString parameter:
?name=Nobody
7. Notice: Do not click the Load URL button before selecting Next >.
8. From the Configure a Widget dialog, name the widget Search Profile (iNotes), then
navigate to the Advanced tab.
9. Enable the Configure name option and click Next >.
10.Click Finish.
11.The new Widget has been added to the My Widgets sidebar component.

Exercise 33
12.Right-click on the new widget, then select Configure a New Action.
13.Select the Text Selection recognizer and specify contents as the type property. The
results should be displayed in a Floating Window.
14.Click OK.

Exercise 33
15.In a last step, we will publish this newly created widget to our company’s widget
catalog. Therefore, right-click on the new widget and select Publish to Catalog.
16.Name the widget Search Profile from iNotes, the save and close the document.

Exercise 33
17.Navigate to the Attachment section within the document. Open the extension.xml
file in a text editor such as Notepad.

Exercise 33
18.Open the Windows Explorer and navigate to your Lotus Domino installation directory.
Within the data\domino\html subdirectory, find the file inotes_config.xml.template.
19.Copy the template into a new file inotes_config.xml. Open this file in another
Notepad window.

Exercise 33
20.From the extension.xml window, copy all the code – except the first line – and insert
it into the inotes_config.xml before the closing </inotes:extensions> tag:
21.Save and close the inotes_config.xml. Afterwards, restart your Domino server.
22.If Domino is up and running again, open your Browser client and navigate to your
mail file, e.g. <your server>/mail/dadmin.nsf.

Exercise 33
23.After authentication, you should see a Widgets section within the left-hand navigator.
24.Navigate to your inbox. Open the mail we sent during the previous exercise 28:

Exercise 33
25.Select the name of the colleague (in this case John Doe), then expand the Widgets
tab and click on Search Profile (iNotes).
4.The Result
As the result, the profile search should open the corresponding document.

Exercise 33
5.Things To Explore
6.Further Readings

Xpages Workshop Complete Labs01-33

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Xpages Workshop Complete Labs01-33

Uploaded by

Copyright:

Available Formats

Exercise 1

1.What will you learn

© 2008 IBM Corporation page 1/5

3. Create one Custom Control:

© 2008 IBM Corporation page 2/5

Press <CTRL> + S to save (or File/Save from the menu)

© 2008 IBM Corporation page 3/5

Add your new hwControl Custom Control to the XPage hwPage.

Press <CTRL> + S to save (or File/Save from the menu)

© 2008 IBM Corporation page 4/5

© 2008 IBM Corporation page 5/5

1.What will you learn

© 2008 IBM Corporation page 1/13

© 2008 IBM Corporation page 2/13

© 2008 IBM Corporation page 3/13

© 2008 IBM Corporation page 4/13

© 2008 IBM Corporation page 5/13

6. Add code to the button's onClick event:

© 2008 IBM Corporation page 6/13

© 2008 IBM Corporation page 7/13

© 2008 IBM Corporation page 8/13

© 2008 IBM Corporation page 9/13

10.Preview the result

© 2008 IBM Corporation page 10/13

12.Add some text above and below the panel

© 2008 IBM Corporation page 11/13

© 2008 IBM Corporation page 12/13

© 2008 IBM Corporation page 13/13

1.What will you learn

© 2008 IBM Corporation page 1/12

Repeat 2,3 & 4 for each subsequent Xpage.

© 2008 IBM Corporation page 2/12

© 2008 IBM Corporation page 3/12

© 2008 IBM Corporation page 4/12

© 2008 IBM Corporation page 5/12

© 2008 IBM Corporation page 6/12

© 2008 IBM Corporation page 7/12

© 2008 IBM Corporation page 8/12

TIP- Use the outline to navigate the panels easily.

© 2008 IBM Corporation page 9/12

© 2008 IBM Corporation page 10/12

© 2008 IBM Corporation page 11/12

© 2008 IBM Corporation page 12/12

1.What will you learn

© 2008 IBM Corporation page 1/5

© 2008 IBM Corporation page 2/5

5. Create three more Custom controls:

© 2008 IBM Corporation page 3/5

© 2008 IBM Corporation page 4/5

© 2008 IBM Corporation page 5/5

1.What will you learn

© 2008 IBM Corporation page 1/10

© 2008 IBM Corporation page 2/10

© 2008 IBM Corporation page 3/10

© 2008 IBM Corporation page 4/10

© 2008 IBM Corporation page 5/10

© 2008 IBM Corporation page 6/10

12.In the helper dialog change the following control types”

© 2008 IBM Corporation page 7/10

© 2008 IBM Corporation page 8/10

© 2008 IBM Corporation page 9/10

© 2008 IBM Corporation page 10/10

1.What will you learn