Easyadminbundle: Rendering text field as select

[hrvojebrkasic]

Which template should be overridden to achieve this and how can I do this? Also, I need to add javascript to that field. It can be added normally in script tags inside that template file that I'll have to create? This should be done for only that one field and only on Edit and New actions for Employee entity.

Thanks for help.

[rubengc]

You can find information here about easyadmin field configuration:
4 Vews and actions

An you will need know what ChoiceType Field requires

[hrvojebrkasic]

Do I need to do something else or all I have to do is add field I would like to change under my entity
new: fields: - { property: 'status', label: 'Status', type: 'choice' }

I got empty field but overriding functions createNewForm and createEditForm in my controller have populated that field.
The problem is that there is no rest of the form now in new.action, only that select field. My form fields are rendering automatically using easy admin templates and symfony logic.

[javiereguiluz]

@hrvojebrkasic I'm afraid that I don't understand the issue, so let's try to guess what's happening:

1) Do you create the form manually with the new, edit or form options of EasyAdmin? ... or do you create the form with Symfony and use it overriding the AdminController?

2) The choice field to customize: how does it get the values to show? Ajax? And what about the JavaScript needed by the field?

[hrvojebrkasic]

I'm sorry for not being clear right away so I'll try to be more detailed now.

1) Forms are creating with Symfony, that means that Symfony uses fields that are added inside entities, right?? I only used those two actions to remove and add field I needed because I couldn't get it on any other way.

2) The choice field should contain predefined values like "Working" and "Not working" and they are added in controller like this

public function createEditForm($entity, array $entityProperties)
    {
        $editForm = parent::createEditForm($entity, $entityProperties);
        if($entity instanceof Employee){
            $editForm->remove('status');
            $editForm->add('status', ChoiceType::class, array(
                'choices' => array(
                    'Working' => "active",
                    'Not working' => 'inactive'
                )
            ));
        }
        return $editForm;
    }

so no Ajax should be used.

Regarding JavaScript, I need to show or hide other div depending on value selected in this choice type. My plan was to add that JS inside template I should use to render that field (I found something like that in Symfony docs with extending template and rewriting field using eg. {% block _employee_status_widget %}).

[javiereguiluz]

The only thing you must keep in mind is that for form-related stuff we always rely on Symfony Forms instead of recreating those features. So, if you wanted to customize the template for the show or list views, you just need to define the template to use in the template option:

entities:
    Employee:
        list:
            fields:
                - { property: 'status', template: 'my_template.html.twig' }

And that's all! 5 seconds and you are done. However, for customizing the form template, you'll need to work a bit more and follow Symfony practices.

1) You need to create a custom form theme template anywhere you want.
2) You need to override the block used to display your widget as you perfectly explained in the previous comment.
3) Tell EasyAdmin that it must use your own theme (as explained in https://github.com/javiereguiluz/EasyAdminBundle/blob/master/Resources/doc/getting-started/5-design-customization.md#customizing-form-design):

easy_admin:
    design:
        form_theme: '@AppBundle/form/custom_layout.html.twig'

If your custom form theme extends from the default form_div_layout or bootstrap_3_layout themes, there is nothing else to do. If not, then tell EasyAdmin to use two themes: your own theme and the default one:

easy_admin:
    design:
        form_theme: ['@AppBundle/form/custom_layout.html.twig', 'vertical'] # or 'horizontal'

This should be all. Please tell us if it works. Thanks!

[hrvojebrkasic]

Thank you, I surely will try, but, you are talking about customizing list or show views. Is there any difference between customizing these two and customizing edit or new views which I need? Since I don't have to customize whole theme, only one particular field I have to use those 3 steps you wrote?
After that, since I don't extend neither form_div_layout nor bootstrap_3_layout themes, but extending {% extends 'EasyAdminBundle:default:new.html.twig' %} in my custom template, as you wrote, my next step should be adding 2 form themes in EasyAdmin, one custom template I use to override field and template used for rendering rest of the form:

easy_admin:
    design:
        form_theme: ['@EmployeeBundle/Form/employeestatusfield.html.twig', '@EasyAdminBundle:default:new.html.twig']'

If everything I said here is correct, my template should look like this:

{% extends 'EasyAdminBundle:default:new.html.twig' %}

{% form_theme form _self %}
{% block _employee_status_widget %}
       <select>
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
       </select> 
      <script type="text/javascript">
            $(document).ready(function () { 
                $("#employee_status").on('change', function() {
                    if ($('#employee_status').val() == 1) {
                        $("#employee_quitAt").parent().parent().parent().hide();
                    }
                    else {
                        $("#employee_quitAt").parent().parent().parent().show();
                    }
                })
            });
        </script>
{% endblock  _employee_status_widget %}

and adding 2 templates in form_theme, this should work?

Does overriding that text field works this way, or I still need createEditForm action from few comments up and then without select in this template leaving only JavaScript?

PS. How do you style your code to look nicely formatted?

[javiereguiluz]

You can forget my previous comment :) (I mentioned the list and show views because those depend 100% on us and tweaking them is very easy. The new and edit views depend entirely on Symfony ... so they are more complex).

