ScrollToComponent Command (APL 2023.1 to 2023.2)
ScrollToComponent command has the properties shown in the following table, in addition to the common command properties. Set the
type property to
In the following table, the "Default" column shows "Required" for properties that must have a value for the command to run. Otherwise it displays the default value, which might be none.
The alignment of the item after scrolling
The child component to move into view.
For example, the following command scrolls until the component with the ID
recipeSteps is in view.
ScrollToComponent command looks for the first
ScrollView at or before the
componentId and scrolls that one.
Scrolling stops if the user touches the screen. Stopping the command stops scrolling immediately.
ScrollToComponent command is ignored in fast mode.
The alignment of the item on the screen after scrolling and before speech. Alignment is an enumerated value with options shown in the following table.
The top/left side of the item is placed at the top/left side of the scrolling container.
The center of the item is placed in the center of the container.
The bottom/right side of the item is placed at the bottom/right side of the scrolling container.
The item is moved the minimal distance necessary to bring it fully into view.
A selector that identifies the target component for the command. When not provided, defaults to
:source selector targets the component that issued the
Reinflate command runs, the
ScrollToComponent command can resume after Alexa reinflates the document. The command resumes when it runs on a
sequencer specified in the
preservedSequencers array on
Reinflate. The command saves the target component and the alignment specified in the
If the target component isn't in the reinflated hierarchy or isn't a descendant of a scrollable component, the command is ignored.
When Alexa reinflates the document, scrolling resumes and scrolls the target component into position as specified by
The following example shows a
Sequence that displays a long list of items. The list of items includes both the color items and section headings that correspond to a range of the alphabet. Each section heading has a component ID. For example, the "N-R" section has the ID "n-r". The
TouchWrapper components displayed next to the list use the
ScrollToComponent to scroll to the specified section in the list.
Was this page helpful?
Last updated: frontmatter-missing