JS Highlight selected sheet

1.1 Problem

When we have a report of multiple sheets, the selected sheet label is not obvious.

1.2 Solution

We can highlight selected sheet by adding a template event.

Note: This does not support mobile devices.

2.1 Sheet displayed at the bottom

Add a data entry template loading end event with the following JS:

$('.fr-sheetbutton-container-active .fr-sheetbutton-middlepart').css('color', 'red');  //Change the color of the selected sheet to be red
$('.fr-sheetbutton-container').bind('click', function() {  
    $('.fr-sheetbutton-container-active .fr-sheetbutton-middlepart').css('color', 'red');  //Get sheet switching event
    $('.fr-sheetbutton-container:not(.fr-sheetbutton-container-active) .fr-sheetbutton-middlepart').css('color', 'black'); //Keep other text black
});

2.2 Sheet displayed at the top

$('.fr-sheetbutton-container-active .fr-sheetbutton-middlepart-top').css('color', 'red');  
$('.fr-sheetbutton-container').bind('click', function() {  
    $('.fr-sheetbutton-container-active .fr-sheetbutton-middlepart-top').css('color', 'red');  
    $('.fr-sheetbutton-container:not(.fr-sheetbutton-container-active) .fr-sheetbutton-middlepart-top').css('color', 'black');  
});

Save and data entry preview to see the effect:

js-MultiSheet.cpt