Published on

  • just one note - after testing this, the before page loads code, i had to move it into the column formula for the pager to work . thanks again for posting this
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for sharing this. I finally got it to work. Using DDE 8.5.2, on the data panel for the column, set it to 'computed value and make the value ' ' . This is what worked for me. Much Appreciated!!!!
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Xpages – Creating View Icons Lotus Notes R8.5 Helpful tip
  2. 2. Issue: Xpages and View Icons <ul><li>In a Lotus Notes view, displaying view icons is a handy way for displaying statuses or other information easily (and takes up less space). </li></ul>
  3. 3. Issue: Xpages and View Icons <ul><li>When creating a view xpage, view icons are not available automatically like in a view. </li></ul>
  4. 4. Issue: Xpages and View Icons
  5. 5. Solution: Computed View Icons <ul><li>There is a solution on Lotus Notes Application Wiki - http://www-10.lotus.com/ldd/ddwiki.nsf/dx/02042009032445PMWEBRXJ.htm . </li></ul><ul><ul><li>There were two minor issue not noted in the Wikki </li></ul></ul><ul><ul><ul><li>You need to tell what server the icons are on, which is not documented. </li></ul></ul></ul><ul><ul><ul><li>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.) </li></ul></ul></ul><ul><li>Described in the next few slides are better details on making view icons work. </li></ul><ul><ul><li>1) Get the view column numbers of the columns you want to display the view icons. </li></ul></ul><ul><ul><ul><li>Get column value with icon property. Col 0 = first column, Col 1 = second column, etc. </li></ul></ul></ul><ul><ul><li>2) Use Icons in the Open Image Resource </li></ul></ul><ul><ul><ul><ul><li>You may want to make copies and renumber, or using existing name. </li></ul></ul></ul></ul>
  6. 6. Solution: Computed View Icons <ul><ul><li>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 </li></ul></ul>
  7. 7. Solution: Computed View Icons <ul><ul><li>4) Highlight all the fields and drag into the Custom Control/Xpage (you can remove,rearrage columns as needed). </li></ul></ul>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(&quot;CStatus&quot;); return thisView;
  8. 8. Solution: Computed View Icons <ul><ul><li>5) Open the columns that need the view icons – Turn on the Display column Values, Content type = “HTML”. </li></ul></ul><ul><ul><li>6) Select Icon option and Column Image - Computed </li></ul></ul>
  9. 9. Solution: Computed View Icons <ul><ul><li>8) The computed text, which can vary depending on Column number and recourse icon names: </li></ul></ul><ul><ul><ul><ul><ul><li>var url:XSPUrl = new XSPUrl(database.getHttpURL()); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>var idx = viewEntry.getColumnValues().get(6); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>var pics = &quot;&quot;; </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>if (idx<10) </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>pics += &quot;00&quot; + idx </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>else if (idx < 100) </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>pics +=&quot;0&quot; +idx </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>else </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>pics = idx; </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>var path = &quot;&quot;+h+&quot;.nsf/&quot; + &quot;vwicn&quot;+ pics + &quot;.gif&quot;+ &quot;?OpenImageResource&quot;; </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>url.setPath(path); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>url.removeAllParameters() </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>return url.getPath() </li></ul></ul></ul></ul></ul>
  10. 10. Solution: Computed View Icons <ul><ul><li>9) Once you fill in the column information, open the source, to add universal variables </li></ul></ul><ul><ul><ul><ul><ul><li><xp:this.beforePageLoad><![CDATA[#{javascript:/* </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Created By: Sheila Blanchette </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Created On: 12/21/2009 </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Setting up Varables for ViewICONs in Xpage Views </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>*/ </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>var PJDB:NotesDatabase = session.getCurrentDatabase(); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>var pjname:string = PJDB.getFilePath(); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>var varserver:String = PJDB.getServer(); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>var i=@Left(PJDB,&quot;.nsf&quot;); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>var h = &quot;http://mks-appdev2.mksinternal.com//&quot;+ i </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>}]]></xp:this.beforePageLoad> </li></ul></ul></ul></ul></ul>
  11. 11. Solution: Computed View Icons <ul><ul><li>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. </li></ul></ul>
  12. 12. Lessons Learned: <ul><li>Recommend: View Icons should be used on a flat (not categorized view). </li></ul>
  13. 13. Lessons Learned: <ul><li>If you are getting an error, on the xpage when display on the web (trying displaying it to the Client – displays error messages) </li></ul>