Drupal: Asset selection with Inline Entity Form + Entity Browser (Gin, no custom module)

Purpose

This page documents the final, working setup for selecting and managing Assets on entity edit forms (e.g. Person → Asset), using:

Inline Entity Form (IEF) – Complex (table display)
Entity Browser (modal picker with search and thumbnails)
Gin admin theme
No custom module
No JavaScript logic
Hardened for AlmaLinux / SELinux

The goal was to provide a historian‑friendly UX while keeping the solution maintainable and upgrade‑safe.

---

Requirements

Drupal 10/11
Inline Entity Form (>= 3.x)
Entity Browser (2.x)
Gin admin theme
Assets as a reusable entity (e.g. node or media)
AlmaLinux with SELinux enforcing

---

Functional Requirements

Editors select existing Assets via a modal with search and thumbnails
Selected Assets appear as a table on the edit form
Editors can remove / reorder Assets
Editors must NOT be confused by an "Add node" action
No custom Drupal module may be introduced

---

Architecture Overview

Why this architecture

Drupal provides two strong but complementary tools:

Tool	Role
Inline Entity Form (Complex)	Table display + edit/remove/reorder
Entity Browser	Modal selection UI using Views

The key is:

IEF controls how selected items are displayed
Entity Browser controls how items are selected

They must be combined correctly.

---

Correct Field Configuration

Entity reference field

On the parent entity (e.g. Person):

Field type: Entity reference
Target: Asset
Cardinality: Unlimited

Form display

Widget: Inline Entity Form – Complex
Widget settings:
- ✅ Allow users to add existing entities
- ❌ Allow users to add new entities
- Entity Browser: select the Asset picker browser

Important: Do NOT set the field widget itself to "Entity Browser". That results in a pill/tabs UI instead of a table.

---

Known UX Issue

When clicking Add existing Asset, Inline Entity Form opens an intermediate chooser dialog containing:

Select entities
Add node
Cancel

Even when "Add new" is disabled in IEF settings, the Add node button still appears. This is a known limitation of IEF.

For historians, this button is misleading and must be hidden.

---

Final Solution: Hide the "Add node" Button (CSS only)

Why CSS

No custom module
No JS behaviors
Upgrade‑safe
Gin explicitly supports admin CSS overrides

Location

Create or edit:

sites/default/files/gin-custom.css

This file is automatically loaded by Gin for admin pages.

---

Working CSS (final)

/* Hide misleading "Add node" button in Inline Entity Form chooser */
input.ief-entity-submit[data-drupal-selector*="ief-reference-save"][value="Add node"] {
  display: none !important;
}

Why this works

Targets the exact submit button rendered by IEF
Uses stable attributes:
- class: ief-entity-submit
- attribute: data-drupal-selector
Does NOT depend on dialog wrappers (.ui-dialog, .gin-dialog)
Survives AJAX re-rendering
Gin does not override display: none on this element

---

Security Considerations (AlmaLinux / SELinux)

Because gin-custom.css and optional gin-custom.js live in sites/default/files, permissions and SELinux labels matter.

Correct permissions

-rw-r--r-- root root gin-custom.css

Apache must NOT have write access.

Correct SELinux label

httpd_sys_content_t

Verify with:

ls -Z sites/default/files/gin-custom.css

Apache write test (should fail):

echo "test" | sudo -u apache tee -a sites/default/files/gin-custom.css

Expected:

Permission denied

This ensures admin JS/CSS cannot be overwritten by the web server.

---

Performance Notes

1000+ Assets is fine
Entity Browser uses a View with pagination and filters
Only referenced Assets are rendered in the IEF table
Thumbnails should always use image styles
This setup is comparable to Drupal Media Library performance

---

Known Limits

The intermediate IEF chooser dialog cannot be removed by configuration
The "Add node" button cannot be removed server‑side without custom code
CSS hiding is the cleanest possible solution under the constraints

---

Future Improvements

Add thumbnail column to IEF table
Scope CSS to specific fields if desired
Improve wording via UI translation if needed

---

Summary

This solution achieves:

✅ Clean historian UX
✅ Table-based Asset management
✅ Modal picker with search
✅ No custom module
✅ Secure on SELinux
✅ Maintainable and upgrade-safe

The key lesson is: Once the exact HTML is known, target the element directly.