Nova Fields Agent Laravel Package

Getting Started

Install

composer require outhebox/nova-fields-agent

The package registers its assets through its service provider (no publish step is documented for the JS/CSS it injects). After install, run php artisan nova:publish only if you need to re-copy Nova's own assets, then hard-refresh the browser.

Where to look first

1. vendor/outhebox/nova-fields-agent/src/ — the field class and its fieldInformation/component definition. This tells you exactly which methods (hideOnMobile, hideOnDesktop, or similar) exist.
2. resources/js/ inside the package — the Vue component that actually applies the responsive hiding. Confirm the breakpoint (usually Tailwind's md, i.e. 768px).
3. The repo README for the exact container API — the package is from 2019 and targets Nova 2.x/3.x, so verify against the package source rather than assuming Nova 4/5 behaviour.

First use case

The classic scenario: an index table with ID, timestamps, long text columns, and several booleans that is unusable on a phone. Wrap the noisy columns in the package's container so they render on desktop but disappear below the mobile breakpoint:

use Outhebox\NovaFieldsAgent\FieldsAgent;

public function fields(Request $request)
{
    return [
        FieldsAgent::make([
            ID::make()->sortable(),
            Text::make('Slug'),
            DateTime::make('Created At')->sortable(),
        ])->hideOnMobile(),

        Text::make('Name')->sortable(),
        Badge::make('Status'),
    ];
}

The goal is a mobile table that shows only the two or three columns that matter, without duplicating your fields() method or inventing a second resource.

Implementation Patterns

Split the resource into "mobile essentials" and "desktop extras"

The cleanest pattern is to declare the container once and let it carry the desktop-only material:

public function fields(Request $request)
{
    return [
        // Always visible
        Text::make('Name')->sortable()->rules('required'),
        Badge::make('Status'),

        // Desktop-only noise
        FieldsAgent::make([
            ID::make()->sortable(),
            Text::make('Email'),
            DateTime::make('Updated At')->sortable(),
        ])->hideOnMobile(),
    ];
}

Keep authorization out of the container

Hiding a field on mobile is a presentation concern. Do not use it to hide sensitive data — the value is still serialised into the index/detail payload. Use canSee() / policies for that and the container only for layout:

FieldsAgent::make([
    Text::make('Internal Notes')->canSee(fn ($request) => $request->user()->isAdmin()),
])->hideOnMobile(),

Combine with Nova's own visibility modifiers carefully

hideFromIndex(), onlyOnDetail(), and sortable() belong on the inner fields where the container forwards them. If the container does not forward a modifier, apply it to the wrapped field directly:

FieldsAgent::make([
    Text::make('Body')->onlyOnDetail(),
    Text::make('Summary')->hideFromDetail(),
])->hideOnMobile();

Use one container per visual group

Rather than one giant container, create small groups that map to the information hierarchy you want on desktop. It keeps the field list readable and lets you flip individual groups later:

FieldsAgent::make([ID::make(), Text::make('Slug')])->hideOnMobile(),
FieldsAgent::make([DateTime::make('Created At'), DateTime::make('Updated At')])->hideOnMobile(),

Pair with a form-layout package

On the detail/create forms, this package is a blunt instrument — you generally want real layout control. Keep the container for index tables and use Nova's native Panels/Field::make(...)->hideFromIndex() or a form-builder package for forms.

Integration tip: mirror it in custom tooling

If you generate resources (e.g. php artisan nova:resource), add the container to your own stubs so new resources follow the same mobile convention. Otherwise the pattern decays as soon as someone scaffolds a new resource.

Gotchas and Tips

Nova version compatibility is the biggest risk. The last release was December 2019 and targets Nova 2/3. On Nova 4/5 the Vue component and asset registration may not load at all. Smoke-test on a non-production branch before adopting.

Hiding is CSS/client-side, not server-side. The field values are still sent to the browser and still participate in search, sorting, and filters. A mobile user can unhide columns with dev tools. Treat hideOnMobile() as cosmetic only — never as a security or data-minimisation control.

Column count / alignment issues on the index table. Nova renders cells positionally. If the container's JS hides cells by index or by injecting a class onto siblings, reordering fields, or conditionally including a field via canSee(), can shift the hidden cell onto the wrong column. After adding or removing a field inside a container, re-check the table on a phone viewport. This is the most common bug with wrapper-style responsive packages.

Search and sort behaviour is unchanged. A column hidden on mobile can still be the active sort or the matched search column, which is confusing ("why is this row first?"). If you sort by a desktop-only column, either keep that column visible on mobile or add a mobile-visible sort indicator.

Breakpoint is baked in. If the package hides at Tailwind's md (768px), tablets in portrait lose columns too. If you need a different cutoff, override the CSS in Nova::style() or your app's stylesheet targeting the package's class names — don't fork the package for a one-line change.

Asset caching. After composer update or a deploy, hard-refresh or bump your asset version. The injected JS/CSS is easy to serve stale, and the symptom ("it just doesn't hide anything") looks like a broken package when it is a cache.

php artisan nova:publish is not the fix. If the field renders as an unknown component, the package's assets are not being registered — check that the service provider is auto-discovered (composer dump-autoload) and that the package supports your Nova major version.

No dependents, no tests, 10 stars. This is a single-purpose micro-package. For a one-line need, the lower-risk option is Nova's own hideFromIndex() combined with a small Nova::style() rule, e.g.:

// NovaServiceProvider::boot()
Nova::style('mobile-columns', __DIR__.'/../resources/css/nova-mobile.css');

@media (max-width: 767px) {
    .resource-table th:nth-child(3),
    .resource-table td:nth-child(3) { display: none; }
}

That approach is brittle in its own way (nth-child) but has zero dependency risk. Weigh the convenience of the container against the fact that you may end up maintaining a 2019 package.

Vendor lock check before adopting. Run composer why-not outhebox/nova-fields-agent against your Nova version and confirm the constraint allows your install; the composer.json from 2019 likely pins laravel/nova loosely or not at all, which can produce silent breakage on Nova upgrades rather than a clear constraint conflict.

Extension point. If the package only ships hideOnMobile, wrap it in your own thin factory (e.g. App\Nova\Fields\Responsive::make(...)) so that when you eventually replace the package with CSS or a Nova-native solution, you change one class instead of every resource.