Hooking 3rd Party Component into Unified Selection
Unified selection storage acts as a single source of truth about what’s currently selected in the application. Different components may want to represent or change the selection in different ways. Recently I’ve been getting questions on how to hook a third-party component into the unified selection system, so here it is.
Initial component
The example starts with a simple Table component that just shows a list GeometricElements in the given iModel.
Warning: for simplicity the component just loads all data — there’s no delayed loading, so don’t try that on large iModels!
In the below examples I’ll show what changes are needed for this component to have:
- one way selection synchronization component to unified selection storage
- one way selection synchronization unified selection storage to component
Finally, I’ll combine the two examples into one piece that has two-way synchronization. But first, the component needs to be prepared for use in unified selection.
Preparing for Participating in Unified Selection
The thing that gets stored in unified selection storage is an InstanceKey which consists of an ECClass name and ECInstance ID. So the first thing we have to do to participate in unified selection workflows is to make sure our component can identify ‘selectables’ by an InstanceKey.
In the Table component that we use to display data the RowItem.key property is where you store identifier of the row. Previously our data provider set element’s ID as the key. We need an InstanceKey instead:
With the above changes the component is ready to participate in unified selection!
One Way Sync: Component to Unified Selection
Let’s say we want to implement one-way selection synchronization from the component to unified selection storage. The goal here is to update the unified selection storage whenever selection changes in the component.
The above code listens for row selections in the component and whenever row selection changes, updates the unified selection storage. As soon as that happens, all other unified selection enabled components get notified and update their state as necessary.
One Way Sync: Unified Selection to Component
Implementing one-way selection synchronization from unified selection storage to component is very similar to what we did in previous example. The goal is to listen for unified selection changes and update the component’s internal state accordingly.
The above code listens to unified selection changes and resets the Table.isRowSelected callback prop whenever that happens. Table then calls the callback for each visible row to update row selection state and we can just check if ECInstance the row represents is in unified selection storage.
Two Way Synchronization
The above examples show how to implement one-way sync from each side, so combining them is very simple.
Conclusion
While the whole concept of unified selection might sound complicated and hard to consume, that changes when you understand that it’s just a storage of IDs with a single ‘onChanged’ event. Hopefully the above examples show that hooking up any component into that system isn’t as hard as it sounds.
