Populate page from fields on web page

[Peter Knight]

Hi guys. I want to learn something new but not sure where to get started or what the technique is even called.

I have a page inside the PW admin with several fields. I'd like to present this fields (not their values) on the front end of a web page.

Populating them (front end) would create a new PW page in the admin with the values etc.

I'll start looking at some kind of form hooked up to the PW API but I wondered if fields such as auto complete and page select were possible or would rely on several 3rd party libraries?

Just looking for point in right direction as opposed to code etc. thanks.

[tpr]

Create a form, set its action to URL where you process the submitted values (here bootstrap PW and save a new page). Then redirect.

You may hardcode form inputs if they don't change often, or pull directly from the given PW age.

I guess you have to manually manage autocompletes and selects.

[Tom.]

if($input->post->submit) {
    $page->of(false);
    foreach($page->fields as $field) {
       if($input->post($field->name)) {
           $page->get($field->name) = $input->post($field->name);
       }
    }
    $page->save();
    $page->of(true);
}

echo "<form method='post' action=''>";
foreach($page->fields as $field) {
    echo "<label for='$field->id'>$field->label</label> <input type='$field->type' name='$field->name' id='$field->id'/>";
}
echo "<input type='submit' value='Submit' name='submit'/>";
echo "</form>";

I have done no testing on this, just writing from the top of my head. The next step would be validation etc. Also many things like Auto-Completes will have to be manually programmed.

[Peter Knight]

Thanks guys. That gives me a direction at least. 

Much appreciated.

[Martijn Geerts]

I want to mention that before you save data

(1) You need to know what the data is.

(2) Know if it is save to store.

[Peter Knight]

I want to mention that before you save data

(1) You need to know what the data is.

(2) Know if it is save to store.

Yes - good points Martijn.

In this case, I am developing for my own skills / curiosity but I'll definitely keep that in mind. I have an earlier post bookmarked too regarding sanitizing entered data etc,

[gebeer]

You should take a look at Soma's great gist about building frontend forms from fields of a template (or page).

This code also pulls in all the dependencies you need for asm page fields, image fields etc.

It also takes care of server side form validation.

Only thing you need to add is sanitation of the form values.

I have used this code as a base for several frontend forms (even complex ones) and it is working great.

[adrian]

Don't forget this thread: https://processwire.com/talk/topic/2089-create-simple-forms-using-api/

[GuruMeditation]

You should take a look at Soma's great gist about building frontend forms from fields of a template (or page).

This code also pulls in all the dependencies you need for asm page fields, image fields etc.

It also takes care of server side form validation.

Only thing you need to add is sanitation of the form values.

I have used this code as a base for several frontend forms (even complex ones) and it is working great.

That's actually very straight forward for what it's doing. A couple of questions.....

1. Is it possible to use a UI framework i.e UIKit etc? Or is it a lot of work?

2. When you mention sanitizing, do you have any example code?

Thanks for the info

[gebeer]

@Gurumeditation

regarding UI frameworks, you can set your desired classes to the inputfield wrapper with

$form->setMarkup(array(
    'list' => "<div {attrs}>{out}</div>",
    'item' => "<div {attrs}>{out}</div>"
));

and set classes to fields with

$field->attr("class" , "myclass");

That is the only way that I know of how you can get to use your framework's classes in the form.

Sanitizing: you just need to run the $input->post values through PW's $sanitizer methods before they actually get saved. It depends very much on the data your handling with your form, which methods to use.

This legendary thread about building forms with the PW API is worth reading and should answer most of the questions.

[GuruMeditation]

Sorry for being extremely stupid, but does anyone know what .....

'list' => "<div {attrs}>{out}</div>"

.....equates to in regards to UIKit? This is the list components for UIkit, but I'm confused as to how that converts to the above. Is there any further documentation on this?
 
As for sanitizing, as I now understand, the code you posted checks that the form input values are valid, i.e username must be a certain length etc, but we then have to sanitize it with $sanitizer->name($value) before saving etc?

[gebeer]

If you take a look at the html that is rendered for every  form, you will see, that the fields are wrapped in li elements which are inside an ul container with class Inputfields.

<ul class="Inputfields">
  <li id="some_id" class="Inputfield ...">The form inputfield html</li>
</ul>

'list' => "<div {attrs}>{out}</div>" refers to the ul container. So in this example ul would become div

'item' => "<div {attrs}>{out}</div>" refers to the li elements inside the ul. So in this example the li elements would become div elements.

{attr} refers to the ids and classes and {out} to the inputfield markup.

You can change id, name and class of an inputfield with $field->attr("class" , "myclass"); $field->attr(id+name , "myname");

But you cannot change the ids and classes of the inputfield wrappers in this way. You'd need custom hooks for that.

EDIT: yes you can, see Pete's post below

Or you get formbuilder which makes it really easy to generate forms for uikit and other frameworks.
 

[Pete]

There is a default markup array in InputfieldWrapper ( https://github.com/ryancramerdesign/ProcessWire/blob/980ce4f0be2054dfbad4a7b334d35bdca42da7da/wire/core/InputfieldWrapper.php ):

$defaultMarkup = array(
  'list' => "\n<ul {attrs}>\n{out}\n</ul>\n",
  'item' => "\n\t<li {attrs}>\n{out}\n\t</li>",
  'item_label' => "\n\t\t<label class='InputfieldHeader ui-widget-header{class}' for='{for}'>{out}</label>",
  'item_label_hidden' => "\n\t\t<label class='InputfieldHeader InputfieldHeaderHidden ui-widget-header{class}'><span>{out}</span></label>",
  'item_content' => "\n\t\t<div class='InputfieldContent ui-widget-content{class}'>\n{out}\n\t\t</div>",
  'item_error' => "\n<p class='InputfieldError ui-state-error'><i class='fa fa-fw fa-flash'></i><span>{out}</span></p>",
  'item_description' => "\n<p class='description'>{out}</p>",
  'item_head' => "\n<h2>{out}</h2>",
  'item_notes' => "\n<p class='notes'>{out}</p>",
  'item_icon' => "<i class='fa fa-{name}'></i> ",
  'item_toggle' => "<i class='toggle-icon fa fa-angle-down' data-to='fa-angle-down fa-angle-right'></i>",
  // ALSO:
  // InputfieldAnything => array( any of the properties above to override on a per-Inputifeld basis)
  );

You can override this with your own array:

$form->setMarkup = array(
    // your stuff here
);

And the last note in the first code block there says you can override per field as well, so happy days - you can do InputfieldText and so on and play around and see what happens. I would suggest {attrs} would always be required for simple fields like input type=text etc as this will have the field name and so on.

[Pete]

I was wondering how to override the style on a PW form only to find I posted the solution above 2 years ago ??

[dotnetic]

@Pete This happens often to me ?

[Peter Knight]

Yep. Same here ? and usually the same types of questions re. Images. 

Lately I’ve started to save some code snippets as Github Gists