Custom Widget

said.soussi_1406021's picture

Widgets et réalisation à destination de la communauté

Data Table custom widget current page number binding

I created a data table custom widget and I need to get a current page number in order to use Identity API such as


I could get the current page number inside widget like

I created a Bidirectional bond property to link together.
However, I dont get the right result.
I would appreciate if someone gives me an idea.

Thanks in advance

Custom widget to masking text


I need to create a masking custom widget. My use case is as follows.

The text in the textbox should be masked based on pattern specified. The initial use case is, if the number is "68966486" then the widget should render "****6486". I wanted it to extend it so that it could mask based on the regular expression to make it more generic.

In order to achieve it, I tried the following so far.

Having Trouble With Custom Widget... Works as custom page, but cant get to work in custom widget

I created a custom page that displays an LHC-Lform in a bonita page, but when I try to get the same functionality into a widget it fails. I am sure it has something to do with the way I set the controller, but I cant determine what I have done wrong.

I appreciate any help you can provide to make this work. Thanks!

Link to zip file of Working Page -

How to define angular js filter in Custom widget in UI designer.


I need to create a simple custom widget with Angular Js.

I define the app controller inside the controller

app.filter('startFrom', function() {

return function(input, start) {
    start = +start;
    return input.slice(start);


var startFrom= $filter('filter');

    startFrom([],  function(input, start) {
            if (input) {
        start = +start;
       return input.slice(start);
    return [];

However, it seems not working.

The template code is

Angular js with custom widget : uib-pagination is not working.

I created a simple custom widget with angular js.

The code is simple.
I added angular js asset.

however,** uib-pagination** didn't appear in UI preview.
I would like to know if I miss some part.
Any help appreciated .



multiselect dropdown custom widget

How to fire the Custom Widget

I have a page with a Select and a Text Field from a Custom Widget in it.

When I change the Select I need the Custom Widget to fire so the Text Field can be updated.

It seems the Custom Widget only fires once on page load which means I'm not able to update my data.

Can anyone tell me how to fire my Custom Widget based on the change of a Select?

Many thanks in advance


I would like to make my own custom submit button

I would like to make my own custom submit button.
What I want is that when I click the new submit button, it will open a popup window to show some messages to the user. The submit button I created so far opens a popup message but I am not sure how the submit in Bonita actually works.

In the Custom widget editor, I used html tag <input type="submit> to create a submit button, but it doesn't seem to be working and the page stays in the same page. How can I create a custom submit button and how to send the data on click?

How to create a custom button that run a function called in properties?


i need to call a function in UI design only when a button ( or custom button ) is pressed.

I create a javascript variable that print all the input that the customer wrote in the forms.

it work but i need to call it with a click on the button only when the customer compiled all the data.

i tried to create a custom widget that run a function added in properties value but it doesn't work.

here the code:


Create PDF