App studioのダッシュボード編集でのアクションと要素の追加でアコーディオン機能を追加してほしい

o_chan · 10/16

ダッシュボード内のスクロール減少・ビジュアライズのためにアコーディオン機能を用いて、App studio内のダッシュボードをより見やすくしたい。

＜具体例＞
フィルターを1まとめにし、選択完了後スクロール無しで下部のグラフを閲覧するなど

ArborRose · 10/17

Domoダッシュボードをより使いやすくし、スクロールを減らすために、ダッシュボードの上部にテキストボックスやHTMLカードを使用してフィルターをまとめることができます。これにより、アコーディオンのようにセクションを展開・折りたたみできるようになります。また、すべてのグラフに適用されるページレベルのフィルターを使用すれば、個別のフィルターをスクロールする必要がなくなります。さらに、グラフをコンパクトなグリッドレイアウトに配置し、インタラクティブフィルターを使用することで、ユーザーがスクロールせずにグラフを閲覧できるようになります。HTMLやCSSの知識があれば、本物のアコーディオン機能を実現するためのカスタムコードを埋め込むことも可能です。

<!DOCTYPE html>

<html>

<head>

  <style>

    .accordion {

      background-color: #f1f1f1;

      color: #444;

      cursor: pointer;

      padding: 10px;

      width: 100%;

      border: none;

      text-align: left;

      outline: none;

      font-size: 18px;

      transition: 0.4s;

    }


    .active, .accordion:hover {

      background-color: #ccc;

    }


    .accordion-content {

      padding: 0 15px;

      display: none;

      background-color: white;

      overflow: hidden;

    }

  </style>

</head>

<body>


<h2>Accordion Example for Filters</h2>


<button class="accordion">Filters</button>

<div class="accordion-content">

  <p>Filter 1: [Your filter goes here]</p>

  <p>Filter 2: [Your filter goes here]</p>

  <p>Filter 3: [Your filter goes here]</p>

</div>


<script>

  var acc = document.getElementsByClassName("accordion");

  for (var i = 0; i < acc.length; i++) {

    acc[i].onclick = function() {

      this.classList.toggle("active");

      var content = this.nextElementSibling;

      if (content.style.display === "block") {

        content.style.display = "none";

      } else {

        content.style.display = "block";

      }

    };

  }

</script>


</body>

</html>

App studioのダッシュボード編集でのアクションと要素の追加でアコーディオン機能を追加してほしい

答え

カテゴリ