Jump to content

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


sambadave
 Share

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

 

Link to comment
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
Link to comment
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?

Link to comment
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
Link to comment
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.

Link to comment
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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By Shohan Arafat
      I was looking for code sample where I can attach a textarea for setting up a content in my page. And I wanted to do it programatically. But I can't find a way to do that. Is it possible to add a content textarea with program?
    • By Robin S
      This module lets you add some custom menu items to the main admin menu, and you can set the dropdown links dynamically in a hook if needed.
      Sidenote: the module config uses some repeatable/sortable rows for the child link settings, similar to the ProFields Table interface. The data gets saved as JSON in a hidden textarea field. Might be interesting to other module developers?
      Custom Admin Menus
      Adds up to three custom menu items with optional dropdowns to the main admin menu.
      The menu items can link to admin pages, front-end pages, or pages on external websites.
      The links can be set to open in a new browser tab, and child links in the dropdown can be given an icon.
      Requires ProcessWire v3.0.178 or newer.
      Screenshots
      Example of menu items

      Module config for the menus

      Link list shown when parent menu item is not given a URL

      Advanced
      Setting child menu items dynamically
      If needed you can set the child menu items dynamically using a hook.
      Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); if($menu_number === 1) { $colours = $event->wire()->pages->findRaw('template=colour', ['title', 'url', 'page_icon']); $children = []; foreach($colours as $colour) { // Each child item should be an array with the following keys $children[] = [ 'icon' => $colour['page_icon'], 'label' => $colour['title'], 'url' => $colour['url'], 'newtab' => false, ]; } $event->return = $children; } }); Create multiple levels of flyout menus
      It's also possible to create multiple levels of flyout submenus using a hook.

      For each level a submenu can be defined in a "children" item. Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); if($menu_number === 1) { $children = [ [ 'icon' => 'adjust', 'label' => 'One', 'url' => '/one/', 'newtab' => false, ], [ 'icon' => 'anchor', 'label' => 'Two', 'url' => '/two/', 'newtab' => false, 'children' => [ [ 'icon' => 'child', 'label' => 'Red', 'url' => '/red/', 'newtab' => false, ], [ 'icon' => 'bullhorn', 'label' => 'Green', 'url' => '/green/', 'newtab' => false, 'children' => [ [ 'icon' => 'wifi', 'label' => 'Small', 'url' => '/small/', 'newtab' => true, ], [ 'icon' => 'codepen', 'label' => 'Medium', 'url' => '/medium/', 'newtab' => false, ], [ 'icon' => 'cogs', 'label' => 'Large', 'url' => '/large/', 'newtab' => false, ], ] ], [ 'icon' => 'futbol-o', 'label' => 'Blue', 'url' => '/blue/', 'newtab' => true, ], ] ], [ 'icon' => 'hand-o-left', 'label' => 'Three', 'url' => '/three/', 'newtab' => false, ], ]; $event->return = $children; } }); Showing/hiding menus according to user role
      You can determine which menu items can be seen by a role by checking the user's role in the hook.
      For example, if a user has or lacks a role you could include different child menu items in the hook return value. Or if you want to conditionally hide a custom menu altogether you can set the return value to false. Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); $user = $event->wire()->user; // For custom menu number 1... if($menu_number === 1) { // ...if user does not have some particular role... if(!$user->hasRole('foo')) { // ...do not show the menu $event->return = false; } } });  
      https://github.com/Toutouwai/CustomAdminMenus
      https://processwire.com/modules/custom-admin-menus/
    • By opalepatrick
      I see old posts saying that repeaters are not the way to go in Custom Process Modules. If that is the case, when using forms (as I am trying to do) how would one tackle things like repeat contact fields where there can be multiple requirements for contact details with different parameters? (Like point of contact, director, etc) or even telephone numbers that have different uses?
      Just for background I am creating a process module that allows me to create types of financial applications in the admin area (no need to publish any of this, pure admin) that require a lot of personal or company information.
      Maybe I am thinking about this incorrectly?
    • By rjgamer
      Hi,
      is there a hook after the current (active) page got created? Or which method got called in the Page class after the Constructor of the current page got initialized?
      Thanks.
       
    • By rjgamer
      Hi guys,
      the field "redirect_last" of type DateTime got not updated. The update on the field "redirect_counter" works and got saved.
      Does anybody know what I did wrong in my code?
      if ($input->urlSegment(1) === 'redirect') { $page->of(false); $page->redirect_last = time(); $page->redirect_counter += 1; if ($page->save('redirect_counter')) { $session->redirect($page->website_url, 302); } } Thanks.
×
×
  • Create New...