Nested Select in panel

Im scratching my head trying to come up with this. I’m building a site that is centred around podcasts and i need a way to choose iTunes topics and sub topics to properly populate the itunes xml feed.

The xml looks like this:

<itunes:category text="Health">
   <itunes:category text="Fitness & Nutrition"/>
</itunes:category>

Whats the best way to do that? All i can think of is two select fields side by side so the selection of the first drop down populates the matching list of sub topics in the second. I have no idea how to actually do it.

Any ideas? I looked through plugins but cant see anything that allows this.

For reference the full set of topics:subtopics looks like this.

The first thing that comes to mind is the field toggle field, but it is a radio field, not a select and it would require different fields, not one. So not really ideal.

Another option would be a single select, that contains the options like this:

options:
 option1: Health: Fitness & Nutrition
 option2: Health: Whatever

You’d need some category mapping:

c::set('options', [
'option1' => [
  'category' => 'Health',
  'subcategory' => 'Fitness'
 ]
]);

And the idea you already had yourself with the two selects, but that would require some coding on your part.

Thanks for the thoughts. Maybe a single select is the cleanest way to go. Do i need to do anything to connect the options in the config to the field or is it smart enough to just pick it up? i skimmed the docs for the select field and couldnt see any mention of being able to set the values in the config. Can you clarify a bit more please?

See this thread, keyword category map. The select field stores a key, so you need a way to map a value to that key. In the more elaborate version of this category map I sugested above, you would be able to pull both a category and a subcategory from a selected option.

That seems to be for the front end. I need this in the panel. Am i missing something?

Edit: ah yes i did… missed the field method.

Thanks.

Hmm ok so i have setup a blueprint for the values but it doesn’t seem to like option groups. Shouldn’t this work? The only options i can see in the panel are the ones with one level like Option7: Kids & Family. All others are blank.

type: group
fields:
  category:
    label: Category
    type: select
    options:
      Option1: Arts
        - Design
        - Fashion & Beauty
        - Food
        - Literature
        - Performing Arts
        - Visual Arts
      Option2: Business
        - Business News
        - Careers
        - Investing
        - Management & Marketing
        - Shopping
      Option3: Education
        - Educational Technology
        - Higher Education
        - K-12
        - Language Courses
        - Training
      Option4: Games & Hobbies
        - Automotive
        - Aviation
        - Hobbies
        - Other Games
        - Video Games
      Option5: Government & Organizations
        - Local
        - National
        - Non-Profit
        - Regional
      Option6: Health
        - Alternative Health
        - Fitness & Nutrition
        - Self-Help
        - Sexuality
      Option7: Kids & Family
      Option8: Music
      Option9: News & Politics
      Option10: Religion & Spirituality
        - Buddhism
        - Christianity
        - Hinduism
        - Islam
        - Judaism
        - Other
        - Spirituality
      Option11: Science & Medicine
        - Medicine
        - Natural Sciences
        - Social Sciences
      Option12: Society & Culture
        - History
        - Personal Journals
        - Philosophy
        - Places & Travel
      Option13: Sports & Recreation
        - Amateur
        - College & High School
        - Outdoor
        - Professional
      Option14: Technology
        - Gadgets
        - Tech News
        - Podcasting
        - Software How-To

I have also setup the config like so:

