Question

I’m new to the web development world – that means I’m new to javaScript/CSS. Now I’m building a web system with Python Django. I’m wondering would you like to give me some hints as the starting point for adding “tabbed” interface to Django admin?

For example, there are 3 detail table for a master table, and I want to use 3 different tabs for editing that 3 detail tables in the ‘edit’ page for the master table. Thank you in advance!

Answer 1

First of all you need to decided whether solve this with javascript or by overriding the templates. Both of these are good solutions depending on your requirements.

One easy way to do this, and a first approach you can take to start testing this is to put every tab in a different fieldset and afterwards make a tabbed interface to show/hide them. It’s pros is that it’s a really easy way to do it, a cons that you don’t have much flexibility without start changing to much DOM with javascript.

You should take in consideration that if you change tabs the user might forget they changed something and leave without saving, so an alert they are leaving the page and not saving it is always a good idea.

Another approach is to override the change_form template for that particular model and link new tabs to the same url but with different GET parameters, eg. …/mymodel/?active_tab=2 and check this in the template / view and render the appropiate content. The most notable pro of doing it this way is that the user doesn’t need to have javascript enabled.

You can check out how django-cms does it. It has a very nice tabbed interface to change between different languages. One of the best ways to decide how to start doing something is checking out how others did it. Browser the source code, install it and start experimenting!

Hope this helps.

EDIT

Another example approach is here. It’s easier to just go through the patch attached than the complete django-cms code. Cheers.