Xpages – Creating View Icons

1. Xpages – Creating View Icons Lotus Notes R8.5 Helpful tip

2. Issue: Xpages and View Icons • In a Lotus Notes view, displaying view icons is a handy way for displaying statuses or other information easily (and takes up less space).

3. Issue: Xpages and View Icons • When creating a view xpage, view icons are not available automatically like in a view.

4. Issue: Xpages and View Icons

5. Solution: Computed View Icons • There is a solution on Lotus Notes Application Wiki - http://www-10.lotus.com/ldd/ddwiki.nsf/dx/02042009032445PMWEBRXJ.htm. • There were two minor issue not noted in the Wikki • You need to tell what server the icons are on, which is not documented. • You have to have access to the server files structure to get to the icons. (Some of us live in 3 tier environment system Dev,QA, Prod. Yes, some developers don’t have direct access to prod servers. I am one of them.) • Described in the next few slides are better details on making view icons work. • 1) Get the view column numbers of the columns you want to display the view icons. • Get column value with icon property. Col 0 = first column, Col 1 = second column, etc. • 2) Use Icons in the Open Image Resource • You may want to make copies and renumber, or using existing name.

6. Solution: Computed View Icons • 3) Create Custom Control/Xpage and in the Data section – Add the Domino View and select current or other database to import the Notes View to use on this custom control or xpage

7. Solution: Computed View Icons • 4) Highlight all the fields and drag into the Custom Control/Xpage (you can remove,rearrage columns as needed). Note: If you have Dev/QA environment, you may want change the data source from Static to computed (to remove the hardcoded server name) Example 1:var thisDB:NotesDatabase = session.getCurrentDatabase(); return thisDB; Example 2: var thisDB:NotesDatabase = session.getCurrentDatabase(); var thisView:NotesView = thisDB.getView("CStatus"); return thisView;

8. Solution: Computed View Icons • 5) Open the columns that need the view icons – Turn on the Display column Values, Content type = “HTML”. • 6) Select Icon option and Column Image - Computed

9. Solution: Computed View Icons • 8) The computed text, which can vary depending on Column number and recourse icon names: var url:XSPUrl = new XSPUrl(database.getHttpURL()); var idx = viewEntry.getColumnValues().get(6); var pics = ""; if (idx<10) pics += "00" + idx else if (idx < 100) pics +="0" +idx else pics = idx; var path = ""+h+".nsf/" + "vwicn"+ pics + ".gif"+ "?OpenImageResource"; url.setPath(path); url.removeAllParameters() return url.getPath()

10. Solution: Computed View Icons • 9) Once you fill in the column information, open the source, to add universal variables <xp:this.beforePageLoad><![CDATA[#{javascript:/* Created By: Sheila Blanchette Created On: 12/21/2009 Setting up Varables for ViewICONs in Xpage Views */ var PJDB:NotesDatabase = session.getCurrentDatabase(); var pjname:string = PJDB.getFilePath(); var varserver:String = PJDB.getServer(); var i=@Left(PJDB,".nsf"); var h = "http://mks-appdev2.mksinternal.com//"+ i }]]></xp:this.beforePageLoad>

11. Solution: Computed View Icons • 10) Now, can save the custom Control and to Xpage or save the Xpage. (you may have to update the code to fit your environment.

12. Lessons Learned: • Recommend: View Icons should be used on a flat (not categorized view).

13. Lessons Learned: • If you are getting an error, on the xpage when display on the web (trying displaying it to the Client – displays error messages)