IBM Connect 2014 - AD105: IBM iNotes and IBM SmartCloud Notes Web Customization: Make It Your Own Author: Eric Spencer

1. AD105: IBM iNotes and IBM
SmartCloud Notes Web
Customization: Make It Your
Own
Eric Spencer, IBM
© 2014 IBM Corporation

2. Agenda
 How customizable is IBM iNotes?
 Basic customizations
– demo
 Modifying the look
– demo
 Web page generation overview
– demo
 Summary
Q&A
2

3. Business Considerations Drive the Way Customers Consume Software
SaaS / Public Cloud
Dedicated Cloud
On Premises
Agility and Price Advantage
Customization, Flexibility
Pay per use, standard terms of use
You own the license or capital
Automatic updates
Choice of where and how data is managed
Shared infrastructure and ops
Completely customizable
Instant scale
Dedicated infrastructure
Considerations
How do I buy?
How quickly can I get new features?
Does it matter where data resides?
How important is price?
Do I need to scale up and down rapidly ?
Who manages?
Do I need to customize? Special integrations?

4. How customizable is iNotes?
 Can customize almost anything
 Different from Traditional Domino Web Applications
– Design elements are separate
– Uses WebHybrid processing
– Uses tag-based textual markup similar to JSP
– Doesn’t utilize many agents
– Uses limited set of Domino Web Commands and some special URL arguments
 Requires Web development skills such as HTML, JavaScript, and CSS
4

5. Template and Forms File
References
mail85.ntf
iNotesForms9.nsf
Inherits
Most Design:
HTML, CSS, JavaScript,
Images
View Design
Data
mailJUser.nsf
Domino server
Browser
5

6. Ways to Customize IBM iNotes
 Enable/disable certain Functional Areas
 Policies
 Special Forms (Custom_*) provided for basic customizations
– Modify action bar menu items
– Modify existing view columns
– Add masthead
– Modify banner logo
– Add fonts to rich text editor
 Override styles and colors
 Modify forms
 Add widgets in sidebar panel
6

7. Enable or disable components or functional areas
 Policies
 INI setting: iNotes_WA_Areas
– will still work but policy takes precedence
 URL arguments
– &PresetFields
• Example: http://{mail file path}/iNotes/Calendar/?OpenDocument&PresetFields=
h_SkinTypeOverride;h_Blank,s_CalView;2,s_CalDate;20090301
• See Deployment Guide for more information
– &Layout
• Example: http://{mail file path}/iNotes/Contacts/?OpenDocument&layout=BN!H*MS!H*OF!H*LO!
H*SW!H*LP!C
• See wiki article for more details
7

8. iNotes Admin Policy Support
iNotes MailSettings
• User UI mode
• Functional areas
• Functional area at login
iNotes Mail Settings (cont.)
• *IBM Docs Integration
• *IBM Connections Files integration
• Maximum attachment size
• Mail threads
• Remote image display
• Browser cache management
• Logout scrubbing
• Allowing attachments
• Instant messaging features
• Default spell check dictionary
• iNotes ActiveX
• Enabling feeds
• Widget enablement (pre 9.0)
• Lotus Quickr integration
• Calendar subscriptions
• Offline settings
• Refresh inbox automatically
• Enable unread count
• Auto update unread count
• Enable scroll hints
• Disable warning on opening attachments
• Filter out images from emails
• Proxy servlet name/URL pairs
• Show preferences
• Allow archiving on the server
• Allow local archiving
 Initial sidebar display state
Shared Mail Settings
• Mail basics
• Follow up
• Attention indicators
• Message recall
• Calendar basics
• Calendar display
Shared Desktop Settings
• Right double-click to close
• Mark documents read on preview
• Save sent mail
• Sign sent mail
• Encrypt sent mail
• Mail notification
• Internet mail format
• Prefix each line with a char
• Wrap lines at a certain length
• *Widgets
• Notices
• Scheduling
• Automatic processing
• Rooms and resources
• Mail and Calendar
• Disclaimer text
• Disclaimer position
• Soft Delete Time
Security Settings
• Password Quality
• Certificate Expiration
• Notes ID Vault
• iNotes Proxies
• Password Expiration
Archive Settings
• Server-based archiving
• Prohibit archiving
• Prohibit private archiving criteria
 iNotes Display Language
 ST Proxy Enablement
 Extension Forms File
