Form tabs¶

Baton provides an easy way to define form tabs in yor change form templates. Everything is done through javascript and you only need to add some classes you your ModelAdmin fieldsets

from django.contrib import admin
from .models import Item, Attribute, Feature

class AttributeInline(admin.StackedInline):
    model = Attribute
    extra = 1

class FeatureInline(admin.StackedInline):
    model = Feature
    extra = 1

class ItemAdmin(admin.ModelAdmin):
    list_display = ('label', 'description', 'main_feature', )
    inlines = [AttributeInline, FeatureInline, ]

    fieldsets = (
        ('Main', {
            'fields': ('label', ),
            'classes': ('baton-tabs-init', 'baton-tab-inline-attribute', 'baton-tab-fs-content', 'baton-tab-group-fs-tech--inline-feature', ),
            'description': 'This is a description text'

        }),
        ('Content', {
            'fields': ('text', ),
            'classes': ('tab-fs-content', ),
            'description': 'This is another description text'

        }),
        ('Tech', {
            'fields': ('main_feature', ),
            'classes': ('tab-fs-tech', ),
            'description': 'This is another description text'

        }),
    )

Rules¶

Inline classes remain the same, no action needed
In the first fieldset define a baton-tabs-init class which enables tabs
On the first fieldset, you can add an order-[NUMBER] class, which will be used to determined in which position to place the first fieldset. The order starts from 0, and if omitted, the first fieldset has order 0. If you assign for example the class order-2 to the first fieldset, then the first fieldset will be the third tab, while all other tabs will respect the order of declaration.
For every InLine you want to put in a separate tab, add a class baton-tab-inline-MODELNAME or baton-tab-inline-RELATEDNAME if you’ve specified a related_name to the foreign key
For every fieldset you want to put in a separate tab, add a class baton-tab-fs-CUSTOMNAME, and add a class tab-fs-CUSTOMNAME on the fieldset
For every group you want to put in a separate tab, add a class baton-tab-group-ITEMS, where items can be inlines (inline-RELATEDNAME) and/or fieldsets (fs-CUSTOMNAME) separated by a double hypen --. Also add a class tab-fs-CUSTOMNAME on the fieldset items.
Tabs order respects the defined classes order
Fieldsets without a specified tab will be added to the main tab. If you want the fieldset to instead display outside of any tabs, add a class tab-fs-none to the fieldset. The fieldset will then always be visible regardless of the current tab.

Other features:

when some field has an error, the first tab containing errors is opened automatically
you can open a tab on page load just by adding an hash to the url, i.e. #inline-feature, #fs-content, #group-fs-tech–inline-feature