GEEK101 How To Build a
                         Multi-Field Search Page For Your
                         IBM Domino XPages Application
                         Mike McGarel | Collaborative Solutions Developer
                                        Czarnowski Display Services Inc




© 2013 IBM Corporation
Mike McGarel

   Working with web technologies for over 13 years

   Working with Notes/Domino since version 4.6

   Corporate developer


   Site developer for MWLUG and SkiLUG




2   © 2013 IBM Corporation
Searching Can Be Time-Consuming




3   © 2013 IBM Corporation
Multi-Field Searching

   Also known as faceted searching


   Allows user to easily narrow results


   Commonly used on shopping sites


   Many ways to do this with XPages


   Example project on OpenNTF




4   © 2013 IBM Corporation
5   © 2013 IBM Corporation
“Faceted Search with Standby” Project on OpenNTF

   On OpenNTF:
    http://www.openntf.org/internal/home.nsf/project.xsp?
    action=openDocument&name=Faceted%20Search%20with%20Standby

   Components on the XPage
     ─ view panel for search results
     ─ Dojo module for standby image
     ─ search fields and button to trigger the process
     ─ Server-side JavaScript function(s)
     ─ Client-side JavaScript script(s)

   Database is variation of David Leedy's FakeNames.nsf on
    XPagesCheatSheet.com


6   © 2013 IBM Corporation
Server-side JavaScript (SSJS)

function buildPeopleQuery() {
 var sFirst = sessionScope.get("firstValue");
 var sLast = sessionScope.get("lastValue");
 var sState = sessionScope.get("stateValue");
 var sOccupation = sessionScope.get("occupationValue");
 var fieldArray = [];
 if (sFirst != "") { addToQuery(sFirst,"AND",fieldArray,"firstname"); }
 if (sLast != "") { addToQuery(sLast,"AND",fieldArray,"lastname"); }
 if (sState != "") { addToQuery(sState,"AND",fieldArray,"state"); }
 if (sOccupation != "") { addToQuery(sOccupation,"AND",fieldArray,"occupation"); }
 var fieldQuery = "";
 if (fieldArray.length > 0) {
        if (fieldArray.length == 1) {fieldQuery += fieldArray[0]; } else {fieldQuery += "(" + fieldArray.join(" AND ") + ")"; }
  }
 return fieldQuery;
}

function addToQuery(str,connector,targetArray,fieldName) {
       var ret = "";
       if ((fieldName != null) && (fieldName != "")) { ret = "[" + fieldName + "]="; }
       if (@Contains(str, " ")) {
               var arr = str.split(" ");
               targetArray.push(ret + "(" + arr.join(" " + connector + " ") + ")");
       } else {
               targetArray.push("(" + ret + str + ")");
      }
}

7     © 2013 IBM Corporation
Client-side JavaScript for Firefox, Chrome, and Safari

<xp:scriptBlock rendered="#{javascript:!context.getUserAgent().isIE();}">
    <xp:this.value><![CDATA[
         var standby;
         function addStandby() {
             standby = new dojox.widget.Standby({target:'#{id:namesPanel}'});
             document.body.appendChild(standby.domNode);
             standby.startup();
             standby.show();
         }
         function removeStandby() {
             standby.hide();
             dojo.destroy(standby.domNode);
    }]]></xp:this.value>
</xp:scriptBlock>
8   © 2013 IBM Corporation
Client-side JavaScript for Internet Explorer

<xp:scriptBlock rendered="#{javascript:context.getUserAgent().isIE();}">
    <xp:this.value><![CDATA[
         var standby;
         function addStandby() {
             dojo.addClass(dojo.byId('#{id:namesPanel}'),'displayNone');
             dojo.removeClass(dojo.byId('#{id:divProcessing}'),'displayNone');
         }
         function removeStandby() {
             dojo.addClass(dojo.byId('#{id:divProcessing}'),'displayNone');
             dojo.removeClass(dojo.byId('#{id:namesPanel}'),'displayNone');
    }]]></xp:this.value>
</xp:scriptBlock>



9   © 2013 IBM Corporation
Button Code

<xp:link escape="true" text="Update People List" id="linkPeopleList"
    outerStyleClass="lotusBtn" title="Update people list" style="width:80%;">
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="partial" refreshId="namesPanel">
                <xp:this.onStart>
                   <![CDATA[addStandby();]]></xp:this.onStart>
                <xp:this.onComplete>
                   <![CDATA[removeStandby();]]></xp:this.onComplete>
        </xp:eventHandler>
