Use case - Add modal to get user input before create

[AlonMoshe]

Hi there,

I am trying to accomplish the following:

When creating a new entrance in a crud I need some fields in the form to be populated from data in the database. This data has to be queried, considering an input parameter that the user has to provide.

I would like to have something so that when the user clicks on "Add crud_name." on the main panel, something like a modal pops up, asks the user for the input parameter, queries the database, and proceeds to show the usual create form, but with the necessary fields populated.

Any ideas ?

Many thanks.

[jcastroa87]

Hello @AlonMoshe

Here i see 2 options, or you create a custom operation following our docs or change the approach and ask for user input in the create form using Javascript API.

Im using this in a project, i have hide fields, when the user choose a project from select2 i make an AJAX call to get data and show it on hide field.

crud.field("project_id")
    .onChange(function (field) {
        if (field.value != "") {
            crud.field('project_info').show(true);

            $.ajax({
                url: crud
                    .field("api_project")
                    .value.replace("{id}", field.value),
                type: "GET",
                success: function (project) {
                    crud.field("project_tax").input.value = project.tax;

                    crud.field("project_info_end_at").input.value = project.end_at;
                    crud.field("project_info_tax").input.value = project.tax;
                    crud.field("project_info_status").input.value = project.status;
                },
            });
        } else {
            crud.field('project_info').show(false);
        }
    })
    .change();

Let me know if thats work for you.

Cheers.

[AlonMoshe]

Hello @jcastroa87,

Many thanks for your response. I'll check it and get back to you.

Take care,

Alon.

[AlonMoshe]

Hi @jcastroa87 ,

Considering your suggestions, I decided to implement the Javascript API alternative. I am following this documentation from Backpack's website.

I will let you know how it goes.

Many thanks,

Alon.

[jcastroa87]

Hi @AlonMoshe i hope you solve this. Due not activity i will close the issue, but please feel free to re-open or create a new one if needed.

Cheers.

[AlonMoshe]

Hi @jcastroa87 , Sorry for not getting back earlier. I work on my projects mainly on the weekends. But, yes, I think what you propose is will work.

Thanks.

[AlonMoshe]

Hi @jcastroa87 ,

I am working on my project and I followed your suggestion. However, the field that I need to change is a date time, so I need to wait for the user to fish selecting the date and time.

The problem I am having with:

crud.field("project_id")
    .onChange(function (field) {................

Is that it executes for every change the user makes. Which is not the behaviour that I need. I need the Ajax call to be done after the user has finished entering the date and time

Since in the documention it is written that it is possible to use plain JavaScript and JQuery, I am trying the following:

1. In the setupCreateOperation I added :

Widget::add([
           'type' =>'script',
           'content'=> 'assets/js/admin/forms/myfile.js',
       ]);

3. In the JS file I have:

var formId=document.forms[0];
var startTimeElement=formId.querySelector('input[name="startTime"]');
     startTimeElement.addEventListener('blur',handleBlur);

function handleBlur(event){
 // Ajax call 
alert('This is a test')
}

Unfortunately, so far the "handleBlur" function doesn't even get called, I do not know why.

I will appreciate it if you have any suggestions/observations.

Once again, many thanks.

Alon.