Getting value of page reference field within another page reference field

[999design]

Hello

I'm trying to use the selector string within a page reference field to show specific results based on a selection within another page reference field.

Within my template the first page reference field (select_theme_a) allows you to select a theme from a pre-determined list of colours set as pages within the tree.

The options are just pulled from configuration pages within the page tree.

Taking the White theme for example, its page contains a page reference field (select_theme_highlight_colour_options) that allows you to select suitable highlight colours that can be applied within that theme.

Once I've selected the correct theme to use I was hoping to show only the allowed selections within the second select below. I'm just trying to limit the user from having the option to use colour combinations that don't work well together for our design.

However, I can't ever seem to get the second select to show anything beyond the white colour.

Here's the selector string I'm using for the second page reference field. As you can see it's getting as far as "id=page.select_theme_a..." but doesn't seem to be able to access the checked values from the field "select_theme_highlight_colour_options".

Am I just being really stupid and missing something here (probably!) or does anyone have any tricks up their sleeve that would help me? I'm guessing that it can't go beyond the initial page reference field (select_theme_a) that is on the page?

Any pointers would be much appreciated.

Thanks in advance for your time ?

[elabx]

Not sure sure this can be achieved only with the configuration fields.

My first idea is using the Custom PHP code option of the Page field, where you can hook into InputfieldPage::getSelectablePages, then after you have selected the Theme options and saved the page, you can use this hook on the Highlight Color options to get only the colors available through the specific theme previously selected. Check the field's option to view an example. Alas, this might not be the most "intuitive"

There is also the Dynamic Selects option which most likely will provide the best interface (without having to do the page save)

[999design]

Thanks @elabx

I know what you mean about the page refresh and being intuitive. I was hoping to avoid a page refresh if possible.

I recently purchased the Dynamic Selects module and this certainly does solve the issue if I only have one set of choices based on the theme chosen in the first select eg. Highlight Colour.

However I'm finding that if I want to have more than one set of choices mapped to the first select (such as 'Text Colour', 'Icon colour' etc etc) I haven't figured out a way to achieve that with Dynamic Selects (yet). I logged my thoughts earlier here.

I was thinking that with the solution in my first post here that I would then be able to add additional options under the theme like below (Highlight Colour, Text Colour, anything else that applies etc) and be able to target them separately.

Also, I may have a scenario where I have a block/component that has the main theme set, but inside of that I have a repeater where each element can have one of the allowed highlight colours. In that scenario I need the two fields split up.

As Dynamic Select is one field I can't split the theme part for the block up from the highlight colour on the individual repeater items lower down.

With the approach in my first post I noticed that the second highlight colour field updates whether it is next to the theme select or inside the repeater so I thought that could have been a bit of a win, like below (but with correct option showing within the repeater).

Maybe my only option here is to go with separate page reference fields, using a hook like you mentioned and just accepting that a page refresh is needed after selecting an option from the first dropdown. There's the chance that the user could switch the first select (theme) to something else though after selecting an option from the second select (highlight colour).

Tricky stuff eh...

[elabx]

Something I remember trying too, but don't recall if it worked, is adding some Js to the admin to dynamically add the options after an ajax call literally editing the markup. If you're working on recent PW version I'm going it should be straightforward with the new URL hooks. So: Listen to on change event on the theme fiel, call backend with picked value, and do some js work to generate the options for the field and append them to the highlight colors select.

Maybe something like this will work better for the scenario where you wan't to use repeaters, although I guess it will involve more work to handle the creation of new repeaters, but I am almost sure there are js events for that.

Another idea that I also don't remember if it worked is, using the reload method on the inputfield.js API. So maybe then you just have to listen to the on change on the first field, and trigger reload? Maybe that'll  load the field again with the right options?  

[999design]

Thanks for your help and suggestions @elabx

I'd need to check with my team regarding the JS options you mentioned as that isn't my strong point. I wasn't aware of the reload method you mentioned - that certainly looks promising too.

[wbmnfktr]

Not sure but maybe @Jonathan Lahijani or @bernhard have an idea here.

[kongondo]

Other options to consider

1. Custom inputfield
2. One of the runtimemarkup modules

I'd use htmx with any of the above. Vanilla JavaScript would also work but htmx would give you maximum control over the markup with very minimal effort. With this combo, you could go as fancy as you like (locking edits for some roles, showing preview of colour combos, etc.).