Translating Doctrine Entities with Symfony forms

As described here I’m using KnpLabs\DoctrineBehaviors for Doctrine2 entity translations. While using this bundle we have nice interface for translations but usually we also need some UI (forms) for managing such translations from user interface.

We can always write our own dedicated solution but there is already a nice bundle that will do the job for us: A2LiX TranslationFormBundle. For this example I will use Post entity introduced in previous blog entry.

Installation

To install TranslationBundle please follow instructions from the official documentation.

Note: I’m using 2.1.2 version of TranslationFormBundle and only registered new A2lix\TranslationFormBundle\A2lixTranslationFormBundle() in AppKernel.php.

For the purpose of this entry I’m using configuration:

a2lix_translation_form:
    locale_provider: default
    locales: [en, pl, fr, es, de]
    default_locale: en 
    required_locales: []
    templating: "A2lixTranslationFormBundle::default.html.twig"

a2lix_translation_form:

locale_provider: default

locales: [en, pl, fr, es, de]

default_locale: en

required_locales: []

templating: "A2lixTranslationFormBundle::default.html.twig"

This configuration can be later overridden in specific translation form field.

Creating form

This bundle offers some special form types that can be used for doctrine entities translations. To edit Post entity from previous blog entry we need to create form type as in the example:

class PostType extends AbstractType
{

    /**
     * {@inheritdoc}
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('status', ChoiceType::class, [
                'choices' => [
                    'Draft'     => Post::STATUS_DRAFT,
                    'Published' => Post::STATUS_PUBLISHED,
                ]
            ])
            // here we can override bundle configuration from config.yml
            'locales' => ['en', 'pl', 'fr', 'es', 'de']
            ->add('translations', TranslationsType::class, [
                // fields that we want to translate
                'fields' => [
                    'title' => [
                        'field_type' => TextType::class,
                        // here we can add standard field options like label, constraints, etc and locale options
                        'constraints'   => new NotBlank
                    ],
                    'content' => [
                        'constraints'   => new NotBlank
                    ]
                ]
            ]);
    }

    // ...

}

class PostType extends AbstractType

{

/**

* {@inheritdoc}

public function buildForm(FormBuilderInterface $builder, array $options)

{

$builder

->add('status', ChoiceType::class, [

'choices' => [

'Draft' => Post::STATUS_DRAFT,

'Published' => Post::STATUS_PUBLISHED,

]

])

// here we can override bundle configuration from config.yml

'locales' => ['en', 'pl', 'fr', 'es', 'de']

->add('translations', TranslationsType::class, [

// fields that we want to translate

'fields' => [

'title' => [

'field_type' => TextType::class,

// here we can add standard field options like label, constraints, etc and locale options

'constraints' => new NotBlank

'content' => [

'constraints' => new NotBlank

]

]);

}

// ...

}

This bundle also offers more advanced configuration that can be found in official documentation.

Usage

Controller action looks like we are updating entity without translations – translation logic is handled by TranslationsType form type:

    public function editAction(\AppBundle\Entity\Post $post, Request $request)
    {
        // create form to edit translations
        $form = $this->createForm(\AppBundle\Form\PostType::class, $post);
        // handle request data
        $form->handleRequest($request);
        
        if ($form->isValid()) {
            // update DB
            $this->getDoctrine()->getManager()->flush();
            
            $this->addFlash('notce', 'Post has been successfully updated.');
            return $this->redirectToRoute('edit', ['id' => $post->getId()]);
        }
    
        // render form view
        return $this->render('default/edit.html.twig', [
            'form'  => $form->createView()
        ]);
    }

public function editAction(\AppBundle\Entity\Post $post, Request $request)

{

// create form to edit translations

$form = $this->createForm(\AppBundle\Form\PostType::class, $post);

// handle request data

$form->handleRequest($request);

if ($form->isValid()) {

// update DB

$this->getDoctrine()->getManager()->flush();

$this->addFlash('notce', 'Post has been successfully updated.');

return $this->redirectToRoute('edit', ['id' => $post->getId()]);

}

// render form view

return $this->render('default/edit.html.twig', [

'form' => $form->createView()

]);

}

To display translation form I’m also using standard Twig form widgets:

<div class="row">

    {{ form_start(form) }}

    {{ form_widget(form) }}

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-success">Update</button>
        </div>
    </div>
        
    {{ form_end(form) }}

</div>

<button type="submit" class="btn btn-success">Update</button>

</div>

Note: I’m using bootstrap 3.3.7 for this example.

And the final result should be close to:

Rate this post