Change button color after click

[Ryan S]

https://docs.servicenow.com/bundle/orlando-performance-analytics-and-reporting/page/use/dashboards/r...

Following this example, how can I get the button color to change when it is selected? So when user clicks "All tasks" that button should have a blue background with white text to show it was selected. When the user clicks "Only my tasks" that button should have a blue background with white text and the 'All tasks' button should revert to default (gray background/back text).

[Rishabh Jha · Accepted solution]

Hi @Ryan S ,

You can achieve it using style tags on your dynamic content filter, and then using it on the input button's class attribute.

Please refer to the code below. It should change the button colors when clicked. You can modify the colors as per your need, by modifying the background-color properties on the style tag.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<style>
	.filter_btn{
	  background-color: #e7e7e7; 
	  color: black;
	}

	.filter_btn:focus{
		background-color: dodgerblue; 
	    color: white;
	}
</style>
<script>
     var my_dashboardMessageHandler = new DashboardMessageHandler("my_unique_id");
    
    function publishFilter () {
	  	var filter_message = {};
        filter_message.id = "my_unique_id";
        filter_message.table = "task";
    
    <!--     Add your own filter query logic here -->
        filter_message.filter = "assigned_toDYNAMIC90d1921e5f510100a9ad2572f2b477fe";
        SNC.canvas.interactiveFilters.setDefaultValue({
                id: filter_message.id,
                filters: [filter_message]
            }, false);
        my_dashboardMessageHandler.publishFilter(filter_message.table, filter_message.filter);
    }
    
    function clearFilter() {
	    var filter_message = {};
        filter_message.id = "my_unique_id";
        filter_message.table = "task";
        filter_message.filter = "";
        SNC.canvas.interactiveFilters.setDefaultValue({
                id: filter_message.id,
                filters: [filter_message]
            }, false);
        my_dashboardMessageHandler.removeFilter();
    }
 </script>   
 
Example of a filter that generates a static filter on 'task' table reports, or removes it <br/>
    <input id="allTasks" class="filter_btn" type="button" value="All tasks" onclick="clearFilter();" />
    <input id="onlyMine" class="filter_btn" type="button" value="Only mine" onclick="publishFilter();" />
    
</j:jelly>

Please mark the answer as correct/helpful if it has helped you in resolving your issue.

Thanks & Regards,

Rishabh Jha

Aavenir (https://www.aavenir.com/)

[Ryan S]

Thanks @Rishabh Jha that's exactly what I needed!