Opening a panel dialog

The CMS Questions
1

Hi there,

I feel a bit stupid asking this, but…

I want to play around with custom dialogs in the panel. I followed this example Panel dialogs | Kirby CMS to define my rudimentary text dialog for my panel area.

And now I have no idea how to open it in the panel. :face_with_spiral_eyes: In my vue component I tried something like:
panel.dialog.open('example/read') and <k-button text="New product" icon="add" @click="$dialog('example/read')" /> (which I found here: Advanced Panel area | Kirby CMS).

Both calls result in Could not find Panel view for route: dialogs/example/read. The network tab shows that the GET request to that route returns an internal server error.

My dialog setup look like this:

'dialogs' => [
      // the key of the dialog defines its routing pattern
      'example/read' => [
          // dialog callback functions
          'load' => function () {
              return [
                  // what dialog component to use
                  'component' => 'k-text-dialog',
                  'props' => [
                      'text' => 'This is a dialog',
                  ]
              ];
          },
          'submit' => function () {
              // create todo
              return true;
          }
      ]
  ]

I bet this is quite obvious and I am missing something, but I wasn’t able to find any information on this.

2

I don’t see anything wrong with what you have here.
This is a minimal reproducible example for a dialog:

  1. have a new kirby installation (to exclude any interference from other plugins or config)
  2. add a plugin like this:
    <?php

use Kirby\Cms\App as Kirby;

Kirby::plugin('mauricehh/test', [
    'areas' => [
        'test' => [
            'dialogs' => [
                // the key of the dialog defines its routing pattern
                'example/read' => [
                    // dialog callback functions
                    'load' => function () {
                        return [
                            // what dialog component to use
                            'component' => 'k-text-dialog',
                            'props' => [
                                'text' => 'This is a dialog',
                            ]
                        ];
                    },
                    'submit' => function () {
                        // create todo
                        return true;
                    }
                ]
            ]
        ]
    ]
]);
  3. login to the panel, open your JS console and write panel.dialog.open('example/read')
  4. The dialog should open

My suspect is that there is something else that causes the error you see in the network request.

3

I tried your code and it worked perfectly.
So I was wondering why my doesn’t and… I just realized I messed with indentation and put my dialog code in the wrong position… didn’t i write I feel stupid asking?

Thank you very much for your quick reply and the example. Without it I wouldn’t have seen this one sus bracket - you probably saved me hours of debugging the wrong code.

4

It’s often useful to organize plugin code in separate files to minimize nesting of brackets, especially in bigger projects.

You could, for example, have this in 3 files:

site/plugins/example-area/index.php:

<?php

use Kirby\Cms\App as Kirby;

Kirby::plugin('mauricehh/test', [
    'areas' => [
        'example' => require __DIR__ . '/areas/example.php'
    ]
]);

site/plugins/example-area/areas/example.php:

<?php 
return [
    'dialogs' => [
        // the key of the dialog defines its routing pattern
        'example/read' => require __DIR__ . '/example/dialogs/read.php'
    ]
];

site/plugins/example-area/areas/example/dialogs/read.php:

<?php
return [
    // dialog callback functions
    'load' => function () {
        return [
            // what dialog component to use
            'component' => 'k-text-dialog',
            'props' => [
                'text' => 'This is a dialog',
            ]
        ];
    },
    'submit' => function () {
        // create todo
        return true;
    }
];
5

Yes, you’re right. I organize my plugins that way, but when trying out stuff, I often start with just a single block of code to get into how things work and as soon as I get the idea I will outsource code into my classes or files. This time it fell on my feet.