</xp:link>

 




10   © 2013 IBM Corporation
View Panel Setup

    Set search property to function, e.g., “return buildPeopleQuery()”
 

    Set searchExactMatch property to false




11   © 2013 IBM Corporation
Process Flow

 (1)     User enters values in field(s)
 (2)
 (3)     User clicks button to search
 (4)
 (5)     Button triggers AJAX refresh on view panel
 (6)
 (7)     View panel displays search results based on SSJS function
         (if needed, displays “standby” image while processing)
 (8)
 (9) Because search values are kept in sessionScope variables, the same
     results are displayed if user leaves then returns to the page
 

 



12     © 2013 IBM Corporation
13   © 2013 IBM Corporation
XPages Resources

    XPages.Info (http://xpages.info)
    XPages Forum (http://www-10.lotus.com/ldd/xpagesforum.nsf)
    Notes/Domino Application Development Wiki
     (http://www-10.lotus.com/ldd/ddwiki.nsf)
    YouAtNotes XPages wiki (http://www.xpageswiki.com)
    Notes in 9 (http://www.notesin9.com)
    Stack Overflow (http://stackoverflow.com/questions/tagged/xpages)
    Mastering XPages (IBM Press)
    XPages Extension Library (IBM Press)
    XPages Portable Command Guide (IBM Press)




14   © 2013 IBM Corporation
Questions and Evaluations

 Mike McGarel
 Collaborative Solutions Developer
 Czarnowski Display Services Inc
 mcgarelgramming@gmail.com
 www.twitter.com/mmcgarel
 www.bleedyellow.com/blogs/McGarelGramming




                              THANK YOU!


15   © 2013 IBM Corporation
Legal disclaimer

     © IBM Corporation 2013. All Rights Reserved.
      The information contained in this publication is provided for informational purposes only. While efforts were made to
      verify the completeness and accuracy of the information contained in this publication, it is provided AS IS without
      warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and
      strategy, which are subject to change by IBM without notice. IBM shall not be responsible for any damages arising
      out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this
      publication is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its
      suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of
      IBM software.
      References in this presentation to IBM products, programs, or services do not imply that they will be available in all
      countries in which IBM operates. Product release dates and/or capabilities referenced in this presentation may
      change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to
      be a commitment to future product or feature availability in any way. Nothing contained in these materials is
      intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any
      specific sales, revenue growth or other results.
      Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other
      countries, or both.
      All references refer to fictitious companies and persons and are used for illustration purposes only.




16      © 2013 IBM Corporation

How To Build a Multi-Field Search Page For Your XPages Application

  • 1.
    GEEK101 How ToBuild a Multi-Field Search Page For Your IBM Domino XPages Application Mike McGarel | Collaborative Solutions Developer Czarnowski Display Services Inc © 2013 IBM Corporation
  • 2.
    Mike McGarel  Working with web technologies for over 13 years  Working with Notes/Domino since version 4.6  Corporate developer   Site developer for MWLUG and SkiLUG 2 © 2013 IBM Corporation
  • 3.
    Searching Can BeTime-Consuming 3 © 2013 IBM Corporation
  • 4.
    Multi-Field Searching  Also known as faceted searching   Allows user to easily narrow results   Commonly used on shopping sites   Many ways to do this with XPages   Example project on OpenNTF 4 © 2013 IBM Corporation
  • 5.
    5 © 2013 IBM Corporation
  • 6.
    “Faceted Search withStandby” Project on OpenNTF  On OpenNTF: http://www.openntf.org/internal/home.nsf/project.xsp? action=openDocument&name=Faceted%20Search%20with%20Standby  Components on the XPage ─ view panel for search results ─ Dojo module for standby image ─ search fields and button to trigger the process ─ Server-side JavaScript function(s) ─ Client-side JavaScript script(s)  Database is variation of David Leedy's FakeNames.nsf on XPagesCheatSheet.com 6 © 2013 IBM Corporation
  • 7.
    Server-side JavaScript (SSJS) functionbuildPeopleQuery() { var sFirst = sessionScope.get("firstValue"); var sLast = sessionScope.get("lastValue"); var sState = sessionScope.get("stateValue"); var sOccupation = sessionScope.get("occupationValue"); var fieldArray = []; if (sFirst != "") { addToQuery(sFirst,"AND",fieldArray,"firstname"); } if (sLast != "") { addToQuery(sLast,"AND",fieldArray,"lastname"); } if (sState != "") { addToQuery(sState,"AND",fieldArray,"state"); } if (sOccupation != "") { addToQuery(sOccupation,"AND",fieldArray,"occupation"); } var fieldQuery = ""; if (fieldArray.length > 0) { if (fieldArray.length == 1) {fieldQuery += fieldArray[0]; } else {fieldQuery += "(" + fieldArray.join(" AND ") + ")"; } } return fieldQuery; } function addToQuery(str,connector,targetArray,fieldName) { var ret = ""; if ((fieldName != null) && (fieldName != "")) { ret = "[" + fieldName + "]="; } if (@Contains(str, " ")) { var arr = str.split(" "); targetArray.push(ret + "(" + arr.join(" " + connector + " ") + ")"); } else { targetArray.push("(" + ret + str + ")"); } } 7 © 2013 IBM Corporation
  • 8.
    Client-side JavaScript forFirefox, Chrome, and Safari <xp:scriptBlock rendered="#{javascript:!context.getUserAgent().isIE();}"> <xp:this.value><![CDATA[ var standby; function addStandby() { standby = new dojox.widget.Standby({target:'#{id:namesPanel}'}); document.body.appendChild(standby.domNode); standby.startup(); standby.show(); } function removeStandby() { standby.hide(); dojo.destroy(standby.domNode); }]]></xp:this.value> </xp:scriptBlock> 8 © 2013 IBM Corporation
  • 9.
    Client-side JavaScript forInternet Explorer <xp:scriptBlock rendered="#{javascript:context.getUserAgent().isIE();}"> <xp:this.value><![CDATA[ var standby; function addStandby() { dojo.addClass(dojo.byId('#{id:namesPanel}'),'displayNone'); dojo.removeClass(dojo.byId('#{id:divProcessing}'),'displayNone'); } function removeStandby() { dojo.addClass(dojo.byId('#{id:divProcessing}'),'displayNone'); dojo.removeClass(dojo.byId('#{id:namesPanel}'),'displayNone'); }]]></xp:this.value> </xp:scriptBlock> 9 © 2013 IBM Corporation
  • 10.
    Button Code <xp:link escape="true"text="Update People List" id="linkPeopleList" outerStyleClass="lotusBtn" title="Update people list" style="width:80%;"> <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="namesPanel"> <xp:this.onStart> <![CDATA[addStandby();]]></xp:this.onStart> <xp:this.onComplete> <![CDATA[removeStandby();]]></xp:this.onComplete> </xp:eventHandler> </xp:link>  10 © 2013 IBM Corporation
  • 11.
    View Panel Setup  Set search property to function, e.g., “return buildPeopleQuery()”   Set searchExactMatch property to false 11 © 2013 IBM Corporation
  • 12.
    Process Flow (1) User enters values in field(s) (2) (3) User clicks button to search (4) (5) Button triggers AJAX refresh on view panel (6) (7) View panel displays search results based on SSJS function (if needed, displays “standby” image while processing) (8) (9) Because search values are kept in sessionScope variables, the same results are displayed if user leaves then returns to the page   12 © 2013 IBM Corporation
  • 13.
    13 © 2013 IBM Corporation
  • 14.
    XPages Resources  XPages.Info (http://xpages.info)  XPages Forum (http://www-10.lotus.com/ldd/xpagesforum.nsf)  Notes/Domino Application Development Wiki (http://www-10.lotus.com/ldd/ddwiki.nsf)  YouAtNotes XPages wiki (http://www.xpageswiki.com)  Notes in 9 (http://www.notesin9.com)  Stack Overflow (http://stackoverflow.com/questions/tagged/xpages)  Mastering XPages (IBM Press)  XPages Extension Library (IBM Press)  XPages Portable Command Guide (IBM Press) 14 © 2013 IBM Corporation
  • 15.
    Questions and Evaluations Mike McGarel Collaborative Solutions Developer Czarnowski Display Services Inc mcgarelgramming@gmail.com www.twitter.com/mmcgarel www.bleedyellow.com/blogs/McGarelGramming THANK YOU! 15 © 2013 IBM Corporation
  • 16.
    Legal disclaimer © IBM Corporation 2013. All Rights Reserved. The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication, it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results. Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. All references refer to fictitious companies and persons and are used for illustration purposes only. 16 © 2013 IBM Corporation