formResponse.actionAfterSuccess is always null

[JeanM38]

Hello !

I created a form in TYPO3 Backend with the Forms module, and assign it to a specifig page, form is well rendered in my front-end application, but I don't understand why formResponse.actionAfterSuccess in the T3CeFormFormframework.vue component is always null after the form submission, I created different finishers for this form so I would like to retrieve them. This is a classic form configuration :

renderingOptions:
  submitButtonLabel: Submit
identifier: contact
label: Contact
type: Form
prototypeName: standard
finishers:
  -
    options:
      message: GG
      contentElementUid: ''
    identifier: Confirmation
renderables:
  -
    renderingOptions:
      previousButtonLabel: 'Previous step'
      nextButtonLabel: 'Next step'
    identifier: page-1
    label: 'Contact Form'
    type: Page
    renderables:
      -
        defaultValue: MIONNET
        identifier: name
        label: Name
        type: Text
        properties:
          fluidAdditionalAttributes:
            placeholder: Name
            required: required
        validators:
          -
            identifier: NotEmpty
      -
        defaultValue: Sujet
        identifier: subject
        label: Subject
        type: Text
        properties:
          fluidAdditionalAttributes:
            placeholder: Subject
            required: required
        validators:
          -
            identifier: NotEmpty
      -
        defaultValue: jmionnet@emagineurs.com
        identifier: email
        label: Email
        type: Text
        properties:
          fluidAdditionalAttributes:
            placeholder: 'Email address'
            required: required
        validators:
          -
            identifier: NotEmpty
          -
            identifier: EmailAddress
      -
        defaultValue: Message
        identifier: message
        label: Message
        type: Textarea
        properties:
          fluidAdditionalAttributes:
            placeholder: ''
            required: required
        validators:
          -
            identifier: NotEmpty

Maybe I forgot something ? Thanks for the answer.

Versions

TYPO3 [12.4.4] . TYPO3 Headless [4.2.2] . nuxt [2.17.2] . nuxt-typo3 [1.3.3]

[twoldanski]

Hi @JeanM38, could you provide example request with form data you sending to TYPO3 backend?

[JeanM38]

Hi @twoldanski, I do not have specific request, I'm just using the sendForm method provided by nuxt-typo3

components/T3CeFormFormframework/T3CeFormFormframework.vue

<template>
  <!-- ... -->
</template>
<script>
export default {
  /* ... */
  methods: {
    /**
     * T3Form Submit callback
     * @param {T3FormSubmitObject} FormObject
     */
    async onSubmit ({ validator, form, formRef }) {
      const { flags, setErrors } = validator
      const { resetForm, setState } = form
      const formData = new FormData(formRef)
      formData.append('responseElementId', this.id)
      formData.append('responseElementRecursive', 1)

      if (flags.valid) {
        setState('sending')
        try {
          const response = await this.sendForm(formData, this.link.href)
          const formResponse = response?.content?.form?.api

          if (formResponse.status === 'success') {
            setState('success')
            resetForm()
            return this.onSuccess(formResponse.actionAfterSuccess)
          }
          if (formResponse.status === 'failure') {
            setErrors(this.prepareErrors(formResponse.errors))
            setState('failure')
          }
        } catch (err) {
          setState('error')
        }
      }
    },
    /**
     * Send form used $typo3 http client
     * @param {FormData} parsed form data object
     * @param {string} url API Endpoint to call contact form
     * @returns {Promise<TYPO3.Response.Page>} whole page content
     */
    async sendForm (formData, url) {
      return await this.$typo3.api.$http.$post(url, formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      })
    },
    /* ... */
  }
}
</script>

I found something which could explain my problem in TYPO3 headless extension, finishers are returned only when FormRuntime is after last page, but this is weird because my form has only one step :

typo3conf\ext\headless\Classes\XClass\FormRuntime.php

<?php

/*
 * This file is part of the "headless" Extension for TYPO3 CMS.
 *
 * For the full copyright and license information, please read the
 * LICENSE.md file that was distributed with this source code.
 */

declare(strict_types=1);

namespace FriendsOfTYPO3\Headless\XClass;

/**
 * @codeCoverageIgnore
 */
class FormRuntime extends \TYPO3\CMS\Form\Domain\Runtime\FormRuntime
{
    /**
     * Stripped "render" method
     * Does not render html form & handles finishers & variants
     *
     * @return string|null finisher response or null
     */
    public function run(): ?string
    {
        if ($this->isAfterLastPage()) {
            return $this->invokeFinishers();
        }
        $this->processVariants();

        $this->formState->setLastDisplayedPageIndex($this->currentPage->getIndex());

        return null;
    }
}

[twoldanski]

@JeanM38 we use simplified version of Core Form Runtime method, but handling of finishers is the same way, the the core/html version. What are the values of formResponse.status, formResponse.errors when sending the form the backend?

[JeanM38]

@twoldanski, here is the formResponse :)

[twoldanski]

@JeanM38 I see, looks good, so please double check if ConfirmationFinisher is executed and/or is returning proper value?