learn everything about ibm inotes customization

IBM iNotes and SmartCloud Notes Web Customization

Eric Spencer, IBM Software Engineer, iNotes Development

IBM SBT Webinar 10/23/13

© 2013 IBM Corporation2

Next Webinars

● Tentatively November 6th: App Dev Update in IBM Domino 9.0.1

● Recordings: YouTube.com/ibmsbt


Disclaimers

IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawal without notice at IBM’s sole discretion.

Information regarding potential future products is intended to outline our general product direction and it should not be relied on in making a purchasing decision.

The information mentioned regarding potential future products is not a commitment, promise, or legal obligation to deliver any material, code or functionality. Information about potential future products may not be incorporated into any contract. The development, release, and timing of any future features or functionality described for our products remains at our sole discretion.

Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will experience will vary depending upon many factors, including considerations such as the amount of multiprogramming in the user’s job stream, the I/O configuration, the storage configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve results similar to those stated here.


Agenda

● How customizable is IBM iNotes?● Basic customizations

● demo● Skins and skin components

● demo● IBM iNotes page generation

● demo● Summary● Q & A


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


Template and Forms File

mail85.ntf

mail\JUser.nsf

iNotes\Forms85.nsf

References

Domino server

Inherits

Browser

View Design Data

Most Design:

HTML, CSS, JavaScript, Images


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

● Edit skins and stylesheets● Modify forms● Add widgets in sidebar panel


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


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


Can't set policies in SCN

● Some settings are available in SCN Administration Account Settings● Under System Settings – IBM SmartCloud Notes


New architecture in 8.5

● Full mode uses the “lite” architecture that was introduced in 8.0.1● Tabbed UI● Uses widgets● Some forms still 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


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


Extension forms file in IBM SmartCloud Notes

● Requires brief contract with ISSC● Must use Extension Forms file template downloaded from the service● Some restrictions on customizations


Extension Forms File

iNotes\Forms85_x.nsf

Forms85_x.ntf

mail85.ntf

mail\JUser.nsf

iNotes\Forms85.nsf

Domino server

Browser


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 l_SessionInfo/f_SessionInfo/s_SessionInfo form if you need per user or per mail file formula computations (special subform added in 8.5.3)


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


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


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


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.


How do you edit IBM iNotes markup?

● Forms and Subforms● Domino Designer● Forms85_x.nsf or Forms85.nsf

● Images● Domino Designer within Resources\Files

● Skin elements● Domino Designer within Resources\Files

● l_ShimmerSkin-xxx for Lite mode● f_ShimmerSkin-xxx for Full mode● h_ShimmerSkin-xxx for:

● “classic” forms ● 8.0.x Full mode ● 7.x and earlier releases


Demo


Referring to new resources

● Added to the Extension Forms file● Add the file to Resources\Files● src="/iNotes/Forms85_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'


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"


Skin groups and types

● Skin Type (Skin)● Member of a skin group set● Contains HTML markup to emit within the page body to govern overall

page layout● Special Skin type: h_Stylesheet (CSS file)

● Contains CSS definitions● Skin Group

● A set of skins sharing the same stylesheets● Primary skin group is f_ShimmerSkin● Two less significant skin groups: h_ShimmerSkin_UB (unsupported

browser), h_ShimmerSkin_ACC (accessibility…not used)● Prior to 8.5.1 there was a separate skin group for each browser type

Example: f_ShimmerSkin-h_ListFolder


Which skin is used?

● Skin type h_ListFolder is used for all views● unless h_SkinTypeOverride is set – by URL arg or NotesVar

● h_MailPage is used for new architecture document forms● “classic” forms have 2 vars defined on the page to identify skin:

● h_CurrentSkinName var identifies skin group● h_CurrentSkinType var identifies skin type:

● h_MailPage: Mail Message, Contact, Notebook Page● h_ApptPage: Meeting, Appointment, To Do


Stylesheets

● h_StylesheetView● Used for views

● h_StylesheetDocuments● Used for documents – mail and meeting notice in Lite mode only

● h_StylesheetOverride ● Used for “classic” forms

