Hide Fields Dynamically on Backpack CRUD Edit Page Based on Switch Selection

[avinashtelsa]

This is my code, if visible_for_new_version is 1, then visible_for_old_version gets hidden, and if visible_for_old_version is 1, then visible_for_new_version gets hidden.

But now, I want it to work in such a way that when I click on edit:

• If visible_for_new_version is 1, then visible_for_old_version should not be shown.
• Similarly, if visible_for_old_version is 1, then visible_for_new_version should not be shown.

protected function setupUpdateOperation()
{
$this->setupCreateOperation();
CRUD::addField([
'name' => 'visible_for_new_version',
'type' => 'switch',
'label' => 'Visible for New Version',
]);
CRUD::addField([
'name' => 'visible_for_old_version',
'type' => 'switch',
'label' => 'Visible for Old Version',
]);
}

[backpack-ai-bot[bot]]

To achieve the dynamic hiding of fields on the Backpack CRUD edit page based on switch selection, you can use the CrudField JavaScript API provided by Backpack. Here's how you can modify your code to implement this functionality:

protected function setupUpdateOperation()
{
    $this->setupCreateOperation();
    
    CRUD::addField([
        'name' => 'visible_for_new_version',
        'type' => 'switch',
        'label' => 'Visible for New Version',
    ]);
    
    CRUD::addField([
        'name' => 'visible_for_old_version',
        'type' => 'switch',
        'label' => 'Visible for Old Version',
    ]);

    // Add custom JavaScript to manage field visibility
    CRUD::addField([
        'type' => 'custom_html',
        'name' => 'my_custom_html',
        'value' => '<script>
            document.addEventListener("DOMContentLoaded", function() {
                crud.field("visible_for_new_version").onChange(function(field) {
                    crud.field("visible_for_old_version").show(field.value == 0);
                }).change();

                crud.field("visible_for_old_version").onChange(function(field) {
                    crud.field("visible_for_new_version").show(field.value == 0);
                }).change();
            });
        </script>'
    ]);
}

This solution uses the CrudField JavaScript API to add interactivity to your form. Here's how it works:

1. We add the two switch fields as you originally had them.

2. We then add a custom HTML field that contains a JavaScript code block.

3. The JavaScript code uses the crud.field() method to select the fields and add onChange event listeners to them.

4. For each switch, when its value changes, it shows or hides the other switch based on its own value.

5. The .change() method at the end of each listener ensures that the visibility is set correctly when the page loads, based on the initial values of the switches.

This code will ensure that:

• If visible_for_new_version is 1 (on), then visible_for_old_version will be hidden.
• If visible_for_old_version is 1 (on), then visible_for_new_version will be hidden.
• This behavior will work both when the page loads and when the user interacts with the switches.

For more information on using the CrudField JavaScript API, you can refer to the CrudField JavaScript Library documentation.

ℹ️ Please note our AI Bot does not reply to follow-ups, this will be the only AI answer in this thread. If the AI helped you find the answer, please mark it as answered or write details below so it can learn. Then close the conversation. If not, please give more information for when a human reads this. ℹ️

Relevant sources:

CrudField JavaScript Library|(12) When a checkbox is checked, hide repeatable and disable all subfields
Columns|Choose Where Columns are Visible
Github Issue (closed): [Feature Proposal] Conditional fields (aka. hide/show fields depending on other fields, aka. toggle field visibility)
Github Issue (closed): Toggle Field Visibility in the Laravel-Backpack demo
Update Operation|How to Use Part 2
Github Issue (closed): Only show field when another field value is true
Github Issue (closed): [Proposal/Suggestion/Enhancement] addField method 'view/update/create/all' (readonly and/or disabled fields)
Github Issue (closed): Allow developers to get the current crud entry based on route parameter
conditional visibility of two fields

[jcastroa87]

I'm glad our bot help you find the answer. I will close this issue, but please feel free to re-open or create a new one if needed.

Cheers.