Add checkbox item to IR and Maintaining checkboxes state

In this post, I have an Interactive Report which I have added a checkbox for each row. I tried to keep the state of each checkbox (checked or unchecked) even if I transfer between pages of the Interactive Report or reload the page. So I have used the "Local Storage" of the Browser as a place to maintain and retrieve the checked rows.

 

1- Create an Interactive Report region with below code and set Static ID to “MyReport”:

select EMPNO,

            ENAME,

            JOB,

            DEPTNO,

            apex_item.checkbox2(

               p_idx => 1,

               p_value => empno,

               p_attributes => 'class="selected-chkbox"'

         ) checkbox

  from EMP 

 * Set “Heading”  of  the “chekbox field” to <input type="checkbox" id="ChkSelectAll"> All

 

 

 

 

 

 

 

*Disable all of features in “Enable Users To” section of the “chekbox field”.

* Disable “Escape special characters” of  the “chekbox field”.

 

 

 

 

 

2- Add a button of type “Defined by Dynamic Action” and set Static ID to “BtnCounter” .

 This button is used to display the number of selected rows as well as uncheck them.

 

3- Add a button of type “Defined by Dynamic Action” and set Static ID to “BtnShowSelectedRows” .

 This button is used to display the selected rows.

 

4- Add below JavaScript in “Function and Global Variable Declaration” of page :

var myStorageName = "v_checked_list";
/**
 * return json object of the local storage value
 */
function getLocalStorageJson() {
    var strItems = localStorage.getItem(myStorageName);
    var jItems = [];
    if(strItems != null && strItems!="") {
        jItems = JSON.parse(strItems);
    }
    return jItems;
}

/**
 * set the local storage
 * @param {object} jItems json value to set
 */
function setLocalStorage(jItems) {
    localStorage.setItem(myStorageName, JSON.stringify(jItems));
}

/**
 * clear the local storage
  */
 function clearLocalStorage() {
     localStorage.setItem(myStorageName, '');
     $('.selected-chkbox,#ChkSelectAll').prop('checked', false);
     $('#BtnCounter').html('Selected Rows: 0');
 }


/**
 * add/remove row value from local storage
 * @param {object} $obj jquery checkbox object
 */
function setStorageByCheck($obj) {
    var jItems = getLocalStorageJson();
    
    var idof  = $obj.val();
    var found = jItems.some(el => parseInt(el.id) == parseInt(idof));
    if ($obj.is(':checked')) {
        if(!found) {
            jItems.push({id:idof});
        }
    }
    else {
        if(found) {
            jItems = jItems.filter(el => parseInt(el.id) != parseInt(idof));
        }
    }

    setLocalStorage(jItems);

    var lsCount = getLocalStorageJson().length;
    $('#BtnCounter').html('Selected Rows: ' + lsCount);
}

/**
 * clear all checked rows and local storage
  */
function clearAllCheckedRow() {
    if(getLocalStorageJson().length==0)
        return;
    apex.message.confirm('are you sure to uncheck all the selected rows?', function(ok) {
        if(ok) {
            clearLocalStorage();
        }
    });
}

/**
 * set check for rows, according to the local storage
  */
function applyCheckForRows() {
    var jItems = getLocalStorageJson();

    if(jItems.length > 0) {
        $.each(jItems, function(key,val) {
            $('.selected-chkbox[value="'+val.id+'"]').prop('checked',true);
        })
    }
    else {
        $('.selected-chkbox').prop('checked', false);
    }
}

/**
 * select all rows
  */
function selectAll() {
    var getItems = [];
    $('.selected-chkbox').each(function() {
        $(this).prop('checked',true);
        setStorageByCheck($(this));
    });
}

/**
 * unselect all rows
  */
function unSelectAll() {
    $('.selected-chkbox').each(function() {
        $(this).prop('checked',false);
        setStorageByCheck($(this));
    });
}

function showLocalStorageData() {
    var sret = [];
    var jItems = getLocalStorageJson();
    $.each(jItems, function(key,val) {
        sret.push(val.id);
    })
    alert(sret.toString().replace(/,/gi,', '));
}

* Then add below javascript code in “Execute when Page Loads” :

var removeOnLoad = false; //--> this flag can be set to `true` or `false`
if(removeOnLoad)
    clearLocalStorage();
else {
    applyCheckForRows();
    $('#BtnCounter').html('Selected Rows: ' + getLocalStorageJson().length);
}

$(document).on('change','#ChkSelectAll',function() {
    if($(this).is(':checked'))
        selectAll();
    else
        unSelectAll();
});

$(document).on('change','.selected-chkbox',function() {
    setStorageByCheck($(this));
});

$('#BtnCounter').click(function() {
    clearAllCheckedRow();
});

$('#BtnShowSelectedRows').click(function() {
    showLocalStorageData();
});


$("#MyReport").on("apexafterrefresh", function(e) {
    applyCheckForRows();
});

 

As you can see, there is a variable called "v_checked_lists" in the browser storage to hold the selected rows.

 

 Demo

I hope you enjoyed reading this blog post.