How to customize the display name of dynamic ActiveAdmin search filters
Tags: ruby, rails, ajax, activeadmin
Published: 2020-07-14 17:00:56

> This post was originally created for the [Rootstrap blog](https://www.rootstrap.com/blog/how-to-customize-the-display-name-of-dynamic-activeadmin-search-filters/)

<!-- wp:heading -->
<h2>Working with ActiveAdmin</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>At Rootstrap, my first assignment was to develop a Ruby on Rails application which uses ActiveAdmin (with ActiveAdmin Addons) as a framework to implement the user interface.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I had never used ActiveAdmin before and I found myself reading a lot of documentation of the gem, in some cases, the documentation was not enough. For example, when I tried to display a custom name on an AJAX's search select filter at first it was a little tricky. So today I will show you how to do it, in the end, it's really simple!</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Showing our custom display_name</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In this tutorial, you will learn how to customize the&nbsp;<code>display_name</code>&nbsp;of a&nbsp;<code>search_select</code>&nbsp;the filter provided by ActiveAdmin Addons.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Before starting we have to include in our&nbsp;<code>Gemfile</code>&nbsp;the&nbsp;<code>activeadmin</code>&nbsp;gem and&nbsp;<code>activeadmin-addons</code>&nbsp;gem.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this example we are going to use a search select to filter people and search a person, our&nbsp;<code>person</code>&nbsp;model has two fields named&nbsp;<code>first_name</code>&nbsp;and&nbsp;<code>last_name</code>, and we want to display the full name of the person when we are searching it. The&nbsp;<code>full_name</code>&nbsp;is the concatenation of&nbsp;<code>first_name</code>&nbsp;and&nbsp;<code>last_name</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Steps to show our custom display_name</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>Create a Search Select</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>First of all, you should create a search select input in ActiveAdmin. This can be used in many places but in this example, we are going to use it in a filter. To do that, go to an ActiveAdmin view and put this code on it:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>      filter :person_id,
             as: :search_select_filter,
             fields: %i&#91;first_name last_name],
             display_name: :full_name</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>(If you are going to use this on a form you have to change&nbsp;<code>search_select_filter</code>&nbsp;to&nbsp;<code>search_select</code>).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The fields array indicates the fields that are used to filter, our input will be matched with the&nbsp;<code>first_name</code>&nbsp;of a person or their&nbsp;<code>last_name</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The&nbsp;<code>display_name</code>&nbsp;is the field that our filter is showing to us meanwhile we search.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Setting up the returned JSON</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The search select input is requesting a JSON meanwhile the user is searching for a person, for example in this case the filter will be doing requests to this endpoint&nbsp;<code>/admin/people</code>&nbsp;and retrieving a JSON showing all model attributes from a person. This is auto-generated by ActiveAdmin, but we can overwrite the response.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this application we are using JBuilder to render JSON response so we have to create a file in:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>views/admin/(model_name_pluralized)/index.json.jbuilder</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>In our example, the view created is in</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>views/admin/people/index.json.jbuilder</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>In this file we can write the custom JSON that we want to retrieve for example:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>json.array!(@people) do |person|
  json.extract! person, :id, :full_name
end</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Attention:&nbsp;<code>full_name</code>&nbsp;is a method on&nbsp;<code>person</code>&nbsp;model, we have to write that method in the model and not in a decorator because if we are using this&nbsp;<code>search_select</code>&nbsp;in edit/new view an error will raise when validation fails, ActiveAdmin will call a method from&nbsp;<code>person</code>&nbsp;model named&nbsp;<code>full_name</code>&nbsp;and not from the decorator.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Writing the full_name method</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Just write the method that we want in&nbsp;<code>app/models/person.rb</code>:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>def full_name
    &#91;first_name, last_name].compact.join(' ')
end</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>And now our search select input is ready to display the person full name!</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>What we learned about Search Select Inputs?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In this article, we learned how to display a custom field in our search select inputs. This will help us to give better search feedback to the user and it can be used in many different scenarios. It also helps us take control of the JSON returned by ActiveAdmin to the input (by default, all attributes are returned and maybe that's not good for us).</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>References</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a href="https://github.com/platanus/activeadmin_addons/blob/master/docs/select2_search.md">Select2_Search</a>&nbsp;<a href="https://github.com/activeadmin/activeadmin/">ActiveAdmin</a></p>
<!-- /wp:paragraph -->