Custom Widget property type to support JSON data : Bonita 7

1
0
-1

I am trying to create a new custom widget in Bonita 7 and I need a Property that can accept JSON data (not simple array collection) i.e., I want to assign below data
[
{
'header1': 'data1-1',
'header2': 'data1-2',
'header3': 'data1-3'
},
{
'header1': 'data2-1',
'header2': 'data2-2',
'header3': 'data2-3'
}
]

I tried all the available property types (text,choice ,html ,integer,boolean ,collection property) & I guess nothing works.
Could someone help me to achieve this.

I am trying to create a Smart-Table custom widget (https://github.com/lorenzofox3/Smart-Table).
I want the table data(rows) to be populated using a variable that is of JSON type.

Is there any other way of achieving this.

Thank you very much for your time

Comments

Submitted by Sean McP on Mon, 08/31/2015 - 10:28

Rather than use a property, have you tried creating a form variable with your data and then using that in your custom widget? That way you could get your data from the process (or where-ever it comes from), and you can update it accordingly. Properties are designed to be and not variable.

regards.

Submitted by chakrabandla on Mon, 08/31/2015 - 10:38

Hi Sean,
Thank you very much for the reply.

How can I access a form variable inside template or controller of custom widget editor.
I tried this way : $data.myVaraible

Thank you

Submitted by Sean McP on Mon, 08/31/2015 - 10:47

have you tried {{ $data.myVaraible }}?

Submitted by chakrabandla on Tue, 09/01/2015 - 06:51

Hi Sean,
I am very sorry, collection property type actually works
and, I couldn't still figure out how to access a form variable inside template or controller of custom widget editor. Both $data.myVaraible & {{$data.myVaraible}} doesn't work.
Thank you very much for your help. Sorry for wasting your time.

Submitted by chakrabandla on Wed, 09/02/2015 - 02:11

I elaborated my answer :)

2 answers

1
+1
-1
This one is the BEST answer!

I am very sorry, collection property type actually works

This is what I did:

  1. In the CUSTOM WIDGET EDITOR

1A) created a new property :
name : tableDataCollection
Label: TABLE_DATA
Type: collection (text type also works)
Default value: (trying to assign JSON data here didn't work for me)

1B) In the Controller box, use the property tableDataCollection defined in step 1A:

$scope.data = $scope.properties.tableDataCollection; (inside function ($scope) {})

1C) In the Template box, use the variable data defined in step 1B:
example : <tr ng-repeat="row in data">
2) In the PAGE EDITOR (FORM EDITOR), if you are using the custom widget created in step 1, you will see a new fields on the right related to your custom widget. In my case it is TABLE_DATA

2A) Now, create a new form variable of type JSON.

example : data2Var =

[{
"header1": "data1-1",
"header2": "data1-2",
"header3": "data1-3"
},
{
"header1": "data2-1",
"header2": "data2-2",
"header3": "data2-3"
}]

2B) Now, Assign the variable created in step 2A to your custom widget field.
in my case, I assigned data2Var to TABLE_DATA

Comments

Submitted by Sean McP on Wed, 09/02/2015 - 20:45

Excellent, I was wondering how you did it.

thanks for publishing how you did it, regards

Submitted by Dibyajit.Roy on Thu, 02/16/2017 - 12:06

Hi
I know this is late in coming but could you share the complete code for the template section.
Thanks

1
0
-1

This works, but using an External API JSON variable, it does not populate. The Same JSON array does if created statically as a variable.

Am I missing something here about when the external api calls are evaluated?

Comments

Submitted by otya77 on Mon, 07/25/2016 - 12:18

I have the same issue.
When I assign a JSON type variable it works (my select list populated), but when I change to an External API it doesn't. The JSON variable uses the same data that the Ext.Api provides.

Is this normal?

Notifications