Jump to content
dragan

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?

Share this post


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

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

Share this post


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

Share this post


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

Share this post


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.

Share this post


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

Share this post


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.

Share this post


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:

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.

Share this post


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.

Share this post


Link to post
Share on other sites

Thanks.

Yes, it was macrura's AdminPageFieldEditLinks module. 

  • Like 1

Share this post


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

Share this post


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 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. 
      Thanks!!!!
    • 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:
      http://stats.simplepublisher.com/
      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
       
    • By Harmen
      Hi all,
      I am trying to build a form in a module. So when the render() method is called, I build the form and I want to apply a custom markup, which is defined in an array.
      Unfortunately I can't remove some text in my label. Instead of a label I want an icon, but there is always some text next to my icon as you can see below:

      I don't know how, but my icon is placed in the label, and that's not what I want.
      My markup looks like this:
      static protected $markup = array( 'list' => "{out}\n", 'item' => "\n\t<div class='form-group input-group'>\n{out}\n\t</div>", 'item_label' => "<label class=input-group-addon>{out}</label>", 'item_icon' => "<span><i class='fa fa-fw fa-{name}' aria-hidden='true'></i></span>", 'item_content' => "{out}", 'item_error' => "\n<p class='field--error--message'>{out}</p>", 'item_description' => "\n<p class='field__description'>{out}</p>", //.... etc ); and results in this:
      <div class="form-group input-group"> <label class="input-group-addon"> <span> <i class="fa fa-fw fa-envelope" aria-hidden="true"></i> </span> E-Mail </label> <input id="Inputfield_contact_email" name="contact_email" class="form-control InputfieldMaxWidth" type="email" maxlength="512"> </div>  
      and what I want is:
      <div class="form-group input-group "> <span id="contact_form" class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span> <input required="" class="form-control" name="name" id="contact_form" type="text" value="" placeholder="Name"> </div> The only problem is that the code above is hard-coded and I don't know how to remove that piece of text next to my icon....
      Thanks in advance,
      ~Harmen
    • By modifiedcontent
      I have a simple front-end password update form like this:
      In the browser the label of the second field shows up as follows:
      WTH?!
      I can't figure out what is changing the label, what is inserting /processwire/ and reformatting the thing. Is this something in PW? A "helpful" thing that browsers do?
      Edit:
      The problem disappears if I simply rename the second field to 'Confirm Password'.
      So my problem is solved, but I'll leave this here in case this is some kind of bug.
    • By Harmen
      Hello,
       
      I want to put some data in a table field, but if I put the label of the first table field, it gives an error:  Item 'feature' set to TableRows is not an allowed type
      Here is my code:
      foreach ($fetchAll as $fetch => $feature) { $productid = $feature["id_product"]; $pages = wire("pages")->get("productid=$productid"); $pages->of(false); // ensure output formatting is off $pages->Specification->feature = ($feature['name']); $pages->Specification->value = ($feature['value']); $pages->save(); } I tried to give the label other names, but it still doesn't work. How can this be solved?
×
×
  • Create New...