Properties Panel Redesign
This document captures the current features, edge cases, and UI patterns of the existing properties panel. Its purpose is to serve as a starting point for discussing a new properties panel design.
The new design is not required to replicate the current approach. There may be better UI/UX patterns that present data in a way that is more intuitive and easier to understand for users.
Current design
The existing properties panel was primarily shaped by the need to display iModel element properties. Below is a snapshot of how it appears in iTwin applications today.
Features and edge cases
The sections below document the features and edge cases the current panel handles. Each one should be considered during the redesign, though the solution may look entirely different.
Complex property types
The panel displays several complex property types:
- Array — including arrays of structs
- Struct — including structs with array members
- Point2d / Point3d
These types can be nested and combined (e.g., an array of structs or struct with array members).
Note: Array length is not limited.
Property categorization
An iModel element can have many properties that share the same label. Displaying them in a flat list would be confusing. The current panel groups properties into expandable categories to provide structure.
Read-only and editing modes
By default, the panel renders a read-only list of name–value pairs. Editing is triggered by double-clicking a property, which shows an inline input for the value.
A full editing mode is also available, where every property displays its input at all times.
Property actions
Each property row can expose custom action buttons. These actions can either be always visible or appear only on hover.
Vertical layout
When available space is narrow, the panel switches to a vertical layout: the property label is rendered above its value instead of side by side.
Large property counts
iModel elements can have a large number of properties (500+). The panel needs to account for this with virtualization, search/filtering, and appropriate density to avoid wasting space.
Merged properties
Current property panel might be used to show properties of multiple elements at the same time. For properties that have same value between elements we show the value. However, values might differ between elements. E.g. element A - Length: 1 / element B - Length 2. In this case at the moment -- is shown.
Next steps
This document is a living reference. If there are additional features, edge cases, or limitations not covered above, please add them.
Properties Panel Redesign
This document captures the current features, edge cases, and UI patterns of the existing properties panel. Its purpose is to serve as a starting point for discussing a new properties panel design.
The new design is not required to replicate the current approach. There may be better UI/UX patterns that present data in a way that is more intuitive and easier to understand for users.
Current design
The existing properties panel was primarily shaped by the need to display iModel element properties. Below is a snapshot of how it appears in iTwin applications today.
Features and edge cases
The sections below document the features and edge cases the current panel handles. Each one should be considered during the redesign, though the solution may look entirely different.
Complex property types
The panel displays several complex property types:
These types can be nested and combined (e.g., an array of structs or struct with array members).
Note: Array length is not limited.
Property categorization
An iModel element can have many properties that share the same label. Displaying them in a flat list would be confusing. The current panel groups properties into expandable categories to provide structure.
Read-only and editing modes
By default, the panel renders a read-only list of name–value pairs. Editing is triggered by double-clicking a property, which shows an inline input for the value.
A full editing mode is also available, where every property displays its input at all times.
Property actions
Each property row can expose custom action buttons. These actions can either be always visible or appear only on hover.
Vertical layout
When available space is narrow, the panel switches to a vertical layout: the property label is rendered above its value instead of side by side.
Large property counts
iModel elements can have a large number of properties (500+). The panel needs to account for this with virtualization, search/filtering, and appropriate density to avoid wasting space.
Merged properties
Current property panel might be used to show properties of multiple elements at the same time. For properties that have same value between elements we show the value. However, values might differ between elements. E.g. element A - Length: 1 / element B - Length 2. In this case at the moment
--is shown.Next steps
This document is a living reference. If there are additional features, edge cases, or limitations not covered above, please add them.