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:
-
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 calledUser, you can create a file calleddetails.blade.phpin theresources/views/vendor/nova/usersdirectory. -
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
-
In the custom view, replace the
{{ $resource->eventType }}and{{ $resource->brideLivingTown }}placeholders with the actual field values. -
In the JavaScript code, replace the
in_arrayfunction with theindexOffunction to check if the selected value of the parent field is in the array of allowed values. -
In the Nova resource file, remove the
dependsOnmethod from theBelongsTofield 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.