Creating Custom Widget

Hello Bonita Team,

I just downloaded version 7 Community Version and I’m having some issues creating custom widget. I want to create a bar chart widget, but I’m unsure what I’m doing incorrectly. When I add the widget to the existing form getting empty container.

I’m using Chart.js as asset.

I’m using static data first to just try to get the widget to work.

Template

Controller

function LineCtrl($scope) {

$scope.labels = [“January”, “February”, “March”, “April”, “May”, “June”, “July”];
$scope.series = [‘Series A’, ‘Series B’];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
}
}

1 Like

Hi,

You should not re-declare a controller in your widget template (we already do that for you) so you will need to drop that part:

ng-controller=“LineCtrl”

Then, your controller code will just need to be updated as following:

function ($scope) {
// your controller code
}

Hope this helps,

Removed declarations. Still getting a “Missing Name in function declaration”.

The widget looks better on the form designer, however, still not showing up on the form at execution. Is there something else I have to include? I’m unsure how to upload images to demonstrate.

Please share an updated version of your widget code and template.
I note that in your previous version you had an extra closing bracket at line 13.

@mtdonovan
This is not an error message. I have the same message on my custom widget but it is just a warning.
The custom wigdet works even if there is this message.

Template

Controller

function ($scope) {

$scope.labels = [“January”, “February”, “March”, “April”, “May”, “June”, “July”];
$scope.series = [‘Series A’, ‘Series B’];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
}

This is still not working. please help.

Hi,

Could you check with a developer console (press F12 on most browsers):

  • if you have some JS errors at runtime or when previewing the widget in a form?
  • if your assets are correctly loaded

Also, I just noticed that but you should also use the Angular Chart library to add AngularJS support to Chart.js.

Cheers,

I double checked that both dependencies were included.

Issue found: module syntax was not correct. Included chart.js under Required angular modules

I try your code with the chart.js asset and I have this beautiful error :

