Introduction Rails engineers, what do you do when creating an admin panel or internal tool?
One way is to use a RubyGem such as ActiveAdmin, but I’ve encountered a few problems with this approach. It's hard to customize with DSL. Sometimes I can’t achieve the required functionality. The design isn’t to my liking. For these reasons, I didn’t use an existing Gem but built it from scratch. However, even though doing that every time was inefficient, it was worth the effort because many elements of the internal tool’s features can be shared. The good news is I’ve now solved the inefficiency problem and so streamlined development by creating my own framework. And it’s improved my productivity so dramatically that I wanted to share it with you by turning the framework into a Gem and releasing it publicly. So I’m now going to show you how to use the Gem . Infold Demo Site First off, take a look at the . demo site This application is built using only functions automatically generated by the Gem. Tool Features The tool has the following advantages: Automatic code generation No DSL Modern, easy-to-use UI/UX 1. Automatic code generation However, it is not in AI format like GitHub Copilot but an extension of Rails' Scaffold. As you know, Rails scaffold automatically generates code such as controller, model, view, etc., and automatically create the basic functionality that enables CRUD. I’ve exploited this mechanism to develop a specialized generator for the admin panel. In addition, the generated code is designed to be readable. My aim isn’t just to make code that works but also to make the code easy for developers to read and customize for their own needs. 2. No DSL YAML is used instead of DSL for configuration. When the YAML loads into the generator, it automatically generates the CRUD app according to the configuration. Although YAML doesn’t let you write DSL-like logic, it does enable general configuration. I think it’s better to automatically generate code up to a level that can be shared without difficulty. The code can then be customized just like in normal Rails development instead of using the DSL to realize all functions. So I’ve created a system that automatically generates code. However, even with just the YAML settings, you can generate a variety of functions. For example, as implemented in the demo site, the following functionality is available: Bulk registration and reference of association has_many Validation, Enum, Decorator, and other mechanisms Image file registration, CSV file output, etc. 3. Modern, easy-to-use UI/UX Hotwire is used to let you create a SPA-like UI/UX. In addition, Tabler, which is based on Bootstrap 5, is used for the UI template. This lets you create a modern, high-usability design. Generally, designers aren’t involved in creating admin panels—not even the UI.  My aim is to enable developers who aren’t proficient in design to create usable admin panels. Supported Rails versions Infold requires Rails 7.0 or later as it’s intended to work with Hotwire. Rails requires a JavaScript bundler such as esbuild. Getting started I’ll now explain the process from installation to actual customization. Install Infold Add and the various gems used in Infold to the Gemfile and . infold bundle install # Gemfile

gem 'infold', require: false
gem 'devise'           # Certification
gem 'haml-rails'       # HAML
gem 'kaminari'         # Pagination
gem 'view_component'   # View Component
gem 'active_decorator' # Decoration
gem 'enum_help'        # Enum Helpers Next, install from the Infold generator. $ rails g infold:install When you do this, common files used by view_component, stimulus, and so on will be generated. Similarly, Devise migrations will also be generated. After you’ve run the migration, set up a test account from the Rails console. $ rails db:migrate
$ rails console

AdminUser.create(email: 'user@example.com', password: 'password') Start Rails from , access with your browser, and log in to the account you set up. bin/dev http://localhost:3000/admin The login function has now been created. Continue to build the application. In the following tutorial, you’ll create customer, product, and order management apps. Creating a customer management app First, create a customer model. Here you’ll use the standard Rails generate model. $ bin/rails g model Customer name:string address:string gender:integer
$ bin/rails db:migrate Use Infold’s generator to create an app for this model. $ bin/rails g infold Customer This is all you need to generate the customer management app. Access from your browser to run the app. localhost:3000/admin/customers Bring up the form by clicking the orange "Create New" button. After you’ve filled the form out, click the "Create" button. The note icon on the left of the list displays the reference view; the pencil icon on the right displays the edit view. In just a few steps, you were able to generate a CRUD-based admin panel app. At this point, files such as Controller and View are automatically generated. For example, is generated as follows: app/controllers/admin/customer_controller.rb Thus, .  Also, because the code is in standard Rails, it can be easily edited by Rails developers. Customizations that cannot be achieved with the gem alone can be flexibly handled by editing the code directly. Infold isn't like ActiveAdmin in that instead of generating the app itself, it generates the source code Customized customer management app You can customize the app generated above by configuring it in YAML. Try it out by adding the following functions: Set Name as a required field. Gender is an enum of male, female, and other, which are selectable with radio buttons. When you executed the generator mentioned above, is generated in the directory. Change the contents of this file to the following: customer.yml config/infold # config/infold/customer.yml

