Custom Page Index

The Custom Page Index control is a numeric page indicator that allows precise control over navigation logic in a user interface. Unlike browser-based or automatic indexing, this control is manually defined, enabling developers and designers to explicitly manage page states and transitions.

Overview

This control represents the current page or view using a numeric index. It supports custom logic for defining the active page, valid page range, and navigation behavior—making it ideal for multi-page workflows, wizards, or systems with state-driven content switching.

Key Features

Manual Page Management

Set the current page index programmatically.
Not dependent on browser or framework-level routing.

Custom Page Range

Define minimum and maximum page values to restrict navigation boundaries.
Prevents invalid navigation states.

Enable forward, backward, or skip-based page transitions.
Can be linked to custom logic, buttons, or variable changes.

Content Mapping

Each index value can correspond to a unique content view.
Allows complex multi-step workflows with full developer control.

Visual Index Display

Optionally display the current index for user awareness.
Can be styled to match the UI theme.

Use Cases

Multi-Step Wizards

Example: Navigate between setup steps like configuration, preview, and confirmation.

View Switching

Example: Change between monitoring screens or dashboards based on state index.

State-Based UIs

Example: Display different interface layouts depending on the active page index.

SVG ID Reference Table

Use the following SVG IDs to dynamically display or interact with the page index in the Custom Page Index control:

#	Element	SVG ID
1	Minus Button	`gButtonMinus`
2	Value	`value_tspan`
3	Plus Button	`gButtonPlus`

Code Snippet Example

<g id="custom_control_root">
<g id="gValue">
<g class="fallback-page-index-value-background custom-control custom-page-index page-index-value-background" id="Rectangle 4708" filter="url(#filter0_ii_337_774)">
<rect class="fallback-page-index-background custom-control custom-page-index page-index-background" x="87" y="25" width="319" height="72" rx="4"/>
</g>
<text  class="fallback-page-index-value custom-control custom-page-index page-index-value"  xml:space="preserve" style="white-space: pre" font-family="Arial" font-size="32" font-weight="bold" letter-spacing="0em"><tspan id="value_tspan" x="204.672" y="71.5938">Value</tspan></text>
</g>
<g id="gButtonPlus">
<rect class="fallback-page-index-btn-color custom-control custom-page-index page-index-btn-background" id="Rectangle 4710" x="413" y="25" width="72" height="72"/>
<g id="btn-chevron-right">
<path class="fallback-page-index-btn-label custom-control custom-page-index page-index-btn-label" id="Vector" d="M444.695 72.382L442.838 70.5253L452.379 60.986L442.868 51.4748L444.724 49.6198L456.091 60.986L444.695 72.382Z" fill="#1F2837"/>
</g>
</g>
<g id="gButtonMinus">
<rect class="fallback-page-index-btn-color custom-control custom-page-index page-index-btn-background" id="Rectangle 4709" x="8" y="25" width="72" height="72"/>
<g id="btn-chevron-right_2">
<path class="fallback-page-index-btn-label custom-control custom-page-index page-index-btn-label" id="Vector_2" d="M48.3054 72.382L50.1621 70.5253L40.6211 60.986L50.1324 51.4748L48.2756 49.6198L36.9094 60.986L48.3054 72.382Z"/>
</g>
</g>
</g>

Pages