Symfony2 - Sonata Admin - add javascript before field

Question

In admin class:

protected function configureFormFields(FormMapper $formMapper) {
    $formMapper
            ->add('name', 'text')
            ->add('description', 'text')
    ;
}

I don't know how I can before "name" add javascript, can you help me?

Altdorf

Do you need to add javascript for a specific field (name field in this case)? Can you tell me more about what do you want to do? – Amide

I want create autocomplete name from ajax. – Altdorf

Thanks, now I know what to answer. Hold on for a minute, I'm writing an answer for you. – Amide

Answer 1

Working for me:

In admin class src\PP\TestBundle\TestAdmin.php

public function configure() {
    $this->setTemplate('edit', 'PPTestBundle:CRUD:edit_javascript.html.twig');
}

In src\PP\TestBundle\Resources\views\edit_javascript.html.twig

{% extends 'SonataAdminBundle:CRUD:base_edit.html.twig' %}
{% block javascripts %}
{{ parent() }}
<script src="{{ asset('bundles/pptest/admin/js/myscripts.js') }}" type="text/javascript"></script>
{% endblock %}

When you do all this stuff and you have upload myscripts.js you should send this in command line:

app/console assets:install web

(possible that I forgot something)

Sorry for my bad English :<>

Altdorf

If you need to install assets from the bundle, use app/console assets:install web --symlink instead, to avoid copying the resources... – Imbroglio

setTemplate can also be called using the service configuration as described here – Farah

Answer 2

EDITED

1º You need to create a custom TWIG template for it (where you could place your javascript code just before the widget code).

2º Then you write inside ap/config/config.yml where your custom template is to allow Symfony and SonataAdmin to recognize it.

1º You have some info here Sonata Admin - Custom template

2º More info here customize field types

An example could be something like this:

Admin class

protected function configureFormFields(FormMapper $formMapper) {
    $formMapper
            ->add('name', 'ajax_autocomplete')
            ->add('description', 'text')
    ;
}

And, in the TWIG template you need to extend from the Sonata Admin field template that better fits your necessities. In this case maybe base_edit.html.twig or edit_text.html.twig

You have a list of templates to extend from, inside this Sonata Admin dir: vendor\sonata-project\admin-bundle\Sonata\AdminBundle\Resources\views\CRUD

Customization

Imagine you have placed your custom template inside XXXBundle:YYY:ajax_autocomplete.html.twig

I think it should work if you write a line here:

sonata_doctrine_orm_admin:
    templates:
        types:
            list:
                ajax_autocomplete: XXXBundle:YYY:ajax_autocomplete.html.twig

Amide

Yea but, now shows error: The option "template" does not exist. Known options are: "action", "attr", "auto_initialize" (...) – Altdorf

It's means that: We can't use custom template in create/edit page. ##EDIT## Maybe I should use filter? – Altdorf

Now I have an error: Could not load type "ajax_autocomplete". It works as I add in "configureListFields", but does not work in method "configureFormFields" where it is needed. – Altdorf

Maybe I was wrong, you don't have to add it to the sonata_doctrine_orm_admin config at /app/config/config.yml. Why? Because is not related to Sonata Admin, but Symfony2. Read the following documentation, please: symfony.com/doc/current/cookbook/form/… – Amide

Have you tried the solution from the documentation (the comment above this)? I'm interested on it. – Amide

Yes, I tested it and this not working, because in your code ->> list: <-- this is only for showing list and I need this in edit... I have already, later I will send working code. – Altdorf

Answer 3

Starting from sonata admin 3.x you can add/remove js/css to/from the page without extending it.

sonata_admin:
    ....
    assets:
        # javascript paths to add to the page in addition to the list above
        extra_javascripts:
            - 'your js file path'
        # javascript paths to remove from the page
        remove_javascripts: 
            - 'your js file path'

you can find more information here https://github.com/sonata-project/SonataAdminBundle/pull/4836/files?short_path=e252be0#diff-e252be027e26148c11d971dc969f4be0

Slivovitz