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
Cristian Tabacitu
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.

Backpack CrudField JS Library in action - top scenarios

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 🙏

Want to receive more articles like this?

Subscribe to our "Article Digest". We'll send you a list of the new articles, every week, month or quarter - your choice.

Reactions & Comments

What do you think about this?

Great progress! But, how can I use the new CrudField JavaScript Library in a listOperation with Editable Columns?
In short - you cannot. The CrudField JS Library works with fields, and EditableColumns are columns. As a rule of thumb, you can only use the CrudField JS library on operations with forms (Create & Update).
Is it still a long way to go?
Please take note that we do not plan to add support for CrudField JS Library to EditableColumns. That operation was only created to add means for quick changes, not very complex ones. There is a lot of stuff we "_could_" add to EditableColumns, to support complex logic, but we do not plan on going that route, adding "could" features. It cannot become like Google Sheets, because DataTables & jQuery is not a good foundation for something like that, unfortunately. In short, we've noted your request, but unfortunately it's not in our plans at the moment. Of course, if a lot of people request it... we'll consider it. Cheers!

Latest Articles

Wondering what our community has been up to?