search

iTwin / itwinjs-core

Monorepo for iTwin.js Library
https://www.itwinjs.org
MIT License
591 stars 211 forks source link

Help with the issue of interaction with itwin viewer #2340

Closed LastLow098 closed 2 years ago

LastLow098 commented 2 years ago

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

grigasp commented 2 years ago

I think these sandboxes might be useful to you:

More on unified selection:

LastLow098 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

aruniverse commented 2 years ago

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 commented 2 years ago

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

aruniverse commented 2 years ago

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

LastLow098 commented 2 years ago

Only HelloWidget image PropertyGrid Widget is not visible

aruniverse commented 2 years ago

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: image