components.rst

Components

Columns

If you take a look to the directory "templates/cruds/columns" you can see the different kinds of colums depending on the type of field:

autofield.html
booleanfield.html
charfield.html
datefield.html
datetimefield.html
filefield.html
textfield.html
timefield.html

You can override the column type in lists pages with the custom html you want for your project. Just recreate the structure (templates/cruds/columns/) in your project and write your own html.

Forms

If you want to override a form with some other crispy features you can add to your testapp.urls the following:

from cruds_adminlte.urls import crud_for_model
urlpatterns += crud_for_model(Author, views=['create', 'update'],
    add_form=AuthorForm,  update_form=AuthorForm )

And define the AuthorForm with tabs or any other crispy feature in your app:

self.helper.layout = Layout(
    TabHolder(
        Tab(
            _('Basic information'),
            Field('name', wrapper_class="col-md-6"),
            Field('address', wrapper_class="col-md-6"),
            Field('email', wrapper_class="col-md-12"),
        ),
        Tab(
            _('Other information'),
            Field('image', wrapper_class="col-md-6"),
            Field('cropping', wrapper_class="col-md-6"),
            Field('cif', wrapper_class="col-md-6"),
            Field('slug', wrapper_class="col-md-6")
        )
    )
)

You will get something similar to this:

Crispy tabbed form sample

forms.py:

class CustomerForm(forms.ModelForm):

    class Meta:
        model = Customer
        fields = ['name', 'image', 'cropping']
        widgets = {
            'image': ImageCropWidget,
        }

    def __init__(self, *args, **kwargs):
        super(CustomerForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper(self)

        self.helper.layout = Layout(
            TabHolder(
                Tab(
                    _('Basic information'),
                    Field('name', wrapper_class="col-md-6"),
                    Field('address', wrapper_class="col-md-6"),
                    Field('email', wrapper_class="col-md-12"),
                ),
                Tab(
                    _('Other information'),
                    Field('image', wrapper_class="col-md-6"),
                    Field('cropping', wrapper_class="col-md-6"),
                    Field('cif', wrapper_class="col-md-6"),
                    Field('slug', wrapper_class="col-md-6")
                )
            )
        )

        self.helper.layout.append(
            FormActions(
                Submit('submit', _('Submit'), css_class='btn btn-primary'),
                HTML("""{% load i18n %}<a class="btn btn-danger"
                        href="{{ url_delete }}">{% trans 'Delete' %}</a>"""),
            )
        )

Fields

Cropping widget

models.py:

from image_cropping import ImageCropField, ImageRatioField
class Customer(models.Model):
    name = models.CharField(_('Customer'), max_length=200)
    image = ImageCropField(upload_to='media/customers', blank=True)
    cropping = ImageRatioField('image', '430x360')

forms.py:

class CustomerForm(forms.ModelForm):

    class Meta:
        model = Customer
        fields = ['name', 'image', 'cropping']
        widgets = {
            'image': ImageCropWidget,
        }

Select2 widget

By default all the select are automatically converted in select2.

DatePicker widget

forms.py:

from cruds_adminlte import DatePickerWidget

class CustomerForm(forms.ModelForm):

    class Meta:
        model = Customer
        fields = ['name', 'date']
        widgets = {
            'date': DatePickerWidget(attrs={'format': 'mm/dd/yyyy',
                                            'icon': 'fa-calendar'}),
        }

TimePicker widget

forms.py:

from cruds_adminlte import TimePickerWidget

class CustomerForm(forms.ModelForm):

    class Meta:
        model = Customer
        fields = ['name', 'time']
        widgets = {
            'time': TimePickerWidget(attrs={'icon': 'fa-clock-o'}),
        }

DateTimePicker widget

forms.py:

from cruds_adminlte import DateTimePickerWidget

class CustomerForm(forms.ModelForm):

    class Meta:
        model = Customer
        fields = ['name', 'datetime']
        widgets = {
            'datetime': DateTimePickerWidget(attrs={'format': 'mm/dd/yyyy HH:ii:ss',
                                                    'icon': 'fa-calendar'}),
        }

ColorPicker widget

forms.py:

from cruds_adminlte import ColorPickerWidget

class CustomerForm(forms.ModelForm):

    class Meta:
        model = Customer
        fields = ['name', 'color']
        widgets = {
            'color': ColorPickerWidget,
        }

CKEditor widget

forms.py:

from cruds_adminlte import CKEditorWidget

class CustomerForm(forms.ModelForm):

    class Meta:
        model = Customer
        fields = ['name', 'text']
        widgets = {
            'text': CKEditorWidget(attrs={'lang': 'es'}),
        }