function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Luciano RobertoLuciano Roberto 

Insert a new item in picklist by js

Good morning folks,

I want insert a new record in list of picklist by code js.
I have a metadata that stores the values that are prepended in the picklist, but I want to insert another value in the list, for example
 - Select a value -.

By javascript or some other form.


Follow the code below :



------------------------------------------------------------------------------------------------------------------------------------------------------
Component.cmp
------------------------------------------------------------------------------------------------------------------------------------------------------

<aura:component  implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride,forceCommunity:availableForAllPageTypes" access="GLOBAL" controller="NewCaseComponentController">  

 <!-- call doInit function on component load --> 
 
    <aura:handler name="init" value="this" action="{!c.doInit}"/>
   
    <!-- aura attributes--> 
   
   
     <aura:attribute name="caseObj" type="case" default="{'sobjectType': 'Case',
                         'AccountId': '',
                         'MSISDN__c': '',
                         'Status': '',
                         'Motivo1__c': '' ,
                         'Motivo2__c': '' ,
                         'Motivo3__c': '' ,
                       }"/>

   
    <aura:attribute name="listMotivos1" type="List"  description="to store controller field values"/>
    <aura:attribute name="listMotivos2" type="List"  description="to store dependent field values"/>
    <aura:attribute name="listMotivos3" type="List"  description="to store dependent field values"/>
    <aura:attribute name="listMotivos4" type="List" description="to store dependent field values"/>
    <aura:attribute name="listMotivos5" type="List"  description="to store dependent field values"/>
   
    <aura:attribute name="dependentFieldMap" type="map" description="map to store dependent values with controlling value"/>
    <aura:attribute name="subDependentFieldMap" type="map" description="map to store sub dependent values with controlling value"/>
    <aura:attribute name="bDisabledDependentFld" type="boolean" default="true"/>
    <aura:attribute name="bDisabledSubDependentFld" type="boolean" default="true"/>
   
      
           
       
       
 <!--********* FORM ********* -->  
   
  <div class="c-container">
        <lightning:layout multipleRows="true">
            <lightning:layoutItem padding="around-small" size="12">
                <div class="page-section page-header">
                    <h6><b>Novo caso</b></h6>
                </div>
               
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small" size="12">
                <lightning:layout>
                    <lightning:layoutItem padding="around-small" size="8">
                      
                       
                       
<div class="page-section page-right">
                     
                           
                           
                           
                           
                           
                           
                           
<div class="container-fluid">

 <div class="form-group">
    
    <hr></hr>
    
      <label>MSISDN</label>
       <force:inputField aura:id="MSISDN__c" value="{!v.caseObj.MSISDN__c}"/>
   
        
 
     <hr></hr>
    
    
    
       <!--Controller Field - Motivo 1-->
    <lightning:layoutItem size="12" padding="around-small">   
        <lightning:select aura:id="Motivo1__c"
                          value="{!v.caseObj.Motivo1__c}"
                          name="motivo1"
                          label="Motivo 1"
                          onchange="{!c.onControllerFieldChange}">
         
           
          
            <aura:iteration items="{!v.listMotivos1}" var="val">
               
                <option value="{!val.MasterLabel}">{!val.DependentFieldTextPtBR__c}</option>
            </aura:iteration>
           
        </lightning:select>
    </lightning:layoutItem>
   
   
   
   
