Move form templating logic to the ModalFormView

Registered by Thai Tran

Below is a typical form:

{% extends "horizon/common/_modal_form.html" %}
{% load i18n %}
{% load url from future %}
{% block form_id %}update_role_form{% endblock %}
{% block form_action %}{% url 'horizon:admin:roles:update' role.id %}{% endblock %}
{% block modal-header %}{% trans "Update Role" %}{% endblock %}
{% block modal-body %}
<div class="left">
    <fieldset>
    {% include "horizon/common/_form_fields.html" %}
    </fieldset>
</div>
<div class="right">
    <h3>{% trans "Description" %}:</h3>
    <p>{% trans "From here you can edit the role's details." %}</p>
</div>
{% endblock %}
{% block modal-footer %}
  <a href="{% url 'horizon:admin:roles:index' %}" class="btn btn-default cancel">{% trans "Cancel" %}</a>
  <input class="btn btn-primary" type="submit" value="{% trans "Update Role" %}"/>
{% endblock %}

----------------------------------------------------------------------------------------------------------------------------------------------------
In a typical form, many variables such as id, action_url, success_url, cancel button, submit button are repeated. Currently, we are redefining these variables by overriding them using blocks. It is much cleaner to define these variables in python, and let the base modal_form.html populate them. That way, most of our logic is in one place and we would also reduce the clutter in the templates.

In addition, the left and right part of the modal is consistently use. It make sense for us to make that the default template, and let users override the right part while keeping the left. But we also need to retain the ability to override entire thing if required. Something like this should suffice:

<div class="modal-body clearfix">
  {% block modal-body %}
 <div class="left">
   <fieldset>{% include "horizon/common/_form_fields.html" %}</fieldset>
 </div>
 <div class="right">
   {% block modal-body-right %}{% endblock %}
 </div>
  {% endblock %}
</div>

----------------------------------------------------------------------------------------------------------------------------------------------------
So what exactly am I proposing?

class ModalFormView:
  id - the unique identifier of this form
  name - the header of this form
  action_url - the url to trigger the confirm action
  success_url - the url to redirect for cancel action and success
  confirm_label - the label for the confirm button
  cancel_label - the label for the cancel button

Now a typical form can look like:

{% extends "horizon/common/_modal_form.html" %}
{% load i18n %}
{% load url from future %}
{% block modal-body-right %}
    <h3>{% trans "Description" %}:</h3>
    <p>{% trans "From here you can edit the role's details." %}</p>
{% endblock %}

Blueprint information

Status:
Complete
Approver:
David Lyle
Priority:
Medium
Drafter:
Thai Tran
Direction:
Approved
Assignee:
Thai Tran
Definition:
Approved
Series goal:
None
Implementation:
Implemented
Milestone target:
None
Started by
David Lyle
Completed by
Thai Tran

Related branches

Sprints

Whiteboard

Gerrit topic: https://review.openstack.org/#q,topic:bp/form-template-to-view,n,z

Addressed by: https://review.openstack.org/112162 -- merged
    Ability to add form confirm/cancel button labels

Gerrit topic: https://review.openstack.org/#q,topic:bug/1350953,n,z

Addressed by: https://review.openstack.org/111857 -- abandoned
    Align modal form buttons

2014-08-11 Timur Sufiev: could an ability to change modal form backdrop appearance and behavior also be implemented as part of this blueprint? By default modal form is closed after clicking outside of it on dark backdrop (attribute data-backdrop="true"). For the forms with a lot of fields this could lead to a loss of data the user had entered before he has unintentionally clicked outside of the form. So more preferable option for such forms would be data-backdrop="static".

Addressed by: https://review.openstack.org/113206
    Ability to change modal form backdrop element behavior

2014-08-11 Thai Tran: that makes a lot of sense. Can definitely add that as part of blueprint.

Gerrit topic: https://review.openstack.org/#q,topic:bug/1062065,n,z

Addressed by: https://review.openstack.org/123472 -- merged
    Modal form cleanup

Addressed by: https://review.openstack.org/123540
    Clean modal forms in Idenity Groups

Addressed by: https://review.openstack.org/123550
    Clean modal forms in Idenity Users

Addressed by: https://review.openstack.org/123560
    Clean modal forms in Idenity Roles

Gerrit topic: https://review.openstack.org/#q,topic:modal-form-cleanup,n,z

Addressed by: https://review.openstack.org/122398
    Refactor horizon/common/_modal_form.html template

Addressed by: https://review.openstack.org/155511
    Clean modal forms for Images panel

Addressed by: https://review.openstack.org/155757
    Refactor modal forms for Networks

Addressed by: https://review.openstack.org/155815
    Refactor modal forms for Routers

Addressed by: https://review.openstack.org/156285
    Refactor modal forms for Subnets

Addressed by: https://review.openstack.org/156302
    Refactor modal forms for Nexus1000v

Addressed by: https://review.openstack.org/156339
    Refactor modal forms for Firewalls

Addressed by: https://review.openstack.org/157065
    Refactor modal forms for VPN

Addressed by: https://review.openstack.org/157122
    Refactor modal forms for Ports

Addressed by: https://review.openstack.org/157394
    Refactor modal forms for Load Balancers

Addressed by: https://review.openstack.org/157911
    Refactor modal forms for Volumes

Addressed by: https://review.openstack.org/158121
    Refactor modal forms for Settings dashboard

Addressed by: https://review.openstack.org/158286
    Refactor modal forms for Access & Security

Addressed by: https://review.openstack.org/164201
    Clean modal forms in Orchestration Stacks

(?)

Work Items

This blueprint contains Public information 
Everyone can see this information.

Subscribers

No subscribers.