Things checked:

• dev build completed successfully as per README
• new widget resource added as module http://localhost:5000/static/widgets/thingsboard-extension-widgets.js as per README
• Loading http://localhost:5000/static/widgets/thingsboard-extension-widgets.js works fine.. It's a CORS issue.

It would seem CORS security was tightened up in defaults elsewhere.
It likely needs to allow localhost:5000 by default.

Where / how is this done?

pom.xml

                <plugin>
                    <groupId>com.mycila</groupId>
                    <artifactId>license-maven-plugin</artifactId>
                    <version>3.0</version>
                    <configuration>
                        <skip>true</skip>

The included configuration gives ThingsBoard the Copyright which is likely never what anyone using this repository wants. Perhaps it is easiest to leave the license header at the top of your included examples and just disable the inspection by default?

Then the repository user can delete ThingsBoard's examples, change the license and re-enable the inspection. With the inspection enabled by default following the "mvn" commands in the README with a different license header will give errors and will not complete.

Hi, I'm having a problem using the debugger keyword; it doesn't work when placed in a component .ts file. It works fine inside the thingsboard widget editor but not on the tb-extensions repository.

I don't know if this is an angular problem or if I need to enable something in TB.

I appreciate any help 🙏

If I don't use my own ../query, which has copies of these, the widgets will fail to load and browser console shows that they cannot be found.

Example:

import {
  BooleanOperation,
  EntityData,
  EntityKeyType,
  EntityKeyValueType,
  EntityDataQuery,
  FilterPredicateType,
  NumericOperation,
  StringOperation,
} from "../query"

All of the above enums / interfaces are missing from @shared/public-api.

Using IDE suggestion / feature to auto-import missing, it does:

import {
  EntityDataQuery,
  BooleanOperation,
  EntityData,
  EntityKeyType,
  EntityKeyValueType,
  FilterPredicateType,
  NumericOperation,
  StringOperation,
} from "@shared/models/query/query.models"

The worst part is that clean install -P yarn-start completes without error.

These are certainly part of the public api because these are all offered in the "ThingsBoard REST API" page at /swagger-ui/#.

Can these please get added into the public-api?

Hello!
We have a repository with our custom widgets for Thingsboard and are trying to setup unit testing using jest.
Is there any documentation or example repo we can start from?
Thanks!

README says to use static/widgets/thingsboard-extension-widgets.js but this value is what actually works static/thingsboard-extension-widgets.js ("widgets" folder must be removed from path).

Unable to bundle WidgetSettings

