# FlexRepeater, scroll to last instance **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [October 6, 2022, 10:03am UTC](https://forum.inductiveautomation.com/t/flexrepeater-scroll-to-last-instance/64887 "2022-10-06T10:03:36Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![AGOSTINO\_SCLAUZERO](https://avatars.discourse-cdn.com/v4/letter/a/eada6e/32.png) [@AGOSTINO\_SCLAUZERO](https://forum.inductiveautomation.com/u/AGOSTINO_SCLAUZERO)\ **Post date:** [October 6, 2022, 10:03am UTC](https://forum.inductiveautomation.com/t/flexrepeater-scroll-to-last-instance/64887/1 "2022-10-06T10:03:36Z")
I've implemented a data entry that use FlexRepeater in order to present a set of rows. The user can create new rows via an "Add Row" button. It appears like this: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/c/3c4bef1732524128f6c83db33b194c409bd23041.png) Here the user already created two rows. If they add more rows they get regularly created but they go outside visibility and the scrollbar is displayed. Here I added another 3 rows. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/a/0a7516af9613a96bd3969a1306e33874344d15f7.png) I would like that each time a row is added the FlexRepeater scrolls down to the end of the list in order to ensure that that row is visible. Reason Manual scrolling here is impractical since the actual adding is done via a barcode scanner; that would require the user to put down the scanner after each insertion and this would reduce greatly the eficience of the User Interface. ---
**Author:** ![mcgheeiv](https://avatars.discourse-cdn.com/v4/letter/m/71c47a/32.png) [@mcgheeiv](https://forum.inductiveautomation.com/u/mcgheeiv)\ **Post date:** [October 6, 2022, 10:30am UTC](https://forum.inductiveautomation.com/t/flexrepeater-scroll-to-last-instance/64887/2 "2022-10-06T10:30:26Z")
This might help... [Scroll to anchor on button onActionPerformed](https://forum.inductiveautomation.com/t/scroll-to-anchor-on-button-onactionperformed/46333) ---
**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\ **Post date:** [October 6, 2022, 12:11pm UTC](https://forum.inductiveautomation.com/t/flexrepeater-scroll-to-last-instance/64887/3 "2022-10-06T12:11:40Z")
I don't believe there's a good way to set a `domId` on a dynamic component like the Flex Repeater - maybe there is. You can definitely use a selector to style the last child, but whether it can be used as an anchor is a different story... ---
**Author:** ![AGOSTINO\_SCLAUZERO](https://avatars.discourse-cdn.com/v4/letter/a/eada6e/32.png) [@AGOSTINO\_SCLAUZERO](https://forum.inductiveautomation.com/u/AGOSTINO_SCLAUZERO)\ **Post date:** [October 6, 2022, 12:31pm UTC](https://forum.inductiveautomation.com/t/flexrepeater-scroll-to-last-instance/64887/4 "2022-10-06T12:31:50Z")
Ok the core idea seems to work, but there is still some missing piece to accomodate in order for this to work. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/b/eb36cb43176753b7d17f440eef63769e45a4ba82.png) What i did In the row-view, i had a parameter rowIndex that was the one used for assigning each instance a different identifier, infact the label shown in the picture has its text property bound to that parameter. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/4/54d819d38d85b2847f7d1321f27d941f4d43bf0c.png) I just added the meta domId property to the same label and I bound it to the same view parameter. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/d/2d9d1819d8677e1b35029b5c6a08cb2d26d514f9.png) I added a second button to test the function in isolation. The OnActionPerformed for that button is simply: ``` lastInstance = len(self.getSibling(FlexRepeater).props.instances)-1| system.perspective.navigate(url = "#" + str(lastInstance))| ``` **Pressing "Navigate to last" scrolls to the last instance like a charm.** Unfortunately if I add the very same couple of lines of code in the "Add Row" button, it **doesn't work** : the scroll bar is not even moved. I think that this is because navigation happens in the browser when all the page has been rendered. Bindings on the other hand are resolved during the HTML-generation phase and thus before that HTML has been rendered on the client side. So the browser receives a navigation call towards an anchor that has not yet been rendered. To overcome this i tried to: move into down-the line bindings, that is into the OnChange event of the text property of the label. Also here it doesn't work. Is there something like 'rendering complete event'? Obviously as a last resort solution I could try to insert a delay. That would be a real unreliable approach though, so I'd strongly prefer avoiding such solutions. ---
**Author:** ![mcgheeiv](https://avatars.discourse-cdn.com/v4/letter/m/71c47a/32.png) [@mcgheeiv](https://forum.inductiveautomation.com/u/mcgheeiv)\ **Post date:** [October 6, 2022, 1:08pm UTC](https://forum.inductiveautomation.com/t/flexrepeater-scroll-to-last-instance/64887/5 "2022-10-06T13:08:05Z")
Sorry about the rabbit hole... I tried everything you did plus using a message handler. Would it be acceptable to add new items to the beginning of the list instead of the end, then there is no need to scroll. ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [October 6, 2022, 1:09pm UTC](https://forum.inductiveautomation.com/t/flexrepeater-scroll-to-last-instance/64887/6 "2022-10-06T13:09:58Z")
When you attempt this from the add button, is the script being executed in separate event scripts or at the end of the same event script that adds the new instance to the flex repeater? ---
**Author:** ![AGOSTINO\_SCLAUZERO](https://avatars.discourse-cdn.com/v4/letter/a/eada6e/32.png) [@AGOSTINO\_SCLAUZERO](https://forum.inductiveautomation.com/u/AGOSTINO_SCLAUZERO)\ **Post date:** [October 6, 2022, 1:47pm UTC](https://forum.inductiveautomation.com/t/flexrepeater-scroll-to-last-instance/64887/7 "2022-10-06T13:47:29Z")
I'm considering a couple of workarounds here, the first one being to have the rows in reverse order. This requires discussion with the user though because their first request was to have them in chronological order. Obviously, this wouldn't be a solution but rather a change in requirements so that the problem doesn't exsist anymore. **An 'almost' working workaround: a dummy bottom-row with immutable domId** A workaround that I came up with is to have a last dummy line with same domId at all times (in my example is LASTONE). Measures are taken to make it invisible (height = 0). This row does always exist. This happens to work but i find it too complicated, moreover it adds unwanted complexity. **EDIT** A silghtly better solution is to actually _move to last line_ a fixed identifier. This is basically a variation on this solution but overcomes a couple of issues that are having a dummy row possibly triggering unwanted logic and having to hide it. Moving the identifier only happens in the instance generation method and in the label itself and it proved to work. **EDIT END** **EDIT 2** Unfortunately both of the proposed workaround work well in 'simple cases' but show a faulty behavior when the row are more complex. See the bottomline. **EDIT 2 END** The changes are the following; i inserted an initial instance (directly in the designer) with rowIndex= null. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/d/5d472054af1fc42e3ddc3069aa0c9ddb5de32420.png) In the domId binding i added the following transformation (script): ``` if value is None: return "LASTONE" return value ``` Now the null rowIndex line has the LASTONE DOM identifier. It has to always be the last one so the Add Row button OnActionPerformed has to be changed. The line: ``` self.getSibling("FlexRepeater").props.instances.append(newInstance) ``` must be changed to: ``` self.getSibling("FlexRepeater").props.instances.insert(newInstanceIndex - 1, newInstance) ``` Additionally, I bound the height of the row view (here I used a coordinate container, so it _has_ an height) to the rowIndex property so that the height is 0 when the row is the dummy-lastline. That is: ``` return 0 if value is None else 49 ``` In both buttons the call for scrolling obviously is: ``` system.perspective.navigate(url = "#LASTONE") ``` There is an barely perceivable flickering when adding a row, but it does its job. I leave the question open for a while to attract more proper solutions. **FURTHER TESTS AND BOTTOMLINE** More tests have been done on both the solutions (bottom row and change of domId) and in all cases they showed faulty/unreliable behavior as the number of controls in each row grew; the scrolling did not happened all the times and in some cases was partial. This shows one more the 'tricky' nature of these workarounds and the lack of a proper solution to this problem that should be considered by Inductive Automation team. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/1/1194c250d521e1eeb1ee9ad08325986608ae8103.png) ---
**Author:** ![AGOSTINO\_SCLAUZERO](https://avatars.discourse-cdn.com/v4/letter/a/eada6e/32.png) [@AGOSTINO\_SCLAUZERO](https://forum.inductiveautomation.com/u/AGOSTINO_SCLAUZERO)\ **Post date:** [October 6, 2022, 2:16pm UTC](https://forum.inductiveautomation.com/t/flexrepeater-scroll-to-last-instance/64887/8 "2022-10-06T14:16:22Z")
I tried to explore the option you mentioned. Initially the navigation action happened in the same script that adds the row. Now I added a second script and I moved the navigation code here, as in the following image. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/5/85bf73d561d2e163a5b85b7ed2ca2c6fc55d952b.png) It doesn't make any difference. ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [October 6, 2022, 2:17pm UTC](https://forum.inductiveautomation.com/t/flexrepeater-scroll-to-last-instance/64887/9 "2022-10-06T14:17:16Z")
All of these workarounds and what not make me wonder, Would a unique combination of the table domId + rowIndex set as the domId of each row in the table enable this sort of functionality easier? That way your embedded view doesn’t need to be smart enough to figure all this out on its own. This could easily be applied on the rowGroup that wraps the embedded view so that your pre-existing domIds would all work as well.