Form Framework: Render and send "headless" with JSON transfer - typo3

I want to use the form framework with vue.js. Instead of rendering with fluid, I prepare and assign the form elements as a json object, which vue loads async from my API controller.
My basic implementation of a single text field works so far, but "formstate->getFormValues()" remains empty. So I guess, the binding between my form and the request fails.
The following example is just the basic principle:
Controller: Prepare form fields as array and return json to the requesting frontend application
class FormFrontendApiController extends FormFrontendController
{
public function renderAction(): ResponseInterface
{
$persistenceIdentifier = 'EXT:test/Resources/Private/FormDefinitions/test.form.yaml';
$formConfiguration = $this->formPersistenceManager->load($persistenceIdentifier);
$factory = GeneralUtility::makeInstance(ArrayFormFactory::class);
$formDefinition = $factory->build($formConfiguration);
$formDefinition->setIdentifier($formDefinition->getIdentifier());
$formRuntime = GeneralUtility::makeInstance(HeadlessFormRuntime::class);
$formRuntime->setFormDefinition($formDefinition);
$formRuntime->setRequest($this->request);
$formRuntime->initialize();
$formState = $formRuntime->getFormState();
$finisherResponse = $formRuntime->run();
$elements = $formRuntime->getFormDefinition()->getElements();
$hashService = GeneralUtility::makeInstance(HashService::class);
$stateHash = $hashService->appendHmac(base64_encode(serialize($formState)));
$currentPageIndex = $formRuntime->getCurrentPage() ? $formRuntime->getCurrentPage()->getIndex() : 0;
$currentPageId = $currentPageIndex + 1;
$elements = $formDefinition->getPageByIndex($currentPageIndex)->getElements();
$requestHash = $this->mvcPropertyMappingConfigurationService->generateTrustedPropertiesToken(
['tx_form_formframework[test][text-1]', 'tx_form_formframework[test][__currentPage]'],
'tx_form_formframework'
);
$formFields = [
[
'type' => 'Hidden',
'name' => sprintf('tx_form_formframework[%s][__state]', $formDefinition->getIdentifier()),
'defaultValue' => $stateHash
],
[
'type' => 'Hidden',
'name' => 'tx_form_formframework[__trustedProperties]',
'defaultValue' => $requestHash
],
[
'type' => 'Hidden',
'name' => sprintf('tx_form_formframework[%s][__currentPage]', $formDefinition->getIdentifier()),
'defaultValue' => $currentPageId
]
];
$formDefinition->setRenderingOption('controllerAction', 'perform');
return $this->jsonResponse(json_encode($formFields));
}
}
The rendered frontend contains the following necessary form fields:
<input type="hidden"
name="tx_form_formframework[test][__state]"
value="TzozOToiVFlQTzNcQ01TXEZvcm1cRG9tYWluXFJ1bnRpbWVcRm9ybVN0YXRlIjoyOntzOjI1OiIAKgBsYXN0RGlzcGxheWVkUGFnZUluZGV4IjtpOjA7czoxMzoiACoAZm9ybVZhbHVlcyI7YTowOnt9fQ==aa9f11798f986845c2e54234794c5197446d74dc" />
<input type="hidden"
name="tx_form_formframework[__trustedProperties]"
value="{"test":{"text-1":1,"__currentPage":1}}6a81fd31dfb7f29c51873b39ff18544e45c4d7ba" />
<input class=" o-form-field__input"
id="aPIFormular-101-text-1"
type="text"
name="tx_form_formframework[test][text-1]" value="" />
<input type="hidden" name="tx_form_formframework[test][__currentPage]" value="1" />
To test, I just submit the form back to the controller, as a basic post request (no JavaScript fetch).
debug($formState->isFormSubmitted()) returns true
debug($formState->getFormValues()) remains empty
Question:
Is it possible to use the form framework in this way or will I run into huge problems / efforts?

Related

cakephp 3: change class input error

