Custom look for page reference field select, radio or checkbox etc

[sambadave]

Hi everyone, here's the problem I'm trying to solve.

I have a config area in my PW admin that is locked down for admin use. I use pages to store a bunch of settings that I'll use for my clients website. It's mostly used for visual things like colours and theming. This list could be tiny or large, depending on the sites requirements, but its great because I can store any information I want to. So the page tree could look something like this:

ADMIN SETUP

• Home
  • Config
    • Aesthetics
      • Colours
        • Red
          • Field: Custom Label - "Red"
          • Field: Class name - "theme--red'
        • Green
          • Field: Custom Label - "Green"
          • Field: Class name - "theme--green'
        • Blue
          • Field: Custom Label - "Blue"
          • Field: Class name - "theme--blue'
        • etc...
      • Sizes
        • Small
          • Field: Custom Label - "Small"
          • Field: Class name - "sm'
        • Medium
          • Field: Custom Label - "Medium"
          • Field: Class name - "md
        • Large
          • Field: Custom Label - "Medium"
          • Field: Class name - "lg"
        • etc...
      • Icons
        • Target
          • Field: Custom Label - "Hands shaking Icon"
          • Field: Icon SVG - "[svg code]'
        • Target
          • Field: Custom Label - "Target icon"
          • Field: Icon SVG - "[svg code]'
        • Success
          • Field: Custom Label - "Happy face icon"
          • Field: Icon SVG - "[svg code]'
        • etc...

HOW I USE THIS

I'm then able to set up page reference fields for colour, size and icons. I'll use these fields on particular pages so that my clients can select a particular colour, size or icon, or anything really. Currently, with the page reference field I can create a custom label for the options. So for something like colour I can label the field "Theme" and present a list of colours like "Red, "Green" and "Blue" using the custom page label label format of the colours page.

This of course means that I can use this to do some lovely presentation on the front end of the site. With a colour selected I'll then be able to use the page reference to get the class name for that colour theme so that I can update the page's look and feel. So in my markup I'd end up with "theme--red" or "theme--green" etc.

THE PROBLEM

I have this all working which is great and it's really flexible for the client which they love. However, I'd love to be able to make things more visual for the client.

Is there a way to be able to output more than just text in the page reference field? I might have a bunch of different blue colours, so instead of a list like so:

• Navy Blue
• Deep Blue
• Bright Blue
• Sea Blue

... it would be great to be able to output actual colour swatches, which is a lot mor visual for the client.

Taking the icon selector, I would ideally like to show the actual svg that I've stored against that icon as a selectable image instead of seeing text options like:

• Hands shaking icon
• Target icon
• Happy face icon

Just a couple of scenarios here, but as you can see there could be any number of reasons to display a more visual method of selection.

ANY SOLUTIONS?

I've looked at modules like FieldtypeColorPicker which could help in solving the colour issue, but it doesn't allow me to select a colour and then use a particular class name assigned to it the way I describe above.

Considering the other use cases I mention above, does anyone know if anything exists already that would help me to create custom presentaion for page reference lists, or if there's anything planned?

Thank you in advance for anyone who's read this far and has any words of wisdom!

Dave

 

[Sergio]

I have the same need and I was planning to use RunTimeMarkup module in some way to accomplish this. The difference is that I have these settings on my ProFieldMatrix content blocks instead.

Didn't do it yet though, as I have to finish other things first on the project. But If you give it a try, let me know how was it.

 

[sambadave]

Thanks @Sergio

I kind of understand how that module works now after a quick skim through. I'm not quite sure how I would go about using that to create a selectable list though. Apologies, my PHP knowledge isn't brilliant. I was hoping that I'd be able to somehow open up the paramenters for the "Custom Page Label Format" on the "Input" tab of the speific page reference field to somehow allow me to add additional php and/or html markup within that, wrapped around the particular field values that I wish to use?

Do you think something like that is achievable?

[bernhard]

Hi @sambadave,

if the available solutions do not fit, you can modify the markup of any field as you want quite easily. One option is the Inputfield::render hook. First, start with a general hook to check if everything works:

// /site/ready.php
$wire->addHookAfter("Inputfield::render", function(HookEvent $event) {
  bd('fired');
});

You should get lots of dumps when opening your page (using TracyDebugger of course):

Make it conditional to only fire for your field and change the class to InputfieldSelect to be more specific:

$wire->addHookAfter("InputfieldSelect(name=availability)::render", function(HookEvent $event) {
  bd('fired');
});

It will fire only once:

The HTML is in the "return" property of the $event:

$wire->addHookAfter("InputfieldSelect(name=availability)::render", function(HookEvent $event) {
  bdb($event->return);
});

You can then modify this html like this:

$wire->addHookAfter("InputfieldSelect(name=availability)::render", function(HookEvent $event) {
  $html = $event->return;
  $html = str_replace("value='1'", "value='1' style='background: red; color: white;'", $html);
  $html = str_replace("value='2'", "value='2' style='background: blue; color: white;'", $html);
  $html = str_replace("value='3'", "value='3' style='background: green; color: white;'", $html);
  $event->return = $html;
});

For more complex modifications it's better to hook the field before it get's rendered (search the forum via google for ProcessPageEdit::buildForm). You can also see https://github.com/BernhardBaumrock/TemplatePreviewImages for a simple example of modifying inputfields and applying an additional library.

[dragan]

I'm not sure, but maybe you could look at https://github.com/processwire/processwire/blob/master/wire/modules/Inputfield/InputfieldIcon/InputfieldIcon.module which is used in template settings under tab "advanced" and create something similar?

[sambadave]

Thanks for such a detailed explanation @bernhard that's new to me and will definitely come in handy.

I guess if I was to do this then I'd have to update the hook for any new select options though. If I had a set of 50 icons, 10 colours etc it could end up being quite a chore updating the hook file every time. Correct me if I'm wrong here though.

Ideally, I'd like to set up the config area so that other admins that aren't necessarily coders, could add new options through the CMS. The beauty of the page reference select list is being able to select a parent page and show the children as options in a select box/radio/checkbox etc... so if you add a new option through PW admin the list just updates automatically.

I'm sure there's a solution to this as is always the case with PW.

Thanks again.

[Macrura]

Inputfield Selectize is the way to go.. it can do basically anything... here's a screenshot example; colors, icons all no problem..

[bernhard]

wow, thx, totally missed/forgot that one! ? 

[sambadave]

Thanks @Macrura and @dragan for the ideas.

Selectize looks like it could do the trick! I'll check out that icon module too.

Much appreciated
Dave

[Macrura]

yeah for selecting icons there is a version of FieldtypeFontIconPicker floating around somewhere (possibly not the one in the directory) that works really well, will gave to dig that one up..

Edit - this is the one i use for icons, thanks to @OLSA