<!--Dependent Field - Motivo 2-->
    <lightning:layoutItem size="12" padding="around-small">
        <lightning:select aura:id="Motivo2__c"
                          value="{!v.caseObj.Motivo2__c}"
                          name="motivo2"
                          label="Motivo 2"
                          disabled="{!v.bDisabledDependentFld}"
                          onchange="{!c.onControllerFieldChange}">
            <aura:iteration items="{!v.listMotivos2}" var="val">
                <option value="{!val.Path__c + ',' + val.MasterLabel}">{!val.DependentFieldTextPtBR__c}</option>
            </aura:iteration>
        </lightning:select>
    </lightning:layoutItem>   
   
   
   
   
   
   
   
   
    <!--Dependent Field - Motivo 3-->
    <lightning:layoutItem size="12" padding="around-small">
        <lightning:select aura:id="Motivo3__c"
                          value="{!v.caseObj.Motivo3__c}"
                          name="motivo3"
                          label="Motivo 3"
                          disabled="{!v.bDisabledDependentFld}"
                          onchange="{!c.onControllerFieldChange}">
            <aura:iteration items="{!v.listMotivos3}" var="val">
                <option value="{!val.Path__c + ',' + val.MasterLabel}">{!val.DependentFieldTextPtBR__c}</option>
            </aura:iteration>
        </lightning:select>
    </lightning:layoutItem> 
   
     <br></br>
  
    
      <h1>informações do solicitante</h1>
     <hr></hr>
    
 
    
   
    
<label>Montadora</label>
       <force:inputField aura:id="AccountId"  value="{!v.caseObj.AccountId}"/>
      
</div>


   
<div class="form-group">
            <label>Status</label>
            <force:inputField aura:id="Status"  value="{!v.caseObj.Status}"/>
</div>  
      


                                 
                  <br></br>           
                                 
  <div class="col-md-4 text-center">
        <ui:button class="btn btn-default" press="{!c.create}">Register case</ui:button>
  </div>

                                 
                                 
                                 
   
    </div>
       
</div>
                       
                       
                    </lightning:layoutItem>
                   
                   
                   
                </lightning:layout>
            </lightning:layoutItem>
        
           
           
           
           
        </lightning:layout>
    </div>
   

   
</aura:component>



------------------------------------------------------------------------------------------------------------------------------------------------------
ComponentController.js
------------------------------------------------------------------------------------------------------------------------------------------------------

   ({

   
doInit : function(component, event, helper) {
      
    // get the fields API name and pass it to helper function 
     
        var objDetails = component.get("v.objDetail");
        var controllingFieldAPI = component.get("v.controllingFieldAPI");
        var dependingFieldAPI = component.get("v.dependingFieldAPI");
        var subDependingFieldAPI = component.get("v.subDependingFieldAPI");
      
     
   
   
   
    // helper.getOptionsByPath(component, 'v.listControllingValues', '');
       helper.getOptionsByPath(component, 'v.listMotivos1', '');
   
  
       
  
    },
   





handleSelect: function (cmp, event, helper) {
      
        var selectedMenuItemValue = event.getParam("value");
        alert("Menu item selected with value: " + selectedMenuItemValue);
    },


   
   
    onControllerFieldChange: function(component, event, helper) {    
      
      var selectName = event.getSource().get("v.name");
      
       
       
        if(selectName == 'motivo1'){
         
            var controllerValueKey = event.getSource().get("v.value"); // get selected controller field value
            helper.getOptionsByPath(component, 'v.listMotivos2', controllerValueKey);
           
            component.set("v.bDisabledDependentFld" , false); 
        }
       
       
       
       
       
        if(selectName == 'motivo2'){
            var controllerValueKey = event.getSource().get("v.value"); // get selected controller field value
         
            helper.getOptionsByPath(component, 'v.listMotivos3', controllerValueKey);
           
            component.set("v.bDisabledDependentFld" , false); 
        }
       
       
           if(selectName == 'motivo3'){
            var controllerValueKey = event.getSource().get("v.value"); // get selected controller field value
         
            helper.getOptionsByPath(component, 'v.listMotivos4', controllerValueKey);
            component.set("v.bDisabledDependentFld" , false); 
        }
       
       
       
         if(selectName == 'motivo4'){
            var controllerValueKey = event.getSource().get("v.value"); // get selected controller field value
         
            helper.getOptionsByPath(component, 'v.listMotivos5', controllerValueKey);
            component.set("v.bDisabledDependentFld" , false); 
        }
       
       
       
       
   
       
    },
   
   
    onSubControllerFieldChange : function(component, event, helper) {    
        var controllerValueKey = event.getSource().get("v.value"); // get selected sub controller field value
        var depnedentFieldMap = component.get("v.subDependentFieldMap");
      
        if (controllerValueKey != '--- None ---') {
            var ListOfDependentFields = depnedentFieldMap[controllerValueKey];
          
            if(ListOfDependentFields.length > 0){
                component.set("v.bDisabledSubDependentFld" , false); 
                helper.fetchDepValues(component, ListOfDependentFields,"v.listSubDependingValues");    }
      
            else{
                component.set("v.bDisabledSubDependentFld" , true);
                component.set("v.listSubDependingValues", ['--- None ---']); 
            } 
           
        } else {
            component.set("v.listSubDependingValues", ['--- None ---']);
            component.set("v.bDisabledSubDependentFld" , true);  }
    },  

   
   
   
        getInput : function(cmp, evt) {
        var myName = cmp.find("name").get("v.value");
        var myText = cmp.find("outName");
        var greet = "Hi, " + myName;
        myText.set("v.value", greet);
    }

   })