I build my form template according the documentation. It seemed everything was fine until I get fields errors. Now I have two problems:
How can I change the class name of the forms fields when they get error?
Solution:
$this->loadHelper('Form', [
'templates' => 'your_template_file',
'errorClass' => 'your-class',
]);
How can I set escape => false in the error-message from cakephp, when the field get error? Because I have icon within that div, such as
<div class="error-message"><i class="fa fa-times"></i> My error</div>
Well, I got part of th solution. To escape HTML I could put $this->Form->error('field', null, ['escape' => false]); in all fields, but it´s a hard manually task. I´d like to keep escape with default of all fields errors. I could edit the FormHelper.php class. However, I think that is not good idea.
My form template is:
'formStart' => '<form {{attrs}} class="form-horizontal" novalidate>',
'inputContainer' => '{{content}}',
'input' => '<input type="{{type}}" name="{{name}}" {{attrs}} class="form-control"/>',
'checkbox' => '<input type="checkbox" value="{{value}}" name="{{name}}" {{attrs}}/>',
'textareaContainerError' => '{{content}}',
'textarea' => '<textarea name="{{name}}" {{attrs}} class="form-control"></textarea>',
'select' => '<select name="{{name}}" {{attrs}} class="form-control">{{content}}</select>',
'button' => '<button {{attrs}} class="btn btn-primary">{{text}}</button>',
'nestingLabel' => '{{input}}',
'formGroup' => '{{input}}',
to the second part of the question: you can extend FormHelper like in code below, so that escape will be set to false by default
// extended FormHelper, this goes in src/View/Helper
namespace App\View\Helper;
use Cake\View\Helper;
class MyFormHelper extends Helper\FormHelper
{
public function error($field, $text = null, array $options = [])
{
if (!isset($options['escape'])) {
$options['escape'] = false;
}
return parent::error($field, $text, $options);
}
}
next create alias for this helper in AppController.php
public $helpers = [
'Form' => ['className' => 'MyForm']
];
this also allows you to add more customization of your own and at any time, you can go back to default implementation of FormHelper, just remove that alias from AppController.php.
For those who wants an 'easy solution' to escape error message on some fields, you cant simply set escape options to false :
<?= $this->Form->input('email', [
"label" => "Email",
"error" => [
"escape" => false
]
]) ?>

Drupal 7 - Construct clean URL from form post

I am creating a custom module in Drupal 7 that is a job search. I am wanting to make it so you can specify a clean URL to perform the search like so:
www.example.com/job-board/cardiology/california
Where "cardiology" is the "specialty" variable and "california" is the "location" variable.
now I know how to do this as far as mapping the variables in my hook_menu and accessing the variables. The problem is how do I create a search form that creates the clean url when you submit it? In other words if I had this:
<form method="get" action="job-board">
<select name="specialty">
<option value="cardiology">Cardiology</option>
<option value="some_other_value">Some Other Value</option>
</select>
<select name="location">
<option value="california">California</option>
<option value="some_other_state">Some Other State</option>
</select>
<input type="submit">
</form>
and I submit it, it will go to www.example.com/job-board?specialty=cardiology&location=california instead of www.example.com/cardiology/california. How can I make the form construct a clean URL?
You should create that form using Drupal's Form API and assign a custom submit callback to it.
In that submit callback, you can perform validation and if everything is OK, redirect the user to the appropriate URL.
See the source code of Examples modules, specifically one related to Form API in order to learn more about it.
In short, here's what you would do:
/**
* Sample form.
*/
function MYMODULE_sample_form() {
$form['specialty'] = array(
'#title' => t('Specialty'),
'#type' => 'textfield',
'#required' => TRUE,
);
$form['state'] = array(
'#title' => t('State'),
'#type' => 'select',
'#options' => array(
'california' => t('California')
),
);
$form['actions'] = array('#type' => 'actions');
$form['actions']['submit'] = array('#type' => 'submit', '#value' => t('Submit the form'));
return $form;
}
/**
* Sample form submit processing.
*/
function MYMODULE_sample_form_submit($form, &$form_state) {
$specialty = $form_state['values']['specialty'];
$state = $form_state['values']['state'];
drupal_goto($specialty . '/ ' . $state);
}

