ActiveAdmin plugin to add dynamic behaviors to fields
MIT License
An Active Admin plugin to add dynamic behaviors to some fields.
Features:
The easiest way to show how this plugin works is looking the examples below.
Please ⭐ if you like it.
First, add the gem to your ActiveAdmin project: gem 'activeadmin_dynamic_fields'
(and execute bundle
)
If you installed Active Admin without Webpacker support:
//= require activeadmin/dynamic_fields
Otherwise with Webpacker:
yarn add blocknotes/activeadmin_dynamic_fields
require('activeadmin_dynamic_fields')
Options are passed to fields using input_html parameter as data attributes.
Conditions:
"data-if": "checked"
)"data-if": "!checked"
)"data-eq": "42"
or "data-eq": "!5"
)"data-eq": "!something"
)"data-mismatch": "^\d+$"
)"data-function": "my_check"
)Actions:
"data-then": "hide", "data-target": ".errors"
)"data-then": "addClass red"
)"data-then": "addStyle color: #fb1; font-size: 12px"
)"data-then": "setText A sample text"
)"data-then": "setValue A sample value"
)"data-then": "callback a_fun"
)Targets:
A check condition or a custom check function are required. A trigger action is required too, unless you are using a custom function (in that case it is optional).
form do |f|
f.inputs 'Article' do
f.input :published, input_html: { data: { if: 'checked', then: 'hide', target: '.grp1' } }
f.input :online_date, wrapper_html: { class: 'grp1' }
f.input :draft_notes, wrapper_html: { class: 'grp1' }
end
f.actions
end
data = { if: 'not_checked', then: 'addClass first second third', target: '.grp1', else: 'addClass forth' }
f.input :published, input_html: { data: data }
f.input :title, input_html: { data: { if: 'blank', then: 'setValue 10', target: '#article_position' } }
attrs = { 'data-function': 'title_empty', 'data-then': 'slide', 'data-target': '#article_description_input' }
f.input :title, input_html: attrs
function title_empty(el) {
return ($('#article_title').val().trim() === '');
}
data = { if: 'checked', then: 'callback set_title', args: '["Unpublished !"]' }
f.input :published, input_html: { data: data }
function set_title(args) {
if($('#article_title').val().trim() === '') {
$('#article_title').val(args[0]);
$('#article_title').trigger('change');
}
}
collection = [['Cat 1', 'cat1'], ['Cat 2', 'cat2'], ['Cat 3', 'cat3']]
f2.input :category, as: :select, collection: collection, input_html: { 'data-function': 'on_change_category' }
function on_change_category(el) {
var target = el.closest('fieldset').find('.pub');
target.prop('checked', (el.val() == 'cat2');
target.trigger('change');
}
member_action :save, method: [:post] do
render ActiveAdmin::DynamicFields.update(resource, params)
# render ActiveAdmin::DynamicFields.update(resource, params, [:published])
# render ActiveAdmin::DynamicFields.update(resource, params, Article::permit_params)
end
# Edit a string:
column :title do |row|
div row.title, ActiveAdmin::DynamicFields.edit_string(:title, save_admin_article_path(row.id))
end
# Edit a boolean:
column :published do |row|
status_tag row.published, ActiveAdmin::DynamicFields.edit_boolean(:published, save_admin_article_path(row.id), row.published)
end
# Edit a select ([''] allow to have a blank value):
column :author do |row|
select ActiveAdmin::DynamicFields.edit_select(:author_id, save_admin_article_path(row.id)) do
options_for_select([''] + Author.pluck(:name, :id), row.author_id)
end
end
attributes_table
block):row :title do |row|
div row.title, ActiveAdmin::DynamicFields.edit_string(:title, save_admin_article_path(row.id))
end
Example with 2 models: Author and Article
Prepare the content dialog - in Active Admin Author config:
ActiveAdmin.register Author do
# ...
member_action :dialog do
record = resource
context = Arbre::Context.new do
dl do
%i[name age created_at].each do |field|
dt "#{Author.human_attribute_name(field)}:"
dd record[field]
end
end
end
render plain: context
end
# ...
end
Add a link to show the dialog - in Active Admin Article config:
ActiveAdmin.register Article do
# ...
show do |object|
attributes_table do
# ...
row :author do
link_to object.author.name, dialog_admin_author_path(object.author), title: object.author.name, 'data-df-dialog': true, 'data-df-icon': true
end
end
end
# ...
end
The link url is loaded via AJAX before opening the dialog.
If you use this component just star it. A developer is more motivated to improve a project when there is some interest. My other Active Admin components.
Or consider offering me a coffee, it's a small thing but it is greatly appreciated: about me.
The gem is available as open-source under the terms of the MIT.