How to sort a pages field by date?

The CMS Questions
1

Hi there,

on my site I have a bunch of projects. For each project I would like my user to be able to choose to let it appear in the gallery or/and to appear in the calendar section.

So I thought I go with two pages fields, one for each purpose. That works kind of, but in the calendar pages field I would like to sort the projects automatically by a date field on the project page? Is there any way to do this?

Thanks!

2

At first, you should use a date field like that:

fields:
  published:
    label: Published on
    type: date
    default: today

After that, you can get projects by sorted date like that:

foreach(page('projects')->children()->sortBy('published', 'desc') as $project) {
    // todo
}
3

No, I am not talking about sorting in the frontend, rather I need to sort a pages field in the panel.

1 Like
5 
query: page.children.sortBy('date', 'desc')

That will sort the pages by date. Additionally, you can add the date as info in the select field:

query: page.children.sortBy('date', 'desc')
info: "{{ page.date.toDate('Ymd') }}"
1 Like
6

That only sorts them in the selection dialog. I actually need to have them sorted in the resulting list (and therefore need to disable manual sorting, but I could do that via some custom panel CSS, if necessary).

1 Like
7

There doesnā€™t seem to be a setting to set sortable to false. CSS would be an option, yes.

8

Disabling the sorting is not really my main issue. My main issue is how to sort the resulting list (not the selection dialog) by a (date) field.

9

If you sort them in the dialog, they should come out sorted in the resulting list, donā€™t they? At least they do in my test.

10

Ok, I only tested this with a title field now (but I guess it should work the same), hereā€™s the issue:

  1. I click select and select ā€œProject Bā€ and hit OK, ā€œProject Bā€ gets listed.
  2. I click select again and now select ā€œProject Aā€ and hit OK. ā€œProject Aā€ now gets listed below ā€œProject Bā€ because it was added last, although according to my sorting idea it should automatically placed above ā€œProject Bā€.

So unless I am misunderstanding you, I donā€™t think the list entries come out sorted exactly like in the list.

11

Ok, true, that only works if you select them all at once.

12

Which is not how I intend the panel field to be used. I wonder what else I can do?
I guess I need to sort them via a hook and then rewrite the pages field somehow, maybe?

13

The problem is probably that the field stores stuff in the content file. You could use a hook that sorts them after saving. Donā€™t know if it would work with a before hook as well. But the best solution would probably be a custom field.

14

Is there any documentation on how to create a custom field? That sounds like it might be above my skill level.

15

But you need some Vue.js to create a custom field (or any Panel extension because the Panel is based on Vue.js)

Maybe it would be enough to make a copy of the field and change the way it displays the list.

16

That looks like itā€™s out of my comfort zone.

What would be the problem with hooks, though?

17

I didnā€™t say it was a problem, but they only work when the user interacts with the page, i.e. stores the stuff, before that, nothing will happen.

Edit: I see you have already created an ideas issue:

18

So you mean there is no hook that gets fired when they fill the pages field, but only one when they save the page. Did I get this right?

19

Thatā€™s exactly what I meant.

20

Ok, thanks. I will look into these options and will see what would be my best bet in this scenario. I donā€™t feel comfortable using Vue, but if I find time I will look at the video tutorials. I think it would make for a good new feature though, thatā€™s why I created the idea issue. If anyone comes accross this, feel free to upvote the issue, if you also think the feature would make sense. :slight_smile:

21

Done.

1 Like