---

Looking at your code, I'm afraid that you are not on the right track :cry: I propose you something different: your custom form field is really simple. A two element choice type and a bit of JavaScript code. So, let's forget about everything and let's start over.

I recommend you to create a JavaScript file anywhere in your application (the location doesn't matter). It's contents should be:

$(document).ready(function () { 
    $("body.easyadmin.new #employee_status").on('change', function() {
        if ($('#employee_status').val() == 1) {
            $("#employee_quitAt").parent().parent().parent().hide();
        }
        else {
            $("#employee_quitAt").parent().parent().parent().show();
        }
    })
});

Then, use the design.assets.js option to load your own JavaScript in the backend. It's explained here: https://github.com/javiereguiluz/EasyAdminBundle/blob/master/Resources/doc/getting-started/5-design-customization.md#adding-custom-web-assets

[hrvojebrkasic]

I'm sorry for not replying faster, I have a lot of work to do.

So, what you're saying is that my logic for overriding existing text field is ok (logic that is in controller in actions createNewForm and createEditForm) and that only problem with my approach is where I put my JS code?

I'm still kinda confused with such a huge difference between list and show and new and edit templates and that first two are so much easier to customize.
Would things be easier if I, instead of using Symfonys method of creating forms, used form builder action and created everything by myself or on any other manual way?
And when can I use way of overriding field that is described in my last comment and symfony docs ...{% block _employee_status_widget %}...

Since there's no other way, at least for now?, how can I change order of these fields?? The way I'm creating them, they are rendered at the bottom of the form but they should be before/after some elements.

And could you please explain to me this line of code $("body.easyadmin.new #employee_status"). I know that #employee_status references to my field, but what does body.easyadmin.new reference to? That form, but why is that needed?

Thank you.

[javiereguiluz]

@hrvojebrkasic everything seems complicated because you are using Symfony to create your forms instead of creating them with EasyAdmin.

If your forms are complicated, you must use Symfony Forms. But the form you showed looks simple because it's just a choice field with two options. In EasyAdmin you can do it like this:

easy_admin:
    entities:
        Employee:
            # ...
            form:
                fields:
                    # ...
                    - { property: 'status', type: 'choice', type_options: { choices: { 'active': 'Working', 'inactive': 'Not working' } } }

The only thing left would be the JavaScript magic that shows/hides things. That should be done as shown in my previous comment.

[javiereguiluz]

@hrvojebrkasic did you finally manage to fix this issue? do you need more help? Just ask us!

[javiereguiluz]

I'm closing this as "fixed" because of the lack of feedback ... but please feel free to ask us anything else you might need. Thanks!

[kbsali]

that's also an issue I was trying to solve, and I bet there are more people looking for this kind of hint.
Maybe it would be a good idea to have a tips & hint section in the docs or something similar..?