How to access CRUD fields via javascript to manipulate Form

Hey there! This is a quick tutorial on the CrudField JavaScript Library. I'm trying it for the first time while writing this article. I...

Hey there! This is a quick tutorial on the CrudField JavaScript Library. I'm trying it for the first time while writing this article. I knew it helps to manipulate Backpack Fields on user interaction with the form. Like ~ hiding or showing fields on another field selection or change in input.

It makes CRUD fields accessible in Javascript and helps to customize the form on the field's change event. I thought of seeing it in action before making one. I knew the backpack demo would have it & I found it showcased here on FieldMonster CRUD. It would be a helpful experience before building one.

What I learnt on the first look:

1. Selectors: The first thing I saw is a selectors syntax. Just pass the field name to crud.field() method to select the CRUD field. For example:

• crud.field('first_name') will return the CrudField object for a field with the name "first_name";
• crud.field('testimonials').subfield('text') will return subfield of the testimonials repeatable field;

2. Properties: The second thing I learnt is the available properties of the field object:

• .name will return the field name (eg. first_name);
• .type will return the backpack field type (eg. text);
• .input will return the DOM element that actually holds the value (eg. input/textarea/select);
• .value will return the value of that field;

3. Event: These field objects come with an onChange event to do something when the field value changes. For example:

.onChange(function(field) {
    do_someting();
});

4. Methods: The field object comes with useful methods to cover most use cases:

• .hide() to hide the field;
• .show() to show the field;
• .disable() to make that field's input disabled;
• .enable() to remove disabled attribute from that field's input;
• .require() adds an asterisk next to that field's label;
• .unrequire() removes an asterisk next to that field's label;
• .change() to trigger the change event (useful for a default state on pageload);
• .check() to check mark, if the field is a checkbox;
• .uncheck() to uncheck, if the field is a checkbox;

Everything is pretty straight & clean. Right? I loved it❤️

Where to write the code?

After reading the info, I was confident enough because it looked very similar, nothing new. I further read to know where to code.

We've to create a file to hold the custom JS. As a convention, the recommendation is to split up the JS by entity name. For example, for a Product CRUD, the recommendation is to create public/assets/js/admin/forms/product.js.

This way we load the related javascript of that particular form.

How to load the script

Use the script widget to load that script file. Add it within setupCreateOperation() or setupUpdateOperation(), depending on when you want it loaded:

use Backpack\CRUD\app\Library\Widget;

Widget::add()
        ->type('script')
        ->content(asset('assets/js/admin/forms/product.js'));

An example for a better picture:

 crud.field('agree_to_terms').onChange(function(field) {
    if (field.value == 1) {
        crud.field('agree_to_marketing_email').show();
    } else {
        crud.field('agree_to_marketing_email').hide();
    }
 }).change();

Notice that we did three things here:

1. Selected a field using crud.field('agree_to_terms')
2. Defined what happens when that field gets changed, using .onChange();
3. Triggered the change event using .change() - that way, the closure will get evaluated when the pageloads, not only when the field actually gets changed;

You can find more examples here.

Summary

You know it, I know it and let everybody know how easy it is to build & manipulate CRUD forms in Backpack. Share the article with your colleague & fellow friends.

Know more on Docs

Thanks for using Backpack for your Laravel projects. Happy coding!