Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, learn how to customize how the detail view looks, including grouping related fields together, adding horizontal select options, and showing choices in tabular format.
[MUSIC]
0:00
[SOUND] Welcome back.
0:01
In the last stage,
we were all about the list view.
0:05
In this stage, we're moving onto the
detail view, where updates usually happen.
0:09
Although we know now that updates
can happen in the list view.
0:15
Go us!
0:19
Django does a really good job at
automatically displaying the information
0:21
we need.
0:25
But sometimes it doesn't know the best
format to display something in.
0:26
For example,
when we have a list of options for
0:30
a particular field on our model,
it might make more sense to display those
0:33
in a tabular format rather than stack
them one right on top of the other.
0:37
Or we might want to group related fields
together, like all the address fields,
0:43
or all the fields related to ingredients.
0:48
These changes can make the admin
site easier to use, and
0:51
can help you make fewer mistakes when
changing information on your site.
0:55
So start up workspaces,
and let's get to work.
0:59
First, let's group a set
of related fields together.
1:04
A really nice place to do this
might be on the text detail page.
1:08
Start your server and
take a look at this page with me.
1:12
In this section,
we have four fields that are required.
1:15
Those are the ones in bold.
1:19
We then have this field that
isn't required, Content.
1:21
Let's group those required
fields together and
1:26
let the user expand Content if
they want to add something there.
1:29
Over here in admin.py we're gonna go down,
all the way down, to TextAdmin.
1:34
And what we're going to do is add two
field sets, or two groups of fields.
1:42
Now first, we have to comment out fields.
1:47
Because if we have fields and filedsets,
1:51
Django will get a little bit confused,
and we'll get this nasty error.
1:54
The second thing we do is we create
this attribute fieldsets as a tuple.
1:59
Then into the tuple, we need to put
the two fieldsets that we want, and
2:07
those will also be tuples.
2:11
So we'll add None and a dictionary.
2:13
And then we'll add, Add content,
and another dictionary.
2:19
The None and Add content are what we want
the headings of the fieldsets to say.
2:25
Now I don't want the top heading to
say anything, it doesn't need to.
2:31
But I want the bottom heading to say,
Add content,
2:35
because this is some optional
field that they have available.
2:39
As the second element in the tuples for
the fieldsets, we have these dictionaries.
2:43
So, for both of the dictionaries
we'll add fields as a key.
2:48
And then as the value,
2:53
we'll pass in a tuple of the fields
that we want to have in that field set.
2:55
So, for example, in the top section,
3:00
that top field set, I wanna have course,
3:05
title, order and description.
3:10
And then for the second one,
gonna have fields as the key.
3:18
And then for the value I'll have that
tuple, and this will be called content.
3:25
And remember, since it's a tuple we
have to add this trailing comma so
3:28
that Python knows that this is a tuple.
3:32
All right, if you need to, restart your
server, and then refresh this page.
3:37
Awesome, so now you can see,
3:43
we have this section here at the top that
doesn't have any sort of bar up here.
3:45
And it has Course, Title,
Order and Description all ready.
3:49
But then we have this second
section down here with the blue
3:53
bar that says Add content.
3:57
And then we can type whatever we
want to into the Content box here.
3:59
Now, again, this is a really great time
to reorder the fields if you want to.
4:04
So for example, I put course first,
because I think it makes them most sense
4:09
to select the course that you're adding
text for first before doing anything else.
4:14
Now, we just need to make content
collapse whenever we first see it.
4:20
So to do this we add one more
key to the dictionary for
4:24
Add content, and
this key is going to be called classes.
4:29
And we pass in collapse as the value.
4:35
Save that.
4:41
Refresh the page.
4:44
That's awesome.
4:47
So now you can see that we've added
this collapse class to the field set so
4:48
that it automatically collapses
whenever we load the page.
4:53
We just click on Show to expand it,
4:56
and then Hide when we don't
wanna see it anymore.
4:58
That's great.
5:02
Great work!
5:04
You've learned one useful way to change
how the fields look on the admin site.
5:06
But I've got a few more
tricks to show you, so
5:10
head over to the next video to see how
else you can improve the detail view.
5:13
You need to sign up for Treehouse in order to download course files.
Sign up