Selecting multiple pages from large tree

[SteveB]

I'm looking for a good way to manage a page field which needs to select a small number of pages (usually fewer than 5) from a large number of available pages. There are about 10,000 pages to choose from and they are organized as children of about 1000 parent pages. I have those parents organized by A to Z if we want to do this with three levels.

Dependent selects almost works. I tried having a select for the parent and, dependent on that, a SelectMultipleTransfer to choose child pages but when you change the parent selector it clears everything you've selected so far. That's not going to work. Maybe there's a trick involving options/mods to the jquery widget?

Any thoughts? There has to be something more efficient and user friendly than a single paginated list of 10,000 items.

Thanks

[adrian]

What about: http://modules.processwire.com/modules/inputfield-page-autocomplete/

[SteveB]

The names of the pages are not terribly useful but PageAutocomplete is probably fine for the back end. On the front end side of things, special users will have a page where we do this selection but they will need to be browsing them as thumbnails. I have something AJAXy in mind for that combining navigation and thumbnails with the "transfer" idea of SelectMultipleTransfer so they can browse around and collect the ones they want.

[tpr]

I'm struggling with the same issue, whether to put 200-300 items in a select box or find a better solution.

I may go with the selectbox but I'm thinking about implementing a lightbox where all the items are listed.

Another solution could be Select2 (check the "Tagging support" example):

https://select2.github.io/examples.html

[adrian]

