[Feature Proposal] Conditional fields (aka. hide/show fields depending on other fields, aka. toggle field visibility)

This is the most upvoted feature in our feature poll. So it’s the first one we can tackle, now that we have v5 ready for launch.

Let’s do this!!! 💪

The Problem

I’ve studied all previous PRs for this:

• 2016 - https://github.com/Laravel-Backpack/CRUD/pull/165
• 2018 - https://github.com/Laravel-Backpack/CRUD/pull/1257
• 2020 - https://github.com/Laravel-Backpack/CRUD/pull/3420
• 2021 - https://github.com/Laravel-Backpack/CRUD/pull/3753

As I said in https://github.com/Laravel-Backpack/addons/issues/11 … this is a tricky problem to solve… because the developer needs can be so very different. In various places, people ask:

• for the “source” to be a select, others radio, checkbox, checklist, select2_from_array, etc;
• for the “source” to be multiple fields, not just one;
• for the “action” to be “hiding”;
• for the “action” to be “showing”;
• for the “action” to be “hiding and disabling”;
• for the “action” to be “calculating the value”;

I’m ashamed we haven’t done anything to solve this until now. Literal shame. But… the reason we haven’t merged any of those… is that I didn’t see way for us to cover what most devs need, most of the time. We would only be covering a particular use case, which would most certainly have meant we would be adding features and niche use cases to it for years, as people report them. And that simply wasn’t a good idea, to take on such a big maintenance burden… when it’s not that difficult to do it in JS, for the people who needed it. You could do it in create.js and update.js and you have a solution, for your project alone, with maximum customizability. That’s why I’ve been suggesting “creating an addon for it” to devs who have made PRs for this… because they were niche solutions, and for sure somebody would have used it… but not everybody would have been happy with it.

I didn’t see how we can build this feature/field/whatever so that most people will be happy with it. But now… I think I do. And it’s sort of what @pxpm suggested here… but without the AJAX calls, which I think are unproductive and bound to fail.

And thanks to the open-core split… we can start adding more and more feature, right into backpack/pro.

The Solution

What if… instead of wanting to define the JS behavior in PHP… we accept we have to write a little bit of JS for this? And have Backpack make that bit of JS so easy to write, it’s a pleasure? In Backpack v5, thanks to the script widget, we can do:

Widget::add()->type('script')->content(asset('/path/to/js/file.js'));

So what if…

Step 1. We make it even easier, by providing a convenience method on CRUD, that also allows for inline content. Something like:

CRUD::addJavascript('/path/to/js/file.js');

// or even

CRUD::addJavascript("alert('what you want to be done here')");

Step 2. We make it dead-simple to write ALL of the combinations above, by providing a selector and a few actions on the crud javascript object (it’s already onpage, usually used for working with DataTables). So that what JS you actually write looks like this:

// option 1 - probably needs jQuery
crud.field('agree').on("change", function() {
    crud.field('price').show();
});
crud.field('agree').onChange(function() {
    crud.field('price').show();
});

// option 2 - maybe doesn't need jQuery
crud.field('agree').addEventListener("change", function() {
    crud.field('price').show();
});

// of course, you should be able to do a few other stuff with your `fields`, but the minimum would be:
crud.field('price').show();
crud.field('price').hide();
crud.field('price').disable();
crud.field('price').enable();
crud.field('price').value(); // aka .setValue(), aka .val()

I believe this would solve all cases people have already expressed… but also fix the cases people haven’t expressed yet. Which I’m sure will come up, in real apps, right after we introduce a feature with limited customizability. But by moving this logic to JS… it opens up the possibility for you to do… anything you want. It’s JS, and you have complete control.

---

Thoughts, anyone? Am I missing something? Or is this a solution we could all get behind? I’m eager to prototype this, to see if we can launch it with Backpack v5 this week 🎉 I have a feeling it’s either a lot simpler than I expect… or a lot more difficult 😅

Can’t tell if this idea is incredibly good… or incredibly stupid 😅 Let me know.

[promatik]

