Skip to content

Kirby 4.1.2

Panel search

Panel areas also allow you to add your own search type to the Panel - next to pages, files and users - or even to overwrite these existing search implementations.

Site area
return [
    'label' => 'Site',
    ...
    'dialogs' => ...
    'views' => ...
    // set the default search type
    'search' => 'pages',
    // define new search endpoints
    'searches' => [
        'pages' => [
                    'label'  => 'Pages',
                    'icon'   => 'page',
                    'query'  => function (string $query, int $limit = 10) {
            $results = [];
            $pages   = site()->search($query)->limit($limit);

            foreach ($pages as $page) {
                $results[] = [
                    'text'  => $page->title()->value(),
                    'link'  => $page->panel()->url(),
                    'info'  => $page->id(),
                    'image' => $page->panel()->image()
                ];
            }

            return $results;
        }
    ]
];

In Vue, the search can then be exectued like this:

const results = await this.$search('pages');

Search results

A Panel search extension returns results as a simple array with parameters for each item:

Parameter Type Description
image array Optional image settings
icon string The name of the option icon
info string Optional info text on the right
link string The url/path which will be visited on click
text string The label for the search result

Custom search type

That's all it takes to create your own search index for your own plugins:

Kirby::plugin('your-plugin/todos', [
    'areas' => [
        'todos' => [
            ...
            'searches' => [
                'todos' => [
                    'label' => 'Todos',
                    'icon'  => 'check',
                    'query' => function () {
                        // search for $todos here.
                        $results = [];

                        foreach ($todos as $todo) {
                            $results[] = [
                                'image' => [ // optional image settings ],
                                'text'  => $todo->text(),
                                'link'  => '/todos/' . $todo->id(),
                                'info'  => 'Get it done!'
                            ];
                        }

                        return $results;
                    }
                ]
            ]
        ]
    ]
]);

The search will automatically appear in the search dialog, but can also be run manually from your Vue components with …

const query = 'Searchy search';
const todos = await this.$search('todos', query);

Extending default search types

You don't like the way the pages search works? Maybe you already have your data in Elastic search or Algolia and you want to use a real search server instead? No problem. It's now super easy to extend and overwrite our core searches.

<?php

Kirby::plugin('example/search', [
  'areas' => [
    // extending a core search
    'site' => function ($kirby) {
      return [
        'searches' => [
          'pages' => [
            'query' => function (string $query) {
              // run your own search here ...

              // example result
              return [
                [
                  'image' => [
                    'src'   => 'https://source.unsplash.com/random',
                    'cover' => true,
                    'back'  => 'white'
                  ],
                  'text'  => 'Test Result',
                  'link'  => '/site',
                  'info'  => 'test info'
                ]
              ];
            }
          ]
        ]
      ];
    },
  ]
]);

Reusing core code

When you plan to extend a search, you might want to fall back to Kirby's core behaviour in some cases. This can be done by loading the core code:

<?php

Kirby::plugin('example/search', [
  'areas' => [
    // extending a core search
    'site' => function ($kirby) {
      return [
        'searches' => [
          'pages' => [
            'query' => function (string $query) use ($kirby) {

              if ($kirby->user()->isAdmin()) {
                // return super secret search results for the admin
              }

              return $kirby->core()->area('site')['searches']['pages']['query']($query);
            }
          ]
        ]
      ];
    },
  ]
]);

Core searches

Area Search name
site pages
site files
users users