How to use data on a ConfiForm to update hidden fields prior to Save
Asked by Kathleen Janiszewski:

I have 52 hidden fields on this form (but not hidden on the TableView macro). I allow the user to edit the data using an Edit Control on a TableView macro. I want to update the data in them with the data in the weekly hours BEFORE the form is actually submitted, basically at the beginning of the onclick event. I have tried using the setValuefunc() on the 3 form definition macros, but that didn't work. I need a function that will run when the user clicks Save. I have tried the Run custom JavaScript after the form is loaded on the ConfiForms (FormView) Registration Control Macro, but that does not work. The 3 fields I need for my calculations are below:

![ConfiForms Sample.PNG](/t5/image/serverpage/image-id/244634i87B982A477C0A34C/image-size/large?v=v2&px=999 "ConfiForms Sample.PNG")

In this case, I want to update weeks 9 thru 17, inclusive to be 15, leaving the rest alone. I can write the JavaScript to fill in those hidden fields, but I need to do my calculations when the use clicks Save but before it gets stored. (I have already tried the IFTTT macro, but it doesn't keep the TableView macro updated.) What options do I have?


Answers:
author: Alex Medved _ConfiForms_
body: Hi

You can set up rules that work on field changes (bound to field) and run a JavaScript function(s) you can develop

<https://wiki.vertuna.com/display/CONFIFORMS/ConfiForms+Field+Definition+Rules#ConfiFormsFieldDefinitionRules-RuncustomJavaScript>

Alex

comments: author: Kathleen Janiszewski
body: I've tried doing that using the setValueFunc(formName, formId). I first used the same function for all 3 fields, then 3 different functions with similar names in the above format. However I need it to work when the Save button is clicked. If the runs when the field is changed, it won't work correctly. For example, if I change the hours, depending on how quickly I change the other 2 fields, it will set the scheduled hours for the values in the previous date range, or for the first week, but until the end of the year. Sometimes it will work, but not always. I need it to work every time.


author: Alex Medved _ConfiForms_
body: ConfiForms does not have an extension point to run before the submit

Field Definition Rules execute on field value changes. But may be you can hook up to the form's on submit event with custom JavaScript

Running it on form-view (Registrations Control macro) initialization ("Execute custom JavaScript function after the form is loaded" parameter)


author: Kathleen Janiszewski
body: Alex,

I tried that with a function called customUpdate(formId). I can get the formId, but when I use it to try to get the "#i_weeklyhours", "i_startweek", and "i_endweek", using jquery, those 3 values come back empty. My assumption is it's executing the submit has already occurred before this is function is called. I tried to hijack the onclick for the Save button, but was I not successful. Do you have a way for me to do that?

I know I'm pushing the limits of ConfiForms.

Thank you again.

-Kathleen


author: Alex Medved _ConfiForms_
body: This is far from ConfiForms limits... So, how do you access the fields? What is jquery expression?

Alex


author: Kathleen Janiszewski
body: ![Custom Update.PNG](https://community.atlassian.com/t5/image/serverpage/image-id/244876i7D33B5A1F3BE2F7F/image-size/large?v=v2&px=999 "Custom Update.PNG")

function customUpdate(formId) {  
let wklyhrs = AJS.$("#"+formId).find('#i_weeklyHours').val();  
let startWeek = AJS.$("#"+formId).find('#i_startweek').val();  
let endWeek = AJS.$("#"+formId).find('#i_endweek').val();  
...

}

The formId sis something like i_confiform_registration_kpanel_99669b2bb021fb4231037132058225f

The rest of the variables are undefined.

Thank you!

-Kathleen


author: Alex Medved _ConfiForms_
body: OK, but on initialization (for new records) the values would be empty, right?


author: Kathleen Janiszewski
body: Alex,

This is the form that appears when when the Edit button is clicked, which is the same when the new form is loaded. Is the custom JavaScript executed before the fields have been loaded into it? That's what I figured is happening, and why I'm the variable names come back as undefined.

You said above "But may be you can hook up to the form's on submit event with custom JavaScript." How can I do this? That would be ideal!

-Kathleen


author: Alex Medved _ConfiForms_
body: Hi

So, the answer is No - fields have values BEFORE the JavaScript to initialize the form is executed.

Here is a simple demo on how to get field values and how to listen to form submit event

<http://recordit.co/poFAclJVqs>

Hope it helps

Alex


author: Kathleen Janiszewski
body: Alex,

Thank you. However, the data isn't being saved in the hidden fields.

Still trying.

Thank you.

-Kathleen


author: Alex Medved _ConfiForms_
body: Hard to comment on that.. but for ConfiForms there is no difference if the field is hidden or not

As long as it has a form definition and ConfiForms is being able to figure our it's type it works

Alex


author: Kathleen Janiszewski
body: Alex,

Yes, those hidden fields get updated, but still not to the level of the form itself. I thought changing the data on the form would then update the fields hidden on the form, but visible on the TableView macro. I unhid the fields on the form, and they're indeed changing, on the Edit modal that is popped up. However, they are not changing in the form itself, nor in the corresponding fields in the TableView macro. How do I get the data into the actual form and into the TableView macro from that point?

-Kathleen


author: Alex Medved _ConfiForms_
body: Honestly, I dont understand your last comment.

You need to submit the form in order for field values to get persisted. What do you mean by "they are not changing in the form itself, nor in the corresponding fields in the TableView macro"?


author: Kathleen Janiszewski
body: I've unhidden week1hours here:  
![Confiforms Example 3-14-23.PNG](https://community.atlassian.com/t5/image/serverpage/image-id/245588iB61508914A3DBFD8/image-size/large?v=v2&px=999 "Confiforms Example 3-14-23.PNG")

But TableView macro still shows old hours:  
![Showing Old Hours.PNG](https://community.atlassian.com/t5/image/serverpage/image-id/245589i15C7BA4E7CFEEBFE/image-size/large?v=v2&px=999 "Showing Old Hours.PNG")  
The javascript works (ignore the alerts and the console.logs):

![myjavascript.PNG](https://community.atlassian.com/t5/image/serverpage/image-id/245591iBE777BFC88BB11D9/image-size/large?v=v2&px=999 "myjavascript.PNG")  
So those fields are getting filled in with the correct values, but those values to make it into the TableView macro, nor into the form.


author: Kathleen Janiszewski
body: Alex,

Do you have any ideas as to what is going on?

Thanks.

-Kathleen


author: Alex Medved _ConfiForms_
body: Indeed, this seems to be registering just an another "onsubmit" handler (after the one that actually submits the form). And this becomes too complicated

We have an idea that will work on ConfiForms starting from 3.3.2

Inside your customUpdate function add the following

```
?AJS.$('#' + formId).on("cfSubmitStarted", function(event, formObject) { 
   console.log(event); 
   console.log(formObject); ?
 ? 
   AJS.$(formObject).find...
});
```

Alex


author: Kathleen Janiszewski
body: Alex,

I'll try it!!!

Thank you!!!

-Kathleen


author: Alex Medved _ConfiForms_
body: Please note that you need to await for the upcoming 3.3.2 version of ConfiForms, as we had to do one little fix to make it work

This updated version will be released later this week


author: Alex Medved _ConfiForms_
body: I hope you can now update to latest version of ConfiForms to use the mentioned method...

Let me know if this does not work for you or you need any help using it


author: Kathleen Janiszewski
body: Alex,  

Thank you for your help! Yes, it did work, but again it updates the ConfiForm without updating the TableView macro from which the popup originates. Since both are not in sync, I had to come up with another solution to replace the TableView macro. What I have works now.

Thank you!  
-Kathleen


author: Alex Medved _ConfiForms_
body: Could you explain a bit more in the TableView refresh issue?

TableView always shows realtime data from your form...

Alex


author: Kathleen Janiszewski
body: Alex,

I've had to use a Tabulator object, because I can update that in JavaScript, without having to refresh the display. The TableView macro simply doesn't update fields automatically, and my designer won't allow a forced update of the whole display.

Thank you for your help.

-Kathleen


Tags: confiforms

confluence-server

server