Issues integrating javascript component in studio - Solved

UPDATE: A weekend’s rest and a pair of fresh eyes allowed me to fix the issue. Scroll to the bottom for the solution. Leaving ticket here for future reference.

I’m integrating a complex javascript component and tried following the documentation.

For the component integration itself, I ran into some issues, but got it working relatively fast.

For the studio integration, I can’t get it working. So I downloaded the official 2.x components demo sources and used that locally. That does not work either…

The slider component does not pop-up in the palette and studio doesn’t seem to understand what it is.

Where the documentation is insufficient

  1. The code sometimes uses the identifier demo-slider other time it uses just slider It is completely unclear what identifier is needed and what that identifier means. Those identifiers are used in different files but there is no documentation what they mean. A simple line saying

“remember this name, we need it in file X and it must be the same”

would clarify a lot.

  1. expectations. It is not clear at all what it “integrating into Jmix UI means”. If it means “exactly like any other jmix component” then the samples are documentation are wrong.

Studio does not recognize the component, it does not allow injecting it into a view.
image

Studio does not suggest the slider component in the palette
image

UPDATE:
As mentioned, a weekend of rest allowed me to look at this with a fresh pair of eyes, and I found the solution rather quickly.

It was indeed an identifier mismatch, more specifically in the xmlns attribute of the @StudioUiKit. A little bit more guidance from Studio would be helpful. After correcting this, the component is correctly recognized in studio UI designer. It proposes the fields and allows injecting it into controllers. It also provides generation of listeners for all registered events. (see screenshot)

So I an confirm it is fully supported in studio.

image

Hi,

Glad to hear that you’ve solved your issue. Nevertheless, I’ve created a doc issue, to add more details to the creating component section. Feel free to comment it with your ideas.

Regards,
Gleb

1 Like