Combine All Actions Into A Dropdown Select Box

Introduction

This guide explains how to consolidate multiple action links in a list into a single dropdown select box. This approach simplifies the user interface by reducing clutter and organizing actions more efficiently.

How does it work?

Transforming a list with numerous action links into a single dropdown select box can streamline the user experience. This method is particularly useful in lists that use the Table - Classic template with the Display Row Actions in Single Column? option enabled.

1. Insert the following JavaScript code into the Custom JavaScript section of your Userview Builder > Settings. This script will transform action links into a dropdown menu for each row in the list.

   window.addEventListener('load', function () {
       //setTimeout(function(){
           $("tbody:visible > tr:visible").each(function(){
               var currentRow = this;
               actionLink = $("li.action-link-modal").clone();
            
               if($(this).find("td.row_action span.row_action a").size() > 0){
                   $(this).find("td.row_action span.row_action a").each(function(){
                       $(actionLink).find("ul").append( "<li>" + $(this).prop("outerHTML") + "</li>");
                       $(this).remove();
                   });
                   $(currentRow).find("td:last").append( actionLink );
                   $(actionLink).removeClass("action-link-modal").show();
               }
           });
       //}, 1000);
   }, false);

   Note: This script will affect all datalists in the application. To apply it to a specific datalist, modify line  $("tbody:visible > tr:visible").each(function(){ by prepending the datalist ID, as shown below:

   $("#requestListAll > tbody:visible > tr").each(function(){

2. Add the following HTML snippet to your list template to create the dropdown menu:
   

   <li class="action-link action-link-modal dropdown" style="display: none; list-style: none; margin: 15px;">
       <a data-toggle="dropdown" class="btn dropdown-toggle waves-effect btn waves-button waves-float" aria-expanded="false">
            Action
            <span class="caret"></span>
       </a>
       <ul class="dropdown-menu">
            
       </ul>
   </li>

3. Use the following CSS to style the dropdown button and menu:
   

   <style>
   /* Style The Dropdown Button */
   #list_form > tbody > tr > td.row_action.footable-visible.footable-last-column > li > a {
     background-color: #4CAF50;
     color: white;
     padding: 16px;
     font-size: 16px;
     border: none;
     cursor: pointer;
   }
     
   /* The container <div> - needed to position the dropdown content */
   #list_form > tbody > tr > td.row_action.footable-visible.footable-last-column > li {
     position: relative;
     display: inline-block;
   }
     
   /* Dropdown Content (Hidden by Default) */
   .dropdown-menu {
     display: none;
     position: absolute;
     background-color: #f9f9f9;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 10;
   }
     
   /* Links inside the dropdown */
   #list_form > tbody > tr > td.row_action.footable-visible.footable-last-column > li > ul > li > a {
     color: black;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
   }
     
   /* Change color of dropdown links on hover */
   .dropdown-menu a:hover {background-color: #f1f1f1}
     
   /* Need to modify the anchor tag */
   .dropdown-menu a {
       color: black;
       padding: 12px 16px;
       text-decoration: none;
       display: block;
   }
     
   /* Show the dropdown menu on hover */
   #dropdownBtn:hover .dropdown-menu {
     display: block;
   }
     
   /* Change the background color of the dropdown button when the dropdown content is shown */
   #dropdownBtn:hover .dropbtn {
     background-color: #3e8e41;
   }
     
   .dropdown-menu li{
       list-style-type: none !important;
   }
   </style>

Download sample app