How to add auto incrementing numbers in Configurable List widget

  • Profile Image
    itchai
    Asked on November 23, 2014 at 03:45 AM

    Hi,

    Th

    is looks like a very useful tool. I would like to know if there is a way to make the first column a counter - to automatically put a number starting at 1, then 2, etc. for each row that the user wants to add. The field wouldn't be interactive (the user couldn't change it), but it will give the total number of rows that he puts in.

    Thanks



    This is a re-post of a comment on How to Set Up the Configurable List Widget



    This is a re-post of a comment on How to Set Up the Configurable List Widget

  • Profile Image
    jonathan
    Answered on November 23, 2014 at 06:03 AM

    Hi,

    Unfortunately, I think you cannot achieve that using the Configurable List widget.

    There is no means to add a dynamic counter/number that auto increment when new row is added on the widget.

    BUT I think what you can instead use is the Spreadsheet Widget(link: http://widgets.jotform.com/widget/spreadsheet)

     

    using the Spreadsheet widget, you can add a similar grid-like input field that will allow computation of cell/input data.

    Hope this help. Please tell us if you need further assistance.

    Thanks.

     

  • Profile Image
    itchai
    Answered on November 23, 2014 at 12:45 PM

    Thanks for the answer.

    I'll use the spreadsheet unless I can think of another way of posing the question. The spreadsheet is definitely useful, but I really like the elegance of the Configurable List widget!

    Regards

  • Profile Image
    BDAVID
    Answered on November 23, 2014 at 01:29 PM

    On behalf of my colleague, your are welcome! If you have another question, please open a new thread, we will be glad to assist you.

  • Profile Image
    abajan
    Answered on November 23, 2014 at 04:13 PM

    @itchai

    After researching the possibility of numbering the entries in the Configurable List widget (because it seemed like a cool idea!), I was able to come up with this solution. The numbers can be styled in many ways, as can be seen in this fiddle whose idea I got from this one.

    As to applying the solution to your own jotform, if you were to clone my jotform, open the widget's wizard and scroll down to the Custom CSS section, you would see the following code:

    #list {
    counter-reset: counter -1;
    }

    #list tr:before {
    content: counter(counter);
    counter-increment: counter;
    display: inline-block;
    width: 20px;
    font-size: 18px;
    margin-right: 5px;
    text-align: center;
    }

    #list tr:first-child:before {
    content: "";
    }

    If you want the numbers in your own jotform to look like that, just copy the code above to its Configuarable List widget and save it.

    If you would like additional assistance with this, we'd be happy to help.


    Cheers

  • Profile Image
    itchai
    Answered on November 23, 2014 at 05:39 PM

    Thanks abajan.

    It works like a charm. Very much appreciated.

    Cheers

  • Profile Image
    TycenDemolitions
    Answered on May 01, 2016 at 09:46 PM

    One again abajan great solution! Replacing the default CSS with the above worked for me....

  • Profile Image
    designwithluv
    Answered on June 28, 2016 at 04:27 AM

    thank you this is super helpful!

  • Profile Image
    ethiele
    Answered on August 10, 2016 at 12:09 PM

    I just used this code - worked great! Is there a way to label the column (e.g. Priority)?
  • Profile Image
    BDAVID
    Answered on August 10, 2016 at 12:32 PM

    @ethiele, your new question will be addressed on the following thread: https://www.jotform.com/answers/902969 

  • Profile Image
    BetsyCohen
    Answered on December 01, 2016 at 09:16 AM

    Thank You so much Abajan!!! Do you think it would be possible to list with months? 

     

  • Profile Image
    olivia
    Answered on December 01, 2016 at 09:23 AM

    Hi BetsyCohen ,

    I have opened a new thread about your issue. 

    Please follow your thread from this link: https://www.jotform.com/answers/1001649

    Thank you.