Form text diappears and comeing ab up again

How do I do that in symfony?
http://dorward.me.uk/tmp/label-work/example.html
When I click into the input field username. The text disappears. If I don't enter nothing and click somewhere else the text is comeing up again. How do I do that in symofny in lib/forms/.
Thanks for an advice!
Craphunter
This isnt symfony - its javascript ... just take a look at the source (uses jQuery)
HTML:
<div class="slim-control">
<label for="username"> Username </label>
<input name="username" id="username">
</div>
<div class="slim-control">
<label for="password"> Password </label>
<input name="password" id="password" type="password">
</div>
JavaScript:
(function () {
var nonEmpty = "non-empty";
var inputs = jQuery('.slim-control input');
var setLabelStyle = function setLabelStyle () {
var label = jQuery(this);
if (label.val().length) {
label.addClass(nonEmpty);
} else {
label.removeClass(nonEmpty);
}
};
inputs.focus(function () {
jQuery(this).addClass(nonEmpty);
});
inputs.blur(setLabelStyle);
inputs.each(setLabelStyle);
}());
So if you want to do this - you would need to add the javascript to the template (indexSuccess.php) for example - you would probably need to modify the ids / classes to meet your local needs
Updated
You could create the following form - this would match the above form (untested):
$this->form = new sfForm();
$this->form->setWidgets(array(
'username' => new sfWidgetFormInputText(),
'password' => new sfWidgetFormInputPassword()
));
Creating forms (indeed all of Symfony) is very well documented here -> http://www.symfony-project.org/gentle-introduction/1_4/en/10-Forms
'input' => new sfWidgetFormInputText(array(), array('size' => '100', 'maxlength' => '255', 'value' => 'Some text', 'onblur' =>"if(this.value == '') { this.value='Some text'}", 'onfocus' =>"if (this.value == 'Some text') {this.value=''}")),
This is much shorter! Be careful that "Some text" is identical!
If you need to pass more, take a look to SetWidgetsHtml in Symfony form: (slide down)
http://www.symfony-project.org/forms/1_4/en/01-Form-Creation

zend framework - group elements of a form within a subforms [duplicate]

