+
+ LoopNodeExecutionCount
+ {' '}
+ is a unified segmented pill that lets users navigate loop iterations at runtime. An{' '}
+ All toggle on the left switches between
+ aggregate and per-iteration views. The right segment shows the current fraction{' '}
+ k / N with
+ prev/next arrows, a click-to-type jump shortcut, and an optional crosshair button that
+ jumps directly to the first failed iteration. The component adapts to three size tiers
+ based on the available header width.
+
+ Three loop nodes side-by-side: wide (full tier), medium (compact tier), and narrow + (minimal tier). Interact with the pills directly on the canvas. +
++ By default, the pill opens in the All view, + showing the aggregate execution summary across all iterations. Click{' '} + All to toggle into individual iteration + navigation. +
++ The pill adapts to three responsive tiers based on the loop node's rendered width. As + nodes are resized or deeply nested, controls are progressively removed so the pill never + overflows the header. +
+{row.controls}
+| + Node width + | +
+ size tier
+ |
+ + Controls visible + | +
|---|---|---|
| + {row.width} + | ++ + {row.tier} + + | +{row.controls} | +
+ The pill supports iteration counts from 1{' '} + to 999. The fraction scales naturally as + digit width increases — no truncation or overflow at any value. +
++ The loop node header is divided into two regions. The right region always renders in + this fixed order: execution count pill first, then the sequential/parallel chip. +
+ + {/* Visual mockup */} +| + Region + | ++ Content + | +Rule | +
|---|---|---|
| + Left + | +Icon · Title | ++ Title truncates with ellipsis as the node narrows + | +
| + Right — 1st + | +
+
+ LoopNodeExecutionCount
+
+ |
+
+ Adapts to full / compact / minimal tier based on{' '}
+
+ nodeWidth
+
+ ; always right-aligned, never overlaid
+ |
+
| + Right — 2nd + | ++ Sequential / Parallel chip + | ++ Fixed width; always the rightmost element in the header + | +
+ Pass{' '}
+
+ iterationPillState
+ {' '}
+ directly to{' '}
+ LoopNode.
+ The component computes the size tier from its measured{' '}
+ width{' '}
+ automatically — no absolute positioning or overlay wrappers needed.
+
+ Build a{' '}
+
+ LoopNodeExecutionCountState
+ {' '}
+ object from your runtime data and pass it as{' '}
+
+ iterationPillState
+ {' '}
+ to LoopNode
+ . The size tier is derived automatically from the node's measured width — no overlay or
+ absolute positioning needed.
+
+ {`import { LoopNode } from '@uipath/apollo-react/canvas';
+import type { LoopNodeExecutionCountState } from '@uipath/apollo-react/canvas';
+
+function MyLoopCanvasNode(props: NodeProps>) {
+ const [activeIndex, setActiveIndex] = useState(0);
+ const [isAll, setIsAll] = useState(false);
+
+ const iterationPillState: LoopNodeExecutionCountState = {
+ activeIndex,
+ total: props.data.total,
+ onActiveIndexChange: (i) => { setIsAll(false); setActiveIndex(i); },
+ isAll,
+ onAllChange: setIsAll,
+ iterationStatuses: props.data.iterationStatuses,
+ overallStatus: props.data.status,
+ };
+
+ // LoopNode computes full / compact / minimal tier from its measured width automatically
+ return
+