Text area plugin: Page picker dialog

The CMS Questions
1

Hi,
I’m trying to create a simple button for a textarea where it bring the page selection dialog, in which i can pick a page that has a specific template.
The point is to insert these pages in a text field, style them in the textarea and display them in the page with a specific formatting.

I’m already looking at Textarea buttons | Kirby CMS
with the dialog option.

This is what I came up with so far, but I don’t seem to be able to bring the page selection dialog.

panel.plugin("wb/page-picker", {
  textareaButtons: {
    pagepicker: {
      label: "Insert a page»,
      icon: "page",
      click: function () {
        this.command("dialog", "k-page-picker», () => {
        });
      },
    },
  },
});

The page is greyed, but no matter what i try, nothing like the page-picker appears.
Is it the good way to start? I’m feeling quite lost here.
Thanks.

2

This is the code triggered by this.command("dialog"):

You see how it puts together the actual component name, which clashes with what you are trying to do. Instead of this.command, you will have to call this.$panel.dialog.open directly yourself.

3

Thanks for your reply,
It brings me to finally displaying the pages-dialog and I’m now able request the pages on my website. But I’m not able to properly display their title?

panel.plugin("wb/page-picker", {
  textareaButtons: {
    pagepicker: {
      label: "Insert a page",
      icon: "page",
      click: function () {
        const textarea = this.$el.nextElementSibling;

        this.$panel.dialog.open({
          component: "k-pages-dialog",
          props: {
            endpoint: "site/children?select=id,title,template,uuid"
          },
        });
      },
    },
  },
});

image
image926×1348 22 KB

Thanks.

4

site/children?select=id,title,template,uuid won’t work - that’s not the data the pages dialog needs. You will have to familiarize yourself in detail with k-pages-dialog (and in turn k-models-dialog) for the frontend and the page field for the backend side - which will lead you to the Kirby\Cms\PagePicker and Kirby\Cms\Picker classes (especially the ::toArray() methods will show what data is passed to the Vue component). You’ll likely need a custom API endpoint.