Weekly update – 19 July 2024

[ryan]

Thank you for all of the valuable comments last week!  I'll reply to several of the comments soon in last week's thread. A couple months ago a new addHeaderAction() method was added to to our Inputfields JS API, enabling you to add custom header icon actions to any Inputfield (more details here). A short while later, the same method was added to our Inputfield PHP API. This week it's been expanded so that now you can also add drop down menu header actions to Inputfield, like the one in the screenshot below. Though this is just a simple example:

Here's how we defined that action and menu in JS: 

$f = Inputfields.get('checkboxes_field_name');

Inputfields.addHeaderAction($f, {
  name: 'tools',
  icon: 'fa-wrench',
  tooltip: 'Select or unselect all',
  menuItems: [
    {
      name: 'select-all',
      label: 'Select all',
      icon: 'fa-check-square-o',
      // called when the user clicks on the action
      callback: function() {
        $f.find('input[type=checkbox]').prop('checked', true);
        $f.trigger('change');
      },
      // called to determine whether action is available to click on (optional)
      active: function() {
        return $f.find('input[type=checkbox]').not(':checked').length > 0;
      }
    },
    {
      name: 'unselect-all',
      label: 'Unselect all',
      icon: 'fa-square-o',
      callback: function() {
        $f.find('input[type=checkbox]').prop('checked', false);
        $f.trigger('change');
      },
      active: function() {
        return $f.find('input[type=checkbox]:checked').length > 0;
      }
    }
  ]
}); 

For more details on the options, see documentation here in the inputfields.js file where the addHeaderAction() function is defined. How does that JS code get called in the admin in the first place? Well there's a lot of different ways you could do that, but in my case, I hooked after ProcessPageEdit::loadPage in my /site/templates/admin.php file and added a custom .js file (containing the code above): 

$wire->addHookAfter('ProcessPageEdit::loadPage', function(HookEvent $e) {
  $page = $e->return; /** @var Page $page */
  $config = $e->wire()->config;
  if($page->template->name === 'tour') {
    $config->scripts->add($config->urls->templates . 'scripts/admin-tour.js';
  }
}); 

Have a great weekend!

[FireWire]

On 7/19/2024 at 1:59 PM, ryan said:

addHeaderAction() method was added to to our Inputfields JS AP

Oh heck yeah. This is awesome.