Possible to change behavior of Panel Fields?

Hey there,

I want to change the behavior of the select panel field, but I don’t necessarily want to create a new separate field.

All I want to do is implement Select2 ( https://select2.github.io/ ) to my existing select fields, so I can search through them, as some of them are getting long.

How would you go about that? Do I have to create a new field?


1 Like

If you don’t create a new field, you have to get the JS in somehow, and that is not possible without either creating a new field or hacking the core. Currently, you can’t add custom JS like custom CSS, at least not that I know of (if the devs haven’t sneaked it in secretively)

How does one add custom CSS to the panel?

Add this line to config.php

c::set('panel.stylesheet', 'assets/css/your_custom_panel.css'); //or path to the css file

Yeah, there doesn’t seem to be any way to add JS to the panel without editing the core of the panel.

I tried to find where panel.stylesheet is being called and it’s in panel/app/layouts/app.php. This little snippet is what makes panel.stylesheet do its thing.

  <?php if($stylesheet = kirby()->option('panel.stylesheet')): ?>
  <?php echo css($stylesheet) ?>
  <?php endif ?>

I could easily add something like the following, but I’d be modifying the core of the panel.

  <?php if($script = kirby()->option('panel.script')): ?>
  <?php echo js($script) ?>
  <?php endif ?>

I’m not sure if there’s any place I could hook the JS file into the panel.

Well, I guess for the time being there is no way if you don’t want to modify the core. Maybe we can make a suggestion to add that feature but even if it goes through, this would then have to wait until the next release.

For the time being I think the best way would be just to copy the select field and add the javascript.

I think that copying the select field is actually the best way of doing it. The additional JS code is part of the field, not of the whole Panel installation. Installing it as part of a field makes the field much more portable.