Help with the issue of interaction with itwin viewer

[LastLow098]

Hello,

Considering the model, you can interact with its elements (that is, click on the element) and get more detailed information on the side information window. I wanted to find out where the code that is responsible for this interaction is located in order to link my code to this click. My very task is that when I click on an element, receiving object data, I would be able to compare this data with the data of another database and output the result to the information window I created. I'll attach a photo, with a more visual example. The notepad window is just an example of an information window that will be based on the task in the browser window. I hope that I have described everything in an accessible way. Thank you in advance for your help in this matter

https://disk.yandex.ru/i/2lPx9EKPswYGBw - link to the photo

---

⚠ Do not edit this section. It is required for imodeljs.github.io ➟ GitHub issue linking

• LINK: Developing-a-Web-Viewer---iTwin.js-link-to-docs
• TAG: imodeljs-docs-question
• SOURCE: https://www.itwinjs.org/learning/tutorials/develop-web-viewer/

[grigasp]

I think these sandboxes might be useful to you:

• Unified Selection PropertyGrid - creates a similar component that you have in your screenshot and hooks it into unified selection so it shows properties of selected elements.
• Element Properties Loader - hooks into unified selection and shows properties of selected element in a custom component.

More on unified selection:

• Demystifying Unified Selection and Selection Scopes
• Hooking 3rd Party Component into Unified Selection

[LastLow098]

I've studied the sandboxes and the articles you gave me I have problems understanding where to use the code that is used in sandboxes and in articles

[grigasp]

Well, it depends on your application. The sandboxes create a widget through UiItemsProvider and all the unified selection and properties related code is contained within the widget.

Adding @kckst8 and @aruniverse for the itwin-viewer perspective.

[aruniverse]

Take a look at the following tutorial on how to go from some of the samples Grigas had listed above to the viewer: https://developer.bentley.com/tutorials/adding-showcase-widgets-to-your-itwin-viewer/

I'd also recommend you take a look at our accreditation program, https://developer.bentley.com/accreditation/, which will give you a good overview of how to connect your own services to your viewer.

When you click on an element, you should be able to retrieve it's ECInstanceId which you could use to look up in your own database or whatever maps to it, and then your service would need to return the data you'd like to see. How you display it is up to you, you won't be able to override the existing PropertyGrid so you'll have to make your own that adds your custom ui and a property grid. Take a look at https://github.com/imodeljs/viewer-components-react/blob/master/packages/property-grid/src/PropertyGridUiItemsProvider.tsx for the PropertyGrid we use in the iTwin Viewer.

[LastLow098]

I tried using the code from these two sandboxes, Unified Selection PropertyGrid , Element Properties Loader , adding them as shown in this example, https://developer.bentley.com/tutorials/adding-showcase-widgets-to-your-itwin-viewer/ , but the widgets did not appear

I also noticed that the examples use elements from @itwin/sandbox, but at the same time, it is not in the application

I attached the code in which I made changes based on the examples, I think I missed something, on which the display of widgets in the application depends- https://disk.yandex.ru/d/Y3xWo3Yv_BYyrg

I also apologize for possibly stupid questions, I'm new to this field and I'm trying to figure it out as best I can Thank you for helping me

[kckst8]

would you be able to share the code for your UIProviders (widgets) as well?

[aruniverse]

I also apologize for possibly stupid questions, I'm new to this field and I'm trying to figure it out as best I can Thank you for helping me

There are no "stupid" questions 🙂

I attached the code in which I made changes based on the examples, I think I missed something, on which the display of widgets in the application depends- disk.yandex.ru/d/Y3xWo3Yv_BYyrg

Could you share your code via a github repo?

I also noticed that the examples use elements from @itwin/sandbox, but at the same time, it is not in the application

@itwin/sandbox is an internal package used to encapsulate logic like auth that aren't pertinent to samples and provide some quick helpers. This package won't exist on npm and if you need some of that functionality, you'll have to write it yourself; for the most part you shouldn't need many of them and will just need to provide your own auth client/config.

[LastLow098]

https://github.com/LastLow098/iTwins-viewer/blob/main/src/ViewerStartup.tsx

[aruniverse]

Just for a sanity check, could you try opening your viewer in incognito, and see if the widgets you've added show up?

[LastLow098]

Only HelloWidget PropertyGrid Widget is not visible

[aruniverse]

Your property grid doesn't have an imodel connection so it never adds the widget: https://github.com/LastLow098/iTwins-viewer/blob/main/src/PropertyGridWidget.tsx#L15 Here's a fix: