3

I'm having trouble finding the best way to override and add custom html to an edit/add model form in my Django admin site.

Here are the two models involved here:

  • Icon model used to store "Font Awesome" Icons:
class Icon(models.Model):
    name = models.CharField(max_length=100, null=False)
    style = models.CharField(max_length=10, choices=STYLE_CHOICES, null=False)
    retired = models.BooleanField(default=False)

    def delete(self):
        self.retired = True
        self.save()

    objects = NotRetiredManager()

    objects_deleted = DeletedManager()

    def __str__(self):
        return self.name  

  • Workbook model that holds foreign key reference to the above Icon model:
class Workbook(models.Model):
    client = models.ForeignKey(Client, on_delete=models.SET_NULL, null=True)
    icon = models.ForeignKey(Icon, on_delete=models.SET_NULL, null=True, blank=True)    
    name = models.CharField(max_length=100)
    workbookLink = models.CharField(max_length=1000)
    retired = models.BooleanField(default=False)

    def delete(self):
        self.retired = True
        self.save()

    objects = NotRetiredManager()

    objects_deleted = DeletedManager()

    def __str__(self):
        return self.name  

Here are the overridden admin models for the above models:

class BaseAdmin(AdminImageMixin, admin.ModelAdmin):
    def delete_queryset(self, request, queryset):
        for obj in queryset:
            obj.delete()

@admin.register(Workbook)
class WorkbookAdmin(BaseAdmin):

    list_display = ("name", "client")
    list_filter = (NameFilter, ClientNameFilter)

    ordering = ("name", )

@admin.register(Icon)
class IconAdmin(BaseAdmin):
    fields = ("name", "style", "icon_display")

    list_display = ("icon_display", "name", "style" )
    list_display_links = ("icon_display", "name")
    list_filter = (NameFilter, )

    ordering = ("name", )

    def icon_display(self, obj):
        return mark_safe(f'<i class="{obj.style}{obj.name}"></i>')

    readonly_fields = ["icon_display"]

Here is a list display of some Icons I have in my database: Screenshot of Icon List Display Page on Admin Site

Currently, the add/edit page for a Workbook on my Admin Site looks like this: Screenshot of Workbook Edit page on Admin Site

I would like for that dropdown in that second screenshot to be customized similar to the "Icon Display" column in that first screenshot so that a user would choose from graphical list of icons as opposed to the default choicefield form containing the Icon names.

I've looked into the Django docs as well as similar questions on here such as this Similar Stack Overflow Question; however, I'm not fully understanding the proper way to implement something like this.

I hope the information I provided about my app is useful. Please let me know if you'd like me to provide any additional information, or add any clarifications!

Yamen Alghrer
  • 651
  • 6
  • 12
  • I think what OP is asking is: How do you make the drop down in the second image, show the Icons from the first image. AKA - how do you make a foreign key drop down show an icon. – Jamie Marshall Mar 12 '20 at 22:16

0 Answers0