Error: [$injector:modulerr] http://errors.angularjs.org/1.3.11/$injector/modulerr?p0=pb.generator&p1=[%24injector%3Amodulerr]%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.11%2F%24injector%2Fmodulerr%3Fp0%3Dchart.js%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.3.11%252F%2524injector%252Fnomod%253Fp0%253Dchart.js%250AT%252F%253C%2540http%253A%252F%252Flocalhost%253A14317%252Fbonita%252Fportal%252Fresource%252FtaskInstance%252FtestCustomTableWidget%252F1.0%252FStep1%252Fcontent%252Fjs%252Fvendor.min.js%253A6%253A417%250AOd%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A14317%252Fbonita%252Fportal%252Fresource%252FtaskInstance%252FtestCustomTableWidget%252F1.0%252FStep1%252Fcontent%252Fjs%252Fvendor.min.js%253A21%253A366%250Aa%2540http%253A%252F%252Flocalhost%253A14317%252Fbonita%252Fportal%252Fresource%252FtaskInstance%252FtestCustomTableWidget%252F1.0%252FStep1%252Fcontent%252Fjs%252Fvendor.min.js%253A21%253A7%250AOd%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A14317%252Fbonita%252Fportal%252Fresource%252FtaskInstance%252FtestCustomTableWidget%252F1.0%252FStep1%252Fcontent%252Fjs%252Fvendor.min.js%253A21%253A1%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%253A14317%252Fbonita%252Fportal%252Fresource%252FtaskInstance%252FtestCustomTableWidget%252F1.0%252FStep1%252Fcontent%252Fjs%252Fvendor.min.js%253A35%253A354%250As%2540http%253A%252F%252Flocalhost%253A14317%252Fbonita%252Fportal%252Fresource%252FtaskInstance%252FtestCustomTableWidget%252F1.0%252FStep1%252Fcontent%252Fjs%252Fvendor.min.js%253A7%253A300%250Ag%2540http%253A%252F%252Flocalhost%253A14317%252Fbonita%252Fportal%252Fresource%252FtaskInstance%252FtestCustomTableWidget%252F1.0%252FStep1%252Fcontent%252Fjs%252Fvendor.min.js%253A35%253A202%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%253A14317%252Fbonita%252Fportal%252Fresource%252FtaskInstance%252FtestCustomTableWidget%252F1.0%252FStep1%252Fcontent%252Fjs%252Fvendor.min.js%253A35%253A371%250As%2540http%253A%252F%252Flocalhost%253A14317%252Fbonita%252Fportal%252Fresource%252FtaskInstance%252FtestCustomTableWidget%252F1.0%252FStep1%252Fcontent%252Fjs%252Fvendor.min.js%253A7%253A300%250Ag%2540http%253A%252F%252Flocalhost%253A14317%252Fbonita%252Fportal%252Fresource%252FtaskInstance%252FtestCustomTableWidget%252F1.0%252FStep1%252Fcontent%252Fjs%252Fvendor.min.js%253A35%253A202%250AOb%2540http%253A%252F%252Flocalhost%253A14317%252Fbonita%252Fportal%252Fresource%252FtaskInstance%252FtestCustomTableWidget%252F1.0%252FStep1%252Fcontent%252Fjs%252Fvendor.min.js%253A38%253A435%250Asc%252Fd%2540http%253A%252F%252Flocalhost%253A14317%252Fbonita%252Fportal%252Fresource%252FtaskInstance%252FtestCustomTableWidget%252F1.0%252FStep1%252Fcontent%252Fjs%252Fvendor.min.js%253A17%253A350%250Asc%2540http%253A%252F%252Flocalhost%253A14317%252Fbonita%252Fportal%252Fresource%252FtaskInstance%252FtestCustomTableWidget%252F1.0%252FStep1%252Fcontent%252Fjs%252Fvendor.min.js%253A18%253A153%250AJd%2540http%253A%252F%252Flocalhost%253A14317%252Fbonita%252Fportal%252Fresource%252FtaskInstance%252FtestCustomTableWidget%252F1.0%252FStep1%252Fcontent%252Fjs%252Fvendor.min.js%253A16%253A483%250A%2540http%253A%252F%252Flocalhost%253A14317%252Fbonita%252Fportal%252Fresource%252FtaskInstance%252FtestCustomTableWidget%252F1.0%252FStep1%252Fcontent%252Fjs%252Fvendor.min.js%253A250%253A276%250Aa%2540http%253A%252F%252Flocalhost%253A14317%252Fbonita%252Fportal%252Fresource%252FtaskInstance%252FtestCustomTableWidget%252F1.0%252FStep1%252Fcontent%252Fjs%252Fvendor.min.js%253A164%253A283%250Alf%252Fc%2540http%253A%252F%252Flocalhost%253A14317%252Fbonita%252Fportal%252Fresource%252FtaskInstance%252FtestCustomTableWidget%252F1.0%252FStep1%252Fcontent%252Fjs%252Fvendor.min.js%253A32%253A358%250A T%2F<%40http%3A%2F%2Flocalhost%3A14317%2Fbonita%2Fportal%2Fresource%2FtaskInstance%2FtestCustomTableWidget%2F1.0%2FStep1%2Fcontent%2Fjs%2Fvendor.min.js%3A6%3A417 g%2F<%40http%3A%2F%2Flocalhost%3A14317%2Fbonita%2Fportal%2Fresource%2FtaskInstance%2FtestCustomTableWidget%2F1.0%2FStep1%2Fcontent%2Fjs%2Fvendor.min.js%3A36%3A98 s%40http%3A%2F%2Flocalhost%3A14317%2Fbonita%2Fportal%2Fresource%2FtaskInstance%2FtestCustomTableWidget%2F1.0%2FStep1%2Fcontent%2Fjs%2Fvendor.min.js%3A7%3A300 g%40http%3A%2F%2Flocalhost%3A14317%2Fbonita%2Fportal%2Fresource%2FtaskInstance%2FtestCustomTableWidget%2F1.0%2FStep1%2Fcontent%2Fjs%2Fvendor.min.js%3A35%3A202 g%2F<%40http%3A%2F%2Flocalhost%3A14317%2Fbonita%2Fportal%2Fresource%2FtaskInstance%2FtestCustomTableWidget%2F1.0%2FStep1%2Fcontent%2Fjs%2Fvendor.min.js%3A35%3A371 s%40http%3A%2F%2Flocalhost%3A14317%2Fbonita%2Fportal%2Fresource%2FtaskInstance%2FtestCustomTableWidget%2F1.0%2FStep1%2Fcontent%2Fjs%2Fvendor.min.js%3A7%3A300 g%40http%3A%2F%2Flocalhost%3A14317%2Fbonita%2Fportal%2Fresource%2FtaskInstance%2FtestCustomTableWidget%2F1.0%2FStep1%2Fcontent%2Fjs%2Fvendor.min.js%3A35%3A202 Ob%40http%3A%2F%2Flocalhost%3A14317%2Fbonita%2Fportal%2Fresource%2FtaskInstance%2FtestCustomTableWidget%2F1.0%2FStep1%2Fcontent%2Fjs%2Fvendor.min.js%3A38%3A435 sc%2Fd%40http%3A%2F%2Flocalhost%3A14317%2Fbonita%2Fportal%2Fresource%2FtaskInstance%2FtestCustomTableWidget%2F1.0%2FStep1%2Fcontent%2Fjs%2Fvendor.min.js%3A17%3A350 sc%40http%3A%2F%2Flocalhost%3A14317%2Fbonita%2Fportal%2Fresource%2FtaskInstance%2FtestCustomTableWidget%2F1.0%2FStep1%2Fcontent%2Fjs%2Fvendor.min.js%3A18%3A153 Jd%40http%3A%2F%2Flocalhost%3A14317%2Fbonita%2Fportal%2Fresource%2FtaskInstance%2FtestCustomTableWidget%2F1.0%2FStep1%2Fcontent%2Fjs%2Fvendor.min.js%3A16%3A483 %40http%3A%2F%2Flocalhost%3A14317%2Fbonita%2Fportal%2Fresource%2FtaskInstance%2FtestCustomTableWidget%2F1.0%2FStep1%2Fcontent%2Fjs%2Fvendor.min.js%3A250%3A276 a%40http%3A%2F%2Flocalhost%3A14317%2Fbonita%2Fportal%2Fresource%2FtaskInstance%2FtestCustomTableWidget%2F1.0%2FStep1%2Fcontent%2Fjs%2Fvendor.min.js%3A164%3A283 lf%2Fc%40http%3A%2F%2Flocalhost%3A14317%2Fbonita%2Fportal%2Fresource%2FtaskInstance%2FtestCustomTableWidget%2F1.0%2FStep1%2Fcontent%2Fjs%2Fvendor.min.js%3A32%3A358

…of e?JSON.stringify(e):e;c+=d(e)}return Error(c)}}function Ta(b){if(null==b||Ua(…

Hi,

If your provide these settings, it will work (note: the chart is only rendered in preview window or at runtime):

Template


Controller

function ($scope) {
$scope.labels = [“January”, “February”, “March”, “April”, “May”, “June”, “July”];
$scope.series = [‘Series A’, ‘Series B’];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
}

Assets (order is important)

angular-chart.css
Chart.min.js
angular-chart.min.js

Required angular modules

chart.js

Hope this helps,

Thanks.
I only had Chart.js without the other assets.
Did you use external link or did you include all the file in your process ?
I will try with all this asset.

I used local assets.

As I earlier wrote in this post, you really need the “Angular Charts” library to enable the support of “Chart js” library with AngularJS.

Cheers,

Now it works.
I noticed that you need to include Chart.min.js before angular-chart.min.js.

thanks its work for me

Hi

Could Anyone Export the Widget and share it.
I have tried the Above example but I dont see any Preview. Its blank.
I was hoping to review the Final widget to see where I made the Mistake.
Also Please share the Asset files required as well.
thanks.