How to add custom view page to django admin?

Question

I have a parent-child models.
It's kind of a coctail recipe, but it's about fish foods.

I want to give a recipe calculator for each recipe.
My current approach simply just add a link column at the list-view

here is a snip of my admin.py

class BahanCampuranAdmin(admin.ModelAdmin):
    list_display = ('name','_isfood', '_vubuy','_pbuy','userv','uconv','_bikin')
    fields = ('isfood','name', 'ubuy', 'vbuy','userv','uconv')
    readonly_fields = ['pbuy']
    inlines = [
            KomponenCampuranAdmin,
        ]

    def get_queryset(self, request):
        qs = super().get_queryset(request)
        return qs.filter(user=request.user)


    def _bikin(self,obj):
        if obj.ingridient.exists() :
            link="<a href='/catatkolam/recipecalc/{0}'>bikin</a>"
            return format_html(link, obj.id)
        return '-'
    _bikin.allow_tags=True
    _bikin.short_description='Bkin'

...

This is what I got when clicking the link at the rightmost column.

Look that it throw the user out of 'admin site'

Here is my current template.

{% extends "admin/base.html" %}

{% block content %}

  
<style>
.Recipe-IngredientList {
  width: 250px;
  border: 1px solid #777;
  border-radius: 3px;
  padding: 5px;
  margin-top: 5px;
}
.Recipe-Ingredient {
  border-bottom: 1px solid black;
  padding: 5px 0;
}
.Recipe-Ingredient:last-child {
  border-bottom: none;
}
.Recipe-Ingredient span {
  font-weight: 600;
}
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


<div>
    <label for="serving">
      <h3>{{name}}</h3>
      <input type="number" id="servingInput" value={{vbuy}}>
      <span STYLE="font-weight:bold">{{ubuy}}</span>
    </label>

  <div class="Recipe-IngredientList">
    {%for k in komponen%}
      <div class="Recipe-Ingredient js-recipeIngredient" data-baseValue={{k.qty}}>{{k.name}} : <span></span> {{k.userv}}</div>
    {% endfor %}
  </div>
</div>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script id="rendered-js" >
// Recipe calculator with jquery
var computeServing = function (serving) {
  $('.js-recipeIngredient').each(function (index, item) {
    $(item).children('span').html(($(item)[0].dataset.basevalue * serving).toFixed(2));
  });
};
$('#servingInput').on('change', function () {
  computeServing($(this).val());
});

computeServing(1);

</script>
{% endblock %}

and here is my app's urls.py

from django.urls import path

from . import views
app_name = 'catatkolam'
urlpatterns = [path('', views.index , name='index'),
    path('/recipecalc/<int:id>', views.recipecalc , name='recipecalc')]

My question is: How to show that recipe calculator still inside the admin site?
Like :

Rahul Chauhan · Accepted Answer · 2021-10-19 05:08:06Z

2

In your admin.py file, add following:

def get_urls(self):
    urls = super(Theme, self).get_urls()
    my_urls = [
        path('', self.admin_site.admin_view(self.calc_settings), name='calc_settings')
    ]
    return my_urls + urls

def calc_settings(self, request):
    objSetting = Settings()
    context = dict(
       # This will make the left side bar navigation appear with all controls.
       self.admin_site.each_context(request),
       opts = Settings._meta,
       app_label = Settings._meta.app_label,
    )

    #Add your calculator logic here.
    return render(request, 'admin/settings/calc.html', context)

answered Oct 19, 2021 at 5:08

Rahul Chauhan

615 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohamad Malekzahedi · Accepted Answer · 2022-11-23 16:50:10Z

1

Define that URL in get_urls method of your BahanCampuranAdmin class and wrap your view in self.admin_site.admin_view.

    def get_urls(self):
        urls = super().get_urls()
        custom_urls = [
            path('recipecalc/<int:id>', self.admin_site.admin_view(views.recipecalc) , name='recipecalc'),
        ]
        return custom_urls + urls

edited Nov 23, 2022 at 16:50

answered Apr 29, 2021 at 14:19

Mohamad Malekzahedi

2533 silver badges8 bronze badges

6 Comments

Bino Oetomo Over a year ago

Now I can use your solution to make links like ' 10.10.255.203:89/admin/catatkolam/bahancampuran/recipecalc/7'. but I still got same looks as 2nd picture above.

Bino Oetomo Over a year ago

I tried to extend 'admin/change_form.html' at 'block field_sets'. The top nav-bar looks like standard admin site, but the left side nav-bar still not shown.

Mohamad Malekzahedi Over a year ago

Hmm. Perhaps not regarded, extend base_site instead of base. But for your problem, Django source code says available_apps, is_nav_sidebar_enabled, and, is_popup variables must be provided to show side navbar.( Look at github.com/django/django/blob/main/django/contrib/admin/… line 73 and github.com/django/django/blob/main/django/contrib/admin/… line 3). I don't know how you can provide them.

Mohamad Malekzahedi Over a year ago

Pass it to context of your view doesn't fix it?

C.K. Over a year ago

path('recipecalc/<int:id>', ...... delete the / at the beginning.

|

Collectives™ on Stack Overflow

How to add custom view page to django admin?

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related