I would like to be able to add a hidden form field using array notation to my form. I can do this with HTML like this:
<input type="hidden" name="contacts[]" value="123" />
<input type="hidden" name="contacts[]" value="456" />
When the form gets submitted, the $_POST array will contain the hidden element values grouped as an array:
array(
'contacts' => array(
0 => '123'
1 => '456'
)
)
I can add a hidden element to my form, and specify array notation like this:
$form->addElement('hidden', 'contacts', array('isArray' => true));
Now if I populate that element with an array, I expect that it should store the values as an array, and render the elements as the HTML shown above:
$form->populate($_POST);
However, this does not work. There may be a bug in the version of Zend Framework that I am using. Am I doing this right? What should I do differently? How can I achieve the outcome above? I am willing to create a custom form element if I have to. Just let me know what I need to do.
You have to use subforms to get the result you seek. The documentation was quite a ride but you can find it here
Using what I found there I constructed the following formL
<?php
class Form_Test extends Zend_Form {
public function init() {
$this->setMethod('post');
$this->setIsArray(true);
$this->setSubFormDecorators(array(
'FormElements',
'Fieldset'
));
$subForm = new Zend_Form(array('disableLoadDefaultDecorators' => true));
$subForm->setDecorators(array(
'FormElements',
));
$subForm->addElement('hidden', 'contacts', array(
'isArray' => true,
'value' => '237',
'decorators' => Array(
'ViewHelper',
),
));
$subForm2 = new Zend_Form(array('disableLoadDefaultDecorators' => true));
$subForm2->setDecorators(array(
'FormElements',
));
$subForm2->addElement('hidden', 'contacts', array(
'isArray' => true,
'value' => '456', 'decorators' => Array(
'ViewHelper',
),
));
$this->addSubForm($subForm, 'subform');
$this->addSubForm($subForm2, 'subform2');
$submit = new Zend_Form_Element_Submit('submit');
$submit->setValue('Submit');
$this->addElement('submit', 'submit');
}
}
Wich outputs this html:
<form enctype="application/x-www-form-urlencoded" method="post" action=""><dl class="zend_form">
<input type="hidden" name="contacts[]" value="237" id="contacts">
<input type="hidden" name="contacts[]" value="456" id="contacts">
<dt id="submit-label"> </dt><dd id="submit-element">
<input type="submit" name="submit" id="submit" value="submit"></dd></dl></form>
And when submited the post looks like:
array(2) {
["contacts"] => array(2) {
[0] => string(3) "237"
[1] => string(3) "456"
}
["submit"] => string(6) "submit"
}
So thats how you can create the kind of forms you seek. Hope this helps! if you have a question post a comment!
Its quite hackish if you ask me. You basically create subforms but disable there form decorators so just the element gets output. Since the identical contacts[] elements are in different form object zend does'nt overwrite them and it works. But yeah..
Edit: changed it a bit to remove labels and garbage arount the hidden inputs.
To use array notation, you need to specify that the element "belongs to" a parent array:
$form->addElement('hidden', 'contact123', array('belongsTo' => 'contacts', 'value' => '123'));
$form->addElement('hidden', 'contact456', array('belongsTo' => 'contacts', 'value' => '456'));
This indeed seems to be a bug in Zend Framework - the value attribute for an element is properly set to array, but it's ignored when the element renders - it just uses$this->view->escape($value) to output element's html.
I've solved this by implementing a custom helper for such elements:
class My_View_Helper_HiddenArray extends Zend_View_Helper_FormHidden
{
public function hiddenArray($name, $value = null, array $attribs = null)
{
if (is_array($value)) {
$elementXHTML = '';
// do not give element an id due to the possibility of multiple values
if (isset($attribs) && is_array($attribs) && array_key_exists('id', $attribs)) {
unset($attribs['id']);
}
foreach ($value as $item) {
$elementXHTML .= $this->_hidden($name, $item, $attribs);
}
return $elementXHTML;
} else {
return $this->formHidden($name, $value, $attribs);
}
}
}
Which, when used the next way:
$contacts = $form->createElement('hidden', 'contacts')
->setIsArray(true)
->setDecorators(array(
array('ViewHelper', array('helper' => 'HiddenArray')),
));
$form->addElement($contacts);
generates the needed output.
The reason to extend Zend_View_Helper_FormHidden here is just to be able to call the default behaviour if no array value is set ( return parent::formHidden($name, $value, $attribs) ).
Hope this helps someone :)
For the newer versions of ZF you should use https://framework.zend.com/manual/2.1/en/modules/zend.form.elements.html#multicheckbox

Zend Framework: Working with Form elements in array notation

