xpages workshop complete labs01-33

Exercise 1

1.What will you learnYou will become familiar with the basic working of the XPages editor and the components palette.

2.Task DescriptionYou will create the mandatory “Hello World” code example and prepare some structure for the subsequent exercises.

3.Detailed Steps1. 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

1.What will you learnYou will become familiar with conditional display of information in XPages. You will learn the difference between full and partial refresh.

2.Task DescriptionChange 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 Steps1. 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 Scriptvar 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

1.What will you learnYou will build the foundation for our sample application and learn about application structure that allows styling your application easily.

2.Task DescriptionYou will create three XPages that will provide access to our sample application. You will prepare some structure for the subsequent exercises.

3.Detailed Steps1. 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 ResultUse 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/


http://www.w3schools.com/css/

http://www.csszengarden.com/

http://www.alistapart.com/

http://www.w3.org/Style/CSS/

Exercise 4

1.What will you learnYou 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 DescriptionYou 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 Steps1. Open the container custom control2. 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- searchResultsTip: 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 ResultChange the URL to see each page. e.g. home.xsp, results.xsp & profile.xspWe 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

1.What will you learnYou will learn how to display notes documents in XPages using form properties and simple data binding.

2.Task DescriptionCreate 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 Steps1. 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)TimeZoneEmail


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 DOBset 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

1.What will you learnYou will learn how page flow works in XPages and how to code actions behind action buttons.

2.Task DescriptionYou will complete the “profileForm” custom control from exercise 5.

3.Detailed Steps1. 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 tab5. 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 cancel10.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

1.What will you learnYou will learn how to provide data to the different controls on the xPage and how to enable type-ahead functionality in xPages.

2.Task DescriptionThe profileForm custom control has combobox design elements. You will provide static and dynamic lookup for the possible values for this controls.

3.Detailed Steps1. Create a Notes form named “keywords”

