Build Bootstrap forms with simple_form in Ruby on Rails

Thu, 15 Jan 2015 00:00:00 +0000

I’m building Rails application which is full of many Bootstrap forms. We use placeholders instead of labels, and mostly use horizontal forms, which most of the time has more than one field on one line. Since we’re adding/editing lots of forms, to keep moving fast I made few wrappers for simple_form which allows build horizontal bootstrap forms fast.

`form-group` behaves as `row`

Please note that form-group behaves as row inside form-horizontal, so we can use all col-* classes without adding row.

One-line fields of various width

simple_form generates this wrapper to use for horizontal forms:

config.wrappers :horizontal_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
  b.use :html5
  b.use :placeholder
  b.optional :maxlength
  b.optional :pattern
  b.optional :min_max
  b.optional :readonly
  b.use :label, class: 'sr-only'

  b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
    ba.use :input, class: 'form-control'
    ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
    ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
  end
end

which is great, but it uses 9 columns as default width. But imagine this form:

It has fields of various widths. So I used this code to create wrappers for different column sizes:

1.upto(12) do |col|
  config.wrappers "field#{col}".to_sym, tag: 'div', class: 'form-group', error_class: 'has-error' do |mdf|
    mdf.use :html5
    mdf.use :placeholder
    mdf.use :label, class: 'sr-only'

    mdf.wrapper tag: 'div', class: "col-sm-#{col}" do |wr|
      wr.use :input, class: 'form-control'
      wr.use :error, wrap_with: { tag: 'span', class: 'help-block' }
      wr.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end
end

So to create above form we’d write

<%= simple_form_for coupon, remote: true do |f| %>
  <%= f.input :title, wrapper: :field4 %>
  <%= f.input :description, wrapper: :field8 %>
  <%= f.input :image, wrapper: :field8 %>
  <%= f.input :expiry_date, wrapper: :ig4, wrapper_html: {id: "expiry-date-input"} do %>
    <%= f.input_field :expiry_date, as: :string, class: "form-control" %>
    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
  <% end %>
  <%= f.button :submit %>
<% end %>

And think how much time I saved having dozens of forms like this. (If you wonder what ig4 wrapper for, it works exactly as field4 except it’s for inline groups, I used this as reference)

Multiple fields in one line

Now let’s take a look at this form:

We have more than one fields on one line. Most of answers on SO suggested making use of CSS, which I didn’t like. So, I defined another set of wrappers for inline fields:

1.upto(12) do |col|
  config.wrappers "inline_field#{col}".to_sym, tag: 'div', class: "col-sm-#{col}", error_class: 'has-error' do |ic|
    ic.use :html5
    ic.use :placeholder
    ic.use :label, class: 'sr-only'
    ic.use :input, class: 'form-control'
    ic.use :error, wrap_with: { tag: 'span', class: 'help-block' }
    ic.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
  end

  config.wrappers "inline_bool#{col}".to_sym, tag: 'div', class: "col-sm-#{col}", error_class: 'has-error' do |ib|
    ib.use :html5
    ib.optional :readonly

    ib.wrapper tag: 'div', class: 'checkbox' do |ba|
      ba.use :input
      ba.use :label
    end
    ib.use :error, wrap_with: { tag: 'span', class: 'help-block' }
    ib.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
  end
end

The most notable change here is that it doesn’t wrap fields in form-group and leaves that to us. So code of above form looks like:

<%= simple_form_for location, remote: true, defaults: {wrapper: :inline_field4} do |f| %>
  <div class="form-group">
    <%= f.input :name %>
    <%= f.input :street_line_one %>
    <%= f.input :city %>
  </div>
  <div class="form-group">
    <%= f.input :state %>
    <%= f.input :postal_code %>
  </div>
  <div class="form-group">
    <%= f.input :email %>
    <%= f.input :phone_number %>
    <%= f.input :image %>
  </div>

  <%= f.button :submit %>
<% end %>

I found this pretty cool. Also notice I used defaults: {wrapper: :inline_field4} instead of defining wrapper on every field.

Why I didn’t use input_field? Because that way we’d lose our sr-only labels, and I like having support for accessibility.

And if we ever need inline boolean, we’d just write

<div class="form-group">
  <%= f.input :email, wrapper: :inline_field6 %>
  <%= f.input :hide_my_email, wrapper: :inline_bool4 %>
</div>

Yay!

How I learn things or 'Aha!' moments

Sun, 14 Dec 2014 00:00:00 +0000

We are always learning something. Be it new language, framework or another lib. And every one of us has its own methods to learn. I have got mine too. Here I’ll write how how I learn and why I do so.

3 years ago…

I started getting into programming, installed Ubuntu on my machine, got my hands dirty with bash, tmux, vim, and every other cool stuff at that moment. Then I got interested in Rails, started reading Pickaxe, Agile Web Development with Rails. But every time I finish book, I couldn’t remember most of it. Then I come across railstutorial.org by Michael Hartl which was great, but even after it I still didn’t feel fully confident.

2 years ago…

I landed a job as iOS developer on local payment system company. I didn’t have any iOS experience before, so I asked them to give me couple of weeks to learn it. (I was 19y old, and I’ve seen only ‘Replace all occurrences of * with $ in string’ tasks, which gave me false confidence). So I started reading iOS Programming: The Big Nerd Ranch Guide and writing code along the way. The only I passed chapter 4 or 5 of book, my team leader sent me first test task, To-do list. I set aside BNR book and dived into Xcode and started writing code with the help of Stack Overflow. Week later I finished the test project and continued reading BNR.

And that’s where magic happened.

Aha!

My to-do app code was really bad. So bad, it’d make eyes of future me bleed. Though, I get some grasp of iOS development and had many questions on it. So I continued reading BNR. And THIS! Every time I find answer to my questions I was like “Oh, that’s how I should have done. Well, I’ll know it.” So I remembered (almost) everything.

Would this happen if I finished book before getting task? Don’t think so. I’d read book from cover to cover, forget most of it, and fallback to Stack Overflow driven development. I’d still code. But by reading book after getting some questions on mind I knew what to focus on, and had hooks to remember them.

What about Rails

I mentioned my attempts to learn Rails. I have read Michael Hartl’s tutorial 3 times to no avail. Because of lack of practice. And I didn’t have practice because I didn’t feel confident enough to start anything on my own.

Though, two months ago, one of my clients asked me to write Rails app for him. (He was aware I don’t have fresh experience on it.) And I dusted off my Rails skills and started writing app. And I think I’m doing well. Though I have some questions and feel lack of best practices knowledge. I’m going to read some good book on Rails, and I’m sure if I’ll got my questions answered I’ll remember them.

Conclusion

That’s how I end up with my current way of learning new things. Learn basics of it so you don’t spend too much time figuring out along the way. Otherwise, this would take your focus away to little details. Then get your hands dirty. Dig into it. Build something with it, even your code is ugly. You’ll get lots of questions along the way. Then seek answers to them. Best if you find good book on subject, which teaches best practises too.

I’d love to hear what’s your learning habits. Let me know if you got something interesting.

Almas Sapargali