Blueprint designer

Kirby 2 Solved ✅
1

Is there a simple way to design a new blueprint from within the panel by mouse click/drag and drop and so on? What one might call a graphical designer for blueprints.

2

Something like that does not exist. What would be your use case? A blueprint without a template that renders the field content does not make much sense.

3

You are right, I confused the terms. My use case is this:
My panel users should be able to design an input form that is served to the public. So they need to be able to define the kind of html input field that should be displayed in the template. E.g. one text input for first name, one text input for last name, one for a date, one for an input type checkbox where the options can be specified.
Ideally a layout could be given too, like 1/3, 1/4 of one row and so on.
So that’s what they would be able to choose in the panel in a newly created page. How can I design a blueprint, to make that happen? I was thinking about a structure field that keeps the input field type info, which is then rendered in the template.

4

That’s a perfect use case for the Kirby Page Builder.

I recently built a form builder with it, too. The layout option you mentioned would also be no problem.

form.gif656×837 531 KB

1 Like
5

Would you be willing to share a code example?

6

I’ve used Global Field Definitions for most fields, but here’s the builder field:

label:              Formularfelder
type:               builder
modalsize:          large
fieldsets:
  input:
    label:          Textfeld
    entry:          <strong>{{label}}</strong>
    fields:
      feldname:     feldname
      label:        label
      placeholder:  placeholder
      beinhaltet:   beinhaltet
      required:     required
  textarea:
    label:        Mehrzeiliges Textfeld
    entry:        <strong>{{label}}</strong>
    fields:
      feldname:     feldname
      label:        label
      placeholder:  placeholder
      required:     required
  checkbox:
    label:        Checkbox
    entry:        <strong>{{label}}</strong>
    fields:
      feldname:     feldname
      label:
        extends:    label
        width:      1
      required:     required
  text:
    label:        Textblock
    entry:        {{text}}
    fields:
      text:
        label:    Text
        type:     textarea
        buttons:
         - bold
         - italic
         - olist
         - ulist
  submit:
    entry:        <strong>{{label}}</strong>
    label:        Absenden-Button
    fields:
      label:
        extends:    label
        width:      1

It’s really simple. The fields themselves are self-explanatory.

What’s more complex is the actual template/snippet. I used Uniform for the form handling, but it would definitely work with the core Kirby mailer, too. It looks something like that:

(...)

<?php
foreach($page->formularfelder()->toStructure() as $feld):
$feldname = $feld->feldname()->value();
?>

<? if($feld->_fieldset() != "text" && $feld->_fieldset() != "submit"): ?>
<label for="<?= $page->slug()."-form-" . $feld->feldname() ?>" ><?= $feld->label() ?>
<? endif ?>

<? if($feld->_fieldset() == "input"): ?>

<!-- INPUT... -->
<input type="text" name="<?= $feldname ?>" id="<?= $page->slug()."-form-" . $feldname ?>" value="<?php $form->echoValue($feldname) ?>" <? if($feld->required() == "true"): ?>required<? endif ?> placeholder="<?= $feld->placeholder() ?>"/>
<!-- ...INPUT -->

if($feld->_fieldset() == "textarea"): ?>

<!-- TEXTAREA... -->
<textarea name="<?= $feldname ?>"   id="<?= $page->slug()."-form-".  $feldname ?>" <? if($feld->required() == "true"): ?>required<? endif ?> placeholder="<?= $feld->placeholder() ?>"></textarea>
<!-- ...TEXTAREA -->

<? elseif($feld->_fieldset() == "checkbox"): ?>

<!--CHECKBOX...-->
<input type="checkbox" name="<?= $feldname ?>" id="<?= $page->slug()."-form-".  $feldname ?>" value="Ja" <? if($feld->required() == "true"): ?>required<? endif ?>/>
<!--...CHECKBOX-->

<? elseif($feld->_fieldset() == "text"): ?>

<!--TEXT...-->
<?= $feld->text()->kt() ?>
<!--...TEXT-->

<? elseif($feld->_fieldset() == "submit"): ?>

<!--SUBMIT...-->
<button type="submit" class="submit" name="_submit" value="<?php echo $form->token() ?>"><?= $feld->label()->or("Absenden") ?></button>
<!--...SUBMIT-->

<? endif ?>

(...)

I tried to clean it up as good as possible, if you have any questions just ask.

7

Just what I needed. Thanks!