Extension - Web Component SDK

External Resources

• PTC Help Center - Lit Web Component Development
• PTC Help Center - ThingWorx Web Component SDK
• lit.dev
• Web Components

Quick Setup

Download

• WEB-Component-SDK-Library - ptcs web components and API
  • Unzip as wc-sdk-library/
• WEB-Component-SDK-Utility - Tooling to package the web component as a ThingWorx widget
  • Unzip as wc-sdk-utility/
• A Sample Web Component - A simple web component
  • Unzip as simple-el/
    • twx-wc-sdk/ folder is already populated with content of wc-sdk-Library (not sure which version)
• A Sample Web Component Widget - A web component (simple-el) widget demo, ready to be used with the SDK utility
  • Unzip as simple-el-widget/

ThingWorx Web Component SDK Utility Setup

npm install -g gulp gulp-cli
npm install -g aurelia-cli

From wc-sdk-utility/ : 1. npm install 2. npm link

Web Component Development

Documentation

• lit.dev
• Lit Web Component Development
• ThingWorx Web Component SDK

Project Setup

From simple-el/:

1. Delete content of twx-wc-sdk/ folder and replace with the content of wc-sdk-library
2. npm install

Development

• Review the simple-el.js demo web component
  • Review the out of the box ptcs web components implementation in twx-wc-sdk\

Testing

1. npm start
2. Open URL from prompt in a browser

Widget / Extension package

Documentation

• Packaging a Web Component as a ThingWorx Widget
• .md in wc-sdk-utility/doc

Setup

From simple-el-widget/:

1. Create tmp/ folder next to input/ and copy the simple-el web component folder to it, without the server configuration file

Development

• Review the various config files in input\
  • widget.json: extension definition (metadata.xml)
  • widgets\sample-el.json: widget definition
    • WC properties, services and events mapping, and more...
  • ui/simpleel/simpleel.runtime.js: custom widget code for behavior that cannot be implemented with mappings only

Build

Package the web component as Widget and build the Extension

mub