Wednesday, November 3, 2010

Enable/Disable Salesforce(visualforce page) tabPanel tabs through Java Script.

Visualforce page tab panel tabs enable/disable can easily controlled by client side java script.
I came through a requirement to allowing user to go back by clicking directly on tab and let change data and restart process from that tab.In this situation it require to disable all forward tabs. 
Following code , that can be change easily as per requirement.

/**
Method called on onclick event of tab and pass tab number.
It disable next tabs from the current tabs(clicked tab). In my case i have 4 tabs , code can be change accordingly.
@param e tab number
**/
function disabledNextTabs(e){
    if(e == '1'){ // use actual tab ID in all places.
        if(document.getElementById('page:tab_step2_shifted') != null){ // use actual tab ID
            document.getElementById('page:tab_step2_shifted').onclick=''; // use actual tab ID
        }
        if(document.getElementById('page:tab_step2_lbl') != null){ // use actual tab ID
            document.getElementById('page:tab_step2_lbl').className ='dr-tbpnl-tb rich-tab-header dr-tbpnl-tb-dsbl rich-tab-disabled';
            document.getElementById('page:tab_step2_lbl').onmouseover='';
            document.getElementById('page:tab_step2_lbl').onmouseout='';
        }
        if(document.getElementById('page:tab_step2_cell') != null){
            document.getElementById('page:tab_step2_cell').className ='dr-tbpnl-tbcell-dsbld rich-tabhdr-cell-disabled';
        }
        document.getElementById('page:tab_step3_shifted').onclick='';
        document.getElementById('page:tab_step3_cell').className ='dr-tbpnl-tbcell-dsbld rich-tabhdr-cell-disabled';
        document.getElementById('page:tab_step3_lbl').onmouseover='';
        document.getElementById('page:tab_step3_lbl').onmouseout='';
        document.getElementById('page:tab_step3_lbl').className ='dr-tbpnl-tb rich-tab-header dr-tbpnl-tb-dsbl rich-tab-disabled';
       
        document.getElementById('page:tab_step4_shifted').onclick='';              
        document.getElementById('page:tab_step4_lbl').className ='dr-tbpnl-tb rich-tab-header dr-tbpnl-tb-dsbl rich-tab-disabled';
        document.getElementById('page:tab_step4_lbl').onmouseover='';
        document.getElementById('page:tab_step4_lbl').onmouseout='';
        document.getElementById('page:tab_step4_cell').className ='dr-tbpnl-tbcell-dsbld rich-tabhdr-cell-disabled';
    }
    else if(e == '2'){
        document.getElementById('page:tab_step3_shifted').onclick='';
        document.getElementById('page:tab_step3_cell').className ='dr-tbpnl-tbcell-dsbld rich-tabhdr-cell-disabled';
        document.getElementById('page:tab_step3_lbl').onmouseover='';
        document.getElementById('page:tab_step3_lbl').onmouseout='';
        document.getElementById('page:tab_step3_lbl').className ='dr-tbpnl-tb rich-tab-header dr-tbpnl-tb-dsbl rich-tab-disabled';
       
        document.getElementById('page:tab_step4_shifted').onclick='';              
        document.getElementById('page:tab_step4_lbl').className ='dr-tbpnl-tb rich-tab-header dr-tbpnl-tb-dsbl rich-tab-disabled';
        document.getElementById('page:tab_step4_lbl').onmouseover='';
        document.getElementById('page:tab_step4_lbl').onmouseout='';
        document.getElementById('page:tab_step4_cell').className ='dr-tbpnl-tbcell-dsbld rich-tabhdr-cell-disabled';
    }else if(e == '3'){
        document.getElementById('page:tab_step4_shifted').onclick='';              
        document.getElementById('page:tab_step4_lbl').className ='dr-tbpnl-tb rich-tab-header dr-tbpnl-tb-dsbl rich-tab-disabled';
        document.getElementById('page:tab_step4_lbl').onmouseover='';
        document.getElementById('page:tab_step4_lbl').onmouseout='';
        document.getElementById('page:tab_step4_cell').className ='dr-tbpnl-tbcell-dsbld rich-tabhdr-cell-disabled';

    }
}

No comments:

Post a Comment

Getting Started with Salesforce DX

Salesforce DX is a great way to let multiple peoples work together and also make deployment much easier. Salesforce DX make release cycle m...