Seeking Advice on Developing Widgets Using ThingWorx Web Components SDK - Lit

[AdamK_93]

Hi everyone,

I'm currently working on developing custom ThingWorx widgets using the ThingWorx Web Components SDK - Lit.

While I’ve gone through the official documentation, I would really appreciate insights from those who have hands-on experience building and using successfully such widgets.

Gone through of Getting Started Tutorial - ThingWorx Web Component SDK - Lit (ptc.com) , does help a bit in starting all the way.

Building the sample project (as per the above tutorial) and importing it to the platform are completed just fine, however widget is not visible on MashupBuilder, and errors are thrown when MB loads.

ERROR [widget] "CustomCSS" widget type is missing required member widgetProperties()

Attached you can find the whole sample project, including the output widget zip for the import.

Environment: Thingworx Foundation 9.7.

Method: ThingWorx Web Component SDK - Lit

If you've built custom widgets using web components, your experience would be incredibly helpful. Even a few tips or examples would go a long way.

P.S. I’ve already developed a few widgets using Eclipse, but I’m now looking to explore a more modern approach with Web Components and Lit.

Thanks in advance for your support!

Adam

[PEHOWE · Accepted solution]

Hello @AdamK_93 ,

I took the zip you provided. (Thank you very much)
Using the files located in Simple-el.zip -> dist -> target directory

• ui (folder)
• webapp (folder)
• metadata.xml

I created my own ZIP file. I then imported that file into ThingWorx 9.7.0. There were no reported errors on validate and no reported errors on import.

After the import I was able to go to Manage -> Installed Extensions in composer.
I saw 1 installed package with 1 entry in package details, the simpleel widget.

It was necessary to reload the browser to get the entry to show up in the list of available widgets.
Once the reload was complete the widget was available.
Is this what you expected to see:

Please let me know where you are seeing the error message and what configuration you have applied

Regards,

Pehowe

[AdamK_93]

Hi @PEHOWE ,

Thank you for checking. I've re-done the same, and after clearing browser cache and re-importing the widget, it does appear on the widget list in mashupbuilder,

The error was due to an another widget. Removig it solves the errors.

"ERROR [widget] "CustomCSS" widget type is missing required member widgetProperties()"