Calling a function in custom panel field when page is saved?

The CMS Questions
1

Hi, is there a function that can be called in a custom panel section/field when a page has been updated? Thanks

2

You mean a JavaScript event call?

Yes, subscribe to

this.$events.$on(ā€œpage.createā€, this.yourmethodtobecalled)
3

Hi, yes itā€™s a js-event call that i needed. Where do i have to place this piece of code? In the ā€˜mountedā€™ method? In your example you use ā€˜page.createā€™, i presume that i can also call it ā€˜page.updateā€™ . I tried to put this line of code in mij mounted-function, but it doesnā€™t seem to work.

this.$events.$on(ā€œpage.updateā€, this.yourmethodtobecalled)

4

Yes in mounted or created. And put one with $off in the destroyed method.

5

And try model.update

1 Like
6

Yes, ā€˜modelā€™ did the trick!

I have another question about this. I have custom panel field where i preview some textual stuff. But this field always dissapears when i adjust another inputfield on that page. Any idea how this comes?
Now with the model.update i can put the content back. But not when you ā€˜revertā€™ and not save the page. Is there for the ā€˜revertā€™ also a js-event-call?

7

That doesnā€™t sound right in the first place. Letā€™s rather try to get down to the issue than put bandaids on all event calls. Could you share your component code?

8

Hi, here is a stripped version. In mij case the problem is that the ā€˜messageā€™ variable is set to empty when you change any input field on the page.

php

<?php
    Kirby::plugin('custom/preview-lot', [
        'fields' => [
            'preview-lot' => [
                'props' => [
                    'endpoints' => Object
                ],            
                'api' => function() {
                    return [
                        [
                            'pattern' => 'preview-me',
                            'method' => 'POST',
                            'action' => function () {     
                                $currentpage=$this->field()->model();  
                                $html ='preview/calculate some stuff that is on the page or edited on the page';
                                return ['status' => 'success','html' =>$html];
                            }
                        ]
                    ];
                },
            ]
        ]
    ]);

JS

panel.plugin('custom/preview-lot', {
    fields: {
        'preview-lot': {
            props: {
                endpoints: Object, 
                message: String
            },
            mounted: function () {         
                this.doPreview();
                this.$events.$on("model.update", this.updateme);
            },  
            
            methods: { 
                updateme(){
                    this.doPreview();
                },
                doPreview() {                     
                    $me=this;
                    this.$api.post(this.endpoints.field + '/preview-me')
                        .then(function(response) {                         
                            $me.message=response['html'];  
                        })
                        .catch(function(error) {
                            console.log('error'+error);
                        });
                }
            },            
            template: `
            <section>            
                <div class="message" v-html="message"></div> 
            </section>
            `
        }
    } 
});
9

Ok, I think you could get rid of the whole api call and just work with a computed in your PHP definition that gets passed on as a prop to your Vue component.

10

Yes, thatā€™s correct. The reason why i did it that way is that i need to adjust the content of the field when the page updates. Now i have to write the code twice. But now it works without bugs!

I guess it 's not possible to use site(), page(), parent() in the js file (so i still need the api call)?