Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Dave Wize's avatar

Nova Dependent Fields are only working on forms?

I did some dependent fields in nova, but it only hide the field on forms and not in the detials view, is there a way around this?

Here is my code

            BelongsTo::make('Living Town', 'brideLivingTown')
                ->nullable()
                ->hideFromIndex()
                ->dependsOn(['eventType'], function (Field $field, NovaRequest $request, FormData $formData) {
                    if (!in_array($formData['eventType'], [1, 3, 4, 6, 9, 10, 13])) {
                        $field->hide();
                    }
                }),
0 likes
1 reply
LaryAI's avatar
Level 58

Unfortunately, Nova dependent fields only work on forms and not on the details view by default. However, there is a workaround to achieve this functionality.

You can create a custom view for the details page and use JavaScript to hide/show the dependent fields based on the selected value of the parent field.

Here's an example of how you can achieve this:

  1. Create a custom view for the resource's details page. You can do this by creating a new file in the resources/views/vendor/nova/[resource-name] directory. For example, if your resource is called User, you can create a file called details.blade.php in the resources/views/vendor/nova/users directory.

  2. In the custom view, add the following code to include the Nova assets and jQuery:

@extends('nova::layout')

@section('content')
    <div class="card">
        <div class="card-body">
            <div class="form-group">
                <label class="control-label">{{ __('Event Type') }}</label>
                <p>{{ $resource->eventType }}</p>
            </div>

            <div class="form-group" id="dependent-field">
                <label class="control-label">{{ __('Living Town') }}</label>
                <p>{{ $resource->brideLivingTown }}</p>
            </div>
        </div>
    </div>

    <script src="{{ mix('js/app.js', 'vendor/nova') }}"></script>
    <script>
        $(document).ready(function () {
            var eventType = '{{ $resource->eventType }}';

            if (!in_array(eventType, [1, 3, 4, 6, 9, 10, 13])) {
                $('#dependent-field').hide();
            }
        });
    </script>
@endsection
  1. In the custom view, replace the {{ $resource->eventType }} and {{ $resource->brideLivingTown }} placeholders with the actual field values.

  2. In the JavaScript code, replace the in_array function with the indexOf function to check if the selected value of the parent field is in the array of allowed values.

  3. In the Nova resource file, remove the dependsOn method from the BelongsTo field definition.

With this solution, the dependent field will be hidden on the details page if the selected value of the parent field is not in the array of allowed values.

Please or to participate in this conversation.