Anyone know how the dropdown filter card was made in the Domo Covid-19 public dashboard?

hamza_123

(Picture attached)

 

We're trying to make this card in our dashboard, as the UI seems vert clean. I could not find this card type in analyzer. Anyone knows if we can use custom web development to make this card, and then embed it in our instance dasahboard, and if yes then any resource to look at?

jaeW_at_Onyx

@hamza_123  yeah you can use a custom app to do anything!

 

Ryan O and his team are the folks that build custom apps in Domo, but I can show you how I did a similar thing.

 

In a nutshell, the pieces you'll need:

 

Domo Dev Studio prereqs (ryuu etc.)

https://developer.domo.com/docs/dev-studio/dev-studio-overview

 

Then:

SQL API to query the list of values from the source dataset (the contents of the dropdown menu)

https://developer.domo.com/docs/dev-studio-references/data-api#SQL%20API

 

You'll use a component like

https://getbootstrap.com/docs/4.0/components/dropdowns/

to render the dropdown menu and feed the contents in.

 

then when users make a selection, OnUpdate, you'll call a function that passes a "filter" message from your iFrame (the custom app) to window.parent and filters the dataset.  

 

In the domoJS there's a method built-in, but you can obviously customize it if you're doing a multi-select.

https://developer.domo.com/docs/dev-studio-references/domo-js

 

domo.filterContainer = function (column, operator, values, dataType) {

  var userAgent = window.navigator.userAgent.toLowerCase(),

    safari = /safari/.test(userAgent),

    ios = /iphone|ipod|ipad/.test(userAgent);

  var message = JSON.stringify({

    event: 'filter',

    filter: {

      columnName: column,

      operator: operator,

      values: values,

      dataType: dataType,

    },

  });

  if (ios && !safari) {

    window.webkit.messageHandlers.domofilter.postMessage({

      column: column,

      operand: operator,

      values: values,

      dataType: dataType,

    });

  } else {

    window.parent.postMessage(message, '*');

  }

};