8
*Newer settings with 9.0 Social Edition

9. Can't set policies in SCN
 Some settings are available in SCN Administration Account Settings
 Under System Settings – IBM SmartCloud Notes
 Some profile doc settings are preserved from on-premises mail files
9

10. New architecture in 8.5
 Full mode uses the “lite” architecture that was introduced in 8.0.1
 Tabbed UI
 Uses widgets
 Some forms continue to use the “classic” architecture
– Full mode Calendar*, Contact, To Do, Notebook entry forms
– Lite mode Calendar* and Contact entry forms
– Home page
– Preferences
 Forms, etc. that are new for the “lite” architecture have “_Lite” in the name
* Calendar forms converted to new architecture in 9.0 Social Edition
10

11. Extension Forms File
 Customization subforms are in this file
 Created from template
 If the file exists on the server, customizations will be used
 Customizations are not overwritten by updated Domino version
 Should be able to do most customizations here, without touching main Forms9 file.
11

12. Extension Forms Files in IBM SmartCloud Notes
 Requires brief contract with ISSC
 Must use Extension Forms file template downloaded from the service
 Some restrictions on customizations
12

13. Extension Forms File
mail85.ntf
iNotesForms9.nsf
mailJUser.nsf
Domino server
iNotesForms9_x.nsf
Browser
13
Forms9_x.ntf

14. Custom_JS_Lite subform
 JavaScript form to centralize most customizations
 Script file which is available on all new architecture forms and views
 Contains customization functions
 Also a location to store your own script
 Is cached on server with rest of static common user script
– Add stuff to SessionInfo if you need per user or per mail file formula computations (special subform
added in 8.5.3)
14

15. Some functions in Custom_JS_Lite Form
Callbacks and Functions
Custom_Scene_Actions_Lite
Custom_Scene_PostLoad_Lite
Invoked after each widget is initialized
Custom_Scene_PreSubmit_Lite
Invoked prior to submitting an action to the server
API_TimeZones_Lite
Add additional time zones
API_SetPortalMailViewColumns_Lite
Set which columns get displayed for the Mail portlet.
API_GetWhoAndAltWhoColNamesForView_Lite
15
Add, remove or change actions
Set which columns get displayed when alternate name is enabled

16. More functions in Custom_JS_Lite
Helpers
API_GetSelectedDocs_Lite
Returns array of strings representing UNIDs
API_IsView_Lite
Returns true if view page
API_GetMailfilePath_Lite
Returns URL path up to and including “.nsf”
Custom_ActionsHelper_Lite subform
addActionsLite
removeActionsLite
Remove menus or submenus from action bar
repositionActionsLite
Changes position of menus or submenus
checkActionIDs
Display menu IDs
checkActionPositions
16
Add new menus or submenus to action bar
Display menu position numbers - “classic” forms

17. Additional customization forms and subforms
Custom_Welcome
Add additional web sites for Web page panel choices
Custom_JS_Edit
Add new fonts in the rich text editor
Custom_Masthead
Add a masthead at the top of the page
Custom_CSS
Add additional CSS styles
Custom_Banner_Lite
Modify the displayed banner
Custom_Page_Dictionary 1
NotesVars available for use in Custom_CSS
Custom_xxx_Dictionary 2
Inclusion of new NotesFields and NotesVars
Custom_LazyLoad_Subforms 2
Add code to lazy load table
Custom_Logout 2
Add code to be run on logout
Custom_About 2
Display forms file version and a user-specified file version number in iNotes console
Custom_SessionInfo 3
Add items to session info object
Classic_Custom_SessionInfo 4
Add items to session info for classic forms
1
17
New in 8.5.1
2
New in 8.5.2
3
New in 8.5.3
4
New in 9.0

18. checkActionIDs and checkPositions functions
 Call these functions to display IDs or position numbers of action bar menu items.
 checkActionIDs( s_MenuID ) - new architecture views and forms
– Displays the menu ID in the hover text of “MENU ID” item
– Displays the menu item ID in the hover text
 checkActionPositions(s_TopBranchId) - “classic” forms
– Displays the position number next to the menu item.
18

19. How do you edit IBM iNotes markup?
 Forms and Subforms
– Domino Designer
– Forms9_x.nsf or Forms9.nsf
 Images and skin elements
– Domino Designer within ResourcesFiles
19

20. Demo
20

21. Referring to new resources

