Oracle APEX pretty checkbox item plugin

Following on from the animated on off button this is now an item plugin.  Pretty up your checkboxes.....

You have 16 checkbox types to choose from where you can control the size and colour of the checkbox in item settings;

demo

Create a page item with type Pretty check box

Choose type of checkbox

Set checkbox attributes.

How it works

The item plug in code uses this code to plug the rendered checkbox into APEX.

///////////////////////////////////////////////////////////////////////////////////////////

// glasgow_simple_checkbox

//

// Provides a plug-in specific implementation for a checkbox item. The item on the page

// should be a checkbox, i.e. <input type="checkbox" and name should be your item name

// i.e. name='P12_NAME'

//

// Params

//

// itemName - the item name, i.e. name='P12_NAME'

// checkboxValues - the check and unchecked values, i.e. Y/N

///////////////////////////////////////////////////////////////////////////////////////////

function glasgow_simple_checkbox(itemName, checkboxValues) {

    // get the checkbox using JQuery

    var checkBox = apex.jQuery("#" + itemName);

    // when the checkbox changes (clicked) set the item value

    apex.jQuery("#" + itemName).change(setItemValue);

   

    // set the checkbox item value depending on whether its checked or not.

    function setItemValue() {

        // the checkbox has been clicked, set the value

        // depending on selection - checked or not checked

        checkBox.val((checkBox.is(":checked") === true)

          ? checkboxValues.checked : checkboxValues.unchecked);

    }

    // apex.item.create

    //

    // Provides a plug-in specific implementation for the item.

    // This is where we get APEX to set/get the item using the values on the page.

    //

    // Params

    //

    // itemName : Page item

    // functions needed to customize the Application Express item object behavior.

    apex.item.create(itemName, {

     

        setValue: function(f) {

            console.log('set value ' + checkBox.val());

            setItemValue()

        },

        getValue: function() {

            console.log('get value ' + checkBox.val());

            return checkBox.val()

        }

    });

   

};

We render the checkbox on the page using this code in the plugin which uses the user attributes choosen;

procedure renderPrettyCheckbox(p_css_file_name in varchar2,

                                p_outer_div_class_name in varchar2,

                                    p_icon_html in varchar2) is

    begin

         apex_css.add_file(

             p_name      => p_css_file_name,        

             p_directory => p_plugin.file_prefix,

             p_version   => null );

          sys.htp.prn (

            '<div style="font-size:'||l_font_size||'em" class="'||p_outer_div_class_name||'">'||

                '<input type="checkbox"  id="'||p_item.name||l_checkbox_postfix||'" '||  ' name="'||l_name||'" '||

                    'value="'||l_value||'" '||

                        case when l_value = l_checked_value then 'checked="checked" ' end||

                        case when p_is_readonly or p_is_printer_friendly then 'disabled="disabled" ' end||

                '/>' ||

                ' <div class="state '|| l_pretty_on_colour || '">

                '||p_icon_html||'

            <label></label>

        </div>' ||

            '</div>');

    end;

Each check-box type selected calls the above code, for pretty jelly checkbox we have this;

  renderPrettyCheckbox('pretty-checkbox',

                                'pretty p-icon p-round p-jelly',

                                    '<i class="icon fa fa-check"></i>');