c::set('itunesOptions', [
  'option1' => [
    'category' => 'Arts',
    'subcategory' => 'Fitness',
    'subcategory' => 'Design',
    'subcategory' => 'Fashion & Beauty',
    'subcategory' => 'Food',
    'subcategory' => 'Literature',
    'subcategory' => 'Performing Arts',
    'subcategory' => 'Visual Arts',
  ],
  'option2' => [
    'category' => 'Business',
    'subcategory' => 'Business News',
    'subcategory' => 'Careers',
    'subcategory' => 'Investing',
    'subcategory' => 'Management & Marketing',
    'subcategory' => 'Shopping',
  ],
  'option3' => [
    'category' => 'Education',
    'subcategory' => 'Educational Technology',
    'subcategory' => 'Higher Education',
    'subcategory' => 'K-12',
    'subcategory' => 'Language Courses',
    'subcategory' => 'Training',
  ],
  'option4' => [
    'category' => 'Games & Hobbies',
    'subcategory' => 'Automotive',
    'subcategory' => 'Aviation',
    'subcategory' => 'Hobbies',
    'subcategory' => 'Other Games',
    'subcategory' => 'Video Games',
  ],
  'option5' => [
    'category' => 'Government & Organizations',
    'subcategory' => 'Local',
    'subcategory' => 'National',
    'subcategory' => 'Non-Profit',
    'subcategory' => 'Regional',
  ],
  'option6' => [
    'category' => 'Health',
    'subcategory' => 'Alternative Health',
    'subcategory' => 'Fitness & Nutrition',
    'subcategory' => 'Self-Help',
    'subcategory' => 'Sexuality',
  ],
  'option7' => [
    'category' => 'Kids & Family',
  ],
  'option8' => [
    'category' => 'Music',
  ],
  'option9' => [
    'category' => 'News & Politics',
  ],
  'option10' => [
    'category' => 'Religion & Spirituality',
    'subcategory' => 'Buddhism',
    'subcategory' => 'Christianity',
    'subcategory' => 'Hinduism',
    'subcategory' => 'Islam',
    'subcategory' => 'Judaism',
    'subcategory' => 'Other',
    'subcategory' => 'Spirituality',
  ],
  'option11' => [
    'category' => 'Science & Medicine',
    'subcategory' => 'Medicine',
    'subcategory' => 'Natural Sciences',
    'subcategory' => 'Social Science',
  ],
  'option12' => [
    'category' => 'Society & Culture',
    'subcategory' => 'History',
    'subcategory' => 'Personal Journals',
    'subcategory' => 'Philosophy',
    'subcategory' => 'Places & Travel',
  ],
  'option13' => [
    'category' => 'Sports & Recreation',
    'subcategory' => 'Gadgets',
    'subcategory' => 'Tech News',
    'subcategory' => 'Podcasting',
    'subcategory' => 'Software How-To',
  ],
]);

I am still a bit confused how to connect the two together and get seperate values out in front end. I have set the field method up as well but not tried to use it yet.

No, that is not possible. I already outlined how to set up the options above, the options must be flat.

fields:
  category:
  type: select
  options:
   option1: Health: Fitness & Nutrition
   option2: Health: Alternative Health
   option3: Arts: Fitness
   option4: Arts: Design
   option5: Arts: Bla bla

This will then save, for example, option1 in your content file. Each option must be a combination of one category and one subcategory.

Then you fetch the category and subcategory from the itunesOptions array via c::get().

$categories = c::get('itunesOptions');

// category for option 1
$category = $categories['option1']['category'];
$subCategory = $categories['option1']['subcategory'];

Edit:
Of course, instead of hardcoding option1 as array key, you would get the name of the key from your category field ($page->category()->value()).

The itunesOptions array has to look differently as well, as I already outlined above. Each option needs one category and one subcategory key. What you have above, with the same subcategory key used multiple times, doesn’t make sense. How do you want to fetch the value by key if you reuse the same key?

If you don’t want to type all the options out, you could try and use that json array you linked to above and create a list of options from it, which you could then use as dynamic options via a JSON API.

I did try to feed this in initially to populate the select options, but it didn’t work, i’m not sure why. I did not get a whoops, just an empty select field in the panel. Im guessing because it wasnt flat. i tried the short, single level json example in the docs and that did work.

The end result just needs to be this:

<itunes:category text="Health"> // category
   <itunes:category text="Fitness & Nutrition"/> // sub category
</itunes:category>

I just need a way (anyway at all) to allow selection of a category and then a subcategory if present (some of the options do not have sub categories).

I picked on select fields because that seemed to me to be the most useful way for a client to make a choice.

Any other ideas? Perhaps i need to make myself a plugin.

I think after a bit research, this is going to take a lot of work. I think for speed I will use the field toggle plugin to have radios the for the categories and toggle a select field for the subcategories. I was trying to keep the amount of fields in the panel to a minimum but i think I will just have to go with this compromise right now.

Another option would be to use subpages with different blueprints for each main category. Then that would leave you with only one select for the subcategory per page.

But what I outlined above does work.