Using the Configurable list widget, I wish to populate data using other fields for one row of data. Please do let me know if this is possible?

  • Varun1103
    Asked on December 13, 2016 at 6:22 AM

    What I wish for is that the first row should be a combination of static text and calculated values for this table:

    Using the Configurable list widget, I wish to populate data using other fields for one row of data Screenshot 50

    Right now all the fields are drop-down options in the widget, however just for the first row of this table I want to fill it with a combination of static text and also pull data from other fields in the form. This is so that we can save users time when filling it out and also so that they understand the order in which they have to fill out the remaining fields. 

    For the first two fields I require static text that should read like this:

    Using the Configurable list widget, I wish to populate data using other fields for one row of data Screenshot 61

    Position held should be: "Executive Officers (CXO Level / President)" and Type of Company should be "Startup (< 10 years". Now here comes the trickier bit, I really hope you can help me with this:

    For the company industry, I want it to take this input value from a previously filled form field; namely this (it's on the first page of the form):

    Using the Configurable list widget, I wish to populate data using other fields for one row of data Screenshot 72

    Now I think this would be the trickiest bit; for the years and months values, is it possible for the fields to auto-calculate the difference between this field (Shown below) and the current date?

    Using the Configurable list widget, I wish to populate data using other fields for one row of data Screenshot 83

    Could you do let me know if this is possible? I require this just for the first row, the remaining three rows should stay as they currently are.

     

    Thanks a lot!

    Cheers,

    Varun

  • Nik_C
    Replied on December 13, 2016 at 7:28 AM

    Hello Varun,

    I'm afraid that this is not possible with Configurable list widget, and that is because you can not map a specific field inside of the Configurable list widget. Maybe a better way would be to create fields that are in the Configurable list as separate fields. That way, each field will be independent and you will be able to do calculations with them, prepopulate them etc.

    All widgets 'live' in an independent iframe and therefore it is not possible to access them in that way.

    With separate fields what you're describing is totally possible by using conditional logic.

    If you decide to go that way and need any help in resolving that, please let us know.

    Thank you!

  • Varun1103
    Replied on December 13, 2016 at 7:41 AM

    Hi Nik,

    Thanks for the reply. I understand that this is possible with separate form fields and conditional logic however the question then becomes: is t be possible to present it like in the table? Form fields side by side like in the widget? 

    Thanks!

    Varun

  • Chriistian Jotform Support
    Replied on December 13, 2016 at 8:14 AM

    Hi there,

    We will try to provide you custom CSS to place the fields side-by-side once you have transformed them into simple fields. You will, however, lose the ability to add new rows as in the Configurable List widget when using simple fields.

    Please don't forget to backup your form by cloning it before changing your field settings.

    Regards.

  • Varun1103
    Replied on December 14, 2016 at 12:52 AM

    Hi Christian,

    When you say "once you have transformed them into simple fields" , what exactly do you mean?

    If this is done, the other question I have is whether the fields remain as drop-down boxes if made into simple fields? I wish users to select their options via this style.

    I am also completely fine with losing the ability to add/remove new rows as I want 4 rows to always be available.

     

    Thanks! 

  • Chriistian Jotform Support
    Replied on December 14, 2016 at 1:17 AM

    It means that when you transformed it into separate fields / simple fields / basic fields, that's the time we can help you by providing you custom CSS to make your separate fields side-by- side like in a table as you've requested.

    Using the Configurable list widget, I wish to populate data using other fields for one row of data Screenshot 20

    If you use a dropdown from the basic fields, it remains a dropdown style on your form.

    Please let us know if you need further assistance.
    Regards

  • Varun1103
    Replied on December 16, 2016 at 10:12 AM

    Hi Christian,

    So I've tried to do what you've suggested and I've accomplished this to an extent. I've cloned my form (v4) and I've managed to populate and fill out the data for the first row into simple fields.

    One issue I'm having is: the "Company Industry" field that requires input data provided in the first page does not copy any fields with the "&" symbol properly:

    Using the Configurable list widget, I wish to populate data using other fields for one row of data Screenshot 50

    I get this copied into the text box field:

    Using the Configurable list widget, I wish to populate data using other fields for one row of data Screenshot 61

    Could you help me with this issue?

    Also now that I've populated the first row as simple fields, I would like to place them side by side as we discussed earlier in the thread. I have also made the remaining three rows simple field drop down boxes and placed them below:

    Using the Configurable list widget, I wish to populate data using other fields for one row of data Screenshot 72

     

    The key is I require them to be arranged side by side as they appeared in the configurable widget:

    Using the Configurable list widget, I wish to populate data using other fields for one row of data Screenshot 83

    Really hope you can help with this. I just want to mention, I really appreciate the prompt and great responses from the entire Jotform support team so far! 

    Cheers and thanks!

     

    Varun

  • Kevin Support Team Lead
    Replied on December 16, 2016 at 11:55 AM

    To display the fields inline, please check this guide that will help you to reduce them so they can display inline: Form-Field-Positioning

    Once this has been done, there will be some fields that will display in a different link, but this can be fixed with some CSS code, here is an example of the code that I have used on my end: 

    li#id_299, li#id_298, #id_300, #id_291, #id_297 {

        width: 20%;

        padding-right: 0px;

        padding-left: 0px;

    }

    li#id_298 .form-input-wide, #id_300 .form-input-wide, #id_291 .form-input-wide, #id_297 .form-input-wide {

        width: 20%;

        margin-top:30px;

    }

    This guide will help you to inject the code to your form: How-to-Inject-Custom-CSS-Codes

    Do note that you may need to further customize the CSS code, this will depend on how you need the fields to look like. 

    Regarding to your issue, it has been moved to a different thread, we will be assisting to you on this thread: https://www.jotform.com/answers/1013520 

    If you have any question, please let us know. 

  • Varun1103
    Replied on December 18, 2016 at 7:10 AM

    Hi!

    I was able to figure out the rest of the code needed with this. It worked great! Thanks a lot!

    However,

     I'm having one more issue now, this entire set of fields is not mobile responsive, even though I have the mobile responsive widget on my form and i've also enabled the option for making the form responsive in the advanced designer. This is how this part of the form looks like on a mobile:

    Using the Configurable list widget, I wish to populate data using other fields for one row of data Screenshot 20

    Could you help me with this?

     

    Thanks!

    Varun

  • jonathan
    Replied on December 18, 2016 at 2:50 PM

    Hi VArun,

    We will resolve the next issue about non mobile browser responsive here https://www.jotform.com/answers/1014495

    We will attend to it as soon as we can.