I recently encountered and interesting use case that required a bit of customization to arrive at the desired functionality:
Use Case
I have an angular based html table built off of a Custom Portal query that generates a navigation link to other pages in the portal and uses values from the query to pass filters through the url to the visualizations on the next page. Here is an example of a url with filter parameters:
https://www.zuar-portal.com/p/finance-viz?LOCATION=North%20America
Problem
Once users arrive at the corresponding page with the filter values passed thru the url they then can use a standard html nav bar to navigate to other pages within the portal. When a navbar link is clicked, it continues passing the url filter through the url but these filters are no longer applicable so the user arrives at a page with no data being displayed in the visualization. Example of incorrect url with same filters passing through:
https://www.zuar-portal.com/p/home?LOCATION=North%20America
Solution
We need to prevent the url filters from passing to additional pages when navigating with the nav bar. To do this, create an a href nav bar item and include an onclick function to clear the filters while proceeding to the next page. Each navbar link should look like:
<a class="dropbtn" href="/p/home" onclick="return zPortal.dataSource.clearFilters()">Home</a>
Notice the standard a href to navigate home. Also notice the onclick event that references the portal api. It is calling a function used to clear filters zPortal.dataSource.clearFilters(). Make sure to include the return.