Using Lotus Domino Designer 8.5, we will create a Lotus Domino XPage web application that utilizes advanced Web 2.0 technology, and explain what we are doing it along the way. This step by step demonstration will highlight many of the application development improvements for Lotus Domino 8.5. See how you can develop with Domino Designer and XPages. We will explore AJAX, Script Libraries, DoJo and custom controls.
See http://www-10.lotus.com/ldd/ddwiki.nsf/dx/LS09_SHOW106.htm to find out more or to download application resources.
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Building A Cool Web 2.0 Application With XPages
1.
2. SHOW106 | Update 20090203
Building A Cool Web 2.0 Application With XPages
Paul Hannan | Domino XPages QE Lead | Dublin | IBM
Azadeh Salehi | Domino Designer QE | Westford, MA | IBM
®
3. Introduction:
What is this session about?
Show n Tell replaces the Hands-On session format
Presents a fast track session to learn about XPages.
Allows you to follow along on your laptop as we build a cool
application right before your eyes. * (prize = a years supply of ..)
Provides backup reference material including the presentation
and sample applications for you to try out XPages later.
4. Introduction:
What is an XPage?
Provides a new way to create Web applications
A new Design element that comes free, out-of-the-box with
Domino Designer 8.5.
Based on the JSF framework, which is an open standard
maintained by Sun but you DO NOT need to know JSF :-)
Easy to learn with huge payback in minimal time.
Includes new features including AJAX and DOJO.
No extra setup steps (other some minor server configuration)
needed.
Designer preview.
5. Agenda
Introduction: (10 min)
Part 1 - The Basics (30 min)
Part 2 - Styling and Search Features (25 min)
Part 3 - Contain your Friends in a Repeat (25 min)
Q&A (15 min)
9. Part 1 – The Basics
Step: 1.00
What will you learn
➢
You will learn the basics workings of XPages.
Task Description
➢
You will create a basic Profiles application from scratch in which
you will be able to create, read, update and delete documents.
10. Part 1 – The Basics
Step: 1.01.00 – Create a blank application - “Profiles”
1. Launch Domino
Designer V8.5
2. From the main menu,
select File>New
Application (Ctrl+N).
3. In the Title field, type
Profiles.
4. In the Template field,
select Blank.
5. Click OK.
6.
11. Part 1 – The Basics
Step: 1.02.01 – Create a form
1. Click New Form.
2. In the Name field, type
profile.
In this exercise, we will
use this form to create
documents.
12. Part 1 – The Basics
Step: 1.02.02 – Add static text to the form
Add the following text,
each on a new line, in
the form editor:
- Full Name:
- First Name:
- Last Name:
- Date of birth:
- Company:
- Job Title:
13. Part 1 – The Basics
Step: 1.02.03 – Create a Full Name field
Click the Create Field
icon on the toolbar.
14. Part 1 – The Basics
Step: 1.02.04 – Set a computed formula on the FullName field
1. In the editor, beside Full
Name: , create a new field
named FullName.
2. Select Computed as the type of
text field.
3. Add the following formula as its
value
'@Trim(FirstName + “ ” + LastName)'.
15. Part 1 – The Basics
Step: 1.02.05 – Create a First Name field
Beside First Name:,
create a new field
named FirstName.
16. Part 1 – The Basics
Step: 1.02.06 – Create a Last Name field
Beside Last Name:,
create a new field
named LastName.
17. Part 1 – The Basics
Step: 1.02.07 – Add a Date of Birth field
1. Beside Date of birth:,
create a new field
named DOB.
2. In the Type field, select
Date/Time.
18. Part 1 – The Basics
Step: 1.02.08 – Add a Company field
Beside Company:,
create a new field
named Company.
19. Part 1 – The Basics
Step: 1.02.09 – Add a Job Title field
1. Beside Job Title:,
create a new field
named Job Title.
2. Save the profile form.
20. Part 1 – The Basics
Step: 1.03.01 – Edit the existing untitled view
1. Launch the untitled
view in the editor.
2. Change the name to
profiles view.
3. Add the alias
vwProfiles.
21. Part 1 – The Basics
Step: 1.03.02 – The FullName column
1. Edit the existing (1st)
column.
2. Change the title to
FullName.
3. Bind this column to the
FullName field.
22. Part 1 – The Basics
Step: 1.03.03 – Sort the FullName Column
1. On the Column
Properties for the
FullName column,
select the Sort tab.
2. Click the Ascending
radio button.
23. Part 1 – The Basics
Step: 1.03.04 – Add a column for Company
1. Append a new column
to this view.
2. Change the title to
Company.
3. Bind the column to the
Company field.
24. Part 1 – The Basics
Step: 1.03.05 – Add a column for Job Title
1. Append a final column
to the view.
2. Change the column title
to Job Title.
3. Bind this column to the
JobTitle field.
4. Save and close the
view.
25. Part 1 – The Basics
Step: 1.04.01 – Create a new Custom Control – container
1. Double click on
Custom Controls in
the Application
Navigator.
2. In the New Custom
Control dialog enter
the name container.
3. Click OK.
26. Part 1 – The Basics
Step: 1.04.02 – Add panels to the container custom control
Add 6 panels from the
Container Controls
palette to the Design
pane.
27. Part 1 – The Basics
Step: 1.04.03 – Name the panels
1. Select the first panel.
2. In the Name field,
enter frame.
3. Continue to select the
other panels and enter
the following names:
- header;
- headerInner;
- main;
- tabBar;
- content.
28. Part 1 – The Basics
Step: 1.04.04 – Rearrange the panels
Use the Outline to rearrange, drag
and drop the panels into their nested
form.
- Panel: frame
- Panel: header
- Panel: headerInner
- Panel: main
- Panel: tabBar
- Panel: content
29. Part 1 – The Basics
Step: 1.04.05 – Add a label to the headerInner panel
1. Select the Label control
from the Controls
Palette. Drop it into the
headerInner panel.
2. Change the label to
Profiles.
30. Part 1 – The Basics
Step: 1.04.06 – Add a tabbed panel to the tabBar panel
1. Select the Tabbed Panel
container control from
the Container Controls
palette.
2. Drop the Tabbed Panel
to the tabBar panel.
31. Part 1 – The Basics
Step: 1.04.07 – Rename the tabs on the Tabbed Panel
1. Use the Outline to select the first tab of
the Tabbed Panel.
In the Name field, type homeTab. In
the Label field, type Home.
2. Select the second tab of the Tabbed
Panel.
In the Name field, type resultsTab.
In the Label field, type Results.
32. Part 1 – The Basics
Step: 1.04.08 – Add another tab to the Tabbed Panel
1. Right-click to the right
of the Results tab and
select Append Tab
from the context menu.
2. Use the Outline to
select the third tab of
the Tabbed Panel.
Enter profilesTab as
the Name and enter
Profiles as the Label.
33. Part 1 – The Basics
Step: 1.04.09 – Add an Editable Area
From the Core Controls
palette drag and drop
an Editable Area control
to the content Panel.
34. Part 1 – The Basics
Step: 1.04.10 – Rename the Editable Area
Rename the Editable
Area's Name and Facet
Name to contentArea.
35. Part 1 – The Basics
Step: 1.04.11 – Add a new property to the Custom Control
1. In the Custom Control
Properties for container,
select the Property
Definition tab.
2. Add a new property to
this custom control by
selecting the New
Property button.
3. Name this new property
selectedTabId.
4. Save and close the
Custom Control.
36. Part 1 – The Basics
Step: 1.05.01 – Create a new Custom Control - profileForm
Create a new Custom
Control named
profileForm.
37. Part 1 – The Basics
Step: 1.05.02 – Add a Label to the profileForm
1. On the new
profileForm Custom
Control add a Label
from the Core Controls
palette to the Design
pane.
2. In the Properties for
this Label rename this
label to Profile
Information.
38. Part 1 – The Basics
Step: 1.05.03 – Add a Domino Document data source
1. In the Custom Controls
Properties select the
Data tab.
2. Then select Add, and
from the dropdown
select Domino
Document.
3. document1 is now
listed as a data source.
39. Part 1 – The Basics
Step: 1.05.04 – Rename and add a form to the data source
1. From the Form
dropdown select the
profile form.
2. Change the data source
name to
profileDocument.
40. Part 1 – The Basics
Step: 1.05.05 – Launch the Data Eclipse view
1. Still on the
profileForm Custom
Control from the main
menu select
Window
>Show Eclipse Views
>Data.
2. The Data view should
now appear in place of
the Controls palette.
Now the data sources
for the profileForm
will appear.
The Controls Palette and
Data views are
interchangeable.
41. Part 1 – The Basics
Step: 1.05.06 – Drop the data sources to the Design pane
1. On the Data view select all of
the available data sources
except FullName. Then drag
and drop them to the Design
pane.
This will generate a table with
the edit boxes bound to the
data sources, along with
labels for this edit boxes.
2. Rearrange the rows so that
FirstName is first followed
by LastName, then DOB,
JobTitle and lastly
Company. Add 2 rows to
help you do this.
42. Part 1 – The Basics
Step: 1.05.07 – Add a Date Time Picker
1. For the Date of Birth
control select the Data
tab in Properties.
2. Check the box for
Use date/time picker
pop-up.
43. Part 1 – The Basics
Step: 1.05.08 – Add Buttons
1. From the Controls
palette drag and drop 4
buttons.
2. Then change the labels
on these buttons to
Save
Delete...
Cancel
Edit
3. Save and close the
Custom Control.
44. Part 1 – The Basics
Step: 1.06.01 – Create a new Custom Control - searchForm
Create a new Custom
Control named
searchForm.
45. Part 1 – The Basics
Step: 1.06.02 – Add a Button to the Custom Control - searchForm
1. From the Controls
palette add a button.
2. Change the Label on
this button to Create a
New Profile.
3. Save and close the
Custom Control.
46. Part 1 – The Basics
Step: 1.07.01 – Create a Custom Control - searchResults
Create a new Custom
Control named
searchResults.
47. Part 1 – The Basics
Step: 1.07.02 – Add a View Container Control to searchResults
1. From the palette select a View
Container Control and drop it to
the Design pane.
2. This launches the
Select Data Source for View
dialog.
3. Select the view, profiles view
created previously from the
drop-down. This will populate
the remaining windows on the
dialog.
4. Click OK.
48. Part 1 – The Basics
Step: 1.07.03 – Set the View Panel width on searchResults
1. Set the width of the
view to 100%.
2. Save and close the
Custom Control.
49. Part 1 – The Basics
Step: 1.08.01 – Create a new XPage - home
Create a new XPage
named home.
50. Part 1 – The Basics
Step: 1.08.02 – Add the container Custom Control to the home XPage
From the Custom
Controls palette, drag
and drop the Custom
Control container to
the Design pane of the
home XPage.
51. Part 1 – The Basics
Step: 1.08.03 – Set the Selected Tab Id Property
1. In the Outline select the
container Custom
Control.
2. In its Properties, select
All Properties. Expand
custom, and for
selectedTabId enter
homeTab.
52. Part 1 – The Basics
Step: 1.08.04 – Add searchForm to the Editable Area
1. Then to the Editable
Area, highlighted with
the green dot, drag and
drop the searchForm
Custom Control.
2. Save your changes and
close the XPage.
53. Part 1 – The Basics
Step: 1.09.01 – Create a new XPage - profile
Create a new XPage
named profile.
54. Part 1 – The Basics
Step: 1.09.02 – Add the container Custom Control to the profile XPage
From the Custom
Controls palette, drag
and drop to the Design
pane of the profile
XPage the container
Custom Control.
55. Part 1 – The Basics
Step: 1.09.03 – Set the Selected Tab Id Property
1. In the Outline select the
container custom
control.
2. In its Properties, select
All Properties. Expand
custom, and for
selectedTabId enter
profilesTab.
56. Part 1 – The Basics
Step: 1.09.04 – Add the profile Custom Control
1. Then to the Editable
Area, highlighted with
the green dot, drag and
drop the profileForm
Custom Control.
2. Save your changes and
close the XPage.
57. Part 1 – The Basics
Step: 1.10.01 – Create a new XPage - results
Create a new XPage
named results.
58. Part 1 – The Basics
Step: 1.10.02 – Add the container Custom Control to the results XPage
From the Custom
Controls palette drag
and drop to the design
pane the container
Custom Control.
59. Part 1 – The Basics
Step: 1.10.03 – Set the SelectedTabId Property
1. In the Outline select the
container custom
control.
2. In its Properties, select
All Properties. Expand
custom, and for
selectedTabId enter
resultsTab.
60. Part 1 – The Basics
Step: 1.10.04 – Add the searchResults Custom Control
1. Then to the Editable
Area, highlighted with
the green dot, drag and
drop the
searchResults Custom
Control.
2. Save your changes and
close the XPage.
61. Part 1 – The Basics
Step: 1.11.01 – Add Actions to container Custom Control – Home Tab
1. Reopen the container
Custom Control and
locate the Tabbed Panel
in the outline.
2. Select the Tab Panel
homeTab. Then for its
onclick event click the
Add Action... button.
62. Part 1 – The Basics
Step: 1.11.02 – Add Actions to container Custom Control – Home Tab
1. On the Add Simple
Action dialog select
Basic for Category,
Open Page for Action
and the home XPage to
open.
2. Click OK.
63. Part 1 – The Basics
Step: 1.11.03 – Add Actions to container Custom Control – Results Tab
1. Select the Tab Panel
resultsTab. Then for
its onclick event click
the Add Action...
button.
2. On the Add Simple
Action dialog select
Basic for Category,
Open Page for Action
and the results XPage
to open.
3. Click OK.
64. Part 1 – The Basics
Step: 1.11.04 – Add Actions to container Custom Control – Profiles Tab
1. Select the Tab Panel
profilesTab. Then for
its onclick event click
the Add Action...
button.
2. On the Add Simple
Action dialog select
Basic for Category,
Open Page for Action
and the profile XPage
to open.
3. Click OK.
4. Save and close the
Custom Control.
65. Part 1 – The Basics
Step: 1.12.01 – Add Actions to profileForm Custom Control – Save Button
1. Reopen the
profileForm Custom
Control and select the
Save button.
2. In the Button type field,
select Submit.
66. Part 1 – The Basics
Step: 1.12.02 – Add Actions to profileForm Custom Control – Save Button
1. Still on the Save button
select the Events tab.
2. For the onclick event
select the Add
Action... button.
3. On the Add Simple
Action dialog select
Basic for Category,
Open Page for Action
and the home XPage to
open.
4. Click OK.
67. Part 1 – The Basics
Step: 1.12.03 – Add Actions to profileForm Custom Control – Delete... Button
1. For the Delete... button
select the Events tab.
2. For the onclick event select
the Add Action... button.
3. On the Add Simple Action
dialog select Document for
Category, Delete
Document for Action,
home XPage to open next.
In the Confirmation text
field, enter Are you sure?
4. Click OK.
68. Part 1 – The Basics
Step: 1.12.04 – Add Actions to profileForm Custom Control – Cancel Button
1. In the editor, select the
Cancel button.
2. In the Button type field,
select Cancel.
69. Part 1 – The Basics
Step: 1.12.05 – Add Actions to profileForm Custom Control – Cancel Button
1. Still on the Cancel
button select the Events
tab.
2. For the onclick event
select the Add
Action... button.
3. On the Add Simple
Action dialog select
Basic for Category,
Open Page for Action
and the home XPage to
open.
4. Click OK.
70. Part 1 – The Basics
Step: 1.12.06 – Add Actions to profileForm Custom Control – Edit Button
1. For the Edit button select
the Events tab.
2. For the onclick event
select the Add Action...
button.
3. On the Add Simple
Action dialog select
Document for Category,
Change Document
Mode for Action, and Edit
Mode for Document
Mode.
4. Click OK.
71. Part 1 – The Basics
Step: 1.13.01 – Add Actions to searchForm Custom Control – New Profile Button
1. Reopen the searchForm
Custom Control and select the
Create a New Profile...
button.
2. For the button select the Events
tab.
3. For the onclick event select
the Add Action... button.
4. On the Add Simple Action
dialog select Basic for
Category, Open Page for
Action, profile as the XPage to
open next and New
Document for Target
Document.
5. Click OK.
6. Save your changes.
72. Part 1 – The Basics
Step: 1.14.01 – Add Actions – FullName Column Link
1. Reopen the searchResults
Custom Control and select
the column for FullName on
the View.
2. In View Column in its
Properties, check the box for
Show values in this
column as links, and then
choose the Read-only radio
button.
3. Save and close the Custom
Control.
73. Part 1 – The Basics
Step: 1.15.01 – Show & Hide Options – container Custom Control – Tabbed Panel
1. Reopen the container
Custom Control.
2. Select the Tabbed Panel
and for its Properties
select the Computed
property menu button.
74. Part 1 – The Basics
Step: 1.15.02 – Show & Hide Options – container Custom Control – Tabbed Panel
1. In the Script Editor
dialog, enter the script
'compositeData.selectedT
abId'
2. Click OK.
3. Save and close the
Custom Control.
75. Part 1 – The Basics
Step: 1.15.03 – Show & Hide Options – profileForm Custom Control – Save Button
1. Reopen the profileForm
Custom Control.
2. Select the Save button. Then in
its Button Properties select the
Computed property menu
button for the Visible option.
3. On the Script Editor dialog enter
'profileDocument.isEditable()'
4. Click OK.
76. Part 1 – The Basics
Step: 1.15.04 – Show & Hide Options – profileForm Custom Control – Delete... Button
1. Select the Delete... button. Then
in its Button Properties select
the Computed property menu
button for the Visible option.
2. On the Script Editor dialog enter
'!profileDocument.isNewNote()'
3. Click OK.
77. Part 1 – The Basics
Step: 1.15.05 – Show & Hide Options – profileForm Custom Control – Edit Button
1. Select the Edit button. Then in
its Button Properties select the
Computed property menu
button for the Visible option.
2. On the Script Editor dialog enter
'!profileDocument.isEditable()'
3. Click OK.
78. Part 1 – The Basics
Step: 1.16 – The computeWithForm Property on the profileForm Custom Control
1. Still in the profileForm Custom
Control, go to All Properties
for this Custom Control.
2. For the property
computeWithForm select
onsave.
3. Save and close the Custom
Control.
79. Part 1 – The Basics
Step: 1.17 – profile Form – Web Access
1. Reopen the profile form
and launch its form
properties.
2. In the Defaults tab, in the
Display Xpage instead
field, select profile.
3. Save and close the form.
80. Part 1 – The Basics
Step: 1.18 – Application Properties – Web Launch Setting
1. Open the Application
Properties and select the
Launch tab.
2. For Web Browser Launch,
select Open Designated
XPage for Launch, and
home as the XPage to
launch.
81. Part 1 – The Basics
Step: 1.19 – Demo Part 1 – The Basics
If the application is
Local, change the
ACL to preview.
83. Part 2 – Styling and Search Features
Step: 2.01.00 – Adding Styles – Look and Feel.
What will you learn
➢
You will learn how XPages use CSS files and how it applies style
classes to control the applications look and feel.
Task Description
➢
The basic application created in Part 1 uses the web standard
styling form the server. In Part 2 you will create a new Style Sheet,
add it to the Custom Controls and then apply style classes to
controls.
84. Part 2 – Styling and Search Features
Step: 2.01.01 – Import Image Resources
1. Select (double click)
Images under
Resources in the
Application Navigator.
2. Select the Import
Image Resource
button.
3. Select all of the
supplied GIF images.
4. Click OK.
The images are now
added to the
application.
85. Part 2 – Styling and Search Features
Step: 2.02.01 – Create a new Style Sheet - styles
1. Select Style Sheet
under Resources in the
Application Navigator.
2. Click the New Style
Sheet button.
3. In the Name field, type
styles.
4. Click OK.
86. Part 2 – Styling and Search Features
Step: 2.02.02 – Add Style Classes to 'styles.css'
1. Copy and paste the contents of
the supplied styles.txt file
into the new styles.css file.
2. Save your changes.
87. Part 2 – Styling and Search Features
Step: 2.03.01 – Add the new Style Sheet as Resource
1. Select Custom
Controls on the
Application Navigator.
2. Open the first Custom
Control container.
3. For its Properties select
Resources.
4. Click the Add Style
Sheet... button.
88. Part 2 – Styling and Search Features
Step: 2.03.02 – Select the new style sheet from the dialog
1. On the
Add Style Sheet to
Page dialog, select the
only style sheet available,
styles.css.
2. Click OK.
3. Save and close the
Custom Control.
89. Part 2 – Styling and Search Features
Step: 2.03.03 – Add the same Style Sheet to the remaining Custom Controls
1. Open the remaining
Custom Controls,
profileForm,
searchForm and
searchResults, in
turn...
2. Add the same style
sheet resource and save
your changes.
90. Part 2 – Styling and Search Features
Step: 2.04.01 – Add Style Classes to the container Custom Control - Frame
1. Launch the container
Custom Control.
2. Select Panel: frame in
the Outline view.
3. Select the Style tab for
this Panel.
4. Choose the frame style
class.
91. Part 2 – Styling and Search Features
Step: 2.04.02 – Add Style Classes to the container Custom Control - Header
1. In the Outline expand
frame and select
header.
2. From this Panel's Style
select the header style
class.
92. Part 2 – Styling and Search Features
Step: 2.04.03 – Add Style Classes to the container Custom Control - headerInner
1. In the Outline expand
header and select
headerInner.
2. From this Panel's Style
select the headerInner
style class.
93. Part 2 – Styling and Search Features
Step: 2.04.04 – Add Style Classes to the container Custom Control - headerInnerTitle
1. In the Outline expand
headerInner and
select the Label.
2. From this Label's Style
select the
headerInnerTitle
style class.
94. Part 2 – Styling and Search Features
Step: 2.04.05 – Add Style Classes to the container Custom Control - main
1. In the Outline expand
frame and select
main.
2. From this Panel's Style
select the main style
class.
95. Part 2 – Styling and Search Features
Step: 2.04.06 – Add Style Classes to the container Custom Control - tabBar
1. In the Outline expand
main and select
tabBar.
2. From this Panel's Style
select the tabBar style
class.
96. Part 2 – Styling and Search Features
Step: 2.04.07 – Add Style Classes to the container Custom Control - content
1. In the Outline expand
main and select
Panel:content.
2. From this Panel's Style
select the content style
class.
3. Save and close the
Custom Control.
97. Part 2 – Styling and Search Features
Step: 2.05.01 – Add Style Classes to the searchForm Custom Control – Button
1. Launch the searchForm
Custom Control.
2. Select the Create a New
Profile... button.
3. Select its Style tab from
Properties and choose the
style class
profilesButtonCommand
4. Save and close the Custom
Control.
98. Part 2 – Styling and Search Features
Step: 2.06.01 – Add Style Classes to the profileForm Custom Control – Save Button
1. Launch the profileForm
Custom Control.
2. Select the Save button.
3. Select the Style tab and
choose the
profileButtonSubmit
style class.
99. Part 2 – Styling and Search Features
Step: 2.06.02 – Add Style Classes to the profileForm Custom Control – Delete... Button
1. Select the Delete... button.
2. Select the Style tab and
choose the
profileButtonCommand
style class.
100. Part 2 – Styling and Search Features
Step: 2.06.03 – Add Style Classes to the profileForm Custom Control – Cancel Button
1. Select the Cancel
button.
2. Select the Style tab and
choose the
profileButtonCancel
style class.
101. Part 2 – Styling and Search Features
Step: 2.06.04 – Add Style Classes to the profileForm Custom Control – Edit Button
1. Select the Edit button.
2. Select the Style tab and
choose the
profileButtonCommand
style class.
102. Part 2 – Styling and Search Features
Step: 2.07.01 – Create a New Style Class for the Profile Information Label
1. Select the Profile
Information Label on
the profileForm
Custom Control.
2. Select Font under the
Style tab, change the
font size and set the
text on the label to
Bold.
103. Part 2 – Styling and Search Features
Step: 2.07.02 – Export Style Button
1. Select the Style tab for the
Profile Information
Label.
2. The custom formatting will
appear.
3. Click the Export button to
add this label format as a
style class.
104. Part 2 – Styling and Search Features
Step: 2.07.03 – Create a New Style Class with Exported Style
1. In the Export Custom Formatting dialog the
formatting will appear. Deselect individual
attributes if desired.
2. Select the existing styles.css sheet.
3. Give this new style class a name
4. Click OK
5. Save and close the Custom Control.
105. Part 2 – Styling and Search Features
Step: 2.08 – Demo Styling
106. Part 2 – Styling and Search Features
Step: 2.10.00 – Search Through View Filtering
What will you learn
➢
You will learn how to use View filtering for search.
Task Description
➢
You will learn how to create a search query edit box and
using the keys property show the results on follow on View
Panel.
107. Part 2 – Styling and Search Features
Step: 2.11.01 – Add new controls to the searchFrom Custom Control
1. Launch the searchForm
Custom Control.
2. Add a line break after the
button, and drag and drop a
Label - change the text on the
label to Profile Search.
3. Add a couple more line breaks
and a label – change the text of
this label to Enter the criteria
for a person to search for:
4. Add a few more line breaks and
then add an Edit Box. Change
the name of the Edit Box to
searchCritera, and set the
width of the edit box to be 221
Pixels.
108. Part 2 – Styling and Search Features
Step: 2.11.02 – Add a Request Scope Variable to the Edit Box
1. Select the Data tab for the
Edit Box.
2. Select the Advanced radio
button.
3. Select Scoped Variable
from the Use drop-down.
4. Choose Request Scope
from Scope.
5. Enter nameToSearch for
Variable Name.
109. Part 2 – Styling and Search Features
Step: 2.11.03 – Add Validation to the Search Query Edit Box
1. Select the Validation tab
next for the edit box.
2. Check the box for Required
Field. Type the message,
Please provide a name to
search.
3. We also want to restrict the
search query string to a
minimum of 5 characters
and a maximum of 20.
Provide a message to state
this valid search string
length.
110. Part 2 – Styling and Search Features
Step: 2.11.04 – Search Query Enable Type Ahead
1. Select the Type Ahead tab
and check the Enable box.
2. Choose Partial from the Mode
drop-down.
3. Select the Computed property
menu button for
Suggestions.
4. On the Script Editor dialog
use the following script
'@DbColumn(@DbName(), “vwProfiles”,
1)'
5. Click OK.
111. Part 2 – Styling and Search Features
Step: 2.12.01 – Search Button
1. From the Controls palette
add a button and changes
its label to Search....
2. Switch to the Style tab.
3. Select
profilesButtonCommand
as this button's style class .
112. Part 2 – Styling and Search Features
Step: 2.12.02 – Search Button Simple Actions - 1st action
1. Switch to the Events view for
the Search button.
2. For the onclick event click the
Add Action... button to add a
simple action.
3. On the Add Simple Action
Dialog, select Basic for
Category, Execute Script for
Action and type
'sessionScope.nameToSearch =
requestScope.nameToSearch' as the
script to execute.
4. Click OK.
113. Part 2 – Styling and Search Features
Step: 2.12.03 – Search Button Simple Actions - 2nd action
1. For the same onclick
event click the Add
Action... button.
2. On the Add Simple
Action dialog, set Basic
for Category, Open
Page for Action, and
results as the XPage to
open.
3. Click OK.
Both actions will now be
grouped together.
4. Save and close the
Custom Control.
114. Part 2 – Styling and Search Features
Step: 2.13.01 – Setting the Keys for View Filtering
1. Launch the searchResults
Custom Control.
2. Select the View here and
open the All Properties
tab on Properties.
3. Expand the data->data
section and for keys select
the Computed property
menu button.
115. Part 2 – Styling and Search Features
Step: 2.13.02 – Set the Keys Property
1. On the Script Editor
dialog add the following
script
'sessionScope.nameToSearch'
2. Click OK.
116. Part 2 – Styling and Search Features
Step: 2.14.01 – Add a Computed Field to Display the Search Query
1. Still on the
searchResults Custom
Control several breaks
before the view panel.
2. Drag and drop a
Computed Field to the
Design pane.
3. Rename this computed
field to
resultsComputedField.
117. Part 2 – Styling and Search Features
Step: 2.14.02 – Add the Computed Value
1. Select the Value tab on the
Computed Field Properties, then
click the JavaScript radio button.
2. Select the Open Script Dialog
button.
3. On the Script Editor dialog add the
following script:
'var criteria =
sessionScope.nameToSearch;
var title = "Profile search results for:
";
if(null != criteria && criteria != ""){
title += criteria;
}
else{
title = "No search criteria provided.";
}
return title;'
4. Click OK.
118. Part 2 – Styling and Search Features
Step: 2.14.03 – Style the Computed Field
1. Switch to Style tab.
2. Select the style class
searchInfo.
3. Save all your changes.
119. Part 2 – Styling and Search Features
Step: 2.15 – Demo Search on the Application
121. Part 3 - Contain Your Friends in a Repeat!
What will you learn
➢
You will learn how to use a Repeat Container Control.
Task Description
➢
On the profileForm custom control you will add a form that allows
adding an existing profile contact as a friend as well as the list of
current friends with the option to remove them.
➢
122. Part 3 - Contain Your Friends in a Repeat!
Step: 3.00 – A Friend in a Repeat is a friend indeed...
This is an overview
of what you will be
doing in this part.
For Part 3, the
design of the
application has
been upgraded.
Use the supplied
application to do
the same.
123. Part 3 - Contain Your Friends in a Repeat!
Step: 3.01.01 – Create a Friends Form
Create a new form
named friend.
124. Part 3 - Contain Your Friends in a Repeat!
Step: 3.01.02 – Populate the Friend Form
Add three fields to this
friend Form:
- FriendID
- Name
- Email
All of these fields
should be of the Text
type and Editable.
125. Part 3 - Contain Your Friends in a Repeat!
Step: 3.02.01 – Create a Friends View
1. Create a new Notes
View name friends.
2. Make the style Blank.
3. Use the following
selection formula
'Select (Form = “friend”)'
4. Click
Save and Customize.
126. Part 3 - Contain Your Friends in a Repeat!
Step: 3.02.02 – Customize the Friends View
1. Add 3 columns to the
view with headers
called...
- FriendID
- Name
- Email
2. For the FriendID
column, bind this to the
“FriendID” field and
make this column sort
Ascending.
3. Bind the Name column
to Name, and Email to
the Email Column.
127. Part 3 - Contain Your Friends in a Repeat!
Step: 3.02.02 – Customize the Friends View
Bind the Name column
to Name, and Email to
the Email Column
Neither column requires
sorting.
128. Part 3 - Contain Your Friends in a Repeat!
Step: 3.03.01 – Add the Friends Table
1. Open the profileForm
Custom Control.
2. From the Container
Controls palette select a
drop a Table.
3. Give this table 6 rows
and 2 columns.
129. Part 3 - Contain Your Friends in a Repeat!
Step: 3.03.02 – Merge the top 2 cells of the table
Select the top two cells
of the table and select
Merge Cells from the
context menu.
130. Part 3 - Contain Your Friends in a Repeat!
Step: 3.03.03 – Add the My Friends Label
1. From the Core Controls
palette drag and drop a
Label to the merged
cell.
2. Set the text on the label
to My Friends.
3. Set the Font size to 12
and weight to Bold.
131. Part 3 - Contain Your Friends in a Repeat!
Step: 3.03.04.01 – Friends Table Name and Rendering
1. Change the name of the
table to friendsTable.
2. Select the computed
property menu button
for Visible.
132. Part 3 - Contain Your Friends in a Repeat!
Step: 3.03.04.02 - Friends Table Name and Rendering
This will launch the Script editor.
2. Type !profileDocument.isNewNote()
3. This script will render the Friends
table if the document
(profileDocument) is not a new
document.
4. Click OK.
133. Part 3 - Contain Your Friends in a Repeat!
Step: 3.04.01 – Add Edit Boxes
1. Add 2 edit boxes from
the palette to cells in
the table.
2. Rename these edit
boxes to friendName
for the first and
friendEmail for the
second.
3. Set the width to 200
pixels for both edit
boxes.
134. Part 3 - Contain Your Friends in a Repeat!
Step: 3.04.02.01 – Enable Type Ahead for the 'friendName' Edit Box
1. On the first edit box,
friendName, select the
Type Ahead tab on its
Properties.
2. Check the box for
Enable Type Ahead.
3. Set Mode to Partial in
the dropdown.
4. Select the Computed
property menu button
for Suggestions.
135. Part 3 - Contain Your Friends in a Repeat!
Step: 3.04.02.02 – Type Ahead formula for 'friendName' edit box
1. Use the following
formula for the type
ahead suggestions.
'@DbColumn(@DbName(),
“vwProfiles”, 1)'
2. Click OK.
136. Part 3 - Contain Your Friends in a Repeat!
Step: 3.04.02.03 – Add an onChange event to friendName
1. Select Events tab for the
friendName edit box.
2. Choose the onChange
event.
3. Click Add Action... .
137. Part 3 - Contain Your Friends in a Repeat!
Step: 3.04.02.04 – onChange event script for friendName edit box
1. On the Add Simple Action dialog,
select Basic from Category and
Execute Script from Action.
2. Add the following script to be
executed...
'varvalue = @DbLookup(@DbName(),
"vwProfiles",
getComponent("friendName").getValue(),
"Email");
if(null != value){
var email = getComponent("friendEmail");
email.setValue(value);
}'
This script runs when there is a change in
friendName. It uses the value of friendName
to get back the email address if that name exits
on the database which it uses to populate
friendEmail.
3. Click OK.
138. Part 3 - Contain Your Friends in a Repeat!
Step: 3.04.02.05 – Set Partial Refresh on the onChange event.
We want this action to only
happen on one control
rather than the whole
XPage, so we need to use
Partial refresh.
2. Select the radio button for
Partial Update from the
server Options, then select
the Select Element...
button
3. Select friendEmail as the
element on the XPage to
update.
4. Click OK.
139. Part 3 - Contain Your Friends in a Repeat!
Step: 3.05.01 – Add Labels for the Edit Boxes
1. From the palette drag
and drop 2 label
controls to the table
and place them beside
the edit boxes.
2. Change the labels to
Name: and Email.
140. Part 3 - Contain Your Friends in a Repeat!
Step: 3.05.02 – Set the Labels to the Edit Boxes
Set both Labels, Name
and Email, to the Edit
Boxes friendName
and friendEmail.
141. Part 3 - Contain Your Friends in a Repeat!
Step: 3.06.01 – Add a Friend Button
1. From the Controls
palette, drag and drop
a button to the cell
below the email edit
box on the table.
2. Change the name of the
button to
addFriendButton.
3. In the Label field, type
Add a Friend.
142. Part 3 - Contain Your Friends in a Repeat!
Step: 3.06.02 – Style the Add a Friend button
1. Go to the Style tab for
the button.
2. From the style sheet
select the style class
profilesButtonSubmit.