Added to the Extension Forms file
– Add the file to ResourcesFiles
– src="/iNotes/Forms9_x.nsf/LotusSoftware.png"
– background-image:url(@{s_EFF}/act-hyper-hover-images.gif?OpenFileResource&MX);
• s_FF = Forms file
• s_EFF = Extension Forms file

File on Domino server
– Put file into <Domino data directory>dominohtml
– src="/file.html"

On another server
– src=”http://www.server.com/file.gif'
21

22. Migrating customizations from 8.5.x to 9.0 Social Edition
 Rename Forms85_x.nsf to Forms9_x.nsf
 Run agent to change value of $FormsTemplateFile field in icon note to:
– "iNotes/Forms9.nsf"
22

23. Modifying the look
 Override styles in the stylesheets
– Custom_CSS
 Override grad fill color specs
– dwa.properties
 Consolidated icons
– One image file that contains many icons
– Icons are selected by x, y coordinates in the styles
– Files: basicicons.gif, commonactionicons.gif, commonactionicons.gif,mailoutlineicons.gif,
viewactionicons.gif
 Change the layout
– &Layout URL argument
– Modify skins in main Forms file
• f_ShimmerSkin-h_ListFolder for views
• f_ShimmerSkin-h_MailPage for documents

24. Customizing ultra-light mode
 Styles:
– m_StyleSheet_xxx
– iphone.css and standard.css – for 8.5 and earlier
 Layout and code are combined in m_xxx forms and subforms
 Images are in mxxx files in ResourcesFiles
24

25. Demo
25

26. IBM iNotes Web page construction
 All Forms/Subforms use pass-thru HTML
 Special tags are interpreted by server to:
– Insert skin
– Insert skin components
– Insert subforms
– Evaluate computed blocks (@formulas)
– Determine persisted and computed-only items
 Full mode is now using Lite mode architecture
– Use combination of skin components (loaded by server) and widgets (client)
– More AJAX (lazy loading, etc.)
26

27. iNotes code/forms
 Loaded by InsertNotesSubForm
 Browser specific:
– xxxCode – IE
– xxxCode_Gecko – Mozilla
– xxxCode_Safari – Safari
 f_xx – used by Full mode only
 l_xx – used by Lite and Full mode
 INI setting iNotes_WA_Debug_SubForms=1 – subform names are displayed on the server console as
they are loaded
27

28. Special server-side tags
Insert content from other design elements
 <NotesField Name=ItemName>
– Define persisted field
• Type=Text|TextList|RichText|Mime|Number|NumberList| Time|TimeList
• InitialValue=
- Evaluated if item doesn’t exist within document
• Value=
- Evaluated as page is generated and as page is saved
– Example:
• <NotesField Name=Subject>
 <NotesVar Name=ItemName>
– Define a computed for display only item
– Same element attributes as Notes field
 <NotesDictionary>…</NotesDictionary>
– Block which may contain NotesVar and NotesField tags
 All support an includeif={@formula} attribute for conditional inclusion
28

29. Special server-side tags
Conditionally include content
 <NotesFragment includeif={test}>
– Includes the content if test is true
• <NotesFragment includeif={s_Gecko="1"}>
background-color: blue;
• </NotesFragment>
 <NotesFragmentSwitch>
– Simulates the if ... elseif ... else ... pattern:
• <NotesFragmentSwitch>
• <NotesFragment includeif={s_Gecko="1" | s_Safari="1"}>
top:1px;
• </NotesFragment>
• <NotesFragment>
top: 0px;
width: 0px;
• </NotesFragment>
• </NotesFragmentSwitch>
29

30. Demo
30

31. Miscellaneous
 String resources in separate file
– File: dwa_xx.properties
• In ResourcesFiles of main Forms file
– Easier to add / modify strings
– Customizers can add new languages
– In 9.0.1 can override strings in Extension Forms File
 Log messages to the iNotes console
