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

hamza_123
hamza_123 Contributor
in Charting

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

Best Answer

  • jaeW_at_Onyx
    jaeW_at_Onyx Coach
    Answer ✓

    @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, '*');
      }
    };
    Jae Wilson
    Check out my 🎥 Domo Training YouTube Channel 👨‍💻

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

Answers

  • jaeW_at_Onyx
    jaeW_at_Onyx Coach
    Answer ✓

    @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, '*');
      }
    };
    Jae Wilson
    Check out my 🎥 Domo Training YouTube Channel 👨‍💻

    **Say "Thanks" by clicking the ❤️ in the post that helped you.
    **Please mark the post that solves your problem by clicking on "Accept as Solution"
This discussion has been closed.

Categories