Question regarding dynamically flowing forms layout | Community
Skip to main content
C
commalliance
Level 3
February 1, 2022
Solved

Question regarding dynamically flowing forms layout

  • February 1, 2022
  • 1 reply
  • 1333 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by radzmar

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.

1 reply

radzmar
radzmarAccepted solution
Level 10
February 1, 2022

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.

    C
    commallianceAuthor
    Level 3
    February 2, 2022

    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 = "";
      C
      commallianceAuthor
      Level 3
      February 2, 2022

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

       

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

       

        Terms & ConditionsAccessibility statement

        Loading footer...