Scroll to the Last Column of Horizonal Repeating Group

Tips
1

Hey, I (Chat-GPT) found a way to scroll to the first and last column of a horizonal repeating group. I have 15 columns and I didn’t want them to be bunched up on the screen, so I reduce the max width for the repeating group, so it would scroll. But then I didn’t want the user to have to use the scroll bar to navigate left and right within the repeating group. Long story short I created two button to accomplish this. Hopefully it could help someone. See below for details:

  1. Setup Your Repeating Group:

    • Ensure your Repeating Group is set to display data in a horizontal layout.

  2. Add a Custom State:

    • Go to your page or any element that will not be deleted, and add a custom state. Name it something like “ScrollToEnd” and set the type to “yes/no”. This will control the scrolling action.

  3. Create a Workflow to Adjust This State:

    • Add a workflow that triggers when your specific requirement is met (e.g., on page load, after data change, or when a button is clicked).
    • This workflow should set the “ScrollToEnd” state to “yes”.

  4. Add an Element at the End of Your Repeating Group:

    • You can add an invisible shape or an icon at the end (in the last cell) of your Repeating Group.
    • Give it a unique and identifiable ID via the HTML attributes (under the Appearance tab).

  5. JavaScript to Scroll to the Element:

    • Install the Toolbox plugin, which allows you to run JavaScript in workflows.

    • Add a “Run Javascript” action in your workflow after setting the custom state (only if the state is “yes”).

    • Use JavaScript to scroll to the element. The code might look like this:

      var element = document.getElementById(‘yourElementId’);
      if(element) {
      element.scrollIntoView({behavior: “smooth”, block: “end”, inline: “nearest”});
      }

    - Replace 'yourElementId' with the ID you set for your invisible shape or icon.
    Just duplicate the instructions to return to the first column. “ScrollToBegin

4 Likes