Learn Django

New Comm - Create/Update Templates

Two templates are required for the new communications functionality. The first is the parent template which will allow users to access a separate page create new communications. The second is the actual form itself. Breaking the new communication form out like this then allows us to embed the form into the account detail page, which is the last step you'll complete in this lesson.

Step 1: Create the Parent Template

The parent template will allow users to access /comm/new/ to create new communications. Create it following these steps.

  1. Navigate to /.../crmeasy/crmapp/templates/communications
  2. Create a file there named comm_cru.html
  3. Open that file and type in the following
1
2
3
4
5
6
7
8
9
{% extends 'base.html' %}
{% block title %}Communication Operation{% endblock title %}

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

Step 2: Create the Form Item Template

Next, create the form item template. This template is referenced in the above parent template. It will also be emeded into the account detail template.

  1. Navigate to /.../crmeasy/crmapp/templates/communications
  2. Create a file there named comm_item_form.html
  3. Open that file and type in the following
 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
32
33
34
<form id="comm-form"
      {# POST Destination #}
      action=""
      method="post">
    {% csrf_token %}
    <p>{{ form.subject }}</p>
    <div id="comm-form-internals">
        <p>{{ form.subject.errors }}</p>
        <p>{{ form.notes }}</p>
        <p>{{ form.notes.errors }}</p>
        <table class="table comm-form">
            <tbody>
                <tr>
                    <td>{{ form.kind }}</td>
                    <td>{{ form.date }}</td>
                    <td class="comm-submit-td">
                        <input class="btn btn-success comm-submit"
                               type="submit" value="SAVE"/></td>
                </tr>
                <tr>
                    <td>{{ form.kind.errors }}</td>
                    <td>{{ form.date.errors }}</td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>

    <input id="id_account" name="account"
           type="hidden"
           value="{% if request.GET.account %}
           {{ request.GET.account }}{% else %}{{ account.id }}{% endif %}"/>
    <input id="id_owner" name="owner" type="hidden" value="{{ user.username }}"/>
</form>

Step 3: Add Form to Account Detail view

Lastly, embed the form item template into the account detail template so that users can create new communications directly from that page. Open /.../crmeasy/crmapp/templates/accounts/account_detail.html, locate the '{# Communications Item Form #}' comment, and add this below it.

1
2
3
4
{# Communications Item Form #}
<div id="co-form-wrapper">
    {% include 'communications/comm_item_form.html' %}
</div>

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 the new communication templates"

Track your progress with a free account