# Creating Custom Widget

**URL:** <https://community.ofelia.com/t/creating-custom-widget/6099>\
**Category:** Q&A\
**Created:** [24 June 2015 16:51 UTC](https://community.ofelia.com/t/creating-custom-widget/6099 "2015-06-24T16:51:58Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![mtdonovan](https://avatars.discourse-cdn.com/v4/letter/m/bc79bd/32.png) [@mtdonovan](https://community.ofelia.com/u/mtdonovan)\
**Post date:** [24 June 2015 16:51 UTC](https://community.ofelia.com/t/creating-custom-widget/6099/1 "2015-06-24T16:51:58Z")

</div>

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);
};
}
}
`

---

<div class="post-metadata">

**Author:** ![system](https://europe1.discourse-cdn.com/flex013/uploads/community_bonitasoft/original/2X/6/6b7b18c0478f2645369e82e009b65e3b97f2cc12.svg) [@system](https://community.ofelia.com/u/system)\
**Post date:** [26 June 2015 10:01 UTC](https://community.ofelia.com/t/creating-custom-widget/6099/2 "2015-06-26T10:01:46Z")

</div>

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,

---

<div class="post-metadata">

**Author:** ![mtdonovan](https://avatars.discourse-cdn.com/v4/letter/m/bc79bd/32.png) [@mtdonovan](https://community.ofelia.com/u/mtdonovan)\
**Post date:** [26 June 2015 13:25 UTC](https://community.ofelia.com/t/creating-custom-widget/6099/3 "2015-06-26T13:25:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://europe1.discourse-cdn.com/flex013/uploads/community_bonitasoft/original/2X/6/6b7b18c0478f2645369e82e009b65e3b97f2cc12.svg) [@system](https://community.ofelia.com/u/system)\
**Post date:** [26 June 2015 13:32 UTC](https://community.ofelia.com/t/creating-custom-widget/6099/4 "2015-06-26T13:32:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![yannick.lombardi](https://avatars.discourse-cdn.com/v4/letter/y/8e8cbc/32.png) [@yannick.lombardi](https://community.ofelia.com/u/yannick.lombardi)\
**Post date:** [26 June 2015 13:34 UTC](https://community.ofelia.com/t/creating-custom-widget/6099/5 "2015-06-26T13:34:12Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![mtdonovan](https://avatars.discourse-cdn.com/v4/letter/m/bc79bd/32.png) [@mtdonovan](https://community.ofelia.com/u/mtdonovan)\
**Post date:** [26 June 2015 14:02 UTC](https://community.ofelia.com/t/creating-custom-widget/6099/6 "2015-06-26T14:02:32Z")

</div>

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);
};
}
`

---

<div class="post-metadata">

**Author:** ![mtdonovan](https://avatars.discourse-cdn.com/v4/letter/m/bc79bd/32.png) [@mtdonovan](https://community.ofelia.com/u/mtdonovan)\
**Post date:** [30 June 2015 12:42 UTC](https://community.ofelia.com/t/creating-custom-widget/6099/7 "2015-06-30T12:42:40Z")

</div>

This is still not working. please help.

---

<div class="post-metadata">

**Author:** ![system](https://europe1.discourse-cdn.com/flex013/uploads/community_bonitasoft/original/2X/6/6b7b18c0478f2645369e82e009b65e3b97f2cc12.svg) [@system](https://community.ofelia.com/u/system)\
**Post date:** [30 June 2015 14:06 UTC](https://community.ofelia.com/t/creating-custom-widget/6099/8 "2015-06-30T14:06:00Z")

</div>

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](http://jtblin.github.io/angular-chart.js/) library to add AngularJS support to Chart.js.

Cheers,

---

<div class="post-metadata">

**Author:** ![mtdonovan](https://avatars.discourse-cdn.com/v4/letter/m/bc79bd/32.png) [@mtdonovan](https://community.ofelia.com/u/mtdonovan)\
**Post date:** [30 June 2015 15:34 UTC](https://community.ofelia.com/t/creating-custom-widget/6099/9 "2015-06-30T15:34:35Z")

</div>

I double checked that both dependencies were included.

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

---

<div class="post-metadata">

**Author:** ![yannick.lombardi](https://avatars.discourse-cdn.com/v4/letter/y/8e8cbc/32.png) [@yannick.lombardi](https://community.ofelia.com/u/yannick.lombardi)\
**Post date:** [30 June 2015 15:43 UTC](https://community.ofelia.com/t/creating-custom-widget/6099/10 "2015-06-30T15:43:55Z")

</div>

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(…
`

---

<div class="post-metadata">

**Author:** ![system](https://europe1.discourse-cdn.com/flex013/uploads/community_bonitasoft/original/2X/6/6b7b18c0478f2645369e82e009b65e3b97f2cc12.svg) [@system](https://community.ofelia.com/u/system)\
**Post date:** [1 July 2015 08:00 UTC](https://community.ofelia.com/t/creating-custom-widget/6099/11 "2015-07-01T08:00:51Z")

</div>

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,

---

<div class="post-metadata">

**Author:** ![yannick.lombardi](https://avatars.discourse-cdn.com/v4/letter/y/8e8cbc/32.png) [@yannick.lombardi](https://community.ofelia.com/u/yannick.lombardi)\
**Post date:** [1 July 2015 08:03 UTC](https://community.ofelia.com/t/creating-custom-widget/6099/12 "2015-07-01T08:03:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://europe1.discourse-cdn.com/flex013/uploads/community_bonitasoft/original/2X/6/6b7b18c0478f2645369e82e009b65e3b97f2cc12.svg) [@system](https://community.ofelia.com/u/system)\
**Post date:** [1 July 2015 08:06 UTC](https://community.ofelia.com/t/creating-custom-widget/6099/13 "2015-07-01T08:06:07Z")

</div>

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,

---

<div class="post-metadata">

**Author:** ![yannick.lombardi](https://avatars.discourse-cdn.com/v4/letter/y/8e8cbc/32.png) [@yannick.lombardi](https://community.ofelia.com/u/yannick.lombardi)\
**Post date:** [1 July 2015 12:22 UTC](https://community.ofelia.com/t/creating-custom-widget/6099/14 "2015-07-01T12:22:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![DrakunDry](https://dub1.discourse-cdn.com/flex013/user_avatar/community.ofelia.com/drakundry/32/1214_2.png) [@DrakunDry](https://community.ofelia.com/u/DrakunDry)\
**Post date:** [12 March 2016 01:00 UTC](https://community.ofelia.com/t/creating-custom-widget/6099/15 "2016-03-12T01:00:01Z")

</div>

thanks its work for me

---

<div class="post-metadata">

**Author:** ![Dibyajit.Roy](https://avatars.discourse-cdn.com/v4/letter/d/7ea924/32.png) [@Dibyajit.Roy](https://community.ofelia.com/u/Dibyajit.Roy)\
**Post date:** [4 February 2017 13:58 UTC](https://community.ofelia.com/t/creating-custom-widget/6099/16 "2017-02-04T13:58:27Z")

</div>

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.