How to position widgets in a popup for a custom action

Hi:

I’m having a little problem with the UI of my custom action form. It’s showing like this:

Instead of like this (the way I want it):

I came up with this display by tweaking the html in FireFox’s inspector, it should look something like:

XHTML

<div data-content="oro_action_operation[paymentTransactions][0]" data-validation-optional-group=""> <div class="row-oro oro-multiselect-holder"><div class="controls"> <div id="oro_action_operation_paymentTransactions_0-uid-5cb4b25552793" data-ftid="oro_action_operation_paymentTransactions_0" data-name="field__0"> <div class="control-group control-group-money"><div class="control-label wrap" style="width: 265px;"> <label for="oro_action_operation_paymentTransactions_0_amount-uid-5cb4b255524c2">Monto<em>&nbsp;</em></label> $ <input type="text" id="oro_action_operation_paymentTransactions_0_amount-uid-5cb4b255524c2" name="oro_action_operation[paymentTransactions][0][amount]" style="width: 100px" data-ftid="oro_action_operation_paymentTransactions_0_amount" data-name="field__amount" value="8078,00"> <button class="removeRow btn btn-icon btn-square-light" type="button" data-related="oro_action_operation[paymentTransactions][0]"><span class="fa-close"></span></button> </div> </div> </div> </div> </div></div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div data-content="oro_action_operation[paymentTransactions][0]" data-validation-optional-group="">   <div class="row-oro oro-multiselect-holder"><div class="controls">     <div id="oro_action_operation_paymentTransactions_0-uid-5cb4b25552793" data-ftid="oro_action_operation_paymentTransactions_0" data-name="field__0">     <div class="control-group control-group-money"><div class="control-label wrap" style="width: 265px;">       <label for="oro_action_operation_paymentTransactions_0_amount-uid-5cb4b255524c2">Monto<em>&nbsp;</em></label> $       <input type="text" id="oro_action_operation_paymentTransactions_0_amount-uid-5cb4b255524c2" name="oro_action_operation[paymentTransactions][0][amount]" style="width: 100px" data-ftid="oro_action_operation_paymentTransactions_0_amount" data-name="field__amount" value="8078,00">       <button class="removeRow btn btn-icon btn-square-light" type="button" data-related="oro_action_operation[paymentTransactions][0]"><span class="fa-close"></span></button>      </div>     </div>   </div> </div>     </div></div>

The problem is… I don’t know where to put such HTML code :(

In order to create this popup I copied everything from vendor/oro/commerce/src/Oro/Bundle/OrderBundle/Form/Type/OrderShippingTrackingType.php

What would you suggest? Thanks

• This topic was modified 5 years ago by  Mauro Chojrin.
• This topic was modified 5 years ago by  Mauro Chojrin. Reason: Added images

Topic

[Andrey YatsenkoModerator]

I suggest using a dev environment with Symfony Profiler. At Oro, we have a useful tool for, that allows you to find the template, used for rendering some HTML and understand where it comes from, it’s named Twig Inspector, you can check the documentation.

[Mauro ChojrinParticipant]

Hi Andrey:

Thanks for your reply. I like the idea.

I just run composer install on my VM and downloaded a few packages but I don’t see a file like app_dev.php or anything… how can I enter my site on dev mode?

[Mauro ChojrinParticipant]

Never mind, I just found the file index_dev.php

[Mauro ChojrinParticipant]

Hi:

So I think I figured it out (kind of).

First, I tried installing the dev requirements in the VM and found problems with composer update (Lack of memory apparently)… so I’m going back to using it like it was a prod environment.

What I recently noticed is that the shipping tracking form doesn’t look _exactly_ like mine:

There’s a table that keeps everything in its place that I don’t have :(

The thing is, I’ve been looking around and realized this table starts hidden and it’s unhidden upon click on “Add” (Which adds a row based on a template to the table).

I noticed there’s also a file vendor/oro/commerce/src/Oro/Bundle/OrderBundle/Resources/config/oro/twig.yml which contains:

YAML

bundles: - OroOrderBundle:Form:fields.html.twig

1 2	bundles:     - OroOrderBundle:Form:fields.html.twig

Which contains lots of block definitions, one in particular that caught my attention was {% block oro_order_shipping_tracking_collection_widget %}. In it I found the definition of the table that holds the tracking records…

What I’m missing here is how this file (fields.html.twig) is related to the general template that creates the popup and how the javascript is brought together as well… Is there any documentation I can check on this?

Thanks

[Mauro ChojrinParticipant]

Somehow (I’m not really sure how) I managed to get the popup to look the way I want it to:

But now the Add button isn’t working…

Inpecting the errors in the console I got to this line of minified js (from oro.min.js):

JavaScript

d=function(e){return e.prototypeHtml.replace(new RegExp(e.prototypeName,"g"),e.nextIndex)}

1	d=function(e){return e.prototypeHtml.replace(new RegExp(e.prototypeName,"g"),e.nextIndex)}

And the error is e.prototypeHtml is undefined.

I’m really confused about all the yml files and their interaction with js and stuff…

I created a file “requirejs.yml” inside my Resources/config/oro directory which has the following contents:

YAML

config: paths: 'collectondelivery/js/app/views/payment-transaction-collection-view': 'bundles/collectondelivery/js/app/views/payment-transaction-collection-view.js'

1 2 3

config:     paths:         'collectondelivery/js/app/views/payment-transaction-collection-view': 'bundles/collectondelivery/js/app/views/payment-transaction-collection-view.js'

I also created a file called src/Leeway/Bundle/CollectOnDeliveryBundle/Resources/views/Form/fields.html.twig in which I have the html for rendering the form I created (I copied and adapted it from the shipping tracking file).

I also created a file src/Leeway/Bundle/CollectOnDeliveryBundle/Resources/public/js/app/views/payment-transaction-collection-view.js (which I’m not really sure s actually being used though I guess it should since it’s referenced in the configureOptions method of the collectiontype).

I’m really lost here, any pointers will be much appreciated. Thanks!

[Mauro ChojrinParticipant]

I finally nailed it! The problem was I mistakenly changed the css class of a div that was referenced in the collection handling file ( public/bundles/oroui/js/app/modules/init-layout.js ).

In the line 301 it reads var $listContainer = $(this).closest('.row-oro').find(containerSelector).first();.

I had changed “row-oro” class to “row-leeway” (out of a not so smart search & replace when adapting the copied templates).

Once I put it back the way it was it all started working again :)

Thanks, hope my experience helps someone else.

[Andrey YatsenkoModerator]

It is not recommended to make JS depends on CSS classes. Sad to say, but, we still have some old code with this approach, so you should take it into account.
In all new stuff, we are trying to make JS depends on data attributes instead of CSS classes.

[Author]

Replies