Scroll X to a point

Function: Scroll X to a point

This action allows you to programmatically scroll a specific visual component (UI element) on your page to a designated vertical position. This is useful for guiding users to important sections, ensuring visibility of content, or creating dynamic page navigation within your application.

Input

• UI element:
  • Description: Choose the visual component on your page (like a form, a panel, a text area, or a data table) that you want to scroll.
  • Type: UI element
  • Required: Yes, you must select a UI element for this action to work.
• Position:
  • Description: Select where within the chosen UI element you want to scroll to. This determines the general vertical alignment.
  • Type: Selection from a dropdown
  • Options:
    • Top: Scrolls to the very beginning (top edge) of the UI element.
    • Center: Scrolls to the middle of the UI element.
    • Bottom: Scrolls to the very end (bottom edge) of the UI element.
    • Exact position: Allows you to specify a precise numerical point.
• Exact Position:
  • Description: If you selected 'Exact position' for the 'Position' input, enter the specific vertical pixel value you want to scroll to within the UI element. For example, entering 100 would scroll to 100 pixels from the top of the element.
  • Type: Number
  • Default Value: 0
  • Visibility: This input field only appears if you choose 'Exact position' for the 'Position' input.

Output

This action performs a visual operation on the page and does not produce any direct data output that can be used in subsequent steps of your workflow.

Execution Flow

Real-Life Examples

1. Guiding a user to the top of a new form section:

   • Scenario: After a user completes the first part of a multi-step form and clicks a "Continue" button, you want to automatically scroll them to the beginning of the next section, which might be further down the page.
   • Inputs:
     • UI element: Customer Details Form Section
     • Position: Top
   • Result: The Customer Details Form Section UI element scrolls smoothly to its top edge, ensuring the user immediately sees the first input field of the new section.

2. Highlighting a specific part of a long product description:

   • Scenario: You have a detailed product page with a very long description. When a user clicks a "View Features" button, you want to scroll the description area to its middle, where the key features are typically listed.
   • Inputs:
     • UI element: Product Description Panel
     • Position: Center
   • Result: The Product Description Panel UI element scrolls so that its central part, containing the "Key Features" section, becomes visible in the user's view.

3. Scrolling to a specific data entry point in a dynamic table:

   • Scenario: You have a large data table where new entries are added. After a new row is successfully saved, you want to scroll the table to a specific row (e.g., the 50th row from the top) to show the user where their entry might appear or to focus on a particular data range.
   • Inputs:
     • UI element: Inventory Data Table
     • Position: Exact position
     • Exact Position: 1500 (assuming 1500 pixels from the top of the table corresponds to the desired row)
   • Result: The Inventory Data Table UI element scrolls vertically to the 1500-pixel mark, bringing the relevant data rows into view.