Hi everyone! I’ve done this in the past, using Javascript, I created a simple solution for what I needed at that time, take a look at the result;

https://user-images.githubusercontent.com/1838187/161063634-b3cc44fb-201e-471a-adea-7cee785f0425.mp4

You can show/hide based on select and input[type="checkbox"].

Until Backpack provides a solution for this, you can use this code. It uses wrapperAttributes to add attributes to fields (select, checboxs) so it hides and shows based on that

It’s super easy to implement, here is the code;

public/assets/js/backpack-toggle.js

JavaScript

let toggleInputFields = elem => {
  const targetsIds = elem.dataset.toggles.split(' ');
  targetsIds.forEach(id => {
    const targetElem = document.querySelector(
      `#${id}, [data-field-name=${id}]`
    );

    const checkbox = elem.querySelector('input[type="checkbox"]');
    targetElem.classList.toggle('d-none', !checkbox.checked);
  });
};

let toggleSelectFields = elem => {
  const { value } = elem;
  const { dataset: { toggles }} = elem.closest('[data-toggles]');

  document.querySelectorAll(`[${toggles}]`).forEach(field => {
    let r = false;

    // Check if json or single value
    try {
      r = !JSON.parse(field.attributes[toggles].value).includes(value);
    } catch (e) {
      r = field.attributes[toggles].value !== value;
    }

    // Toggle visibility
    field.classList.toggle('d-none', r);

    // Clear any child selects
    field.querySelectorAll('[data-toggles] select').forEach(select => {
      select.value = '';
      toggleSelectFields(select);
    });
  });
};

let initTogglers = () => {
  document.querySelectorAll('[data-toggles]').forEach(elem => {
    const field = elem.querySelector('input[type="checkbox"], select');
    // eslint-disable-next-line default-case
    switch (field.type) {
      case 'checkbox':
        // On click
        elem.addEventListener('click', () => {
          toggleInputFields(elem);
        });

        // Check initial status
        if (elem.querySelector('[type=checkbox]').checked) {
          toggleInputFields(elem);
        }
        break;
      case 'select-one':
        // On change
        $(elem).on('change', () => {
          toggleSelectFields(field);
        });

        // Check initial status
        toggleSelectFields(field);
        break;
    }
  });
};

document.addEventListener('DOMContentLoaded', initTogglers);

public/assets/css/backpack-toggle.css

CSS

