Modify the default filter for the main project page by using Javascript in the annoucement banner
Platform Notice: Data Center Only - This article only applies to Atlassian products on the Data Center platform.
Note that this KB was created for the Data Center version of the product. Data Center KBs for non-Data-Center-specific features may also work for Server versions of the product, however they have not been tested. Support for Server* products ended on February 15th 2024. If you are running a Server product, you can visit the Atlassian Server end of support announcement to review your migration options.
*Except Fisheye and Crucible
Summary
The content on this page includes steps to customize or extend Atlassian software (adding/changing CSS rules, HTML, JavaScript, etc.). Per the Atlassian Support Offerings, support does not include customizations made to Atlassian products. Be aware that this material is provided for your information only and using it is done so at your risk.
If you have any questions about this or any customization, please ask the community at Atlassian Community or consider working with an Atlassian Solution Partner.
There's no inbuilt way to change the default filter when you open the main project's details when clicking in the top navigation bar > Projects > <your-project-name>, or other links resulting in these pages:
1
2
3
<JIRA-URL>/projects/<PKEY>/issues
<JIRA-URL>/browse/<PKEY>As Jira will load the default system filter, usually the "Open Issues" (filter=-5 or filter=allopenissues):
1
<JIRA-URL>/projects/<PKEY>/issues/<PKEY>-123?filter=allopenissuesThere are a few feature requests with similar objectives but none has been implemented yet:
JRASERVER-59482 - Allow using custom filters in Switch Filter
JRASERVER-70186 - Edit, set, change jql definition or hide the system filters
So I found a workaround to change these filters in the UI during the page load.
In the following example, I'll show how to change the default one "All Open issues" to "All issues".
Solution
Workaround
We'll add a Javascript in the Announcement banner to change Jira's UI behavior, check this page for more details on how to do it safely: How to customize Jira with JavaScript and CSS
This was tested with Jira 9.x up to 9.14.2, it might not work on older or newer versions but the concept might still work with some changes.
How this works:
The best way I could find to change the default filter's value was to change the values exactly after the first page-load on the projects, setting the unparsed data variables before Jira loads them into the UI:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script type="text/javascript">
try {
var dataKey = "com.atlassian.jira.jira-projects-issue-navigator:default-filter-priority";
if(WRM._unparsedData && WRM._unparsedData[dataKey]) {
var data = JSON.parse(WRM._unparsedData[dataKey]);
for(var i=0; i<data.length; i++) {
if(data[i] === "allopenissues") {
data[i] = "allissues";
}
}
WRM._unparsedData[dataKey] = JSON.stringify(data);
}
} catch(e) {
console.error("An error occurred while modifying WRM._unparsedData: ", e);
}
</script>
// When the script runs the first time, we need to refresh the changes to apply the 'order by created' clause
<script type="text/javascript">
window.onload = function() {
var issuesElement = document.querySelector('span#issues-subnavigation-title.subnavigator-title');
var orderElement = document.querySelector('a.order-options.aui-button.aui-style-default.jira-aui-dropdown2-trigger');
if (issuesElement && orderElement) {
if (issuesElement.textContent === 'All issues' && orderElement.querySelector('span').textContent === 'Order by Priority') {
location.reload();
}
}
}
</script>When working with the announcement banner, you may also need to remove it from the database if you encounter any problems in displaying the updated announcement banner; or pages in Jira.
It's also strongly recommended that you understand how these changes can break other Jira features and functionality, check more information on this page: How to customize Jira with JavaScript and CSS
Was this helpful?