How to add a process variable into an UI designer form? (Bonita 7)

Submitted by gael.tarot on Mon, 08/17/2015 - 15:46
1
0
-1

Hello!

My company recently tried to test Bonita 7, and I have to create a new process. So I choosed to create it with UI designer forms instead of 6.x forms.
But there is really easy things to do with 6.x forms that I can't perform with UI designer (it may be really simple too, I just didn't find how to do it).

One of these things is just adding a process variable value into this form :

  • I would like to have an autocompleted field (extracted from our LDAP directory).

  • The autocompletion values are present in an ArrayList Process Variable called commonNames (it contains employees names)
    474179commonList.jpg

  • My wish is one of the form input to be autocompleted with this ArrayList values. I didn't have any problem to do that using the 6.5x Application mode, but I don't want a "legacy" form.

  • I created a new contract to instantiate the form I want to work with. But in that contract, there is no way to add any Process variable (only Business Data Models, in which I can't put a List).
    747941bdm.jpg

  • When I am in UI Designer, I have no possibility to easily add any variable from my project. I tried to call it with a solution I found in Bonita forums (REST AOI) : ../{{context.listeCommonNames_ref.link}}, but I think it's only for Business Variables, and not for Process variables...

I am a beginner so I don't know JSON, JS,... I just have knowledges in Java and basic HTML and I looked for solutions into Bonita Documentations, which I couldn't find.

Thank you very much for your help!

Comments

Submitted by ttoine on Fri, 08/21/2015 - 17:07

did you have a look at the video tutorials we did ?
http://community.bonitasoft.com/video-tutorials-custom-pages-application...

http://community.bonitasoft.com/blog/examples-and-video-tutorials-bonita...

Permalink
Submitted by gael.tarot on Wed, 08/26/2015 - 09:13

Hello ttoine,

I didn't find these videos, so I just watched them, they are very interesting and I know a bit more on UI Designer now.

However, I have a problem. I tried to have my context variable displayed into my form (to understand what it contains for my process), like in this video http://www.bonitasoft.com/for-you-to-read/videos/bonita-bpm-7-ui-designe... (around 10 min).

So I just added the variable {{context | json}} in a text field (which is not hidden). My context variable is correctly declared (has been declared automatically while creating the form).

976657context.png

However, when I execute the process and access to the form, the field is blank, as if the context variable was not recognized or something like that... I've also tried to put {{context}} without the JSON "cast", it' s not working neither.
In addition, I've done the same thing with the error field (creating an error variable when submitting with error) and it's working fine.

Do you have an idea?

Permalink
4 answers

Submitted by baigaziev1997_1... on Wed, 05/29/2019 - 12:11
1
0
-1

Hello, I have a simple questions, how to show value of variable in browser?
for example: I have local variable 'a' equal 'helloworld' in studio, how to show this text???

Comments

Submitted by sithara_1989699 on Wed, 03/03/2021 - 13:27

Add console.log(variable); to your variable.

Permalink

Submitted by baigaziev1997_1... on Wed, 05/29/2019 - 12:08
1
0
-1
ssd

Submitted by gael.tarot on Thu, 09/10/2015 - 15:25
1
0
-1

Hello,

I installed Studio 7.0.3 (due to blocking bugs on 7.0.2) and my form is completetly non-working now...
I can't even type a character in the different inputs and I have multiple errors on my browser :
Error: [$parse:syntax] http://errors.angularjs.org/1.3.11/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bcontext%20%7C%20json%7D%7D&p4=%7Bcontext%20%7C%20json%7D%7D
at Error (native)
at http://localhost:8080/bonita/portal/resource/taskInstance/ChangementNaN%27affectation%d%27un%20employ%C3%A9/6.0/Form%filling%20/content/js/vendor.min.js:6:417
at hb.throwError (http://localhost:8080/bonita/portal/resource/taskInstance/Changement%d%27affectation%d%27un%20employ%C3%A9/6.0/Form%filling%20/content/js/vendor.min.js:190:254)
at hb.object (http://localhost:8080/bonita/portal/resource/taskInstance/Changement%d%27affectation%d%27un%20employ%C3%A9/6.0/Form%filling%20/content/js/vendor.min.js:199:435)
at hb.primary (http://localhost:8080/bonita/portal/resource/taskInstance/Changement%d%27affectation%d%27un%20employ%C3%A9/6.0/Form%filling%20/content/js/vendor.min.js:189:308)
at hb.unary (http://localhost:8080/bonita/portal/resource/taskInstance/Changement%d%27affectation%d%27un%20employ%C3%A9/6.0/Form%filling%20/content/js/vendor.min.js:197:82)
at hb.multiplicative (http://localhost:8080/bonita/portal/resource/taskInstance/Changement%d%27affectation%d%27un%20employ%C3%A9/6.0/Form%filling%20/content/js/vendor.min.js:196:324)
at hb.additive (http://localhost:8080/bonita/portal/resource/taskInstance/Changement%d%27affectation%d%27un%20employ%C3%A9/6.0/Form%filling%20/content/js/vendor.min.js:196:182)
at hb.relational (http://localhost:8080/bonita/portal/resource/taskInstance/Changement%d%27affectation%d%27un%20employ%C3%A9/6.0/Form%filling%20/content/js/vendor.min.js:196:48)
at hb.equality (http://localhost:8080/bonita/portal/resource/taskInstance/Changement%d%27affectation%d%27un%20employ%C3%A9/6.0/Form%filling%20/content/js/vendor.min.js:195:418)(anonymous function) @ vendor.min.js:103
11vendor.min.js:103TypeError: Cannot set property value of #<Object> which has only a getter
at gb (vendor.min.js:104)
at f.assign (vendor.min.js:107)
at $$writeModelToScope (vendor.min.js:225)
at vendor.min.js:225
at l (vendor.min.js:224)
at g (vendor.min.js:223)
at $$runValidators (vendor.min.js:224)
at $$parseAndValidate (vendor.min.js:225)
at $commitViewValue (vendor.min.js:224)
at vendor.min.js:226
I watched the Bonita logs and I can't see any error, only one warning :
*WARNING: Cannot find the resource file D:\Installation\BonitaBPMSubscription-7.0.3\workspace\tomcat\bonita\client\tenants\1\work\pages\p5284126599902450673_custompage_ChangementAffectation\resources\js\angular-messages.min.js.map
*

How could I share my process with you for further investigations?

Comments

Submitted by philippe.ozil on Thu, 09/10/2015 - 17:00

Please open an issue on the Community bug tracker here:
https://bonita.atlassian.net

This will allow you to upload your process and we can check if it is a product issue.

Cheers,

Permalink
Submitted by gael.tarot on Fri, 09/11/2015 - 10:25

Hello Philippe,
I've just opened an issue, with my .bos file. I hope you will have more informations with this!

Permalink

Submitted by mtdonovan on Fri, 08/21/2015 - 16:10
1
0
-1

You can review this issue.
http://community.bonitasoft.com/node/2244#node-4722

One way I performed this in the GUI is to add a variable with External API.

../API/bpm/caseVariable?p=0&c=10&f=case_id={{caseID}}

This gave me the JSON object to parse from. I then created another variable processVar which I grabbed the array value like so

var result = $data.caseVariables[6].value; return result; with javascript expression.

Finally I added text display with processVar to show process variable.

Comments

Submitted by gael.tarot on Mon, 08/24/2015 - 17:18

Thank you for your answer mtdonovan.

I'll try that tomorrow and I'll tell you if it's working!

Thanks for your help.

Permalink
Submitted by gael.tarot on Wed, 08/26/2015 - 09:19

Unfortunately, I have the same problem than with context variable with my newly created variable (that I called "variables") which is calling an external API :

../API/bpm/caseVariable?p=0&c=10&f=case_id={{caseID}}

I can't even display it using {{variables | json}}...

Permalink
Submitted by philippe.ozil on Wed, 08/26/2015 - 16:58

Hi,

I tried to reproduce your issue with a very simple process but it works on 7.0.2.
Lets try to investigate more together.

First, remember that the context is only available at runtime on a process step.
It will not show up in the UI Designer or on a case instantiation form.

That said, please open your browser's developer console (hit F12 on most browsers) and check for errors.
There could be some JS errors that prevent your page from displaying correctly.

If there is no apparent error, check in the network traffic - still with the web developer tools - the response of the HTTP request to retrieve the context:

Let us know, the outcome.

Cheers,

Permalink
Submitted by gael.tarot on Sat, 08/29/2015 - 11:35

Hello,

I just migrated to 7.0.2 and I have the same problem.

The context call is present in a process step, which is not instanciation form. Here is a little view of my process :
mini_188149Processteaser.png

My form is under the "Form Filling step". We have no instanciation form (because I want to get users resent in LDAP for autocompletion in the form).

I already have submitted my form appearance under UI Designer (cf. my previous post), that's what he looks like when executing the process :
mini_656874Formexecution.png

context should be here... I think that's why I don't have any access to my variables.

Permalink
Submitted by philippe.ozil on Tue, 09/08/2015 - 16:43

Ok, thanks for the additional information but have you checked your browser's developer console for potential JS errors and HTTP requests?

Permalink
Submitted by gael.tarot on Wed, 09/09/2015 - 12:33

Hello!
I just checked my browser (Chrome) developer's console. I have several errors indeed :

  • GET http://localhost:8080/bonita/portal/resource/taskInstance/Changement%20d...
    This error is due to a CSS sheet which is not found (don' know why, I have ton investigate), so it's not related to our bug.

  • GET http://localhost:8080/bonita/API/bpm/userTask/181/context 500 (Internal Server Error)b @ vendor.min.js:87m @ vendor.min.js:83$get.f @ vendor.min.js:80(anonymous function) @ vendor.min.js:112$get.l.$eval @ vendor.min.js:126$get.l.$digest @ vendor.min.js:123$get.l.$apply @ vendor.min.js:126l @ vendor.min.js:81O @ vendor.min.js:86w.onload @ vendor.min.js:87
    This one should be linked to our problem! I can see the server response is {"exception":"class java.lang.NullPointerException","message":null}

What is a little disturbing is that there is no error for getting {{variables}} (with value *../API/bpm/caseVariable?p=0&c=10&f=case_id={{caseID}} *), however, I don't have anything displayed in my form. Observing the Network tab of Developer view I can't see that it tries to get it.

Permalink
Submitted by philippe.ozil on Thu, 09/10/2015 - 16:53

You may safely ignore the CSS error: this is a know issue with no consequence other than the trace.

However, as you observed, the second issue is clearly related to the context variable not showing up.
This error originates from the Java back end, could you please check the engine logs to see if there is a more detailed stack trace there. To access it, use the Studio's top menu: Help > Bonita BPM Engine Log

If you do not find anything there could you share your process so that we investigate further?

Permalink
Submitted by gael.tarot on Mon, 09/21/2015 - 17:24

After several bugs and problems, I almost did it!

I can import without problem my ArrayList listCommonNames. I am using different variables :

  1. taskId

  2. taskJSON which is an External API calling ../API/bpm/task/{{taskId}}

  3. caseId which is a JS expression return $data.taskJSON.parentCaseId;

  4. Then I import my ArrayList with ExternalAPI ../API/bpm/caseVariable/{{caseId}}/listCommonNames

  5. After that, I just have to add listCommonNames.value in my Autocomplete input.

BUT, I now have another problem. I think that my Java ArrayList is "casted" to a simple String. Indeed, when I use the autocomplete input, it purposes me every letter in my ArrayList!
For example, if my ArrayList contains [toto, titi, tutu, tata], it will purpose me t, o, t, o, etc... So I currently can't have an autocompletion for names...
mini_162893AutoComplete.jpg

Here is the JSON object when calling my Arraylist (with fake names of course) :

{"description":"","name":"listCommonNames","value":"[Services Generaux THVN (Rennes), Direction Generale, Tarot Gael, Jerome Francois, Melanie Etienne, Florent Beaupre]","case_id":"1017","type":"java.util.ArrayList"}

I think the problem is coming from the value is between " "...
Do you have a solution to import a map, please?

Thank you for your help!

Permalink
Submitted by ykuzmenko73 on Tue, 12/29/2015 - 05:16

Hello.
Have you found the way to get in the Form array from process variable?

I have similar problem regarding showing the list of users in the form.
I have only ids of users (arbitrary list) and I need to show the list with details (First, Last name, userName, etc)

in the API identity there is no way to query users based on list of id's so the idea was to prepare the AttayList in the process variable and use it in the form. but in the form I got just a single long string instead of array of User objects.

Permalink
Submitted by ykuzmenko73 on Tue, 12/29/2015 - 09:01

I have found the sulution.
the custom widget http://community.bonitasoft.com/project/get-activity-variable seems to be able to pass array correctly

Permalink
Submitted by romualdo.s.rs on Mon, 05/22/2017 - 21:27

Can you tell me how you configured the Widget? I am new to BonitaSoft and need to display the contents of an array in a Table that is possible?

Permalink
Notifications