I would like to be able to add a hidden form field using array notation to my form. I can do this with HTML like this:
<input type="hidden" name="contacts[]" value="123" />
<input type="hidden" name="contacts[]" value="456" />
When the form gets submitted, the $_POST array will contain the hidden element values grouped as an array:
array(
'contacts' => array(
0 => '123'
1 => '456'
)
)
I can add a hidden element to my form, and specify array notation like this:
$form->addElement('hidden', 'contacts', array('isArray' => true));
Now if I populate that element with an array, I expect that it should store the values as an array, and render the elements as the HTML shown above:
$form->populate($_POST);
However, this does not work. There may be a bug in the version of Zend Framework that I am using. Am I doing this right? What should I do differently? How can I achieve the outcome above? I am willing to create a custom form element if I have to. Just let me know what I need to do.
You have to use subforms to get the result you seek. The documentation was quite a ride but you can find it here
Using what I found there I constructed the following formL
<?php
class Form_Test extends Zend_Form {
public function init() {
$this->setMethod('post');
$this->setIsArray(true);
$this->setSubFormDecorators(array(
'FormElements',
'Fieldset'
));
$subForm = new Zend_Form(array('disableLoadDefaultDecorators' => true));
$subForm->setDecorators(array(
'FormElements',
));
$subForm->addElement('hidden', 'contacts', array(
'isArray' => true,
'value' => '237',
'decorators' => Array(
'ViewHelper',
),
));
$subForm2 = new Zend_Form(array('disableLoadDefaultDecorators' => true));
$subForm2->setDecorators(array(
'FormElements',
));
$subForm2->addElement('hidden', 'contacts', array(
'isArray' => true,
'value' => '456', 'decorators' => Array(
'ViewHelper',
),
));
$this->addSubForm($subForm, 'subform');
$this->addSubForm($subForm2, 'subform2');
$submit = new Zend_Form_Element_Submit('submit');
$submit->setValue('Submit');
$this->addElement('submit', 'submit');
}
}
Wich outputs this html:
<form enctype="application/x-www-form-urlencoded" method="post" action=""><dl class="zend_form">
<input type="hidden" name="contacts[]" value="237" id="contacts">
<input type="hidden" name="contacts[]" value="456" id="contacts">
<dt id="submit-label"> </dt><dd id="submit-element">
<input type="submit" name="submit" id="submit" value="submit"></dd></dl></form>
And when submited the post looks like:
array(2) {
["contacts"] => array(2) {
[0] => string(3) "237"
[1] => string(3) "456"
}
["submit"] => string(6) "submit"
}
So thats how you can create the kind of forms you seek. Hope this helps! if you have a question post a comment!
Its quite hackish if you ask me. You basically create subforms but disable there form decorators so just the element gets output. Since the identical contacts[] elements are in different form object zend does'nt overwrite them and it works. But yeah..
Edit: changed it a bit to remove labels and garbage arount the hidden inputs.
To use array notation, you need to specify that the element "belongs to" a parent array:
$form->addElement('hidden', 'contact123', array('belongsTo' => 'contacts', 'value' => '123'));
$form->addElement('hidden', 'contact456', array('belongsTo' => 'contacts', 'value' => '456'));
This indeed seems to be a bug in Zend Framework - the value attribute for an element is properly set to array, but it's ignored when the element renders - it just uses$this->view->escape($value) to output element's html.
I've solved this by implementing a custom helper for such elements:
class My_View_Helper_HiddenArray extends Zend_View_Helper_FormHidden
{
public function hiddenArray($name, $value = null, array $attribs = null)
{
if (is_array($value)) {
$elementXHTML = '';
// do not give element an id due to the possibility of multiple values
if (isset($attribs) && is_array($attribs) && array_key_exists('id', $attribs)) {
unset($attribs['id']);
}
foreach ($value as $item) {
$elementXHTML .= $this->_hidden($name, $item, $attribs);
}
return $elementXHTML;
} else {
return $this->formHidden($name, $value, $attribs);
}
}
}
Which, when used the next way:
$contacts = $form->createElement('hidden', 'contacts')
->setIsArray(true)
->setDecorators(array(
array('ViewHelper', array('helper' => 'HiddenArray')),
));
$form->addElement($contacts);
generates the needed output.
The reason to extend Zend_View_Helper_FormHidden here is just to be able to call the default behaviour if no array value is set ( return parent::formHidden($name, $value, $attribs) ).
Hope this helps someone :)
For the newer versions of ZF you should use https://framework.zend.com/manual/2.1/en/modules/zend.form.elements.html#multicheckbox