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>Sat, 05 Nov 2022 03:44:13 +0000</lastBuildDate>
  17. <language>en</language>
  18. <sy:updatePeriod>
  19. hourly </sy:updatePeriod>
  20. <sy:updateFrequency>
  21. 1 </sy:updateFrequency>
  22. <generator>http://wordpress.com/</generator>
  23. <cloud domain='xpage.me' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
  24. <image>
  25. <url>https://secure.gravatar.com/blavatar/081c87b4d5ec626b504bcd1f7112908b5dc29c8799f1fb66be4087b63b2b1e98?s=96&#038;d=https%3A%2F%2Fs0.wp.com%2Fi%2Fbuttonw-com.png</url>
  26. <title>XPage.me</title>
  27. <link>https://xpage.me</link>
  28. </image>
  29. <atom:link rel="search" type="application/opensearchdescription+xml" href="https://xpage.me/osd.xml" title="XPage.me" />
  30. <atom:link rel='hub' href='https://xpage.me/?pushpress=hub'/>
  31. <item>
  32. <title>My Session From CollabSphere 2022 &#124; DEV107 &#124; Building Emotionally Available XPages Applications</title>
  33. <link>https://xpage.me/2022/11/07/my-session-from-collabsphere-2022-dev107-building-emotionally-available-xpages-applications/</link>
  34. <comments>https://xpage.me/2022/11/07/my-session-from-collabsphere-2022-dev107-building-emotionally-available-xpages-applications/#respond</comments>
  35. <dc:creator><![CDATA[michaelgsmith]]></dc:creator>
  36. <pubDate>Mon, 07 Nov 2022 07:00:00 +0000</pubDate>
  37. <category><![CDATA[Collabsphere]]></category>
  38. <category><![CDATA[Domino]]></category>
  39. <category><![CDATA[HCL]]></category>
  40. <category><![CDATA[XPages]]></category>
  41. <category><![CDATA[High Availability]]></category>
  42. <guid isPermaLink="false">http://xpage.me/?p=1516</guid>
  43.  
  44. <description><![CDATA[Session abstract: Over the past few years, High Availability (HA) has become more and more a requirement for Web applications. Even though classic XPage development does not lend itself well to High Availability/Reverse Proxy environments, Domino XPages has plenty of tools to build modern web applications based on micro-services and APIs that DO work well [&#8230;]]]></description>
  45. <content:encoded><![CDATA[
  46. <p><strong>Session abstract:</strong></p>
  47.  
  48.  
  49.  
  50. <p>Over the past few years, High Availability (HA) has become more and more a requirement for Web applications. Even though classic XPage development does not lend itself well to High Availability/Reverse Proxy environments, Domino XPages has plenty of tools to build modern web applications based on micro-services and APIs that DO work well in HA environments and allow developers to tap into existing back-end code and leverage data stored in Domino databases. What if your user was editing an XPage and your server goes down? Clustering alone does not solve the problem. This session will demonstrate an approach we use to add HA functionality to our clustered enterprise XPage applications to minimize user disruptions and lost work. Note: this session will NOT demonstrate how to set up HA reverse proxy servers and will focus on what happens in the front-end in the browser and the back-end in Domino.</p>
  51.  
  52.  
  53.  
  54. <figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
  55. <iframe class="youtube-player" width="590" height="332" src="https://www.youtube.com/embed/V9T3aK73KbU?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en&#038;autohide=2&#038;wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
  56. </div></figure>
  57. ]]></content:encoded>
  58. <wfw:commentRss>https://xpage.me/2022/11/07/my-session-from-collabsphere-2022-dev107-building-emotionally-available-xpages-applications/feed/</wfw:commentRss>
  59. <slash:comments>0</slash:comments>
  60. <media:thumbnail url="https://xpagedotme.files.wordpress.com/2022/11/collabsphere-20221024_1.png" />
  61. <media:content url="https://xpagedotme.files.wordpress.com/2022/11/collabsphere-20221024_1.png" medium="image">
  62. <media:title type="html">Collabsphere 20221024_1</media:title>
  63. </media:content>
  64.  
  65. <media:content url="https://2.gravatar.com/avatar/5e530dc565f6909565e3feac2cd429f9966665fea35985b40194a74c665bcd86?s=96&#38;d=identicon&#38;r=G" medium="image">
  66. <media:title type="html">stellandev</media:title>
  67. </media:content>
  68. </item>
  69. <item>
  70. <title>My CollabSphere session &#124; DEV115 &#124; Using XPages and Bootstrap tabs to build a (Monolithic) Single-Page Application (of Micro Front-Ends)</title>
  71. <link>https://xpage.me/2021/11/02/my-collabsphere-session-dev115-using-xpages-and-bootstrap-tabs-to-build-a-monolithic-single-page-application-of-micro-front-ends/</link>
  72. <comments>https://xpage.me/2021/11/02/my-collabsphere-session-dev115-using-xpages-and-bootstrap-tabs-to-build-a-monolithic-single-page-application-of-micro-front-ends/#comments</comments>
  73. <dc:creator><![CDATA[michaelgsmith]]></dc:creator>
  74. <pubDate>Wed, 03 Nov 2021 03:35:01 +0000</pubDate>
  75. <category><![CDATA[Bootstrap]]></category>
  76. <category><![CDATA[Collabsphere]]></category>
  77. <category><![CDATA[Domino]]></category>
  78. <category><![CDATA[XPages]]></category>
  79. <category><![CDATA[HCL]]></category>
  80. <guid isPermaLink="false">http://xpage.me/?p=1503</guid>
  81.  
  82. <description><![CDATA[It&#8217;s been two weeks since CollabSphere but better late than never in releasing my session, right? Once again, Richard and his team have pulled off a phenomenal event. Whether joining as an attendee or a speaker, the mechanism by which one could participate in sessions really could not be any smoother. Having presented at Collabsphere [&#8230;]]]></description>
  83. <content:encoded><![CDATA[
  84. <p>It&#8217;s been two weeks since CollabSphere but better late than never in releasing my session, right?</p>
  85.  
  86.  
  87.  
  88. <p>Once again, Richard and his team have pulled off a phenomenal event. Whether joining as an attendee or a speaker, the mechanism by which one could participate in sessions really could not be any smoother. Having presented at Collabsphere previously in person, I was thrown off initially by not being able to feel the &#8220;energy&#8221; in the room so to speak, but I quickly settled in and felt quite comfortable.</p>
  89.  
  90.  
  91.  
  92. <h2 class="wp-block-heading">flexTabs</h2>
  93.  
  94.  
  95.  
  96. <p>The session starts out focusing on solutions I&#8217;ve built within my organization but ends with &#8220;flexTabs&#8221; demos &#8211; a soon-to-be-released project that can make creating dynamic XPage applications easier and faster.  Enjoy! </p>
  97.  
  98.  
  99.  
  100. <iframe class="youtube-player" width="700" height="404" src="https://www.youtube.com/embed/1r516wksggU?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en&#038;autohide=2&#038;wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
  101. ]]></content:encoded>
  102. <wfw:commentRss>https://xpage.me/2021/11/02/my-collabsphere-session-dev115-using-xpages-and-bootstrap-tabs-to-build-a-monolithic-single-page-application-of-micro-front-ends/feed/</wfw:commentRss>
  103. <slash:comments>5</slash:comments>
  104. <media:content url="https://2.gravatar.com/avatar/5e530dc565f6909565e3feac2cd429f9966665fea35985b40194a74c665bcd86?s=96&#38;d=identicon&#38;r=G" medium="image">
  105. <media:title type="html">stellandev</media:title>
  106. </media:content>
  107. </item>
  108. <item>
  109. <title>HCL Notes 12 / Windows 11 Preview ARM64 / Parallels on M1 Macbook Pro 16&#8243;</title>
  110. <link>https://xpage.me/2021/10/27/hcl-notes-12-windows-11-preview-arm64-parallels-on-m1-macbook-pro-16/</link>
  111. <comments>https://xpage.me/2021/10/27/hcl-notes-12-windows-11-preview-arm64-parallels-on-m1-macbook-pro-16/#respond</comments>
  112. <dc:creator><![CDATA[michaelgsmith]]></dc:creator>
  113. <pubDate>Thu, 28 Oct 2021 03:03:22 +0000</pubDate>
  114. <category><![CDATA[Domino]]></category>
  115. <category><![CDATA[HCL]]></category>
  116. <category><![CDATA[Notes12]]></category>
  117. <category><![CDATA[Parallels]]></category>
  118. <guid isPermaLink="false">http://xpage.me/?p=1488</guid>
  119.  
  120. <description><![CDATA[With the recent arrival of the powerful new Macbook Pros armed with the Apple M1 chip, the elephant in the room for many Domino developers was how will the ability to virtualize Windows in order to run Notes and Designer be affected. Like many others, I have run Parallels since its release in 2005 to [&#8230;]]]></description>
  121. <content:encoded><![CDATA[
  122. <p>With the recent arrival of the powerful new Macbook Pros armed with the Apple M1 chip, the elephant in the room for many Domino developers was how will the ability to virtualize Windows in order to run Notes and Designer be affected.  Like many others, I have run <a rel="noreferrer noopener" href="https://www.parallels.com/news/press-releases/show/pd17-for-mac-launches/" target="_blank">Parallels</a> since its release in 2005 to support the virtualization abilities of the Intel Macbook Pros released at that time. </p>
  123.  
  124.  
  125.  
  126. <p>The initial virtualization prospects on the M1 machines looked daunting .. you need an ARM64 version of Windows and links to official Microsoft downloads that were being linked to by Parallels were not working.  Uh oh. Maybe not the best road to go down if you rely on virtualization as a production setup.</p>
  127.  
  128.  
  129.  
  130. <p>However, with my 2017 Macbook Air starting to show its age, I decided to take a hard look at the new Macbook Pros. Since it is not my primary work machine and I use the Mac side of things to do a bunch of personal stuff, rolling the dice seemed like a worthwhile thing to do, so I waltzed into my local Apple store and ended up walking out with a 16&#8243; Macbook Pro with an M1 Pro processor.  With a little trial and error, it ended up being pretty easy to get the ARM64 version of Windows 11 Preview installed.</p>
  131.  
  132.  
  133.  
  134. <h2 class="wp-block-heading">DO THIS</h2>
  135.  
  136.  
  137.  
  138. <ul><li>If you haven&#8217;t already, register for the <a rel="noreferrer noopener" href="https://insider.windows.com/en-us/getting-started" target="_blank">Windows Insider</a> program.</li><li>Download the Windows 11 Preview ARM64 .vhdx file.  The screenshots below show how to find it on the Windows Insider site.</li><li>In Parallels create a new VM and point it to the downloaded file.</li><li>Sit back and relax!</li></ul>
  139.  
  140.  
  141.  
  142. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_21-57-59.png"><img width="1024" height="615" data-attachment-id="1493" data-permalink="https://xpage.me/2021-10-27_21-57-59/" data-orig-file="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_21-57-59.png" data-orig-size="1353,813" 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="2021-10-27_21-57-59" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_21-57-59.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_21-57-59.png?w=590" src="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_21-57-59.png?w=1024" alt="" class="wp-image-1493" srcset="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_21-57-59.png?w=1024 1024w, https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_21-57-59.png?w=150 150w, https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_21-57-59.png?w=300 300w, https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_21-57-59.png?w=768 768w, https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_21-57-59.png 1353w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>
  143.  
  144.  
  145.  
  146. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-08-51.png"><img width="1024" height="497" data-attachment-id="1495" data-permalink="https://xpage.me/2021-10-27_22-08-51/" data-orig-file="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-08-51.png" data-orig-size="2526,1228" 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="2021-10-27_22-08-51" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-08-51.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-08-51.png?w=590" src="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-08-51.png?w=1024" alt="" class="wp-image-1495" srcset="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-08-51.png?w=1022 1022w, https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-08-51.png?w=2045 2045w, https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-08-51.png?w=150 150w, https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-08-51.png?w=300 300w, https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-08-51.png?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>
  147.  
  148.  
  149.  
  150. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-10-42.png"><img width="1024" height="730" data-attachment-id="1497" data-permalink="https://xpage.me/2021-10-27_22-10-42/" data-orig-file="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-10-42.png" data-orig-size="1802,1286" 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="2021-10-27_22-10-42" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-10-42.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-10-42.png?w=590" src="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-10-42.png?w=1024" alt="" class="wp-image-1497" srcset="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-10-42.png?w=1024 1024w, https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-10-42.png?w=150 150w, https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-10-42.png?w=300 300w, https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-10-42.png?w=768 768w, https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-10-42.png 1802w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>
  151.  
  152.  
  153.  
  154. <h2 class="wp-block-heading">Installing Notes/Designer/Admin 12</h2>
  155.  
  156.  
  157.  
  158. <p>Once the Windows installation was completed the next step was to install Notes.  After downloading the .exe from Flexnet the installation went as smooth as expected. I copied stuff from my data dir on my Notes 11VM &#8211; working sets, dbs, etc. with no problem.</p>
  159.  
  160.  
  161.  
  162. <h2 class="wp-block-heading">DO NOT DO THIS</h2>
  163.  
  164.  
  165.  
  166. <p>Before taking the official route outlined above, I tried some of the other methods (for example UUP Dump) where you download a package with shell scripts that go out and download all of the necessary installation files and packages them up into an ISO image.  Despite successfully downloading and building the ISO images, the installations crapped out almost immediately.</p>
  167.  
  168.  
  169.  
  170. <h2 class="wp-block-heading">NEXT STEPS</h2>
  171.  
  172.  
  173.  
  174. <p>There is a lot of blogging and building of demos I want to get to so I plan on putting this configuration through its paces. in the near future.  Having used the 13&#8243; MacBook Air for the past 4.5 years or so, my first impression of the 16&#8243; screen was that it&#8217;s waaay too big. But it is growing on me and feels long overdue.  I&#8217;m looking forward to having some fun with this machine.</p>
  175. ]]></content:encoded>
  176. <wfw:commentRss>https://xpage.me/2021/10/27/hcl-notes-12-windows-11-preview-arm64-parallels-on-m1-macbook-pro-16/feed/</wfw:commentRss>
  177. <slash:comments>0</slash:comments>
  178. <media:content url="https://2.gravatar.com/avatar/5e530dc565f6909565e3feac2cd429f9966665fea35985b40194a74c665bcd86?s=96&#38;d=identicon&#38;r=G" medium="image">
  179. <media:title type="html">stellandev</media:title>
  180. </media:content>
  181.  
  182. <media:content url="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_21-57-59.png?w=1024" medium="image" />
  183.  
  184. <media:content url="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-08-51.png?w=1024" medium="image" />
  185.  
  186. <media:content url="https://xpagedotme.files.wordpress.com/2021/10/2021-10-27_22-10-42.png?w=1024" medium="image" />
  187. </item>
  188. <item>
  189. <title>Join me at CollabSphere 2021!</title>
  190. <link>https://xpage.me/2021/10/15/join-me-at-collabsphere-2021/</link>
  191. <comments>https://xpage.me/2021/10/15/join-me-at-collabsphere-2021/#respond</comments>
  192. <dc:creator><![CDATA[michaelgsmith]]></dc:creator>
  193. <pubDate>Fri, 15 Oct 2021 14:40:28 +0000</pubDate>
  194. <category><![CDATA[Bootstrap]]></category>
  195. <category><![CDATA[Domino]]></category>
  196. <category><![CDATA[HCL]]></category>
  197. <category><![CDATA[jQuery]]></category>
  198. <category><![CDATA[XPages]]></category>
  199. <category><![CDATA[Collabsphere]]></category>
  200. <guid isPermaLink="false">http://xpage.me/?p=1483</guid>
  201.  
  202. <description><![CDATA[CollabSphere, perennially a great conference, will be held virtually for the 2nd year in a row from Oct. 19th &#8211; Oct. 21st and I am fortunate to be presenting a session this year. DEV115: Using XPages and Bootstrap tabs to build a (Monolithic) Single-Page Application (of Micro Front-ends)Time: Tuesday 10/19 @ 2PM EST While the [&#8230;]]]></description>
  203. <content:encoded><![CDATA[
  204. <p><a rel="noreferrer noopener" href="https://collabsphere.org" target="_blank">CollabSphere,</a> perennially a great conference, will be held virtually for the 2nd year in a row from Oct. 19th &#8211; Oct. 21st and I am fortunate to be presenting a session this year.</p>
  205.  
  206.  
  207.  
  208. <p><strong>DEV115:</strong> Using XPages and Bootstrap tabs to build a (Monolithic) Single-Page Application (of Micro Front-ends)<br><strong>Time:</strong> Tuesday 10/19 @ 2PM EST</p>
  209.  
  210.  
  211.  
  212. <p>While the title is a bit wordy, it is meant to be a little cheeky &#8230; This session will demonstrate how at Mutual Boiler Re we use Bootstrap tabs and jQuery to provide our XPages applications with a structure that allows multiple pages, views, and documents to be opened within one browser tab, essentially creating a Single Page Application that mimics the Notes Client in a browser.</p>
  213.  
  214.  
  215.  
  216. <p>Thank you to Richard and the Collabsphere team for this opportunity.  I look forward to seeing you there!</p>
  217. ]]></content:encoded>
  218. <wfw:commentRss>https://xpage.me/2021/10/15/join-me-at-collabsphere-2021/feed/</wfw:commentRss>
  219. <slash:comments>0</slash:comments>
  220. <media:content url="https://2.gravatar.com/avatar/5e530dc565f6909565e3feac2cd429f9966665fea35985b40194a74c665bcd86?s=96&#38;d=identicon&#38;r=G" medium="image">
  221. <media:title type="html">stellandev</media:title>
  222. </media:content>
  223. </item>
  224. <item>
  225. <title>Kudos to HCL</title>
  226. <link>https://xpage.me/2021/07/22/kudos-to-hcl/</link>
  227. <comments>https://xpage.me/2021/07/22/kudos-to-hcl/#comments</comments>
  228. <dc:creator><![CDATA[michaelgsmith]]></dc:creator>
  229. <pubDate>Fri, 23 Jul 2021 02:22:02 +0000</pubDate>
  230. <category><![CDATA[Domino]]></category>
  231. <category><![CDATA[HCL]]></category>
  232. <category><![CDATA[XPages]]></category>
  233. <guid isPermaLink="false">http://xpage.me/?p=1468</guid>
  234.  
  235. <description><![CDATA[Last week I received a nice little gift in my inbox &#8230; an email from HCL with an update to an SPR I submitted late last year indicating the defect identified in that SPR was RESOLVED. This bug was incredibly annoying for me and the workaround initially suggested didn&#8217;t make sense&#8230; and even though I [&#8230;]]]></description>
  236. <content:encoded><![CDATA[
  237. <p>Last week I received a nice little gift in my inbox &#8230; an email from HCL with an update to an <a href="https://support.hcltechsw.com/csm?id=kb_article&amp;sysparm_article=KB0087045">SPR I submitted</a> late last year indicating the defect identified in that SPR was <strong>RESOLVED</strong>.</p>
  238.  
  239.  
  240.  
  241. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2021/07/2021-07-22_21-41-26.png"><img loading="lazy" width="1024" height="780" data-attachment-id="1475" data-permalink="https://xpage.me/2021-07-22_21-41-26/" data-orig-file="https://xpagedotme.files.wordpress.com/2021/07/2021-07-22_21-41-26.png" data-orig-size="1031,786" 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="2021-07-22_21-41-26" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2021/07/2021-07-22_21-41-26.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2021/07/2021-07-22_21-41-26.png?w=590" src="https://xpagedotme.files.wordpress.com/2021/07/2021-07-22_21-41-26.png?w=1024" alt="" class="wp-image-1475" srcset="https://xpagedotme.files.wordpress.com/2021/07/2021-07-22_21-41-26.png?w=1024 1024w, https://xpagedotme.files.wordpress.com/2021/07/2021-07-22_21-41-26.png?w=150 150w, https://xpagedotme.files.wordpress.com/2021/07/2021-07-22_21-41-26.png?w=300 300w, https://xpagedotme.files.wordpress.com/2021/07/2021-07-22_21-41-26.png?w=768 768w, https://xpagedotme.files.wordpress.com/2021/07/2021-07-22_21-41-26.png 1031w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>
  242.  
  243.  
  244.  
  245. <p>This bug was incredibly annoying for me and the workaround initially suggested didn&#8217;t make sense&#8230; and even though I was able to reproduce the issue in each version and had to push a bit to get this issue upgraded to an SPR, ultimately HCL listened to the customer and resolved the issue.  </p>
  246.  
  247.  
  248.  
  249. <p>While not listed above, according to the <a rel="noreferrer noopener" href="https://support.hcltechsw.com/csm?id=kb_article&amp;sysparm_article=KB0092051" target="_blank">release notes for D</a><a href="https://support.hcltechsw.com/csm?id=kb_article&amp;sysparm_article=KB0092051">omino 10.0.1 FP</a>7, this defect has also been resolved in that fix pack.</p>
  250. ]]></content:encoded>
  251. <wfw:commentRss>https://xpage.me/2021/07/22/kudos-to-hcl/feed/</wfw:commentRss>
  252. <slash:comments>1</slash:comments>
  253. <media:thumbnail url="https://xpagedotme.files.wordpress.com/2021/07/2021-07-22_21-41-26.png" />
  254. <media:content url="https://xpagedotme.files.wordpress.com/2021/07/2021-07-22_21-41-26.png" medium="image">
  255. <media:title type="html">2021-07-22_21-41-26</media:title>
  256. </media:content>
  257.  
  258. <media:content url="https://2.gravatar.com/avatar/5e530dc565f6909565e3feac2cd429f9966665fea35985b40194a74c665bcd86?s=96&#38;d=identicon&#38;r=G" medium="image">
  259. <media:title type="html">stellandev</media:title>
  260. </media:content>
  261.  
  262. <media:content url="https://xpagedotme.files.wordpress.com/2021/07/2021-07-22_21-41-26.png?w=1024" medium="image" />
  263. </item>
  264. <item>
  265. <title>Reader question &#8211; How does the Flexible View Control handle response documents?</title>
  266. <link>https://xpage.me/2021/01/11/reader-question-how-does-the-flexible-view-control-handle-response-documents/</link>
  267. <comments>https://xpage.me/2021/01/11/reader-question-how-does-the-flexible-view-control-handle-response-documents/#comments</comments>
  268. <dc:creator><![CDATA[michaelgsmith]]></dc:creator>
  269. <pubDate>Mon, 11 Jan 2021 13:14:15 +0000</pubDate>
  270. <category><![CDATA[DataTables]]></category>
  271. <category><![CDATA[Domino]]></category>
  272. <category><![CDATA[HCL]]></category>
  273. <category><![CDATA[JavaScript]]></category>
  274. <category><![CDATA[jQuery]]></category>
  275. <category><![CDATA[low-code]]></category>
  276. <category><![CDATA[XPages]]></category>
  277. <guid isPermaLink="false">http://xpage.me/?p=1385</guid>
  278.  
  279. <description><![CDATA[The combination of the createdRow (or rowCallback), initComplete, and the drawCallback functions give us the power to rebuild the response hierarchy of a Notes View in the Flexible View Control for #XPages.]]></description>
  280. <content:encoded><![CDATA[
  281. <p>Recently, I received a comment on a blog post asking how the FVC handles response documents:</p>
  282.  
  283.  
  284.  
  285. <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>One question I have is how best to deal with response documents in views, I am not sure if I have missed something in the tutorials but I am unsure how to render responses or if the control handles views with responses?</p></blockquote>
  286.  
  287.  
  288.  
  289. <p>In building the control, response documents were never even a consideration for me since we don&#8217;t use them in our environment so the Flexible View Control does not contain specific functionality for handling response documents. However, because the framework was built to be as flexible and configurable as possible, the tools provided make creating that functionality incredibly easy. Based on the comment above I created a demo to prove that: </p>
  290.  
  291.  
  292.  
  293. <p><a href="http://demos.xpage.me/demos/datatables-xpages-bootstrap.nsf/viewGeneral.xsp?viewdef=response-docs" rel="nofollow">http://demos.xpage.me/demos/datatables-xpages-bootstrap.nsf/viewGeneral.xsp?viewdef=response-docs</a></p>
  294.  
  295.  
  296.  
  297. <h3 class="wp-block-heading">Building the Demo</h3>
  298.  
  299.  
  300.  
  301. <p>For this demo I created a new used car database and added some records from the original used car database. In addition to the listing form that already existed for the main docs, I added a response form and response to response form so I could add comments to listings and comments to comments:</p>
  302.  
  303.  
  304.  
  305. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2021/01/response-form.png"><img loading="lazy" width="905" height="184" data-attachment-id="1412" data-permalink="https://xpage.me/response-form/" data-orig-file="https://xpagedotme.files.wordpress.com/2021/01/response-form.png" data-orig-size="905,184" 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="response-form" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2021/01/response-form.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2021/01/response-form.png?w=590" src="https://xpagedotme.files.wordpress.com/2021/01/response-form.png?w=905" alt="" class="wp-image-1412" srcset="https://xpagedotme.files.wordpress.com/2021/01/response-form.png 905w, https://xpagedotme.files.wordpress.com/2021/01/response-form.png?w=150 150w, https://xpagedotme.files.wordpress.com/2021/01/response-form.png?w=300 300w, https://xpagedotme.files.wordpress.com/2021/01/response-form.png?w=768 768w" sizes="(max-width: 905px) 100vw, 905px" /></a><figcaption>response form</figcaption></figure>
  306.  
  307.  
  308.  
  309. <p>On both the response and response to response forms the ID field from the original document is being inherited to have a common value to link all of the documents besides docids, but it&#8217;s not really necessary to make the demo function properly.</p>
  310.  
  311.  
  312.  
  313. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2021/01/response-response-form.png"><img loading="lazy" width="933" height="174" data-attachment-id="1413" data-permalink="https://xpage.me/response-response-form/" data-orig-file="https://xpagedotme.files.wordpress.com/2021/01/response-response-form.png" data-orig-size="933,174" 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="response-response-form" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2021/01/response-response-form.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2021/01/response-response-form.png?w=590" src="https://xpagedotme.files.wordpress.com/2021/01/response-response-form.png?w=933" alt="" class="wp-image-1413" srcset="https://xpagedotme.files.wordpress.com/2021/01/response-response-form.png 933w, https://xpagedotme.files.wordpress.com/2021/01/response-response-form.png?w=150 150w, https://xpagedotme.files.wordpress.com/2021/01/response-response-form.png?w=300 300w, https://xpagedotme.files.wordpress.com/2021/01/response-response-form.png?w=768 768w" sizes="(max-width: 933px) 100vw, 933px" /></a><figcaption>response to response form</figcaption></figure>
  314.  
  315.  
  316.  
  317. <h3 class="wp-block-heading">Notes View Configuration</h3>
  318.  
  319.  
  320.  
  321. <p>To get the View set up I need to make sure that <strong>Show response documents in a hierarchy</strong> is turned on and add the comments and parent_docid columns.  </p>
  322.  
  323.  
  324.  
  325. <p class="info_box"><strong>Note:</strong> No column is set to &#8220;show responses only&#8221;.</p>
  326.  
  327.  
  328.  
  329. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2021/01/response-view-columns.png"><img loading="lazy" width="907" height="332" data-attachment-id="1411" data-permalink="https://xpage.me/response-view-columns/" data-orig-file="https://xpagedotme.files.wordpress.com/2021/01/response-view-columns.png" data-orig-size="907,332" 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="response-view-columns" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2021/01/response-view-columns.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2021/01/response-view-columns.png?w=590" src="https://xpagedotme.files.wordpress.com/2021/01/response-view-columns.png?w=907" alt="" class="wp-image-1411" srcset="https://xpagedotme.files.wordpress.com/2021/01/response-view-columns.png 907w, https://xpagedotme.files.wordpress.com/2021/01/response-view-columns.png?w=150 150w, https://xpagedotme.files.wordpress.com/2021/01/response-view-columns.png?w=300 300w, https://xpagedotme.files.wordpress.com/2021/01/response-view-columns.png?w=768 768w" sizes="(max-width: 907px) 100vw, 907px" /></a></figure>
  330.  
  331.  
  332.  
  333. <p>After adding a couple of responses in the Notes Client the back-end view looks like this:</p>
  334.  
  335.  
  336.  
  337. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2021/01/view-responses.png"><img loading="lazy" width="894" height="218" data-attachment-id="1416" data-permalink="https://xpage.me/view-responses/" data-orig-file="https://xpagedotme.files.wordpress.com/2021/01/view-responses.png" data-orig-size="894,218" 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="view-responses" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2021/01/view-responses.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2021/01/view-responses.png?w=590" src="https://xpagedotme.files.wordpress.com/2021/01/view-responses.png?w=894" alt="" class="wp-image-1416" srcset="https://xpagedotme.files.wordpress.com/2021/01/view-responses.png 894w, https://xpagedotme.files.wordpress.com/2021/01/view-responses.png?w=150 150w, https://xpagedotme.files.wordpress.com/2021/01/view-responses.png?w=300 300w, https://xpagedotme.files.wordpress.com/2021/01/view-responses.png?w=768 768w" sizes="(max-width: 894px) 100vw, 894px" /></a></figure>
  338.  
  339.  
  340.  
  341. <h3 class="wp-block-heading">The View Definition</h3>
  342.  
  343.  
  344.  
  345. <p>In the View Definition I&#8217;m setting the columns for the responses to hidden because I don&#8217;t need that data to display.  We *do* need the comments column to display but you will see momentarily how that will be done.</p>
  346.  
  347.  
  348.  
  349. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2021/01/response-view-definition.png"><img loading="lazy" width="872" height="209" data-attachment-id="1417" data-permalink="https://xpage.me/response-view-definition/" data-orig-file="https://xpagedotme.files.wordpress.com/2021/01/response-view-definition.png" data-orig-size="872,209" 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="response-view-definition" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2021/01/response-view-definition.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2021/01/response-view-definition.png?w=590" src="https://xpagedotme.files.wordpress.com/2021/01/response-view-definition.png?w=872" alt="" class="wp-image-1417" srcset="https://xpagedotme.files.wordpress.com/2021/01/response-view-definition.png 872w, https://xpagedotme.files.wordpress.com/2021/01/response-view-definition.png?w=150 150w, https://xpagedotme.files.wordpress.com/2021/01/response-view-definition.png?w=300 300w, https://xpagedotme.files.wordpress.com/2021/01/response-view-definition.png?w=768 768w" sizes="(max-width: 872px) 100vw, 872px" /></a></figure>
  350.  
  351.  
  352.  
  353. <h3 class="wp-block-heading">The REST Service</h3>
  354.  
  355.  
  356.  
  357. <p>Another important step is making sure the REST service being utilized to serve the data contains the appropriate document hierarchy information.  Since we are using the standard &lt;xe:viewJsonService&gt;, the system columns can be configured to include the <strong>position</strong> data in addition to the unid.  By default, all of the columns are enabled but I prefer to remove the ones I don&#8217;t need to cut down on payload size.</p>
  358.  
  359.  
  360.  
  361. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2021/01/rest-service-response.png"><img loading="lazy" width="721" height="313" data-attachment-id="1419" data-permalink="https://xpage.me/rest-service-response/" data-orig-file="https://xpagedotme.files.wordpress.com/2021/01/rest-service-response.png" data-orig-size="721,313" 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="rest-service-response" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2021/01/rest-service-response.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2021/01/rest-service-response.png?w=590" src="https://xpagedotme.files.wordpress.com/2021/01/rest-service-response.png?w=721" alt="" class="wp-image-1419" srcset="https://xpagedotme.files.wordpress.com/2021/01/rest-service-response.png 721w, https://xpagedotme.files.wordpress.com/2021/01/rest-service-response.png?w=150 150w, https://xpagedotme.files.wordpress.com/2021/01/rest-service-response.png?w=300 300w" sizes="(max-width: 721px) 100vw, 721px" /></a></figure>
  362.  
  363.  
  364.  
  365. <p>Now we have the data we need:</p>
  366.  
  367.  
  368.  
  369. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2021/01/response-docs-dev-tools.png"><img loading="lazy" width="820" height="246" data-attachment-id="1421" data-permalink="https://xpage.me/response-docs-dev-tools/" data-orig-file="https://xpagedotme.files.wordpress.com/2021/01/response-docs-dev-tools.png" data-orig-size="820,246" 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="response-docs-dev-tools" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2021/01/response-docs-dev-tools.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2021/01/response-docs-dev-tools.png?w=590" src="https://xpagedotme.files.wordpress.com/2021/01/response-docs-dev-tools.png?w=820" alt="" class="wp-image-1421" srcset="https://xpagedotme.files.wordpress.com/2021/01/response-docs-dev-tools.png 820w, https://xpagedotme.files.wordpress.com/2021/01/response-docs-dev-tools.png?w=150 150w, https://xpagedotme.files.wordpress.com/2021/01/response-docs-dev-tools.png?w=300 300w, https://xpagedotme.files.wordpress.com/2021/01/response-docs-dev-tools.png?w=768 768w" sizes="(max-width: 820px) 100vw, 820px" /></a></figure>
  370.  
  371.  
  372.  
  373. <h3 class="wp-block-heading">Configuring the Flexible View Control</h3>
  374.  
  375.  
  376.  
  377. <p>So after all this setup we still haven&#8217;t actually displayed anything with the control yet.  How do we go about doing that? Before adding functionality to create the response hierarchy in the control the response docs look like standard docs, but with little information:</p>
  378.  
  379.  
  380.  
  381. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2021/01/response-docs-before-configuration.png"><img loading="lazy" width="1024" height="365" data-attachment-id="1418" data-permalink="https://xpage.me/response-docs-before-configuration/" data-orig-file="https://xpagedotme.files.wordpress.com/2021/01/response-docs-before-configuration.png" data-orig-size="1069,382" 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="response-docs-before-configuration" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2021/01/response-docs-before-configuration.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2021/01/response-docs-before-configuration.png?w=590" src="https://xpagedotme.files.wordpress.com/2021/01/response-docs-before-configuration.png?w=1024" alt="" class="wp-image-1418" srcset="https://xpagedotme.files.wordpress.com/2021/01/response-docs-before-configuration.png?w=1024 1024w, https://xpagedotme.files.wordpress.com/2021/01/response-docs-before-configuration.png?w=1021 1021w, https://xpagedotme.files.wordpress.com/2021/01/response-docs-before-configuration.png?w=150 150w, https://xpagedotme.files.wordpress.com/2021/01/response-docs-before-configuration.png?w=300 300w, https://xpagedotme.files.wordpress.com/2021/01/response-docs-before-configuration.png?w=768 768w, https://xpagedotme.files.wordpress.com/2021/01/response-docs-before-configuration.png 1069w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>
  382.  
  383.  
  384.  
  385. <h3 class="wp-block-heading">The Callbacks</h3>
  386.  
  387.  
  388.  
  389. <p>The first step I take to build the response hierarchy is adding a <strong>createdRow</strong> callback function to the control.  Normally, I would probably use a <strong>rowCallback</strong> out of habit but in the process of tinkering around, I moved my <strong>rowCallback</strong> code into the <strong>createdRow</strong> callback.  Here is what the DataTables documentation says about each:</p>
  390.  
  391.  
  392.  
  393. <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p><strong>rowCallback</strong><br>This callback allows you to &#8216;post process&#8217; each row after it have been generated for each table draw, but <em>before</em> it is rendered into the document. This means that the contents of the row might not have dimensions (<code>$().width()</code> for example) if it is not already in the document.<br><br>This function might be used for setting the row class name or otherwise manipulating the row&#8217;s <code>tr</code> element (although note that <a href="https://datatables.net/reference/option/createdRow"><code>createdRow</code></a> can often be more efficient).</p></blockquote>
  394.  
  395.  
  396.  
  397. <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p><strong>createdRow</strong><br>This callback is executed when a <code>TR</code> element is created (and all <code>TD</code> child elements have been inserted), or registered if using a DOM source, allowing manipulation of the <code>TR</code> element.<br><br>This is particularly useful when using deferred rendering (<a href="https://datatables.net/reference/option/deferRender"><code>deferRender</code></a>) or server-side processing (<a href="https://datatables.net/reference/option/serverSide"><code>serverSide</code></a>) so you can add events, class name information or otherwise format the row when it is created.</p></blockquote>
  398.  
  399.  
  400.  
  401. <p>There are a few things that need to be accomplished in the createdRow:</p>
  402.  
  403.  
  404.  
  405. <ul><li>For responses, reconstruct the response row to be more like the &#8220;classic&#8221; Notes response document and add classes and attributes that connect it to its parent row. </li><li>For non-responses, add that document&#8217;s docid as a row class and add a click event that will expand and collapse any responses.  </li><li>For responses with responses, add a click event to expand/collapse its child documents.</li><li>Use the position data to provide classes and attributes to the response rows to make it easier to build our hierarchy.</li></ul>
  406.  
  407.  
  408. <div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate">
  409. rowCallbackResponse : function(row,data,index,params,o) {
  410.  
  411. var attr = $(row).attr(&quot;data-docid&quot;);
  412. // For some browsers, `attr` is undefined; for others, `attr` is false. Check for both.
  413. if (typeof attr !== typeof undefined &amp;&amp; attr !== false) {
  414.  // Element has this attribute
  415. return;
  416. }
  417. // action item view on pcspDocument
  418. $(row).attr(&quot;data-docid&quot;,data&#91;'@unid']);
  419. // get the colspan
  420. var colspan = $('td',row).length;
  421. // if this is a response then add some info to this row
  422. var position = data&#91;'@position'];
  423. if (position.split('.').length &gt; 1) {
  424. // remove cells and replace with 1
  425. $(row).html('&lt;td colspan=&quot;' + colspan + '&quot;&gt;&lt;div&gt;&lt;i class=&quot;fa fa-comment-o right5&quot;&gt;&lt;/i&gt;'+ data&#91;'comments'] + '&lt;/div&gt;&lt;/td&gt;')
  426. // add some classes and attributes
  427. $(row).addClass('response response-'+data&#91;'parent_docid']);
  428. $(row).attr('data-position',position);
  429. $(row).addClass('response-level-'+position.split('.').length)
  430. // add a reference to the parent doc
  431. $(row).attr('data-parent-docid',data&#91;'parent_docid']);
  432. }
  433. $(row).click(function(ev) {
  434. $('&#91;data-position^=&quot;' + position + '.&quot;]').toggleClass('hidden');
  435. $('td:first div .fa',this).toggleClass('fa-caret-down');
  436. $('td:first div .fa',this).toggleClass('fa-caret-right');
  437. });
  438. }
  439. </pre></div>
  440.  
  441.  
  442. <p>I also add a little CSS to create the indentation of the responses:</p>
  443.  
  444.  
  445. <div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate">
  446. table.dataTable tr.response-level-2 td {padding-left:100px}
  447. table.dataTable tr.response-level-3 td {padding-left:125px}
  448. table.dataTable tr.response-level-4 td {padding-left:150px}
  449. </pre></div>
  450.  
  451.  
  452. <p>Now looking at the View, we are starting to see a result more like what we would expect. We can expand and collapse the responses by clicking the parent row and any response row that has responses, but we have a little bit more work to do.  I need to add a visual indicator to those rows so the user can see they have responses.  </p>
  453.  
  454.  
  455.  
  456. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2021/01/response-view-after-rowcallback.png"><img loading="lazy" width="1024" height="395" data-attachment-id="1423" data-permalink="https://xpage.me/response-view-after-rowcallback/" data-orig-file="https://xpagedotme.files.wordpress.com/2021/01/response-view-after-rowcallback.png" data-orig-size="1034,399" 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="response-view-after-rowcallback" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2021/01/response-view-after-rowcallback.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2021/01/response-view-after-rowcallback.png?w=590" src="https://xpagedotme.files.wordpress.com/2021/01/response-view-after-rowcallback.png?w=1024" alt="" class="wp-image-1423" srcset="https://xpagedotme.files.wordpress.com/2021/01/response-view-after-rowcallback.png?w=1024 1024w, https://xpagedotme.files.wordpress.com/2021/01/response-view-after-rowcallback.png?w=150 150w, https://xpagedotme.files.wordpress.com/2021/01/response-view-after-rowcallback.png?w=300 300w, https://xpagedotme.files.wordpress.com/2021/01/response-view-after-rowcallback.png?w=768 768w, https://xpagedotme.files.wordpress.com/2021/01/response-view-after-rowcallback.png 1034w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>
  457.  
  458.  
  459.  
  460. <p>To do that I&#8217;m going to add a <strong>drawCallback</strong> function. With that I want to accomplish the following:</p>
  461.  
  462.  
  463.  
  464. <ul><li>Add a visual indicator to any row that has response documents. Using FontAwesome, a twistie icon is added to the first column of any row with responses to simulate the classic Notes look.  The great thing is this is completely customizable.  I chose the first column for simplicity.</li><li>Move the node of each response so they appear after the parent.  This is not an issue when the View first loads, but is necessary when the View is sorted or filtered.</li></ul>
  465.  
  466.  
  467. <div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate">
  468. drawCallbackResponse : function() {
  469. // retrieve data from browser sessionStorage
  470. var responses = sessionStorage.getItem('responses') != '' ? JSON.parse(sessionStorage.getItem('responses')) : {};
  471.  
  472. // loop through each item
  473. // responses are stored in an object with the parent docid as key
  474. for (var key in responses) {
  475. if (responses.hasOwnProperty(key)) {
  476. // prevent dupes
  477. $('&#91;data-parent-docid=&quot;' + key + '&quot;]').remove();
  478. var pos = '.'+key;
  479. // insert each response after
  480. for (var x=0;x&lt;responses&#91;key].length;x++) {
  481. pos = $(responses&#91;key]&#91;x]).insertAfter(pos);
  482. }
  483. }
  484. }
  485. $('.response').each(function() {
  486. var post = $('.'+$(this).attr('data-parent-docid'));
  487. if ($('.'+$(this).attr('data-parent-docid') + ' td:first div .fa-caret-down').length==0 &amp;&amp;
  488. $('.'+$(this).attr('data-parent-docid') + ' td:first div .fa-caret-right').length==0
  489. ) {
  490. $('.'+$(this).attr('data-parent-docid') + ' td:first div').prepend('&lt;i class=&quot;fa fa-caret-down right5&quot;&gt;&lt;/i&gt;');
  491. }
  492. pos = $(this).insertAfter(pos);
  493. if ($('.fa').hasClass('fa-caret-right')) {
  494. $(this).addClass('hidden');
  495. }
  496. });
  497. }
  498. </pre></div>
  499.  
  500.  
  501. <p>Now we have a fully functional View with response documents in a hierarchy.  We can click the column headers to change the sort order of the View and the responses will still travel with their parent.</p>
  502.  
  503.  
  504.  
  505. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2021/01/response-view-after-drawcallback.png"><img loading="lazy" width="951" height="366" data-attachment-id="1426" data-permalink="https://xpage.me/response-view-after-drawcallback/" data-orig-file="https://xpagedotme.files.wordpress.com/2021/01/response-view-after-drawcallback.png" data-orig-size="951,366" 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="response-view-after-drawcallback" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2021/01/response-view-after-drawcallback.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2021/01/response-view-after-drawcallback.png?w=590" src="https://xpagedotme.files.wordpress.com/2021/01/response-view-after-drawcallback.png?w=951" alt="" class="wp-image-1426" srcset="https://xpagedotme.files.wordpress.com/2021/01/response-view-after-drawcallback.png 951w, https://xpagedotme.files.wordpress.com/2021/01/response-view-after-drawcallback.png?w=150 150w, https://xpagedotme.files.wordpress.com/2021/01/response-view-after-drawcallback.png?w=300 300w, https://xpagedotme.files.wordpress.com/2021/01/response-view-after-drawcallback.png?w=768 768w" sizes="(max-width: 951px) 100vw, 951px" /></a></figure>
  506.  
  507.  
  508.  
  509. <p>But we still have an issue .. filtering the View will make the responses disappear because the response rows don&#8217;t contain the same data as their parent.</p>
  510.  
  511.  
  512.  
  513. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2021/01/responses-after-filtering.png"><img loading="lazy" width="1024" height="202" data-attachment-id="1408" data-permalink="https://xpage.me/responses-after-filtering/" data-orig-file="https://xpagedotme.files.wordpress.com/2021/01/responses-after-filtering.png" data-orig-size="1299,257" 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="responses-after-filtering" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2021/01/responses-after-filtering.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2021/01/responses-after-filtering.png?w=590" src="https://xpagedotme.files.wordpress.com/2021/01/responses-after-filtering.png?w=1024" alt="" class="wp-image-1408" srcset="https://xpagedotme.files.wordpress.com/2021/01/responses-after-filtering.png?w=1024 1024w, https://xpagedotme.files.wordpress.com/2021/01/responses-after-filtering.png?w=1021 1021w, https://xpagedotme.files.wordpress.com/2021/01/responses-after-filtering.png?w=150 150w, https://xpagedotme.files.wordpress.com/2021/01/responses-after-filtering.png?w=300 300w, https://xpagedotme.files.wordpress.com/2021/01/responses-after-filtering.png?w=768 768w, https://xpagedotme.files.wordpress.com/2021/01/responses-after-filtering.png 1299w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>
  514.  
  515.  
  516.  
  517. <p>Again, we have all of the tools we need to overcome this.  Using the <strong>initComplete </strong>callback functionality of the control, we can store the html of all response rows in the sessionStorage of the browser when the View initialization is complete:</p>
  518.  
  519.  
  520.  
  521. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2021/01/flexible-view-control-responses.png"><img loading="lazy" width="633" height="285" data-attachment-id="1427" data-permalink="https://xpage.me/flexible-view-control-responses/" data-orig-file="https://xpagedotme.files.wordpress.com/2021/01/flexible-view-control-responses.png" data-orig-size="633,285" 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="flexible-view-control-responses" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2021/01/flexible-view-control-responses.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2021/01/flexible-view-control-responses.png?w=590" src="https://xpagedotme.files.wordpress.com/2021/01/flexible-view-control-responses.png?w=633" alt="" class="wp-image-1427" srcset="https://xpagedotme.files.wordpress.com/2021/01/flexible-view-control-responses.png 633w, https://xpagedotme.files.wordpress.com/2021/01/flexible-view-control-responses.png?w=150 150w, https://xpagedotme.files.wordpress.com/2021/01/flexible-view-control-responses.png?w=300 300w" sizes="(max-width: 633px) 100vw, 633px" /></a></figure>
  522.  
  523.  
  524. <div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate">
  525. initCompleteResponse : function(_v,dataTableClass) {
  526. var responses = {};
  527. var oa = &#91;];
  528. var o = {};
  529. $('.response').each(function() {
  530. //store the html of response rows
  531. if (typeof (responses&#91;$(this).attr('data-parent-docid')]) == 'undefined') {
  532.  
  533. responses&#91;$(this).attr('data-parent-docid')] = &#91;];
  534. }
  535. var html = $(this).clone().wrap('&lt;p/&gt;').parent().html();
  536. responses&#91;$(this).attr('data-parent-docid')].push(html);
  537. });
  538. sessionStorage.setItem('responses',JSON.stringify(responses));
  539. }
  540. </pre></div>
  541.  
  542.  
  543. <p>You may have noticed in the drawCallback function there was a reference to the sessionStorage:</p>
  544.  
  545.  
  546. <div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate">
  547. // retrieve data from browser sessionStorage
  548. var responses = sessionStorage.getItem('responses') != '' ? JSON.parse(sessionStorage.getItem('responses')) : {};
  549. </pre></div>
  550.  
  551.  
  552. <p>By doing this little bit of caching we can ensure that we can get the responses back into the table even if the DataTables filtering removes these records from the display.</p>
  553.  
  554.  
  555.  
  556. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2021/01/respnse-view-filtered.png"><img loading="lazy" width="1024" height="354" data-attachment-id="1431" data-permalink="https://xpage.me/respnse-view-filtered/" data-orig-file="https://xpagedotme.files.wordpress.com/2021/01/respnse-view-filtered.png" data-orig-size="1042,361" 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="respnse-view-filtered" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2021/01/respnse-view-filtered.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2021/01/respnse-view-filtered.png?w=590" src="https://xpagedotme.files.wordpress.com/2021/01/respnse-view-filtered.png?w=1024" alt="" class="wp-image-1431" srcset="https://xpagedotme.files.wordpress.com/2021/01/respnse-view-filtered.png?w=1022 1022w, https://xpagedotme.files.wordpress.com/2021/01/respnse-view-filtered.png?w=150 150w, https://xpagedotme.files.wordpress.com/2021/01/respnse-view-filtered.png?w=300 300w, https://xpagedotme.files.wordpress.com/2021/01/respnse-view-filtered.png?w=768 768w, https://xpagedotme.files.wordpress.com/2021/01/respnse-view-filtered.png 1042w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>
  557.  
  558.  
  559.  
  560. <h3 class="wp-block-heading">Conclusion</h3>
  561.  
  562.  
  563.  
  564. <p>The combination of the createdRow (or rowCallback), initComplete, and the drawCallback functions give us the power to rebuild the response hierarchy of a Notes View in the Flexible View Control for XPages.</p>
  565.  
  566.  
  567.  
  568. <p></p>
  569. ]]></content:encoded>
  570. <wfw:commentRss>https://xpage.me/2021/01/11/reader-question-how-does-the-flexible-view-control-handle-response-documents/feed/</wfw:commentRss>
  571. <slash:comments>2</slash:comments>
  572. <media:thumbnail url="https://xpagedotme.files.wordpress.com/2021/01/view-responses-complete.png" />
  573. <media:content url="https://xpagedotme.files.wordpress.com/2021/01/view-responses-complete.png" medium="image">
  574. <media:title type="html">view-responses-complete</media:title>
  575. </media:content>
  576.  
  577. <media:content url="https://2.gravatar.com/avatar/5e530dc565f6909565e3feac2cd429f9966665fea35985b40194a74c665bcd86?s=96&#38;d=identicon&#38;r=G" medium="image">
  578. <media:title type="html">stellandev</media:title>
  579. </media:content>
  580.  
  581. <media:content url="https://xpagedotme.files.wordpress.com/2021/01/response-form.png?w=905" medium="image" />
  582.  
  583. <media:content url="https://xpagedotme.files.wordpress.com/2021/01/response-response-form.png?w=933" medium="image" />
  584.  
  585. <media:content url="https://xpagedotme.files.wordpress.com/2021/01/response-view-columns.png?w=907" medium="image" />
  586.  
  587. <media:content url="https://xpagedotme.files.wordpress.com/2021/01/view-responses.png?w=894" medium="image" />
  588.  
  589. <media:content url="https://xpagedotme.files.wordpress.com/2021/01/response-view-definition.png?w=872" medium="image" />
  590.  
  591. <media:content url="https://xpagedotme.files.wordpress.com/2021/01/rest-service-response.png?w=721" medium="image" />
  592.  
  593. <media:content url="https://xpagedotme.files.wordpress.com/2021/01/response-docs-dev-tools.png?w=820" medium="image" />
  594.  
  595. <media:content url="https://xpagedotme.files.wordpress.com/2021/01/response-docs-before-configuration.png?w=1024" medium="image" />
  596.  
  597. <media:content url="https://xpagedotme.files.wordpress.com/2021/01/response-view-after-rowcallback.png?w=1024" medium="image" />
  598.  
  599. <media:content url="https://xpagedotme.files.wordpress.com/2021/01/response-view-after-drawcallback.png?w=951" medium="image" />
  600.  
  601. <media:content url="https://xpagedotme.files.wordpress.com/2021/01/responses-after-filtering.png?w=1024" medium="image" />
  602.  
  603. <media:content url="https://xpagedotme.files.wordpress.com/2021/01/flexible-view-control-responses.png?w=633" medium="image" />
  604.  
  605. <media:content url="https://xpagedotme.files.wordpress.com/2021/01/respnse-view-filtered.png?w=1024" medium="image" />
  606. </item>
  607. <item>
  608. <title>Humbled to be an HCL Ambassador for 2021</title>
  609. <link>https://xpage.me/2020/12/15/humbled-to-be-an-hcl-ambassador-for-2021/</link>
  610. <comments>https://xpage.me/2020/12/15/humbled-to-be-an-hcl-ambassador-for-2021/#comments</comments>
  611. <dc:creator><![CDATA[michaelgsmith]]></dc:creator>
  612. <pubDate>Tue, 15 Dec 2020 17:03:55 +0000</pubDate>
  613. <category><![CDATA[Domino]]></category>
  614. <category><![CDATA[HCL]]></category>
  615. <category><![CDATA[HCLAmbassador]]></category>
  616. <guid isPermaLink="false">http://xpage.me/?p=1367</guid>
  617.  
  618. <description><![CDATA[HCL has announced the HCL Ambassador Class of 2021 and I'm very honored to be on this list for the first time.]]></description>
  619. <content:encoded><![CDATA[
  620. <p>HCL has announced the <a rel="noreferrer noopener" href="https://www.hcltechsw.com/about/hcl-ambassadors/class-of-2021" target="_blank">HCL Ambassador Class of 2021</a> and I&#8217;m very honored to be on this list for the first time.  </p>
  621.  
  622.  
  623.  
  624. <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>The&nbsp;<strong>HCL Ambassadors Program</strong>&nbsp;recognizes customers and partners who go above and beyond to promote&nbsp;<strong>HCL Software</strong>&nbsp;products, engage with the community, and help others.</p></blockquote>
  625.  
  626.  
  627.  
  628. <p>Thank you to those who nominated me, and to HCL for selecting me based on the criteria above. We&#8217;ve all had enough of 2020 at this point, so here&#8217;s to 2021!</p>
  629. ]]></content:encoded>
  630. <wfw:commentRss>https://xpage.me/2020/12/15/humbled-to-be-an-hcl-ambassador-for-2021/feed/</wfw:commentRss>
  631. <slash:comments>1</slash:comments>
  632. <media:thumbnail url="https://xpagedotme.files.wordpress.com/2020/12/hcl-ambassador.png" />
  633. <media:content url="https://xpagedotme.files.wordpress.com/2020/12/hcl-ambassador.png" medium="image">
  634. <media:title type="html">hcl ambassador</media:title>
  635. </media:content>
  636.  
  637. <media:content url="https://2.gravatar.com/avatar/5e530dc565f6909565e3feac2cd429f9966665fea35985b40194a74c665bcd86?s=96&#38;d=identicon&#38;r=G" medium="image">
  638. <media:title type="html">stellandev</media:title>
  639. </media:content>
  640. </item>
  641. <item>
  642. <title>Flexible View Control for XPages &#8211; Mashing Up Total Columns and Category Renderers</title>
  643. <link>https://xpage.me/2020/12/14/flexible-view-control-for-xpages-mashing-up-total-columns-and-category-renderers/</link>
  644. <comments>https://xpage.me/2020/12/14/flexible-view-control-for-xpages-mashing-up-total-columns-and-category-renderers/#comments</comments>
  645. <dc:creator><![CDATA[michaelgsmith]]></dc:creator>
  646. <pubDate>Mon, 14 Dec 2020 05:54:59 +0000</pubDate>
  647. <category><![CDATA[DataTables]]></category>
  648. <category><![CDATA[Domino]]></category>
  649. <category><![CDATA[JavaScript]]></category>
  650. <category><![CDATA[jQuery]]></category>
  651. <category><![CDATA[low-code]]></category>
  652. <category><![CDATA[XPages]]></category>
  653. <guid isPermaLink="false">http://xpage.me/?p=1333</guid>
  654.  
  655. <description><![CDATA[By combining Category Renderers with Total Columns we can further enhance Views in XPages and make them more user-friendly than their Notes counterparts.]]></description>
  656. <content:encoded><![CDATA[
  657. <p>In a recent blog post we covered the concept of <a rel="noreferrer noopener" href="https://xpage.me/2020/12/02/flexible-view-control-for-xpages-category-renderers/" target="_blank">&#8216;Category Renderers&#8217;</a>, which allows the user to easily alter the visual representation of category rows in a categorized View. Combining this functionality with totals columns, <a href="https://xpage.me/2020/12/07/flexible-view-control-for-xpages-adding-column-totals/">highlighted in the last blog post in this series</a>, we can further enhance Views in XPages and make them more user-friendly than their Notes counterparts.</p>
  658.  
  659.  
  660.  
  661. <h3 class="wp-block-heading">The Mission</h3>
  662.  
  663.  
  664.  
  665. <p>Continuing with our dataset from previous posts of used cars available in Wilmington, DE I want to display the average PRICE of each MAKE of vehicle.  In my <a href="http://demos.xpage.me/demos/datatables-xpages-bootstrap.nsf/adminViewDefinitionDoc.xsp?documentId=88CC1894F59C67C005258637005AFC17&amp;action=editDocument" target="_blank" rel="noreferrer noopener">View Definition</a> I categorize the MAKE column:</p>
  666.  
  667.  
  668.  
  669. <p class="info_box"><strong>Note:</strong> As you can see in the screenshot below, the View Definition has an option to display average values.  This option currently doesn&#8217;t function properly and will be updated in the next release.</p>
  670.  
  671.  
  672.  
  673. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2020/12/totals-category-renderer-make.png"><img loading="lazy" width="915" height="105" data-attachment-id="1342" data-permalink="https://xpage.me/totals-category-renderer-make/" data-orig-file="https://xpagedotme.files.wordpress.com/2020/12/totals-category-renderer-make.png" data-orig-size="915,105" 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="totals-category-renderer-make" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2020/12/totals-category-renderer-make.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2020/12/totals-category-renderer-make.png?w=590" src="https://xpagedotme.files.wordpress.com/2020/12/totals-category-renderer-make.png?w=915" alt="" class="wp-image-1342" srcset="https://xpagedotme.files.wordpress.com/2020/12/totals-category-renderer-make.png 915w, https://xpagedotme.files.wordpress.com/2020/12/totals-category-renderer-make.png?w=150 150w, https://xpagedotme.files.wordpress.com/2020/12/totals-category-renderer-make.png?w=300 300w, https://xpagedotme.files.wordpress.com/2020/12/totals-category-renderer-make.png?w=768 768w" sizes="(max-width: 915px) 100vw, 915px" /></a></figure>
  674.  
  675.  
  676.  
  677. <p>Then I add a Category Renderer to the MAKE column:</p>
  678.  
  679.  
  680.  
  681. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2020/12/make-category-renderer.png"><img loading="lazy" width="860" height="233" data-attachment-id="1344" data-permalink="https://xpage.me/make-category-renderer/" data-orig-file="https://xpagedotme.files.wordpress.com/2020/12/make-category-renderer.png" data-orig-size="860,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="make-category-renderer" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2020/12/make-category-renderer.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2020/12/make-category-renderer.png?w=590" src="https://xpagedotme.files.wordpress.com/2020/12/make-category-renderer.png?w=860" alt="" class="wp-image-1344" srcset="https://xpagedotme.files.wordpress.com/2020/12/make-category-renderer.png 860w, https://xpagedotme.files.wordpress.com/2020/12/make-category-renderer.png?w=150 150w, https://xpagedotme.files.wordpress.com/2020/12/make-category-renderer.png?w=300 300w, https://xpagedotme.files.wordpress.com/2020/12/make-category-renderer.png?w=768 768w" sizes="(max-width: 860px) 100vw, 860px" /></a></figure>
  682.  
  683.  
  684.  
  685. <p>And I still have totals enabled for PRICE and MILEAGE:</p>
  686.  
  687.  
  688.  
  689. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2020/12/category-renderer-totals.png"><img loading="lazy" width="911" height="206" data-attachment-id="1353" data-permalink="https://xpage.me/category-renderer-totals/" data-orig-file="https://xpagedotme.files.wordpress.com/2020/12/category-renderer-totals.png" data-orig-size="911,206" 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="category-renderer-totals" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2020/12/category-renderer-totals.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2020/12/category-renderer-totals.png?w=590" src="https://xpagedotme.files.wordpress.com/2020/12/category-renderer-totals.png?w=911" alt="" class="wp-image-1353" srcset="https://xpagedotme.files.wordpress.com/2020/12/category-renderer-totals.png 911w, https://xpagedotme.files.wordpress.com/2020/12/category-renderer-totals.png?w=150 150w, https://xpagedotme.files.wordpress.com/2020/12/category-renderer-totals.png?w=300 300w, https://xpagedotme.files.wordpress.com/2020/12/category-renderer-totals.png?w=768 768w" sizes="(max-width: 911px) 100vw, 911px" /></a></figure>
  690.  
  691.  
  692.  
  693. <h3 class="wp-block-heading">The Category Renderer</h3>
  694.  
  695.  
  696.  
  697. <p>The <strong>demoFn.category.convert_total_to_avg</strong> function is a function in a client-side js library.  Remember, you do not provide any parameters to the function.  This function is applied to every category row and the dom object for that category is automatically passed into the function as a parameter.</p>
  698.  
  699.  
  700. <div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate">
  701. convert_total_to_avg : function(_this) {
  702. // _this is the category row dom element
  703. // take a total value for a category and instead display the avg value
  704. // get the total # of rows for this category
  705. var total_rows = $('.total_rows',$(_this)).html();
  706.  
  707. // get the total PRICE for this category
  708. var total_value = $(_this).attr('total_price_values');
  709.  
  710. // format the column that contains the total #
  711. $('.MILEAGE_total',$(_this)).html(total_rows+' (total)');
  712.  
  713. // calculate and format the average price
  714. $('.PRICE_total',$(_this)).html('$'+$U.formatMoney((total_value/total_rows),0)+' (avg)');
  715. }
  716. </pre></div>
  717.  
  718.  
  719. <p>Notice in the code above we are extracting the <strong>total_value</strong> from the attributes of the category tr.  We are able to do so because when totals are enabled for a categorized column the Flexible View Control stores the accumulated data in the tr element for easy access:</p>
  720.  
  721.  
  722.  
  723. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2020/12/dev-tools-category-row.png"><img loading="lazy" width="944" height="151" data-attachment-id="1351" data-permalink="https://xpage.me/dev-tools-category-row/" data-orig-file="https://xpagedotme.files.wordpress.com/2020/12/dev-tools-category-row.png" data-orig-size="944,151" 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="dev-tools-category-row" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2020/12/dev-tools-category-row.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2020/12/dev-tools-category-row.png?w=590" src="https://xpagedotme.files.wordpress.com/2020/12/dev-tools-category-row.png?w=944" alt="" class="wp-image-1351" srcset="https://xpagedotme.files.wordpress.com/2020/12/dev-tools-category-row.png 944w, https://xpagedotme.files.wordpress.com/2020/12/dev-tools-category-row.png?w=150 150w, https://xpagedotme.files.wordpress.com/2020/12/dev-tools-category-row.png?w=300 300w, https://xpagedotme.files.wordpress.com/2020/12/dev-tools-category-row.png?w=768 768w" sizes="(max-width: 944px) 100vw, 944px" /></a></figure>
  724.  
  725.  
  726.  
  727. <h3 class="wp-block-heading">The Result</h3>
  728.  
  729.  
  730.  
  731. <p class="info_box">See the demo: <a href="http://demos.xpage.me/demos/datatables-xpages-bootstrap.nsf/viewGeneral.xsp?viewdef=wilmington-de-category-renderer-totals&#038;key=city:Wilmington:state:DE" rel="nofollow">http://demos.xpage.me/demos/datatables-xpages-bootstrap.nsf/viewGeneral.xsp?viewdef=wilmington-de-category-renderer-totals&#038;key=city:Wilmington:state:DE</a></p>
  732.  
  733.  
  734.  
  735. <p>Here is our result:</p>
  736.  
  737.  
  738.  
  739. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2020/12/wilm-de-avg-price.png"><img loading="lazy" width="859" height="337" data-attachment-id="1349" data-permalink="https://xpage.me/wilm-de-avg-price/" data-orig-file="https://xpagedotme.files.wordpress.com/2020/12/wilm-de-avg-price.png" data-orig-size="859,337" 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="wilm-de-avg-price" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2020/12/wilm-de-avg-price.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2020/12/wilm-de-avg-price.png?w=590" src="https://xpagedotme.files.wordpress.com/2020/12/wilm-de-avg-price.png?w=859" alt="" class="wp-image-1349" srcset="https://xpagedotme.files.wordpress.com/2020/12/wilm-de-avg-price.png 859w, https://xpagedotme.files.wordpress.com/2020/12/wilm-de-avg-price.png?w=150 150w, https://xpagedotme.files.wordpress.com/2020/12/wilm-de-avg-price.png?w=300 300w, https://xpagedotme.files.wordpress.com/2020/12/wilm-de-avg-price.png?w=768 768w" sizes="(max-width: 859px) 100vw, 859px" /></a></figure>
  740.  
  741.  
  742.  
  743. <h3 class="wp-block-heading">What About The Footer?</h3>
  744.  
  745.  
  746.  
  747. <p>While we are achieving the desired outcome for each category, the footer still displays the total PRICE for all used cars in Wilmington, DE.  </p>
  748.  
  749.  
  750.  
  751. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2020/12/category-renderer-totals-footer.png"><img loading="lazy" width="833" height="73" data-attachment-id="1356" data-permalink="https://xpage.me/category-renderer-totals-footer/" data-orig-file="https://xpagedotme.files.wordpress.com/2020/12/category-renderer-totals-footer.png" data-orig-size="833,73" 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="category-renderer-totals-footer" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2020/12/category-renderer-totals-footer.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2020/12/category-renderer-totals-footer.png?w=590" src="https://xpagedotme.files.wordpress.com/2020/12/category-renderer-totals-footer.png?w=833" alt="" class="wp-image-1356" srcset="https://xpagedotme.files.wordpress.com/2020/12/category-renderer-totals-footer.png 833w, https://xpagedotme.files.wordpress.com/2020/12/category-renderer-totals-footer.png?w=150 150w, https://xpagedotme.files.wordpress.com/2020/12/category-renderer-totals-footer.png?w=300 300w, https://xpagedotme.files.wordpress.com/2020/12/category-renderer-totals-footer.png?w=768 768w" sizes="(max-width: 833px) 100vw, 833px" /></a></figure>
  752.  
  753.  
  754.  
  755. <p>How do we get the average price for all used cars instead?  In the next post we&#8217;ll show you how!</p>
  756.  
  757.  
  758.  
  759. <p></p>
  760. ]]></content:encoded>
  761. <wfw:commentRss>https://xpage.me/2020/12/14/flexible-view-control-for-xpages-mashing-up-total-columns-and-category-renderers/feed/</wfw:commentRss>
  762. <slash:comments>1</slash:comments>
  763. <media:thumbnail url="https://xpagedotme.files.wordpress.com/2020/12/wilm-de-avg-price.png" />
  764. <media:content url="https://xpagedotme.files.wordpress.com/2020/12/wilm-de-avg-price.png" medium="image">
  765. <media:title type="html">wilm-de-avg-price</media:title>
  766. </media:content>
  767.  
  768. <media:content url="https://2.gravatar.com/avatar/5e530dc565f6909565e3feac2cd429f9966665fea35985b40194a74c665bcd86?s=96&#38;d=identicon&#38;r=G" medium="image">
  769. <media:title type="html">stellandev</media:title>
  770. </media:content>
  771.  
  772. <media:content url="https://xpagedotme.files.wordpress.com/2020/12/totals-category-renderer-make.png?w=915" medium="image" />
  773.  
  774. <media:content url="https://xpagedotme.files.wordpress.com/2020/12/make-category-renderer.png?w=860" medium="image" />
  775.  
  776. <media:content url="https://xpagedotme.files.wordpress.com/2020/12/category-renderer-totals.png?w=911" medium="image" />
  777.  
  778. <media:content url="https://xpagedotme.files.wordpress.com/2020/12/dev-tools-category-row.png?w=944" medium="image" />
  779.  
  780. <media:content url="https://xpagedotme.files.wordpress.com/2020/12/wilm-de-avg-price.png?w=859" medium="image" />
  781.  
  782. <media:content url="https://xpagedotme.files.wordpress.com/2020/12/category-renderer-totals-footer.png?w=833" medium="image" />
  783. </item>
  784. <item>
  785. <title>Flexible View Control for XPages &#8211; Adding Column Totals</title>
  786. <link>https://xpage.me/2020/12/07/flexible-view-control-for-xpages-adding-column-totals/</link>
  787. <comments>https://xpage.me/2020/12/07/flexible-view-control-for-xpages-adding-column-totals/#comments</comments>
  788. <dc:creator><![CDATA[michaelgsmith]]></dc:creator>
  789. <pubDate>Mon, 07 Dec 2020 14:18:41 +0000</pubDate>
  790. <category><![CDATA[DataTables]]></category>
  791. <category><![CDATA[Domino]]></category>
  792. <category><![CDATA[low-code]]></category>
  793. <category><![CDATA[XPages]]></category>
  794. <guid isPermaLink="false">http://xpage.me/?p=1311</guid>
  795.  
  796. <description><![CDATA[Does the Flexible View Control for XPages support column totals?  Absolutely!]]></description>
  797. <content:encoded><![CDATA[
  798. <p>When building Views in the Notes Client adding totals to one or more columns is a pretty common occurrence.  </p>
  799.  
  800.  
  801.  
  802. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2020/12/notes-column-totals.png"><img loading="lazy" width="301" height="311" data-attachment-id="1314" data-permalink="https://xpage.me/notes-column-totals/" data-orig-file="https://xpagedotme.files.wordpress.com/2020/12/notes-column-totals.png" data-orig-size="301,311" 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="notes-column-totals" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2020/12/notes-column-totals.png?w=290" data-large-file="https://xpagedotme.files.wordpress.com/2020/12/notes-column-totals.png?w=301" src="https://xpagedotme.files.wordpress.com/2020/12/notes-column-totals.png?w=301" alt="" class="wp-image-1314" srcset="https://xpagedotme.files.wordpress.com/2020/12/notes-column-totals.png 301w, https://xpagedotme.files.wordpress.com/2020/12/notes-column-totals.png?w=145 145w, https://xpagedotme.files.wordpress.com/2020/12/notes-column-totals.png?w=290 290w" sizes="(max-width: 301px) 100vw, 301px" /></a></figure>
  803.  
  804.  
  805.  
  806. <p>Does the Flexible View Control for XPages support column totals?  Absolutely!</p>
  807.  
  808.  
  809.  
  810. <h3 class="wp-block-heading">As usual, the power is in the View Definition</h3>
  811.  
  812.  
  813.  
  814. <p>The Flexible View Control provides two options for displaying totals in View columns:</p>
  815.  
  816.  
  817.  
  818. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2020/12/view-definition-totals-options.png"><img loading="lazy" width="1024" height="76" data-attachment-id="1316" data-permalink="https://xpage.me/view-definition-totals-options/" data-orig-file="https://xpagedotme.files.wordpress.com/2020/12/view-definition-totals-options.png" data-orig-size="1412,105" 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="view-definition-totals-options" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2020/12/view-definition-totals-options.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2020/12/view-definition-totals-options.png?w=590" src="https://xpagedotme.files.wordpress.com/2020/12/view-definition-totals-options.png?w=1024" alt="" class="wp-image-1316" srcset="https://xpagedotme.files.wordpress.com/2020/12/view-definition-totals-options.png?w=1024 1024w, https://xpagedotme.files.wordpress.com/2020/12/view-definition-totals-options.png?w=150 150w, https://xpagedotme.files.wordpress.com/2020/12/view-definition-totals-options.png?w=300 300w, https://xpagedotme.files.wordpress.com/2020/12/view-definition-totals-options.png?w=768 768w, https://xpagedotme.files.wordpress.com/2020/12/view-definition-totals-options.png 1412w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>
  819.  
  820.  
  821.  
  822. <p><strong>Total Rows</strong></p>
  823.  
  824.  
  825.  
  826. <p>This option simply does what you would expect &#8211; totals the number of rows.  This is equivalent to creating a column in a View, hard coding a &#8216;1&#8217; for the value, and telling the column to total the values.  Another advantage of the Flexible View Control &#8230; <span style="text-decoration:underline;">there is no need to create a special column to display the total rows and no need to worry about selecting the &#8216;hide detail rows&#8217; option to hide all those 1s in your View</span>.  Instead, simply pick any column, turn on <strong>Total Rows</strong>, and the total will display at the bottom of that column.</p>
  827.  
  828.  
  829.  
  830. <p><strong>Total Values</strong></p>
  831.  
  832.  
  833.  
  834. <p>Again, this option does exactly what you would expect it to do and adds up the value contained in each row and displays the total in the footer at the bottom of the View.</p>
  835.  
  836.  
  837.  
  838. <h3 class="wp-block-heading">Building  A Demo</h3>
  839.  
  840.  
  841.  
  842. <p>To get started with a demo for this post I created brand spanking new View Definition called <strong><a rel="noreferrer noopener" href="http://demos.xpage.me/demos/datatables-xpages-bootstrap.nsf/adminViewDefinitionDoc.xsp?documentId=A8468ACF59B31CAF0525863700082A71&amp;action=editDocument" target="_blank">wilmington-de-totals</a></strong>, pointed it to the same View in the Used Cars database I&#8217;ve used for most of the other demos, and selected all of the data columns. To show <strong>Total Rows</strong>, I select that checkbox for the MILEAGE column and to show <strong>Total Values</strong>, the PRICE column.</p>
  843.  
  844.  
  845.  
  846. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2020/12/wilmington-de-totals.png"><img loading="lazy" width="1024" height="153" data-attachment-id="1318" data-permalink="https://xpage.me/wilmington-de-totals/" data-orig-file="https://xpagedotme.files.wordpress.com/2020/12/wilmington-de-totals.png" data-orig-size="1417,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="wilmington-de-totals" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2020/12/wilmington-de-totals.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2020/12/wilmington-de-totals.png?w=590" src="https://xpagedotme.files.wordpress.com/2020/12/wilmington-de-totals.png?w=1024" alt="" class="wp-image-1318" srcset="https://xpagedotme.files.wordpress.com/2020/12/wilmington-de-totals.png?w=1024 1024w, https://xpagedotme.files.wordpress.com/2020/12/wilmington-de-totals.png?w=150 150w, https://xpagedotme.files.wordpress.com/2020/12/wilmington-de-totals.png?w=300 300w, https://xpagedotme.files.wordpress.com/2020/12/wilmington-de-totals.png?w=768 768w, https://xpagedotme.files.wordpress.com/2020/12/wilmington-de-totals.png 1417w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption>View Definition demonstrating Total Rows and Total Values</figcaption></figure>
  847.  
  848.  
  849.  
  850. <p class="info_box">See the demo: <a href="http://demos.xpage.me/demos/datatables-xpages-bootstrap.nsf/viewGeneral.xsp?viewdef=wilmington-de-totals&amp;key=city:Wilmington:state:DE" target="_blank" rel="noreferrer noopener">http://demos.xpage.me/demos/datatables-xpages-bootstrap.nsf/viewGeneral.xsp?viewdef=wilmington-de-totals&amp;key=city:Wilmington:state:DE</a></p>
  851.  
  852.  
  853.  
  854. <figure class="wp-block-image size-large"><a href="http://demos.xpage.me/demos/datatables-xpages-bootstrap.nsf/viewGeneral.xsp?viewdef=wilmington-de-totals&amp;key=city:Wilmington:state:DE" target="_blank"><img loading="lazy" width="1024" height="477" data-attachment-id="1320" data-permalink="https://xpage.me/total-rows-total-values/" data-orig-file="https://xpagedotme.files.wordpress.com/2020/12/total-rows-total-values.png" data-orig-size="1429,666" 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="total-rows-total-values" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2020/12/total-rows-total-values.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2020/12/total-rows-total-values.png?w=590" src="https://xpagedotme.files.wordpress.com/2020/12/total-rows-total-values.png?w=1024" alt="" class="wp-image-1320" srcset="https://xpagedotme.files.wordpress.com/2020/12/total-rows-total-values.png?w=1024 1024w, https://xpagedotme.files.wordpress.com/2020/12/total-rows-total-values.png?w=150 150w, https://xpagedotme.files.wordpress.com/2020/12/total-rows-total-values.png?w=300 300w, https://xpagedotme.files.wordpress.com/2020/12/total-rows-total-values.png?w=768 768w, https://xpagedotme.files.wordpress.com/2020/12/total-rows-total-values.png 1429w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>
  855.  
  856.  
  857.  
  858. <p class="info_box"><strong>Did you notice &#8230;</strong> the total value displayed in the PRICE column is formatted as currency to match the data type of the values in the individual rows.</p>
  859.  
  860.  
  861.  
  862. <p>An argument could be made that the Total Rows option is not needed since we have the DataTables info box in the bottom left corner.  However, the Flexible View Control has a custom property that controls whether the info section is displayed, or not.  So some may opt to turn it off and display the total rows under a column.</p>
  863.  
  864.  
  865.  
  866. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2020/12/view-definition-showinfo-false.png"><img loading="lazy" width="873" height="325" data-attachment-id="1322" data-permalink="https://xpage.me/view-definition-showinfo-false/" data-orig-file="https://xpagedotme.files.wordpress.com/2020/12/view-definition-showinfo-false.png" data-orig-size="873,325" 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="view-definition-showinfo-false" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2020/12/view-definition-showinfo-false.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2020/12/view-definition-showinfo-false.png?w=590" src="https://xpagedotme.files.wordpress.com/2020/12/view-definition-showinfo-false.png?w=873" alt="" class="wp-image-1322" srcset="https://xpagedotme.files.wordpress.com/2020/12/view-definition-showinfo-false.png 873w, https://xpagedotme.files.wordpress.com/2020/12/view-definition-showinfo-false.png?w=150 150w, https://xpagedotme.files.wordpress.com/2020/12/view-definition-showinfo-false.png?w=300 300w, https://xpagedotme.files.wordpress.com/2020/12/view-definition-showinfo-false.png?w=768 768w" sizes="(max-width: 873px) 100vw, 873px" /></a><figcaption>custom properties of the Flexible View Control</figcaption></figure>
  867.  
  868.  
  869.  
  870. <p>Here&#8217;s what it looks like:</p>
  871.  
  872.  
  873.  
  874. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2020/12/info-box-turned-off.png"><img loading="lazy" width="1024" height="89" data-attachment-id="1323" data-permalink="https://xpage.me/info-box-turned-off/" data-orig-file="https://xpagedotme.files.wordpress.com/2020/12/info-box-turned-off.png" data-orig-size="1036,91" 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="info-box-turned-off" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2020/12/info-box-turned-off.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2020/12/info-box-turned-off.png?w=590" src="https://xpagedotme.files.wordpress.com/2020/12/info-box-turned-off.png?w=1024" alt="" class="wp-image-1323" srcset="https://xpagedotme.files.wordpress.com/2020/12/info-box-turned-off.png?w=1024 1024w, https://xpagedotme.files.wordpress.com/2020/12/info-box-turned-off.png?w=1013 1013w, https://xpagedotme.files.wordpress.com/2020/12/info-box-turned-off.png?w=150 150w, https://xpagedotme.files.wordpress.com/2020/12/info-box-turned-off.png?w=300 300w, https://xpagedotme.files.wordpress.com/2020/12/info-box-turned-off.png?w=768 768w, https://xpagedotme.files.wordpress.com/2020/12/info-box-turned-off.png 1036w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption>View with showInfo=false</figcaption></figure>
  875.  
  876.  
  877.  
  878. <h3 class="wp-block-heading">What About Filtering?</h3>
  879.  
  880.  
  881.  
  882. <p>What happens if you enter a value in the search box and filter the view based on that value?  The totals displayed reflect the filtered value.  In the example below, I searched for all of the Land Rovers.  The total PRICE contains values only for the Land Rovers, as does the Total Rows displayed under the MILEAGE column.</p>
  883.  
  884.  
  885.  
  886. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2020/12/totals-land-rover.png" target="_blank"><img loading="lazy" width="1024" height="474" data-attachment-id="1327" data-permalink="https://xpage.me/totals-land-rover/" data-orig-file="https://xpagedotme.files.wordpress.com/2020/12/totals-land-rover.png" data-orig-size="1425,661" 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="totals-land-rover" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2020/12/totals-land-rover.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2020/12/totals-land-rover.png?w=590" src="https://xpagedotme.files.wordpress.com/2020/12/totals-land-rover.png?w=1024" alt="" class="wp-image-1327" srcset="https://xpagedotme.files.wordpress.com/2020/12/totals-land-rover.png?w=1022 1022w, https://xpagedotme.files.wordpress.com/2020/12/totals-land-rover.png?w=150 150w, https://xpagedotme.files.wordpress.com/2020/12/totals-land-rover.png?w=300 300w, https://xpagedotme.files.wordpress.com/2020/12/totals-land-rover.png?w=768 768w, https://xpagedotme.files.wordpress.com/2020/12/totals-land-rover.png 1425w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption>The totals columns reflect totals only for the filtered value</figcaption></figure>
  887.  
  888.  
  889.  
  890. <h3 class="wp-block-heading">Category Totals</h3>
  891.  
  892.  
  893.  
  894. <p>One of the great, unique features of Notes Views is the ability to have total columns in a categorized View and display totals for each category in addition to the full column total.  With the Flexible View Control, when either of the totals options is enabled, categorized Views will also display the totals for each category by default:</p>
  895.  
  896.  
  897.  
  898. <figure class="wp-block-image size-large"><a href="http://demos.xpage.me/demos/datatables-xpages-bootstrap.nsf/viewGeneral.xsp?viewdef=wilmington-de-category-totals&amp;key=city:Wilmington:state:DE" target="_blank"><img loading="lazy" width="1024" height="479" data-attachment-id="1330" data-permalink="https://xpage.me/totals-categories/" data-orig-file="https://xpagedotme.files.wordpress.com/2020/12/totals-categories.png" data-orig-size="1419,665" 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="totals-categories" data-image-description="" data-image-caption="&lt;p&gt;Flexible View Control for XPages demonstrating category totals&lt;/p&gt;
  899. " data-medium-file="https://xpagedotme.files.wordpress.com/2020/12/totals-categories.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2020/12/totals-categories.png?w=590" src="https://xpagedotme.files.wordpress.com/2020/12/totals-categories.png?w=1024" alt="" class="wp-image-1330" srcset="https://xpagedotme.files.wordpress.com/2020/12/totals-categories.png?w=1022 1022w, https://xpagedotme.files.wordpress.com/2020/12/totals-categories.png?w=150 150w, https://xpagedotme.files.wordpress.com/2020/12/totals-categories.png?w=300 300w, https://xpagedotme.files.wordpress.com/2020/12/totals-categories.png?w=768 768w, https://xpagedotme.files.wordpress.com/2020/12/totals-categories.png 1419w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption>click to see this demo live</figcaption></figure>
  900.  
  901.  
  902.  
  903. <p class="info_box">See the demo: <a href="http://demos.xpage.me/demos/datatables-xpages-bootstrap.nsf/viewGeneral.xsp?viewdef=wilmington-de-category-totals&amp;key=city:Wilmington:state:DE" target="_blank" rel="noreferrer noopener">http://demos.xpage.me/demos/datatables-xpages-bootstrap.nsf/viewGeneral.xsp?viewdef=wilmington-de-category-totals&amp;key=city:Wilmington:state:DE</a></p>
  904.  
  905.  
  906.  
  907. <h3 class="wp-block-heading">Summary</h3>
  908.  
  909.  
  910.  
  911. <p>Organizations that have been Notes/Domino shops and start to move their apps off of the Notes Client and into the browser still expect some of the standard functionality provided by Notes Views.  The Flexible View Control for XPages strives to meet those expectations and also to exceed them by providing additional functionality that we, as developers, were not able to provide for our users within the Notes Client.  </p>
  912.  
  913.  
  914.  
  915. <p>In the next blog post we will take the Totals functionality a step further and mash it up with the Category Renderer functionality from a previous post to show how to create richer Views for our users.</p>
  916. ]]></content:encoded>
  917. <wfw:commentRss>https://xpage.me/2020/12/07/flexible-view-control-for-xpages-adding-column-totals/feed/</wfw:commentRss>
  918. <slash:comments>1</slash:comments>
  919. <media:thumbnail url="https://xpagedotme.files.wordpress.com/2020/12/totals-categories.png" />
  920. <media:content url="https://xpagedotme.files.wordpress.com/2020/12/totals-categories.png" medium="image">
  921. <media:title type="html">totals-categories</media:title>
  922. </media:content>
  923.  
  924. <media:content url="https://2.gravatar.com/avatar/5e530dc565f6909565e3feac2cd429f9966665fea35985b40194a74c665bcd86?s=96&#38;d=identicon&#38;r=G" medium="image">
  925. <media:title type="html">stellandev</media:title>
  926. </media:content>
  927.  
  928. <media:content url="https://xpagedotme.files.wordpress.com/2020/12/notes-column-totals.png?w=301" medium="image" />
  929.  
  930. <media:content url="https://xpagedotme.files.wordpress.com/2020/12/view-definition-totals-options.png?w=1024" medium="image" />
  931.  
  932. <media:content url="https://xpagedotme.files.wordpress.com/2020/12/wilmington-de-totals.png?w=1024" medium="image" />
  933.  
  934. <media:content url="https://xpagedotme.files.wordpress.com/2020/12/total-rows-total-values.png?w=1024" medium="image" />
  935.  
  936. <media:content url="https://xpagedotme.files.wordpress.com/2020/12/view-definition-showinfo-false.png?w=873" medium="image" />
  937.  
  938. <media:content url="https://xpagedotme.files.wordpress.com/2020/12/info-box-turned-off.png?w=1024" medium="image" />
  939.  
  940. <media:content url="https://xpagedotme.files.wordpress.com/2020/12/totals-land-rover.png?w=1024" medium="image" />
  941.  
  942. <media:content url="https://xpagedotme.files.wordpress.com/2020/12/totals-categories.png?w=1024" medium="image" />
  943. </item>
  944. <item>
  945. <title>Flexible View Control for XPages &#8211; Category Renderers</title>
  946. <link>https://xpage.me/2020/12/02/flexible-view-control-for-xpages-category-renderers/</link>
  947. <comments>https://xpage.me/2020/12/02/flexible-view-control-for-xpages-category-renderers/#comments</comments>
  948. <dc:creator><![CDATA[michaelgsmith]]></dc:creator>
  949. <pubDate>Wed, 02 Dec 2020 04:19:47 +0000</pubDate>
  950. <category><![CDATA[Bootstrap]]></category>
  951. <category><![CDATA[DataTables]]></category>
  952. <category><![CDATA[Domino]]></category>
  953. <category><![CDATA[JavaScript]]></category>
  954. <category><![CDATA[low-code]]></category>
  955. <category><![CDATA[XPages]]></category>
  956. <guid isPermaLink="false">http://xpage.me/?p=1257</guid>
  957.  
  958. <description><![CDATA[Technically speaking, Category Renderers are not the same as standard DataTable Renderers.  But the concept is the same - taking a data input and altering the output that is presented to the user.]]></description>
  959. <content:encoded><![CDATA[
  960. <h3 class="wp-block-heading">What is a Renderer?</h3>
  961.  
  962.  
  963.  
  964. <p>In the DataTables world, &#8220;Renderers&#8221; play an important role in creating the visual representation of a table.  In fact, behind the scenes the Flexible View Control uses Renderers to display all of the data in a View.  In the future, I will be posting about creating custom renderers to further enhance the Flexible View Control, but this post focuses on &#8220;Category Renderers&#8221; in keeping with the category/subcategory theme of recent posts.</p>
  965.  
  966.  
  967.  
  968. <p>Technically speaking, <strong>Category Renderers</strong> are not the same as standard DataTable Renderers.  But the concept is the same &#8211; taking a data input and altering the output that is presented to the user.</p>
  969.  
  970.  
  971.  
  972. <h3 class="wp-block-heading">Building a Category Renderer Demo</h3>
  973.  
  974.  
  975.  
  976. <p>Let&#8217;s pick up where we left off in the previous post with our <a rel="noreferrer noopener" href="http://demos.xpage.me/demos/datatables-xpages-bootstrap.nsf/viewCategories.xsp?viewdef=ferraris-subcategorized&amp;key=make:ferrari" target="_blank">subcategory demo</a>.  I made a copy of the View Definition used in this demo and called it <a rel="noreferrer noopener" href="http://demos.xpage.me/demos/datatables-xpages-bootstrap.nsf/adminViewDefinitionDoc.xsp?documentId=ED5454B1027FE4860525862E004E9227&amp;action=editDocument" target="_blank">ferraris-category-renderer</a>.  Take look at the MODEL column:</p>
  977.  
  978.  
  979.  
  980. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2020/11/model-category-1.png"><img loading="lazy" width="1024" height="73" data-attachment-id="1265" data-permalink="https://xpage.me/model-category-1/" data-orig-file="https://xpagedotme.files.wordpress.com/2020/11/model-category-1.png" data-orig-size="1416,102" 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="model-category-1" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2020/11/model-category-1.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2020/11/model-category-1.png?w=590" src="https://xpagedotme.files.wordpress.com/2020/11/model-category-1.png?w=1024" alt="" class="wp-image-1265" srcset="https://xpagedotme.files.wordpress.com/2020/11/model-category-1.png?w=1024 1024w, https://xpagedotme.files.wordpress.com/2020/11/model-category-1.png?w=1013 1013w, https://xpagedotme.files.wordpress.com/2020/11/model-category-1.png?w=150 150w, https://xpagedotme.files.wordpress.com/2020/11/model-category-1.png?w=300 300w, https://xpagedotme.files.wordpress.com/2020/11/model-category-1.png?w=768 768w, https://xpagedotme.files.wordpress.com/2020/11/model-category-1.png 1416w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption>Adding a Category Renderer to a View Definition</figcaption></figure>
  981.  
  982.  
  983.  
  984. <p>Underneath the category checkbox is another checkbox labeled &#8220;Renderer&#8221;.  Clicking this reveals a pop-up window:</p>
  985.  
  986.  
  987.  
  988. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2020/11/model-category-renderer-popup.png"><img loading="lazy" width="427" height="191" data-attachment-id="1267" data-permalink="https://xpage.me/model-category-renderer-popup/" data-orig-file="https://xpagedotme.files.wordpress.com/2020/11/model-category-renderer-popup.png" data-orig-size="427,191" 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="model-category-renderer-popup" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2020/11/model-category-renderer-popup.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2020/11/model-category-renderer-popup.png?w=427" src="https://xpagedotme.files.wordpress.com/2020/11/model-category-renderer-popup.png?w=427" alt="" class="wp-image-1267" srcset="https://xpagedotme.files.wordpress.com/2020/11/model-category-renderer-popup.png 427w, https://xpagedotme.files.wordpress.com/2020/11/model-category-renderer-popup.png?w=150 150w, https://xpagedotme.files.wordpress.com/2020/11/model-category-renderer-popup.png?w=300 300w" sizes="(max-width: 427px) 100vw, 427px" /></a></figure>
  989.  
  990.  
  991.  
  992. <p>In this box I can enter a function string without parameters in the same way that callback functions are configured in the FVC custom properties.  If a value exists in this box, then after the categories are drawn in the DataTable, the dom element for each MODEL category row is passed into the function defined in the category renderer box:</p>
  993.  
  994.  
  995. <div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate">
  996. // does this group need a renderer?
  997. if (o.columnCategory&#91;x].categoryRenderer != null &amp;&amp; o.columnCategory&#91;x].categoryRenderer != &quot;&quot; ) {
  998.  
  999. $('.group-'+o.columnCategory&#91;x].itemName).each(function() {
  1000.  
  1001. var fnstring = o.columnCategory&#91;x].categoryRenderer;
  1002. if ((typeof fnstring) == &quot;undefined&quot; || fnstring == null) {
  1003. return;
  1004. }
  1005. if (fnstring.indexOf('.') &gt; -1) {
  1006. var fn = window.getFunctionFromString(fnstring);
  1007. } else {
  1008. var fn = window&#91;fnstring];
  1009. }
  1010. // is object a function?
  1011. if (typeof fn === &quot;function&quot;)  {
  1012. fn(this);
  1013. } else {
  1014. console.log(&quot;renderer error&quot;)
  1015. return;
  1016. }
  1017. });
  1018. }
  1019. </pre></div>
  1020.  
  1021.  
  1022. <p>In the screen below I&#8217;ve entered a function name into the category renderer box.  This is just a client-side JavaScript function that lives in a demos script library.  </p>
  1023.  
  1024.  
  1025.  
  1026. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2020/11/model-category-renderer-fn.png"><img loading="lazy" width="358" height="181" data-attachment-id="1270" data-permalink="https://xpage.me/model-category-renderer-fn/" data-orig-file="https://xpagedotme.files.wordpress.com/2020/11/model-category-renderer-fn.png" data-orig-size="358,181" 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="model-category-renderer-fn" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2020/11/model-category-renderer-fn.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2020/11/model-category-renderer-fn.png?w=358" src="https://xpagedotme.files.wordpress.com/2020/11/model-category-renderer-fn.png?w=358" alt="" class="wp-image-1270" srcset="https://xpagedotme.files.wordpress.com/2020/11/model-category-renderer-fn.png 358w, https://xpagedotme.files.wordpress.com/2020/11/model-category-renderer-fn.png?w=150 150w, https://xpagedotme.files.wordpress.com/2020/11/model-category-renderer-fn.png?w=300 300w" sizes="(max-width: 358px) 100vw, 358px" /></a></figure>
  1027.  
  1028.  
  1029.  
  1030. <h3 class="wp-block-heading">Category Renderers are JavaScript functions</h3>
  1031.  
  1032.  
  1033.  
  1034. <p>Starting simple, I&#8217;m just going to change the font for the MODEL category row.  *Technically* this should be done with CSS instead of a renderer, but it&#8217;s fine for a simple example:</p>
  1035.  
  1036.  
  1037. <div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate">
  1038. model_renderer : function(_this) {
  1039. // _this is the row dom element
  1040. console.log('category renderer')
  1041. $(_this).css({
  1042. 'font-family':'Oswald',
  1043. 'font-size':'1.25em'
  1044. })
  1045. }
  1046. </pre></div>
  1047.  
  1048.  
  1049. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2020/11/model-category-post-renderer.png"><img loading="lazy" width="931" height="395" data-attachment-id="1274" data-permalink="https://xpage.me/model-category-post-renderer/" data-orig-file="https://xpagedotme.files.wordpress.com/2020/11/model-category-post-renderer.png" data-orig-size="931,395" 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="model-category-post-renderer" data-image-description="" data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2020/11/model-category-post-renderer.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2020/11/model-category-post-renderer.png?w=590" src="https://xpagedotme.files.wordpress.com/2020/11/model-category-post-renderer.png?w=931" alt="" class="wp-image-1274" srcset="https://xpagedotme.files.wordpress.com/2020/11/model-category-post-renderer.png 931w, https://xpagedotme.files.wordpress.com/2020/11/model-category-post-renderer.png?w=150 150w, https://xpagedotme.files.wordpress.com/2020/11/model-category-post-renderer.png?w=300 300w, https://xpagedotme.files.wordpress.com/2020/11/model-category-post-renderer.png?w=768 768w" sizes="(max-width: 931px) 100vw, 931px" /></a><figcaption>Changing the font of the top-level category with a renderer</figcaption></figure>
  1050.  
  1051.  
  1052.  
  1053. <p>A more practical use for the category renderer is to manipulate the dom node for the category.  For this next example I&#8217;m going to wrap the category value in a Bootstrap label:</p>
  1054.  
  1055.  
  1056. <div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate">
  1057. model_renderer : function(_this) {
  1058. // _this is the row dom node
  1059. $(_this).css({
  1060. 'font-family':'Oswald',
  1061. 'font-size':'1.25em'
  1062. });
  1063. // add a Bootstrap label
  1064. var v = $('.group_value',$(_this)).text();
  1065. $(_this).find('.group_value').addClass("label label-success")
  1066. }
  1067. </pre></div>
  1068.  
  1069.  
  1070. <p class="info_box"><strong>Checkout the demo:</strong> <a href="http://demos.xpage.me/demos/datatables-xpages-bootstrap.nsf/viewCategories.xsp?viewdef=ferraris-category-renderer&amp;key=make:ferrari" target="_blank" rel="noreferrer noopener">http://demos.xpage.me/demos/datatables-xpages-bootstrap.nsf/viewCategories.xsp?viewdef=ferraris-category-renderer&amp;key=make:ferrari</a></p>
  1071.  
  1072.  
  1073.  
  1074. <figure class="wp-block-image size-large"><a href="https://xpagedotme.files.wordpress.com/2020/11/model-category-post-renderer-label.png"><img loading="lazy" width="912" height="413" data-attachment-id="1275" data-permalink="https://xpage.me/model-category-post-renderer-label/" data-orig-file="https://xpagedotme.files.wordpress.com/2020/11/model-category-post-renderer-label.png" data-orig-size="912,413" 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="model-category-post-renderer-label" data-image-description="&lt;p&gt;Using a Category Renderer to spiffy up a View&lt;/p&gt;
  1075. " data-image-caption="" data-medium-file="https://xpagedotme.files.wordpress.com/2020/11/model-category-post-renderer-label.png?w=300" data-large-file="https://xpagedotme.files.wordpress.com/2020/11/model-category-post-renderer-label.png?w=590" src="https://xpagedotme.files.wordpress.com/2020/11/model-category-post-renderer-label.png?w=912" alt="" class="wp-image-1275" srcset="https://xpagedotme.files.wordpress.com/2020/11/model-category-post-renderer-label.png 912w, https://xpagedotme.files.wordpress.com/2020/11/model-category-post-renderer-label.png?w=150 150w, https://xpagedotme.files.wordpress.com/2020/11/model-category-post-renderer-label.png?w=300 300w, https://xpagedotme.files.wordpress.com/2020/11/model-category-post-renderer-label.png?w=768 768w" sizes="(max-width: 912px) 100vw, 912px" /></a><figcaption>Wrapping the category with a Bootstrap label</figcaption></figure>
  1076.  
  1077.  
  1078.  
  1079. <h3 class="wp-block-heading">Summary</h3>
  1080.  
  1081.  
  1082.  
  1083. <p>In summary, Category Renderers can be a valuable, low-code tool that adds functionality to Views created with the Flexible View Control for XPages and provide a more rich experience for your users.</p>
  1084. ]]></content:encoded>
  1085. <wfw:commentRss>https://xpage.me/2020/12/02/flexible-view-control-for-xpages-category-renderers/feed/</wfw:commentRss>
  1086. <slash:comments>1</slash:comments>
  1087. <media:thumbnail url="https://xpagedotme.files.wordpress.com/2020/12/category-renderer-featured-image.png" />
  1088. <media:content url="https://xpagedotme.files.wordpress.com/2020/12/category-renderer-featured-image.png" medium="image">
  1089. <media:title type="html">category renderer featured image</media:title>
  1090. </media:content>
  1091.  
  1092. <media:content url="https://2.gravatar.com/avatar/5e530dc565f6909565e3feac2cd429f9966665fea35985b40194a74c665bcd86?s=96&#38;d=identicon&#38;r=G" medium="image">
  1093. <media:title type="html">stellandev</media:title>
  1094. </media:content>
  1095.  
  1096. <media:content url="https://xpagedotme.files.wordpress.com/2020/11/model-category-1.png?w=1024" medium="image" />
  1097.  
  1098. <media:content url="https://xpagedotme.files.wordpress.com/2020/11/model-category-renderer-popup.png?w=427" medium="image" />
  1099.  
  1100. <media:content url="https://xpagedotme.files.wordpress.com/2020/11/model-category-renderer-fn.png?w=358" medium="image" />
  1101.  
  1102. <media:content url="https://xpagedotme.files.wordpress.com/2020/11/model-category-post-renderer.png?w=931" medium="image" />
  1103.  
  1104. <media:content url="https://xpagedotme.files.wordpress.com/2020/11/model-category-post-renderer-label.png?w=912" medium="image" />
  1105. </item>
  1106. </channel>
  1107. </rss>
  1108.  

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