Reuters tutorial: step 5

Table of Contents

• Reuters tutorial
• Step 1: Talk to Solr
• Step 2: Add a results widget
• Step 3: Add a pager widget
• Step 4: Add a tagcloud widget
• Step 5: Display the current filters
• Step 6: Add a free-text widget
• Step 7: Add an autocomplete widget
• Step 8: Add a map widget
• Step 9: Add a calendar widget
• Step 10: Extra credit

We’ve been through the steps for creating a new widget twice now, so without further ado:

Create a new widget CurrentSearchWidget.js:

(function ($) {
AjaxSolr.CurrentSearchWidget = AjaxSolr.AbstractWidget.extend({
});
})(jQuery);

Add the JavaScript file:

<script src="widgets/CurrentSearchWidget.js"></script>

And add an instance of the widget to the Manager in reuters.js:

Manager.addWidget(new AjaxSolr.CurrentSearchWidget({
  id: 'currentsearch',
  target: '#selection',
}));

Now, let’s implement afterRequest to display the current filters:

start: 0,

afterRequest: function () {
  var self = this;
  var links = [];

  var q = this.manager.store.get('q').val();
  if (q != '*:*') {
    links.push($('<a href="#"></a>').text('(x) ' + q).click(function () {
      self.manager.store.get('q').val('*:*');
      self.doRequest();
      return false;
    }));
  }

  var fq = this.manager.store.values('fq');
  for (var i = 0, l = fq.length; i < l; i++) {
    links.push($('<a href="#"></a>').text('(x) ' + fq[i]).click(self.removeFacet(fq[i])));
  }

  if (links.length) {
    var $target = $(this.target);
    $target.empty();
    for (var i = 0, l = links.length; i < l; i++) {
      $target.append($('<li></li>').append(links[i]));
    }
  }
  else {
    $(this.target).html('<li>Viewing all documents!</li>');
  }
},

removeFacet: function (facet) {
  var self = this;
  return function () {
    if (self.manager.store.removeByValue('fq', facet)) {
      self.doRequest();
    }
    return false;
  };
}

The above afterRequest method collects all the fq parameter values using the ParameterStore values API method. For each parameter value, it creates a link displaying the parameter value which, when clicked, removes the parameter value (using the ParameterStore removeByValue API method) and sends a request to Solr. If any links were created, it displays the links. It performs a similar operation for the q parameter which we will introduce in the next step. If no links were created, it displays the text “Viewing all documents!”

(The removeFacet method is necessary to work around JavaScript closures.)

Lastly, let’s add a link to remove all current filters. Add the following snippet before if (links.length) { ...:

if (links.length > 1) {
  links.unshift($('<a href="#"></a>').text('remove all').click(function () {
    self.manager.store.get('q').val('*:*');
    self.manager.store.remove('fq');
    self.doRequest();
    return false;
  }));
}

If more than one link was created, it creates a link displaying the words “remove all,” which, when clicked, removes all fq parameters (using the ParameterStore remove API method) and sends a request to Solr.

[What we have so far]

Now that we have filters, let’s add a free-text widget to finish the basics.