Help with hack to allow sorting of lists by column

Ask the community
1

I’m still struggling with my client who needs column sorting in lists.

You might remember I created a hack for them: hiding and showing list blocks that are configured to sort by different columns.

Unfortunately, the hack doesn’t work well in conjunction with filters, unless I can figure out a way to use custom code to sync the filter settings across the multiple list blocks on the page.

So, two questions:

  1. does Softr dispatch events when list filters are changed? If so, maybe I could listen for them and keep the filters synced that way.

  2. I could probably come up with a much better hack if I could access the ag-grid API, which would involve Softr creating some way that I could access that object on a list block, any chance of this?

2

Artur gave me a clue for a better approach, which is to intercept the XmlHttpRequest for the list data, and change the sorting options before the request is sent to the server.

Here’s some example code that pulls a sort field from the URL querystring and substitutes it into the request for the list data.

<script>
    const urlParams = new URLSearchParams(location.search);
    const sortingField = urlParams.get('sortingField');
    if (sortingField) {
        (function(send) {
              XMLHttpRequest.prototype.send = function() {
                if (typeof arguments[0] === "string") {
                    var b = JSON.parse(arguments[0]);
                    b.sortingOption.sortingField = sortingField;
                    const body = JSON.stringify(b);
                    arguments[0] = body;
                }
                send.apply(this, arguments);
              };
            })(XMLHttpRequest.prototype.send);
    }
</script>

Note that as this code stands, the data will not display if the value of the sortingField querystring parameter is not a valid field name.

1 Like