How to store HTML widget's data into process variable .

Submitted by kppatel on Thu, 05/15/2014 - 06:46
1
0
-1

i create one field : text in html widget . pl explain how to store that data into process variable

2 answers

Submitted by rajasekhard91 on Thu, 05/15/2014 - 08:53
1
+2
-1

Hi kppatel, you can follow the following steps

Step 1: Create a HTML Widget and create a text input inside the HTML Widget with some ID (say "HTMLWidgetsTextField1")

Paste the following code in your HTML Widget

<!DOCTYPE html>
<html>
<body>Input Field of HTML Widget  <input type="text" id="HTMLWidgetsTextField1"/> <br>
</body>
</html>

Step 2: Create a TextField in Bonita and let its ID be BonitasTextField1

Step 3: Create a Simple button (that does not submit the form). In "Options" > "HTML attributes" , paste the following code

onclick = "var elem = document.getElementById('HTMLWidgetsTextField1').value;
                                $('#BonitasTextField1').find('.bonita_form_field').val(elem)"

This does the trick, now Run the Pool, Enter some data in HTML Widget and click the Simple Button, the data gets filled in Bonita's field. You can use hidden fields and store them into Bonita's variables as needed

We accessed "HTMLWidgetsTextField1" data through JavaScript, stored it in a variable called "elem" and set it into "BonitasTextField1" using jQuery

Hope this helps

Comments

Submitted by kppatel on Thu, 06/12/2014 - 14:09

hello , Thanks for reply and sorry for my delay . but i tried , i clicked on button but it do nothing .

what i mistaken ?

Permalink

Submitted by rajasekhard91 on Thu, 05/15/2014 - 08:59
1
0
-1

Step 1. Create a HTML Widget and create a text input inside the HTML Widget with some ID (say "HTMLWidgetsTextField1")

Paste the following code in your HTML Widget

<!DOCTYPE html>
<html>
<body>Input Field of HTML Widget  <input type="text" id="HTMLWidgetsTextField1"/> <br>
</body>

Step 2. Create a TextField in Bonita and let its ID be BonitasTextField1

Step 3. Create a Simple button (that does not submit the form). In "Options" > "HTML attributes" , paste the following code

onclick = "var elem = document.getElementById('HTMLWidgetsTextField1').value;
                                $('#BonitasTextField1').find('.bonita_form_field').val(elem)"

Now Run the Pool, enter some data in HTML Widget and click on the Simple button. Done. Data gets filled in the Bonita's Text Field.

Once this works, you can use as many Hidden Fields as the number of HTML Widgets and store the values of Hidden Fields to Bonita's Variables

Hope this helps

Comments

Submitted by kppatel on Fri, 06/13/2014 - 13:27

sir , i done it already . but still on-click it don't response any thing . html widget is display on from and test field also displayed but when i put something into html widget and click on button it will noting populate data to text field of process variable .

thanks in advance . pl solve this .

Permalink
Submitted by luqman.subki on Fri, 08/29/2014 - 03:32

Greeting sir, i tried the solution above but is not working. And i'm not understand the function of simple button. Is there any suggestion u can give @rajasekhard91

Permalink
Submitted by rehab.zaky on Fri, 03/06/2015 - 22:46

It's worked with me thank you but my html widget contains table how can i store the whole table specially it contains scripts to render fields Thanks in advance,

Permalink
Submitted by rehab.zaky on Sun, 03/08/2015 - 15:02

Any updates , your support is highly appreciated !

Permalink
Submitted by Sean McP on Mon, 03/09/2015 - 08:22

Rehab,

it works perfectly as long as you follow the instructions. I've just seen this and tried it, no problems. Make sure you're filling in the HTML Widget text box and not the other one, then click the simplesubmitbutton, the data will copy across.

Another thing you could add is an Action on the real submit button to copy the BonitasTextField1 to a process variable for use in other steps.

regards Seán

Permalink
Submitted by rehab.zaky on Mon, 03/09/2015 - 08:28

Thank u Sean, What I mean is I'm having a table and script inside the html widget but your code works on input text field not a table and script . Did u get what I mean ?!

Thanks a lot Sean,

Permalink
Submitted by Sean McP on Mon, 03/09/2015 - 09:21

@Rehab,

Sorry, I missed that bit...about the table.

I think this will be where you have to get hands dirty and learn a bit of JavaScript and Jquery. I don't know how to do what your asking...then again, just tried this with an editable grid...

Add a editable grid to the form, EditableGrid1

Change the SimpleButton script code to

onclick = "var eg0 = document.getElementById('EditableGrid1').outerHTML;
console.log(eg0);
$('#BonitasTextField1').find('.bonita_form_field').val(eg0)"

NOTE: outerHTML should work with all modern browsers, but I know it doesn't work with some older ones.

and this is the data I got back, the full table HTML and the cell contents as data (qwerty, 123456, poiuyt, etc.);

<div id="EditableGrid1" class="bonita_form_entry">           <div class="bonita_form_vertical_panel"><div><div class="bonita_form_label bonita_form_label_top">EditableGrid1 </div><div class="bonita_form_field bonita_form_field_bottom"><div class="bonita_form_grid_column_buttons"><div class="bonita_form_grid_remove_button" title="Remove the last column" aria-hidden="true" style="display: none;"></div><div class="bonita_form_grid_add_button" title="Add a column" aria-hidden="true" style="display: none;"></div></div><div class="bonita_form_table_container"><table class="bonita_form_editable_grid"><colgroup><col></colgroup><tbody><tr><td class="bonita_form_table_cell bonita_form_table_editable">qwerty</td><td class="bonita_form_table_cell bonita_form_table_editable">123456</td><td class="bonita_form_table_cell bonita_form_table_editable">poiuyt</td></tr><tr><td class="bonita_form_table_cell bonita_form_table_editable">asdfgh</td><td class="bonita_form_table_cell bonita_form_table_editable">987654</td><td class="bonita_form_table_cell bonita_form_table_editable">lkjhgf</td></tr><tr><td class="bonita_form_table_cell bonita_form_table_editable">zxcvbn</td><td class="bonita_form_table_cell bonita_form_table_editable">321654</td><td class="bonita_form_table_cell bonita_form_table_editable">.,mnbv</td></tr></tbody></table></div><div class="bonita_form_grid_row_buttons"><div class="bonita_form_grid_remove_button" title="Remove the last row" aria-hidden="true" style="display: none;"></div><div class="bonita_form_grid_add_button" title="Add a row" aria-hidden="true" style="display: none;"></div></div></div></div></div></div>

I think this is what you're looking for...

regards Seán

Permalink
Submitted by rehab.zaky on Mon, 03/09/2015 - 09:28

Thanks a lot Sean for your support , I'll try the above and keep you posted with results :)

Thanks one more time,

Permalink
Notifications