In this tutorial we will show to add a dropdown box with additional options to the Save button on Add/Edit pages.
1. Code snippet
Insert a code snippet right after Save button on the Add page. Use the following code there:
echo '<button id="dropdownBtn" class="btn btn-primary">
<i class="fas fa-angle-down"></i>
</button>
<div id="dropdownMenu" class="dropdown-menu"></div>';This code displays a button with the angle-down icon and also creates a placeholder for the dropdown menu.
2. Javascript OnLoad event.
The following code goes to Javascript OnLoad event of the page in question. Notice the list of items in the beginning, this is where you can add more actions or remove those that you do not need. Besides the dropdown item label we also define the code that will be executed when this item is selected.
const items = [
{ text: 'Save and proceed to Edit', action: () => mysubmit(pageObj, 'edit') },
{ text: 'Save and proceed to View', action: () => mysubmit(pageObj, 'view') },
{ text: 'Save and return to List', action: () => mysubmit(pageObj, 'list') }
];
const btn = document.getElementById('dropdownBtn');
const menu = document.getElementById('dropdownMenu');
// Create menu items dynamically
items.forEach(item => {
const link = document.createElement('a');
link.href = '#';
link.textContent = item.text;
link.addEventListener('click', e => {
e.preventDefault();
item.action();
menu.style.display = 'none';
});
menu.appendChild(link);
});
// Toggle dropdown
btn.addEventListener('click', e => {
e.stopPropagation();
const rect = btn.getBoundingClientRect();
menu.style.left = '-77px';
menu.style.top = '32px';
menu.style.display =
menu.style.display === 'block' ? 'none' : 'block';
});
// Close when clicking outside
document.addEventListener('click', () => {
menu.style.display = 'none';
});3. custom_functions.js
Here we place the code of mysubmit() function. It accepts an action like 'edit' or 'list' as a parameter, adds it to the form and submits it. All this is required to make this parameter available in server-side event
function mysubmit(pageObj, action) {
pageObj.on('beforeSave', function(formObj, fieldControlsArr, pageObj){
formObj.baseParams['action'] = action;
});
pageObj.getItemButton('add_save').click();
}4. AfterRecordAdded event
In this event we analyze the action parameter and based on its value perform a redirect to one of the pages
$id = $keys["CategoryID"];
if ($_REQUEST["action"] == 'view' ) {
header("Location: categories_view.php?editid1=".$id);
exit();
}
if ($_REQUEST["action"] == 'edit' ) {
header("Location: categories_edit.php?editid1=".$id);
exit();
}
if ($_REQUEST["action"] == 'list' ) {
header("Location: categories_list.php");
exit();
}5. Style Editor -> Custom CSS
And just a bit of CSS to make button and dropdown menu look prettier.
.dropdown-btn {
padding: 6px 12px;
border: 1px solid #ccc;
background: #fff;
cursor: pointer;
border-radius: 4px;
}
.dropdown-btn .arrow {
margin-left: 6px;
font-size: 10px;
}
.dropdown-menu {
position: absolute;
margin-top: 4px;
min-width: 140px;
border: 1px solid #ccc;
background: #fff;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
display: none;
z-index: 1000;
}
.dropdown-menu a {
display: block;
padding: 8px 12px;
text-decoration: none;
color: #333;
}
.dropdown-menu a:hover {
background: #f5f5f5;
}
#dropdownBtn {
margin-left: -4px;
}