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

[dragan]

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?

[bernhard]

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 ?

[Zeka]

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.

[bernhard]

3 minutes ago, Zeka said:

P.S @bernhard was faster than me.

Yeah but you introduced another option. The best option would be a combination of both ?

[dragan]

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.

[tpr]

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.

[dragan]

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.

[tpr]

I've added this tweak AOS (asmCounter):

https://processwire.com/talk/topic/13389-adminonsteroids/?do=findComment&comment=170536

 

[dragan]

Wow, that was fast ? Thank you.

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

collapsed:

The dropdown shouldn't be visible.

 

open:

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

[tpr]

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.

[dragan]

Thanks.

Yes, it was macrura's AdminPageFieldEditLinks module. 

[tpr]

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