Skip to main content

17.7.1 BUTTON field in vtenext

The button field, present in SETTINGS > MODULE MANAGER > MODULE NAME > LAYOUT EDITOR, allows us to insert a custom JavaScript function. This gives us the option of creating an automatic process/action on certain fields in the CRM.

To illustrate this, we will give a simple example.

By clicking on a CONTACT button, we want the CONTACT REQUEST checkbox field to go from NO to YES (the field to become flagged).

Here's how to proceed:

- Go to SETTINGS > MODULES MANAGER > ACCOUNTS > LAYOUT EDITOR and create the control box field, called CONTACT REQUEST. Create also the button type field called CONTACT.
- At this point, in the button type field, we will find two variables to enter, in addition to the name that will appear as a label:

  1. Click confirm_fieldname('Accounts') - the name of the module we are operating in will be between inverted commas
  2. Code:
var VTUtils = VTUtils || {
    saveField: function(module, crmid, fieldname, value, callback) {
        jQuery("#status").show();
        var data = "file=DetailViewAjax&module=" + module + "&action=" + module + "Ajax&record=" + crmid + "&recordid=" + crmid;
        data = data + "&fldName=" + fieldname + "&fieldValue=" + value + "&ajxaction=DETAILVIEW";
        
        jQuery.ajax({
            url: 'index.php',
            data: data,
            type: 'POST',
            success: function(response) {
                if (response.indexOf(":#:FAILURE") > -1) {
                    alert(alert_arr.ERROR_WHILE_EDITING);
                } else if (response.indexOf(":#:SUCCESS") > -1) {
                    if (typeof callback == 'function') callback();
                }
                jQuery("#status").hide();
            }
        });
    },
};

function confirm_fieldname(module){
    var url_string = window.location.href;
    var url = new URL(url_string);
    var record = url.searchParams.get("record");
    VTUtils.saveField(module, record, 'fieldname', '1', function() {
        location.reload();
    });
}

In the last part of the code, where 'fieldname' appears, we will replace it directly with the name of the field we want to modify. To find the name of that field, simply use the "inspect" function on the Chrome browser (right mouse button) or "scan item" on the Firefox browser (right mouse button).
Replace also confirm_fieldname with the current fieldname even in the code and in the on click function.

Moving on, lastly, to the Accounts module, we will find the newly created button in the registry details. Pressing it, we'll see the CONTACT REQUEST flag field change from no to yes after a few moments.