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.
- Navigate to
/.../crmeasy/crmapp/templates/contacts
- Create a file here named
contact_cru.html
- 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.
- Navigate to
/.../crmeasy/crmapp/templates/contacts
- Create a file here named
contact_item_form.html
- 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"