Working with Components & the Canvas
The ROI Studio canvas is where you build and arrange the components that make up your ROI Model or Calculator.
Use the Components panel to add new elements, then work with those elements on the canvas to configure and organise your model.
The canvas
The canvas is the main editing area in ROI Studio.
It represents the structure of the model you're currently working on and contains the Inputs, Outputs and other components you've added.
As you build your model, the canvas lets you see how those components fit together.
Open the Components panel
Use the Components panel when you want to add something new to your model.
The panel contains the component types available for the current editing context.
These include components for building areas such as:
Inputs
Outputs
Headers
Layouts
Dynamic content
Choose the component appropriate for what you want to add.
Add a component
To add an element:
Open the Components panel.
Find the component you want to use.
Add the component to the canvas.
Configure the new element.
The configuration options available depend on the type of component you've selected.
For example, an Input has different configuration options from an Output or layout component.
Inputs
Inputs represent values and assumptions that can be used within your model.
These can include values such as:
Volumes
Costs
Time
Percentages
Performance assumptions
User selections
ROI Studio provides different Input types depending on how you want the value to be presented and adjusted.
For detailed guidance, see Adding & Configuring Inputs.
Outputs
Outputs present results calculated by the model.
You can use Outputs for measures such as:
Cost savings
Benefits
ROI
Payback
Operational improvements
Other calculated KPIs
Different Output types let you choose how those results are presented.
For detailed guidance, see Adding & Configuring Outputs.
Headers
Headers help organise Inputs and Outputs into understandable sections.
Use them to give groups of related components context and make larger models easier to navigate.
For example, a model might use sections such as:
Core Inputs
Costs & Assumptions
Benefits
Results
For more information, see Headers & Model Structure.
Layout components
ROI Studio provides layout components for organising information beyond a simple sequence of elements.
These include:
Columns
Accordions
Micro Tabs
Layout components can help you organise related information and create a clearer experience for someone using the model.
For more information, see Columns, Accordions & Micro Tabs.
Select an element
Select an existing element on the canvas when you want to work with it.
Once selected, ROI Studio provides the controls relevant to that element.
Depending on the component, you may be able to:
Change its configuration
Edit its content
Change its type
Copy it
Delete it
Adjust its presentation
The options available depend on the element you're working with.
Configure an element
Each component has configuration appropriate to its purpose.
Select the element and use its configuration controls to change the available properties.
Depending on the component, this can include areas such as:
Labels
Values
Display information
Formatting
Behaviour
Formula configuration
Conditional behaviour
Not every option is available for every component.
For more detailed editing guidance, see Editing, Copying & Deleting Elements.
Change an element type
Supported elements can be changed to another compatible type.
This can be useful when the information itself is still appropriate but you want to change how the user interacts with it or how it is presented.
For example, you may decide that a value would work better using a different Input control.
When changing an element type, review its configuration afterwards to make sure the new type still behaves as intended.
Arrange your model
The order and layout of components affect how someone experiences the model.
As the model grows, consider grouping related information rather than simply adding everything in the order it was created.
For example:
Business Inputs → Assumptions → Costs → Benefits → Results
The appropriate structure depends on the business case.
ROI Studio's Navigator provides additional controls for reviewing and reorganising the structure.
For more information, see Reordering & Layout with the Navigator.
Working with multiple pages
A Calculator can contain multiple pages.
When working with a multi-page Calculator, make sure you're editing the correct page before adding or changing components.
You can switch between pages while editing and organise different parts of the Calculator into an appropriate journey.
For more information, see Multi-page Calculators.
Dynamic content
ROI Studio also supports Dynamic Value Text.
This lets you create text that incorporates values from your model, allowing calculated information to become part of the surrounding narrative rather than appearing only as standalone Outputs.
For more information, see Dynamic Value Text.
Preview as you build
Use Preview regularly while working on the canvas.
The editing canvas helps you construct the model, while Preview lets you check the experience someone will actually interact with.
Preview is particularly useful after:
Adding several new components
Changing layouts
Reordering elements
Changing component types
Adding conditional behaviour
Making significant presentation changes
This can help you identify layout or interaction issues before publishing the draft to live.
Canvas changes and publishing
Changes you make while editing form part of your working draft.
They are not the same as publishing the draft to live.
When you're satisfied with the changes, use Publish to live to update the live model.
For detailed guidance, see Previewing & Publishing from ROI Studio.
A useful way to build
For a new section of a model, a simple workflow is:
Decide what information the section needs.
Add the appropriate components.
Configure each element.
Arrange the elements into a logical structure.
Add calculation logic where required.
Preview the result.
Refine the layout or configuration.
Publish to live when ready.
This keeps model construction focused on the business experience rather than simply adding components to the canvas.
Last updated