Jump to content

Populate page from fields on web page


Peter Knight
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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,

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.
 

  • Like 1
Link to comment
Share on other sites

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.

  • Like 5
Link to comment
Share on other sites

  • 2 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...