New object type : Checkbox

New object type : Checkbox

Unread postby fat115 » Sat May 17, 2014 7:47 pm

Hi,

I'd many boolean field in my forms and subforms and then the True/false (Yes/No) dropdown method ( as here: 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
BrowseForm_wocb.png
Browse Form before
BrowseForm_wocb.png (8.31 KiB) Viewed 2896 times


Browse Form with Checkboxes
BrowseForm_wcb.png
Browse Form with Checkboxes
BrowseForm_wcb.png (1.52 KiB) Viewed 2896 times


Subform before
nuBuilder_Grid_SubForm_wocb.png
Subform before
nuBuilder_Grid_SubForm_wocb.png (5.67 KiB) Viewed 2896 times


Subform with Checkboxes
nuBuilder_Grid_SubForm.png
Subform with Checkboxes
nuBuilder_Grid_SubForm.png (4.76 KiB) Viewed 2896 times


Edit Fom with Checkboxes
Editform_wcb.png
Edit Fom with Checkboxes
Editform_wcb.png (2.4 KiB) Viewed 2896 times


Choose checkbox type and format :
nubuilderObjects_BrowseForm_cb.png
Checkbox type on nuBuilder Objects Browse Form
nubuilderObjects_BrowseForm_cb.png (6.93 KiB) Viewed 2896 times

nubuilderObjects_EditForm_cb.png
Checkbox type on nuBuilder Objects Edit Form
nubuilderObjects_EditForm_cb.png (13.88 KiB) Viewed 2896 times

nuFuilderForm_BrowseTab.png
Checkbox format on nuBuilder Form Browse Tab
nuFuilderForm_BrowseTab.png (17.68 KiB) Viewed 2896 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 !!!
Attachments
checkbox_patches.zip
patch files for checkbox
(3.48 KiB) Downloaded 194 times
fat115
 
Posts: 11
Joined: Sun May 11, 2014 4:48 pm
Location: France

Re: New object type : Checkbox

Unread postby admin » Tue May 20, 2014 1:30 pm

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
admin
Site Admin
 
Posts: 3406
Joined: Mon Jun 15, 2009 9:53 am
nuBuilder Version: 4.5

Re: New object type : Checkbox

Unread postby fat115 » Thu May 29, 2014 3:06 pm

admin wrote: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.

admin wrote: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.
fat115
 
Posts: 11
Joined: Sun May 11, 2014 4:48 pm
Location: France

Re: New object type : Checkbox

Unread postby admin » Wed Jun 04, 2014 1:49 pm

Thanks anyway
admin
Site Admin
 
Posts: 3406
Joined: Mon Jun 15, 2009 9:53 am
nuBuilder Version: 4.5


Return to Custom Code

Who is online

Users browsing this forum: No registered users and 2 guests