Hello I am in the process of creating some cus... Avo #avo-2

Hello I am in the process of creating some cus...

# avo-2

miniature-optician-85831

11/21/2023, 7:24 PM

Thread automatically created by andrew.walker.testdouble.com in #740893011994738751

late-noon-56486

11/21/2023, 7:25 PM

Copy code

bash
bin/rails generate avo:field progress_bar
create  app/components/avo/fields/progress_bar_field
create  app/components/avo/fields/progress_bar_field/edit_component.html.erb
create  app/components/avo/fields/progress_bar_field/edit_component.rb
create  app/components/avo/fields/progress_bar_field/index_component.html.erb
create  app/components/avo/fields/progress_bar_field/index_component.rb
create  app/components/avo/fields/progress_bar_field/show_component.html.erb
create  app/components/avo/fields/progress_bar_field/show_component.rb
create  app/avo/fields/progress_bar_field.rb

app/components/avo/fields/progress_bar_field/show_component.rb

Copy code

<%= field_wrapper **field_wrapper_args do %>
  <%= @field.value %>
<% end %>

app/components/avo/fields/progress_bar_field/show_component.rb

Copy code

ruby
# frozen_string_literal: true

class Avo::Fields::ProgressBarField::ShowComponent < Avo::Fields::ShowComponent
end

test/components/previews/progress_bar_field_component_preview.rb

Copy code

ruby
class ProgressBarFieldComponentPreview < ViewComponent::Preview
  def default
    render(Avo::Fields::ProgressBarField::ShowComponent.new())
  end
end

late-noon-56486

11/21/2023, 7:25 PM

However when I go to

http://localhost:3000/rails/view_components/progress_bar_field_component/default

I get an error like this:

Copy code

ruby/gems/3.2.0/gems/view_component-3.7.0/app/views/view_components/preview.html.erb where line #3 raised:
undefined method `stacked' for nil:NilClass

I can get past this particular error by doing:

app/components/avo/fields/progress_bar_field/show_component.rb

Copy code

<%= field_wrapper **field_wrapper_args, stacked: false do %>
  <%= @field.value %>
<% end %>

but then I get this error:

Copy code

ruby/gems/3.2.0/gems/view_component-3.7.0/app/views/view_components/preview.html.erb where line #3 raised:
undefined method `get_html' for nil:NilClass

I get the feeling I'm off in the weeds in my approach and I am thinking this has something to with Avo being on a separate Rails engine than the main rails app, but I don't know how to tell Rails previews to use different engines.

late-noon-56486

11/21/2023, 7:30 PM

For what it's worth, I've verified that this custom field works when placed under a resource. The custom field isn't doing anything "custom" yet. It's simply the code as per above.

late-noon-56486

11/21/2023, 7:33 PM

Can anyone provide some guidance on how to use ViewComponent previews with custom fields or on how they've approached developing/testing custom fields?

loud-jewelry-99127

11/21/2023, 7:40 PM

Hey @late-noon-56486 The custom field acts like all Avo fields but on the custom one you have the ability to change the components for each view. There are some values and default attributes that are setted to the field on the process of rendering it, that happens when you add the field to a resource and load the resource view. If you want to have a fully customizable page that you can access from a separate route maybe custom tools it's what you're looking for

loud-jewelry-99127

11/21/2023, 7:41 PM

https://docs.avohq.io/2.0/custom-tools.html

loud-jewelry-99127

11/21/2023, 7:45 PM

You can add the custom field to a resource then visit the resource new/edit/index/show page and test only that particular field, makes sense?

loud-jewelry-99127

11/21/2023, 7:46 PM

Let's say you add your custom field to users resource :

field :field_id, as: :progress_bar

, it should be rendered on all users pages now

late-noon-56486

11/21/2023, 7:53 PM

Yeah I am considering that. I've strayed away from that approach so far as it didn't feel like the "proper" way to go about it. I'm ultimately wanting to use [LookBook](https://lookbook.build/) but it seems to rely on [Rails previews](https://lookbook.build/guide/concepts#previews). I'm wondering if I could wire up a custom tool inside of a preview class/controller.

loud-jewelry-99127

11/21/2023, 7:56 PM

Just checked the view component previews, in order to use that on a custom field you can either remove everything that needs the field initialized or dig in Avo code and try to reproduce the field initialization

loud-jewelry-99127

11/21/2023, 8:00 PM

Preview can't work on isolation if the component requires an field instance and it isn't provided

late-noon-56486

11/21/2023, 8:01 PM

Ok. So it needs to be hooked up to a model and database column?

late-noon-56486

11/21/2023, 8:04 PM

It's sounding like this is more trouble than what it's worth 😛 So I think I may just go with your suggestion of testing via a resource page with some mocked data models.

loud-jewelry-99127

11/21/2023, 8:06 PM

Not necessarily, I can give it a quick try when I get to the PC

loud-jewelry-99127

11/21/2023, 8:07 PM

But yes, testing it via a resource I think it's better in this situation

loud-jewelry-99127

11/21/2023, 8:08 PM

The preview should work better on components that you have full control over how they are rendered and what they require in order to be rendered

late-noon-56486

11/21/2023, 8:19 PM

If you feel like spending some time on it, I appreciate it, but it's not a huge priority. I believe we will get by using a resource page to test with. Thanks for your help, Paul!

loud-jewelry-99127

11/23/2023, 8:17 AM

Anytime!

Previous Next