コンテンツにスキップ

    • 仲間に相談

    仲間に相談

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

    Member
    編集済： October 2024 で 仲間に相談

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

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

    答え

    • Coach

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

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4.   <style>
      5.     .accordion {
      6.       background-color: #f1f1f1;
      7.       color: #444;
      8.       cursor: pointer;
      9.       padding: 10px;
      10.       width: 100%;
      11.       border: none;
      12.       text-align: left;
      13.       outline: none;
      14.       font-size: 18px;
      15.       transition: 0.4s;
      16.     }

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

      20.     .accordion-content {
      21.       padding: 0 15px;
      22.       display: none;
      23.       background-color: white;
      24.       overflow: hidden;
      25.     }
      26.   </style>
      27. </head>
      28. <body>

      29. <h2>Accordion Example for Filters</h2>

      30. <button class="accordion">Filters</button>
      31. <div class="accordion-content">
      32.   <p>Filter 1: [Your filter goes here]</p>
      33.   <p>Filter 2: [Your filter goes here]</p>
      34.   <p>Filter 3: [Your filter goes here]</p>
      35. </div>

      36. <script>
      37.   var acc = document.getElementsByClassName("accordion");
      38.   for (var i = 0; i < acc.length; i++) {
      39.     acc[i].onclick = function() {
      40.       this.classList.toggle("active");
      41.       var content = this.nextElementSibling;
      42.       if (content.style.display === "block") {
      43.         content.style.display = "none";
      44.       } else {
      45.         content.style.display = "block";
      46.       }
      47.     };
      48.   }
      49. </script>

      50. </body>
      51. </html>

      ** Was this post helpful? Click Agree or Like below. **
      ** Did this solve your problem? Accept it as a solution! **

    こんにちは！

    It looks like you're new here. Members get access to exclusive content, events, rewards, and more. Sign in or register to get started.
    ログイン

    こんにちは！

    It looks like you're new here. Members get access to exclusive content, events, rewards, and more. Sign in or register to get started.
    ログイン

    クイックリンク

    カテゴリ