model:
  validate:
    name: presence
  enum:
    gender:
      male: 1
      female: 2
      other: 3
app:
  form:
    fields:
      - name
      - address
      - gender:
          kind: radio After you’ve edited the YAML, run the following again to regenerate the customer management app. $ bin/rails g infold Customer Validation and radio button forms are activated. Creating a product management app Next, create a product management app. Rails Model Generation $ bin/rails g model Product title:string price:integer
$ bin/rails db:migrate Generating apps with Infold $ bin/rails g infold Product Access with your browser to run the product management app. The header menu also has PRODUCTS added. localhost:3000/admin/products Display of product images Infold supports ActiveStorage. So if, for example, you want to manage product images, should be set as follows: config/infold/product.yml # config/infold/product.yml

model:
  active_storage:
    photo:
      kind: image
app:
  index:
    list:
      fields:
        - id
        - title
        - photo
        - price
  form:
    fields:
      - title
      - photo:
          kind: file
      - price Note that ActiveStorage must already be installed in the project. Generate apps with Infold. $ bin/rails g infold Product With the above settings, images can be registered from the form and will be displayed in the list too. Creating an order management app The customer and product management apps above had a single table as a CRUD, but the following order management app will set up a relationship between customer and product. Create an order model from Rails. $ bin/rails g model Order customer:references product:references amount:integer
$ bin/rails db:migrate The relationships are as follows: Generate an order management app from Infold. You can generate only YAML files by using . g infold:resource $ bin/rails g infold:resource Order Edit as follows to set associations for order and other models. config/infold/order.yml Note that the name_field in the * portion below specifies a field for the name of the record. As a result, related destination records can be displayed in that field. For example, the model is associated with the model via , but instead of , it displays on the view. Order Customer customer_id customer_id customer.name # config/infold/order.yml

model:
  association:
    customer:
      kind: belongs_to
      name_field: name # *
    product:
      kind: belongs_to
      name_field: title # *
app:
  form:
    fields:
      - customer:
          kind: select
      - product:
          kind: select
      - amount:
          kind: number After you've edited the YAML, generate the app from Infold. $ bin/rails g infold Order For example, from the registration form, the customer and product can be selected from a list. Also, after you’ve registered an order, the customer and product will be displayed as links that can be clicked on for more information. Practical usage Bulk registration of association has_many The current order management app allows only one product to be registered per order because the order model is directly related to the product model ( ). To register multiple products at the same time, add an OrderDetail model and change the modeling to , . order belongs_to product order has_many order_details order_detail belongs_to product Next comes modifying and adding models in Rails. First, generate the following migration to remove the association between order and product. $ bin/rails g migration RemoveProductFromOrders product:references amount:integer Also, remove the as it remains in the order model. belongs_to :product # models/order.rb

class Order < ApplicationRecord
  belongs_to :customer
- # Delete the following
- belongs_to :product
end Next, create an model and migrate. OrderDetail $ bin/rails g model OrderDetail order:references product:references amount:integer
$ bin/rails db:migrate Change the order.yml in Infold. # config/infold/order.yml

model:
  ...
  association:
    customer:
      kind: belongs_to
      name_field: name
