Jump to content
sambadave

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

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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.

 

  • Like 1

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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):

qz71lcO.png

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:

vihe6n5.png

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

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

hGo89KT.png

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;
});

JSMLxLM.png

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.

  • Like 8

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

  • Like 4

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By gerritvanaaken
      My client could save some time if she could select multiple pages at once. Of yourse, we are using the standard page selector in multi-tree mode, but she has to select one page after another. Each time she has to open the site tree again and open the required subtree, finding the page she wants to select.
      Would be cool to let the tree open after selecting a page, so she could select multiple pages in one "tree session". Understand what I mean? Anybody any solution to this?
      Alternatively, maybe the site tree could keep its state with all the subtrees open, when you are re-open it again.
    • By Lmwt
      Hi there,
      I am new to PW but already very convinced. I need to build a dropdown button to browse in a collection of authors by country and language. The dropdown should be editable in the BACK and displayed on the same as the authors collection. I tried my luck with "PageField Creator" but I don't know how to display the dropdown, I simply used: 
      "$content .=$page->Land;" (the name of the select field)
      but nothing is displayed...
      I see there is a 2nd module out there to achieve this : "Select Options Fieldtype". I am not sure what is the difference, anyone has a tip?
      And a clear tutorial with the necessary steps to build this? I am a bit confused which should be the parent template or page, if it should have a file or not...
      Thanks a lot in advance!
    • By MateThemes
      Hello everyone!
      I use Ryan's site profile blog for my new website. Everything works great, but i am not able to change the url of the blog categories. Currently the url is root_url/categories. My client wants the url root_url/news/categories. 
      If change the url in the tab url from /categories to news/categories Processwire change it to news-categories!
      How can I change that or can I change it in the php file too?
      Thanks for your help for a beginner!
    • By Noel Boss
      Admin Theme Boss
      A light and clear theme based on Uikit 3
      Features
      Five unique color options Beautifully redesigned login screens Modern typography using Roboto Condensed Extended breadcrumb with edit links Extends AdminThemeUikit, so you can continue using all current and future AdminThemeUikit features Option to activate theme for all users Compatibility with AdminOnStreoids and other third party modules   Updated and Releases
      There is a shiny new release page where you can subscribe to updates for new releases of AdminThemeBoss.   Color Variants:
      ProcessWire Blue


       
      Dark Black


       
      Vibrant Blue

       
      Happy Pink

      Smooth Green *new with 0.6.1*

       
      Requirements
      Requires a current ProcessWire version with AdminThemeUikit installed and activated.
      Installation
      Make sure AdminThemeUikit is activated Go to “Modules > Site > Add New“ Paste the Module Class Name “AdminThemeBoss“ into the field “Add Module From Directory“ Click “Download And Install“ On the overview, click “Download And Install“ again… On the following screen, click “Install Now“

      Manual Installation
      Make sure the above requirements are met Download the theme files from GitHub or the ProcessWire Modules Repository. Copy all of the files for this module into /site/modules/AdminThemeBoss/ Go to “Modules > Refresh” in your admin Click “Install“ on the “AdminThemeBoss“ Module
    • By EyeDentify
      I have been experimenting with the new $page->meta() method and find it useful.

      Once i figured out that the data i "save" with it is tied to the page where i called the method from.

      So this is not obvious at least not for me in the documentation:
      https://processwire.com/api/ref/page/meta/
       
      So i just wanted to share that revelation with the community so you don´t get as confused as i was.

      Happy Coding Everyone.
×
×
  • Create New...