DEV Community 👩‍💻👨‍💻

Genji
Genji

Posted on

Add a button to show & hide the Kintone App's header

Here is a script to add a Hide Header button in the space element below the header. The button is a toggle to show and hide the Kintone App's header.

Demo

Image description

Code

// Add a button to show & hide the Kintone header
// If this code breaks, verify if `gaia-argoui-app-index-toolbar` is still the correct class name for the header
(function () {
  'use strict';
  // Run a function when the record list page appears
  kintone.events.on('app.record.index.show', function (event) {
    // Prevent duplication of the button
    if (document.getElementById('toggle_button') != null) {
      return;
    }
    // Set a button
    const toggleButton = document.createElement('button');
    toggleButton.id = 'toggle_button';
    toggleButton.innerHTML = 'Hide Header';
    toggleButton.style.margin = '10px';
    toggleButton.style.padding = '10px 10px';
    toggleButton.style.ariaLabel = 'Header Display Toggle';
    toggleButton.style.height = '48px';
    toggleButton.style.border = '1px solid #e3e7e8';
    toggleButton.style.backgroundColor = '#f7f9fa';

    // Button onclick function
    toggleButton.onclick = function () {
      headerToggle();
    };

    // Retrieve the header menu space element and set the button there
    kintone.app.getHeaderSpaceElement().appendChild(toggleButton);
    // const record = event.record;
    function headerToggle() {
      let header = document.getElementsByClassName('gaia-argoui-app-index-toolbar')[0];
      if (header.style.display === "none") {
        header.style.display = "block";
        console.log('Showing the header');
        toggleButton.innerHTML = 'Hide Header';
      } else {
        header.style.display = "none";
        console.log('Hiding the header');
        toggleButton.innerHTML = 'Show Header';
      }
    }
  });

})();
Enter fullscreen mode Exit fullscreen mode

Debugging

If this code breaks, verify if gaia-argoui-app-index-toolbar is still the correct class name for the Kintone App's header.

Top comments (0)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!