------------------------------------------------------------------------------------------------------------------------------------------------------   
   
ComponentHelper.js
------------------------------------------------------------------------------------------------------------------------------------------------------
({
  getOptionsByPath: function(component, selectName, path){
        var action = component.get("c.getOptionsByPath");
      
          action.setParams({  'path' : path });
        //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();
                component.set(selectName, StoreResponse);
            }
             
            else
            {
                alert('Something went wrong..');
            }
             
        });

        $A.enqueueAction(action);
    },

})



ComponentController.apxc
------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------
public class NewCaseComponentController {
  @AuraEnabled
    public static List<Dependent_Picklist__mdt> getOptionsByPath(string path)
    {
       
        return  [ select DependentFieldValue__c, Path__c, DependentFieldTextPtBR__c, MasterLabel from Dependent_Picklist__mdt  where path__c = :path order by DependentFieldTextPtBR__c ];
    }
}


Thanks...
Best Answer chosen by Luciano Roberto
Luciano RobertoLuciano Roberto

I managed to solve it, in fact I just needed to include the tag:

<ui:inputSelectOption text="" label="-- Selecione --" />


The code looks like this, If someone needs to:

 <!--Controller Field - Motivo 1-->
    <lightning:layoutItem size="12" padding="around-small">   
        <lightning:select aura:id="Motivo1__c"
                          value="{!v.caseObj.Motivo1__c}"
                          name="motivo1"
                          label="Motivo 1"
                          onchange="{!c.onControllerFieldChange}">
         
               <ui:inputSelectOption text="" label="-- Select --" />
          
            <aura:iteration items="{!v.listMotivos1}" var="val">
               
                <option value="{!val.MasterLabel}">{!val.DependentFieldTextPtBR__c}</option>
            </aura:iteration>
           
        </lightning:select>
    </lightning:layoutItem>

All Answers

Luciano RobertoLuciano Roberto

I managed to solve it, in fact I just needed to include the tag:

<ui:inputSelectOption text="" label="-- Selecione --" />


The code looks like this, If someone needs to:

 <!--Controller Field - Motivo 1-->
    <lightning:layoutItem size="12" padding="around-small">   
        <lightning:select aura:id="Motivo1__c"
                          value="{!v.caseObj.Motivo1__c}"
                          name="motivo1"
                          label="Motivo 1"
                          onchange="{!c.onControllerFieldChange}">
         
               <ui:inputSelectOption text="" label="-- Select --" />
          
            <aura:iteration items="{!v.listMotivos1}" var="val">
               
                <option value="{!val.MasterLabel}">{!val.DependentFieldTextPtBR__c}</option>
            </aura:iteration>
           
        </lightning:select>
    </lightning:layoutItem>

This was selected as the best answer
Luciano RobertoLuciano Roberto
Solved