Thu Apr 26, 2018 1:51 PM

How To Add Custom Label to SimpleForm

Recently, while creating a subscription checkout form using Stripe Elements, I wanted to list the plans along wth their pricing and details.

The form uses a collection input to list the plans as radio buttons, but the methods in this guide should work for checkboxes and selects. 

Here is the input statement that we are working with for starters:

<%= f.input :plan_id, 
            collection: Plan.published, 
            as: :radio_buttons %>
Currently, this will display the following label and radio buttons (Note that this label is provided using I18n):
Please select your plan:
 ○ plan 1
 ○ plan 2
I already have text with instructions on my form, so I don't want to display the label. Let's remove it by adding label:false.
<%= f.input :plan_id, 
             collection: Plan.published, 
             as: :radio_buttons, 
             label: false %>
Now only display the radio buttons should be displaying:
  ○ plan 1
 ○ plan 2

Using "to_label"

Adding a to_label is the easiest and most consistent method as Simple_Form will look for this method before defaulting to using the field name as the label. Adding the to_label to your model will reduce the amount of code because you do not need to add any additional options to your input. In this case, the following code was added to plan.rb. For clarity, formatting specific code has been removed:


def to_label
#{self.name} ( #{self.amount}/ #{self.interval}) - #{self.description}
end

This outputs the following for a plan with the name "Tester":


Tester ($30/month) - This is a monthly test plan

Passing a block to label_method

Passing a block to the label_method helps when you need to override the previous "to_label" method or otherwise need to change the label for a single instance.

Let's do this now using the same snippet that we created at the beginning of the article:


<%= f.input :plan_id,
  collection: Plan.published,
  as: :radio_buttons,
  label: false,
  label_method:
  lambda {
  |plan| "#{plan.name} ( #{plan.amount}/ #{plan.interval}) - #{plan.description}"
  } %>

This outputs the following for a plan with the name "Tester":


Tester ($30/month) - This is a monthly test plan

As you can see, that's a lot more code to get the same result.  Typically its best to just add it to the model, but this method has its use cases as described at the start of this section.

When you use the to_label method described previously, Simple Form passes the to_label to the label_method behind the scenes for you. That's why using this method overrides the to_label method.

Wed Apr 18, 2018 8:23 PM
guide
Basic steps to create a new app using Rails API with a React frontend, then deploy on Heroku.
Mon May 07, 2018 1:18 PM
guide
Font Awesome 5 SVG icons use javascript to find <i> tags with an icon class and replaces them with an <svg> tag. Turbolinks online displays these icons on initial page load and/or refresh, however when following a link, Turbolinks reloads the page and not the icons. This guide assumes that you have already loaded font awesome into your project using your preferred method. For what its worth, this guide uses the font awesome CDN more
Fri May 18, 2018 1:12 PM
guide
Problem: Ransack will only search for one keyword or phrase such as, "Jumpity Jump", without quotations. Using quotations or commas such as in "Jumpity Jump" or, "Jumpity, Jump" (with or without quotations). returns a blank result. Test conditions: Randomly selected records were edited to include varied words/phrases in searched fields, such as in the following examples: jump jumpity jump jimpity jump jump rabbit jumpity jumpity rabbit Solution: Custom predicates added to initializer based on Stack Overflow answer linked at end.more
Mon May 21, 2018 2:58 PM
guide
For use with trusted/cleaned data. Add to application.rb def truncate_and_link(text,options ={}) length = options[:length] return text if length.blank? url = options[:url] || '#' output = raw text.truncate_words(length) output += link_to('more', url) if text.size > length output.html_safe end Adapted from: http://itiansrock.blogspot.com/2013/01/truncate-and-link-text-helper-in-rails.htmlmore
Sat Oct 07, 2017 4:00 PM
guide
Assuming that you have Rails and PostgresSQL already installed on your workstation, follow the steps for a new or existing Ruby on Rails app according to your needs. more