JPList tips

Strange or no JpList filter results

A. HTML Errors

When you experience strange or no results of your filters, please make sure you don't have any HTML errors in your modules template. Especially when using JPList to filter data that's rendered server-side (without WebApi callbacks) one HTML error can lead to very strange filtering results.

B. Wrong field assignments in index.json

index.json can be used to set what fields should be indexed. (for the module internal Lucene index)
Especially when you base one template off another, this can lead to renamed fields not being indexed and thus not "working" as a filter for jplist or any other JS based filtering using webapi calls.

Using JpList Text Search with a complex data schema

When you try to add a client side JpList Text Filter like this:

<input data-path=".title" class="form-control textfilter"
 type="text"
 value=""
 placeholder="Filter op Titel of Persoon"
 data-control-type="textbox"
 data-control-name="Title,People.Name"
 data-control-action="filter" 
 data-event-name="keydelay" />

The attribute; "data-control-name" controls what fields to Search in.
But by default Open Content will not find anything for the "People.Name" field
The reason for this is that Open Content will only index "root items" (for it's own internal Lucene index).
If you want data on another level to be indexed, you have to check the "index" box in the Builder for that field and the other fields you want to get indexed. If you do that Open Content will create a index.json file with what fields to index.

🚧

Make sure all Fields used by JpList for filtering are marked as "index" or items might not show up (in a list view).
You should also not forget to index the dedicated fields "publishstartdate, publishenddate and publishstatus" if you are using them.

📘

The mentioned Lucene index not related to the DNN Search index.

How to improve the JPList textbox search experience?

When using a JPList textbox searchbox we advise you to improve the autocomplete experience by following these steps:

1. Add data-event-name="keydelay" attribute to input tag
2. Add "textfilter" class to input tag
3. Load the example javascript, on document ready, that you find here

<input data-path=".title" class="form-control textfilter"
        type="text"
        value=""
        placeholder="Filter by Title"
        data-control-type="textbox"
        data-control-name="Title"
        data-control-action="filter"
        data-event-name="keydelay"       />

var isTyping = false;
var typingHandler = null;
var $textfilter = $(".textfilter", this);

$textfilter.on('input', function(context){
  if (isTyping) {
    window.clearTimeout(typingHandler);
  }
  else {
    isTyping = true;
  }

  typingHandler = window.setTimeout(function () {
    isTyping = false;
    $textfilter.trigger("keydelay");
  }, 1000);
});

// Block Enter key on Search field
$textfilter.keydown(function(event){
	if(event.keyCode == 13) {
	  event.preventDefault();
	  return false;
	}
  });

This will delay the Search API call so the results make more sense when typing and it will block the [ENTER] key on the field (which will otherwise reset the search results).

Upgrading JPlist and using other filter controls

When you use JPList with a client side template, you should realise that Open Content has the needed AJAX calls built in.
These are defined here: https://github.com/sachatrauwaen/OpenContent/blob/master/OpenContent/Components/JPList/JplistQueryBuilder.cs

This also means that you cannot simply upgrade the JPList JS files as the defined calls are liked to the JSList version. So unless you define your own calls, you cannot upgrade JPList to version 5.2 or the latest JQuery less version

Use Vue.js instead of JpList for filtering

As JPlist seems to be abandoned by the original developer, the "new" way to create similar filters is by using VUE.js.
An example can be found here: https://github.com/sachatrauwaen/OpenContent-Templates2/tree/main/Articles