Liquid sorting web app list items

Question

FIltering is great in Liquid, but sorting the data by custom fields is something which our clients are really asking for.
Trying to say to a client, you can only sort alphabetically etc. is really making BC seem really unfriendly. Please, please, please can this be added or someone show me how this can be achieved without writing hundreds of lines of JavaScript for something which is so rudimentary in other languages / programming systems.

Answer 1

Hope I understand the question correctly.
Are you trying to allow the customer to set the sort order? And/or allow the customer to categories web app items into groups? Or simply, sort the data by a particular custom field, such a category?
Here's a simply solution I've got working: FAQs grouped into categories. I took this one step further and allowed my customers to even edit their categories, but you can hard code this per site if you like.
1) Collect the web app data into collections, so we can sort by custom fields.
{module_webapps render="collection" id="FAQs - Questions" filter="all" hideEmptyMessage="false" sortType="ALPHABETICAL" collection="faqsQuestions" template=""}
{module_webapps render="collection" id="FAQs - Categories" filter="all" hideEmptyMessage="false" sortType="ALPHABETICAL" collection="faqsCategories" template=""}
2) If you want to list all the categories or your custom fields (which are editable by the client in my case):
{% if faqsCategories.items -%}
        <ul class="faq-categories">
{% for category in faqsCategories.items  -%}
            <li><a href="#{{category.name | replace: ' ','-'}}">{{category.name}}</a></li>
{% endfor -%}
        </ul>
{% endif -%}
3) Now display your web app data sorted by custom field type:
{% if faqsCategories.items -%}
{% for category in faqsCategories.items  -%}
            <h2>{{category.name}}</h2>
            <ul id="{{category.name | replace: ' ','-'}}" class="accordion">
{% for question in faqsQuestions.items  -%}
{% if question.Category_id == category.itemID -%}
                <li>
                    <a href="#panel{{question.itemID}}">{{question.name}}</a>
                    <div id="panel{{question.itemID}}" class="content">
{{question.description}}
                    </div>
                </li>
{% endif -%}
{% endfor -%}
            </ul>
{% endfor -%}
{% endif -%}
The above demonstrates how you can sort web app data by a custom field type.
IMO I don't think this is something BC should be expected to produce (but I could be persuaded )
Hope this helps and I hope I did not go on a tangent.
Cheers,
Stepehn