You need to sign in to do that
Don't have an account?
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...
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...
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
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>