Api route inside custom panel section

Kirby 3 Solved ✅
1

In a custom panel Field it was possible to use it’s own api routes for example to send an email. How do you do this in a custom panel section. And is it also possible to get the content of the variables of the current page?

index.php

 <?php
    Kirby::plugin('custom/modified', [
        'sections' => [
            'modified' => [
                'props' => [
                    'headline' => function (string $headline) {
                        return $headline;
                    },
                ],
                'computed' => [
                    'text' => function () { 
                        return 'The page has been modified at ' . $this->model()->modified('d.m.Y H:i:s');
                    }
                ],
                
                'api' => function() {
                    return [
                        [
                            'pattern' => 'send-email',
                            'method' => 'POST',
                            'action' => function () {

                                $address = $this->field()->model()->emailfield()->value();
                                
                                return ['status' => 'success'];
                               
                            }
                        ]
                    ];
                },
                
            ]
        ]
    ]);

index.js

panel.plugin('custom/modified', {
  sections: {
    modified: {
      data: function () {
        return {
          headline: null,
          text: null
        }
      },
      created: function() {
        this.load().then(response => {
          this.headline = response.headline;
          this.text     = response.text;
          this.endpoints = Object;
        });
      },
      methods:{
        sendEmail() {
            this.$api.post(this.endpoints.field + '/send-email')
                .then(function(response) {
                    // do something                        
                    console.log("succes");
                })
                .catch(function(error) {
                    // do something
                    console.log('error');
                });
            }
      },
      template: `
        <section class="k-modified-section">             
          <button class="email-button" @click="sendEmail">Sent mail</button>
                 
          <k-headline>{{ headline }}</k-headline>
          <k-text>{{ text }}</k-text>
        </section>
      `
    }
  }
});
2

Sections seem to be coupled to the API endpoints directly and do not use an endpoints parameter. But you can always define your own route outside the sections definition and call that one instead.

You can access the current form on a page:

computed: {
   id() {
      return this.$store.state.form.current
   },
   pageValues() {
      return this.$store.getters["form/values"](this.id)
   },
}

also updating is possible (read more here)

1 Like
3

Hi, still having problems on this. I want to use $api.post() on a button in my custom panel section, but i don’t know where to place the router endpoints exactly in the plugin to make this work.

folder: my-custom-section

js-file

...
 methods:{
        clickButton() {
            this.$api.post('send-email')             
            .then(function(response) {
                // do something
               console.log(response["status"]);
            })
            .catch(function(error) {
                // do something 
            });
        }
 },
...

php-file

<?php
Kirby::plugin('custom/my-custom-section', [    
    'api' => [
           'routes' => [ 
                [
                  'pattern' => 'send-email',
                  'action'  => function () {
                    return [
                      'status' => 'success'                   
                    ];
                  }
                ]
             ]
    ],
    'sections' => [   
         'my-custom-section' => [

            'props' => [ 
                ...
            ]
        ]
    ]
]);
4

I made it work, i adjusted the PHP file above, if someone needs this.