Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

formResponse.actionAfterSuccess is always null #324

Open
JeanM38 opened this issue Nov 8, 2023 · 5 comments
Open

formResponse.actionAfterSuccess is always null #324

JeanM38 opened this issue Nov 8, 2023 · 5 comments
Labels
v1 Version 1.x

Comments

@JeanM38
Copy link

JeanM38 commented Nov 8, 2023

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: [email protected]
        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
Copy link

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

@JeanM38
Copy link
Author

JeanM38 commented Nov 9, 2023

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
Copy link

@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
Copy link
Author

JeanM38 commented Nov 9, 2023

@twoldanski, here is the formResponse :)

image

@twoldanski
Copy link

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

@mercs600 mercs600 added the v1 Version 1.x label Nov 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
v1 Version 1.x
Projects
None yet
Development

No branches or pull requests

3 participants