Welcome to the nuBuilder Forums!

Register and log in to access exclusive forums and content available only to registered users.

[Added] JS function nuAddActionCheckbox() (nuBuilder 4.9.1)

Information about updates, news, Code Library
admin
Site Admin
Posts: 2822
Joined: Mon Jun 15, 2009 2:23 am
Been thanked: 29 times

[Added] JS function nuAddActionCheckbox() (nuBuilder 4.9.1)

Unread post by admin »

A new function has been added: nuAddActionCheckbox() — a unified, visually integrated alternative to the basic checkbox+label combination.

nu_action_checkbox.png


This function allows you to easily add styled checkboxes to the nuActionHolder (or another specified location), consistent with nuAddActionButton(), supporting session/local/property storage and user interaction callbacks.

This is especially useful for filters, toggles, or persistent UI settings in forms and dashboards.

Key Features:
  • Consistent look and feel with nuAddActionButton() using FontAwesome icons.
  • Storage options: 'property' (default), 'session', or 'local' to remember checkbox state.
  • onChecked callback lets you define custom logic when the checkbox is toggled.
  • Can be placed after any existing element using insertAfterElement.
Syntax:
nuAddActionCheckbox(settings)

Settings object:

Code: Select all

{
    id: 'myCheckbox', // Optional unique ID
    text: 'Show Archived', // Label text next to the checkbox
    checked: true, // Initial state (true | false)
    storage: 'session', // 'property' | 'session' | 'local'
    insertAfterElement: 'someElementID', // Optional: insert after specific DOM element
    onChecked: function (checked) {
        // Your custom logic here
    }
}
Examples:

Add a checkbox to filter archived records, saved in session storage:

Code: Select all

nuAddActionCheckbox({
    id: 'showArchived',
    text: 'Show Archived',
    storage: 'session',
    checked: false,
    onChecked: function (checked) {
       // code here...
    }
});

Visual Difference:

Unlike traditional checkboxes created manually with <input type="checkbox"> and label tags, nuAddActionCheckbox() uses a styled label with <i> icons to match nuBuilder’s UI, ensuring visual harmony and clarity in the action area.
You do not have the required permissions to view the files attached to this post.
Post Reply