Refresh pages list on save

Hi. I’m using a toggle field in combination with a number field on a parent page to generate child pages using the “page.update:after” hook. The child pages get generated perfectly and I can set the toggle back to false easily (which updates automatically on the page view when saved).

The problem is the pages list doesn’t get updated unless I refresh the entire page. Is there any way to refresh the pages list on save without refreshing the entire page?

The frontend is not aware of what is happening on the server. I don’t know how to solve this :thinking:.

I’ve spent the better part of 2 days thinking about this. I’ve never used Vue.js or anything like it before so I’d have to learn that from scratch and I don’t have the time at the moment. I know a custom field (ie. a button field that creates the pages and updates the pages list on click) would probably fix this but I was hoping there was a way that didn’t require me to learn another framework.

Thanks for the input though! Much appreciated.

Yes, I think that would be the right way to solve this.

What is your use case for letting the user create a page by using a toggle field instead of letting the user create a page via the page list?

Just an idea, but maybe it helps: You should be able to create an “invisible” section component which doesn’t outout any HTMl, but listens to those specific changes and then triggers a refetching of the pages data.

It’s for a tracker of sorts where each page is titled based on the date and with a specific slug. Creating it via an automated method (ie. a toggle) allows creation without user input (and therefore possible error) and also means I can create, say, a weeks worth of content with a single click.

It’s one of those issues I’ve struggled with for a long time because Kirby has used the modal dialog to create pages without a way to pre-fill or automate the page creation data.

Thanks @distantnative. That follows the same idea as a custom button. Click the button and it calls the api to create the pages, then refetches the page data.

Problem is I’ve never used or even looked at Vue.js so it’d be a matter of learning that first. Not a big “problem” but just have time constraints that I’d like to avoid by using knowledge I already have if at all possible.