Dynamic update of Page Collection results with Sort/Filter user settings

Support
#1

Hello everybody,

New to Grav here and looking for some guidance before getting too far into custom theme development.

The site I’m working on includes pages for Employees, Blog and News, which should be straightforward to build with Modular and/or Collection Pages. However for better UX, I’d also like to include the following functionality:

  1. Dynamically update Collection results (without page refresh), based on sort and filter options selected by the user.
    Example:

    • Sort by: First Name or Last Name; and
    • Filter by: Show All (default), Team 1, Team 2, Team 3, etc.

  2. Pass specific sort/filter settings when linking to a Collection page (from elsewhere on the site)
    Example:

    • Link to Employees page and View the members of Team 1, sorted by Last Name.

Is this functionality possible (or practical) with Grav? If someone could steer me in the right direction (especially with examples), it would be greatly appreciated!

In addition… When searching through the Forum, I found an old thread which suggested using CSS to show/hide results. While this may be a possibility, I’m leaning towards keeping the logic within the page templates or a plugin if possible.

Thanks in advance!

#2

I have not tried this yet but maybe you could wrap the twig code for your data inside of a table and use a data table to display, sort and filter the data.

I have done something similar a few times in wordpress.

#3

Hi Tom, thanks for the tip. Not sure if it’s the same idea, but I ended up posting the question on the Discord server and was given the following advice:

  • Create a JSON version of a template
  • Have Javascript call the same page (ie. /my/collection), only it will target the JSON template (/my/collection.json) with any parameter needed. This will in turn load collection.json.twig where sorting/filter/paginating can be handled.

Still need to wrap my head around all this (lots to learn with JS), but maybe it will help someone else out there.

#4

Additionally, here are some examples provided on Discord for the JSON approach noted above.

JSON template format:

Example of Ajax communication with Grav:

Note: This example is for submitting a form via AJAX and isn’t what’s needed. However I was told that the JS portion of it will be very similar.

Page Collections manipulations:

#5

@eyewinder, Would you mind sharing…

  • Who will be managing/updating the employee data?
    • Should it be done using a form in the browser?
    • Should it be done from within Admin?
    • Or can a ‘power’ user edit flat-file(s)?
  • How many employees are there approximately?
    • Can the browser hold all employees and filter/sort in memory?
    • Or is the data too large and should it be fetched from the server each time?
  • Where/how you are going to store the employees?
    • A page per employee?
    • In json/yaml data files?
    • Sql perhaps?
#6

Hi @pamtbaau, thanks for your reply.

Regarding your questions:

  • Who will be managing/updating the employee data?
    • It will be done either by a ‘power’ user, or possibly via the admin by an experienced user.
  • How many employees are there approximately?
    • To start, I’m expecting about 20-25 employees, but it could increase to 50+ if management decides to include all staff in future. Currently, only key staff will be included.
    • Not sure what would be considered ‘too large’ in this case. The individual ‘bio’ pages will likely contain 250-500 words (spread over various fields), but the Collection page will only need to display a limited subset of the data (ie. first name, last name, job title, minimal metadata, and thumbnail image path).
  • Where/how you are going to store the employees?
    • The plan is to store each employee as a separate page.

As mentioned earlier, I’m also looking to use a similar dynamic setup for the Blog and News landing pages. The plan is to have a monthly feature blog article and news entries are expected to be periodic as well. Both of these landing pages should keep the displayed results to a reasonable number (probably 10-15 entries max). Does this sound possible with the same basic approach as the Employees section?

Thanks

#7

@eyewinder,

  1. Dynamically filtering collection
    Collections defined in a page can automagically be filtered using parameters in the url. E.g. <a href="/tag:photography">photography</a>. You can see this in action in the ‘Blog Site’ skeleton. This requires a re-load of the page though.

    If you want to fetch a JSON object with a new collection of pages using an async request (Ajax/Fetch), you will need some javascript to submit the request and a plugin that captures the request and perform the filtering/sorting in PHP and return a JSON object containing the relevant data. The javascript submitting the request will then receive the json and update the page. This isn’t that hard to do.

  2. Pass specific sort/filter settings when linking to a Collection page
    You can reuse the same plugin as above and add some login depending on its POST parameters. It’s like an API you call. Based on the parameters it can create any collection dynamically with filters and sorting on the fly. Collections can be a combination of any or multiple page sets from anywhere in the site, based on a multitude of filters.

    See Collections in general and Programmatic Collections specifically for an example of creating a collection.

Storage
I think using a page per Employee would be the easiest approach. You should create a blueprint to define an entry form in Admin with which employees can be created/updated. This makes maintenance of employees quite easy.

So far, I see no roadblocks in Grav for the requirements you have presented. Yes it does require some javacript and php but nothing too difficult. For a dev that is…

If you have more questions please don’t hesitate to ask…

1 Like
#8

Many thanks @pamtbaau for the detailed overview!

Good to know there aren’t any technical roadblocks with Grav. I’m the only dev on this project, so I expect a bunch of JS, AJAX, JSON reading will be required…

Thinking I’ll focus on getting the collections working correctly (filtering with the url parameters), and then tackle the dynamic enhancements down the road.

Thanks again!