Learn Django

View Contact - Add to Account Detail

The CRM Easy application design says that contacts related to an account should be listed in the account's detail page. In order to get this to work we need to update two resources. First, we need to update the account detail view to query related contacts and include the queryset in the response. Second, we need to update the account detail template to loop through the contacts and display them inline.

Step 1: Update the Account Detail View

Follow these steps to update the Account Detail view.

  1. Open /.../crmeasy/crmapp/accounts/views.py
  2. Add the import statement below
  3. Find the account_detail view and edit it so it looks like the following.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
from crmapp.contacts.models import Contact

@login_required()
def account_detail(request, uuid):

    account = Account.objects.get(uuid=uuid)
    if account.owner != request.user:
            return HttpResponseForbidden()

    contacts = Contact.objects.filter(account=account)

    variables = {
        'account': account,
        'contacts': contacts,
    }

    return render(request, 'accounts/account_detail.html', variables)

Step 2: Update the Account Detail Template

Follow these steps to update the Account Detail template.

  1. Open /.../crmeasy/crmapp/templates/accounts/account_detail.html in your IDE
  2. Locate the {# List Contacts #} comment and add this code after it
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
{# List Contacts #}
<div id="cd-container" class="ad-container">
    <div class="ad-headers">
        <h4 class="ad-mh m-none">Contacts</h4>
    </div>
    <div id="cd-body" class="row">
        <table id="cd-table" class="table table-hover">
            <tbody>
                <tr></tr>
                {% for contact in contacts %}
                    {% include 'contacts/contact_item_view.html' %}
                {% endfor %}
            </tbody>
        </table>
        {# New Contact Link #}
        <a id="new-contact" class="btn btn-link" href="">New Contact</a>
    </div>
</div>

Step 3: Commit Changes

Execute these commands to commit your changes in Git.

1
2
3
4
5
# add files
(venv)$ git add .

# commit files
(venv)$ git commit -m "integrated contact details into the account detail view"

Track your progress with a free account