Adding a Custom Property View to a Theia GLSP Client

[Ginxss]

Hi,

I am trying to learn about how to use the Property View in Eclipse Theia. Unfortunately, I am already failing at the very first hurdle.

I took the current java-emf-theia project template, and placed a custom data service, content widget and widget provider next to the frontend-module in tasklist-theia, following this tutorial. The content of those files is identical to the example code.

I then registered them like this:

export class TaskListTheiaFrontendModule extends GLSPTheiaFrontendModule {
    ...

    override configure(context: ContainerContext): void {
        context.bind(PropertyDataService).to(FileInfoPropertyDataService).inSingletonScope();
        context.bind(PropertyViewWidgetProvider).to(FileInfoPropertyViewWidgetProvider).inSingletonScope();
    }
}

However, the property view in Theia is still showing the default resource view. The provideWidget function of my widget provider is never getting called. But the canHandle function is getting called and returns the correct value.

Am I registering the components correctly?

[ndoschek]

Hi @Ginxss,
Thanks for your interest in GLSP and the Theia property view!

Your snippet looks good to me overall, however the super call is missing. Other than that and with the provided example code the property view should show your custom widget for the handled selection.

I can provide an example that listens to GLSP selections (as the linked tutorial is plain Theia documenation):
https://github.com/eclipse-glsp/glsp-examples/tree/property-view-example
This minimal example listens to GLSP selections and prints the ID of the selected GLSP diagram element.

HTH and best regards,
Nina

[amiths89]

Thanks Philip. I tried this but i still seem to be having a circular dependency issue in one of the 'toDynamicValue' bindings when binding GlspSelectionDataService in TaskListDiagramConfiguration
container.bind(GlspSelectionDataService).to(CustomGlspSelectionDataService);

Actually if there's any recent Theia Properties selection example that could help.

[planger]

Sorry to hear that! I'm not sure whether there is a recent example for the Theia Properties panel in combination with GLSP publicly available. Probably it is best if you open a new discussion with your concrete problem, current code and error message. This way it is probably easier to help. Thank you!

[amiths89]

Sure I ll open a new discussion.

[rsoika]

Hi @amiths89 you can also take a look into our project - Open-BPMN. We implemented a Property Panel as an UI Extension. I know this is not exactly what you are searching for. But the reason why we implemented a Property Panel as an UI Extension was that this works on all platforms because the panel is part of the diagram plane. So no extra panel/view need to be implemented. But of course also this approach has some complexity. And we use a lot of custom Action Events too ;-)
You can take a look at our online demo. Just double click on an element and the panel will pop up. We are using JsonForms to implement the different element properties.

[amiths89]

Thanks @rsoika for the demo link. Actually I have already been looking at this code. But since i was just starting the Theia Property View seemed like a more easier place to start with.