Panel views

Views are the building blocks of the Panel. While the Panel is very extensible already with fields and sections, you might reach the point where you need your own dedicated space in the Panel - or where you might want to replace an existing view.

With a Panel view plugin you can build your own stand-alone view, that is just accessible via link, located in the main menu or replaces an existing default view.

Such Panel views can maybe contain just some static documentation for the project, but can also be extended to highly interactive Vue applications. Think about an integrated task management system, a newsletter tool, a form builder, an ERM system or more. It's all up to your imagination and project specs.

What makes a Panel view plugin?

PHP code for the REST API: index.php
Vue code for the Panel: index.js
Optional CSS: index.css

PHP definition

Unless you want to extend other parts of the Panel, a custom view does not require any specific PHP code. But you still have to create an index.php for it to be fully registered.

/site/plugins/todos/index.php

<?php

Kirby::plugin('yourname/todos', []);

Vue component

Custom views mainly live in the index.js file. Think of them as their own little Vue application.

/site/plugins/todos/index.js

panel.plugin("yourname/todos", {
  views: {
    todos: {
      label: "Todos",
      icon: "list-bullet",
      component: {
        template: `
          <k-view class="k-todos-view">
            <k-header>
                Todos
            </k-header>

            <!-- your app goes here -->

          </k-view>
        `
      }
    }
  }
});

If you've never worked with Vue before, you should really check out their docs.

The template code of your custom view can make use of all our components from our Panel UI Kit. No need to re-invent the wheel for custom elements like buttons, dialogs and so much more.

Your plugin will be available at https://your-site.com/panel/plugins/todos.

Options

Option	Default	Description
`component`		Vue component definition for the view
`icon`	`page`	Set icon to use in UI. Choose from these.
`menu`	`true`	Whether to show custom view in Panel menu, see below
`label`		Label for menu item in Panel menu

Since 3.5.5

The menu option can have the values true (always active), false (no menu item) or "disabled" (disabled menu item, e.g. if the user doesn't have enough permissions).

You can also define the option as a function that receives the app object for dynamic control:

/site/plugins/todos/index.js

panel.plugin("yourname/todos", {
  views: {
    todos: {
      label: "Todos",
      icon: "list-bullet",
      menu(app) {
        if (app.$permissions["yourname.todos"].access !== true) {
          return "disabled";
        }

        return true;
      },
      component: ...
    }
  }
});

CSS styles

If you need additional styling for your view, you can create an index.css and add your CSS there.

/site/plugins/todos/index.css

.k-todos-view {
  /* add your css rules */
}

Override default views

Since 3.2.0

You can override Kirby's default panel views by replacing the view components with your own Vue component.

/site/plugins/my-panel-views/index.js

panel.plugin("my/view-plugin", {
  components: {
    "k-users-view": {
      // your Vue component code goes here.
    }
  }
});

You can replace the following components:

k-browser-view
k-login-view (better use the Panel login extension)
k-installation-view
k-site-view
k-file-view
k-page-view
k-settings-view
k-users-view
k-user-view

The Panel views are often very complex. If you want to replace them without losing features, check out the orginal source code for each component. You can find them on GitHub.

More information

Check out the following cookbook recipe to learn more:

My first Panel view