Hi again,
Now I’m trying to use the Google Maps service, but I don’t know how to include it in my process.
I have a human task which should show a google map from an address previously introduced in another human task.
I guess, I need an HTML widget to declare the space in which the map will be shown, but I need to include a “JavaScript widget” for adding the functionality that makes the map works.
I have found a very old example in the comunitty ( example google map ), buy I cannot see the code used, neither how to include JS code, of course. Besides, because of the old date of the link, the Bonita version does not match, and I don’t know if there is another way to do that (maybe easier) or not. For example, I’m using version 6.5 [community] and I cannot see the BonitaApplication.html file.
So please, I would thank some help for include google maps in my process and a explanationo about how to add JS code would be great too.
Thanks in advance.
Regards.
P.S: An answer to my other posts would be absolutely fantastic, too…
help with calendar Connector
help creating a spreadsheet connector
1 Like
Hi.
You can include javascript code in a HTML Widget by using the < script> tag.
For example :
Hi,
Ok, Tha’s what I suposse, but How can I code that? I mean I have a code like this:
This code is in a file in my PC, and what I’m doing is attach this document to the data section of mi htmlWidget (Like it’s shown on this picture htmlWidget )
However when I execute the process, in the task which has the form in the image, I get the error
Failed to get the list form pages. (“Error al obtener la lista de páginas de formulario”, in Spanish)
I attach image with the error I get, too: error
What am I doing wrong?
Hi Javier,
First things first, again start simple…do a couple of lines at a time and get them to work first.
In this case remove all the code and try the div only, I’m sure you need something else in there too, as div is a placeholder not a data holder, are you missing an img or textbox?
The other thing is script is position dependent, that is divs etc must appear before the JavaScript unless loaded from file With jquery I think you can put it anywhere but don’t quote me on that.
So in your example above your doc and scripts are the wrong way round…
I use console.log a lot to get messages from my script, very useful…
Regards
Hi,
I’m sure you need something else in there too, as div is a placeholder not a data holder, are you missing an img or textbox?
I’m not sure, I understand you… Why would I need anything else? I’ve used Google Maps many times before (even in another BPM software) and the only thing I’ve always needed is a div with a unique id to identify it.
In fact, I’m getting the same error whatever I write in my document.
If I write, only something like:
I get the same error. I've tried to write another simple HTML code like:
HTML Test
And both tries, throw the same error:
Failed to get the list form pages. (“Error al obtener la lista de páginas de formulario”, in Spanish)
I attach image with the error I get, too: error
So I think, independently of my code, there is something wrong in my Bonita config.
What can I do?
thanks and regards.
I don’t think that the HTML widget create this error. This may be another wigdet in your form that do create the error.
If your form is empty, you can try to delete it and create a new form with only the HTML Widget.
Hi yannick,
My form only has the html widget and a button to continue (by default), so I’ve tried to delete the form and create a new one, but the error is still there.
What should I do?
thanks and regards.
Create a new process and start again? That’s what I do when I have unexplained errors.
BUT, before you do that, I hope you’ve POC’ed the actual Google Map first? POC = Proof-of-Concept.
Create a ONE step process, and use this to get it to work first before taking the code and making it work in your final process. That way you don’t damage the primary function of the process.
So
create new process->create a form on Step 1->RUN
add HTML widget->add div code as a constant (or other HTML as required, PS I see what you mean only DIV required)->RUN
click on POOL->Application->Look ‘n’ Feel->click on EDIT for the top HTML page (process layout)
add your before the → save->RUN - check the library is loaded from the website
Back to your application page->Add another HTML Widget AT THE BOTTOM OF THE PAGE->add simple script code to start with say
→ RUN and check the Console log…
Go back and change the script
→ RUN and check the Console log…and the form - does the text show? If so then Good, now start adding code till it does what you want and you get to your end result.
I recommend HARDCODING everything first then add variables as required to get to the final result. Why? getting it to work first is challenging, getting it to work after is easy…
Hope that helps, let us know how you get on
regards
Seán
Hi,
I’ll start again trying each and every step…
Anyway, it seems like your message has some lack of text:
click on POOL->Application->Look ‘n’ Feel->click on EDIT for the top HTML page (process layout)
add your
before the → save->RUN - check the library is loaded from the website
Back to your application page->Add another HTML Widget AT THE BOTTOM OF THE PAGE->add simple script code to start with say
→ RUN and check the Console log…
I’ll be back with my experiences.
Regards.
I’m testing now in another process. The error I have in the other one has gone, but I cannot include de JS I need.
When I try to add the maps script reference like:
in the process layout (process.html). Is it enough?
Because I have been testing step by step, an after working only HTML and HTML + simple JS, I’m tryinig to code a very very simple “helloWorld” with Google maps.
My code right now is:
The javascript console in Chrome says there is an undefined function (which is at line 8, after testing) referring to the map function. So it means, the library is not correctly added (Until the first console.log(), there is no error). I’ve tried to add it editing the three first options in the ‘click on POOL->Application->Look ‘n’ Feel’ panel, but even so the function is not recognized.
Where should I write the script reference to the maps lib?
thanks in advance and regards.
To include a js file, I use this :
I try to create a simple form with a google map but I have an error “google.maps.event is undefined”.
for the script in process.html try…
and see what happens, this loads all the libraries (supposedly)
regards
Hi again,
Let’s see:
- I’ve tried the Sean McP’s Suggestion but I’m having a Js error that says “Uncaught ReferenceError: google is not defined”, what I think is still the problem of not recognizing the library inclusion, referencing the same line and object:
google.maps.Map(…). The div is in the code, and in the form it has his own place reserved, but It doesn’t work at all.
- I’ve tried too, the yannick’s suggestion and I’m a little confused… I’m writting that piece of code just before my google map script, in the Initial Value field of my HTMLwidget, and I’m getting the same error: “Uncaught ReferenceError: google is not defined”, but the map is working and my console.log write the mapOptions and map variables correctly after showing the mentioned error.
I think I should use de process.html option, but that’s not working.
Why is this happening? What method should I use?
thanks in advance and regards.
EDIT: I have another doubt. In order to making the map work, I have been filling the variables, with exact values I wrote, but I will need to put the value of a process variable defined at my pool process into a javascript variable. How can I do that? I’ve tried something like
var start = ${start_address}
but this isn’t working.
How can I fill a javascript variable with a process variable value???
I’ve gone through all of this again and have decided there is an issue waiting for the google libraries to load, and in the execution of the code that is dependent on it in that window.onload is not working as expected.
I have opened a bug here if you wnat to add your comments too.
regards
Seán
EDIT: I have another doubt. In order to making the map work, I have been filling the variables, with exact values I wrote, but I will need to put the value of a process variable defined at my pool process into a javascript variable. How can I do that? I’ve tried something like
var start = ${start_address}
*but this isn't working.
How can I fill a javascript variable with a process variable value???*
Have a hidden field on the page and access it by using document.getElementByName(“myEleName”).innerHTML();
or something like that, bare in mind everything is surrounded by DIV - check out the structure of the page to get your real reference to the element…
regards
Ok, the bug would explain the behavior for not loading the libraries, but then why is the yannick’s solution working, but throwing the same error? I don’t understand that…
thanks and regards.
P.S: So… If I need the value of, for example, 7 variables, Do I need to add 7 hidden fields for being able to access it from JavaScript?
EDIT: I’ve tried to add a couple of not editable text Widget with a variable as the initial value, and I have got the content of these widgets with something so horrifying as:
var start = document.getElementById(“Texto1”).getElementsByClassName(“bonita_form_text bonita_form_static_field_bottom”)[0].innerHTML;
However, your idea of hide the widgets, doesn’t work.
I guess you were referring to the “Insert widget if” option, with a false condition, but then, the widget is not included in the HTML, so the access with getElementBy… returns undefined.
Is there any other way to move the value of a variable from a Bonito proces to a javascript variable? Or at least, Is there any way to hide the widgets, including them in the HTML?
thanks again and regards.
You edited your response just before I gave my last answer…return the string to a single HTML widget.
Because these fields are not Bonita fields and only yours you should be able to do:
Note: changed the input above to include the id=
“<input type="hidden" id="var1" name="var1" value="”+myBonitaVariable1+“">”+
var start = document.getElementById("var1").innerHTML;
var middle = document.getElementById("var2").innerHTML;
var end = document.getElementById("var3").innerHTML;
I’m not sure Yannicks’s solution is actually working, he says:
I try to create a simple form with a google map but I have an error “google.maps.event is undefined”.
It may load the starting library API but it then doesn’t seem to work with the lower down modules which are downloaded separately (and hidden).
Re: PS With seven variables - I would do this…
Add an HTML Widget and for data use a script that returns a String as in:
return
""+
""+
""+
etc.;
That way - Only one widget...
regards
Ok, I think I’ve got the idea about the variables question.
About the maps, I don’t know what you mean with “working”, but I’m using the following as Initial Value in HTMLWidget:
The Javascript console throws:
Uncaught ReferenceError: google is not defined
But after that, all console.log function shows the correct values about my variables, and the map takes two variables I’ve introduced before and marks a route between two address considering driving travel mode. (I attach an image with my view, using this code,)
So, why should I consider that the map is not working? Maybe, I’m not understanding what is the problem…
thanks in advance and regards.
