In a mobile app I have a page with an embedded wizard so that the page content consists of:
1. A header section with fixed fields that must be input/picked
2. A 'wizard' section that displays a dynamic list of (weblocks) questions for answers
this section can display a dynamic (n) number of times and each time could have a different length list.
each time the section and questions are retrieved from the database
3. A Footer section that displays some final fields and submission button
At the moment as you navigate back and forth in the wizard the previous/next section displays at the relative position of the section the user is coming from i.e. it could be at the top, bottom or anywhare in between.
I would like to be able to go back to the top of the section being navigated to i.e. not the top of the page as its basically all on one page, just displaying different sections based on logic.
Does anyone have a good technique for doing this?
Thanks
Keith
Hi Keith,
I had the same issue .
You need to add the jQuery dependency and in the screen set the Required Scripts.
Please check the print screens:
Cheers,
Renato
Keith Matthews wrote:
Hi Renato,
Thanks for that I have replicated your code but for some reason am getting a $ is not defined which suggest jQuery may not be loading correctly, so I am tryiong to fix that.
Your example is not exactly what I want as the mid section is dynamically generated and refreshed so its going to be a case of where to execute the client action, but once I get the example working I should be able to figure the rest out.
I did a test with "plain old HTML" using anchors and JS and it seams to work:
Screenshots of my prototype:
1. Add a "HTML Element" per section
2. The element is just a plain anchor
3. Add buttons that call a client action
4. The action scrolls using javascript / JQuery:
I hope it helps!
Renato Torres wrote:
Hi,
Thanks, Now how can we do this for list in screen? Assume I have list of 20 records. When redirecting, i need to show 13th record.
regards,
Naveen
Perfect timing, the example works now - so thanks for that - now back to the real problem.
I'm glad I could help!
I would just like to add that if you do not need the jQuery library for anything else, the same functionality can be achieved with:
document.getElementById($parameters.anchorName).scrollIntoView();
This way you avoid having another library that is loaded into your app, which in mobile apps can be a big issue.
José
Hi José
Thanks you for that also I got both solutions to work in the actual app once I figured out exactly where to put the tag and the call, excellent!
Unfortunately I can only mark one as a solution.
Regards
José,
Does this also work with an element of a list? It don't clearly. Anyone has an idea for this?
Martin Rozeboom wrote:
ContainerId's are uniquely made by outsystems, so it's possible to point to a container (with multiple instances) within a list
Hi Martin,
Find the attachment, its working for list also.
I have tried above example (I have tried many but no luck) with the use of the anchors in my mobile app but unfortanely it's not working.
I need to scroll to a specific part on my screen, the user chooses extra information and it's being added on the screen but the user cannot see it when his mobile screen is too small so I would like to scroll down (under the barcode) so the user can see the newly added part.
I have logged my question in a new ticket https://www.outsystems.com/forums/discussion/54255/mobile-go-to-position-part-2/#Post203802
Hi All,
I used this way in list, but i get this error. Cannot read property 'scrollIntoView' of null. Anybody help me in this.