Skip to content

Extension - Web Component SDK

Quick Setup

Prerequisites

  1. NodeJS (version 8 or later) - tested with node 22
  2. Global npm packages 
    npm install -g npm
npm install -g gulp gulp-cli
npm install -g aurelia-cli
  3. VS Code recommended

Download

Use an installation path without spaces (at least on Windows)

ThingWorx Web Component SDK Utility Setup

In wc-sdk-utility/ :

  1. npm install
  2. npm link

Web Component Development

Documentation

Project Setup

In simple-el/:

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

Development

  • This is outside the scope of this post, but you may review:
    • simple-el.js demo web component
    • out of the box ptcs web components in twx-wc-sdk/

Testing

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

Widget / Extension package

Documentation

Setup

In simple-el-widget/:

  1. Create tmp/ folder next to input/ and copy the simple-el web component folder to it  (or replace its content if it already exists)

Development

  • This is outside the scope of this post, but you may review:
    • the Widget and Extension config files in input/
      • widgets.json: extension definition (metadata.xml)
      • widgets/sample-el.json: widget definition
        • Web Comp properties, services, events mapping and more...
    • ui/simpleel/simpleel.runtime.js: Widget custom code for behavior not achievable through mappings alone

Build

Package the web component as Widget and build the Extension 

mub

External Resources