Jump to content

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


dragan
 Share

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 comment
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>');

count1.png.57015a22ebe784d46eedb64ebf73e973.png

count2.png.450d5389db01af87f033cfc932a7dfcf.png

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

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

Wow, that was fast ? Thank you.

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

collapsed:

closed.PNG.2713cc66123f868a288dff0577c818f6.PNG

The dropdown shouldn't be visible.

 

open:

open.PNG.f6650a8bcd8ec595e20e64cb8e672322.PNG

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

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

×
×
  • Create New...