anchor.diff:                      <spring:message var="searchButtonText" code="search" />
                       <input class="button primary btn" type="submit" value="${searchButtonText}" />
   
  -                    <portlet:renderURL var="cancelUrl">
  -                        <portlet:param name="execution" value="${flowExecutionKey}"/>
  -                        <portlet:param name="_eventId" value="cancel"/>
  -                    </portlet:renderURL>
                       <a class="button btn" href="${ cancelUrl }">
                           <spring:message code="cancel" />
                       </a>
  
positive.code: --%>
  
  <%@ include file="/WEB-INF/jsp/include.jsp"%>
  
  <portlet:actionURL var="selectPersonUrl" escapeXml="false">
      <portlet:param name="execution" value="${flowExecutionKey}" />
      <portlet:param name="_eventId" value="select"/>
      <portlet:param name="username" value="USERNAME"/>
  </portlet:actionURL>
  <c:set var="n"><portlet:namespace/></c:set>
  
  <!-- Portlet -->
  <div id="${n}" class="fl-widget portlet prs-lkp view-lookup" role="section">
  
  	<!-- Portlet Titlebar -->
      <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
          <h2 class="title" role="heading"><spring:message code="search.for.users" /></h2>
      </div>
  
negative.code:             <div class="titlebar">
                  <h3 role="heading" class="title">Search Results</h3>
              </div>
                  <table id="${n}resultsTable" class="portlet-table table table-bordered table-hover" style="width:100%;">
                      <thead>
                          <tr>
                              <th><spring:message code="name"/></th>
                              <th><spring:message code="username"/></th>
                          </tr>
                      </thead>
                  </table>
          </div>
  
      </div>
  </div>
  
  <script type="text/javascript">
  up.jQuery(function() {
      var $ = up.jQuery;
  
      var attrs = ${up:json(queryAttributes)};
      var personList_configuration = {
          column: {
              name: 0,
              username: 1
          },
          main: {
              table : null,
              pageSize: 10
          }
      };
      // Url generating helper functions
      var getSelectPersonURL = function(displayName, userName) {
          var url = '${selectPersonUrl}'.replace("USERNAME", userName);
          return '<a href="' + url + '">' + displayName + '</a>';
      };
      var showSearchResults = function (queryData) {
          personList_configuration.main.table = $("#${n}resultsTable").dataTable({
              iDisplayLength: personList_configuration.main.pageSize,
              aLengthMenu: [5, 10, 20, 50],
              bServerSide: false,
              sAjaxSource: '<c:url value="/api/people.json"/>',
              sAjaxDataProp: "people",
              bDeferRender: false,
              bProcessing: true,
              bAutoWidth:false,
              sPaginationType: 'full_numbers',
              oLanguage: {
                  sLengthMenu: '<spring:message code="datatables.length-menu.message" htmlEscape="false" javaScriptEscape="true"/>',
                  oPaginate: {
                      sPrevious: '<spring:message code="datatables.paginate.previous" htmlEscape="false" javaScriptEscape="true"/>',
                      sNext: '<spring:message code="datatables.paginate.next" htmlEscape="false" javaScriptEscape="true"/>'
                  }
              },
              aoColumns: [
                  { mData: 'attributes.displayName', sType: 'string', sWidth: '50%' },  // Name
                  { mData: 'attributes.username', sType: 'string', sWidth: '50%' }  // User Name 
              ],
              fnInitComplete: function (oSettings) {
                  personList_configuration.main.table.fnDraw();
              },
              fnServerData: function (sUrl, aoData, fnCallback, oSettings) {
                  oSettings.jqXHR = $.ajax({
                      url: sUrl,
                      data: queryData,
                      dataType: "json",
                      cache: false,
                      type: oSettings.sServerMethod,
                      success: function (json) {
                          if (json.sError) {
                              oSettings.oApi._fnLog(oSettings, 0, json.sError);
                          }
  
                          $(oSettings.oInstance).trigger('xhr', [oSettings, json]);
                          fnCallback(json);
                      },
                      error: function (xhr, error, thrown) {
                          lib.handleError(xhr, error, thrown);
                      }
                  });
              },
              fnInfoCallback: function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
                  var infoMessage = '<spring:message code="datatables.info.message" htmlEscape="false" javaScriptEscape="true"/>';
                  var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
                  infoMessage = infoMessage.replace(/_START_/g, iStart).
                                        replace(/_END_/g, iEnd).
                                        replace(/_TOTAL_/g, iTotal).
                                        replace(/_CURRENT_PAGE_/g, iCurrentPage);
                  return infoMessage;
              },
              // Add links to the proper columns after we get the data
              fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                  // Create links to user
                  $('td:eq(0)', nRow).html( getSelectPersonURL(aData.attributes.displayName, aData.attributes.username) );
                  $('td:eq(1)', nRow).html( getSelectPersonURL(aData.attributes.username, aData.attributes.username) );
              },
              // Setting the top and bottom controls
              sDom: 'r<"row alert alert-info view-filter"<"dataTables-inline"W><"dataTables-inline dataTables-right"l><"dataTables-inline dataTables-right"i><"dataTables-inline dataTables-right"p>><"row"<"span12"t>>>'
          });
          $("#${n}searchResults").show();
      };
  
      $(document).ready(function(){
          $("#${n}searchForm").submit(function() {
              var queryData = { searchTerms: [] };
              var searchTerm = $("#${n}queryValue").val();
              var queryTerm = $("#${n}queryAttribute").val();
  
              // if no search term present do not submit form
              if (searchTerm.length == 0) {
                  $("#${n}searchResults").hide();
                  return false;
              }
  
              if (!queryTerm) {
                  $(attrs).each(function (idx, attr) {
                      queryData.searchTerms.push(attr);
                      queryData[attr] = searchTerm;
                  });
              } else {
                  queryData.searchTerms.push(queryTerm);
                  queryData[queryTerm] = searchTerm;
              }
              // To allow the datatable to be repopulated to search multiple times
              // clear and destroy the original
              if (personList_configuration.main.table != undefined && typeof personList_configuration.main.table.fnClearTable !== 'undefined') {
                  $("#${n}searchResults").hide();
                  personList_configuration.main.table.fnClearTable();
                  personList_configuration.main.table.fnDestroy();
              }
              showSearchResults(queryData);
              return false;
          }); 
      });
  });
  </script>
  </div>
  