Congratulations!

[Valid RSS] This is a valid RSS feed.

Recommendations

This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

Source: http://xpage.me/rss

  1. <?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
  2. xmlns:content="http://purl.org/rss/1.0/modules/content/"
  3. xmlns:wfw="http://wellformedweb.org/CommentAPI/"
  4. xmlns:dc="http://purl.org/dc/elements/1.1/"
  5. xmlns:atom="http://www.w3.org/2005/Atom"
  6. xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
  7. xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
  8. xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:media="http://search.yahoo.com/mrss/"
  9. >
  10.  
  11. <channel>
  12. <title>Xpage.me</title>
  13. <atom:link href="https://xpage.me/feed/" rel="self" type="application/rss+xml" />
  14. <link>https://xpage.me</link>
  15. <description>XPages and other dev type stuff.</description>
  16. <lastBuildDate>Thu, 29 Dec 2016 04:33:39 +0000</lastBuildDate>
  17. <language>en</language>
  18. <sy:updatePeriod>hourly</sy:updatePeriod>
  19. <sy:updateFrequency>1</sy:updateFrequency>
  20. <generator>http://wordpress.com/</generator>
  21. <cloud domain='xpage.me' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
  22. <image>
  23. <url>https://secure.gravatar.com/blavatar/ceb250b0319aaf2b91c4c0b4ddb5695e?s=96&#038;d=https%3A%2F%2Fs2.wp.com%2Fi%2Fbuttonw-com.png</url>
  24. <title>Xpage.me</title>
  25. <link>https://xpage.me</link>
  26. </image>
  27. <atom:link rel="search" type="application/opensearchdescription+xml" href="https://xpage.me/osd.xml" title="Xpage.me" />
  28. <atom:link rel='hub' href='https://xpage.me/?pushpress=hub'/>
  29. <item>
  30. <title>Questions from the DataTables Webinar</title>
  31. <link>https://xpage.me/2016/10/18/questions-from-the-datatables-webinar/</link>
  32. <comments>https://xpage.me/2016/10/18/questions-from-the-datatables-webinar/#respond</comments>
  33. <pubDate>Tue, 18 Oct 2016 14:58:59 +0000</pubDate>
  34. <dc:creator><![CDATA[michaelgsmith]]></dc:creator>
  35. <category><![CDATA[Uncategorized]]></category>
  36.  
  37. <guid isPermaLink="false">http://xpage.me/?p=458</guid>
  38. <description><![CDATA[Last Tuesday I presented a Webinar on using DataTables with XPages which was hosted by TLCC and Teamstudio.  There was a Q&#38;A at the end of the session, but unfortunately due to time constraints we did not get to all of the questions and kind of rushed through the questions we did get to.  So I wanted [&#8230;]<img alt="" border="0" src="https://pixel.wp.com/b.gif?host=xpage.me&#038;blog=71152377&#038;post=458&#038;subd=xpagedotme&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
  39. <content:encoded><![CDATA[<p>Last Tuesday I presented a Webinar on using DataTables with XPages which was hosted by TLCC and Teamstudio.  There was a Q&amp;A at the end of the session, but unfortunately due to time constraints we did not get to all of the questions and kind of rushed through the questions we did get to.  So I wanted to dedicate a blog post to answering all of the questions that were submitted.  Here we go!</p>
  40. <p><strong>Q1:</strong> <strong>(Submitted by Jena Chinmaya) &#8211; Can we use Data table of this format on a regular non xpage classic notes web database ?</strong></p>
  41. <p><strong>A1:</strong> Absolutely!  A lot of the concepts that were discussed would still apply in a classic Domino Web scenario.  The big question that would have to be answered is, how is your data being delivered from the back end to the front end?  If you are using a more recent version of Domino (say, 8.5.3 or greater) then you can create an XPage with a REST service control.  If you are using an older version of Domino, then you still have a few different options:</p>
  42. <ul>
  43. <li>Using a $$ViewTemplateDefault form to display the view.  This would be similar to using a xp:repeat in XPages since you would be applying DataTables to an existing html table of data.  I created a <a href="http://stellandev.com/magnitude/xpages/mwlug/fakenamesdemo.nsf/byname?openview" target="_blank">quick demo</a> so you can get an idea how this would function.</li>
  44. <li>Use an agent to deliver view data via REST</li>
  45. <li>Use ajax to get data using the ?readviewentries&amp;outputformat=JSON option of a view url.  This method would require some additional work in DataTables to read the data.</li>
  46. </ul>
  47. <p><strong>Q2: (Submitted by Chris Richards) Could you, using REST services &#8211; create one custom control, which you can drop anywhere, and just pass in a cusotm property, namely a view name so that it can be drag/dropped/re-used all over an application with ease?</strong></p>
  48. <p><strong>A2:</strong> This can definitely be accomplished and is a great way to make adding view data as simple as drag and drop.  I essentially do this now through an extremely configurable custom control.  The key to success is making sure that the columns object gets properly defined if you are using JSON data.  I hope to make my solution available in the very near future and I&#8217;m contemplating a &#8220;light&#8221; version that I can get out quicker.</p>
  49. <p><strong>Q3:</strong> <strong>(Submitted by Csaba Kiss) Do you see any performance difference using custom REST service vs standard JSON REST?</strong></p>
  50. <p><strong>A3:</strong> While I have not done a direct performance comparison of these REST services, I think it&#8217;s reasonable to assume that the more &#8220;custom&#8221; the custom REST service is, the more it will slow down vs the standard REST service.  For example, if while processing each row you are looping through column values to perform actions, you can certainly expect a performance hit.  If the custom REST service is just traversing a view, then I would expect the performance to be similar to the standard REST service.</p>
  51. <p><strong>Q4:</strong> <strong>(Submitted by Jen Watkins) how does one format dates? The format that comes back by default from DataTables is crazy.</strong></p>
  52. <p><strong>A4:</strong> I think the format you are referring to is the <strong>ISO-8601</strong> format, which you can see in the screenshot below.  Actually, this format is being delivered by Domino.  You can see this at the bottom of the screenshot in the REST response.<img data-attachment-id="510" data-permalink="https://xpage.me/2016/10/18/questions-from-the-datatables-webinar/2016-10-18_9-02-21/" data-orig-file="https://xpagedotme.files.wordpress.com/2016/10/2016-10-18_9-02-21.png?w=590" data-orig-size="714,611" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2016-10-18_9-02-21" data-image-description="" data-medium-file="https://xpagedotme.files.wordpress.com/2016/10/2016-10-18_9-02-21.png?w=590?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2016/10/2016-10-18_9-02-21.png?w=590?w=590" class="alignnone size-full wp-image-510" src="https://xpagedotme.files.wordpress.com/2016/10/2016-10-18_9-02-21.png?w=590" alt="2016-10-18_9-02-21" srcset="https://xpagedotme.files.wordpress.com/2016/10/2016-10-18_9-02-21.png?w=590 590w, https://xpagedotme.files.wordpress.com/2016/10/2016-10-18_9-02-21.png?w=150 150w, https://xpagedotme.files.wordpress.com/2016/10/2016-10-18_9-02-21.png?w=300 300w, https://xpagedotme.files.wordpress.com/2016/10/2016-10-18_9-02-21.png 714w" sizes="(max-width: 590px) 100vw, 590px"   /></p>
  53. <p>There are a few ways to deal with this:</p>
  54. <ul>
  55. <li>When working strictly with dates, my personal preference is to just format the column as text in the view.  DataTables recognizes the value as a date and column sorting will work appropriately.</li>
  56. <li>You can use a renderer to format the date to your preferred format.  Here is a great <a href="https://datatables.net/plug-ins/dataRender/datetime" target="_blank">post on the DataTables website demonstrating how to do so</a>.  This post references the moment.js library.  I use this library as well and it makes working with dates incredibly easy, especially when doing date comparisons.</li>
  57. </ul>
  58. <p><strong>Q5: (Submitted by Jen Watkins)  To filter data before it is returned, for example to return only the data that a particular user is allowed to see, do you have to use the CustomRestService as opposed to the ViewJsonService?</strong></p>
  59. <p><strong>A5:</strong>  The answer to this question depends on how you have security setup in your application.  If your users are authenticating and they are calling REST services that are retrieving data from databases that require authentication, then the appropriate records will be returned based on Domino security.</p>
  60. <p>On the other hand, if you are no so much concerned about security, but want to only show, for example, documents that are assigned to the current user, you can sort or categorize your view on the back end and submit the &#8220;keys&#8221; attribute with the REST service and the dataset returned will be filtered.  You can actually get very creative with using categorized/sorted views to get away from the old Notes habit of having a different view for every different categorization/sort.</p>
  61. <p><strong>Q6:</strong> <strong>(Submitted by Kevin Gregg)  What if you needed to combine data from multiple views into one DataTable &#8211; what is a good method of doing that?</strong></p>
  62. <p><strong>A6:</strong>  When answering this question during the webinar I may have misunderstood the intention of the question so I will answer it in two ways.  This question can be interpreted in 2 ways:</p>
  63. <ol>
  64. <li>You want to add additional rows &#8211; I actually do this a lot.  We have 2 databases that store almost identical information.  In classic Notes land, we would have to show separate views and embedded views when displaying this information to the user.With DataTables it is very easy to combine data sets, as long as the configuration of the data sets match.  What I do is load the initial data, then in the initComplete callback I make an ajax call to the 2nd set of data and then use the add rows functionality of DataTables to merge the data:</li>
  65. </ol>
  66. <div style="background:#f8f8f8;overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;">
  67. <pre style="margin:0;line-height:125%;">initComplete<span style="color:#666666;">:</span> <span style="color:#008000;font-weight:bold;">function</span>() {
  68. <span style="color:#408080;font-style:italic;">// Check for any other data sets that need to be added to the table </span>
  69. $.ajax({
  70.    type<span style="color:#666666;">:</span> <span style="color:#ba2121;">'GET'</span>,
  71.    url<span style="color:#666666;">:</span> <span style="color:#666666;">&lt;</span>url to REST service<span style="color:#666666;">&gt;</span>,
  72.    contentType<span style="color:#666666;">:</span> <span style="color:#ba2121;">'application/json'</span>,
  73.    dataType<span style="color:#666666;">:</span> <span style="color:#ba2121;">'json'</span>,
  74.    cache<span style="color:#666666;">:</span> <span style="color:#008000;font-weight:bold;">false</span>,
  75.    success<span style="color:#666666;">:</span> <span style="color:#008000;font-weight:bold;">function</span>(response) {
  76.                <span style="color:#008000;font-weight:bold;">var</span> vTable <span style="color:#666666;">=</span> $(dataTableClass).DataTable();
  77.                vTable.rows.add(response);
  78.                console.log(<span style="color:#ba2121;">"init adding records"</span>);
  79.                console.log(<span style="color:#ba2121;">"initComplete draw()"</span>)
  80.                vTable.draw();
  81.   }
  82. });
  83. }
  84. </pre>
  85. </div>
  86. <ol start="2">
  87. <li>you want to add additional columns &#8211; This is akin to having a xp:repeat control and having a column where you perform a @dblookup to another set of data based on information in the original set.   For this scenario, the best course of action is probably to use a custom REST service or an XAgent to build the data set on the back end and deliver the completed set to DataTables.
  88. <p>However, you could also accomplish this in DataTables.  In your original data set you could have one or more empty cells acting as placeholders.  Then, similar as in #1 above, in your initComplete callback you can make an ajax call to another set of data and then using a shared key between the two, insert the retrieved data into the DataTable.  I will try to work up an example of this once I can find a few minutes.</li>
  89. </ol>
  90. <p><strong>Q7: (Submitted by Miguel Angel)  How I can lock a document from a datatable to prevent the save replication conflict? How I can show a online message from a Datatables, when a customer made a change at that moment?</strong></p>
  91. <p><strong>A7:</strong>  The lack of Document locking was certainly one of the early complaints of XPages.  Ultimately, people worked around it or rolled their own document locking mechanism.  Some of the solutions out there include:</p>
  92. <ul>
  93. <li>An <a href="https://www.openntf.org/main.nsf/project.xsp?r=project/XPage%20Document%20Locker/summary" target="_blank">OpenNTF project</a> from Frederick Nordling</li>
  94. <li>This <a href="http://stackoverflow.com/questions/10882925/best-way-to-deal-with-document-locking-in-xpages" target="_blank">post</a> from StackOverflow</li>
  95. <li>In our environment, we created our own document locking solution.  We needed to do this because we had users that were updating documents in the Notes Client as well as our XPages application.</li>
  96. </ul>
  97. <p>To relate this to DataTables, if you want to initialize a lock from DataTables, you can do this by adding an onclick or ondblclick event that submits information, such as docid,  to a REST service.  To release the lock, you would do the same.</p>
  98. <p>To answer your 2nd question, I&#8217;m assuming you want to update the current user if data they are looking at was changed in the back end by someone else.  Here&#8217;s what I think the simplest solution is:</p>
  99. <ul>
  100. <li>Add a setInterval to the initComplete callback that retrieves the REST data (or maybe just retrieves a column with date modified value).</li>
  101. <li>Loop through each record and compare the values to the original DataTable (or compare the date modified column).</li>
  102. <li>If there is a difference, notify the user.  If you are using Bootstrap you can use the alert classes to display a message above the table, for example.</li>
  103. </ul>
  104. <p>&nbsp;</p><br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/xpagedotme.wordpress.com/458/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/xpagedotme.wordpress.com/458/" /></a> <img alt="" border="0" src="https://pixel.wp.com/b.gif?host=xpage.me&#038;blog=71152377&#038;post=458&#038;subd=xpagedotme&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
  105. <wfw:commentRss>https://xpage.me/2016/10/18/questions-from-the-datatables-webinar/feed/</wfw:commentRss>
  106. <slash:comments>0</slash:comments>
  107. <media:content url="http://2.gravatar.com/avatar/8b23f4a8d87b176b74ffc501bf37b61f?s=96&#38;d=identicon&#38;r=G" medium="image">
  108. <media:title type="html">stellandev</media:title>
  109. </media:content>
  110.  
  111. <media:content url="http://xpagedotme.files.wordpress.com/2016/10/2016-10-18_9-02-21.png" medium="image">
  112. <media:title type="html">2016-10-18_9-02-21</media:title>
  113. </media:content>
  114. </item>
  115. <item>
  116. <title>Upcoming Webinar: XPages and jQuery DataTables</title>
  117. <link>https://xpage.me/2016/10/04/upcoming-webinar-xpages-and-jquery-datatables/</link>
  118. <comments>https://xpage.me/2016/10/04/upcoming-webinar-xpages-and-jquery-datatables/#comments</comments>
  119. <pubDate>Tue, 04 Oct 2016 12:39:59 +0000</pubDate>
  120. <dc:creator><![CDATA[michaelgsmith]]></dc:creator>
  121. <category><![CDATA[Uncategorized]]></category>
  122.  
  123. <guid isPermaLink="false">http://xpage.me/?p=444</guid>
  124. <description><![CDATA[Join me next Tuesday, October 11th for a webinar sponsored by TLCC and Teamstudio &#8211; &#8220;XPages and jQuery DataTables &#8211; Simplifying View creation while maximizing functionality&#8221; In this webinar I will show you how you can use DataTables to create rich, functional views, which is especially relevant if you are modernizing or rebuilding an existing Notes application.  While [&#8230;]<img alt="" border="0" src="https://pixel.wp.com/b.gif?host=xpage.me&#038;blog=71152377&#038;post=444&#038;subd=xpagedotme&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
  125. <content:encoded><![CDATA[<p>Join me next Tuesday, October 11th for a webinar sponsored by TLCC and Teamstudio &#8211; &#8220;<b>XPages and jQuery DataTables &#8211; Simplifying View creation while maximizing functionality&#8221;</b></p>
  126. <p>In this webinar I will show you how you can use DataTables to create rich, functional views, which is especially relevant if you are modernizing or rebuilding an existing Notes application.  While the title references XPages, it is not a requirement.  DataTables is compatible with any back end that can deliver data via REST.</p>
  127. <p>You can register here:</p>
  128. <p><a href="https://www.tlcc.com/admin/tlccsite.nsf/pages/xpages-webinar?opendocument" rel="nofollow">https://www.tlcc.com/admin/tlccsite.nsf/pages/xpages-webinar?opendocument</a></p>
  129. <p>I hope to see you there!</p><br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/xpagedotme.wordpress.com/444/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/xpagedotme.wordpress.com/444/" /></a> <img alt="" border="0" src="https://pixel.wp.com/b.gif?host=xpage.me&#038;blog=71152377&#038;post=444&#038;subd=xpagedotme&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
  130. <wfw:commentRss>https://xpage.me/2016/10/04/upcoming-webinar-xpages-and-jquery-datatables/feed/</wfw:commentRss>
  131. <slash:comments>6</slash:comments>
  132. <media:content url="http://2.gravatar.com/avatar/8b23f4a8d87b176b74ffc501bf37b61f?s=96&#38;d=identicon&#38;r=G" medium="image">
  133. <media:title type="html">stellandev</media:title>
  134. </media:content>
  135. </item>
  136. <item>
  137. <title>Adding icon columns to DataTables with FontAwesome</title>
  138. <link>https://xpage.me/2016/09/14/adding-icon-columns-to-datatables-with-fontawesome/</link>
  139. <comments>https://xpage.me/2016/09/14/adding-icon-columns-to-datatables-with-fontawesome/#respond</comments>
  140. <pubDate>Wed, 14 Sep 2016 04:55:33 +0000</pubDate>
  141. <dc:creator><![CDATA[michaelgsmith]]></dc:creator>
  142. <category><![CDATA[Uncategorized]]></category>
  143.  
  144. <guid isPermaLink="false">http://xpage.me/?p=281</guid>
  145. <description><![CDATA[If you are modernizing a Notes/Domino application, chances are there are many underlying views that make use of column icons, which have always been one the great little features that users really loved about Notes.  As Domino web apps became more prevalent, you could even create img tags that pointed to the icon source files on the [&#8230;]<img alt="" border="0" src="https://pixel.wp.com/b.gif?host=xpage.me&#038;blog=71152377&#038;post=281&#038;subd=xpagedotme&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
  146. <content:encoded><![CDATA[<p>If you are modernizing a Notes/Domino application, chances are there are many underlying views that make use of column icons, which have always been one the great little features that users really loved about Notes.  As Domino web apps became more prevalent, you could even create img tags that pointed to the icon source files on the server (oooohhhh!).</p>
  147. <p>In the modern app world you are probably using icons that are more &#8230; modern, such as Font Awesome.</p>
  148. <p>If you are using jQuery DataTables as well, then it is incredibly easy to add much more functional column icons to your DataTable using a Renderer.</p>
  149. <p><strong>Note:</strong> this article assumes the reader has an understanding of how a DataTable is configured using the columns object.</p>
  150. <p>For a primer, refer to my <a href="https://xpage.me/2016/08/24/slides-and-thoughts-from-mwlug-xpages-jquery-datatables/">MWLUG session slides</a>, the accompanying demo<a href="https://xpage.me/2016/09/08/demo-database-from-my-mwlug-session/"> database</a>, the <a href="http://stellandev.com/magnitude/xpages/mwlug/datatables.nsf/demo.xsp">online demos</a>, or the DataTables <a href="https://datatables.net/">website</a>.  This example builds on the demos.</p>
  151. <p>The example below takes the email column and turns it into an icon that, when clicked, will launch a new mail message addressed to the person listed on that line.</p>
  152. <p>We want to turn this:</p>
  153. <p><img data-attachment-id="386" data-permalink="https://xpage.me/2016/09/14/adding-icon-columns-to-datatables-with-fontawesome/2016-09-13_23-58-14/" data-orig-file="https://xpagedotme.files.wordpress.com/2016/09/2016-09-13_23-58-141.png?w=590" data-orig-size="454,233" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2016-09-13_23-58-14" data-image-description="" data-medium-file="https://xpagedotme.files.wordpress.com/2016/09/2016-09-13_23-58-141.png?w=590?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2016/09/2016-09-13_23-58-141.png?w=590?w=454" class="alignnone size-full wp-image-386" src="https://xpagedotme.files.wordpress.com/2016/09/2016-09-13_23-58-141.png?w=590" alt="2016-09-13_23-58-14" srcset="https://xpagedotme.files.wordpress.com/2016/09/2016-09-13_23-58-141.png 454w, https://xpagedotme.files.wordpress.com/2016/09/2016-09-13_23-58-141.png?w=150 150w, https://xpagedotme.files.wordpress.com/2016/09/2016-09-13_23-58-141.png?w=300 300w" sizes="(max-width: 454px) 100vw, 454px"   /></p>
  154. <p>Into this:</p>
  155. <p><img data-attachment-id="389" data-permalink="https://xpage.me/2016/09/14/adding-icon-columns-to-datatables-with-fontawesome/2016-09-14_0-04-13/" data-orig-file="https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-04-13.png?w=590" data-orig-size="351,214" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2016-09-14_0-04-13" data-image-description="" data-medium-file="https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-04-13.png?w=590?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-04-13.png?w=590?w=351" class="alignnone size-full wp-image-389" src="https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-04-13.png?w=590" alt="2016-09-14_0-04-13" srcset="https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-04-13.png 351w, https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-04-13.png?w=150 150w, https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-04-13.png?w=300 300w" sizes="(max-width: 351px) 100vw, 351px"   /></p>
  156. <p>&nbsp;</p>
  157. <p><strong>1.) Setup the view data source that feeds the DataTable.</strong></p>
  158. <p>This can be done by adding a new column to the datasource that contains a JSON string.  This is personal preference &#8211; you can setup the column however you wish.  The important thing is passing the data needed to render the icon to DataTables.</p>
  159. <p><img data-attachment-id="301" data-permalink="https://xpage.me/2016/09/14/adding-icon-columns-to-datatables-with-fontawesome/add_column_to_view/" data-orig-file="https://xpagedotme.files.wordpress.com/2016/09/add_column_to_view.png?w=590" data-orig-size="507,212" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="add_column_to_view" data-image-description="" data-medium-file="https://xpagedotme.files.wordpress.com/2016/09/add_column_to_view.png?w=590?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2016/09/add_column_to_view.png?w=590?w=507" class="alignnone size-full wp-image-301" src="https://xpagedotme.files.wordpress.com/2016/09/add_column_to_view.png?w=590" alt="add_column_to_view" srcset="https://xpagedotme.files.wordpress.com/2016/09/add_column_to_view.png 507w, https://xpagedotme.files.wordpress.com/2016/09/add_column_to_view.png?w=150 150w, https://xpagedotme.files.wordpress.com/2016/09/add_column_to_view.png?w=300 300w" sizes="(max-width: 507px) 100vw, 507px"   /></p>
  160. <p>The JSON string in my new column has three properties:</p>
  161. <ul>
  162. <li>renderer &#8211; has the value &#8220;getIcon&#8221;.</li>
  163. <li>icon &#8211; this property contains the class(es) of the Font Awesome icon to be used.</li>
  164. <li>data &#8211; this is the raw email address.  We want to include this for filtering and sorting.</li>
  165. </ul>
  166. <p><strong>2.) Now that the data source is setup, update the columns object of our DataTables initilization:</strong></p>
  167. <p>In previous examples our columns object looked like this:</p>
  168. <div style="background:#f8f8f8;overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;">
  169. <pre style="margin:0;line-height:125%;"><span style="color:#008000;font-weight:bold;">var</span> columns <span style="color:#666666;">=</span> [
  170. {
  171. data<span style="color:#666666;">:</span><span style="color:#ba2121;">"colName"</span>, <span style="color:#408080;font-style:italic;">// which property in the json object to pull data from</span>
  172. title<span style="color:#666666;">:</span><span style="color:#ba2121;">"Name"</span> <span style="color:#408080;font-style:italic;">// text to appear in the column header</span>
  173. },
  174. {data<span style="color:#666666;">:</span><span style="color:#ba2121;">"address"</span>,title<span style="color:#666666;">:</span><span style="color:#ba2121;">"Address"</span>},
  175. {data<span style="color:#666666;">:</span><span style="color:#ba2121;">"city"</span>,title<span style="color:#666666;">:</span><span style="color:#ba2121;">"City"</span>},
  176. {data<span style="color:#666666;">:</span><span style="color:#ba2121;">"state"</span>,title<span style="color:#666666;">:</span><span style="color:#ba2121;">"State"</span>},
  177. {data<span style="color:#666666;">:</span><span style="color:#ba2121;">"zip"</span>,title<span style="color:#666666;">:</span><span style="color:#ba2121;">"Zip"</span>},
  178. {data<span style="color:#666666;">:</span><span style="color:#ba2121;">"country"</span>,title<span style="color:#666666;">:</span><span style="color:#ba2121;">"Country"</span>},
  179. {data<span style="color:#666666;">:</span><span style="color:#ba2121;">"email"</span>,title<span style="color:#666666;">:</span><span style="color:#ba2121;">"Email"</span>},
  180. {data<span style="color:#666666;">:</span><span style="color:#ba2121;">"phone"</span>,title<span style="color:#666666;">:</span><span style="color:#ba2121;">"Phone"</span>}
  181. ];
  182. </pre>
  183. </div>
  184. <p>Now, we are replacing the &#8220;email&#8221; entry with a new entry that will render the Font Awesome icon by using the &#8220;render&#8221; property of the columns object:</p>
  185. <div style="background:#f8f8f8;overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;">
  186. <pre style="margin:0;line-height:125%;"><span style="color:#008000;font-weight:bold;">var</span> columns <span style="color:#666666;">=</span> [
  187. {
  188. data<span style="color:#666666;">:</span><span style="color:#ba2121;">"colName"</span>, <span style="color:#408080;font-style:italic;">// which property in the json object to pull data from</span>
  189. title<span style="color:#666666;">:</span><span style="color:#ba2121;">"Name"</span> <span style="color:#408080;font-style:italic;">// text to appear in the column header</span>
  190. },
  191. {data<span style="color:#666666;">:</span><span style="color:#ba2121;">"address"</span>,title<span style="color:#666666;">:</span><span style="color:#ba2121;">"Address"</span>},
  192. {data<span style="color:#666666;">:</span><span style="color:#ba2121;">"city"</span>,title<span style="color:#666666;">:</span><span style="color:#ba2121;">"City"</span>},
  193. {data<span style="color:#666666;">:</span><span style="color:#ba2121;">"state"</span>,title<span style="color:#666666;">:</span><span style="color:#ba2121;">"State"</span>},
  194. {data<span style="color:#666666;">:</span><span style="color:#ba2121;">"zip"</span>,title<span style="color:#666666;">:</span><span style="color:#ba2121;">"Zip"</span>},
  195. {data<span style="color:#666666;">:</span><span style="color:#ba2121;">"country"</span>,title<span style="color:#666666;">:</span><span style="color:#ba2121;">"Country"</span>},
  196. {data<span style="color:#666666;">:</span><span style="color:#ba2121;">"colIconEmail"</span>, // this is replacing "email"
  197. title<span style="color:#666666;">:</span><span style="color:#ba2121;">"Email"</span>,
  198. width<span style="color:#666666;">:</span><span style="color:#ba2121;">"50px"</span>,
  199. render<span style="color:#666666;">:</span><span style="color:#008000;font-weight:bold;">function</span>(data, type, row, meta) {
  200. <span style="color:#408080;font-style:italic;">// check to see if this is JSON</span>
  201. <span style="color:#008000;font-weight:bold;">try</span> {
  202.   <span style="color:#008000;font-weight:bold;">var</span> jsn <span style="color:#666666;">=</span> JSON.parse(data);
  203. } <span style="color:#008000;font-weight:bold;">catch</span>(e) {
  204.   console.log(<span style="color:#ba2121;">"error parsing json - "</span> <span style="color:#666666;">+</span> e.toString());
  205.   <span style="color:#008000;font-weight:bold;">return</span> jsn.data;
  206. }
  207. <span style="color:#008000;font-weight:bold;">if</span> (type <span style="color:#666666;">==</span> <span style="color:#ba2121;">"display"</span>) {
  208. <span style="color:#408080;font-style:italic;">// this is the value that will be used to display what</span>
  209. <span style="color:#408080;font-style:italic;">// the user sees</span>
  210. <span style="color:#408080;font-style:italic;">// we want to display a clickable icon</span>
  211. <span style="color:#008000;font-weight:bold;">if</span> (jsn.renderer <span style="color:#666666;">==</span> <span style="color:#ba2121;">"getIcon"</span>) {
  212. <span style="color:#408080;font-style:italic;">// first get the font awesome markup</span>
  213. icon <span style="color:#666666;">=</span> <span style="color:#ba2121;">"&lt;i class='fa "</span> <span style="color:#666666;">+</span> jsn.icon <span style="color:#666666;">+</span> <span style="color:#ba2121;">"'&gt;&lt;/i&gt;"</span>
  214. <span style="color:#408080;font-style:italic;">// second, wrap some additional markup to provide</span>
  215. <span style="color:#408080;font-style:italic;">// formatting and click, etc.</span>
  216. <span style="color:#008000;font-weight:bold;">return</span> <span style="color:#ba2121;">"<div style='text-align:center;'><a> <span style="color:#666666;">+</span> jsn.data <span style="color:#666666;">+</span> <span style="color:#ba2121;">"' href='mailto:"</span> <span style="color:#666666;">+</span> jsn.data <span style="color:#666666;">+</span> <span style="color:#ba2121;">"'&gt;"</span> <span style="color:#666666;">+</span> icon <span style="color:#666666;">+</span> <span style="color:#ba2121;">"</a></div>"</span>
  217. }
  218. } <span style="color:#008000;font-weight:bold;">else</span> {
  219. <span style="color:#408080;font-style:italic;">// this is the value that will be used for everything</span>
  220. <span style="color:#408080;font-style:italic;">// else - filtering, sorting, etc
  221. </span>                // i.e. [email protected]
  222. <span style="color:#008000;font-weight:bold;">return</span> jsn.data;
  223. }
  224. }
  225. },
  226. </pre>
  227. </div>
  228. <p>&nbsp;</p>
  229. <p>Our view that utilizes the renderer now shows an icon in the email column:</p>
  230. <p><img data-attachment-id="422" data-permalink="https://xpage.me/2016/09/14/adding-icon-columns-to-datatables-with-fontawesome/2016-09-14_0-40-35/" data-orig-file="https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-40-35.png?w=590" data-orig-size="788,245" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2016-09-14_0-40-35" data-image-description="" data-medium-file="https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-40-35.png?w=590?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-40-35.png?w=590?w=590" class="alignnone size-full wp-image-422" src="https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-40-35.png?w=590" alt="2016-09-14_0-40-35" srcset="https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-40-35.png?w=590 590w, https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-40-35.png?w=150 150w, https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-40-35.png?w=300 300w, https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-40-35.png?w=768 768w, https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-40-35.png 788w" sizes="(max-width: 590px) 100vw, 590px"   /></p>
  231. <p>Clicking on one of the mail icons launches a new memo:</p>
  232. <p><img data-attachment-id="424" data-permalink="https://xpage.me/2016/09/14/adding-icon-columns-to-datatables-with-fontawesome/2016-09-14_0-38-53/" data-orig-file="https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-38-53.png?w=590" data-orig-size="492,164" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2016-09-14_0-38-53" data-image-description="" data-medium-file="https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-38-53.png?w=590?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-38-53.png?w=590?w=492" class="alignnone size-full wp-image-424" src="https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-38-53.png?w=590" alt="2016-09-14_0-38-53" srcset="https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-38-53.png 492w, https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-38-53.png?w=150 150w, https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-38-53.png?w=300 300w" sizes="(max-width: 492px) 100vw, 492px"   /></p>
  233. <p>Even though our email column is now displaying an icon instead of an email address, we can still filter on email address due to DataTables&#8217; handling of orthogonal data.  By filtering on the domain <strong>spambob.com</strong>, we get only the records that have an email address with that domain.</p>
  234. <p><img data-attachment-id="405" data-permalink="https://xpage.me/2016/09/14/adding-icon-columns-to-datatables-with-fontawesome/2016-09-14_0-28-35/" data-orig-file="https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-28-35.png?w=590" data-orig-size="968,301" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2016-09-14_0-28-35" data-image-description="" data-medium-file="https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-28-35.png?w=590?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-28-35.png?w=590?w=590" class="alignnone size-full wp-image-405" src="https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-28-35.png?w=590" alt="2016-09-14_0-28-35" srcset="https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-28-35.png?w=590 590w, https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-28-35.png?w=150 150w, https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-28-35.png?w=300 300w, https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-28-35.png?w=768 768w, https://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-28-35.png 968w" sizes="(max-width: 590px) 100vw, 590px"   /></p>
  235. <p>The working demo for this example can be found <a href="http://stellandev.com/magnitude/xpages/mwlug/datatables.nsf/demoRestRendererIcons.xsp">here</a>.</p>
  236. <p>Even though this is a fairly basic example, it is incredibly easy to add icons to views created with DataTables &#8211; it was simply 2 additional steps.  This is only the tip of the iceberg for both Renderers and View Icon Columns.</p><br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/xpagedotme.wordpress.com/281/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/xpagedotme.wordpress.com/281/" /></a> <img alt="" border="0" src="https://pixel.wp.com/b.gif?host=xpage.me&#038;blog=71152377&#038;post=281&#038;subd=xpagedotme&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
  237. <wfw:commentRss>https://xpage.me/2016/09/14/adding-icon-columns-to-datatables-with-fontawesome/feed/</wfw:commentRss>
  238. <slash:comments>0</slash:comments>
  239. <media:content url="http://2.gravatar.com/avatar/8b23f4a8d87b176b74ffc501bf37b61f?s=96&#38;d=identicon&#38;r=G" medium="image">
  240. <media:title type="html">stellandev</media:title>
  241. </media:content>
  242.  
  243. <media:content url="http://xpagedotme.files.wordpress.com/2016/09/2016-09-13_23-58-141.png" medium="image">
  244. <media:title type="html">2016-09-13_23-58-14</media:title>
  245. </media:content>
  246.  
  247. <media:content url="http://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-04-13.png" medium="image">
  248. <media:title type="html">2016-09-14_0-04-13</media:title>
  249. </media:content>
  250.  
  251. <media:content url="http://xpagedotme.files.wordpress.com/2016/09/add_column_to_view.png" medium="image">
  252. <media:title type="html">add_column_to_view</media:title>
  253. </media:content>
  254.  
  255. <media:content url="http://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-40-35.png" medium="image">
  256. <media:title type="html">2016-09-14_0-40-35</media:title>
  257. </media:content>
  258.  
  259. <media:content url="http://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-38-53.png" medium="image">
  260. <media:title type="html">2016-09-14_0-38-53</media:title>
  261. </media:content>
  262.  
  263. <media:content url="http://xpagedotme.files.wordpress.com/2016/09/2016-09-14_0-28-35.png" medium="image">
  264. <media:title type="html">2016-09-14_0-28-35</media:title>
  265. </media:content>
  266. </item>
  267. <item>
  268. <title>Demo database from my MWLUG session</title>
  269. <link>https://xpage.me/2016/09/08/demo-database-from-my-mwlug-session/</link>
  270. <comments>https://xpage.me/2016/09/08/demo-database-from-my-mwlug-session/#comments</comments>
  271. <pubDate>Thu, 08 Sep 2016 11:11:04 +0000</pubDate>
  272. <dc:creator><![CDATA[michaelgsmith]]></dc:creator>
  273. <category><![CDATA[Uncategorized]]></category>
  274.  
  275. <guid isPermaLink="false">http://xpage.me/?p=269</guid>
  276. <description><![CDATA[At MWLUG in August, I presented on using jQuery DataTables with XPages.  I finally got the demo database(s) I used in the presentation tidied up and ready for download.  Some additional demos have been added since MWLUG. Better late than never, right? Get the download here: mwlug-demos Contents of the zip file: datatables.nsf Contains all [&#8230;]<img alt="" border="0" src="https://pixel.wp.com/b.gif?host=xpage.me&#038;blog=71152377&#038;post=269&#038;subd=xpagedotme&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
  277. <content:encoded><![CDATA[<p>At MWLUG in August, I presented on using jQuery DataTables with XPages.  I finally got the demo database(s) I used in the presentation tidied up and ready for download.  Some additional demos have been added since MWLUG.</p>
  278. <p>Better late than never, right?</p>
  279. <p>Get the download here: <a href="https://xpagedotme.files.wordpress.com/2016/09/mwlug-demos-1.zip">mwlug-demos</a></p>
  280. <p><strong>Contents of the zip file:</strong></p>
  281. <table class="tableDemo" style="width:100%;">
  282. <tbody>
  283. <tr style="background:#f5f5f5;">
  284. <td><strong>datatables.nsf</strong></td>
  285. <td>Contains all demo XPages, resource files, and scripts</td>
  286. </tr>
  287. <tr>
  288. <td><strong>rest.nsf</strong></td>
  289. <td>Contains REST services and XAgents used by DataTables</td>
  290. </tr>
  291. <tr style="background:#f5f5f5;">
  292. <td><strong>fakenamesdemo.nsf</strong></td>
  293. <td>Data source &#8211; this is the Fake Names database made available by David Leedy. Some modifications have been made for the purpose of these demos</td>
  294. </tr>
  295. </tbody>
  296. </table>
  297. <p><strong>To get the demo database working:</strong></p>
  298. <ul>
  299. <li>Note: I have only tested these demos on 9.0.1</li>
  300. <li><strong>There are hard coded links to the path xpages\mwlug</strong>.  You need to place the 3 .nsf files in that path or update the code to your desired path</li>
  301. <li>Sign the datatables.nsf file.  If you are placing the files on a server, sign all 3 databases</li>
  302. <li>Launch the demo.xsp XPage.  This page contains a table of contents of all the demos</li>
  303. </ul>
  304. <p><del>I will have the demo database hosted online soon as well.</del></p>
  305. <p>Online demos can be found here: <a href="http://stellandev.com/magnitude/xpages/mwlug/datatables.nsf/demo.xsp">http://stellandev.com/magnitude/xpages/mwlug/datatables.nsf/demo.xsp</a></p>
  306. <p>and I plan on adding additional demos to this database as I touch in different topics.</p><br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/xpagedotme.wordpress.com/269/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/xpagedotme.wordpress.com/269/" /></a> <img alt="" border="0" src="https://pixel.wp.com/b.gif?host=xpage.me&#038;blog=71152377&#038;post=269&#038;subd=xpagedotme&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
  307. <wfw:commentRss>https://xpage.me/2016/09/08/demo-database-from-my-mwlug-session/feed/</wfw:commentRss>
  308. <slash:comments>5</slash:comments>
  309. <media:content url="http://2.gravatar.com/avatar/8b23f4a8d87b176b74ffc501bf37b61f?s=96&#38;d=identicon&#38;r=G" medium="image">
  310. <media:title type="html">stellandev</media:title>
  311. </media:content>
  312. </item>
  313. <item>
  314. <title>Slides (and thoughts) from MWLUG &#8211; XPages &#038; jQuery DataTables</title>
  315. <link>https://xpage.me/2016/08/24/slides-and-thoughts-from-mwlug-xpages-jquery-datatables/</link>
  316. <comments>https://xpage.me/2016/08/24/slides-and-thoughts-from-mwlug-xpages-jquery-datatables/#comments</comments>
  317. <pubDate>Wed, 24 Aug 2016 12:49:09 +0000</pubDate>
  318. <dc:creator><![CDATA[michaelgsmith]]></dc:creator>
  319. <category><![CDATA[Uncategorized]]></category>
  320.  
  321. <guid isPermaLink="false">http://xpage.me/?p=238</guid>
  322. <description><![CDATA[Last week at MWLUG in Austin I was fortunate to be given the opportunity to speak for the first time at a conference.  I was very happy with the turnout for my session as well as the positive feedback from the content.  I even got a thank you at the airport on the way out [&#8230;]<img alt="" border="0" src="https://pixel.wp.com/b.gif?host=xpage.me&#038;blog=71152377&#038;post=238&#038;subd=xpagedotme&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
  323. <content:encoded><![CDATA[<p>Last week at MWLUG in Austin I was fortunate to be given the opportunity to speak for the first time at a conference.  I was very happy with the turnout for my session as well as the positive feedback from the content.  I even got a thank you at the airport on the way out of town. (thanks, Tom!).</p>
  324. <p>The slides are available here:</p>
  325. <iframe src='https://www.slideshare.net/slideshow/embed_code/65315285' width='590' height='484' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
  326. <p>During the session there were some very good questions, which made me realize I probably need to clarify some things in my presentation and fill in some gaps.  Over the next few weeks/months I plan on doing that, as well as expanding on some of the topics I covered.</p>
  327. <p>From the conference as a whole, I took away some great information and hope to start utilizing it immediately.  The tone of the conference was clear &#8211; CYA by looking at non-Domino options.  I should note here that the concepts I covered in my session apply to any environment where data is being delivered via REST, not just Domino/XPages.</p>
  328. <p>From a personal standpoint, I need to get better at meeting more people at conferences like these.  It isn&#8217;t a strength, but needs to become one.  I did have some great conversations and was able to do a little brainstorming with Red Pill about their graph implementation.  I am really, really intrigued by the possibilities that provides.</p>
  329. <p>Finally, thank you to Richard Moy and the team that made MWLUG a great success.  Can&#8217;t wait until next year.</p>
  330. <p>&nbsp;</p><br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/xpagedotme.wordpress.com/238/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/xpagedotme.wordpress.com/238/" /></a> <img alt="" border="0" src="https://pixel.wp.com/b.gif?host=xpage.me&#038;blog=71152377&#038;post=238&#038;subd=xpagedotme&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
  331. <wfw:commentRss>https://xpage.me/2016/08/24/slides-and-thoughts-from-mwlug-xpages-jquery-datatables/feed/</wfw:commentRss>
  332. <slash:comments>7</slash:comments>
  333. <media:content url="http://2.gravatar.com/avatar/8b23f4a8d87b176b74ffc501bf37b61f?s=96&#38;d=identicon&#38;r=G" medium="image">
  334. <media:title type="html">stellandev</media:title>
  335. </media:content>
  336. </item>
  337. <item>
  338. <title>I&#8217;m speaking at MWLUG about&#8230;</title>
  339. <link>https://xpage.me/2016/06/29/im-speaking-at-mwlug-about/</link>
  340. <comments>https://xpage.me/2016/06/29/im-speaking-at-mwlug-about/#respond</comments>
  341. <pubDate>Wed, 29 Jun 2016 10:41:41 +0000</pubDate>
  342. <dc:creator><![CDATA[michaelgsmith]]></dc:creator>
  343. <category><![CDATA[Uncategorized]]></category>
  344.  
  345. <guid isPermaLink="false">http://xpage.me/?p=212</guid>
  346. <description><![CDATA[&#8230; XPages and DataTables (the jQuery plugin, not the XPages data source).  This is my first opportunity to speak and present at a technical conference so I&#8217;m running the full gamut of emotions &#8211; from excitement to nervous and back again! In  my session, I&#8217;m hoping to share my experiences with using DataTables as the [&#8230;]<img alt="" border="0" src="https://pixel.wp.com/b.gif?host=xpage.me&#038;blog=71152377&#038;post=212&#038;subd=xpagedotme&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
  347. <content:encoded><![CDATA[<p>&#8230; XPages and DataTables (the jQuery plugin, not the XPages data source).  This is my first opportunity to speak and present at a technical conference so I&#8217;m running the full gamut of emotions &#8211; from excitement to nervous and back again!</p>
  348. <p>In  my session, I&#8217;m hoping to share my experiences with using DataTables as the primary tool for displaying view data fed via REST services in my XPage applications.  This experience led to a single, configurable custom control that, in conjunction with a Domino view administration tool,  can be dropped into any XPage or custom control where view data is needed.  My goal was to create less back-end views and provide more UI functionality while minimizing the need to make design changes when views need to be added or updated.</p>
  349. <p>DataTables is incredibly powerful, and I&#8217;ve found that every time I thought I was going to have to customize something, inevitably, DataTables had that functionality built in, or at least had tools that made it easier to implement.</p>
  350. <p>Hopefully this topic interests you as much as it does me and I hope to see you there!</p>
  351. <p>&nbsp;</p><br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/xpagedotme.wordpress.com/212/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/xpagedotme.wordpress.com/212/" /></a> <img alt="" border="0" src="https://pixel.wp.com/b.gif?host=xpage.me&#038;blog=71152377&#038;post=212&#038;subd=xpagedotme&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
  352. <wfw:commentRss>https://xpage.me/2016/06/29/im-speaking-at-mwlug-about/feed/</wfw:commentRss>
  353. <slash:comments>0</slash:comments>
  354. <media:content url="http://2.gravatar.com/avatar/8b23f4a8d87b176b74ffc501bf37b61f?s=96&#38;d=identicon&#38;r=G" medium="image">
  355. <media:title type="html">stellandev</media:title>
  356. </media:content>
  357. </item>
  358. <item>
  359. <title>XPage loading slow?  Check your document datasource</title>
  360. <link>https://xpage.me/2015/12/16/xpage-loading-slow-check-your-document-datasource/</link>
  361. <comments>https://xpage.me/2015/12/16/xpage-loading-slow-check-your-document-datasource/#comments</comments>
  362. <pubDate>Wed, 16 Dec 2015 19:01:47 +0000</pubDate>
  363. <dc:creator><![CDATA[michaelgsmith]]></dc:creator>
  364. <category><![CDATA[Uncategorized]]></category>
  365.  
  366. <guid isPermaLink="false">http://xpage.me/?p=140</guid>
  367. <description><![CDATA[tl;dr &#8211; If you have the &#8220;compute&#8221; option of a document datasource enabled, make sure: The underlying form does not have fields perform a DbLookup to a view that has @Today or @Now in a column/selection formula. If the form has embedded views, make sure the column/selection formulas of the view do not utilize @Today [&#8230;]<img alt="" border="0" src="https://pixel.wp.com/b.gif?host=xpage.me&#038;blog=71152377&#038;post=140&#038;subd=xpagedotme&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
  368. <content:encoded><![CDATA[<p>tl;dr &#8211; If you have the &#8220;compute&#8221; option of a document datasource enabled, make sure:</p>
  369. <ul>
  370. <li>The underlying form does not have fields perform a DbLookup to a view that has @Today or @Now in a column/selection formula.</li>
  371. <li>If the form has embedded views, make sure the column/selection formulas of the view do not utilize @Today or @Now.</li>
  372. </ul>
  373. <hr />
  374. <p>&nbsp;</p>
  375. <p>For the past year+  I&#8217;ve been in the midst of modernizing a very, very large Lotus Notes application that is comprised of many databases.  Over the past few weeks, as I started building out the next phase, one particular XPage was loading extremely, EXTREMELY, slow, like in the neighborhood of 8 seconds to open.  Not good.</p>
  376. <p>Since we are modernizing an existing application (which is the lifeblood of the company), we are operating in a co-existence environment.   This means dropping the XPages layer on top of the existing environment versus building and architecting an application from scratch.  So in this case, the XPage in question has a document datasource that utilizes an existing Notes form.</p>
  377. <p>After examining the XPage and determining that the performance issue was not there, I turned my attention to the underlying form.  I do have the &#8220;compute&#8221; option turned on:</p>
  378. <p>&nbsp;</p>
  379. <p><img data-attachment-id="162" data-permalink="https://xpage.me/2015/12/16/xpage-loading-slow-check-your-document-datasource/2015-12-16_13-05-17/" data-orig-file="https://xpagedotme.files.wordpress.com/2015/12/2015-12-16_13-05-17.gif?w=590" data-orig-size="621,259" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2015-12-16_13-05-17" data-image-description="" data-medium-file="https://xpagedotme.files.wordpress.com/2015/12/2015-12-16_13-05-17.gif?w=590?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2015/12/2015-12-16_13-05-17.gif?w=590?w=590" class=" size-full wp-image-162 aligncenter" src="https://xpagedotme.files.wordpress.com/2015/12/2015-12-16_13-05-17.gif?w=590" alt="2015-12-16_13-05-17"   /></p>
  380. <p>Now, keep in mind I did not build this form originally, so I am getting up to speed with it&#8217;s inner workings as I&#8217;m building out the XPages side.</p>
  381. <p>My discovery process went something like this:</p>
  382. <p>&#8220;There are 3 embedded views.  Ok.  No Problem.  Lots of Notes forms have embdedded views.&#8221;</p>
  383. <p>&#8220;This column of the first embedded uses @Today.  That&#8217;s bad.&#8221;</p>
  384. <p>&#8220;Wait &#8230; every embedded view has a column with @Today?  WTF!!  OK, we can deal with this.&#8221;</p>
  385. <p>&#8220;This field is doing a lookup to a view with @Today &#8230; and this field &#8230; and this field.&#8221;</p>
  386. <p><img src="https://media.giphy.com/media/xTiTnLsWc9katEKPSM/giphy.gif" alt="" /></p>
  387. <p>Using @Today and @Now in a view is bad enough &#8230; but six times on a form?  OUCH!</p>
  388. <p>This was a flat-out performance catastrophe.  One of the first performance tips you learn in Notes Client development is <strong>do not use @Today or @Now in view column or selection formulas unless you absolutely have to</strong>.  Even then, consider running an agent nightly to update the view with a hard coded date instead.</p>
  389. <p>Luckily, the issue was discovered and handled, reducing the page load time from 8s to ~50ms.</p>
  390. <p>&nbsp;</p><br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/xpagedotme.wordpress.com/140/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/xpagedotme.wordpress.com/140/" /></a> <img alt="" border="0" src="https://pixel.wp.com/b.gif?host=xpage.me&#038;blog=71152377&#038;post=140&#038;subd=xpagedotme&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
  391. <wfw:commentRss>https://xpage.me/2015/12/16/xpage-loading-slow-check-your-document-datasource/feed/</wfw:commentRss>
  392. <slash:comments>2</slash:comments>
  393. <media:content url="http://2.gravatar.com/avatar/8b23f4a8d87b176b74ffc501bf37b61f?s=96&#38;d=identicon&#38;r=G" medium="image">
  394. <media:title type="html">stellandev</media:title>
  395. </media:content>
  396.  
  397. <media:content url="http://xpagedotme.files.wordpress.com/2015/12/2015-12-16_13-05-17.gif" medium="image">
  398. <media:title type="html">2015-12-16_13-05-17</media:title>
  399. </media:content>
  400.  
  401. <media:content url="http://media.giphy.com/media/xTiTnLsWc9katEKPSM/giphy.gif" medium="image" />
  402. </item>
  403. <item>
  404. <title>My first #MWLUG &#8230; what was I waiting for?</title>
  405. <link>https://xpage.me/2015/08/23/my-first-mwlug-what-was-i-waiting-for/</link>
  406. <comments>https://xpage.me/2015/08/23/my-first-mwlug-what-was-i-waiting-for/#comments</comments>
  407. <pubDate>Sun, 23 Aug 2015 13:11:58 +0000</pubDate>
  408. <dc:creator><![CDATA[michaelgsmith]]></dc:creator>
  409. <category><![CDATA[Uncategorized]]></category>
  410.  
  411. <guid isPermaLink="false">http://xpage.me/?p=137</guid>
  412. <description><![CDATA[Finally back home and reflecting on the past week and how much I enjoyed MWLUG 2015.  My only regret is I didn&#8217;t attend sooner! A sign of a good technical conference is having to make tough decisions on which sessions you want to attend and I found myself in that position more than once over the [&#8230;]<img alt="" border="0" src="https://pixel.wp.com/b.gif?host=xpage.me&#038;blog=71152377&#038;post=137&#038;subd=xpagedotme&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
  413. <content:encoded><![CDATA[<p>Finally back home and reflecting on the past week and how much I enjoyed MWLUG 2015.  My only regret is I didn&#8217;t attend sooner!</p>
  414. <p>A sign of a good technical conference is having to make tough decisions on which sessions you want to attend and I found myself in that position more than once over the past few days.</p>
  415. <p>A sign of an incredibly COOL conference?  &#8230; DRONES!</p>
  416. <p>I accomplished all my goals for the week &#8211; taking away things I can use right away, getting ideas for the future, catching up with people, and of course meeting new people.  Everything was capped off nicely by winning the Sonos from LDC VIA.  The first thing I did when I got home was hook that baby up!</p>
  417. <p>Thanks to Richard Moy, Lisa Duke, and Darren Duke (and anyone else I&#8217;m missing) for planning and executing an incredible conference.  I can only imagine how much work goes on behind the scenes throughout the year to make this happen.  I&#8217;m already looking forward to next year in Austin with great anticipation.</p>
  418. <p>They say everything is bigger in Texas.  I have a feeling MWLUG 2016 will be too.</p><br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/xpagedotme.wordpress.com/137/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/xpagedotme.wordpress.com/137/" /></a> <img alt="" border="0" src="https://pixel.wp.com/b.gif?host=xpage.me&#038;blog=71152377&#038;post=137&#038;subd=xpagedotme&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
  419. <wfw:commentRss>https://xpage.me/2015/08/23/my-first-mwlug-what-was-i-waiting-for/feed/</wfw:commentRss>
  420. <slash:comments>2</slash:comments>
  421. <media:content url="http://2.gravatar.com/avatar/8b23f4a8d87b176b74ffc501bf37b61f?s=96&#38;d=identicon&#38;r=G" medium="image">
  422. <media:title type="html">stellandev</media:title>
  423. </media:content>
  424. </item>
  425. <item>
  426. <title>Boot your alerts in the &#8230; with bootAlert</title>
  427. <link>https://xpage.me/2015/02/10/boot-your-alerts-in-the-with-bootalert/</link>
  428. <comments>https://xpage.me/2015/02/10/boot-your-alerts-in-the-with-bootalert/#comments</comments>
  429. <pubDate>Tue, 10 Feb 2015 15:57:32 +0000</pubDate>
  430. <dc:creator><![CDATA[michaelgsmith]]></dc:creator>
  431. <category><![CDATA[Bootstrap]]></category>
  432. <category><![CDATA[XPages]]></category>
  433. <category><![CDATA[Custom Controls]]></category>
  434. <category><![CDATA[jQuery]]></category>
  435.  
  436. <guid isPermaLink="false">http://xpage.me/?p=92</guid>
  437. <description><![CDATA[Unfortunately, due to the sudden illness and ultimate passing of a family member in the fall, it has been quite a while since I last blogged.  Hopefully, this post finds me getting back on the blogging horse to contribute some content to the Xpages/Domino community and bring some ideas I had been kicking around to fruition. Today [&#8230;]<img alt="" border="0" src="https://pixel.wp.com/b.gif?host=xpage.me&#038;blog=71152377&#038;post=92&#038;subd=xpagedotme&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
  438. <content:encoded><![CDATA[<p>Unfortunately, due to the sudden illness and ultimate passing of a family member in the fall, it has been quite a while since I last blogged.  Hopefully, this post finds me getting back on the blogging horse to contribute some content to the Xpages/Domino community and bring some ideas I had been kicking around to fruition.</p>
  439. <p>Today I am releasing <strong>bootAlert</strong>, a simple XPages custom control that allows developers to add configurable, reusable Bootstrap alerts to their apps without having to add any additional plugins.  You should already be using Bootstrap/jQuery in your application in order to use this custom control.</p>
  440. <p>For the past few months, in working on our <a title="Modernizing A Notes Application with XPages" href="https://xpage.me/2014/09/03/modernizing-a-notes-app-with-xpages-mona-x-part-1-introduction/" target="_blank">application migration project</a>, I built a configurable Bootstrap alert custom control.  I found myself continuing to add features as different needs arose.  So, I thought I would release it to the community.</p>
  441. <h2>Why bootAlert?</h2>
  442. <ul>
  443. <li>bootAlert can be triggered from both server and client-side Javascript</li>
  444. <li>bootAlert can use Font Awesome icons</li>
  445. <li>bootAlert can be turned into a Growl-like message on-the-fly</li>
  446. <li>bootAlert is dynamically configurable &#8211; one action may require the <code>'success'</code> class and another may require a <code>'warning'</code> or <code>'danger'</code> notification.  One control can be used to display all three.</li>
  447. <li>bootAlert can be customized with css</li>
  448. <li>Add as many bootAlert controls to your page as you want</li>
  449. </ul>
  450. <div data-shortcode="caption" id="attachment_129" style="width: 600px" class="wp-caption aligncenter"><a href="https://xpagedotme.files.wordpress.com/2015/02/bootalert-with-viewpostscript.png"><img data-attachment-id="129" data-permalink="https://xpage.me/2015/02/10/boot-your-alerts-in-the-with-bootalert/bootalert-with-viewpostscript/" data-orig-file="https://xpagedotme.files.wordpress.com/2015/02/bootalert-with-viewpostscript.png" data-orig-size="713,71" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="bootAlert with view.postScript" data-image-description="" data-medium-file="https://xpagedotme.files.wordpress.com/2015/02/bootalert-with-viewpostscript.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2015/02/bootalert-with-viewpostscript.png?w=590&#038;h=59" class="size-large wp-image-129" src="https://xpagedotme.files.wordpress.com/2015/02/bootalert-with-viewpostscript.png?w=590&#038;h=59" alt="bootAlert with view.postScript" width="590" height="59" srcset="https://xpagedotme.files.wordpress.com/2015/02/bootalert-with-viewpostscript.png?w=590&amp;h=59 590w, https://xpagedotme.files.wordpress.com/2015/02/bootalert-with-viewpostscript.png?w=150&amp;h=15 150w, https://xpagedotme.files.wordpress.com/2015/02/bootalert-with-viewpostscript.png?w=300&amp;h=30 300w, https://xpagedotme.files.wordpress.com/2015/02/bootalert-with-viewpostscript.png 713w" sizes="(max-width: 590px) 100vw, 590px" /></a><p class="wp-caption-text">bootAlert can be triggered from server-side js with view.postScript()</p></div>
  451. <div data-shortcode="caption" id="attachment_96" style="width: 600px" class="wp-caption aligncenter"><a href="https://xpagedotme.files.wordpress.com/2015/02/bootalert-growl.png"><img data-attachment-id="96" data-permalink="https://xpage.me/2015/02/10/boot-your-alerts-in-the-with-bootalert/bootalert-growl/" data-orig-file="https://xpagedotme.files.wordpress.com/2015/02/bootalert-growl.png" data-orig-size="850,236" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="bootAlert &#8211; growl" data-image-description="" data-medium-file="https://xpagedotme.files.wordpress.com/2015/02/bootalert-growl.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2015/02/bootalert-growl.png?w=590&#038;h=164" class="size-large wp-image-96" src="https://xpagedotme.files.wordpress.com/2015/02/bootalert-growl.png?w=590&#038;h=164" alt="bootAlert let's you add Bootstrap Growl messages" width="590" height="164" srcset="https://xpagedotme.files.wordpress.com/2015/02/bootalert-growl.png?w=590&amp;h=164 590w, https://xpagedotme.files.wordpress.com/2015/02/bootalert-growl.png?w=150&amp;h=42 150w, https://xpagedotme.files.wordpress.com/2015/02/bootalert-growl.png?w=300&amp;h=83 300w, https://xpagedotme.files.wordpress.com/2015/02/bootalert-growl.png?w=768&amp;h=213 768w, https://xpagedotme.files.wordpress.com/2015/02/bootalert-growl.png 850w" sizes="(max-width: 590px) 100vw, 590px" /></a><p class="wp-caption-text">bootAlert let&#8217;s you add Bootstrap Growl messages to your application</p></div>
  452. <h2>Demo</h2>
  453. <p>I plan on submitting this as an OpenNtf project, but for now you can find a demo, as well as download bootAlert <a title="bootAlert Demo and Download" href="http://demos.xpage.me/bootstrap/demos.nsf/bootAlert.xsp" target="_blank">here</a></p>
  454. <h2>Getting Started</h2>
  455. <p>Getting started with bootAlert is easy.  Simply:</p>
  456. <ul>
  457. <li><a title="bootAlert demo database" href="http://demos.xpage.me/bootstrap/demos.nsf/bootAlert.xsp" target="_blank">Download</a> the demo database</li>
  458. <li>Copy the custom control and script library into your application (or copy the contents of the script library into your existsing client-side script library)</li>
  459. <li>Drag the custom control onto your xpage and populate the <code>alertName</code> property</li>
  460. </ul>
  461. <pre>&lt;xc:ccBootAlert alertName="alertDemo2" id="ccBootAlertDemo2"&gt;&lt;/xc:ccBootAlert&gt;</pre>
  462. <ul>
  463. <li>Call bootAlert from client-side js &#8230;</li>
  464. </ul>
  465. <pre>// Client side js
  466. var o = {}
  467. o.title = "Client Side";
  468. o.body = "This alert is being generated by client side javascript";
  469. o.alertType = "danger";
  470. o.alertIcon = "fa-calendar fa-lg"
  471. bootAlert.show('alertDemo2',JSON.stringify(o))
  472. </pre>
  473. <ul>
  474. <li>or call bootAlert from server-side js by putting a value into a requestScope variable and making sure the bootAlert control is part of the partial refresh target:</li>
  475. </ul>
  476. <pre>// Server side js
  477. // This method assumes the alert is part of a partial refresh target
  478. var o = {};
  479. o.title = "Server Side";
  480. o.body = "This alert is being generated from ssjs";
  481. o.alertType = "info";
  482. // The requestScope var name should match the alertName given to the bootAlert control
  483. requestScope.put("alertDemo2",o);  
  484. </pre>
  485. <ul>
  486. <li>Finally, you can use view.postScript() to trigger a bootAlert:</li>
  487. </ul>
  488. <pre>// Server side js
  489. // The alert custom control does NOT need to be part of a partial refresh target
  490. // The parameters being passed to bootAlert need to be serialized
  491. var o = {}
  492. o.title = "Server Side &gt; Client Side";
  493. o.body = "This alert is being triggered by client side js called from server side js";
  494. o.alertType = "warning";
  495. o.autoClose = false;
  496. view.postScript("bootAlert.show('alertDemo2'," + toJson(o) + ")");
  497. </pre>
  498. <p>I hope others find this control as useful as I have in my projects!</p><br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/xpagedotme.wordpress.com/92/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/xpagedotme.wordpress.com/92/" /></a> <img alt="" border="0" src="https://pixel.wp.com/b.gif?host=xpage.me&#038;blog=71152377&#038;post=92&#038;subd=xpagedotme&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
  499. <wfw:commentRss>https://xpage.me/2015/02/10/boot-your-alerts-in-the-with-bootalert/feed/</wfw:commentRss>
  500. <slash:comments>5</slash:comments>
  501. <media:content url="http://2.gravatar.com/avatar/8b23f4a8d87b176b74ffc501bf37b61f?s=96&#38;d=identicon&#38;r=G" medium="image">
  502. <media:title type="html">stellandev</media:title>
  503. </media:content>
  504.  
  505. <media:content url="http://xpagedotme.files.wordpress.com/2015/02/bootalert-with-viewpostscript.png?w=590" medium="image">
  506. <media:title type="html">bootAlert with view.postScript</media:title>
  507. </media:content>
  508.  
  509. <media:content url="http://xpagedotme.files.wordpress.com/2015/02/bootalert-growl.png?w=590" medium="image">
  510. <media:title type="html">bootAlert let&#039;s you add Bootstrap Growl messages</media:title>
  511. </media:content>
  512. </item>
  513. <item>
  514. <title>Modernizing A Notes App With XPages (MANA-X) Part 1 &#8211; Introduction</title>
  515. <link>https://xpage.me/2014/09/03/modernizing-a-notes-app-with-xpages-mona-x-part-1-introduction/</link>
  516. <comments>https://xpage.me/2014/09/03/modernizing-a-notes-app-with-xpages-mona-x-part-1-introduction/#comments</comments>
  517. <pubDate>Wed, 03 Sep 2014 13:17:00 +0000</pubDate>
  518. <dc:creator><![CDATA[michaelgsmith]]></dc:creator>
  519. <category><![CDATA[Uncategorized]]></category>
  520. <category><![CDATA[Lotus Notes]]></category>
  521. <category><![CDATA[Modernization]]></category>
  522. <category><![CDATA[XPages]]></category>
  523.  
  524. <guid isPermaLink="false">http://xpage.me/?p=78</guid>
  525. <description><![CDATA[A few weeks ago, I started a new position. For this position, I was hired specifically to lead the transition of a key Lotus Notes client application into the XPages world, where modern capabilities and UI can be merged together to create a great user experience and better support the business processes going forward. Actually, [&#8230;]<img alt="" border="0" src="https://pixel.wp.com/b.gif?host=xpage.me&#038;blog=71152377&#038;post=78&#038;subd=xpagedotme&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
  526. <content:encoded><![CDATA[<p>A few weeks ago, I started a new position. For this position, I was hired specifically to lead the transition of a key Lotus Notes client application into the XPages world, where modern capabilities and UI can be merged together to create a great user experience and better support the business processes going forward.</p>
  527. <p>Actually, this application is more than just a &#8220;key&#8221; application. It is THE application. Well, technically, it is several applications, or modules, all tied together under one umbrella, which have supported just about every aspect of a business that has tripled in size in the last 10-15 years.</p>
  528. <p>While there is an urge to jump right in and start coding, there are many things to consider ahead of time:</p>
  529. <ul>
  530. <li><strong>Technical</strong> &#8211; Which framework(s) to use? Getting the development team up to speed on source control for better code management. Developing for IE9/IE11.</li>
  531. <li><strong>Cultural</strong> &#8211; How to introduce users to a modern web application when they are used to working in the Lotus Notes client?</li>
  532. <li><strong>Infrastructure</strong> &#8211; Keeping users productive with high availability. Making sure remote users do not have performance issues.</li>
  533. </ul>
  534. <p>This is in no way intended to be a comprehensive list; These are just a few of the issues we&#8217;ve started to discuss as a team in the early stages of project planning.</p>
  535. <p>Over the course of the coming months (years?), I&#8217;m hoping to share our experiences of moving this massive application to XPages and all of the successes and challenges that come with that (as much as I can, anyway).</p>
  536. <p><strong>Disclaimer:</strong> Any opinions and views expressed are my own and not necessarily those of my company. This series is intended as one company&#8217;s experience of moving an application to XPages and not a definitive guide on how to migrate an application to XPages.</p><br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/xpagedotme.wordpress.com/78/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/xpagedotme.wordpress.com/78/" /></a> <img alt="" border="0" src="https://pixel.wp.com/b.gif?host=xpage.me&#038;blog=71152377&#038;post=78&#038;subd=xpagedotme&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
  537. <wfw:commentRss>https://xpage.me/2014/09/03/modernizing-a-notes-app-with-xpages-mona-x-part-1-introduction/feed/</wfw:commentRss>
  538. <slash:comments>2</slash:comments>
  539. <media:content url="http://2.gravatar.com/avatar/8b23f4a8d87b176b74ffc501bf37b61f?s=96&#38;d=identicon&#38;r=G" medium="image">
  540. <media:title type="html">stellandev</media:title>
  541. </media:content>
  542. </item>
  543. </channel>
  544. </rss>
  545.  

If you would like to create a banner that links to this page (i.e. this validation result), do the following:

  1. Download the "valid RSS" banner.

  2. Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)

  3. Add this HTML to your page (change the image src attribute if necessary):

If you would like to create a text link instead, here is the URL you can use:

http://www.feedvalidator.org/check.cgi?url=http%3A//xpage.me/rss

Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda