Learn Django

View Account - Create Templates

This lesson will show you how to build the account detail page. This page will consist of two template files. This lesson will show you how to build both.

You may be wondering why this page is built with two template files. It's designed this way so that JavaScript can be used to more easily update part of the page. If you recall back to the demo application, a user can click on an accounts edit link to change the name, description, and/or address. Part of what makes this work is the ability to fetch templates from Django that contain just the HTML elements to display the account details. That's what is happening here. We are breaking the template up into parts that can be updated separately.

Follow these steps to create the template.

Step 1: Create the Parent Template

Follow the steps below to create the template.

  1. Open the /.../crmeasy/crmapp/templates/accounts folder
  2. In this folder create a file named account_detail.html
  3. Open this file in your IDE

Step 2: Code the Parent Template File

Now type in the following code into the file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
{% extends 'base.html' %}

{% block content %}
    <div id="content-container" class="container p-none">
        <div id="ad-container">
            <div id="gi-container" class="ad-container">
                {% include 'accounts/account_item_view.html' %}
            </div>
        </div>
        {# List Contacts #}
        {# List Communications #}
    </div>

{% endblock %}

Code Review

Line 7: This is the {% include %} template tag. This allows us to import other templates into this file. In this example it's importing a template that will be created in the next lesson. This is useful because it makes it possible to create templates that can be used in more than one location. It also makes it easier to refresh only portions of our page via AJAX requests, which is why it is being used here.

Step 3: Create the Item Template File

In the previous step you created the account_detail.html template. This template included another template; accounts/account_item_view.html. This template contains the HTML elements needed to display the account's information. Follow these steps to build it.

  1. Navigate to the /.../crmeasy/crmapp/templates/accounts folder
  2. Create a file named account_item_view.html
  3. Open that file for editing

Step 4: Code the Item Template File

With the file open, type in the following HTML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="gi-header">
    <h3 class="ad-mh">{{ account.name }}
        {# Account Edit Link #}
        <span>
            <a class="ad-control edit-account btn btn-link"
               href="">Edit</a>
        </span>
    </h3>

</div>
<div class="row gi-body">
    <div class="col-md-9">
        <h5 class="gi-sh">Description</h5>
        <p>{{ account.desc }}</p>
    </div>
    <div class="col-md-3">
        <h5 class="gi-sh">Address</h5>
        <p class="nm">{{ account.address_one }}</p>
        <p class="nm">{{ account.address_two }}</p>
        <p class="nm">{{ account.city}}, {{ account.state }}</p>
        <p class="nm">{{ account.phone}}</p>
    </div>
</div>

Code Review

Instead of going line-by-line in this file I'll just point out one interesting point. You'll notice that object information is being displayed by using {{ account.name }} notation. If you recall, the account object was passed into this template from the view. Using the {{ account.x }} notation, where x is the name of the attribute, we can display said attribute.

3. Update Account List

There's a link on the account list page that points to the account detail record. Open /.../crmeasy/crmapp/templates/accounts/account_list.html, find this code and update it.

1
2
3
4
5
# old code
<a href=""><h4 class="al-name">{{ account.name }}</h4></a>

# new code
<a href="{{ account.get_absolute_url }}"><h4 class="al-name">{{ account.name }}</h4></a>

Track your progress with a free account