Generating a custom component for a field

Each field in Avo has a component for each view that is responsible for rendering the field in that view.

Some fields, like the textarea field, don't have a component for certain views by default. For example, the textarea field doesn't have a component for the Index view. This guide shows you how to create one by using an existing field's component as a starting point.

Using the Text field as a base

Instead of starting from scratch, it's easier to use the text field's index component as a base since it handles text content display well.

Step 1: Eject the Text field component

In this step we're using the eject feature to generate the component files for the text field.

Run the following command to eject the text field's index component:

rails g avo:eject --field-components text --view index

This will generate the component files in your application.

Step 2: Rename the component directory

Rename the generated directory from text_field to textarea_field to match the field type you're creating the component for.

mv app/components/avo/fields/text_field/ app/components/avo/fields/textarea_field/

Step 3: Update the class reference

In the generated component file, update the class reference from:

Avo::Fields::TextField::IndexComponent

to:

Avo::Fields::TextareaField::IndexComponent

Step 4: Customize the ERB template

Replace the ERB content with something appropriate for textarea content. For example, to truncate long text:

<%= index_field_wrapper(**field_wrapper_args) do %>
  <%= @field.value.truncate(60) %>
<% end %>

Step 5: Enable index visibility

By default, textarea fields are hidden on the index view. You need to explicitly show them by adding the show_on: :index option to your textarea fields:

field :body, as: :textarea, show_on: :index

Global configuration for all textarea fields

If you want all textarea fields in your application to show on the index view by default, you can extend the base resource and override the field method:

# app/avo/base_resource.rb
module Avo
  class BaseResource < Avo::Resources::Base
    def field(id, **args, &block)
      if args[:as] == :textarea
        args[:show_on] = :index
      end

      super(id, **args, &block)
    end
  end
end

For more information about extending the base resource, see the Extending Avo::BaseResource documentation.

Related documentation

• Field components - Learn how to eject and override existing field components
• Ejecting views - Learn how to eject and override existing views
• Extending Avo::BaseResource
• Views - Understanding different view types in Avo