Professional Documents
Culture Documents
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”
Continued...
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
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]“.
3.Detailed Steps
1. Add a panel to the hwControl Custom Control, name it “helloPanel”
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.
4.The Result
5.Things To Explore
• [options here]
6.Further Readings
[links here]
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.
- 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.
10.On the styles tab of each panel (6 panels) map the class to the corresponding named
style sheet class.
4.The Result
Use the preview button from a page to see the results.
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/
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.
e.g. Drag and drop the searchForm custom control onto the green cirlce on the home
XPage.
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.
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
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.
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)
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
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.
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
Click on OK
15.Add a label control and a Date Time Picker control for the DOB field. Add a new row
in the table if needed.
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).
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]
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
4.The Result
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
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.
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.
4.The Result
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
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
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
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
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.
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
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]
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
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.
4.The Result
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
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
4. Give the TagLine field a minimum length of 4 and a maximum of 40, create an error
message.
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”
Test in browser
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
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;
}
}
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");
Preview in Browser
4.The Result
5.Things To Explore
• What alternatives to alert boxes can you use?
6.Further Readings
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
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.
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/
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.
10. Open all the 3 XPages (home, profile, results) and select the container control there.
Click on all properties
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
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
(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:
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
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
5.Things To Explore
• Add additional fields like: friendTags (Multi-Value)
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”
getComponent("friendName").setValue("");
getComponent("friendEmail").setValue("");
13. Select the server Option “Partial Update” and select “friendsTable”
19. Add 2 computed fields below each other and use Javascript data binding to bind
them to:
- friend.getItemValueString("Name")
- friend.getItemValueString("Email")
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
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)
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:
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>
<theme extends=”oneui”>
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)
3.Further Readings
Domino Designer help
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:
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-
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:
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:
7. Create a new LotusScript agent (the good old fashioned way), call it “agFromXpage”
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
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))
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
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
4.The Result
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
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
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
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:
Rearrange the elements until they look like that: (might be a bit tricky in the
beginning)
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:
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:
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?
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.
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:
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)
2.Task Description
Your application should be available in multiple languages.
3.Detailed Steps
1. Open the XPages tab of the application properties
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
7. Navigate to the xPages folder. You will find the property files for each language there:
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.
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
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
1.The Result
2.Things To Explore
3.Further Readings
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.
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.
8. From the right-hand palette, select My Palette, then, from the Add Component drop-
down, select Add NSF Component.
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.
11.Click File > Save and Close. The application is getting opened in Notes.
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
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.
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.
9. Next to the Email edit box, create a Send Email URL Link control.
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.
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.
19.Save the component. Then, right-click to the Custom Components element in the
navigator and select New Custom Control.
21.From the Events tab, create a New Component Event and name it authorEvent.
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.
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.
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.
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
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
Composite Application.
3.Detailed Steps
2. Navigate to the Widgets section. Enable the Show Widget Toolbar and the My
Widgets Sidebar panel option.
4. Our widget will consume a Web Page, therefore select the Web Page option.
8. Navigate to the Advanced tag and enable the Configure name property.
11.Drag the newly created widget component and drop it next to the mail component.
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.
18.Navigate to the View Column Header section of the Properties and label it Search
Yasni.
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
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
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.
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.
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:
12.Name the explicit Policy /MyWidgets. Select the Widgets Desktop and
iNotesWidgets Mail Settings documents to assign.
16.If a warning dialog comes up, click Yes to overwrite existing assignments.
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
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.
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.
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”);
}
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
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
Note: The following steps are only required in our lab scenario to assure that the
policy is getting assigned directly.
3. By holding down the CTRL + SHIFT keys, select View > Go To from the main menu.
Navigate to the ($Policies) view:
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.
8. Notice the My Widgets sidebar component. From the upper right component header
menu, select Get Started…
9. Our widget will consume a Web Page, therefore select the Web Page option.
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.
?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.
17.Click Finish.
18.The new widget has been added to the My Widgets sidebar component.
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.
23.After a couple of seconds, the name of the colleague – in this case John Doe - should
be underlined:
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.
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
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.
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:
3.Detailed Steps
1. From the My Widgets sidebar component header menu, select Get Started… again.
2. Our widget will consume a Web Page, therefore select the Web Page option.
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.
?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.
10.Click Finish.
11.The new Widget has been added to the My Widgets sidebar component.
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.
16.Name the widget Search Profile from iNotes, the save and close the document.
19.Copy the template into a new file inotes_config.xml. Open this file in another
Notepad window.
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.
24.Navigate to your inbox. Open the mail we sent during the previous exercise 28:
4.The Result
As the result, the profile search should open the corresponding document.
5.Things To Explore
6.Further Readings