Reordering & Layout with the Navigator
The Navigator gives you a structured view of the elements in your Calculator and lets you reorganise them using drag and drop.
For single-page Calculators, ROI Studio also provides Dual Column to create a responsive two-column overall layout.
Use these tools when you want to change the structure of an existing Calculator without rebuilding its components.
Open the Navigator
To open the Navigator:
Find Drag & Drop re-ordering in the toolbar.
Select it.
The Navigator opens on the right of ROI Studio.
If the Components panel is currently open, it may close when the Navigator opens.
Use the X control when you want to close the Navigator.
Understand the Navigator
The Navigator presents the structure of your Calculator as a tree.
It includes your Inputs and Outputs and can also represent elements nested inside layout components.
Use it to understand how components relate to one another without relying only on their visual position on the canvas.
This becomes particularly useful as a Calculator grows.
Reorder an element
To change the position of an element:
Open the Navigator.
Find the element you want to move.
Drag it to the required position.
Drop it into place.
Confirm that the order on the canvas updates.
Use Preview afterwards when the change materially affects the user journey.
Reorder nested elements
The Navigator can also reorganise elements nested within:
Columns
Accordions
Micro Tabs
Expand the relevant parent component in the Navigator to see its nested elements.
You can then drag a nested element to the required position.
This is often easier than trying to reorganise a complex layout directly on the canvas.
Use reference chips
The Navigator provides reference chips that can help you locate elements.
Select a reference chip to find the associated element on the canvas.
This can be particularly useful in larger Calculators where many Inputs and Outputs are present.
Use the Navigator for larger Calculators
For a small Calculator, reorganising components directly on the canvas may be straightforward.
As the model grows, the Navigator becomes more useful because it exposes the underlying structure.
For example, you might see a structure such as:
Inputs
Business Profile
Current Costs
Improvement Assumptions
Outputs
Operational Impact
Annual Benefit
ROI
Payback
The Navigator lets you reorganise that structure without searching through a long canvas.
Reordering and calculation logic
Moving an element changes its position in the Calculator.
It does not mean that its business purpose or calculation dependencies have changed.
However, after substantial restructuring, review important formula relationships and Preview the model.
This is particularly useful when calculated Outputs depend on several other components.
For more information, see Creating & Editing Formulas.
Reordering multi-page Calculators
The Navigator can also help when working with multi-page Calculators.
Use Select page to focus the canvas on a particular page, then use the Navigator to organise the elements within the structure.
If ROI Studio displays:
Cannot move! Before that, Setup the pagination
complete the multi-page configuration before attempting more complex moves.
For more information, see Multi-page Calculators.
Dual Column layout
Dual Column is a model-level layout option for single-page Calculators.
It controls whether the Calculator uses a responsive two-column layout.
This is different from adding a Columns component.
Turn Dual Column on or off
To change the Dual Column setting:
Confirm that multi-page mode is turned off.
Find Dual Column in the toolbar.
Select the control.
Wait for the update to complete.
Preview the Calculator.
The control is disabled while the update is being processed.
Check the current state
The toolbar tooltip indicates the current Dual Column state.
When enabled:
Dual Column on (click to turn off)
When disabled:
Dual Column off (click to turn on)
This lets you check the current layout state before changing it.
When to use Dual Column
Dual Column can be useful for single-page Calculators that benefit from presenting Inputs and results side by side on wider screens.
For example:
Inputs | Results
Business assumptions | Annual Benefit Current costs | Net Benefit Improvement rates | ROI Investment | Payback
This can create a more compact interactive experience when Inputs and Outputs benefit from being visible together.
Dual Column vs Columns
These features serve different purposes.
Dual Column
Controls the overall responsive two-column layout of a single-page Calculator.
Columns component
Creates a configurable container for positioning particular elements side by side within part of the Calculator.
Use Dual Column when the overall Calculator benefits from a split layout.
Use Columns when only a particular group of elements needs a column structure.
For more information, see Columns, Accordions & Micro Tabs.
Dual Column and multi-page mode
Dual Column is not available while multi-page mode is enabled.
The toolbar control is hidden when the Calculator uses multiple pages.
This is expected behaviour.
If you cannot find Dual Column:
Check whether multi-page mode is enabled.
Decide whether the Calculator should use a multi-page journey or a single-page Dual Column layout.
These are alternative model-level structures rather than settings intended to operate together.
Choosing between single-page and multi-page
A single-page Dual Column layout can work well when users benefit from adjusting assumptions and seeing results together.
A multi-page Calculator can work better when the experience has several distinct stages.
For example:
Single-page Dual Column
Inputs | Results
can work well for a relatively focused Calculator.
Whereas:
Business Profile → Assumptions → Investment → Results
may work better as a multi-page experience.
Choose the structure based on how users need to interact with the model.
Navigator vs layout components
It helps to distinguish between the different structural tools in ROI Studio:
Navigator
Review and reorder the component structure
Dual Column
Split the overall single-page Calculator layout
Columns
Position selected elements side by side
Accordion
Organise content into collapsible panels
Micro Tabs
Organise groups of Outputs into tabs
Multi-page
Divide the Calculator into separate pages
These tools can solve different presentation problems.
Structure around the user journey
When reorganising a Calculator, think about the order in which someone needs to understand the business case.
For example:
Understand the current environment
↓
Adjust the assumptions
↓
Review the operational impact
↓
Understand the financial value
This is generally more useful than organising components according to the order in which they happened to be created.
Preview after restructuring
Preview the Calculator after significant structural changes.
Check:
Whether components appear in the intended order
Whether nested elements remain in the correct containers
Whether the Input-to-Output journey is understandable
Whether Dual Column behaves as expected
Whether a multi-page Calculator still has the correct page assignments
Whether important results remain easy to find
Structural changes can substantially affect how a Calculator feels even when none of its formulas have changed.
Best practices
When reorganising a Calculator:
Use the Navigator for complex or long structures.
Expand layout containers when reorganising nested elements.
Use reference chips to locate components.
Finish multi-page setup before complex page-related moves.
Review formulas after major restructuring.
Use Dual Column for an overall single-page split.
Use the Columns component for local side-by-side layouts.
Don't introduce layout complexity unless it improves the experience.
Preview after significant structural changes.
Last updated