Question regarding dynamically flowing forms layout

[commalliance]

I am new to using AEM Forms and somewhat of a learning curve from just regular PDF forms, and I need some assistance with subforms design.

I tried using the AEM conversion tool for my forms, but ended up manually recreating most of it, because of the dynamic expansion that we are trying to achieve.

I have 13 different groups of questions, which I have made each question its own subform. 

My problem is two fold:

1.  On the last page of the form in the original design, I had 2 "overall score" fields, which were placed in the bottom of the page and centered on the same line, and I want to try to keep that same design, but if I don't add those fields into the subform above it, if the fields grow to big, the text doesn't shift the rest of the form down, so I tried putting the "overall scores" fields in its own subform, same result, and the only way i can seem to get it to work is adding those fields into the subform above, and I had added t top margin to space it out from the above field, but i do not like the top down look for those fields, any suggestions?

2. Each subform i have seems to overwrite the next subform, if the fields expand enough, and not push the content down, like i want it to.  I read that I need to put everything into a single subform in order to achive this goal, is that correct?  If i do that though, all of the fields will be compacted in the top down format and not appear correct.  So, if I have to do that, how do i keep the layout the same, with achieving text expansion for my fields?

[radzmar · Accepted solution]

For dynamically growing forms, you need to use a flowing layout. Here a rough sketch how.

If an object like a text fields can grow, then all objects in the hierachy above it must be set to be flowed and growable too to avoid overlapping.

form1

   masterpages

      masterpage1

      …

bodypage (flowed to-bottom, allows page breaks)

    subform1 (flowed)

        textfield1 (growable)

        …

    subform2 (postioned)

        textfield2 (fixed size)

    …

For your other problem with the overall score, please share the form or at least a few screenshots.

[commalliance]

Great thanks as I had both subforms on each page flowed but that's helpful.

here is the screenshot of how the form looks right now.  So to preface this to do some layout spacing, i added margins to the top of a lot of the fields:

this is what the original form looked like:

Also, would you happen to be good at coding?  Because I cannot seem to get two codes modified to AEM forms to use correctly:

overall score:

// Initialize variables

var i, v, num = 0, sum = 0;

// Loop through the input fields

for (i = 1; i <= 13; i++) {

  v = +getField("A" + i).value;

  if (v !== 0) {

  // increment the non-blank/zero field counter

  num++;

  // add the field value to the running total

  sum += v;

  }

}

// Calculate the average

if (num) {

  event.value = sum / num;

} else {

  // All fields are empty, so set to blank

  event.value = "";

}

event.value = (event.value - 0.005).toFixed(2);
if (event.value <= 0) event.value = "";

Overall final score :

event.value = (this.getField("Overall Score2").value - 0.005).toFixed(2);

if (event.value <= 0) event.value = "";

[commalliance]

forgot to add a link to my actual form.  here it is

https://drive.google.com/file/d/11Ds94HjTr2wrZNKYq61_S7b3TqXe97v8/view?usp=sharing

[radzmar]

The scripting syntax is different to that in Acrobat and there are two different scriting languages: FormCalc and JavaScript. Each of them has its benefits. 

For your average field you can use a combination of both. Put this JavaScript in the calculate event. It filters for all dropdown lists in the current row with a value other than "0".

// Generic function to calculate average value from all dropdowns set to other than 0
var oNodes = this.parent.resolveNodes("#field.[Exists($.ui.#choiceList) eq 1 and $ ne 0]"),
	l = oNodes.length,
	i = 0, t = 0, 
	nAvg = null;
for (i; i < l; i += 1)  {
	t += parseInt(oNodes.item(i).rawValue, 10);
}

if (t > 0) {
	nAvg = t / l; 
}
this.rawValue = nAvg !== null ? nAvg.toFixed(2) : nAvg;

[commalliance]

Thanks for the script, so I did add that to that field for the javascript calculate event, and then tried it in the preview and when the drop down fields changed, that field remained blank, am I doing something wrong?

Ok, so after reading the script and your reply, I wanted to clear, in the "Average score" fields of each row, I am using formcalc to calculate the average of each row, which works perfectly.

but needed a formula, to average all of the "average score fields" but filter out any of the average score fields that are 0, so the calculation is correct.

So I've tried a few variations of my original script, but none of them seem to work, and not sure why?

[radzmar]

The total average can be calculated the same way as shown above. You only need the set a different filter for the fields you're after.

// Generic function to calculate average from numeric fields.
// If filters for any subform under pmp and any nested subform within which then includes a object Table1 which contains an object Row1 with a numeric field with a value greater than 0.
var oNodes = pmp.resolveNodes('#subform[*].#subform[*].Table1.Row1.#field.[Exists($.ui.#numericEdit) eq 1 and $ gt 0]'),
	l = oNodes.length,
	i = 0, t = 0, 
	nAvg = null;
	
for (i; i < l; i += 1)  {
	t += parseFloat(oNodes.item(i).rawValue);
}

if (t > 0) {
	nAvg = t / l; 
}
this.rawValue = nAvg !== null ? nAvg.toFixed(2) : nAvg;