Conditionally Display Answer Field and Add Time Validation

[avinashtelsa]

protected function setupCreateOperation()
{
Widget::add()->type('script')->content('https://cdn.quilljs.com/1.3.6/quill.js');
Widget::add()->type('style')->content('https://cdn.quilljs.com/1.3.6/quill.snow.css');
CRUD::setValidation(FlashcardsRequest::class);
//CRUD::setFromDb(); // set fields from db columns.
CRUD::field('course_id')
->type('select2')
->entity('course');
// for 1-n relationships (ex: category)
CRUD::field('lesson_category_id')
->type('select2_from_ajax')
->label('lesson Category')
->entity('lessonCategory')
->attribute('name')
->placeholder('Select Lesson Category')
->dependencies(['course'])
->minimum_input_length(0)
->data_source(url('api/lesson-categories-by-course-id'))
->include_all_form_fields(true);

CRUD::field('lesson_id')
    ->type('select2_from_ajax')
    ->label('Lesson')
    ->entity('lesson')
    ->attribute('internal_title')
    ->placeholder('Select Lesson')
    ->dependencies(['lessonCategory'])
    ->minimum_input_length(0)
    ->data_source(url('api/lessons-by-lesson-category-id'))
    ->include_all_form_fields(true);


CRUD::field('question')
    ->type('textarea')
    ->label('Question');

CRUD::field('answer')
    ->type('quill')
    ->label('Answer');

CRUD::field('hint')
    ->type('textarea')
    ->label('Hint');

$isCreate = $this->crud->getCurrentOperation() === 'create';

}

I want to display a field conditionally. I want to show the answer field as editable, but I want the answer field to be read-only.

I have written the conditional logic like this for the question field, and it works. But when I try the same for the answer field, it doesn't work.

    if($isCreate){
        CRUD::field('question')
            ->type('textarea')
            ->label('Question');
    }else{
        CRUD::field('question')
            ->type('textarea')
            ->label('Question')
            ->attributes([
                'readonly' => 'readonly',
                'disabled' => 'disabled',
            ]);
    }

[backpack-ai-bot[bot]]

Based on the knowledge sources, I can help you with making fields read-only in Backpack.

The issue you're experiencing with the answer field not becoming read-only is likely related to the field type you're using. Different field types in Backpack handle the readonly and disabled attributes differently.

For the quill field type (which you're using for the answer field), the standard HTML attributes like readonly and disabled might not work as expected because Quill is a JavaScript-based rich text editor that doesn't automatically respect these attributes.

Here are some approaches you can try:

1. Using attributes for basic field types

For basic field types like text and textarea, you can use the attributes option as you've already done:

CRUD::field('question')
    ->type('textarea')
    ->label('Question')
    ->attributes([
        'readonly' => 'readonly',
        'disabled' => 'disabled',
    ]);

2. For select2 and other complex fields

For more complex fields like select2 or JavaScript-based editors like quill, you might need a different approach. As mentioned in the community forum:

"...with readonly the user can still navigate with the keyboard unless we implement keyboard blockers too. Some fields couldn't be 'readonly' and we needed to disable them anyways to simulate readonly."
Community Forum Discussion

3. Using the CRUD JS API

For your quill field, you might need to use JavaScript to make it read-only. You can add a script using the Widget class:

// Add this after your field definitions
Widget::add()->type('script')->content('
    document.addEventListener("DOMContentLoaded", function() {
        // Make the Quill editor read-only after it initializes
        setTimeout(function() {
            if (window.Quill) {
                var quillEditor = document.querySelector(".quill-editor");
                if (quillEditor && quillEditor.querySelector(".ql-editor")) {
                    quillEditor.querySelector(".ql-editor").setAttribute("contenteditable", "false");
                    // Hide toolbar
                    var toolbar = quillEditor.querySelector(".ql-toolbar");
                    if (toolbar) {
                        toolbar.style.display = "none";
                    }
                }
            }
        }, 1000); // Give Quill time to initialize
    });
');

4. Create a custom field

Another approach is to create a custom field specifically for read-only purposes:

php artisan backpack:field quill_readonly --from=quill

Then modify the generated field to implement the read-only behavior.

Important note about validation

When using disabled attributes, remember that disabled fields are not included in form submissions. If you need the value to be submitted but not editable, you should:

1. Use readonly instead of disabled where possible
2. For fields that don't support readonly properly, you might need to add a hidden input with the same value

// Add a hidden field with the same value
CRUD::field('answer_hidden')
    ->type('hidden')
    ->name('answer'); // Use the same name as your original field

This approach ensures the value is submitted even if the visible field is disabled.

For your specific case with the answer field, I recommend trying the JavaScript approach first, as it's the most direct way to make a Quill editor read-only.

ℹ️ Please note our AI Bot does not reply to follow-ups, this will be the only AI answer in this thread. If the AI helped you find the answer, please mark it as answered or write details below so it can learn. Then close the conversation. If not, please give more information for when a human reads this. ℹ️

Relevant sources:

Github Issue (closed): [Feature Proposal] Conditional fields (aka. hide/show fields depending on other fields, aka. toggle field visibility)
Issue with Displaying and Saving Related Fields in CRUD Edit Screen
Github Issue (closed): When input validation occurs, can we have the option to use Laravels validated() ?
Github Issue (closed): [Proposal/Suggestion/Enhancement] addField method 'view/update/create/all' (readonly and/or disabled fields)
Create Operation|Create Operation
Github Issue (closed): [Bug] Readonly attibute not working for relationship (select2)
conditional visibility of two fields
How to make a select2 readonly?

[karandatwani92]

Hey @avinashtelsa

It seems that you want to keep the field enabled on the create operation and make it read-only on the edit operation. Here is how you can do it:

protected function setupCreateOperation() {
        CRUD::setValidation(CategoryRequest::class);
        //    .... Your Other fields....
        CRUD::field('question');
        CRUD::field('answer');
}
    
protected function setupUpdateOperation(){
        $this->setupCreateOperation(); // use already defined fields
        // redefine fields with new requirements
        CRUD::field('question')
            ->attributes([
                'readonly' => 'readonly',
                'disabled' => 'disabled',
            ]);
         CRUD::field('question')
            ->attributes([
                'readonly' => 'readonly',
                'disabled' => 'disabled',
            ]);
}