Apply filter and navigate to tab using Javascript

  • 1
  • Question
  • Updated 6 years ago
  • Answered
I wanted to check with Team Skuidify how far into the realm of hack I'm going here.

We have a page that has a grid of tiles where each tile presents an infographic-style statistic beside an associated icon. Each number is sourced from an aggregate model. An example is a stat for Number of Tasks Completed This Month, or Number of New Prospects This Month. When the user clicks the tile, they're navigated to a tab that has a table relevant to the stat and a filter is applied to return just those records that support the stat. E.g. when they click Number of Tasks Completed This Month, they go to the Tasks tab, the Completed Tasks subtab, with the table filtered to show just tasks completed this month.

We have it working with a little bit of JQueryUI code that I think mimics what Skuid does when it navigates between tabs:

skuid.$("#filtercompletedtasks").click(function() {
//Get the model
var theModel = skuid.model.getModel('CompletedTasks');
var theCondition = theModel.getConditionByName('DueDate');
//Set the condition for the tile, which will also update the filter on the table
//Navigate to the Tasks tab, and the Completed Tasks subtab
skuid.$( "#sidenavtabs" ).tabs( "option", "active", 4 );
skuid.$( "#taskssub" ).tabs( "option", "active", 1 );

The question is: are we doing this in the best way, or are we stepping into a no man's land of unsupported hackery?
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,788 Points 5k badge 2x thumb
  • nervously waiting

Posted 6 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 55,228 Points 50k badge 2x thumb
As far as your Tab navigation mechanism, you're using the supported underlying jQuery UI API for activating ("navigating to") a Tab, so this is fine. And your use of the Conditions API is totally kosher.
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,788 Points 5k badge 2x thumb
Great! Good to know. Thanks Zach.