I am loving Autocomplete and also Chosen Select (http://modules.processwire.com/modules/inputfield-chosen-select/) which uses http://harvesthq.github.io/chosen/ and is basically the same as Select2

 

Which one I use depends on the scenario.

If you are using Autocomplete, take a look at integrating FieldtypeConcat for the Label field if you want fine control over what will appear in the entries - very cool!

[bcartier]

I've struggled with this as well.  

I've been thinking that a Page FieldType along with a new InputField that leverages the following would be ideal:

• the Lister search/filter UI for finding pages
• shows selected pages below - similar to the ASMSelect UI 

You'd be able to search multiple times using different criteria and then add one or more pages to the selected list.

I haven't tried putting that combo together yet - it's a bit daunting.  I've only written very basic Module so far... any takers?  ;-)

[SteveB]

FYI, PageAutocomplete seems to only work for pages with a common parent. That's not going to help.

[adrian]

FYI, PageAutocomplete seems to only work for pages with a common parent. That's not going to help.

That shouldn't be the case - like any Pagefield, you can define the selectable pages by template, selector, or even custom PHP.

Is there a bug you have discovered in some situation?

[SteveB]

Whoops. My fault entirely. I didn't type what I thought I'd typed and my selector made no sense.

[SteveB]

Tangentially related to the above...

Anybody have advice on how best to implement, on the front end, a set of dependent selects which allow you to traverse a tree of pages? The point is to be able to pick any single thing in the tree (get a page id). They should be able to drill down as far as they want but not have to go all the way to a leaf.

Imagine minimal pages (title and id) something like:

stuff/

  tools/

    hand-tools/

      pliers/

        locking/

    power-tools/

      saws/

      drills/

  finishes/

    paints/

On a form, starting from nothing, user sees a single select of the immediate children of stuff. They pick one of those and (this part via AJAX) we use that page's id to get children to populate a second select. Actually, my preference is to use one select and once a choice has been made the label for that choice becomes an LI tag, We end up displaying a path using UL and LI inline and as we click around on those the clicked one becomes a select, the ones to the right go away. If we show the form and already have a page id the thing should initialize itself and show the path to that page.

Seems like this wheel has to have been invented several times already. I did something just like this, but not PW and the JS was a bit ugly, several years ago but I'd think there must be slick and well tested UI library solutions now. Just can't seem find them. Jquery Option Tree (demo #6) is close but not quite right.

Easy enough to setup PW to handle AJAX requests by sending back JSON of the child page's ids and labels. The rest can be jQuery events and functions. Should I be thinking of it as a FieldType for a Page field or just PHP/JS to throw into a template file? Pros and cons?

Thanks.

[SteveB]

In answer to my own question I came up with a solution using good old jQuery and the Service Pages module.

Use it to choose any node in a tree that ServicePages will let you access.

Here's a quick video of it in action: Demo (.avi)

Could use hover to reveal the selects but that won't help people on touch screens.

The PW pages used here are like you find in typical PW category schemes, just the default fields.

Reasonable conventions for ids and classes so no problem using more than one at a time and styling them alike or differently.

[LostKobrakai]

Maybe this would also be from interest: https://github.com/LostKobrakai/InputfieldPageDependentSelect

[gebeer]

Maybe this would also be from interest: https://github.com/LostKobrakai/InputfieldPageDependentSelect

The serpentine path on my humble quest for the mysterious dependent select input field type that is mentioned by Ryan here and cheered a lot about further down the same thread, led me here.

With great expectations I went straight to the linked git repo, only to find these lines:

 By now this only works for hierachies, where the branches have the same depth

Please allow me one question before I continue my hunt for this seemimngly lost or hidden and so hardly desired feature:

Your fieldtype will not work if the pages that the 2 dependent select fields refer to, are not in the same tree, right?

Following another turn-off in my frantic search, I discovered this interesting thread  and thought I had reached the end of my journey for good. But that method is also only working for pages in the same tree like Soma patiently explains.

I desparately need dependent selects for pages with different parents and hope that one day some more light will be shed on the matter for that my and my fellow travellers restless expedition will finally come to a happy ending.

[LostKobrakai]

Yep it's only built for FormBuilder to have a simple option for inputs like "Country > City > Address" selection, built from a single tree. Thought it maybe helps.

[gebeer]

Thank you for confirming.

[SteveB]

I desparately need dependent selects for pages with different parents

Maybe my coffee hasn't kicked in but what's the use/case for that? Without nested parenting of the pages how is the UI supposed to "know" what to fill the next level select with?

[gebeer]

@SteveB

Maybe my coffee hasn't kicked in but what's the use/case for that?

My use case:

1. parent countries with list of all countries

2. parent destinations, each destination gets assigned one country through "countries" pages asm select field.

3. parent tours, each tour gets assigned 1 or more countries through "countries" field and 1 or more destinations from "destinations" pages asm select field

In tours form, when countries are selected I want to filter the destinations field to only show destinations of the previously chosen countries.

Destinations cannot live under countries because I need them under one parent where the user can add destinations easily without having to drill through the 249 available countries and search for the right one where they want to add their destinations under.

Without nested parenting of the pages how is the UI supposed to "know" what to fill the next level select with?

What I think would work in theory:

An inputfield type that lets you define which select fields in a template depend on each other and what the hierarchy of those fields is. This inputfield type adds the JS logic to the template form that will get the option values for the dependent select fields via AJAX call and fills them. The PHP of the inputfield type holds the logic to retrieve the right pages for the AJAX request.

I switched over to PW from Joomla/Seblod and they have a fieldtype called "Select Dynamic Cascade" that does just that.

Ryan writes in his thread about Select Multiple Transfer module that he used dependent selects for the video demo:
 

Note that this video is showing this module in combination with field dependencies and dependent selects (something else brewing for 2.4 but not yet committed to dev

So the fieldtype that I am looking for seems to exist somewhere but I can't find it. I already asked in that thread but got no answer so far.

[kongondo]

Is this what you are looking for? https://processwire.com/api/selectors/inputfield-dependencies/

[gebeer]

@kongondo

Thank you for pointing me to that one. But it doesn't do what I need and what Ryan is demonstrating in his introduction video to Select Multiple Transfer module: one select field that gets filled based on the previously selected option in another select field. I just posted about this in Wishlist&Roadmap. Maybe we better continue there because I think this is kind of going beyond the scope of this thread?

[SteveB]

Got it. A solution like mine above, using jQuery and the Service Pages module, should work just as well for what you're doing. You'd just change the query string (url) that's sent to Service Pages so it selects pages based on that asm select field you are using to tie, for instance, destinations to countries. Conceptually it's the same as using the parent/child relationship.