Building A Cool Web 2.0 Application With XPages

2. 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. 

3. 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.  

4. 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)

5. Introduction:  Designer UI Overview:

6. Introduction:  DEMO | The Cool Application – Sneak Preview...

7. Part 1 – The Basics ®

8. 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.

9. 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.

10. 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.

11. 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:

12. Part 1 – The Basics Step: 1.02.03 – Create a Full Name field Click the Create Field icon on the toolbar.

13. 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)'.

14. Part 1 – The Basics Step: 1.02.05 – Create a First Name field Beside First Name:, create a new field named FirstName.

15. Part 1 – The Basics Step: 1.02.06 – Create a Last Name field Beside Last Name:, create a new field named LastName.

16. 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.

17. Part 1 – The Basics Step: 1.02.08 – Add a Company field Beside Company:, create a new field named Company. 

18. 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.

19. 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.

20. 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.

21. 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.

22. 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.

23. 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.

24. 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.

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

26. 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.

27. 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 

28. 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.

29. 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.

30. 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.

31. 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.

32. 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.

33. Part 1 – The Basics Step: 1.04.10 – Rename the Editable Area Rename the Editable Area's Name and Facet Name to contentArea.

34. 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.

35. Part 1 – The Basics Step: 1.05.01 – Create a new Custom Control - profileForm Create a new Custom Control named profileForm.

36. 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.

37. 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.

38. 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.

39. 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. 

40. 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.

41. 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.

42. 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. 

43. Part 1 – The Basics Step: 1.06.01 – Create a new Custom Control - searchForm Create a new Custom Control named searchForm.

44. 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. 

45. Part 1 – The Basics Step: 1.07.01 – Create a Custom Control - searchResults Create a new Custom Control named searchResults.

46. 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. 

47. 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.

48. Part 1 – The Basics Step: 1.08.01 – Create a new XPage - home Create a new XPage named home.

49. 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.

50. 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. 

51. 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. 

52. Part 1 – The Basics Step: 1.09.01 – Create a new XPage - profile Create a new XPage named profile.

53. 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.

54. 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. 

55. 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.

56. Part 1 – The Basics Step: 1.10.01 – Create a new XPage - results Create a new XPage named results.

57. 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.

58. 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. 

59. 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.

60. 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.

61. 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.

62. 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. 

63. 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.

64. 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. 

65. 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.   

66. 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. 

67. 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. 

68. 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. 

69. 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. 

70. 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. 

71. 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. 

72. 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. 

73. 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.

74. 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. 

75. 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. 

76. 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. 

77. 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. 

78. 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.

79. 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. 

80. Part 1 – The Basics Step: 1.19 – Demo Part 1 – The Basics   If the application is Local, change the ACL to preview.

81. Part 2 – Styling and Search Features ®

82. 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.

83. 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. 

84. 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. 

85. 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.

86. 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.

87. 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.

88. 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.

89. 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.

90. 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.

91. 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.

92. 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.

93. 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.

94. 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.

95. 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.

96. 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.

97. 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.

98. 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.

99. 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.

100. 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.

101. 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.

102. 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.

103. 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.

104. Part 2 – Styling and Search Features Step: 2.08 – Demo Styling

105. 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.

106. 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.

107. 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.

108. 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.

109. 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.

110. 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 .

111. 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.

112. 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.  

113. 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.

114. 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.

115. 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.

116. 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.

117. 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.

118. Part 2 – Styling and Search Features Step: 2.15 – Demo Search on the Application

119. Part 3 – Contain Your Friends in a Repeat! ®

120. 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. ➢

121. 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.

122. Part 3 - Contain Your Friends in a Repeat! Step: 3.01.01 – Create a Friends Form Create a new form named friend.

123. 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.

124. 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.

125. 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.

126. 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.

127. 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.

128. 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.

129. 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. 

130. 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.

131. 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.

132. 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.

133. 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.

134. 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.

135. 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... .

136. 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. 

137. 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. 

138. 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.

139. 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. 

140. 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.

141. 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.

Building A Cool Web 2.0 Application With XPages

ddrschiw

Building A Cool Web 2.0 Application With XPages