Jump to content

Display number of selected items: is there an in-built PW method for this?

Recommended Posts

In page-edit view: If I wanted to display the total count of selections, is there an in-built PW method for this?

e.g. let's say the default view is collapsed for a page reference field. I see the label "Services" but would like to see "Services (3)". I would know that three items are selected without opening the inputfield. And ideally after every change, the number gets updated (without page-reload).

Did someone once built something similar?

Link to post
Share on other sites

Don't know of a built in way. But it would be easy to do with a little javascript. At least if the field is not loaded via AJAX (only collapsed is fine).

$('.Inputfield_pageref label').append(' <span>(' + $('.Inputfield_pageref .asmListItem').length + ')</span>');



Of course you'd need to update that count on several events, but that should also be quite easy 🙂

  • Like 1
Link to post
Share on other sites

You can use a hook for that

wire()->addHookAfter("Inputfield(name=categories)::renderReadyHook", function($e) {
	$inputfield = $e->object;
	$inputfield->label = $inputfield->label . " (" . count($inputfield->value) . ")";

ProcessField::buildEditForm should also work. To get it working without page-reload will require some custom js. 

You can find some useful parts in this thread 

P.S @bernhard was faster than me.

  • Like 2
Link to post
Share on other sites

Thanks for both of your inputs.

Yeah, I already tried something with JS, and it looks like I would have to do

  • window.load() -> get and show initial count
  • on change selects -> when adding stuff
  • on click remove anchor -> when deleting stuff
  • The thing with simply doing a jQuery append() is that you end up with Label (4) (3) (2) when you add or remove several times in one page-load instance 🙂

I guess what I'll try tomorrow is: First of all add addtl. markup with https://modules.processwire.com/modules/fieldtype-runtime-markup/ to generate an empty span or div with a certain CSS class. In that case, I could just update this particular HTML container's text instead of the whole label. I'll see how that goes and report back.

Link to post
Share on other sites

If you are not against some dirty css hack, you could do it without js using css counter added to pseudo elements on the list items, and positioning them to the top right corner of the field. As you need the last number only, hide the others using li:not(:last-child) display none.

The downside is that you cannot position it directly after the label text and it's kinda hacky but otherwise it's reliable and resource friendly (css power! :)). Sorry I cannot post an example as I'm on mobile, maybe tomorrow if you are interested.

  • Like 3
Link to post
Share on other sites

Interesting! Will certainly try that as well tomorrow. Thanks for your suggestion. And no, I don't mind "dirty" at all 🤤

I knew about CSS counter, but have never used it that way.

Link to post
Share on other sites

Wow, that was fast 🙂 Thank you.

However, when I upgraded AoS today, I saw something a bit off:



The dropdown shouldn't be visible.




depending on the number of selected items, the counter and field-name almost overlap.

Link to post
Share on other sites

I see, the field description (and notes) are causing troubles in the collapsed state, I will fix tomorrow. Use this if you need now:

.InputfieldPage.InputfieldStateCollapsed>.InputfieldContent > p, .Inputfield.InputfieldAsmSelect.InputfieldStateCollapsed>.InputfieldContent > p {
	display: none;

As the field name overlap, is that another module? You could replace it with AOS if it's a link for editing the field ("service" in your screenshot). You can hover on the field name "Leistung" and click on the tooltip that appears. To see this, enable the FieldAndTemplateEditLinks submodule of AOS.

Link to post
Share on other sites

I've updated the module (no version change), so you can update and hopefully it will be OK. Re-download or manually update styles/aos.min.css (plus do some hard refresh to eliminate cache).

  • Like 2
Link to post
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
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Pip
      Hi Everyone!
      I'd like to set a different label on my Title (PageTitle) field in one particular template.  Is there a way to do so? 
    • By MarkE
      I have created a custom admin page which uses InputfieldPageListSelect. It works very nicely (see image), especially with a bit of css to modify the appearance within a MarkupAdminDataTable and some js with AJAX to interactively update each row. However, I would also like to be able to "view" the selected tariffs. When using a normal InputfieldPageListSelect in the admin, you can set "Enable view/edit links on selected pages" (and "Enable link to create new pages"). I can't see how to pass a parameter for that in the API. Any ideas?

    • By jonatan
      collapsedNoLocked field not showing
      Hi all, ☺️
      I'm a 21 years old 👨‍🦱, danish 🇩🇰, hobby-designer-and-web-stuff-maker and very excited and eager processwire beginner, or "noob" 🐣 if you wish.
      So far I've been fascinated by the very satisfyingly simple and yet powerfull magic ✨ of PW (once you get the hang of it) and the awesome feeling of the strong PW community 🦄🌈☀️❤️! The huge work done by @ryan and all of the other amazing PW people is just so inspiring! I actually really have a hard time understanding why Processwire isn't the most used CMS in the world... or at least just a way more commonly known one!
      But now I've encountered a small bump on the road and I'd lovingly appreciate if one of you lovely PW forum members could maybe help me out!
      So I have a problem with the collapsed-constant: https://processwire.com/api/ref/inputfield/#pwapi-methods-collapsed-constants 
      - It's not showing my field when I apply it.
      (I've funnily enough found this old git pull from 2014 which documents the "Locked" state being added as a field -> input -> visibility option: https://github.com/ryancramerdesign/ProcessWire/pull/457 – it also shows the relevant code implementations to the core) 
      📝 What I wish to do:
       is to 👀 display some data from a 📦 module (InstagramBasicDisplayApi) in the ⌨️ page editor when editing a page ("About me") using the template (About.php) - So the only possible way to do that as far as for what I've been able to come up with with my restricted PW (end eh.. php) –knowledge was to add a custom field type to the (About.php) template...
      I've set up a custom field using https://modules.processwire.com/modules/mystique/ :
      <?php namespace ProcessWire; $modules = wire("modules"); $instagram = $modules->get("InstagramBasicDisplayApi"); $data = array('username'=>''); $account = $instagram->getUserAccount($data["username"]); $username = isset($account["username"]) ? $account["username"] : ""; $at_instausername = "@" . $username; /** * Resource : Instagram account */ return [ 'title' => __('Instagram account'), 'fields' => [ 'window_title' => [ 'label' => __(' '), 'type' => Mystique::TEXT, // or InputfieldText 'useLanguages' => true, 'collapsed' => '0', 'placeholder' => __($at_instausername), ] ] ]; - Basically:
      I'm getting the instagram-username, pulling it from the module "InstagramBasicDisplayApi",  And then I'm using it as the 'placeholder' value for the field, resulting in this:  - Which is actually what I want... almost...
      – The thing is, I would like it to be locked, so that it's not possible to overwrite the 'placeholder' value, but so that the inputfield actually does not take any input but just informatively displays the data...
      so what I do is that I just change 'collapsed' to '7' = 'collapsedNoLocked':
      'collapsed' => '7', , right, and that would be it?
      But unfortunately no...
      When I do I get this:
       - I can't figure out why? I'd supposed that the 'placeholder' value would just show, but non-editable?
      A "workaround" is to just set it to back to 0, then manually type in "@sasha_lindegaard" and then press save, and then set it to 7, and I have what I want:

      - But that's not really what I wish, as it displays the data (the instagram username) statically (from what I've typed into the field and have saved) and not dynamically (from the instagram module database) as wished for...
      – also, it's still collapsable? Why so?... 🤔
      Any ideas for how I might get my "INSTAGRAM" field to display the username from the instagram module's database dynamically, not as editable placeholder text in a editable/open input field but just as non-editable/locked text?
      I hope that I've made my problem clear enough but if I've failed to provide enough info please don't hesitate to request for more! 🙂 
      Thanks a thousand times in advance!
      All the best,
      Jonatan R.
    • By quickjeff
      Hi Guys, I have seen some other threads that talk about this but nothing recent nor in line with what I need. 
      I have basically created a page in which I am tracking the number of views. I update the counter which is tied to a field I added to the page's template that I am tracking. The field is hidden from the website admin and only used for this data. 
      However, now I need to track it on a daily basis. I am thinking of keeping track of all time view total for 30 days and perhaps saving that and allowing the user to see the page views of last 7 days, each day as a number and then 30 days of data. This way if I want to build in reporting functionality I can. 
      What I need help with adding a date to the page_views field but also, knowing how many page_views for today, yesterday, day before etc. 
      Here is what I have so far and its working. Now I need to associate a date with every day. NOT every update of the page_views field. 
      if (!$user->hasRole('superuser')) { $page->page_views += 1; $page->of(false); $page->save('page_views'); $page->of(true); } echo $page->page_views; Any guidance, help, suggestions is absolutely appreciated. 
    • By mr-fan
      What i wanna achive is a simple counter like that count up on visit (this is no problem) AND save the specific date (year/month/day) of the count...
      in the end i will be able to get visits per day/per month/per year in a nice and dirty graph.
      Just to have a way better simple counter system.
      Should i only go with a complex setup of pages like this:
      --stats (home template for pageviews)
      ----2018 (year)
      ------08 (month)
      ---------29 ->page_views   (integers on every day template)
      ---------30 ->page_views
      Or just simple use:
      --stats (home template for pageviews)
      ---->count (template) that holds simple field page_views and a date field
      or could a fieldtype like tables (one table field for every month/year or so) be also a solution?
      Or a own SQL table special for this and use it in a module? I don't have any experience on this topic...
      What i have in mind of performance sideeffects on such a thing?
      Or is there a solution that works with PW?
      I wanna go the hard way and implement something like this:
      only directly within PW and use the API to get the data...maybe create a simple module from it later i don't know if i  could set it up right from the start 😉
      this is the reason for my questions on more experienced devs
      Kind regards mr-fan
  • Create New...