Transcript Xpages – Creating View Icons

Xpages –
Creating View Icons
Lotus Notes R8.5 Helpful tip
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).
Issue: Xpages and View Icons

When creating a view xpage, view icons are not
available automatically like in a view.
Issue: Xpages and View Icons
Solution: Computed View Icons


There is a solution on Lotus Notes Application Wiki - http://www10.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.
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
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;
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
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()
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>
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.
Lessons Learned:

Recommend: View Icons should be used
on a flat (not categorized view).
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)