-   # Delete the following
-   product:
-     kind: belongs_to
-     name_field: title
+   # Add the following
+   order_details:
+     kind: has_many
+     dependent: destroy
+     model: # Associated models (order_details) can also be set
+       validate:
+         product: presence
+       association: # Further associations to order_details (product)
+         product:
+           kind: belongs_to
+           name_field: title
app:
+ # Bulk display on detail page as well
+ show:
+   fields:
+     - id
+     - customer
+     - order_details:
+         fields:
+           - product
+           - amount
  form:
    fields:
      - customer:
          kind: select
-     # Delete the following
-     - product
-         kind: select
-      - amount
-          kind: number
+     # Add the following
+     - order_details:
+         kind: association
+         fields:
+           - product:
+               kind: select
+           - amount:
+               kind: number Regenerate the order management app from Infold. $ bin/rails g infold Order The form allows bulk registration. Add rows with the ADD button and delete them with the trash icon at the right end of the row. Search and specify associated data from a child screen In the current order management registration form, customers are in a drop-down list. As the number of customers increases, it becomes more and more difficult to specify the corresponding record in the list (for instance, if there are 100 customers, there’ll be 100 choices in the list, making it unusable).
Infold lets you search and specify associated models by from a child screen. Here’s how to change from order management to specifying customers on a child screen. belongs_to First, edit the YAML (customer.yml) on the customer management side to enable child screen searches for customers. # config/infold/customer.yml

model:
  ...
app:
  form:
    ...
+ # Add the following
+ association_search:
+   conditions:
+     - id:
+         sign: eq
+     - name:
+         sign: full_like
+   list:
+     fields:
+       - id
+       - name Next, edit the YAML (order.yml) on the order management side (change from to ). kind select association_search # config/infold/order.yml

model:
  ...
app:
  form:
    fields:
      - customer:
-         kind: select
+         kind: association_search
      - order_details:
        ... Regenerate apps from Infold for customer management and order management. $ bin/rails g infold Customer
$ bin/rails g infold Order You can see that the customer element has changed on the order management registration form screen.
Click the blue "Search" button on this form to bring up the customer search screen on the child screen.
Search on the child screen and click the check icon in the list to transfer the corresponding customer to the order management form. Internationalization (I18n) Infold supports internationalization (I18n). See the and other sources for details. Rails Guide For example, to display Japanese(ja), create as follows. config/initializers/locale.rb # config/initializers/locale.rb

I18n.config.available_locales = [:ja, :en]
I18n.default_locale = :ja
I18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s] Also, download ja.yml from and put it in . rails-i18n config/locales Create a models directory in and create with the following contents. config/locales customer.ja.yml # config/locales/models/customer.ja.yml

ja:
  activerecord:
    attributes:
      customer:
        name: 氏名
        address: 住所
        gender: 性別 The customer management screen will be translated into Japanese. Note: Although the buttons and message content are also translated into Japanese, Infold itself is still only in English and Japanese.
I’d appreciate your help in translating it into your own language! When translating Enum elements, you need to plug in as follows. admin ja:
  activerecord:
    attributes:
      customer:
        name: 氏名
        address: 住所
        gender: 性別
+ enums:
+   admin: #  Need to plug admin
+     customer:
+       gender:
+         male: 男性
+         female: 女性
+         other: その他 Summary This has been a long tutorial, but I hope you now know how to use Infold. As you can see, it’s possible to generate a reasonable level of functionality just by using YAML settings.
The next step is to customize the automatically generated source code. Compared to starting from scratch, I think you’ll be able to speed up implementing admin panels considerably, so I hope you’ll consider using this gem! Code used in this tutorial The code for the app created above is in my . GitHub repository Also published . here

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How to Quickly Build an Admin Panel With Rails7 and Infold

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 React Admin Dashboard Templates For Your Next Website

How to Secure Admin Access to Apache APISIX

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Fantastic JavaScript Projects for Beginners

11 Great Tips From A Guy Who Leveled Up From Intern To Dev

10 React Admin Dashboard Templates For Your Next Website

How to Secure Admin Access to Apache APISIX

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Fantastic JavaScript Projects for Beginners

11 Great Tips From A Guy Who Leveled Up From Intern To Dev

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps