Dynamic path tags in twig template

So I wanted to create a twig template that would render a table, just by defining the table headers, and pass an array of entities. The problem was that I also wanted to add action buttons like edit and delete, but the URL should be created dynamically with a changing ID. This is what I came up with.

So along with the array of entities that are passed to the twig template, an array with table Headers is being added too. The array with headers contains the id inside the entity, the name of the header, and the third element is the ‘type’. This way I can render the field as a date/time object. I also use this to set the type to action, which means I have an array with action buttons.

Then in Twig, I render the table like this:

The array with options that is being passed to Twig’s path tag, is being build up in Twig itself.

Active menu determination in Metronic theme

So we bought the Metronic theme from keenthemes. It’s fully featured and packed, but I was wondering how the theme┬ádetermines what the active link is. Browsing through the comments I found out that we’re supposed to handle this ourselves, server sided. No fancy javascript that handles this from itself.

Fortunately I found a way to determine the route in Symfony. This returns the name of the route, not the result form path. So now it’s easy to compare your current page. All I had to do is put this in Twig:

But if I use submenu’s, how would I know what parent menu should have the active class as well? Easy: just check for the first part of the route (if you set your routes smart enough though). So if you have a menu called “promotion” where you have sub menu’s like “create, list”, you might want to name your routes like _promotion_new and _promotion_list. At the parent menu item promotion you could easily check if the route starts with _promotion_. The substr equivalent is slice. So the HTML for the parent menu item would have something like this:

If you named your router less ‘smart’, you could use a larger OR compare in the if statement.

Easy does it.

Use Twig’s renderBlock to update a table row with AJAX

So I was developing a page with a table, where one could delete and edit the data on the table. Deleting was simple, it would do an AJAX request to delete, and then I’d remove the table row using jQuery.

But when you edit the row, you would also need to update the row after you did the edit. The table row was already defined in the twig template though, so couldn’t I just reuse it? Yes we can. This is probably rookie beginners stuff, but well, I’m still learning Symfony (and bootstrap, and basically all frontend stuff).

So, to illustrate, I had this piece of template in my page.

With jQuery, I had an event handler on the paginationContainer, to catch the edit button. This would open up a modal where the record can be edited. After that, the save button was pressed, which I was also catching using jQuery.

So this javascript code looked like this:

So the controller needed to just return the table row, as defined in the template at the beginning of the post. The code in the controller was like this: