Hi, I have a detail screen which has multiple containers on it, each container is a step in a form - all writing to different columns within the same row of the current detail screen. The containers are visible depending on whether that step in the form has data added or not, so they can’t press the “next” button without completing the data. The next button just moves the visibility to the next container and hides the previous one.
Some of the content in the containers have long text explanations, requiring them to scroll down the page. When they click “next” and move between the containers the page stays where it is (due to the long text explanation) and does not scroll to the top. How do I force the page to scroll to the top while staying on the same detail page?
Seems like a basic user experience to me… Thanks for your help!
I understand what you’re trying to do, but I wonder if a multi-step form will accomplish the same goal and keep the ‘scroll’ at the top of each view as you progress. It was meant for this exact use case. And you can show/hide the visibility of each ‘page’ in the form just like you’re doing with the containers on the single page.
Yea the only problem is design is a key feature of our process and we need a container that has two columns. Sadly multi-step forms are “too ugly” and not customisable for our design needs.
The multi-step form that Glide provides is just an example. There is nothing stopping you creating your own multi-step form with 2, 3 or 4 containers if that’s what you need.
One thing you might consider is using HTML Summary tags inside a Rich Text component for your more lengthy text sections.
This is a cool feature, thank you! I wish it came up with a mouse cursor over the “summary” wording. Still not fully appropriate for my use case as we really need people to read the content. Is there no way to force the page back to top?
You can get that effect with some inline CSS styling.
The way I used to do it with Classic Apps was to have two sets of components, and then use a boolean to toggle the visibility. So you’d have a button that when clicked would cause one set of components to disappear and the other set to appear. This would have the effect of sending the user to the top of the screen. I’ve not tried it with the new Apps, but it should work the same way. It’s just a but cumbersome to setup and maintain, especially if you have lots of components on the screen.
Hmm so it is working to show and hide the containers and bring the user to the top of the screen but only if I add a “wait” action to the button, which is painful cos it makes it appear as though the form is taking time to load even if I put the wait duration to only 0.1 second.
Is there a way to hide the the loading icon that appears for the wait action?
It is but my containers have multiple steps in one. There is 1 image on the left, and text and question on the right. So each container may have 3 form steps in it, to reduce the content on the page it just flicks through the question (1) then (2) then (3) but leaves the image - then moves onto the next container which has a different image and different content.
This is proving cumbersome particularly for mobile screen to get it to reload at the top. Mostly I’ve been working to make sure the content of a large question is followed by a small content question so the page size automatically reduces that way.
If you have a “Step” column to store the value you are incrementing/decrementing, wouldn’t it work so that all containers pertaining to a step isn’t visible in other steps, and would that effectively force the screen to go back to the top? Or is it not the case?
Can you show us how you are structuring your containers?
Yea that’s what I’ve done but if the content you are showing and then hiding is in the same container it doesn’t minimise the screen size if the container content changes, it stays in the same place (if the content is long enough)
I mean you can break it down to multiple containers per step, and different steps would have different containers if needed. If you show/hide all the containers based on the “Step” value would it be different?
I have a column called “Major step” which controls whether containers are shown or not. Each major step has it’s own container. Even though it is flicking between containers it is still not forcing the screen to the top of the page. I have gotten over this by having a multi step action when they click the Next button.
Actions:
Show detail screen
Set column values (with values to show next container)
The “show detail screen” forces the screen to seem like its reloading and go to the top. It works in my instance because I am using a detail screen for this entire form. Not perfectly ideal but works the best for my requirements atm.
If anyone else wants to replicate this idea… basically I have a page with a button with action “Show new form screen”. The new form screen appears as an overlay and essentially is a lead/contact capture form. Then when they submit the form the “form screen” submit action is “show detail screen” which takes them to the detail page for THIS form entry row. A.k.a their own contact row, then I capture each element of the data in a column for that row.
