Revamping Ubiquo forms – UbiquoFormBuilder

The forms have been pieces of repeated HTML code till now. We focused on it to get more DRY and get a powerful abstraction applying the “the convention over configuration” concept.

We have a new helper method, ubiquo_form_for, which is like the form_for but uses our custom form builder UbiquoFormBuilder.

This builder does the same as usual but adds all the surrounding html that uses to be added to a input in a ubiquo form.

Using the regular builder, we would write this:

<% form_for([:ubiquo, @movie]) do |form| %>
    <div class="form-item">
        <%= form.label :title, Movie.human_attribute_name("title") %>
        <%= form.text_field :title %>
    </div>
    <div class="form-item">
        <%= form.label :body, Movie.human_attribute_name("body") %>
        <%= form.text_area :body, :class => 'visual_editor' %>
    </div>
    <fieldset>
        <legend>Media selector</legend>
        <%= media_selector form, :images, :visibility => 'public' %>
    </fieldset>
    <div class="form-item-submit">
        <%= form.submit t('ubiquo.create'), :class => 'bt-create' %>
        <%= button_to_function t('ubiquo.back_to_list'),
            "document.location.href='#{ubiquo_movies_path}'", :class => 'bt-back' %>
    </div>
<% end %>

but with UbiquoFormBuilder we write this:


<% ubiquo_form_for([:ubiquo, @movie] ) do |form| %>
    <%= form.text_field :title %>
    <%= form.text_area :body %>
    <%= form.media_selector :images, :visibility => 'public' %>
    <% form.submit_group do %>
        <%= form.create_button %>
        <%= form.back_button %>
    <% end %>
<% end %>

As you can see the form gets more “right to the point”, and the code is far less verbose.

Features:

  • Add hidden tooltips on a field to help introducing the data.
  • Mark a field as translatable
  • Add a description to the field
  • Group fields in tabs

The tabs are shown like this:

tabs on a form