Skip to content

Dialogs

The new Fiber dialogs are created mainly on the backend. They all reuse the same dialog components.

Component name Usage
k-form-dialog For dialogs with form fields and submit buttons
k-remove-dialog To confirm deleting items
k-text-dialog For dialogs with a custom text message

Dialog setup

Dialogs are defined as a part of areas:

Kirby::plugin('yourname/todos', [
  'areas' => [
    'todos' => function ($kirby) {
      return [
        // ... (see area definiton above)
        'dialogs' => [

          // the key of the dialog defines the dialog routing pattern
          'todos/create' => [
            // the load event is creating a GET route at
            // `/panel/dialogs/{pattern}`;
            // it returns the setup for the dialog, including
            // used component, buttons, props, etc.
            'load' => function () {
              return [
                'component' => 'k-form-dialog',
                'props' => [
                  // field definition for the form dialog
                  'fields' => [ ... ],
                  // the prefilled model data
                  'value' => [ ... ]
                ]
              ]
            },
            // the submit event is creating a POST route at
            // `/panel/dialogs/{pattern}`;
            // the submit button of the dialog is automatically
            // wired to fire the POST request with the form
            // data or whatever data the dialog provides
            'submit' => function () {
              // create todo
              return true;
            }
          ]
        ]
      ]
    };
  ]
];

Submit event responses

The Dialog submit has multiple ways to interact with the component.

return void|null|false

Returning nothing or false is interpreted as a 404. It suggests that the model could not be found.

return true

Returning true is interpreted as a success and will automatically close the dialog.

return [ ... ]

By returning an array, you gain more control of what happens when the dialog closes. You can pass data to the event, dispatch Vuex events and more.

return [
  'event' => 'todo.create',
  'data'  => [
    // some data for the event
  ],
];

throw new Exception

Any exception is interpreted as an error and will show the error message box in the dialog containing the exception message

Panel::go()

You can redirect the Panel to a different location after submitting the dialog by calling:

Panel::go('some/path');