I am trying to set up the new Cascader element, but am struggling to get the parent items to work properly. I have attached 2 screenshots, showing the same data source and set up on both a cascader and a navigation element. You can see that the navigation is grouping items properly, but the cascader is not. Am I missing a setting somewhere? Or does the data source need to be set up differently? (And yes, the issue persists if I map into label instead of value on the cascader)
Hi! Do you mind sharing an excerpt of what your data looks like? From what you've shared it does look like it should work, as you've set the Cascader to use option values.
Here is the array of objects being referenced in query12
[
{
"id": 3,
"templateName": "Chevrolet",
"templateType": "Manufacturer",
"mastheadUrl": null,
"vehicleOfferMastheadUrl": null,
"featuredVehicleMastheadUrl": null,
"serviceOfferMastheadUrl": null,
"primaryColor": null,
"secondaryColor": null,
"ctaColor": null,
"ctaRadius": null,
"canvasColor": null,
"offerBackgroundColor": null
},
{
"id": 2,
"templateName": "Happy Spring Event",
"templateType": "Octane Event Creative",
"mastheadUrl": null,
"vehicleOfferMastheadUrl": null,
"featuredVehicleMastheadUrl": null,
"serviceOfferMastheadUrl": null,
"primaryColor": null,
"secondaryColor": null,
"ctaColor": null,
"ctaRadius": "0",
"canvasColor": null,
"offerBackgroundColor": null
},
{
"id": 5,
"templateName": "Happy Spring Sale",
"templateType": "Octane Event Creative",
"mastheadUrl": null,
"vehicleOfferMastheadUrl": null,
"featuredVehicleMastheadUrl": null,
"serviceOfferMastheadUrl": null,
"primaryColor": null,
"secondaryColor": null,
"ctaColor": null,
"ctaRadius": null,
"canvasColor": null,
"offerBackgroundColor": null
},
{
"id": 6,
"templateName": "Nissan",
"templateType": "Manufacturer",
"mastheadUrl": null,
"vehicleOfferMastheadUrl": null,
"featuredVehicleMastheadUrl": null,
"serviceOfferMastheadUrl": null,
"primaryColor": null,
"secondaryColor": null,
"ctaColor": null,
"ctaRadius": null,
"canvasColor": null,
"offerBackgroundColor": null
},
{
"id": 7,
"templateName": "Toyota",
"templateType": "Manufacturer",
"mastheadUrl": null,
"vehicleOfferMastheadUrl": null,
"featuredVehicleMastheadUrl": null,
"serviceOfferMastheadUrl": null,
"primaryColor": null,
"secondaryColor": null,
"ctaColor": null,
"ctaRadius": null,
"canvasColor": null,
"offerBackgroundColor": null
},
{
"id": 4,
"templateName": "Dealer1",
"templateType": "Parent ID",
"mastheadUrl": null,
"vehicleOfferMastheadUrl": null,
"featuredVehicleMastheadUrl": null,
"serviceOfferMastheadUrl": null,
"primaryColor": null,
"secondaryColor": null,
"ctaColor": null,
"ctaRadius": null,
"canvasColor": null,
"offerBackgroundColor": null
}
]
Hi @octane_dave,
Looks like you are missing some fields in your data. So each of the "parent" objects needs a "value" field that is equivalent to whatever it is being referred to by the child object in {{item.templateType}}. Here is an example:
const jobs = [
{label: 'Engineering', value: 'eng'},
{label: 'Software Developer', value: 'dev', department: 'eng'},
{label: 'QA Tester', value: 'qa', department: 'eng'},
{label: 'Product', value: 'prod', },
{label: 'Product Manager', value: 'pm', department: 'prod'},
];
This will result in two parents: "Engineering" and "Product". The "Engineering" parent will have two children ("Software Developer" and "QA Tester") that both refer back to the parent value with {{item.department}}. The parent's value is "eng", which is what "department" is set to in the children.
So yours would look more like this:
[
{"templateName": "Manufacturer", value: "Manufacturer"},
{
"id": 3,
"templateName": "Chevrolet",
"templateType": "Manufacturer",
"mastheadUrl": null,
"vehicleOfferMastheadUrl": null,
"featuredVehicleMastheadUrl": null,
"serviceOfferMastheadUrl": null,
"primaryColor": null,
"secondaryColor": null,
"ctaColor": null,
"ctaRadius": null,
"canvasColor": null,
"offerBackgroundColor": null,
value:"chevrolet"
},
{"templateName": "Octane Event Creative", value: "Octane Event Creative"},
{
"id": 2,
"templateName": "Happy Spring Event",
"templateType": "Octane Event Creative",
"mastheadUrl": null,
"vehicleOfferMastheadUrl": null,
"featuredVehicleMastheadUrl": null,
"serviceOfferMastheadUrl": null,
"primaryColor": null,
"secondaryColor": null,
"ctaColor": null,
"ctaRadius": "0",
"canvasColor": null,
"offerBackgroundColor": null,
value: "happy spring event"
},
{
"id": 5,
"templateName": "Happy Spring Sale",
"templateType": "Octane Event Creative",
"mastheadUrl": null,
"vehicleOfferMastheadUrl": null,
"featuredVehicleMastheadUrl": null,
"serviceOfferMastheadUrl": null,
"primaryColor": null,
"secondaryColor": null,
"ctaColor": null,
"ctaRadius": null,
"canvasColor": null,
"offerBackgroundColor": null,
value: "happy spring sale"
},
{
"id": 6,
"templateName": "Nissan",
"templateType": "Manufacturer",
"mastheadUrl": null,
"vehicleOfferMastheadUrl": null,
"featuredVehicleMastheadUrl": null,
"serviceOfferMastheadUrl": null,
"primaryColor": null,
"secondaryColor": null,
"ctaColor": null,
"ctaRadius": null,
"canvasColor": null,
"offerBackgroundColor": null,
value: "nissan"
},
{
"id": 7,
"templateName": "Toyota",
"templateType": "Manufacturer",
"mastheadUrl": null,
"vehicleOfferMastheadUrl": null,
"featuredVehicleMastheadUrl": null,
"serviceOfferMastheadUrl": null,
"primaryColor": null,
"secondaryColor": null,
"ctaColor": null,
"ctaRadius": null,
"canvasColor": null,
"offerBackgroundColor": null,
value:"toyota"
}
]
Is this what you want it to look like?
1 Like
Ah, ok, got it. I see the difference. I was a little confused with that in the original documentation and figured the data structure should work the same between this element and the navigation element. I can make that adjustment and get it going.
And yes, that is how I was hoping to have the output look.
Thank you!
1 Like
Sorry, one more question, does this element not support selectedItem?
@octane_dave,
The Cascade component does not have a selectedItem property, but it does have a "value" property which gives the value of the selected item.