New Feature - CrudField Javascript Library

If you haven't read our May 2022 Progress Report... we have BIG news for you. In fact it's so big, that it made us bump the version fro...

Cristian Tabacitu

Published on 30 June 2022 in News

Share:

• 
• 

If you haven't read our May 2022 Progress Report... we have BIG news for you. In fact it's so big, that it made us bump the version from Backpack v5.0 to v5.1. It took us 2 months to build, but we think it'll help you in so many complex use cases.

It's now dead-simple simple to do calculations, show/hide fields, enable/disable fields etc depending on what the admin does in the front-end. Custom front-end interactions in the form, that were previously a chore... are now simple, intuitive and officially supported.

Don't believe us? Try out a few scenarios right now, in our online demo.

But to explain a little deeper how it works, let's take a quick example: when the country is USA... show the state field. Here's how simple that is to do now:

// when country is USA, show state field
crud.field('country').onChange(function(field) {
    if (field.value == 'USA') {
        crud.field('state').show();   
    } else {
        crud.field('state').hide();   
    }
});

Or, because action methods take an optional boolean as argument, there's an even shorter way to do the same thing, if that's what you prefer:

// when country is USA, show state field
crud.field('country').onChange(field => crud.field('state').show(field.value == 'USA'));

Notice that:

• we select a field using crud.field('field_name'), which is super-intuitive because it's similar to the PHP syntax; and it will work for any field type; you don't have to tinker for hours to find the proper selector for where the value is stored;
• the field.value is available in the closure (but also field.input, field.name, field.type, field.wrapper etc.);
• we make it easy to watch for the change event using:
  • crud.field('title').onChange()
• you have methods to do the most common actions on fields:
  • crud.field('title').show()
  • crud.field('title').hide()
  • crud.field('title').enable()
  • crud.field('title').disable()
  • crud.field('title').require()
  • crud.field('title').unrequire()
  • crud.field('title').change()

We believe this library already covers 80% of all use cases. And best of all? It gives you the power to easily do the remaining 20% yourself - you can do literally whatever you want. At the end of the day, after you've selected the field... it's pure Javascript (or jQuery), so there are no limitations. If the library doesn't do something you want, you can do anything yourself - go wild.

Don't believe us? Check out the examples in the docs or use the examples live in our demo. We've already coded the top scenarios people have requested in the past 7 years... look at how simple it is. The more complex the scenario, the more you realize the incredible simplicity and flexibility of this solution. We love this new feature. And we think you will too.

Best of all? This is a FREE feature, inside Backpack\CRUD v5.1. That means everybody gets it:

• devs who are only using Backpack\CRUD;
• devs who are using Backpack\PRO;
• devs who have bought our EVERYTHING bundle;

Want to use it? Just run composer update, that's it. No strings attached.

Thanks to everybody who's nagged us over the years that we needed this. To everyone who's submitted a PR for this but didn't got merged (me included 😅). And to everyone who's contributed to this. But special thanks to our team member Pedro Martins (@pxpm) who's done the grunt work.

Thanks for using Backpack. We love doing this for you 🙏