Toggle button for open and close a form - hide/show with custom component

Showcase
1

This is the result - a button to close and open a form
Open form: image
Close form: image

On a detail page with a table of records, this is an alternative for the add record popup button

The idea:

  1. have a form above the table component, which is hidden by default
  2. have a button which will open (show) the hidden form upon click
  3. the same button will close (hide) the form upon click
  4. reload the page upon saving the form
    Do that with a nice turning of the button

How:

  1. custom component for the button, including CSS and JavaScript
  2. add a form to the detail page, connected to the detail page record
  3. Use the Tadabase API for hiding and showing components

Custom component
Template:

<button class="round-button">
  <span class="minus-sign"></span>
</button>

CSS:

.round-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: green;
  border: none;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s ease; /* Add a transition effect for smooth rotation */
}

.minus-sign {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 2px;
  background-color: #333;
}

.minus-sign:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 2px;
  background-color: #333;
}

.round-button.rotated {
  transform: rotate(90deg); /* Rotate the button 90 degrees clockwise */
  background: red;
}

JavaScript

const roundButton = document.querySelector('.round-button');
let isRotated = false;

function toggleForm() {
  isRotated ? TB.showComponent('component_83') : TB.hideComponent('component_83');
}

roundButton.addEventListener('click', () => {
  isRotated = !isRotated;
  roundButton.classList.toggle('rotated', isRotated);
  toggleForm();
});

Notes

  • component_83 is the number of the form in my case, you need to adjust this number for your case.
  • documentation on the JavaScript Callbacks and Actions: JavaScript Callbacks a... | Tadabase

Reload page with JavaScript
This comes in the page JavaScript section (not in the custom component JavaScript section)

TB.render('component_83',function(data){ // Wait for form to load
    data.ele.find('.form-submit button').click(function(){ // Find the submit button and add a click event
        location.reload(); // Reload the page
    }); // End Click event
}); // End TB.render function

Loading the page
And by default, you would like the form to be hidden:

TB.render('component_45', function(data) {
    TB.hideComponent('component_83');
});

Credits go to ChatGPT for giving me the perfect code for CSS and JS. and to several other posts and their authors on this platform.

toggle-button

3 Likes