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

Reply
Highlighted
Green Belt

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

(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?


Accepted Solutions
Highlighted
Major Red Belt

@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 (columnoperatorvaluesdataType) {
  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'*');
  }
};

Jae Wilson
Check out my Domo Training YouTube Channel

**Say "Thanks" by clicking the heart in the post that helped you.
**Please mark the post that solves your problem by clicking on "Accept as Solution"

View solution in original post


All Replies
Highlighted
Major Red Belt

@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 (columnoperatorvaluesdataType) {
  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'*');
  }
};

Jae Wilson
Check out my Domo Training YouTube Channel

**Say "Thanks" by clicking the heart in the post that helped you.
**Please mark the post that solves your problem by clicking on "Accept as Solution"

View solution in original post

Announcements
Stand out in the Dojo: Choose your own recognizable username and add a unique profile photo in your profile settings.