How to customize output of association using data from associated records.

812 views
Skip to first unread message

Jeffery Utter

unread,
May 22, 2012, 1:07:02 PM5/22/12
to SimpleForm
I am trying to create a form using simple_form that includes a
has_many relationship using a f.association as check_boxes. For this
form though I need to show some more data relating to the related
record (as a table with the checkbox in the first column). I have
tried fiddling around with custom inputs and builders but I can't
really figure out what exactly to override.

An example of the output i need is:

<form accept-charset="UTF-8" action="/inventory/orders"
class="simple_form form-horizontal" id="new_inventory_order"
method="post" novalidate="novalidate"><div style="margin:0;padding:
0;display:inline"><input name="utf8" type="hidden" value="✓"><input
name="authenticity_token" type="hidden" value="iGSIkTLLa73qGHCYZ
+cyV9UVt09ir+n3O9NkK9dzHRs="></div>

<div class="form-inputs">
... (edited out for simplicity)
<div class="control-group check_boxes optional">
<label class="check_boxes optional control-label">Part orders</
label>
<div class="controls">
<table>
<thead>
<tr>
<th></th>
<th><span >Job Number</span></th>
<th><span >Customer Name</span></th>
<th><span >Part Number</span></th>
<th><span >Quantity</span></th>
<th><span >Description</span></th>
<th><span >Cost</span></th>
<th><span >Retail Price</span></th>
<th><span >Supplier</span></th>
<th><span >Store</span></th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="inventory_order_part_order_ids_640"
id="inventory_order_part_order_ids_"
name="inventory_order[part_order_ids][]" type="checkbox" value="640"></
td>
<td class="c-align">JOB ID</td>
<td>NAME</td>
<td>KJ38369002</td>
<td class="c-align">1</td>
<td>PART</td>
<td class="r-align">$260.00</td>
<td class="r-align">$306.00</td>
<td class="nowrap">Impact</td>
<td>STORE</td>
</tr>
</tbody>
</table>
<input name="inventory_order[part_order_ids][]" type="hidden"
value="">
</div>
</div>
</div>
<div class="form-actions">
<input class="btn" name="commit" type="submit" value="Create Order">
</div>
</form>

Carlos Antonio da Silva

unread,
May 22, 2012, 10:28:47 PM5/22/12
to plataformate...@googlegroups.com
You have to use f.collection_check_boxes manually, instead of f.association, and give the collection and label/value attributes as arguments, same as collection select. Using this, you'll be able to give a block to colleciton_check_boxes, that gets passed a simple builder that can help you generating everything you need.


If you have any more doubts let us know.

-- 
At.
Carlos Antonio

On Tuesday, May 22, 2012 at 2:07 PM, Jeffery Utter wrote:

custom

Jeffery Utter

unread,
May 23, 2012, 7:51:15 AM5/23/12
to SimpleForm
Great! this mostly works.

I am getting some peculiar output though.

Here is a simplified version of my form:

= simple_form_for @inventory_order, :html => {:class => 'form-
horizontal'} do |f|
= f.error_notification

.form-inputs
= f.collection_check_boxes :part_order_ids,
@part_orders, :id, :name do |b|
= b.label

.form-actions
%a#add_inventory_item.btn{:href => '#'} Add Inventory Item
= f.button :submit

And the output:

<form accept-charset="UTF-8" action="/inventory/orders"
class="simple_form form-horizontal" id="new_inventory_order"
method="post" novalidate="novalidate">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="&#x2713;" />
<input name="authenticity_token" type="hidden"
value="iGSIkTLLa73qGHCYZ+cyV9UVt09ir+n3O9NkK9dzHRs=" />
</div>

<div class='form-inputs'>
<label for="inventory_order_part_order_ids_645">M-6799 -
MONKEY1</label>
<label for="inventory_order_part_order_ids_646">M-6799 - MEEP</
label>
<span>2</span>
<span>2</span>
<input name="inventory_order[part_order_ids][]" type="hidden"
value="" />
</div>
<div class='form-actions'>
<a class='btn' href='#' id='add_inventory_item'>Add Inventory
Item</a>
<input class="btn" name="commit" type="submit" value="Create
Order" />
</div>
</form>

Notice the 2 rogue <span>2</span>'s ? The number of times the span
occurs seems to have to do with how many items there are in the
collection. and the number (2) seems to reflect how deeply nested the
f.collection_check_boxes is?!

I can't seem to figure out where the spans are coming from. Any idea?

On May 22, 10:28 pm, Carlos Antonio da Silva
<carlosantoniodasi...@gmail.com> wrote:
> You have to use f.collection_check_boxes manually, instead of f.association, and give the collection and label/value attributes as arguments, same as collection select. Using this, you'll be able to give a block to colleciton_check_boxes, that gets passed a simple builder that can help you generating everything you need.
>
> There's an example here:https://github.com/plataformatec/simple_form/blob/master/lib/simple_f...

Jeffery Utter

unread,
May 23, 2012, 7:55:39 AM5/23/12
to SimpleForm
I would also like to expand this question a bit. The checkboxes alone
work great. How could i go about doing a table like for for related
(existing) models. I played around with accepts_nested_attributes_for
and https://github.com/plataformatec/simple_form/wiki/Nested-Models .
but again i can't figure out how to override the layout.

Basically what i need in this case is like:

Edit Order Form
Order Number: ________
Order Date: _____
Order Items:
Item 1 | Part Number | Description | _____Ship Date____ | check -
received |
Submit

Hope that makes sense.

Thanks for all of the help!

On May 22, 10:28 pm, Carlos Antonio da Silva
<carlosantoniodasi...@gmail.com> wrote:
> You have to use f.collection_check_boxes manually, instead of f.association, and give the collection and label/value attributes as arguments, same as collection select. Using this, you'll be able to give a block to colleciton_check_boxes, that gets passed a simple builder that can help you generating everything you need.
>
> There's an example here:https://github.com/plataformatec/simple_form/blob/master/lib/simple_f...
Reply all
Reply to author
Forward
0 new messages