– Example: AAA.EVI.sr(level, “”,"message”);
– level:
• 0 = error
• 1 = warning
• 2 = info
• 3 = detail
31

32. QueryOpen/QuerySave agents
 IBM iNotes doesn’t use these within core application
 Add iNotes_WA_QueryAgents=1 to NOTES.INI to enable this functionality
 Two NotesVars are used to invoke agents
– $$QueryOpenAgent
– $$QuerySaveAgent
– Example:
• <NotesVar NAME={$$QuerySaveAgent} INITIALVALUE={“YourAgent”}>
 Please refer to the Manipulating Data in Domino Web Access developerWorks article for a working
example of QueryOpen and QuerySave agents
 Starting in 8.5.2, agents can be in Extension Forms File
32

33. Debugging tools
 Firefox
– Firebug
 IE
– Developer Toolbar (included in IE9 and later. Downloadable for earlier versions)
– Visual Studio
 Safari
– Develop menu
 Chrome
– Developer tools
 Access by F12
33

34. Obfuscated code
 ObfuscationList.txt
 In ResourcesFiles
 Unobfuscators available:
– http://www.openntf.org/blogs/openntf.nsf/d6plinks/NHEF-9CQ98M
– http://openntf.org/p/Unobfuscator
34

35. Updates in 9.0 Social Edition
 Classic_Custom_SessionInfo
 Adding Custom_Masthead will cause 9.0 masthead to be hidden
 Standard 9.0 masthead can be modified using Custom_Scene_Actions_Lite
35

36. Updates in 9.0.1 Social Edition
 Can override strings
 Customize name type ahead drop down
 Can override any subform
36

37. Summary
 Some ways to make basic customizations are provided
– Policies
– Using Custom_* forms and subforms
 Look of IBM iNotes pages can be customized by CSS styles and grad fill color specs
 For more complex customizations, you need to understand how IBM iNotes pages are generated
 Useful tools for examining page layout and debugging JavaScript are available
37

38. IBM iNotes Customization Resources
 Notes and Domino wiki
– http://www-10.lotus.com/ldd/dominowiki.nsf
– Community Articles, Lotus iNotes, Lotus iNotes Customization
 Wiki article
– http://www-10.lotus.com/ldd/dominowiki.nsf/dx/The_basics_of_iNotes_customization
 Notes / Domino 8.5 forum on developerWorks
– http://www-10.lotus.com/ldd/nd85forum.nsf
– Product area: iNotes, Technical Area: Customization
 Notes / Domino 9.0 Social Edition Forum
– http://www-10.lotus.com/ldd/ndseforum.nsf
– Category: iNotes
38

39. Related sessions/resources
 ID103: What's New in IBM iNotes Social Edition
 ID107: Configuring IBM SmartCloud Notes Web for Your Organization
 ID110: Living in the Web is Easy! Extending IBM Notes Client-Based Applications to Browser Clients
 ID111: IBM Notes Browser Plug-in : Leverage Your IBM Notes Application Investment in a Browser
 iNotes Team in the Meet the Developers Lab
 Session examples available in the lab and on-line

40. Engage Online
 SocialBiz User Group socialbizug.org
– Join the epicenter of Notes and Collaboration user groups
 Follow us on Twitter
– @IBMConnect and @IBMSocialBiz
 LinkedIn http://bit.ly/SBComm
– Participate in the IBM Social Business group on LinkedIn:
 Facebook https://www.facebook.com/IBMSocialBiz
– Like IBM Social Business on Facebook
 Social Business Insights blog ibm.com/blogs/socialbusiness
– Read and engage with our bloggers
40

41.  Access Connect Online to complete your session surveys using any:
– Web or mobile browser
– Connect Online kiosk onsite
41

42. Acknowledgements and Disclaimers
Availability. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates.
The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational purposes only, and are neither
intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to verify the completeness and accuracy of the information
contained in this presentation, it is provided AS-IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise
related to, this presentation or any other materials. Nothing contained in this presentation is intended to, nor shall have the effect of, creating any warranties or representations from IBM or
its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software.
All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and
performance characteristics may vary by customer. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you
will result in any specific sales, revenue growth or other results.
© Copyright IBM Corporation 2014. All rights reserved.
 U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 IBM, the IBM logo, ibm.com, Notes, iNotes, Domino, IBM SmartCloud, and WebSphere are trademarks or registered trademarks of International Business Machines Corporation in the
United States, other countries, or both. If these and other IBM trademarked terms are marked on their first occurrence in this information with a trademark symbol (® or ™), these
symbols indicate U.S. registered or common law trademarks owned by IBM at the time this information was published. Such trademarks may also be registered or common law
trademarks in other countries. A current list of IBM trademarks is available on the Web at “Copyright and trademark information” at www.ibm.com/legal/copytrade.shtml
42