|
| 1 | +# Customizing the Index Page |
| 2 | + |
| 3 | +Filtering and listing resources is one of the most important tasks for |
| 4 | +administering a web application. Active Admin provides many different tools for |
| 5 | +you to build a compelling interface into your data for the admin staff. |
| 6 | + |
| 7 | +Built in, Active Admin has the following index renderers: |
| 8 | + |
| 9 | +* *Table*: A table drawn with each row being a resource |
| 10 | +* *Grid*: A set of rows and columns each cell being a resource |
| 11 | +* *Blocks*: A set of rows (not tabular) each row being a resource |
| 12 | +* *Blog*: A title and body content, similar to a blog index |
| 13 | + |
| 14 | +All index pages also support scopes, filters, pagination, action items, and |
| 15 | +sidebar sections. |
| 16 | + |
| 17 | +## Index as a Table |
| 18 | + |
| 19 | +By default, the index page is a table with each of the models content columns and links to |
| 20 | +show, edit and delete the object. There are many ways to customize what gets |
| 21 | +displayed. |
| 22 | + |
| 23 | +### Defining Columns |
| 24 | + |
| 25 | +To display an attribute or a method on a resource, simply pass a symbol into the |
| 26 | +column method: |
| 27 | + |
| 28 | + index do |
| 29 | + column :title |
| 30 | + end |
| 31 | + |
| 32 | +If the default title does not work for you, pass it as the first argument: |
| 33 | + |
| 34 | + index do |
| 35 | + column "My Custom Title", :title |
| 36 | + end |
| 37 | + |
| 38 | +Sometimes calling methods just isn't enough and you need to write some view |
| 39 | +specific code. For example, say we wanted a colum called Title which holds a |
| 40 | +link to the posts admin screen. |
| 41 | + |
| 42 | +The column method accepts a block as an argument which will then be rendered |
| 43 | +within the context of the view for each of the objects in the collection. |
| 44 | + |
| 45 | + index do |
| 46 | + column "Title" do |post| |
| 47 | + link_to post.title, admin_post_path(post) |
| 48 | + end |
| 49 | + end |
| 50 | + |
| 51 | +The block gets called once for each resource in the collection. The resource gets passed into |
| 52 | +the block as an argument. |
| 53 | + |
| 54 | + |
| 55 | +### Sorting |
| 56 | + |
| 57 | +When a column is generated from an Active Record attribute, the table is |
| 58 | +sortable by default. If you are creating a custom column, you may need to give |
| 59 | +Active Admin a hint for how to sort the table. |
| 60 | + |
| 61 | +If a column is defined using a block, you must pass the key to turn on sorting. The key |
| 62 | +is the attribute which gets used to sort objects using Active Record. |
| 63 | + |
| 64 | + index do |
| 65 | + column "Title", :sortable => :title do |post| |
| 66 | + link_to post.title, admin_post_path(post) |
| 67 | + end |
| 68 | + end |
| 69 | + |
| 70 | +You can turn off sorting on any column by passing false: |
| 71 | + |
| 72 | + index do |
| 73 | + column :title, :sortable => false |
| 74 | + end |
| 75 | + |
| 76 | +### Showing and Hiding Columns |
| 77 | + |
| 78 | +The entire index block is rendered within the context of the view, so you can |
| 79 | +easily do things that show or hide columns based on the current context. |
| 80 | + |
| 81 | +For example, if you were using CanCan: |
| 82 | + |
| 83 | + index do |
| 84 | + column :title, :sortable => false |
| 85 | + if can? :manage, Post |
| 86 | + column :some_secret_data |
| 87 | + end |
| 88 | + end |
| 89 | + |
| 90 | +## Index as a Grid |
| 91 | + |
| 92 | +Sometimes you want to display the index screen for a set of resources as a grid |
| 93 | +(possibly a grid of thumbnail images). To do so, use the :grid option for the |
| 94 | +index block. |
| 95 | + |
| 96 | + index :as => :grid do |product| |
| 97 | + link_to(image_tag(product.image_path), admin_products_path(product)) |
| 98 | + end |
| 99 | + |
| 100 | +The block is rendered within a cell in the grid once for each resource in the |
| 101 | +collection. The resource is passed into the block for you to use in the view. |
| 102 | + |
| 103 | +You can customize the number of colums that are rendered using the columns |
| 104 | +option: |
| 105 | + |
| 106 | + index :as => :grid, :columns => 5 do |product| |
| 107 | + link_to(image_tag(product.image_path), admin_products_path(product)) |
| 108 | + end |
| 109 | + |
| 110 | + |
| 111 | +## Index as a Block |
| 112 | + |
| 113 | +If you want to fully customize the display of your resources on the index |
| 114 | +screen, Index as a Block allows you to render a block of content for each |
| 115 | +resource. |
| 116 | + |
| 117 | + index :as => :block do |product| |
| 118 | + div :for => product do |
| 119 | + h2 auto_link(product.title) |
| 120 | + div do |
| 121 | + simple_format product.description |
| 122 | + end |
| 123 | + end |
| 124 | + end |
| 125 | + |
| 126 | +## Index Filters |
| 127 | + |
| 128 | +By default the index screen includes a "Filters" sidebar on the right hand side |
| 129 | +with a filter for each attribute of the registered model. You can customize the |
| 130 | +filters that are displayed as well as the type of widgets they use. |
| 131 | + |
| 132 | +To display a filter for an attribute, use the filter method |
| 133 | + |
| 134 | + ActiveAdmin.register Post do |
| 135 | + filter :title |
| 136 | + end |
| 137 | + |
| 138 | +Out of the box, Active Admin supports the following filter types: |
| 139 | + |
| 140 | +* *:string* - A search field |
| 141 | +* *:date_range* - A start and end date field with calendar inputs |
| 142 | +* *:numeric* - A drop down for selecting "Equal To", "Greater Than" or "Less |
| 143 | + Than" and an input for a value. |
| 144 | +* *:select* - A drop down which filters based on a selected item in a collection |
| 145 | + or all. |
| 146 | +* *:check_boxes* - A list of check boxes users can turn on and off to filter |
| 147 | + |
| 148 | +By default, Active Admin will pick the most relevant filter based on the |
| 149 | +attribute type. You can force the type by passing the :as option. |
| 150 | + |
| 151 | + filter :author, :as => :check_boxes |
| 152 | + |
| 153 | +The :check_boxes and :select types accept options for the collection. By default |
| 154 | +it attempts to create a collection based on an association. But you can pass in |
| 155 | +the collection as a proc to be called at render time. |
| 156 | + |
| 157 | + # Will call available |
| 158 | + filter :author, :as => :check_boxes, :collection => proc { Author.all } |
| 159 | + |
| 160 | +You can change the filter label by passing a label option: |
| 161 | + |
| 162 | + filter :author, :label => 'Author' |
| 163 | + |
| 164 | +By default, Active Admin will try to use ActiveModel I18n to determine the label. |
0 commit comments