[4.1][Feature] New field type - Toggle Field Visibility #165

OwenMelbz · 2016-10-05T15:30:54Z

Summary

Hides/Shows other form groups based on a radio selection

Preview

Usage

//Controller->setUp()
$this->crud->addField([
    'label' => 'Is this a featured article?',
    'name' => 'featured', // can be a real db field, or unique name
    'type' => 'toggle',
    'options' => [ // same as radio, these act as the options, the key is the radio value
        0 => 'Not Featured',
        1 => 'Yes Featured'
    ],
    'hide_when' => [ // these fields hide (by name) when the key matches the radio value
        0 => ['featured_image', 'featured_title'],
        1 => ['basic_title']
    ],
    'default' => 0 // which option to select by default
]);

OwenMelbz · 2016-12-02T22:20:12Z

@tabacitu and maybe this :)

OwenMelbz · 2017-02-04T08:39:10Z

Hey @tabacitu - I've had a good few people recently asking about this feature, and as it's simple, wondering what the chances are of a merge for it soon? We're about to start another project and would be awesome to have a few more baked in :)

MarcosBL · 2017-02-21T17:28:21Z

Not sure how to propose this, don't know if I can make a PR over a PR, so I better comment it here, as it is a tiny change.

@OwenMelbz , iCheck doesn't propagate "change" events, so if you use it to style your forms, it will break toggle: it will hide fields on initial load correctly, but it will not work on the "change/click" events.

In order to enable it for iCheck as well, we can listen for both native and iCheck events (ifChecked), and that solves it:

$('input[data-field-toggle]').on('change ifChecked', function(){

OwenMelbz · 2017-02-21T18:13:01Z

Hmm, is a tricky one!

However, I would say we cannot cater for every plugin lol, otherwise we'd be never stopping!

My solution would be something along the lines of

If you don't mind editing the view and adding in the event, thats fine, otherwise you should make your iCheck plugin or any other plugin fire the change event from their plugin.

I dont know how icheck works, but imagine this

$('input[radio]').iCheck({
    onChange() {
        this.trigger('change');
    }
});

MarcosBL · 2017-02-21T20:26:10Z

You are of course right, I only commented because of AdminLTE being part of Backpack, and including the plugin (and because is a non breaking change, of course!), just in case someone found the same problem if they use your toggle template, so they can find the comment :)

MarcosBL · 2017-02-21T20:39:31Z

Just as aditional information, I managed to get it working without the event using this, pretty self-explanatory:

if ( $.isFunction($.fn.iCheck) ) {
	$('input:not(.primary_list,.secondary_list)').on('ifChanged', function(event){
       		 $(event.target).trigger('change');
	}).iCheck({
		checkboxClass: 'icheckbox_flat-blue',
		radioClass: 'iradio_flat-blue',
	});
}

jsiebach · 2017-03-27T16:25:52Z

@OwenMelbz One thing that doesn't seem to work properly - a field that is toggled by multiple other fields. Basically, field A is a toggle. If a certain response is filled out, then show field B. B is also a toggle. B determines whether or not to show field C.

Field A is configured like:

'hide_when' => [
  0 => ['B', 'C'],
  1 => []
]

Field B is configured like:

'hide_when' => [
  0 => ['C'],
  1 => []
]

Then I go through this process:

Select "1" for "A"

B and C appear

Select "0" for "B"

C disappears

Toggle "A" to "0" and then back to "1"

C reappears, even though it should still be hidden due to it's dependency on B

eyemiru · 2017-04-19T13:21:22Z

Cool feature, waiting for it to be merged! :)

Edit: Can we make this a checkbox instead of radio button?
Edit2: Seems like it won't work for other data types like "date_range".

Fixed Edit2 while editing toggle.blade.php

var f = $('[name="'+name+'"]').parents('.form-group'); -> var f = $('.'+name+'');

jrpub · 2017-05-24T21:35:22Z

Would be good to find a better way: Laravel is using VueJS for the client's side rendering (by default). The lack of convergence between Backpack and VueJS will lead to a problem one day or another, and it is already frustrating.
When I see the code proposed I don't think it is a good idea to merge it.

lloy0076 · 2017-05-24T21:41:20Z

Integrating VueJS and Backpack would be a lot of work - I agree that Laravel seems to be going down the VueJS pathway but - and this is just my own opinion - I really don't trust Laravel to decide (next year, week, in Laravel 5.8) to choose some other shiny new JavaScript framework.

(I know I'm sounding old and grumpy :P).

usmanhafeez147 · 2017-08-19T12:27:58Z

what is coding for toggle view?

lloy0076 · 2017-08-25T02:12:50Z

@usmanhafeez147 - sorry I don't quite understand what you're asking in #165 (comment)?

lloy0076 · 2017-08-25T02:13:27Z