Question

Forms - Numbering for Collection of Fields

Forms

Updated February 25, 2019

asked on October 19, 2015 • Show version history

Within my forms, I currently have a forms collection with a table (columns/rows) associated to it. I have configured forms so the user can add multiple rows and these rows are automatically numbered "#{n}" as the user clicks the "Add Education" link (see image) ...

I would like to create a similar collection within the form, this time containing single-line fields as oppose to a table. It seems that I can only utilize "#{n}" when configuring tables (rows), how can I configure this using single-line fields? I would like to configure the first field (Employer) in the collection to dynamically append the # to it as a user clicks the "Add Employer" ....

Collection ABC

Employer #1 (field)

+ additional fields

Employer #2 (field)

+ additional fields

Employer #3 (field)

+ additional fields

"Add Employer"

Thanks!

0 0

Answer

APPROVED ANSWER

replied on October 19, 2015

Try the suggestion from this thread. The concept is the same and you'd just have to modify the form slightly for what the customer wants it to show.

I have a collection called Employment History. Inside the collection is a custom HTML field with

<h4>Employer</h4>

and then some additional fields for the name and address of the employer. Then using the CSS

body {
    counter-reset: h4counter;
}
h4:before {
    content: counter(h4counter) ".\0000a0\0000a0";
    counter-increment: h4counter;
}

this is what the form looks like when adding additional employers:

See if that will work for you.

1 0

Replies

replied on May 3, 2016

This works great if you only have 1 collection, but what do you do if you have 2?

0 0

View 1 previous reply

replied on June 27, 2017

Would it be possible to get a more detailed explanation on this? I can't seem to get it to work with 2 collections, so I'm obviously missing something.

Thanks!

0 0

replied on June 30, 2017 • Show version history

With the assistance of John Shupe (well, actually he did all the work!), we have a resolution to resetting the counter of multiple Collections. In my situation, I had 2 collections on a form (Traditional Assets and Alternative Assets) and the client wanted each one that is added to be numbered - Trad #1, Trad #2, etc. and Alt #1, Alt #2, etc.

First, I added a Custom HTML field to the top of each collection. This is the code used in the HTML field of the Traditional collection:

<h3 style="font-size:130%;">Trad #</h3>

This is the code used in the HTML field of the Alternative collection:

<h4 style="font-size:130%;">Alt #</h4>

Then, in the CSS section of the CSS & Javascript page, this was added:

body {
    counter-reset: h3counter h4counter;
}
h3:after {
    content: counter(h3counter) "\0000a0\0000a0";
    counter-increment: h3counter;
}
h4:after {
    content: counter(h4counter) "\0000a0\0000a0";
    counter-increment: h4counter;
}

Finally, I noted 2 additional things:

If you also want to change the headings to a different color, you can add the color tag after the font size - for example <h3 style="font-size:130%;color:blue;">Trad #</h3>

Since there are a total of 6 HTML Headings (<h1> to <h6>), I believe this won't work if you have more than 6 different collections in a single form.

John, thanks again for your help!

-Jim

1 0

replied on February 25, 2019

I realize this post is a bit old but it was greatly appreciated and instrumental in getting my collections 'counted'.

I did want to add one update. If you have multiple collections, modify the code in each Custom HTML field to give the header its own classname. No 6 header limit!

<h4 class="collection1"> Employer</h4>
<h4 class="collection2"> Reference</h4>
......

Then the CSS:

body {
    counter-reset: cnt1 cnt2;
}

/* Collection1 Counter */
h4.collection1:after {
    content: "\0000a0\0000a0" counter(cnt1) ;
    counter-increment: cnt1;
}

/* Collection2 Counter */
h4.collection2:after {
    content: "\0000a0\0000a0" counter(cnt2) ;
    counter-increment: cnt2;
}

~ Andrew

1 0

You are not allowed to follow up in this post.

Question

Question

Forms - Numbering for Collection of Fields

Answer

Replies

Sign in to reply to this post.