Possible to pre-populate Page titles?

Is there a way to pre-populate the Page title? I had a look at the page.create:before hook, but this event seems to occur after you click the “Create draft” button in the new page modal.

More specifically, when the user clicks the “Add” page button, I’m hoping to pre-populate the title field (and possibly the slug field) in the new page modal with the current date+time so that they don’t have to add this themselves.

1 Like

Check out this suggestion Hook page.create:before, how to edit user input?

Thanks, I’ll take a look!

Hm, unfortunately that solution seems to behave about the same as page.create:before, so too late (as in, after the modal has been opened). I’ll keep looking…

To understand you correctly: You would like to set a default value for the title field of the create page modal? So that when you open the modal, the field is already pre-filled?

Yes, that is a more concise way of putting it! In my particular case, I was hoping to set the default value to the date+time.

Besides trying to find an appropriate hook, I have tried something along these lines in the blueprint:

fields:
  title:
    label: Title
    type: date
    default: now

This does add the current date as the title, but only after the user has clicked “create draft” in the modal. The modal itself is still empty until the user fills it in.

The other thing I was thinking is that maybe a Section plugin would allow me to modify the “Add” button or modal in some appropriate way? I’m not sure though, to be honest I’m still getting the hang of Kirby 3. Any pointers are very appreciated!

This isn’t possible currently - at least not easily. You could make this suggestion in the ideas repository: https://github.com/getkirby/ideas/issues

You could indeed replace the dialog component (https://github.com/getkirby/kirby/blob/master/panel/src/components/Dialogs/PageCreateDialog.vue). But this is very advanced to be fair and you would need some knowledge of Vue (the Javascript framework on which the Panel is built) for that.

I thought that might be the case, that’s understandable!

One last thought… Would there be a way to change the behaviour of the “add” button itself? So when the user clicks the “Add” button we immediately create a page with “YYYY MM DD HH:MM” title and corresponding slug and redirect the user to that new page (instead of opening the dialog).

I was thinking that this might work if it’s possible to extend the Pages section. I found the /plugins/extensions/sections documentation which feels like a baby step in the right direction, but I’m not sure if it would actually be possible to extend the Pages section specifically (ideally I’d only be replacing the “Add” button behavior).

If this all just sounds like a non-starter to you that’s ok, just want to check!

That could work, still advanced and Vue knowledge needed.
You would need to extend the PagesSection component (https://github.com/getkirby/kirby/blob/master/panel/src/components/Sections/PagesSection.vue) and replace the core one with your custom one. Please note that this would apply to all pages sections, so you would need to take care of differentiating between the ones where you want your custom behavior and the ones where you want the default one.

The good thing is that you would “only” need to replace the action method (https://github.com/getkirby/kirby/blob/master/panel/src/components/Sections/PagesSection.vue#L76-L125), copy over most of it and adapt the create case of the switch statement to your needs.

Awesome, that’s exactly the sort of thing I was looking for. Thank you very much for your help!

If I’m able to get this worked out, I’ll try to update here for anyone else that is interested in something similar.

3 Likes