● h_Stylesheet● Used for things not specific to view or documents

● h_StyleSheetPortal● Used for IBM WebSphere® Portal

Example: f_ShimmerSkin-h_StyleSheetDocuments


Skin components - h_ListFolder

Modepanel_SkinComponent_Lite

ShimmerSwitcher_SkinComponent_Lite

SceneLabel_SkinComponent_Lite

ShimmerMainTabs_SkinComponent_Lite

Search_SkinComponent_Lite

PageContent_SkinComponent_Lite

ServerTitleAndMailQuota_SkinComponent_Lite

Custom_Banner_Lite


Sample skin HTML segment

● Skin components are in subforms● Other elements you will see:

● com_ibm_dwa_ui_widget_class● widget definition● <v:fill> (IE) or <canvas> (Mozilla) tags

● gradient fills

<div id="e-maintabs-container" class="s-toppanel"><InsertNotesSubForm name="ShimmerMainTabs_SkinComponent_Lite"></div><div class="s-toppanel" style="height:1.5em;"><InsertNotesSubForm name="Modepanel_SkinComponent_Lite"></div>

Skin components


Customizing ultra-light mode

● Styles:● m_StyleSheet_xxx● iphone.css and standard.css – for 8.5 and earlier

● Does not use skins● Layout and code are combined in m_xxx forms and subforms● Images are in mxxx files in Resources\Files


Demo


More on skin customization

● Gradient fills● Specified in dwa.properties● See wiki article for more details

● 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


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


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


Special server-side tagsInsert content from other design elements

● <QuickPlaceSkinComponent Name=xxx>● Inserts contents of subform named xxx_SkinComponent

● <InsertNotesSubForm Name=SubFormName>● Name may be a computed value

● <InsertNotesSubForm Name=@{...}>● Conditional insertions by using @If and specifying empty string● optional="yes" for optional subforms


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


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>


Demo


Miscellaneous

● String resources in separate file● File: dwa_xx.properties

● In Resources\Files● Easier to add / modify strings● Customizers can add new languages

● Log messages to the iNotes console● Example: AAA.EVI.sr(level, “”,"message”);● level:

● 0 = error● 1 = warning● 2 = info● 3 = detail


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


Debugging tools

● Firefox● Firebug

● IE● Developer Toolbar (in IE9 and later: F12)● Visual Studio

● Safari● Develop menu

● Chrome● Developer tools


Obfuscated code

● ObfuscationList.txt● In Resources\Files● Unobfuscators available:

● http://openntf.org/p/Firebug%20JavaScript%20Mirror%20Tool%20Add-on

● http://openntf.org/p/Unobfuscator


Updates in 8.5.2

● Design elements in Extension Forms File do not inherit design changes● New subforms:

● Custom_xxx_Dictionary● Custom_LazyLoad_Subforms● Custom_Logout● Custom_About

● Agents can be stored in Extension Forms File


Updates in 8.5.3

● Can now update menu items● Policy to set Extension Forms File● Custom_SessionInfo● iNotes_WA_RunQOAgentsForNewLiteForm


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


Summary

● Some ways to make basic customizations are provided● Policies● Using Custom_* forms and subforms

● Look of IBM iNotes pages can be customized by editing skins, skin components, and stylesheets

● 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


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


Resources and Questions

● Home page: http://ibmdw.net/social● SDK: http://ibmsbt.openntf.org● GitHub: https://github.com/OpenNTF/SocialSDK● StackOverflow: #ibmsbt● Twitter: @ibmsbt● YouTube: http://youtube.com/ibmsbt● Playground: http://bit.ly/sbtplayground


Acknowledgements and Disclaimers

© Copyright IBM Corporation 2013. 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, Rational, the Rational logo, Telelogic, the Telelogic logo, Green Hat, the Green Hat logo, and other IBM products and services 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.shtmlOther company, product, or service names may be trademarks or service marks of others.

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.

http://www.ibm.com/legal/copytrade.shtml

learn everything about ibm inotes customization

Technology

ibm corporation

ibm domino

ibm docs integration

ibm software engineer

standard ibm benchmarks

resources mail

mail sign

newer settings