Display custom (generated) form data in panel

Kirby 3 Solved ✅
1

I’m using the fantastic new panel in Kirby 3 paired with Kirby Builder to generate create custom forms that can be added to pages. I’m able to post the data to the controller to sanitize the data. That part is working great! Here’s a screenshot for context…

image
image3050×1768 264 KB

I’d like to create sub-pages for the originating form that contain the form data that was submitted. In playing with a randomly generated form I seem to have a few issues that I’ve not been able get working yet.

  1. That “data” list on the right… I would like the most recent (with a link to all of the form data results) of the form data displayed in the sidebar of the form. There is currently 1 sub-page that requires me to select it rather than just displaying a list. What’s the proper way to get a listing of sub-pages?
  2. When I go to that sub-page it’s using the default blueprint because I don’t know what fields the form will have ahead of time so I think I’m not able to display all of the form data. Can anyone think of a good work around for that? Should I generate a form blueprint file for each form to display the data? If so, when would do that in the process? Also what would/should happen to the blueprint if the form is updated?

Any help is appreciated, thanks!

2

That would be a pages section, not a pages field.

Do you have to make these subpages editable? Then yes. You would have to create a blueprint programmatically, then. But it would have to be updated when the form is updated.

3

Ok I was misunderstanding where that needed to be placed. I think that’s fixed even though it’s not showing the 1 child page. Not sure why. :thinking:

12%20PM
12%20PM2966×1736 262 KB

Nope! I just need to display form results somehow. So I shouldn’t need a blueprint then, is that correct?

4

To display the data, you wouldn’t need a blueprint, you could read from file. Maybe display them all in a pagetable underneath the form (rather then using the standard pages section) to kill two birds with one stone (pretty brutal, in Germany we only kill flies)? Don’t know if that plugin needs a blueprint or not.

1 Like
5

@texnixe Pagetable is great and immediate displays the child pages of the form so thanks for recommending it! But once I click on the page to view I’m still met with the default blueprint and none of the form fields that I used to create the page. I didn’t expect it show unknown fields automatically, but I’m still unsure of how to do it.

6

@HYR Maybe remove the links, there is no need to go to these subpages, is there, if all is nicely laid out in the table. Guess you would have to fork and adapt the plugin, so that it just stupidly display the pages without them being accessible as single pages.

7

I could be missing something but here’s an idea:

The form creates a subpage for each entry, right? Then make sure that each subpage gets a form-data template/blueprint.

Use the pages section in the sidebar to show all those subpages

Create a custom section plugin and include that in the form-data blueprint. That section would then display a read-only view of the form data. Thus you would never really need to know what is stored in the form. You could pass all the content of the page to the section component and then style it there a bit.

I hope you understand what I mean.

1 Like
8

@bastianallgeier Sounds like a good idea, was just wondering why it would be necessary to have a single page view for those pages that probably don’t contain a lot of content in the first place. A nice table layout should actually be sufficient. But yes, if there is more data…

9

If you really just need a small table with something like email and name, you could create a custom section for that as well that only handles the table.

1 Like
10

Ok, I created a little proof of concept:

site/plugins/form-data/index.php

<?php

Kirby::plugin('demo/form-data', [
    'sections' => [
        'form-data' => [
            'props' => [
                'content' => function () {
                    return $this->model()->content()->toArray();
                }
            ]
        ],
    ]
]);

site/plugins/form-data/index.js

panel.plugin("demo/form-data", {
  sections: {
    "form-data": {
      data() {
        return {
          content: {}
        };
      },
      created() {
        this.load().then(response => {
          this.content = response.content;
        });
      },
      template: `
        <div>
          <k-headline>Form Data</k-headline>
          <table>
            <tr v-for="(value, key) in content">
              <th>{{ key }}</th>
              <td>{{ value }}</td>
            </tr>
          </table>
        </div>
      `
    }
  }
});

It looks like crap without additional styling but works really well. You would include it in a blueprint like this:

sections:
  content:
    type: form-data
2 Likes
11

@bastianallgeier I was trying form a response to better understand how to go about it, but in the time it took me to even write half of my response you just went ahead and created it!

@texnixe is correct. I don’t need the data to be editable. I just need a simple way to display it. The custom section idea sounds perfect for what I need.

Thanks to both of you! I’ll give this a shot and see how it works. :metal:

12

You should probably add a index.css to my plugin example and create your own styles for the data preview there.

1 Like