Keen v3 - Stepper improvement
Hi,
I'd want to suggest an improvement to Steppers.
As cited in the docs, Stepper should have navigation buttons inside the <form>.
This causes a problem in Steppers with long content (eg tables with many rows), since the buttons are not immediately and always visible, unless users scroll to end of content.
A solution would be to put the buttons in a .modal-footer, but this way the Stepper's css that hides the unnecessary buttons won't work anymore (eg. the "submit" action button appears in the first step, and so the "previous" one).
Adding support for this case would be awesome (and would reflect better the old keen v2 wizards).
Replies (21)
Hi,
Have you had a chance to try the updated version of KTStepper we provided? If you need any further changes, please let us know, and we will do our best to implement them as soon as possible.
Again, I apologize for the delay with the promised updates. I fully understand that migrating from Keen to a new template requires your time and effort. Let us assist you further so you can use the KTStepper component comfortably.
Regarding the removed reply you mentioned in previous communications, it may have been a technical issue that caused the reply to be purged. We do not intentionally remove replies unless they are spam. All removed replies are visible in our admin panel and can be restored anytime. I checked and found no records of a removed reply within your requests.
Regards.
Sean
Hi Sean,
I hadn't had a chance to try it out.
This week I have to release an important update, so testing out something I have been discussing for 9 months is one of my last problems.
Probably on Friday I will be able to try it out before releasing the update and let you know.
Hi,
Noted, I will be on standby and will assist if anything is needed from our side. All the best with your release.
Regards,
Sean
Hi,
Can you please try this version?
https://gist.github.com/keen333/b53bfe5a78e5c3e2f766ee126ffdabf3
You can replace it with your current stepper.js and recompile the assets.
Thenuse data-kt-stepper-submit="true" attribute with the data-kt-stepper="true" attribute to enable the form submit event:
var stepperEl = document.querySelector("#kt_stepper_example");
var stepper = new KTStepper(stepperEl);
stepper.on("kt.stepper.submit", function() {
// console.log("kt.stepper.next event is fired");
});If this will work for you we will include it in the next official update of Keen.
Looking forward for your feedback.
Regards,
Seen
Hi Sean,
I have tried the changes applied inside the stepper.js file.
If I place the data-kt-stepper and data-kt-stepper-submit on an element with
<div class="stepper stepper-pills"></div>A question that naturally has come to my mind is why bind this feature to the presence of the attribute above? If submit is delegated to the click event of the button, there should be no difference If I use the stepper event or button event. At worse, there would be an event (stepper-event) that is there by default but doing nothing.
If that's all, we can (finally! 9 months for 3/4 lines of code....) close this topic.
What is missing is only an example of stepper with multiple forms.
I will send some considerations about this case via mail , so that I can send you some example files.
Send me an email to which I can reply, thanks
Thanks
Regards
HI D R,
I got your point. Let us revise the code and test it without data-kt-stepper-submit additional option. If that works for other user's cases (custom submit event) then we will implement it as per your suggestion.
Sure, if you send more requirements for the multiple forms usage we will implement it asap.
Yes, I agree, the workaround wasn't as complicated as it initially seemed. The delay was primarily due to our focus on other product releases. Since Metronic is our main source of income, it demands nearly 90% of our resources to stay on track. Nonetheless, our goal is to provide equal support to all our customers. I sincerely apologize for the delayed solution and appreciate your understanding.
Anyway, let's work closely and hopefully, all your issues will be settled soon.
Regards
Hi Sean,
I don't know why replies disappeared now.
I will report your last reply here after
"
Hi,
Sorry for the delay. We have been quite busy these months with other projects that generate our main source of income.
Does the workaround solution that we provided work for you? I would suggest using it for the time being.
There is a new version of Bootstrap just released so we will definitely release a new update asap for Keen and we will do our best to add a solution for Stepper with scrollable modal body and action buttons in modal footer.
Regards.
"
Of course, it is not acceptable that I modify my source code for a feature that went missing for no one knows the reason.
To date (this feature request / bug report is 5 months old! , and such fix could have been added easily in the previous release) you have not provided me an estimated release date for the next update.
Regards
Hi,
We are releasing Keen v3.0.7 and your requested feature is implemented.
You can check it here.
Regards,
Sean
Hello Sean,
I have checked quickly with 1 of our steppers and seems to be working.
What about the other request about consistent events (restore the submit event instead of having to manually select the submit button (!)), that I've just found out that went missing when the other messages disappeared?
On 25.08.2023 (Almost 1 year ago!) you wrote "Noted on the kt.stepper.submit suggestion. We will consider it in the next update."
I don't see it among the available events on the docs...
Hi,
Noted, glad to hear that it worked for you.
Regarding the form submit event. We will pass it on for now.
You can use a custom code to submit the form. This gives more freedom to handle the flow programmatically.
Regards.
Hi Sean,
I'm sorry I havent understood if you will add the event or not.
As to what you say, force devs to use the form submit actually limits the way we can handle the stepper (we already discussed this time ago).
The reason is simple: if the "functionality" you provide with the theme is the stepper itself, why should you force users to create single form steppers? I have some steppers which need multiple forms to work. Being forced to use a single form for the whole stepper is, in some cases, just impossible.
Having the possibility to delegate the submit to the stepper (which is the real "container", instead of the form) really gives much more freedom.
This should also make you reason about why the design team just put the whole modal inside the form, to fix the content height issue. Imho (I have tried to figure out your reason, but can hardly come to reasonable ones) is a terrible design.
Instead of helping us being productive, all these little things (stepper, no more outlined checkboxes (remember?) , .. ) prevent us from doing more.
Please ,let me know if you will add the event, and if you will consider to improve the design of the stepper.
Thanks
Hi,
Thanks for your feedback.
This is a stepper component and by right it should handle the sections for steps.
Excluding the submit event from the core stepper logic was suggested by multiple users so we decided to go by this way.
The form submission is a feature that everyone utilizes differently.
The current approach gives more control in validating their forms as you need and decide when to submit the form.
Adding the submit event for the entire stepper limits the flexibility.
Can you please confirm if you now can technically submit the form after validation? If it works well then I think that should be fine since other users prefer the current solution.
Regarding the modal example with scrollable content, I thought it worked well for you as per your previous reply.
Now you are asking something else. We may consider an example with multiple forms in steps. However this is a rate case for most of the users, but we can consider it and demonstrate how our stepper component can be customized for such cases.
Regards.
Sean,
a new update has been released and still I am waiting for your example for steppers with multiple forms.
Furthermore you still haven't given me valid reasons for removing the submit from the steppers' events (and no I refuse to believe your "it was suggested by multiple users" since I am the only one pointing this out in the forum! Or is everyone writing you emails, making this forum useless? And still, as paying customer I need this functionality for my product which you removed without notice even in the changelog! How can you consider serious a company that works like this?
Furthermore, are you saying that you remove features because other customers tell you so ?because if so I expect it to come back, since I am suggesting you the opposite (but contrary to you, I am providing technical and logical aspect you failed to provide)
But most of all, do you know this post is 9 months old???
What have you accomplished delaying, denying and lying all this time? Wasn't it better to just restore the feature and let your customers choose what to use depending on their needs??
In all honesty, do you consider this a good example of customer support ?
Now, how much time should I wait again before I get an example of a stepper with multiple forms?
I am kinda tired of dealing with such incompetent people.
I have retrieved the messages you have deleted of this post and will definitely review, make posts in FE forums, reddit, medium ecc on what is a bad example of customer support.
Failing again in providing what I need will force our team to remove keen themes from our projects and look for other alternatives
Sorry but this joke and way of dealing with your customer has to come to an end.
Let me know
Regards
Hi,
Apologies for the delay with the above features.
Ongoing changes and improvements are normal in HTML template development and following everyone's direction and requirements is not easy.
As per our recent reply, we do not see any technical limitations with the current version of KTStepper as it can fully handle multiple form submissions. If this change is critical for you let us think and implement it as an optional feature so you can use it.
If you explain your requirements in detail we can provide you a working code based on the current version of KTStepper.
if you need the old submit event badly we can try to incorporate it. Possible to send us your old code that used the submit event ? Or provide us further info so we extend the current KTStepper to cater to your requirements without breaking the current functionality of the component.
We will try to find a solution and make it work as per your requirements.
Regards.
Hi,
Thank you for the great suggestion. Noted, we added this to our todo list and we will consider implementing it asap.
Regards.
