How to customize/modify the HTML generated by PW?

[Lumi]

I'm new to PW and have just been asked to solve a UX problem on an existing customer installation. There is a Repeater (Version 1.0.6) element (of Youtube videos), and you can arrange them as you see fit, and there is a button at the bottom to add a new video, which happens once a month. The customer is annoyed that the new item is added at the bottom and not at the top. They don't want to have to drag it to the top when the monthly update is due. UX wise, they have a point.

Now, I did find a solution in this forum, which involves CSS to be added to the parent element of all the videos:

element.style {
    display: flex;
    flex-direction: column-reverse;
}

This will put the button at the top and also display the new video at the top as required.

The problem is that there is a <div> element missing as a parent for just the videos.

Now my problem must be one of the most basic problems that there can possibly be in PW:

What are some ways (clean preferred, but will do dirty if necessary) to add this missing wrapper element that will allow me to include the CSS that will solve the problem?

[Lumi]

My post was incomplete. There are two sides to the problem. The customer adds the video in the back office page. The button and the new video appear at the bottom. I don't think this is annoying them. What they disapprove of is the result: The new video is hidden at the bottom of the page where no one ever scrolls to. So each time they add a video they drag it to the top. About two dozen times so far.

I found out (via FTP access) that there is a template file that is responsible for the resulting page as it is displayed to the site's user. I added the CSS and it works fine. So this problem is solved. I only have to flip the order of the two dozen items, reverting the customer's painstaking dragging, because otherwise the oldest video would be at the top.

Still, there might be comments, for example, what element would have been better suited than the repeater to meet the customer's not so unusual need to have the newest item appear at the top …

Edited July 11, 2022 by Lumi

[Gideon So]

Hi @Lumi

You can use the sort function.

https://processwire.com/api/ref/fieldtypes/sort/

Something like the following I believe would work.
 

$your_repeaters = $page->your_repeater_field->sort('created');

foreach($your_repeaters as $your_repeater) {

//Your stuff goes here

}

Gideon

[Lumi]

Thank you, @Gideon So. This does not produce the desired result, neither with "-ctime" nor with "ctime".

The whole point of the Repeater seems to be to arrange the fields via the editor in an arbitrary fashion. Sorting would obviously run counter to that. Maybe that's why it does not take effect in this case.

[bernhard]

9 minutes ago, Lumi said:

The whole point of the Repeater seems to be to arrange the fields via the editor in an arbitrary fashion. Sorting would obviously run counter to that. Maybe that's why it does not take effect in this case.

No. The point about repeaters is to give you the ability to input repeatable content. The sort order in the backend can be but does not have to be the defining factor for the sort order in the frontend. You can either use the sort order of the backend or you can reverse it. Or you can sort by another property (like created timestamp). Or you can filter content etc etc...

$page->your_repeater_field->each('title'); // sort order like in the backend
$page->your_repeater_field->sort('-sort')->each('title'); // reverse sort order
$page->your_repeater_field->sort('-created')->each('title'); // newest first

 

[Robin S]

9 hours ago, Lumi said:

Still, there might be comments, for example, what element would have been better suited than the repeater to meet the customer's not so unusual need to have the newest item appear at the top …

In recent PW versions it's possible to insert new repeater items at any position, so if your customer wants to insert an item at the top they can click the "Insert new item before this one" button on the first repeater item. See the video at the top of this blog post: https://processwire.com/blog/posts/new-repeater-and-repeater-matrix-features/

Though I'm not sure why new repeater items added this way are not expanded when they are added, so I've opened a GitHub issue about it: https://github.com/processwire/processwire-issues/issues/1596

 

 

[Gideon So]

Hi @Lumi

There is no ctime field in processwire. Please follow my example or Bernahrd's example and use created instead.

Gideon

[virtualgadjo]

hi,

just my two cents ?
like @Gideon So says, the created on field in pw is called "created" (you can see this having a look at the bdd tables)
something i often do when i need a peculiar sorting for a repeater is using this famous hook in the site ready.php file

$this->addHookAfter('FieldtypeRepeater::wakeupValue', function($event) {
    $field = $event->arguments('field');
    if($field->name !== 'your_repeater_name') return; // in order to sort only a specific repeater
    $pa = $event->return;
    $pa->sort("sorting_field"); // the field you want the repeater to be sorted by
    $event->return = $pa;
});

this way, the repeater is also sorted the way you want in the admin

in case it may help

have a nice day

[Lumi]

Thank you all for your help. It has solved the problem. The CSS trick works and so does the $repeater->sort('-created') method. I misread 'ctime' for 'created' which is why it didn't take effect at first.

[Lumi]

On 7/12/2022 at 12:10 PM, virtualgadjo said:

$this->addHookAfter('FieldtypeRepeater::wakeupValue', function($event) {
    …
    $pa = $event->return;
    $pa->sort("sorting_field"); // the field you want the repeater to be sorted by
    $event->return = $pa;
});

Thanks. Wondering, though, whether it would be sufficient to just write it in one line as $event->return->sort("sorting_field"). Reassignment in the third line looks redundant to me unless the $event->return does a deep copy. Cannot test this now, will have to make a PW installation I can play with.

HookEvent class - ProcessWire API - This looks like the place it would be documented, but the $event>return method doesn't have a doc page of its own yet.

[virtualgadjo]

Hi @Lumi

you could sure shorten this syntax a bit but honestly, leaving it like this helps me know what i'm playing with, at what moment, and so on, an old habit of creating vars, then assigning them values and finally returning them
so, what does the event return, putting what i need inside and the returning it in... what the event returns ?
in this simple case, a shortened version could stay readable but as soon as you write a bit more complex things shorter often means harder to read, comment and... debug ?

have a nice day