© 2014 IBM Corporation

AD105: IBM iNotes and IBM SmartCloud Notes Web Customization: Make It Your Own

Eric Spencer, IBM

2

Agenda

How customizable is IBM iNotes?

Basic customizations

– demo

Modifying the look

– demo

Web page generation overview

– demo

Summary

Q & A

SaaS / Public Cloud Dedicated Cloud On Premises

Agility and Price Advantage

Pay per use, standard terms of use

Automatic updates

Shared infrastructure and ops

Instant scale

Customization, Flexibility

You own the license or capital

Choice of where and how data is managed

Completely customizable

Dedicated infrastructure

ConsiderationsHow 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?

Business Considerations Drive the Way Customers Consume Software

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

5

Template and Forms File

mail85.ntf

mail\JUser.nsf

iNotes\Forms9.nsf

References

Domino server

Inherits

Browser

View Design Data

Most Design:

HTML, CSS, JavaScript, Images

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

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

8

iNotes Admin Policy Support

iNotes MailSettings

User UI mode

Functional areas

Functional area at login

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

iNotes Display Language

ST Proxy Enablement

Extension Forms File

iNotes Mail Settings (cont.)

*IBM Docs Integration

*IBM Connections Files integration

Shared Mail Settings

Mail basics

Follow up

Attention indicators

Message recall

Calendar basics

Calendar display

Notices

Scheduling

Automatic processing

Rooms and resources

Mail and Calendar

Disclaimer text

Disclaimer position

Soft Delete Time

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

Security Settings

Password Quality

Certificate Expiration

Notes ID Vault

iNotes Proxies

Password Expiration

Archive Settings

Server-based archiving

Prohibit archiving

Prohibit private archiving criteria

*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

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

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.

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

13

Extension Forms File

iNotes\Forms9_x.nsf

Forms9_x.ntf

mail85.ntf

mail\JUser.nsf

iNotes\Forms9.nsf

Domino server

Browser

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)

15

Some functions in Custom_JS_Lite Form

Custom_Scene_Actions_Lite Add, remove or change actions

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 Set which columns get displayed when alternate name is enabled

Callbacks and Functions

16

More functions in Custom_JS_Lite

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”

Helpers

addActionsLite Add new menus or submenus to action bar

removeActionsLite Remove menus or submenus from action bar

repositionActionsLite Changes position of menus or submenus

checkActionIDs Display menu IDs

checkActionPositions Display menu position numbers - “classic” forms

Custom_ActionsHelper_Lite subform

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

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 Resources\Files

20

Demo

21

Referring to new resources

Added to the Extension Forms file

– Add the file to Resources\Files– 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>\domino\html– src="/file.html"

On another server

– src=”http://www.server.com/file.gif'

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"

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 Resources\Files

25

Demo

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

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

28

Special server-side tagsInsert 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

29

Special server-side tagsConditionally 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>

30

Demo

31

Miscellaneous

String resources in separate file

– File: dwa_xx.properties• In Resources\Files 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

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

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

34

Obfuscated code

ObfuscationList.txt

In Resources\Files

Unobfuscators available:

– http://www.openntf.org/blogs/openntf.nsf/d6plinks/NHEF-9CQ98M– http://openntf.org/p/Unobfuscator

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

36

Updates in 9.0.1 Social Edition

Can override strings

Customize name type ahead drop down

Can override any subform

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

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

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

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

41

42

Acknowledgements and Disclaimers

© 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

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.