Scroll to a specific point in a ViewBox

[besttech]

I have converted a UX that shows a lot of information about a customer. Each customer has different information and the size of data can very quite a bit. There are also different sections in the data, so to enable the user to get to the section they want I have a Button List in the Control Bar that will take them to that section immediately by scrolling to the section. I was using List controls and regular controls with repeating sections and the UX became very heavy and slow to load. I converted it to some ViewBoxes and it became very fast. I have a problem with the the Button List now however because I can't figure out a way to scroll to a specific area in the ViewBox as there is nothing to point to. If all the data was always the same size I could just use a function that would scroll down a pre specified space but as I said each customer is different. I could also turn each section into its own ViewBox and then be able to scroll to that ViewBox but then I am afraid I lose a lot of the speed and efficiency. Any ideas of some way of making this work.

Thanks
David

[CharlesParker]

So the question is, what is the specific area? What is it about it that defines it? I think you have to start there to define it first then maybe it can be done...

[besttech]

Here is some of the HTML that is part of the ViewBox. I have highlighted in red the points in the HTML that I would like to be able to scroll to.

{*if references}
<div class="section">
[COLOR=#e74c3c]<p><strong>References</strong><br></p>[/COLOR]
<table id="main-table">
<tr>
<td class="td-label">References:</td>
<td class="td-data">{references}</td>
</tr>
</table>
</div>
{*else}{*endif}

<div class="section">
[COLOR=#e74c3c]<p><strong>Parents/Siblings Information</strong><br></p>[/COLOR]
<table id="main-table">
{*if parents_status}<tr>
<td class="td-label">Parents Marital Status:</td>
<td class="td-data">{parents_status}</td>
</tr>{*else}{*endif}
{*if parents_note}<tr>
<td class="td-label">Parents Note:</td>
<td class="td-data">{parents_note}</td>
</tr>{*else}{*endif}
{*if sibling_note}<tr>
<td class="td-label">Sibling Information:</td>
<td class="td-data">{sibling_note}</td>
</tr>{*else}{*endif}
</table>
</div>

{*if marital_status != 'Single' && marital_status != 'Widowed but no children'}
<div class="section">
[COLOR=#e74c3c]<p><strong>Previous Marriage/Engagement</strong><br></p>[/COLOR]
<table id="main-table">
{*if ex_name}<tr>
<td class="td-label">Ex's Name:</td>
<td class="td-data">{ex_name}</td>
</tr>{*else}{*endif}
</div>
{*else}{*endif}

<div class="section">
[COLOR=#e74c3c]<p><strong>Address</strong><br></p>[/COLOR]
<table id="main-table">
{*if address_line1}<tr>
<td class="td-label">Address Line 1:</td>
<td class="td-data">{address_line1}</td>
</tr>{*else}{*endif}
{*if address_line2}<tr>
<td class="td-label">Address Line 2:</td>
<td class="td-data">{address_line2}</td>
</tr>{*else}{*endif}
{*if city}<tr>
<td class="td-label">City:</td>
<td class="td-data">{city}</td>
</tr>{*else}{*endif}
{*if state}<tr>
<td class="td-label">state:</td>
<td class="td-data">{state}</td>
</tr>{*else}{*endif}
{*if zip}<tr>
<td class="td-label">Zip Code:</td>
<td class="td-data">{zip}</td>
</tr>{*else}{*endif}
{*if country}<tr>
<td class="td-label">Country:</td>
<td class="td-data">{country}</td>
</tr>{*else}{*endif}
</table>
</div>

[peteconway]

This video will show you how to do what you want. The component is attached. Pete

https://www.screencast.com/t/AmjXBbF23EbL

[CharlesParker]

Nice job pete! Thanks for taking the time to put that together - very helpful!

[peteconway]

[Lance Gurd]

Nice one Pete

[peteconway]

You know what, the VB is the single most commercial control in the entire AA system, and they don't even know it.

[besttech]

Thank you Pete for spending the time to put together a video and a sample ux. I tried to get it to go with my ViewBox but no luck, then I realized that the scrollToItem function only works if the item is bigger then its allowed size. But for me I allow the ViewBox to grow to whatever size it needs and the page is being scrolled. In you sample UX if the change the height on the Scroll ViewBox from 200px to blank it breaks the scroll function.

Any idea for a workaround?

Thanks

[peteconway]

Sorry mate, no - if its visible then it's available to do something with - you may want to re-think what you are doing like add coloring to sections or have two Viewbox's one with the sections and one with the data in bulk, then display the required data by filtering based on the sections VB.

Pete