New Contact - Create/Update Templates

There are two templates that we need to build in order to create new contacts. The first template is the parent, and will allow users to go to '/contact/new/' to create a new contact. The other template contains just the form required to do so. This form can then be imported anywhere it's needed, like on the Account Detail page (hint, hint).

Step 1: Create the Contact Create/Update Page

Follow these steps to create this template.

  1. Navigate to /.../crmeasy/crmapp/templates/contacts
  2. Create a file here named contact_cru.html
  3. Open this file in your IDE for and add this code
1
2
3
4
5
6
7
8
9
{% extends 'base.html' %}
{% block title %}Contact Operation{% endblock title %}

{% block content %}
    <div id="content-container" class="container p-none">
        <h4 class="ad-mh">Add a Contact</h4>
        {% include 'contacts/contact_item_form.html' %}
    </div>
{% endblock content %}

Step 2: Create the Contact Create/Update Form Template

Follow these steps to create the form template.

  1. Navigate to /.../crmeasy/crmapp/templates/contacts
  2. Create a file here named contact_item_form.html
  3. Open this file in your IDE for and add this code
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<form id="contact-form"
      {# POST Destination #}
      action=""
      method="post">
    {% csrf_token %}
    <table class="table">
        <tbody>
            <tr>
                <td class="p-l-none">{{ form.first_name }}</td>
                <td>{{ form.last_name }}</td>
                <td>{{ form.role }}</td>
                <td>{{ form.phone }}</td>
                <td class="p-r-none">{{ form.email }}</td>
            </tr>
            {% if form.errors %}
                <tr>
                    <td>{{ form.first_name.errors }}</td>
                    <td>{{ form.last_name.errors }}</td>
                    <td>{{ form.role.errors }}</td>
                    <td>{{ form.phone.errors }}</td>
                    <td>{{ form.email.errors }}</td>
                </tr>
            {% endif %}
        </tbody>
    </table>
    <input id="id_account" name="account"
           type="hidden"
           value="{% if request.GET.account %}
           {{ request.GET.account }}{% else %}{{ account.id }}{% endif %}"/>
    <input id="contact-submit" class="btn btn-primary m-r-none" type="submit" value="SAVE"/>
</form>

Code Review

Line 26: When creating a Contact, our app needs to know which Account to relate it to. To let the Contact Create/Update view know, we pass the Account ID via a hidden <input> element. If this is a new account form the ID will come from a URL parameter. If this the editing of an account the ID will come from the view.

Step 3: Update the New Contact Link Template

Open account_detail.html and update the new contact link as follows.

1
2
3
4
5
{# New Contact Link #}
<a id="new-contact"
   class="btn btn-link"
   href="{% url 'contact_new' %}?account={{ account.id }}">
   New Contact</a>

Step 4: 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 "created new contact templates"

Track your progress with a free account