.form-quote {
  border-left: 1px solid #e7e8ea;
  margin-left: 2rem;
  max-width: calc(100% - 4rem);
  margin-bottom: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

app\Http\Controllers\Admin\EntityCrudController.php

PHP

protected function setupCreateOperation() {
    Widget::add()->type('script')->content('assets/js/backpack-toggle.js');
    Widget::add()->type('style')->content('assets/css/backpack-toggle.css');
    ...

// Select Toggler
CRUD::addField([
    ...
    'wrapperAttributes' => [
        'data-toggles' => 'toggler-device-type',
    ],
]);

CRUD::addField([
    ...
    'wrapperAttributes' => [
        'class' => 'd-none form-group col-sm-12 form-quote',
        'toggler-device-type' => 'win',
    ],
]);

// Checkbox Toggler
CRUD::addField([
    ...
    'wrapperAttributes' => [
        'class' => 'field-toggler form-group col-sm-12',
        'data-toggles' => 'hours minutes',
    ],
]);

CRUD::addField([
    ...
    'wrapperAttributes' => [
        'class' => 'd-none col-12 form-quote',
        'id' => 'hours',
    ],
]);

CRUD::addField([
    'name' => 'minutes',
    ...
    'wrapperAttributes' => [
        'class' => 'd-none col-12 form-quote',
        'id' => 'minutes',
    ],
]);

---

The example video above uses the following code;

app\Http\Controllers\Admin\EntityCrudController.php

Example PHP

protected function setupCreateOperation() {
    Widget::add()->type('script')->content('assets/js/backpack-toggle.js');
    Widget::add()->type('style')->content('assets/css/backpack-toggle.css');
    
    // Toggler Device Type
    CRUD::addField([
        'name' => 'device_type',
        'label' => 'Device type',
        'type' => 'select_from_array',
        'options' => [
            'win' => 'Windows',
            'linux' => 'Linux',
            'mac' => 'Mac',
            'unix' => 'Unix',
        ],
        'default' => 'win',
        'wrapperAttributes' => [
            'data-toggles' => 'toggler-device-type',
        ],
    ]);

    CRUD::addField([
        'name' => 'win_script',
        'label' => 'Windows script',
        'wrapperAttributes' => [
            'class' => 'd-none form-group col-sm-12 form-quote',
            'toggler-device-type' => 'win',
        ],
    ]);

    CRUD::addField([
        'name' => 'win_type',
        'label' => 'Windows type',
        'type' => 'select_from_array',
        'options' => [
            'win10' => 'Win 10',
            'win11' => 'Win 11',
        ],
        'default' => 'win',
        'wrapperAttributes' => [
            'class' => 'd-none form-group col-sm-12 form-quote',
            'toggler-device-type' => 'win',
            'data-toggles' => 'toggler-win-type',
        ],
    ]);

    CRUD::addField([
        'name' => 'win11',
        'label' => 'Windows 11 special function',
        'wrapperAttributes' => [
            'class' => 'd-none col-12 form-quote',
            'toggler-win-type' => 'win11',
        ],
    ]);

    // ---

    CRUD::addField([
        'name' => 'linux_title',
        'label' => 'Linux title (unix / linux)',
        'wrapperAttributes' => [
            'class' => 'd-none col-12 form-quote',
            'toggler-device-type' => json_encode(['linux', 'unix']),
        ],
    ]);

    CRUD::addField([
        'name' => 'mac_title',
        'label' => 'Mac title (unix / mac)',
        'wrapperAttributes' => [
            'class' => 'd-none col-12 form-quote',
            'toggler-device-type' => json_encode(['mac', 'unix']),
        ],
    ]);

    CRUD::addField([
        'name' => 'unix_script',
        'label' => 'Unix script (unix / (linux / mac))',
        'wrapperAttributes' => [
            'class' => 'd-none col-12 form-quote',
            'toggler-device-type' => json_encode(['unix', 'linux', 'mac']),
        ],
    ]);

    // Toggler time
    CRUD::addField([
        'name' => 'scheduled_time',
        'label' => 'Scheduling time',
        'type' => 'checkbox',
        'wrapperAttributes' => [
            'class' => 'field-toggler form-group col-sm-12',
            'data-toggles' => 'hours minutes',
        ],
    ]);

    CRUD::addField([
        'name' => 'hours',
        'label' => 'Hours',
        'type' => 'select2_from_array',
        'options' => range(0, 23),
        'wrapperAttributes' => [
            'class' => 'd-none col-12 form-quote',
            'id' => 'hours',
        ],
    ]);

    CRUD::addField([
        'name' => 'minutes',
        'label' => 'Minutes',
        'type' => 'select2_from_array',
        'options' => range(0, 60),
        'wrapperAttributes' => [
            'class' => 'd-none col-12 form-quote',
            'id' => 'minutes',
        ],
    ]);

    // Toggler weekdays
    CRUD::addField([
        'name' => 'scheduled_weekdays',
        'label' => 'Scheduling weekdays',
        'type' => 'checkbox',
        'wrapperAttributes' => [
            'class' => 'field-toggler form-group col-sm-12',
            'data-toggles' => 'weekdays',
        ],
    ]);

    CRUD::addField([
        'name' => 'weekdays',
        'label' => 'Weekdays',
        'type' => 'select2_from_array',
        'allows_multiple' => true,
        'options' => ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturay'],
        'wrapperAttributes' => [
            'class' => 'd-none col-12 form-quote',
            'id' => 'weekdays',
        ],
    ]);
}

[ashek1412]

however, I have to do it using javascript for the time being. but when you guys put your plan into action?