How to add plus button like Django admin in my templates

Using Django Templates & Frontend
1

I’ve these models

class ServiceType(BaseModel):
    name = models.CharField(max_length=150)
    is_active = models.BooleanField(default=True)

class EventStaff(BaseModel):
    event = models.ForeignKey(Event, on_delete=models.PROTECT, related_name="event_staff")
    service_type = models.ForeignKey(ServiceType, on_delete=models.PROTECT, null=True)
    is_active = models.BooleanField(default=True)

In django admin we are able to add the ForeignKey fields like service_staff when we are creating EventStaff instance by clicking plus icon and popping a new window.

image
image692×106 4.27 KB

We can add service_staff then that new service_staff also available in the options of EventStaff’s service_staff select options.

I want to implement the same functionality in my templates where I can do the same, Is there a blog or maybe any post or tutorial.
Please let me know.

2

If you want to implement the same functionality, then your best “tutorial” would be to examine the JavaScript that Django uses to do this.

You can find the code for what the admin is doing in django.contrib.admin.static.admin.js.admin.RelatedObjectLookups.js

There’s a lot of code that you probably don’t need to worry about, because this implementation is designed to work with all models generically. But the basic idea is that it opens a new window to the “Create” page for the target model.

3

Hello, I’ve gone through the JS code from this file RelatedObjectLookups.js there is indeed a lot of code that got me confused but I got another work around with it taking reference from this file.
Thanks for pointing this file.