I am building a django project which among others has a customer model. Any customer can be a foreign key to some calendar entry models or some picture models. I want to be able to get in to a customers page (e.g domain/customoer/1) and be able to navigate to the different models the customer is related with (e.g all the pictures for the customer, all the calendar entries of the customer). I am using bootstrap for the "presentation of the site. My idea was to use tabs. So I created a pil for my main template the customer.html
<ul class="nav nav-pills">
<li class="active">Personal Data</li>
<li>History</li>
<li>Analysis</li>
<li>Diagnosis</li>
<li>Treatment</li>
<li>Appointments</li>
<li>Graphics</li>
</ul>
and i was thinking of including a template for each pill
<div class="tab-content">
<div id="personal-data" class="tab-pane active ">
<div id="history" class="tab-pane">History is in the making</div>
<div id="analysis" class="tab-pane">
{% include 'customer/analysis.html' with customer=customer %}
</div>
<div id="diagnosis" class="tab-pane">Diagnosis is differential</div>
<div id="treatment" class="tab-pane">Treatment what treatment??</div>
<div id="appointments" class="tab-pane">Ap point ment</div>
<div id="graphics" class="tab-pane">Now this is going to be hard!</div>
The templates in each tab can do different things like upload pics navigate to different pages etc.
When i hit on a pill the url (domain/customer/1/) won't change (naturally) to inform me to which tab i am at the moment. So my question is how can i know in which tab i am ath the moment? I want the user to be able to do different things from different tabs (upload pics etc) and I want to be able to redirect to the specific tab after the view is called? Maybe #id could be appended to the url to specify the tab, but it doesn't happen with bootstrap.
What is the best way to deal with tabs in django? Ajax maybe? Will I not have the same problem? Any ideas or lings would be nice too
I use template inheritance for this kind of thing. It's simple and flexible. For example, you can define your main navigation in your base template like so:
...
<li {% block news %}{% endblock %}>News</li>
<li {% block features %}{% endblock %}>Features</li>
<li {% block sport %}{% endblock %}>Sport</li>
...
Then, in your base templates for each of those apps you'd have something like:
<!-- news/base_news.html -->
{% extends 'base.html' %}
...
{% block news %}class="active"{% endblock %}
...
Related
I'm working on my first django app, and i have side nav menu like in twitter. To prevent the dozens of lines in my template like this
<ul class="nav d-flex flex-column">
<li class="nav-item align-self-start rounded-pill mb-3"><li>
<li class="nav-item align-self-start rounded-pill mb-3"><li>
...
<li class="nav-item align-self-start rounded-pill mb-3"><li>
</ul>
and for app extensibility i want to store nav menu in database to be able to loop over the menu items
<ul class="nav d-flex flex-column">
{% for item in menu %}
<li class="nav-item align-self-start rounded-pill mb-3"><li>
{% endfor %}
</ul>
But the problem is that i can't store direct urls for menu items in database, because several of them have dynamic urls e.g. profile page, which has 'slug:username/' pattern.
I've tried to store template tags in database like
{% url 'app_name:view_name' %}
but of course it doesn't work.
My current idea is to store in database namespaced url e.g. 'app_name:view_name' for static urls and 'request.user.get_absolute_url()' for pages which have username in urls.
The next step is to get QuerySet with menu items from database, loop over them and transform namespaces url with reverse (it works), but 'request.user.get_absolute_url()' is just a string and it doesn't work. Then make list of ditcs and pass it to context
menu = [{item1 attrs}, {item2 attrs},...,]
Is exists a better approach to solve my problem? And finally what i should do with dynamic urls?
UPD:
If we're dealing with menu items whose urls depend only on usernames i.e. only on User model, we can do smth like this (NavigationMenu - table model, url_link - column with following values: 'app_name:view_name' or 'get_absolute_url'):
menu = NavigationMenu.object.all()
for item in menu:
url_link = item.url_link
if ':' in item.url_link:
url = reverse(url_link)
else:
method = getattr(request.user, url_link)
url = method()
# then store all instance attrs in dict
But it seems that is not a good way to solve this.
The ideal approach to achieve this is to create a base.html in which you build this sidebar nav item, and then include that base.html on every page where you want that sidebar.
This is an example of base.html
<!DOCTYPE html>
<html>
<head>
<title>My Project</title>
</head>
<body>
<header>
<ul>
<li>Home</li>
<li>News</li>
</ul>
</header>
{% block content %}{% endblock content %}
</body>
</html>
Include base.html in other Html files
{% extends "base.html" %}
{% block content %}
<h2>Content for My App</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry..</p>
{% endblock content %}
I'm passing two models into the html template
listings - has all the properties of the listed items (like on an auction site)
bids - has a listing field as a foreign key to link to listings (and the user who made a bit, plus the amount)
I'm looping through the listings items to display all their attributes of the individual listings on cards (that works nicely)
I want to display the bid that belongs to the individual listing if there is any (only the highest bid is passed on for each listing in the 'bid' queryset)
I suspect the problem is with the syntax here, but can't find a solution.
<p>{{bids.filter(listingID=listing.listingID)}}</p>
The error message:
Could not parse the remainder: '(listingID=listing.listingID)' from 'bids.filter(listingID=listing.listingID)'
This is my HTML template
{% extends "auctions/layout.html" %}
{% block body %}
<h2>Active Listings</h2>
<div></div>
{%for listing in listings%}
<div class="listingItem">
<div class="listingLeft">
</div>
<div class="listingRight">
<a href={{listing.id}}><h4>{{listing.listingName}}</h4></a>
<p>{{listing.listingDesc}}</p>
<p>Current bid: ${{listing.listingFirstBid}}</p>
<p>{{bids.filter(listingID=listing.listingID)}}</p>
<p class="created">Created: {{listing.listingCreated}}</p>
</div>
</div>
{%endfor%}
{% endblock %}
While implementing a Django CMS site, I’m a little stuck on link management (internal or external). In my project I have a specific box plugin the operator is to use quite often. I added screenshots of edit dialog and box rendering at the end of the question.
The edit dialog is nice, but right now the button is just a char field. So the link selection, either to a page within Django CMS or to an external URL, is missing. I looked for a link field, but until now I am lost.
How to add the feature to let the operator select an internal or external link ?
The plugin consists of these parts:
models.py
from django.db import models
from cms.models.pluginmodel import CMSPlugin
from djangocms_text_ckeditor.fields import HTMLField
class CardPlugin(CMSPlugin):
title = models.CharField(max_length=256,default='')
description = HTMLField(configuration='CKEDITOR_SETTINGS',
default='')
button = models.CharField(max_length=256,default='')
def __str__(self):
return str(self.title)
cms_plugins.py
class CardCMSPlugin(CMSPluginBase):
model = CardPlugin
name = 'Card'
render_template = "card-default.html"
card-default.html
{% load cms_tags %}
<section class="card card--primary-light">
<div class="card__inner">
<div class="card__content">
<div class="card__text">
<h2 class="card__title">
{{ instance.title }}
</h2>
<p class="card__description">
{{ instance.description }}
</p>
</div>
{% if instance.button %}
<div class="card__buttons">
{{ instance.button }}
</div>
{% endif %}
</div>
</div>
</section>
the rendered box
The plugin edit dialog looks like this:
I'd suggest looking at adding the djangocms-link plugin as a child plugin. It's a very good plugin to link to internal CMS pages or external addresses. That way you could drop the button field from your model, and instead render the child plugins in your template.
The docs on nested plugins would be a good read.
Your plugin definition would become something like this;
class ParentCMSPlugin(CMSPluginBase):
render_template = 'parent.html'
name = 'Parent'
model = ParentPlugin
allow_children = True
child_classes = ['LinkPlugin']
To render child plugins you'd then do this with your template;
{% load cms_tags %}
<section class="card card--primary-light">
<div class="card__inner">
<div class="card__content">
<div class="card__text">
<h2 class="card__title">
{{ instance.title }}
</h2>
<p class="card__description">
{{ instance.description }}
</p>
</div>
{% for plugin in instance.child_plugin_instances %}
{% render_plugin plugin %}
{% endfor %}
</div>
</div>
</section>
And that would use the default render template for the child plugin. If the default didn't match the styling etc, you could handle the rendering in the template instead of using render_plugin or subclass the LinkPlugin to work how you want, or extend it's attributes etc.
Some further consideration should do to dropping your description field in favour of also using the TextPlugin as a child, because the CMS text plugin can nest plugins within itself and is something I'd always use over an HTMLField.
Further still, if you're developing applications hooked in to CMS, take a look at PlaceholderFields which allow you to create placeholders in your own models to hold & use the CMS plugins that you can use in CMS pages. That gets really good for things like news apps or blog style content etc.
I am quite a beginner in django and I need some advices.
I am trying as much as possible to create reusable django applications that will be used in several different projects. But I don't know how to proceed with templates.
If I have an application managing user, I think the template allowing to add, remove or list a user shall be located in the application and not in the project. Templates project should define headers, footers and general organisation (correct me if I'm wrong).
However, if I want to use template inheritance I will extend project template in my application template :
{% extends "base.html" %}
{% block content %}
...
{% endblock %}
So in developping my reusable application I make the assumption that my project will have a template called base.html with a block content, and in my mind this information should not be located at application level, but in project level. In some projects I will want to display users in block content, but not necessarily in others. I could want to display user information in several places in the same page for example...
How do you developp your application template to bypass this limitation ?
Thanks in advance,
Bill
What you are describing is probably best solved with custom template tags, specifically inclusion tags.
I would do a basic html template containing a header and a footer, and many reusable templates extending the basic one, containing the different layouts I would need. I would also create reusable components (tiles, datagrids...).
For the templates :
base.html
<!doctype HTML>
<html>
<head>
....
</head>
<body>
{% block content %}
</body>
</html>
3_columns.html
{% extends "project/base.html" %}
{% block content %}
<div class="line">
<div class="column">{% block col1 %}</div>
<div class="column">{% block col2 %}</div>
<div class="column">{% block col3 %}</div>
</div>
{% endblock %}
2_lines.html
{% extends "project/base.html" %}
{% block content %}
<div class="line">{% block line1 %}</div>
<div class="line">{% block line2 %}</div>
{% endblock %}
A basic custom component :
templatetags/custom.py
import django
from django.template.defaulttags import register
#register.inclusion_tag('components/custom.html')
def custom(params):
context = {
'a': params['a'],
'b': params['b']
}
return context
templates/components/custom.html
<div class="custom">
<label>{{ a }}
<input name={{ b }}
</label>
</div>
django-admin.py collectstatic
Read docs
Files are searched by using the enabled finders. The default is to look in all locations defined in STATICFILES_DIRS and in the 'static' directory of apps specified by the INSTALLED_APPS setting.
On my django site, I decided to just use the admin templates for the UI, but I made a few tweaks like the site name, color, etc. even my custom views just extend admin/base_site.html I did this by creating templates/admin/base_site.html with the following code:
{% extends "admin/base.html" %}
{% load i18n %}
{% block title %}{{ title }} | {% trans 'Company Name' %}{% endblock %}
{% block extrastyle %}
<style>
#header{ background-color: #a67d3d; border-bottom: solid 3px #f5deb3; }
#branding h1{ color: #fff; }
</style>
{% endblock %}
{% block branding %}
<h1 id="site-name">{% trans 'My company' %}</h1>
{% endblock %}
{% block breadcrumbs %}
{% include "breadcrumb.html" %}
{% endblock %}
The entire admin site has my new title and colors. However, you can see I tried replacing the breadcrumbs bar with my own breadcrumb.html (which contains a custom nav bar). This only works on custom views that extend admin/base_site.html. the normal admin views don't replace the breadcrumbs (but they do have the new colors, company title, etc.). I can't figure out why this one piece isn't working? Moreover, I have a few custom change_form.html files. These also have the style changes, but no custom nav bar. But, if I put in the breadcrumbs block in these pages, it shows up just fine on those pages.
I worked around this by copying the original base.html file into my project's '/templates/admin/' folder, deleted the breadcrumbs block, added a "mynav" block, put my navbar there. This way my nav bar shows up on all pages, and when the lower pages try to put in a breadcrumb there's no block for them and it doesn't show up.
I don't like doing it this way but i can't think of another way. The way suggested by lazerscience would work, but I'd have to do an include in every single template (change_form, change_list, etc.). For others, i should mention, there is a "nav-global" block, but my navbar uses lists/css/jscript to display slideout menus and these menus weren't showing up if i put it in that block, not sure exactly why.
The other admin templates, eg. change_form.html override the breadcrumbs block themselves, so you need to override it also in these templates (=override them and define your block in there).