import { WidgetSettings, WidgetSettingsComponent } from "@shared/models/widget.models";`

causes this:

[INFO] WARNING: "@shared/models/widget.models" is imported by "dist/widget-extension/esm2020/dashboard/gateway-config-settings/gateway-config-settings.component.mjs", but could not be resolved – treating it as an external dependency.

which then makes the final bundle broken / unusable.

Is there another way to import those classes?

I was trying to make some nice custom settings as done in:
widget/lib/settings/alarm/alarm-count-widget-settings.component.ts

https://github.com/thingsboard/thingsboard-extensions/blame/a320b4da0072f43c2ca7d797503c7dfae4048b27/thingsboard-extension-docker/pom.xml#L29

It's not :
<extension.folder>/usr/share/thingsboard/extenstions</extension.folder>
but :
<extension.folder>/usr/share/thingsboard/extensions</extension.folder>

best regards
loïc HOURDIN

I tried to add custom widget in state and then added that state inside markdown card

<tb-dashboard-state style="height:100%" [ctx]="ctx" stateId="test">

when we use custom widgets in markdown card it gives error

app/shared/models/alias.models.d.ts

export type EntityFilters = SingleEntityFilter & EntityListFilter & EntityNameFilter & EntityTypeFilter & StateEntityFilter & AssetTypeFilter & DeviceTypeFilter & EdgeTypeFilter & EntityViewFilter & RelationsQueryFilter & AssetSearchQueryFilter & DeviceSearchQueryFilter & EntityViewSearchQueryFilter & EntitySearchQueryFilter & EdgeSearchQueryFilter;

export interface EntityAliasFilter extends EntityFilters {
    type?: AliasFilterType;
    resolveMultiple?: boolean;
}

Notice that EntityAliasFilter is not part of EntityFilters. Is this correct?

Resources

[X] Is module -- http://localhost:5000/static/widgets/thingsboard-extension-widgets.js

HTML

<tb-example></tb-example>

CSS

None / Blank / Empty

JavaScript

None / Blank / Empty

Settings Schema

None / Blank / Empty

Data Key Schema

None / Blank / Empty

Steps Taken

1. Run fresh ThingsBoard container
   • FROM thingsboard/tb-postgres:3.5.0
2. Clone thingsboard-extensions repo
3. Checkout release-3.5 branch
4. Change package.json - devDependency of thingsboard to non PE version.
   • "thingsboard": "https://github.com/thingsboard/thingsboard-ui-types.git#release/3.5",
5. Run mvn clean install -DskipTests
6. cd widgets
7. Run mvn clean install -P yarn-start

I have noticed several properties missing from interface WidgetContext in widget-component.model.ts.

For example: currentUser as suggested in StackOverflow seems to be the proper way to get the current user but isn't in the interface.

console.log(self.ctx) shows more services than what are listed in the interface as well.

Does self.ctx perhaps now have a new and different interface type?
custom-alarms-table-widget.component.ts still refers to WidgetContext.

@vvlladd28 suggested I checkout this repo over at thingsboard/thingsboard-ui-types#5. Thanks for taking the time to reply and make this suggestion.

I am struggling to understand this repo and get it functional for widget development on my dev PC. For me, it is not intuitive or easy to figure things out and get up and running. Perhaps I have misunderstood the purpose of this repo or am closer to getting everything working than I think.

I always struggle with issue reports like this because I always get the tone wrong and come across as really ungrateful and whiney. That is very much not my intent. I hope the detail provided below is seen as constructive criticism and in good taste. I genuinely want to work with this platform, help improve it and use it for work at various sites and make you guys some money in licensing (and us some money too for our scope of work). The plan would be to eventually integrate nurse call, access control, RTLS, BAS and other cloud platforms into the product and use the widgets as a "Single Pane of Glass" GUI along with the Rule Engine for custom logic and integration. Some of these I already have code for and could bring in quickly.

My expectations (perhaps wrong or too much) were:

1. clone the repo
2. see package.json and tsconfig.json in the root
3. do npm install or yarn install
4. look in examples folder and see various widgets.
5. configure some proxy settings to point to my dev thingsboard server
6. see scripts in package.json for start to run a local dev web server
7. try out some of the examples and see them on my browser

Widget example source code expectations (perhaps wrong or too much) were:

1. see imports of ThingsBoard interfaces, typedefs and classes at the top.
   • WidgetContext
   • IDynamicWidgetComponent
   • WidgetConfig
   • Datasource
   • RpcApi
   • IWidgetSubscription
2. see that the example subclasses some ThingsBoard Widget class.
3. have "IntelliSense" in WebStorm / VSCode (because TypeScript).
   • ctx is massive and having it type hinted as WidgetContext would go along way towards understanding how to use it.

Widget examples would have code for doing things like:

• use the RPC API
• subscribe to some values
• use the action API
• use datasources

(Likely many of the bundled widgets would suffice as examples if they were trimmed down a bit. Most examples don't need to look fancy or have fancy resizing operations, for example)

To fast forward to the very end, the example component code is literally just:

@Component({...})
export class ExampleComponent implements OnInit {
  constructor() { }
  ngOnInit() { }
}

Where is ctx for example? So the example wasn't any help and certainly didn't come close to my expectations.

I took some time to look around the repo some more to see if I could make more sense of things.

I found widgets/builders/static-serve/index.ts which somewhat sounds like it might be a debugging server. But it is in the widgets folder and is some sort of builder (based on the folder name) but I didn't really see any "building" code in the short amount of time I spent looking at it. The folder naming alone is very confusing. The config is confusing too. Apparently it's just a string. But there is an StaticServeConfig interface showing what looks like it might hold some JSON. Everything is too abstract and I don't see any comments or JSON schema to help me out.

I found widgets/patches/ng-packagr+12.2.7.patch. What is this doing in the widgets folder?
This isn't mentioned anywhere in the README. What do I do with it? It looks important.

I looked at custom-alarms-table-widget.component.ts and the selector is throwing a linting error (WebStorm) because it doesn't begin with "ts" (as specified in angular.json). I see some VSCode ignores in .gitignore so perhaps VSCode can be configured with more add-ons to pick stuff like that up. Also lines 691 and 692 show spelling mistakes on "aknowledge" instead of "acknowledge" (missing c after the first a). These are whatever mistakes.. just thought I'd mention them.

Learning from a 1000 line component class with massive blocks of commented out code is probably a really bad idea so I moved on.

I have no idea what the files in src/app/widgets/components/map are for. I checked usage of a few random exports and my WebStorm IDE didn't show any usage in the example widgets so I moved on. But maybe that is due to some missing typing (over use of any). No big deal.

The README in the root talks about a .jar file but I don't really see any Java code and the Widget exports I did from the UI myself created JSON files so I don't know what they are for / all about.

Wouldn't it make more sense to have a way to generate those JSON files of type interface WidgetType from the example code instead? Is there a better way to get complex widgets into a ThingsBoard server?

I tried looking in the UI for sample RPC code. The Led indicator Control widget is basically missing it's HTML and JavaScript code in the UI. Obviously the ThingsBoard dev team is doing their widget development outside their ThingsBoard GUI. Is using the Widget UI for developing less than very simple Widgets a reasonable, maintainable idea?

I was thinking this repo is intended for developers of complex widgets that are too complex for the ThingsBoard widget development UI. If not, could we perhaps work towards that?

I can create Angular sites outside the ThingsBoard framework just fine.
I can add and configure devices with attributes and relations just fine.
I can write custom rule chains and augment them with other attributes just fine.
I can push in data via MQTT from external source just fine.
I can use the web API and Swagger UI to manipulate data and delete my garbage data.
What I can't quite get going is fancy widget development.
Is this a pain point of the architecture or am I simply doing something wrong and or expecting too much?

If you made it this far, big thank you for your time.

Hello,

First of all, I would like to start by saying that this feature is fantastic. I'm using it, and I love it.

I read the READ.md file and I'm currently using this in production. I have a question though, how can I import the TbFloat module?

I tried the @home import, but I don't think it works.

Any help will be highly appreciated.