Add the following fieldsName (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

1.What will you learnYou will learn how to show data from a Notes view in xPages.

2.Task DescriptionxPages 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 Steps1. 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 headerCheck 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 Readingshttp://www.lotus911.com/nathan/escape.nsf/d6plinks/NTFN-7FRG79


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

Exercise 9

1.What will you learnYou 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 DescriptionYou 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 Steps1. Open the “SearchForm” custom control in the xPages editor2. 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 250px9. Add a button named “Search” with the class profilesButtonCommand

- Preview the XPage in your browser10.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.nameToSearch14.Add a second simple action “Open Page” -> results.xsp15.Open the “searchResults” Custom control16.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

1.What will you learnYou will add data validation to the forms in the sample application.

2.Task DescriptionAdd data validation to the search and the profile form. You will use mandatory fields, minimum input length fields and custom validation fields.

3.Detailed Steps1. 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 control6. Add “Required Field” to FirstName and LastName and check the resultsAdd 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


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

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

Exercise 11

1.What will you learnYou 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 DescriptionYou 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 Steps1. 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

1.What will you learnYou will understand how to use server and client side JavaScript libraries for validation (or other purposes).

2.Task DescriptionCreate 2 JavaScript Libraries with sample code (provided). One client JavaScript, One server JavaScript. Link them into your sample plage.

3.Detailed Steps1. In Designer, expand Code in the Navigator and double-click on Script Libraries2. 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

1.What will you learnYou will use a custom validator using a regular expression and another one using your own JavaScript code.

2.Task DescriptionAdd 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 Steps1. Add 3 fields: eMail, test1, test22. 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/


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

http://regexpal.com/

http://regexlib.com/

Exercise 13


Exercise 14

1.What will you learnYou will learn how to complete the tab navigation and how to communicate state information.

2.Task DescriptionMake 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 Steps1. Open the “container” custom control2. 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 ResultOne 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 ExploreRewire 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

1.What will you learnYou will learn how to use the Java perspective to add a Page Icon to your page.

2.Task DescriptionYou 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 Steps1. Open your sample application in Domino Designer2. 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 Designer8. 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 ExploreObviously 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


http://www.eclipseplugincentral.com/

http://java.sun.com/j2ee/tutorial/1_3-fcs/doc/WebComponents3.html

http://www.eclipse.org/articles/using-perspectives/PerspectiveArticle.html

http://eclipse-plugins.info/

Exercise 16

1.What will you learnYou will prepare additional form and view elements to complete the application.

2.Task DescriptionEvery 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 Steps1. 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

1.What will you learnYou will learn how to use the repeat control. It will allow you you have free form repeating elements

2.Task DescriptionOn 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 Steps1. Open the profileForm custom control2. At the bottom add a table with 5 rows and 2 columns and name it friendsTable3. 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 Name6. In Row 3 Col 1 add a label: Friend eMail7. In Row 2 Col 2 add a Editbox: friendName8. In Row 3 Col 2 add a Editbox: friendEmail9. 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 JavaScriptif(!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

1.What will you learnYou will learn about Themes and visual customization.

2.Task DescriptionYou 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 Steps1. 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 ExploreThemes 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 ReadingsDomino Designer help


Exercise 19

1.What will you learnYou will learn how to use a combination of client and server side JavaScript.

2.Task DescriptionThere 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 Steps1. 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-


http://www.jmackey.net/

http://ajaxian.com/archives/fvalidator-unobtrusive-javascript-tool-for-easy-handling-form-validation

http://particletree.com/features/a-guide-to-unobtrusive-javascript-validation/

Exercise 19

form-validation




Exercise 20

1.What will you learnYou will learn how to call a Notes agent from xPages and hand over the document for processing.

2.Task DescriptionUse 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 Steps1. 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!"ElseStatement = "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

1.What will you learnYou will learn how to use existing @Formula in your documents

2.Task DescriptionYou 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 Steps1. 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 tab4. Navigate to the data/data/dominoDocument[0] property and set computeWithForm to

“both”


Exercise 21

Test the form

4.The ResultThis 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

1.What will you learnYou will learn how to convert an existing Notes view into an XPage automatically.

2.Task DescriptionIn 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 Steps1. Copy the file ViewToXpage.xslt from the workshop resources to the directory

[YourNotesDataDirectory]\xsl2. 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 ExploreThe 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


http://www.w3schools.com/

Exercise 23

1.What will you learnYou 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 DescriptionIn 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 Steps1. Create a Notes form called “MultiValueSource”, with the following fields:

Subject - TextColor - MultiValue TextShape - MultiValue TextTaste - 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.xsp5. 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, Taste10.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 wide13.In columns 3,4,5 add edit boxes named color, shape, taste14.Merge the cells in row 315.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 ResultClick 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/f2acda4419a5e3cd00256c0e00314e05?OpenDocument&Highlight=0,tablewalker





Exercise 24

1.What will you learnYou will learn how to use embedded HTML and JavaScript including Dojo.

2.Task DescriptionCreate a new XPage in your scrap book database to explore the possibilities of embedded JavaScript and HTML.

3.Detailed Steps1. 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)


http://www.w3schools.com/

Exercise 24

• http://www.w3c.org XML definition

• http://www.dojotoolkit.org


http://www.w3c.org/

Exercise 25

1.What will you learnYou will localize an XPage to support more than one language.

2.Task DescriptionYour application should be available in multiple languages.

3.Detailed Steps1. 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


http://www-10.lotus.com/ldd/ddwiki.nsf/dx/07102008101402MKECU6.htm

http://www-10.lotus.com/ldd/ddwiki.nsf/dx/FAQ-XPages-Whats-in-property-files.htm

http://www-10.lotus.com/ldd/ddwiki.nsf/dx/07102008113225MKEED5.htm

Exercise 26

1.What will you learnYou will learn how to call a Java function in XPages.

2.Task DescriptionSome 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 Steps1. 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 perspective6. Create a new xPage (or recycle your previous HelloWorld page)7. Add a label, an editBox (named myName), a button and a computed field8. Bind the computed field to requestScope.ourGreeting9. 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

1.What will you learnFirst, 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 DescriptionYou 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 Steps1. 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 ResultNotice 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

1.What will you learnWe will wire our previously XPages component to interact with your inbox within a Composite Application.

2.Task DescriptionYou 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. [email protected]).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 ResultThe 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

1.What will you learnThe 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 DescriptionYou 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 Composite Application.


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 ResultThe “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

1.What will you learnThe 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 DescriptionIn 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 ResultYou 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

1.What will you learnYou learn how to start enabling your XPage application into a Web widget.

2.Task DescriptionAs 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 ResultYou 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

1.What will you learnYou learn how to add your XPage application as a Web widget to the Notes sidebar.

2.Task DescriptionWe 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 ResultYour widget is now fully functional and could be downloaded and installed by other users.

5.Things To Explore

6.Further Readings


Exercise 33

1.What will you learnYou learn how to add your XPage application as a Web widget to the iNotes navigator pane.

2.Task DescriptionSince 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 ResultAs the result, the profile search should open the corresponding document.


Exercise 33

5.Things To Explore

6.Further Readings
