New object type : Checkbox

[fat115]

Hi,

I'd many boolean field in my forms and subforms and then the True/false (Yes/No) dropdown method ( as here: http://forums.nubuilder.cloud/viewtopic.php?f=6&t=7889 ) wasn't very clear. And I'm lazy so why using two clicks if I can use one ?

So I tried to add a new object type called checkbox to nuBuilderPro. I'm not a developer : use the following at your own risk !

Here are the modifications I've made to different files and it seems to work as I want.
The zip archive attached contains all the patches and other files needed.

First, I added a nuGetObjectCheckbox function in nuapi.php based on other nuGetObject functions :

Code: Select all

function nuGetObjectCheckbox($recordArray, $o, $recordID, $hashData) {

    $nuObject = nuBaseObject($o, $recordID, $hashData);

    if ($recordID == '-1' or nuUseDefault($o)) {
        $nuObject->value = nuGetDefaultValue($o->sob_all_default_value_sql, $hashData);
    } else {
        if($recordArray != "" and array_key_exists($o->sob_all_name, $recordArray)) {
            $nuObject->value = $recordArray[$o->sob_all_name];
        }
    } 

In nuGetObjectsForOneRecord function, I added a call for my new function between dropdown and textarea ones :

Code: Select all

        if ($o->sob_all_type == 'checkbox') {
            $OBJ[] = nuGetObjectCheckbox($recordArray, $o, $recordID, $hashData);
        } 

In nucommon.js, add a push for the new type (function nuSetObjectTypeProperties) :

Code: Select all

    a.push('dropdown');
    a.push('checkbox');
    a.push('html'); 

In nueditform.js, add a nuBuildCheckBox function in nuRecordObjects :

Code: Select all

    this.nuBuildCheckBox = function(o,i,p){

        var e          = document.createElement('input');       //-- create a new checkbox object
        e.setAttribute('type', 'checkbox');

        this.nuObjectWrapper(o,i,p);
        this.nuSetAttributes(e,o,i);

        $('#'+'td_right_'+e.id).append(e);
        nuObjectSize(o,e,i,false);
        $('#' + e.id).css( 'text-align', nuFormatAlign(o[i].align));
        if ( o[i].read_only == '1' ) {
            $('#' + e.id).prop("disabled", true);
        }

    } 

No modifications needed in the nuObjectWrapper function but some in the nuSetAttributes :
checkbox need a value, so we add the new type.

Code: Select all

        if($.inArray(o[i].type , ['text','display','button','checkbox']) != -1){
            if(o[i].value==null){
                o[i].value = '';
            }
            e.setAttribute('value', o[i].value);
        } 

we need specific attributes for a checkbox, next part will check or not the box according to the field's value and add an onclick event to toggle the value between 0 and 1.

Code: Select all

        if(o[i].type == 'checkbox'){
            var currentOnClick = e.getAttribute('onclick');
            e.setAttribute('onclick',  currentOnClick+';nuToggleCB(this)');
            switch (o[i].value){
                case "0":
                    e.checked = false;
                    break;
                case "1":
                    e.checked = true;
                    break;
                default:
                    e.indeterminate = true;
            }
        } 

we also need attributes defined for editable fields so we add checkbox type in the list :

Code: Select all

        if($.inArray(o[i].type , ['text','textarea','dropdown','checkbox','listbox','lookup']) != -1) 

The function nuToggleCB (see above onclick event) is added at the end of the file :

Code: Select all

function nuToggleCB(t){
    
    if($('#'+t.id).prop('checked')==true){
        $('#'+t.id).attr('value', "1");
    }else{
        $('#'+t.id).attr('value', "0");
    }
} 

In the function nuDisplayEditForm, we add the call to nubuildCheckBox :

Code: Select all

             if(formObjects[i].type == 'dropdown'){      form.nuBuildDropdown     (formObjects,i,parent);}
            if(formObjects[i].type == 'checkbox'){      form.nuBuildCheckBox     (formObjects,i,parent);}
             if(formObjects[i].type == 'display'){       form.nuBuildDisplay      (formObjects,i,parent);} 

and for a "correct" display in a grid subform, change the default left alignment to center :

Code: Select all

                $('#' + e.id).css({
                    'top'          : form.top+'px',
                    'width'        : (formWidth-40)+'px',
                    'left'         : '0px',
                    'height'       : formHeight+'px',
                    'position'     : 'absolute',
                    'border-style' : 'none',
                    'text-align'   : 'center' 

Also for display, we need to prevent checkbox to get width from field property in nuObjectSize:

Code: Select all

    if(o[i].type != 'checkbox'){
    $('#' + e.id).css( 'width', o[i].width+'px')
    }
    if(!xAndY){return;}
    $('#' + e.id).css( 'height', o[i].height+'px') 

To display 0 and 1 values as checkboxes in the Browse Form, we add a checkbox format in function nuTextFormats in nucommon.php :

Code: Select all

//-----checkbox format

    $format[32]->type        = 'checkbox';
    $format[32]->format      = 'cb';
    $format[32]->decimal     = '';
    $format[32]->separator   = '';
    $format[32]->sample      = 'checkbox';
    $format[32]->phpdate     = '';
    $format[32]->sql         = 'CONCAT(\'<input type="checkbox" \',IF(??,\'checked \',\'\'),\'disabled>\')'; 

The patch provided also add variable declaration to prevent PHP warning as proposed here

Finally, there are 3 changes to make in the SQL base :

• add new checkbox type in the nuBuilder Objects dropdown type
  add new format in the nuBuilder Form Browse tab
  add a css color for .nu_checkbox in System Setup > Header

For the first and the second, you'll find a sql file in the archive (2 UPDATE statements) and for the third, you have to edit manually System Setup > Header to add a new style. For example, I've had a background color of #FF6633 for .nu_checkbox between .nu_dropdown and .nu_html ones :

Code: Select all

.nu_dropdown                 {background-color : #7bce98}
.nu_checkbox                 {background-color : #FF6633}
.nu_html                     {background-color : #c497a6}

Result :
Browse Form before

Browse Form before

BrowseForm_wocb.png (8.31 KiB) Viewed 3596 times

Browse Form with Checkboxes

Browse Form with Checkboxes

BrowseForm_wcb.png (1.52 KiB) Viewed 3596 times

Subform before

Subform before

nuBuilder_Grid_SubForm_wocb.png (5.67 KiB) Viewed 3596 times

Subform with Checkboxes

Subform with Checkboxes

nuBuilder_Grid_SubForm.png (4.76 KiB) Viewed 3596 times

Edit Fom with Checkboxes

Edit Fom with Checkboxes

Editform_wcb.png (2.4 KiB) Viewed 3596 times

Choose checkbox type and format :

Checkbox type on nuBuilder Objects Browse Form

nubuilderObjects_BrowseForm_cb.png (6.93 KiB) Viewed 3596 times

Checkbox type on nuBuilder Objects Edit Form

nubuilderObjects_EditForm_cb.png (13.88 KiB) Viewed 3596 times

Checkbox format on nuBuilder Form Browse Tab

nuFuilderForm_BrowseTab.png (17.68 KiB) Viewed 3596 times

It may be improved (style for disabled checkboxes for example) and I don't know if it's interesting for others than me

Once again, use with caution. not sure it doesn't break something in nuBuilder !!!

[admin]

fat115,

This looks good,

I will add most of your your changes to nuBuilderPro.

2 questions though, why do you want to change the dropdown values from
0|No|1|Yes
to
0|No|1|Yes|2|N/A

and why add a 32nd array to nuFormat?

Steven

[fat115]

2 questions though, why do you want to change the dropdown values from
0|No|1|Yes
to
0|No|1|Yes|2|N/A

There is no particular reason but a checkbox can have 3 states : checked, unchecked and undefined/indeterminate.
A user may have set a boolean value (TINY INT in mysql) without a default value, the undefined state reflects this.

and why add a 32nd array to nuFormat?

That's just the simplest way I've found to display properly checkboxes on forms and subforms instead of 0/1 value (see Browse form with and without checkboxes in my previous message).
You may have a better idea to achieve this.

[admin]

Thanks anyway