Cascading editors (options based on previous property?) #202
-
|
For one client, we are having the requirement to have a property editor with data based on another property. As example, two properties:
Each product has multiple variants. So if a product is selected in the product picker, it should only show the variants of that given product. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
Hi @patrickdemooij9 - do you mean that the 2 properties are on the same doctype? So (just to clarify in my mind), you want to pick the first value and it populate the items of the second? It's not possible using Data List, as all of the items are pre-loaded in on the initial request - so no fetches or watchers on in AngularJS. However, there is an internal (undocumented) editor called Cascading DropdownList that I use to populate the values of the Enum data-source, (where you pick an assembly, then it shows you a list of all the enums in that assembly). But it's not available as its own property-editor, e.g. selectable from the Data Types. If you wanted to hack up your own custom property-editor for it, then the idea is that each dropdown will call its own Web API endpoint. You can send a string array of URLs in the config... see here: https://github.com/leekelleher/umbraco-contentment/blob/3.1.0/src/Umbraco.Community.Contentment/DataEditors/CascadingDropdownList/cascading-dropdown-list.js#L20 An example from the Enum data-source is here: https://github.com/leekelleher/umbraco-contentment/blob/3.1.0/src/Umbraco.Community.Contentment/DataEditors/DataList/DataSources/EnumDataListSource.cs#L69-L84 I do have plans to make this a fully-featured property-editor, already prototyped it, so different picker editors can be used, but ran into complications with multi-pickers, so ended up putting the idea on the backburner for now. Hopefully I'll come back to it soon. Until then, feel free to hack away! |
Beta Was this translation helpful? Give feedback.
-
|
Hi @leekelleher, indeed 2 properties on the same doctype. I was quite sure that it wasn't possible with DataList, but maybe there was a magic method that I couldn't find. But thanks for the Cascading DropdownList, I'll see what I can do with that! |
Beta Was this translation helpful? Give feedback.
Hi @patrickdemooij9 - do you mean that the 2 properties are on the same doctype? So (just to clarify in my mind), you want to pick the first value and it populate the items of the second?
It's not possible using Data List, as all of the items are pre-loaded in on the initial request - so no fetches or watchers on in AngularJS.
However, there is an internal (undocumented) editor called Cascading DropdownList that I use to populate the values of the Enum data-source, (where you pick an assembly, then it shows you a list of all the enums in that assembly). But it's not available as its own property-editor, e.g. selectable from the Data Types.
If you wanted to hack up your own custom property…