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

356 views Asked by At

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="{&quot;test&quot;:{&quot;text-1&quot;:1,&quot;__currentPage&quot;: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?

0

There are 0 answers