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

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)
    commonList

  • 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).
    BDM

  • 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!

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.

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?

ssd {#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???

did you have a look at the video tutorials we did ?
http://community.bonitasoft.com/video-tutorials-custom-pages-applications-bonita-bpm-7
http://community.bonitasoft.com/blog/examples-and-video-tutorials-bonita-bpm-7

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-designer-basics (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).

context_UI_designer

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?

Thank you for your answer mtdonovan.

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

Thanks for your help.

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}}…

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,

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 :
Heberger image

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 :
Heberger image

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

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

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

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.

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?

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…

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!

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.

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

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?

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,

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