Is it possible to populate all drop down values from one field in the another drop down field having blank values?

  • Profile Image
    deviharesh
    Asked on July 22, 2020 at 01:13 AM

    Under Update / Calculate Field option, is it possible to populate all drop down values from one field in the another drop down field having blank values?



    This is a re-post of a comment on How to Pass Field Value to Another Field?

  • Profile Image
    ashwin_d
    Answered on July 22, 2020 at 05:03 AM

    Yes it is possible to achieve your requirement by taking advantage of conditions feature. Please check the screenshot below:

    1595408556passDDValue.gif

    Hope this helps.

    Do try it out and get back to us if you have any questions. 

  • Profile Image
    ashwin_d
    Answered on July 22, 2020 at 05:06 AM

    Please accept my apology as I overlooked the other part of your question. It seems you want to populate the value in a blank dropdown field. 

    Please note that it is not possible to dynamically add options in dropdown field conditionally. If you have same option in second dropdown field, then you can add condition to populate it based on the selection in another dropdown field. 

  • Profile Image
    deviharesh
    Answered on July 22, 2020 at 05:23 AM

    Hi Ashwin,

    No issues.  Here is the scenario and I'm trying to find a way to achieve the solution.

    We have 10 buildings and have different number of flats in each one of them.  So I have one drop down for buildings from A to J and based on buildings selection values in second drop down need to be changed.

    There seems to be a option "Dynamic Dropdowns" under Widgets. However, layout wise it is less user friendly to change shape of the drop down, font etc.  Also, if you make some changes in the drop down option, then drop down doesn't work as expected. e.g. when you select any value from the drop down, then drop down should be collapsed.  However, it remains expanded, until you click on the drop down button again. 

     1595409941DynamicDropdown.jpg

  • Profile Image
    ashwin_d
    Answered on July 22, 2020 at 06:50 AM

    The best way to achieve your requirement is by adding multiple dropdown field in your form. Here are the steps you need to follow:

    #1. Add one dropdown field to list building A to J.

    #2. Add another Dropdown field to list the flat numbers. That means one separate drop field for each building. 

    #3. You can then add condition in form to show hide the respective dropdown field based on user's answer in building dropdown selection. 

    Hope this helps.

    Do get back to us if you have any questions. 

  • Profile Image
    deviharesh
    Answered on July 22, 2020 at 07:06 AM

    Yes, I did that and it was successful.  However, there are many members having multiple flats in the society, so there was no point in increasing the number of fields for each building multiplied by number of multiple flats per member.  So I used Dynamic drop down, with modification in the drop down values.  Layout, font size etc. is still a concern.


    Thanks anyway to your response.  I would like to talk to you over the phone, if you can please spare few minutes and if you are in India.  I can call you, if you can share your number.

  • Profile Image
    Basil_A
    Answered on July 22, 2020 at 09:05 AM

    Hi,

    Unfortunately, we do not provide support over the phone. Please provide us with the issues that you are currently facing and we will assist you on how to fix them.

    Looking forward to your reply.

  • Profile Image
    deviharesh
    Answered on July 23, 2020 at 09:35 AM

    Hi Team,


    I have below questions and need your help -

    I'm using Dynamic Dropdown from widget.  Please look at the attached screenshot.  Here, I have two issues.


    a)  How to change the height and width of this "Dynamic Dropdown" and font size.

    b)  The second drop down that appears one another below, how can we arrange it next to each other?  E.g. First user will select Building number and then flat number next to it.

    I'm not a technical person to write any code in CSS.  But a question is, can we have a way to allow users update these properties within respective widget items ?  So, user will be able to change height, width, font, color, values, arrangement etc.  User also should be able to use fields from respective widget items in the conditions.  Currently, it seems we cannot use fields from widget items in the condition.  If it is possible, please let me know.


    1595510693DynamicDropdownSize.jpg

  • Profile Image
    Jovanne_A
    Answered on July 23, 2020 at 10:58 AM

    Hi,

    Please allow us some time to conduct tests and work for a workaround to your concern. We will get back to you as soon as we can come up with a solution.

    Thank you for your patience.

  • Profile Image
    Jovanne_A
    Answered on July 23, 2020 at 11:14 AM

    Hi,

    You can change the width and height of the dropdown by changing the values of the fields in the dropdown settings:

    15955163359.png

    As for changing the font-size and making the dropdowns appear in the same line, kindly insert this CSS code to the widget's custom CSS code:

    #dropdownsContainer {

        width: 400px;

        display: flex; }


    span.select2-selection.select2-selection--single {

        font-size: 18px !important; }

    15955171609b.png


    Sample output:

    15955172529c.png


    Please give it a try and let us know if this works for you.

  • Profile Image
    Basil_A
    Answered on July 23, 2020 at 02:39 PM

    Hi, 

    Please allow some time while we try to make a workaround for your concern.

    Thank you.

  • Profile Image
    Basil_A
    Answered on July 23, 2020 at 02:54 PM

    Hi,

    Thank you for your patience.

    a) You can add the following CSS code into your widget to change the placeholder text to "Select":

    .select2-selection__placeholder{

    color: #fff !important;

    font-size: 6px !important; 

    }

    .select2-selection__placeholder:before{

    content: 'Select';

    color: #999;

    font-size: 15px !important; 

    }

    b) How would you like the boxes to look like? 

    c) I was unable to find a way to right-align the second dropdown box only.


  • Profile Image
    deviharesh
    Answered on July 24, 2020 at 06:10 AM

    Hi Team,

    The output given by your team member, Jovanne_A, was the expected one i.e. in horizontal form.  The only issue I had was about defining font, font size, drop down box height and width.  Now after getting above code, drop down is appearing on second line.

    Note: For the Dynamic Dropdown I have used, I'm looking at the output like the drop down shown in below screenshot, so that, all the drop downs are similar in the form.

     1595586254Expected DropdownBorder.jpg

  • Profile Image
    Bojan_J
    Answered on July 24, 2020 at 08:38 AM

    I was able to add some custom CSS, so the dropdown looks like this:

    To achieve this, you first need to add the following CSS to the form style:

    #customFieldFrame_101 {
      min-width: 100%;
    }

    Please note that this is not added to the widget CSS. This is injected into the form CSS. You can click here to see how to inject this.

    Then, add the following CSS directly to the widget CSS:

    #dropdownsContainer {
    height: 80 px;
     width: 100%;
     display: flex;
    }

    .select2-container {
      margin-right: 10px !important;
        width: 100px !important;
    }

    .select2-selection--single {
      border-radius: 0 !important;
        border: 1px solid black !important;
        font-size: 13px !important;
        height: 2px !important;
        height: 22px !important;

    }

    .select2-selection__rendered  {
        padding: 0px 5px !important;
        padding-bottom: 10px !important;
        height: 100%;

    }

    .select2-selection__arrow {
        height: 100%!important;   
    padding-right: 0px!important;
    }

    .select2-selection__arrow b{
      visibility: hidden;
    }

    .select2-selection__arrow{
      right: -6px !important;
    }

    .select2-selection__arrow:after {
      content: '';
      border: solid black;
      border-width: 0 1px 1px 0;
      display: inline-block;
      padding: 3px;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
    }

    Let us know if this solution will work for you.

  • Profile Image
    deviharesh
    Answered on July 24, 2020 at 10:32 AM

    Dear Bojan,

    Thanks, it worked.  However, request for two small things.

    a)  "Please select" word is still there instead of "Select".  We are using "Select", for all the drop downs.


    b) Alignment of any value in the drop down e.g. "Please select" / "Select" or any value, need to be corrected i.e. either middle or top.  Currently, part of the value is cut from the bottom.


  • Profile Image
    Bojan_J
    Answered on July 24, 2020 at 11:44 AM

    To resolve these problems, please add the following CSS directly to the widget:

    .select2-selection__placeholder:before{
      content: 'Select';
      color: black;
    }
    .select2-selection__rendered {
      position: absolute;
      top: -2px;
    }
    .select2-selection__placeholder{
      color: white !important;
    }

    Please make sure you add this CSS next to the current one, at the end.

    Let us know if this resolved your problem.