0

I am dynamically creating a form. When I have a basic text input field (lightning:input) the field appears where I would expect it to on the form - ex. the first field, 2nd field, etc. However, as soon as I change it to a picklist field (lightning:select) the field appears below all of the other form fields. I am puzzled about why it is dropping to the bottom of the list of fields when I change from Lightning:input to lightning:select. I need to be able to control the order of each of the fields. Thoughts?

                var getPLValue = component.get("c.getPickListValues");
            getPLValue.setParams({"fieldAPI" : fieldAPIName});
            getPLValue.setCallback(this, function(response){
                component.set("v.ResponsePL",response.getReturnValue());
                $A.createComponent(
                    "c:NIIMBL_Dynamic_Picklist", 
                    { 
                        "options": response.getReturnValue(), 
                        "name": fieldLabel,
                        "label": fieldLabel,
                        "required" : false,
                        "value" :component.getReference("v.EventRSVP."+ fieldAPIName)
                    },
                    function(newPicklist) {
                        var body = component.get("v.formBody");
                        body.push(newPicklist);
                        component.set("v.formBody",body);
                    });
            });
            $A.enqueueAction(getPLValue);
        }

c:NIIMBL_Dynamic_Picklist

<aura:component>

    <aura:attribute name="name" type="String"/>
    <aura:attribute name="label" type="String"/>
    <aura:attribute name="value" type="String"/>
    <aura:attribute name="options" type="List"/>
    <aura:attribute name="required" type="Boolean"/>

    <lightning:select name="{! v.name }" label="{! v.label }" value="{! v.value }" required="{!v.required}">
        <aura:iteration var="option" items="{! v.options }">
            <option value="{! option }">{! option }</option>
        </aura:iteration>
    </lightning:select>

</aura:component>

Is it possible the picklists are taking longer to create & that is why they appear below the regular input fields, etc.?

  • Could you show how you add this <lightning:select> to your component's facet in your callback? – David Reed Jan 18 at 3:50
  • There's not enough code here to know for certain, but if you're calling a lot of $A.createComponent calls, this is expected. Use $A.createComponents if you expect them to be in a specific order. – sfdcfox Jan 18 at 3:51
  • I tried createComponents inistead of createComponent and the picklist field didn't create at all. – Michele Kleinhomer Jan 18 at 4:03
1

Hello though you have not given your full code my assumption is that you are not pushing in correct order to work with v.body you must push in correct order. please refer this

Clear a Component's Body

cmp.set("v.body", newCmp);

Append a Component to a Component's Body

var body = cmp.get("v.body");
// newCmp is a reference to another component
body.push(newCmp);
cmp.set("v.body", body);

Prepend a Component to a Component's Body

var body = cmp.get("v.body");
body.unshift(newCmp);
cmp.set("v.body", body);

Remove a Component from a Component's Body

var body = cmp.get("v.body");
// Index (3) is zero-based so remove the fourth component in the body
body.splice(3, 1);
cmp.set("v.body", body);
  • When I put body.unshift(newCmp) in the function for my PickList, it does move the picklist field to the top of the body. However, I don't want it at the very top. The behavior changes when I change from lightning:input to lightning:select. – Michele Kleinhomer Jan 18 at 4:26
  • v.body is the out of the box variable you need to use that not formbody. component.set("v.formBody",body); is wrong component.set("v.body",formBody); is the correct syntax you need to update the DOM using v.body – Avijit Chakraborty Jan 18 at 4:33
  • I think I have found what my problem is. Not a solution yet. When I retrieve the values for the picklist, a server side action is queued. The other form creation is client side. From what I can tell, the client side creation completes & then the server side stuff is done. That is why I am seeing the picklists at the end of the forms if I use push and at the very top if I use unshift. – Michele Kleinhomer Jan 18 at 4:55
  • You can put your code in aura:donewating event handler – Avijit Chakraborty Jan 18 at 13:16
0

I decided to generate all of the component code at the same time in the server side call. That allows me to control the order. This is in place of doing some of the generation on the client & some on server. Luckily this works in my situation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.