You need to sign in to do that
Don't have an account?
Ravish Verma 15
How to display picklist values as radio buttons in lightning edit record
Hi,
I am using a lightning edit record control and I want to display picklist values as radio buttons and selected picklist value in the backend should display, selected radio buttons. Is it possible using lightning editrecord and any other way to acheive this ? any help will be much appriciated.
Thanks
Ravish
I am using a lightning edit record control and I want to display picklist values as radio buttons and selected picklist value in the backend should display, selected radio buttons. Is it possible using lightning editrecord and any other way to acheive this ? any help will be much appriciated.
Thanks
Ravish
Greetings to you!
Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.
Apex:
Component:
Controller:
Helper:
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.
Thanks and Regards,
Khan Anas
All Answers
Greetings to you!
Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.
Apex:
Component:
Controller:
Helper:
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.
Thanks and Regards,
Khan Anas
Wonderful Sample code. It really helped me acheive my requirement.Keep Going :)
Please share if you do.
Please help to find out ...how to show saved radio group option on UI for your provided code in Aura Components
I have completed this functionality using Aura Components and the object level Picklist value is also Reflecting on the UI and its also editable..
Please refrence the below code:
<!-- file.cmp -->
<aura:component controller="RadioController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
access="global">
<aura:attribute name="StatusMap" type="Map"/>
<aura:attribute name="ReasonMap" type="Map"/>
<aura:attribute name="PriorityMap" type="Map"/>
<aura:attribute name="caseRecord" type="Object"/>
<aura:attribute name="recordLoadError" type="String"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<force:recordData aura:id="recordHandler"
recordId="{!v.recordId}"
fields="Status,Reason,Priority"
targetFields="{!v.caseRecord}"
targetError="{!v.recordLoadError}"
mode="EDIT"
recordUpdated="{!c.handleRecordUpdated}"
/>
<lightning:recordEditForm aura:id="recordEditForm"
recordId="{!v.recordId}"
objectApiName="Case">
<lightning:radioGroup name="radioGroup5"
label="Reason"
required="false"
options="{!v.ReasonMap}"
value="{!v.caseRecord.Reason}"
variant="label-stacked"
onchange="{!c.handleChange}"
type="radio"
style="display:inline-block !important"/>
<lightning:radioGroup name="radioGroup4"
label="Status"
required="false"
options="{!v.StatusMap}"
value="{!v.caseRecord.Status}"
variant="label-stacked"
onchange="{!c.handleChange}"
type="radio"
style="display:inline-block !important"/>
<lightning:radioGroup name="radioGroup3"
label="Priority"
required="false"
options="{!v.PriorityMap}"
value="{!v.caseRecord.Priority}"
variant="label-stacked"
onchange="{!c.handleChange}"
type="radio"
style="display:inline-block !important"/>
<div class="slds-docked-form-footer">
<lightning:button aura:id="submit" onclick="{!c.editRecordNew}" label="Cancel" class="slds-m-top_medium_Cancel" />
<lightning:button aura:id="submit" type="submit" label="Save" onclick="{!c.handleSaveRecord}" class="slds-m-top_medium" variant="brand" />
</div>
</lightning:recordEditForm>
</aura:component>
<!-- file.controller.js -->
({
doInit: function(component, event, helper) {
helper.getPriorityPicklist(component,event);
helper.getStatusPicklist(component,event);
helper.getReasonPicklist(component,event);
},
handleSaveRecord: function(component, event, helper) {
component.find("recordHandler").saveRecord($A.getCallback(function(saveResult) {
// NOTE: If you want a specific behavior(an action or UI behavior) when this action is successful
// then handle that in a callback (generic logic when record is changed should be handled in recordUpdated event handler)
if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
// handle component related logic in event handler
} else if (saveResult.state === "INCOMPLETE") {
console.log("User is offline, device doesn't support drafts.");
} else if (saveResult.state === "ERROR") {
console.log('Problem saving record, error: ' + JSON.stringify(saveResult.error));
} else {
console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
}
}));
},
handleRecordUpdated: function(component, event, helper) {
var eventParams = event.getParams();
if(eventParams.changeType === "CHANGED") {
// get the fields that changed for this record
var changedFields = eventParams.changedFields;
console.log('Fields that are changed: ' + JSON.stringify(changedFields));
// record is changed, so refresh the component (or other component logic)
var resultsToast = $A.get("e.force:showToast");
resultsToast.setParams({
"title": "Saved",
"message": "The record was updated."
});
resultsToast.fire();
} else if(eventParams.changeType === "LOADED") {
// record is loaded in the cache
} else if(eventParams.changeType === "REMOVED") {
// record is deleted and removed from the cache
} else if(eventParams.changeType === "ERROR") {
// there’s an error while loading, saving or deleting the record
}
}
})
<!-- file.helper.js -->
({
getProductPicklist: function(component, event) {
var action = component.get("c.getProduct");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var result = response.getReturnValue();
var ProductMap = [];
for(var key in result){
ProductMap.push({label: result[key], value: key});
}
component.set("v.ProductMap", ProductMap);
}
});
$A.enqueueAction(action);
},
getReasonPicklist: function(component, event) {
var action = component.get("c.getReason");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var result = response.getReturnValue();
var ReasonMap = [];
for(var key in result){
ReasonMap.push({label: result[key], value: key});
}
component.set("v.ReasonMap", ReasonMap);
}
});
$A.enqueueAction(action);
},
getStatusPicklist: function(component, event) {
var action = component.get("c.getStatus");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var result = response.getReturnValue();
var StatusMap = [];
for(var key in result){
StatusMap.push({label: result[key], value: key});
}
component.set("v.StatusMap", StatusMap);
}
});
$A.enqueueAction(action);
}
})
<!-- file.controller.apxc -->
public class DSSRadioController {
@AuraEnabled //Save Case Data
Public static void createCse(Case objcse){
try{
//Insert Case Record
insert objcse;
}catch(Exception e){
//throw exception message
throw new AuraHandledException(e.getMessage());
}
finally {
}
}
@AuraEnabled //get Case Field Picklist Values
public static Map<String, String> getStatus(){
Map<String, String> options = new Map<String,String>();
//get Case Field Describe
Schema.DescribeFieldResult fieldResult = Case.Status.getDescribe();
//get Case Filed Picklist Values
List<Schema.PicklistEntry> pList = fieldResult.getPicklistValues();
for (Schema.PicklistEntry p: pList) {
//Put Picklist Value & Label in Map
options.put(p.getValue(), p.getLabel());
}
return options;
}
@AuraEnabled //get Case Field Picklist Values
public static Map<String, String> getReason(){
Map<String, String> options = new Map<String,String>();
//get Case Field Describe
Schema.DescribeFieldResult fieldResult = Case.Reason.getDescribe();
//get Case Filed Picklist Values
List<Schema.PicklistEntry> pList = fieldResult.getPicklistValues();
for (Schema.PicklistEntry p: pList) {
//Put Picklist Value & Label in Map
options.put(p.getValue(), p.getLabel());
}
return options;
}
@AuraEnabled //get Case Field Picklist Values
public static Map<String, String> getProduct(){
Map<String, String> options = new Map<String,String>();
//get Case Field Describe
Schema.DescribeFieldResult fieldResult = Case.Product_for_Ticket_Issuance__c.getDescribe();
//get Case Filed Picklist Values
List<Schema.PicklistEntry> pList = fieldResult.getPicklistValues();
for (Schema.PicklistEntry p: pList) {
//Put Picklist Value & Label in Map
options.put(p.getValue(), p.getLabel());
}
return options;
}
}
""""""""Please Mark it as the Best Answer for others reference..""""""""""
Regards to all
Mrityunjaya Vashishtha