Front-end custom form: how to retrieve an inputfield css class

[Federico]

Hello,

I am building a custom front-end form to create or populate pages, however I need to retrieve some css rules from existing fields in a page, in order to add them to front-end fields and style them accordingly. In particular I have to retrieve the css class that defines which input field type is a pageReferenceField - this case is "select", and the css is 

<div class="InputfieldSelect">....</div>

Whereas for the same pageReferenceField with an input type asm select multi, its css class is as follow:

<div class="InputfieldPageListSelectMultiple">.....</div>

 

this is part of the code

$inputfields = $pages->get(1041)->getInputfields(); // get the form inputfields from a specific page 
foreach($inputfields as $inputfield) { // loop through them
if(in_array($inputfield->name, $ignorefields)) continue;
echo $inputfield->get(class); // NEED TO RETRIEVE THE CSS CLASS THAT DEFINES THE TYPE OF PAGE REFERENCE INPUTFIELD (THIS CASE IS SELECT, BUT COULD BE ASM, RADIO, ETC) 
.. other code...
}

Do you know how to retrieve this specific css class?

Thank you very much

[dragan]

https://processwire.com/api/ref/inputfield/#pwapi-methods-other

Did you try contentClass or wrapClass?

[Federico]

I've tried almost all options available in there, but no luck so far - maybe I am doing it wrong

Just to make sure, is this the correct way to retrieve options within the foreach?

Quote

$inputfield->name // get the name of the field - OK
$inputfield->wrapClass // no output...
$inputfield->contentClass // no output...

 

 

[Federico]

Neither this check doesn't outputs anything...

if ($inputfield == 'InputfieldPage') {
  if($inputfield->hasClass('InputfieldPageListSelectMultiple', 'contentClass')) {
    echo "Yes! I am page reference field with the InputfieldPageListSelectMultiple field type selected !!!";
  }
...other code
}

I don't know what's left to do...

[Federico]

16 minutes ago, Federico said:

Neither this check doesn't outputs anything...

if ($inputfield == 'InputfieldPage') { // found a page reference input, hence keep going
  if($inputfield->hasClass('InputfieldPageListSelectMultiple', 'contentClass')) { // condition not working....
    echo "Yes! I am page reference field with the InputfieldPageListSelectMultiple field type selected !!!";
  }
...some working code...
}

I don't know what's left to do...

 

[dragan]

I guess those methods are meant to be used only in the admin, e.g. if you are building your own module.

$inputfield = $modules->get('InputfieldText');

If you would set up your form like this in the frontend, you could probably use all methods from the docs.

But I'm not sure you could "clone" your already existing backend inputs and re-create in the frontend. I understand that's what you're trying to do?

[Federico]

Yes @dragan, correct

i would like to recreate existing admin form in the frontend, by implement a logic with full control over CSS styles. 

If these methods are not available in the frontend, how do you suggest considering a modules->get with granular CSS control over input fields?

ps lot of threads over this thing, however before going with form builder, I would like to better understand what could be achieved by custom logic 

 

thanks a lot  

[Robin S]

@Federico, I'm not sure I completely understand your question, but if you want to know what inputfield type is used for a Page Reference field you can get that from the "inputfield" property.

The type setting in admin:

Getting the type via InputfieldPage using the API:

// $inputfield is InputfieldPage object
$inputfield = $pages(1234)->getInputfield('YOUR_PAGE_REFERENCE_FIELD');
// $type is 'InputfieldSelect'
$type = $inputfield->inputfield;

 

P.S. Are you using Tracy Debugger? Things are a lot easier once you start using this module. You can dump an object (e.g. an inputfield) and explore all its properties.

[Federico]

@Robin S thanks, well I've been two days exploring all possible scenarios, then a simple 

$type = $inputfield->inputfield;

made my day aka that's exactly what I was looking for!

many thanks

[Robin S]

When you can find a setting in admin and you want to know what the property name will be in API, a handy trick is to hover the collapse toggle of the setting. When $config->debug = true you will see the name of the input appear, and 99% (all?) of the time that will be the property name in the API.

And Tracy will give you the whole shebang:

Edited December 17, 2017 by Robin S
Corrected screenshots so they show the same field.

[adrian]

To follow up on @Robin S's Tracy example, you can also access this without even needing to do an manual dump call. If you go to edit the field in the backend, you will see this in the Request Info panel.

In this case you can quickly see that the inputfield is "InputfieldCheckboxes".

 

You can also find this when viewing a page on the frontend if you go to Request Info > Field List & Values where you will see this, which is just one row of a table which shows the same info for all fields on the page.