Quickstart

  1. Install django-popupcrud using pip:

    pip install django-popucrud

    Or install it directly from the source repository:

    pip intall git+https://github.com/harikvpy/django-popupcrud.git

    Yet another way would be to clone this repository and install from the cloned root folder via pip install -e ..

  2. Install the dependencies - django-bootstrap3 and django-pure-pagination. Add the dependencies and popupcrud to INSTALLED_APPS in your project’s settings.py:

    INSTALLED_APPS = [
    ...
    'bootstrap3',
    'pure_pagination',
    'popupcrud',
    ...
]

  3. Let PopupCrudViewSet know of your base template file name. This defaults to base.html, but if your project uses a different base template filename, inform PopupCrudViewSet about it in settings.py:

    POPUPCRUD = {
    'base_template': 'mybase.html',
}

    Include Bootstrap CSS & JS resources in this base template. If you were to use django-bootstrap3 tags for these, your base template should look something like this:

    <head>
    {% bootstrap_css %}
    <script src="{% bootstrap_jquery_url %}" type="text/javascript" charset="utf-8"></script>
    {% bootstrap_javascript %}
    {% block extrahead %}{% endblock extrahead %}
</head>

    Also, define a block named extrahead within the <head> element. PopupCrudViewSet views use a few custom CSS styles to show column sorting options and sort priority. These styles are defined in static/popupcrud/css/popupcrud.css which is inserted into the extrahead block. If you don’t declare this block, you will have to explicitly load the stylesheet into your base template.

  4. In your app’s views.py, create a ViewSet for each model for which you want to support CRUD operations.

    Models.py:

    from django.db import models

class Author(models.Model):
    name = models.CharField("Name", max_length=128)
    penname = models.CharField("Pen Name", max_length=128)
    age = models.SmallIntegerField("Age", null=True, blank=True)

    class Meta:
        ordering = ('name',)
        verbose_name = "Author"
        verbose_name_plural = "Authors"

    def __str__(self):
        return self.name

    Views.py:

    from popupcrud.views import PopupCrudViewSet

class AuthorViewSet(PopupCrudViewSet):
    model = Author
    fields = ('name', 'penname', 'age')
    list_display = ('name', 'penname', 'age')
    list_url = reverse_lazy("library:authors:list")
    new_url = reverse_lazy("library:authors:create")

    def get_edit_url(self, obj):
        return reverse_lazy("library:authors:update", kwargs={'pk': obj.pk})

    def get_delete_url(self, obj):
        return reverse_lazy("library:authos:delete", kwargs={'pk': obj.pk})

  5. Wire up the CRUD views generated by the viewset to the URLconf:

    urlpatterns= [
    url(r'^authors/', views.AuthorCrudViewset.urls()),
]

    This will register the following urls:

    • authors/ - list view
    • authors/create/ - create view
    • authors/<pk>/ - detail view
    • authors/<pk>/update/ - update view
    • authors/<pk>/delete/ - delete view

    The urls are registered under its own namespace, which defaults to the model’s verbose_name_plural meta value.

  6. Thats it! Your modern HTML popup based CRUD for your table is up and running.

    PopupCrudViewSet has many options to customize the fields displayed in list view, form used for create/update operations, permission control and more. Refer to the Reference and How-to sections of the documentation for more details.