setActionButton to display Grocery CRUD edit modal for an alternative edit form

Grocery CRUD Enterprise
1

I’m new to Grocery Crud Enterprise. I’m looking for some help with setActionButton…

In my datagrid, I want to have two action buttons for editing items. The default one (pencil icon) and a custom action . The default button will display a Grocery CRUD edit modal for fields a and b. I want the custom action button to display a Grocery CRUD edit modal for fields c and d.

How would I do this?

With this test code, clicking the ‘Codes’ custom action button for an employee, displays the datagrid for all employees (as defined in the employee_code method). But that’s not what I want. I want to display the Grocery CRUD edit modal for the one employee (as defined in the employee_code method) instead.

public function employee () {

    $crud = $this->getGroceryCrudEnterprise();
    $crud->setTable(employees);
    $crud->setSubject('Employee');
    $crud->columns(['First_Name','Last_Name']);
    $crud->editFields(['First_Name','Last_Name']);

    $crud->setActionButton('Codes', 'fa fa-user-plus', function ($row) {
        return '/employee_code#/edit/' . $row->ID;
    }, false);

    etc...

}

public function employee_code () {

    $crud = $this->getGroceryCrudEnterprise();
    $crud->setTable(employees);
    $crud->setSubject('Employee');
    $crud->columns(['First_Name','Last_Name']);
    $crud->editFields(['Employee_Number','Tax_File_Number']);

etc...

}

(Why do I want to to do this?

99 times out of 100, the user will edit the basic info on the default edit form. But very occasionally, they will want to edit some complex information. I don’t want this complex information cluttering up the default edit form, so I want to put it on a separate edit form.

This functionality would also be useful where different users have different authority levels. E.g. I’d only set the custom edit button for users with a specific level of authority.)

2

First of all, you need to make columns Employee_Number and Tax_File_Number available, but invisible. This is how you will get their values in the $row variable for the setActionButton method, but not displaying them in the datagrid.

$crud->columns(['First_Name','Last_Name','Employee_Number','Tax_File_Number']);
$crud->fieldTypeColumn('Employee_Number', 'invisible');
$crud->fieldTypeColumn('Tax_File_Number', 'invisible');

Then you define the action button.

$crud->setActionButton('Codes', 'fa fa-user-plus', function ($row) {
        return 'javascript:editThe2Fields( ' . $row->ID . ', "' . $row->Employee_Number . '", "' . $row->Tax_File_Number . '" )';
    }, false);

Then you create a hidden div with a form inside, to be able to edit the fields.

<div id="additionalEdit"  style="display:none">
  <form id="additionalForm">
    <label>....</label><input type="text" id="Employee_Number" value="" />
    <label>....</label><input type="text" id="Tax_File_Number" value="" />
  </form>
</div>

Then you create the JS function (actually I use jQuery for this):

function editThe2Fields( id, employee_numb, tax_file ) {
  // setting the current values of the two fields
  $("#additionalForm #Employee_Number").val( employee_numb );
  $("#additionalForm #Tax_File_Number").val( tax_file );

  // displaying the dialog form in a modal
  form = $( "#additionalEdit" ).dialog({
    width: xxxxx,
    modal: true,
    title: "Edit the additional fields",
    buttons: {
      Save: function() { 
        // some validations, if necessary
        if ( employee_numb == "" ) {
          alert("Employee number must be specified");
          return;
        }
        $.ajax({
          url: "url to method used for saving in the db",
          method: "post",
          data: $("#additionalForm").serialize()
        }).done( function( response ) {
           form.dialog("close");
           // other things that happen after saving
        });
      }
    }
  });
}

This is how I do it when I need some special action buttons. Hope that helps.

3

mulțumesc!

I won’t be able to try this until tomorrow, but I just wanted to say thank you so much for sharing your solution with me :slight_smile:

Is there a way to display the Grocery CRUD modal for the edit, rather than creating my own?

4

AFAIK it is impossible to call the add, edit or read forms generated by GC. I have tried to find a way, I even looked in the source code of GC, but couldn’t find a solution for that. On the other hand, jQuery dialogs are good enough for my purposes, so I didn’t dug too much. Cheers.

5

OK, thank you. You’ve probably saved me a lot of time working out how to do it.

6

@johnny Is it possible for the urlCallback of setActionButton to display a GC edit modal?

7

Hello @daveoreardon and welcome to our forums :hugs:

Yes, you can, basically the edit, clone, read and add modals are triggered through the url, so a simple:

window.location = '#edit/208';

will do the work (without refreshing the page as this is just a JavaScript action). Also check the URL that you would like to have from the URL syntax after you click on a GC button.

I hope it helped.

Regards
Johnny

8

Thanks @johnny. This sounds really promising! I have almost zero knowledge of JS, so would you mind explaining your solution in a bit more detail for me?

At the moment, I have this custom action definition for the GC datagrid defined in method “employee”:

$crud->setActionButton('Assignments', 'fa fa-user-plus', function ($row) {
            return '/employee_code#/edit/' . $row->ID;}, false);

When I click the button on the employee datagrid, the URL is, for example:
https://portal.cio-pulse.com/employee_code#/edit/208

This results in the GC datagrid defined in the “employee_code” method being displayed. I’d like the edit modal from the GC “employee_code” datagrid being displayed instead.

What does the setActionButton return value have to be to apply your “window.location = ‘#edit/208’;” solution?

9

Sorry @johnny, but what would the setActionButton return value be for the GC edit modal whose URL is https://portal.cio-pulse.com/employee_code#/edit/208 ? (The GC edit form defined in the employee_code method has different fields than the GC edit form defined in the method with the setActionButton).

10

Hi there! I’m afraid that Dave is looking for displaying the edit form with different content than the one displayed when you click the Edit button. He wants to have 2 separate edit forms with different fields (take a look at the initial question, is explained there). Your solution works, but it will always bring the same fields, namely field a and field b.

Cheers.

11

You’ve explained my problem better than me Sorin :). As you’ve said, all I want is to have two edit buttons for the same datagrid. Each displaying different fields.

12

Hello @daveoreardon ok now it makes sense. Unfortunately this is not available as a feature though :pensive:.

The only workaround that I can think of, is to have a second CRUD that opens for the new edit fields that you would like to have. The only downside is that this will redirect you into another page. For example something like this:

$crud->setActionButton('Assignments', 'fa fa-user-plus', function ($row) {
            return '/assignements#/edit/' . $row->ID;}, true);

Maybe it is also better to open it in a new tab (last segment = true) so the user will not be that confused.

Regards
Johnny

13

Thanks @johnny. I have created a new CRUD for the alternative edit form. How do I get the custom action button to open the alternative GC edit form in a modal? The example you’ve given only works when modals are turned off in the GC config.