0

Below is my code.

Component:

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />    
<aura:attribute name="listControllingValues" type="list" default="[]" description="to store controller field values"/>
<aura:attribute name="listDependingValues" type="list" default="['--- None ---']" description="to store dependent field values"/>
<aura:attribute name="depnedentFieldMap" type="map" description="map to store dependent values with controlling value"/>
<aura:attribute name="bDisabledDependentFld" type="boolean" default="true"/>     
<aura:attribute name="objDetail" type="GW_Volunteers__Volunteer_Job__c" default="{'sobjectType' : 'GW_Volunteers__Volunteer_Job__c'}"/>
<aura:attribute name="controllingFieldAPI" type="string" default="State__c" description="store field API name of Controller field"/>
<aura:attribute name="dependingFieldAPI" type="string" default="City__c" description="store field API name of dependent field"/>
<aura:attribute name="options" type="String[]" default="[]" />
<aura:attribute name="selectedType" type="String" default="" />

    <!--Controller Field-->
    <lightning:layoutItem size="12" padding="around-small">    
        <SPAN>
        <lightning:select name="controllerFld"
                      value="{!v.objDetail.State__c}"
                      label="City"
                      onchange="{!c.onControllerFieldChange}">
            <aura:iteration items="{!v.listControllingValues}" var="val">
                <option value="{!val}">{!val}</option>
            </aura:iteration>
        </lightning:select>
        </SPAN>
    </lightning:layoutItem>

    <!--Dependent Field-->
<lightning:layoutItem size="12" padding="around-small">
    <SPAN>
    <lightning:select name="dependentFld" 
                      value="{!v.objDetail.City__c}"
                      label="Sub Location"
                      disabled="{!v.bDisabledDependentFld}"
                      onchange="{!c.check}">
        <aura:iteration items="{!v.listDependingValues}" var="val">
            <option value="{!val}">{!val}</option>
        </aura:iteration>
    </lightning:select>
        </SPAN>
</lightning:layoutItem>

<lightning:layoutItem size="12" padding="around-small">
    <SPAN>
    <lightning:select name="typefld" value="{!v.selectedType}" label="Type" onchange="{!c.check}">
        <aura:iteration items="{!v.options}" var="option">
            <option value="{!option}">{!option}</option>
        </aura:iteration>
    </lightning:select>
    </SPAN> 
</lightning:layoutItem>

Controller:

doInit: function(component, event, helper) {
    var controllingFieldAPI = component.get("v.controllingFieldAPI");
    var dependingFieldAPI = component.get("v.dependingFieldAPI");
    var objDetails = component.get("v.objDetail");
    // call the helper function
    helper.fetchPicklistValues(component, objDetails, controllingFieldAPI, dependingFieldAPI);
    helper.fetchPickListType(component);
},

onControllerFieldChange: function(component, event, helper) {
    var controllerValueKey = event.getSource().get("v.value"); // get selected controller field value
    var depnedentFieldMap = component.get("v.depnedentFieldMap");

    if (controllerValueKey != '--- None ---') {
        var ListOfDependentFields = depnedentFieldMap[controllerValueKey];

        if (ListOfDependentFields.length > 0) {
            component.set("v.bDisabledDependentFld", false);
            helper.fetchDepValues(component, ListOfDependentFields);
        } else {
            component.set("v.bDisabledDependentFld", true);
            component.set("v.listDependingValues", ['--- None ---']);
        }

    } else {
        component.set("v.listDependingValues", ['--- None ---']);
        component.set("v.bDisabledDependentFld", true);
    }
}

Helper:

    fetchPicklistValues: function(component, objDetails, controllerField, dependentField) {
    // call the server side function  
    var action = component.get("c.getDependentMap");
    // pass paramerters [object definition , contrller field name ,dependent field name] -
    // to server side function 
    action.setParams({
        'objDetail': objDetails,
        'contrfieldApiName': controllerField,
        'depfieldApiName': dependentField
    });
    //set callback   
    action.setCallback(this, function(response) {
        if (response.getState() == "SUCCESS") {
            //store the return response from server (map<string,List<string>>)  
            var StoreResponse = response.getReturnValue();

            // once set #StoreResponse to depnedentFieldMap attribute 
            component.set("v.depnedentFieldMap", StoreResponse);

            // create a empty array for store map keys(@@--->which is controller picklist values) 
            var listOfkeys = []; // for store all map keys (controller picklist values)
            var ControllerField = []; // for store controller picklist value to set on lightning:select. 

            // play a for loop on Return map 
            // and fill the all map key on listOfkeys variable.
            for (var singlekey in StoreResponse) {
                listOfkeys.push(singlekey);
            }

            //set the controller field value for lightning:select
            if (listOfkeys != undefined && listOfkeys.length > 0) {
                ControllerField.push('--- None ---');
            }

            for (var i = 0; i < listOfkeys.length; i++) {
                ControllerField.push(listOfkeys[i]);
            }
            // set the ControllerField variable values to country(controller picklist field)
            component.set("v.listControllingValues", ControllerField);
        } else {
            alert('Something went wrong..');
        }
    });
    $A.enqueueAction(action);
},

fetchDepValues: function(component, ListOfDependentFields) {
    // create a empty array var for store dependent picklist values for controller field  
    var dependentFields = [];
    dependentFields.push('--- None ---');
    for (var i = 0; i < ListOfDependentFields.length; i++) {
        dependentFields.push(ListOfDependentFields[i]);
    }
    // set the dependentFields variable values to store(dependent picklist field) on lightning:select
    component.set("v.listDependingValues", dependentFields);

},

fetchPickListType: function(component) {
    var action1 = component.get("c.getType");
    console.log('here');
    action1.setCallback(this, function(response) {
        if (response.getState() == "SUCCESS") {
            var allValues = response.getReturnValue();
            var allTypes = [];
            console.log('here' + allValues);
            if (allValues != undefined && allValues.length > 0) {
                allTypes.push('--- None ---');
            }
            for (var i = 0; i < allValues.length; i++) {
                allTypes.push(allValues[i]);
            }
            component.set("v.options", allTypes);
        }
    });
    $A.enqueueAction(action1);
}

I am getting error as mentioned in the title. I tried using span, didnt work for me. Please help!

6
  • Can you add the js code. Specifically what is in the after render? – JRiffe Nov 8 '18 at 23:21
  • i have not written any after render function. Should I write ? – kritika Nov 8 '18 at 23:25
  • 3
    We simultaneously have too much code, and not enough. If you would try to remove as much code as possible yet still generate the error, it would help us narrow down the problem. Also, please include your controller and helper (if any). – sfdcfox Nov 9 '18 at 2:24
  • @sfdcfox tried my best to minimize the code. Please help . – kritika Nov 10 '18 at 10:52
  • @JRiffe added the JS code. – kritika Nov 11 '18 at 22:31
0

As lightning is still in development for salesforce. This is an unidentified error which is not solved till now. So, instead of using lightning I have used ui:inputSelect .

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.