I am wishing to use the Stepper component, where I have a Create and an Edit form (which share the same basic form), but one step is only valid during Edit, and not during Create.
Is there any way to mark a Step as hidden/not in use, without having to have two separate arrays of Steps, one with and one without the step I want to hide?
Hi, Garry.
You can use an approach similar to the one demonstrated in this StackBlitz example. In the shared project we have the following computed property that depends on the value of editMode:
computed: { items() { return this.editMode ? this.initialItems.filter((el) => el.label !== 'Payment Method') : this.initialItems; }, }I hope the above solution will help you achieve the functionality you need.
Hi Peter, thanks for your quick response.
I see how that might filter the list of Steps available.
But, as value is akin to index of the remaining items, how could that help when I need to do conditional display of other components based upon the value?
In that example, if editMode is false, then the "Preview" step is value/index 3, but if editMode is true, then "Preview" step value/index is 2.
I don't particularly want to perform a lookup up by Label, as this may 1) change, or 2) be modified by i18n, so having a consistent index but be able to conditionally show/hide would be preferred.
I apologise that I neglected to add this requirement to my original post.
Thanks.
Hi, Garry.
Can you please check this StackBlitz example and let me know if it demonstrates what you need in your application?
initialItems: [ { index: 1, label: 'Cart', icon: 'cart' }, { index: 2, label: 'Delivery Address', icon: 'marker-pin-target' }, { index: 3, label: 'Payment Method', icon: 'dollar' }, { index: 4, label: 'Preview', icon: 'preview', optional: true }, { index: 5, label: 'Finish Order', icon: 'track-changes-accept' }, ]In the shared project the initialItems are defined as shared above and the items computed property this time filters by index and not by value:
items() { return this.editMode ? this.initialItems.filter((el) => el.index !== 3) : this.initialItems; }If the shared example is not what you need in your project, please give us more details and I will be happy to help you further.
I see where you're getting at with adding an Index, but it still doesn't solve the underlying issue of determining exactly which step is the current active one, as it's still just returning in value the index of the array of items
This is kind of what I'm looking to do - have a selection of components that I can toggle visibility of, but at some point, I want to hide/skip/ignore/disable whatever word you wish one that's at any position in the flow, based on any parameter.
Please see an amended example below:
<template> <input v-model="editMode" type="checkbox" > Edit Mode</input> <Stepper :value="value" @change="handleChange" :items="items" /> <div v-show="activeIndex == 1">Cart -> Index 1 <div v-for="cartItem in cartItems"> <span>{{cartItem.name}}</span> <span v-if="!cartItem.shipped">- NOT SHIPPED</span> </div> </div> <div v-show="activeIndex == 2"> Delivery Address -> Index 2 <p v-if="noShippingRequired">No Shipping Required, this page should be hidden</p> </div> <div v-show="activeIndex == 3"> Payment Method -> Index 3 <p v-if="editMode">In edit mode, this page should be hidden!</p> </div> <div v-show="activeIndex == 4">Preview -> Index 4</div> <div v-show="activeIndex == 5">Finish Order -> Index 5</div> </template> <script> import { Stepper } from '@progress/kendo-vue-layout'; export default { components: { Stepper }, data() { return { value: 0, editMode: true, initialItems: [ { index: 1, label: 'Cart', icon: 'cart' }, { index: 2, label: 'Delivery Address', icon: 'marker-pin-target', hidden: this.noShippingRequired }, { index: 3, label: 'Payment Method', icon: 'dollar', hidden: this.editMode }, { index: 4, label: 'Preview', icon: 'preview', optional: true }, { index: 5, label: 'Finish Order', icon: 'track-changes-accept' }, ], cartItems: [ { name: "Item 1", shipped: false }, { name: "Item 2", shipped: false } ] }; }, computed: { items() { return this.initialItems.filter((item) => item.hidden !== true ); }, activeIndex() { return this.items[this.value].index; }, noShippingRequired() { return this.cartItems.every((product) => product.shipped == false); } }, methods: { handleChange(e) { this.value = e.value; } }, }; </script>Hi, Garry.
Thank you for the additional details. Before we think about a new approach for the discussed scenario, just to be sure we are on the same page, can you please confirm the following:
Hi Petar,
In this scenario, no, I would wish that Step 3 is completely hidden, so we would only see 4 steps in the component.
I see that the component already supports a Disabled state, where it is shown in the flow but can't be selected - so this may satisfy any future requirement to be able to have one that's visible but disabled, but for this requirement, I need to completely hide from the user the existence of this step based on the specified scenario - in this case, it's a variable, but it could be the result of a function etc, it's unlikely to be hard-coded (else, why wouldn't I just remove it!) :)
Without wanting to sway any potentially better result, my initial thoughts are that if the StepperChangeEvent had some extra information about the new Step, other than just a Value property (which is, essentially, as far as I can tell, just the items' array index), this might help. If, for example, the whole Step was also provided in the event, I could extract the Index property and
Hi, Garry.
Thank you for the constructive feedback. Based on it, I've logged this Feature request on your behalf. I cannot say exactly when the request will be implemented but I would say that it won't take us long to provide the discussed functionality.
You can follow the provided Feedback portal item and once there is a change in its status you will receive a notification.
Please let me know if we can help you with something else related to the current ticket.
Hi Petar,
Yes, thank you, I think that would help with some parts of it.
What about disabling/hiding some steps - is this something that might be planned, or will I need to manually manipulate the Step's items, and then use the (hopefully to be added soon) updated StepperChangeEvent to retrieve the info I need?
Thanks
Hi, Garry.
The Native Stepper already has the option to disable its items. Please check this Steps Types demo and let me know if it demonstrates what you need in your project.
In the above demo, the third step in the Stepper is disabled using the following configuration:
items: [ { label: "Success Step", isValid: true, }, { label: "Error Step", isValid: false, }, { label: "Disabled Step", disabled: true, }, { label: "Optional Step", optional: true, }, ]Sorry, yes, the Optional/disabled is there, but I was talking about Hidden based upon a function/variable - is it possible that this could be added, too. This would save the user having to write their own filter if this was a supported feature :)
It would also go nicely with the expansion of the StepperChangeEvent :)
Hello, Garry.
I've just logged this Feature request on your behalf. Once the request is implemented, the hidden property will be available in the StepperChangeEvent, together with the other step data items. :)