You need to sign in to do that
Don't have an account?
Lokesh Rayapati4
How to upload image by using lightning component
How to add an image functionality in Lightning Component
Hi,
I'm doing a task on aura components in which employees will be available in different Departments. I'm fetching the data and can edit but only thing left is functionalities like adding New record, Delete and adding image functionality.
Please help me in this. Below is my code
EmployeeComponent.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" Controller="EmployeeController">
<aura:attribute name="employeeOptions" type="List" default="[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"></aura:handler>
<aura:attribute name="spinner" type="boolean" default="true"/>
<aura:attribute name="isEdit" type="boolean" default="true"/>
<aura:attribute name="employeeList" type="List" default="[]"/>
<aura:if isTrue="{!v.spinner}">
<div class="exampleHolder">
<lightning:spinner alternativeText="Loading" size="large" />
</div>
</aura:if>
<div style="background:white">
<div class="demo-only demo-only--sizing slds-grid slds-wrap" >
<div class="slds-size_2-of-4">
<lightning:combobox name="Employee__c" label="Select Department" value="All" placeholder="Select Type" options="{! v.employeeOptions }" onchange="{! c.handleChange }"/>
</div>
<div class="slds-size_1-of-2 slds-p-left_x-small" style="margin-top:20px">
<lightning:button variant="brand" label="Delete" title="Brand action" onclick="{!c.handleClick}" />
<lightning:button variant="brand" label="Save" title="Brand action" onclick="{!c.handleSave}" />
<lightning:button variant="brand" label="Edit" title="Brand action" onclick="{!c.handleEdit}" />
<lightning:button variant="brand" label="Cancel" title="Brand action" onclick="{!c.handleCancel}" />
</div>
</div>
<div class="slds-p-top_large">
<div class="demo-only demo-only--sizing slds-grid slds-wrap">
<aura:iteration items="{!v.employeeList}" var="item">
<aura:if isTrue="{!v.isEdit}">
<div class="slds-size_1-of-4">
<lightning:card>
<p class="slds-p-horizontal_small">
{!item.Name}<br></br>
{!item.Date_of_Birth__c}<br></br>
{!item.Blood_Group__c}<br></br>
{!item.Mobile__c}<br></br>
</p>
</lightning:card>
</div>
<aura:set attribute="else">
<lightning:card>
<p class="slds-p-horizontal_small">
<lightning:input type="text" name="input1" label="Name" value="{!item.Name}"/>
<lightning:input type="date" name="input1" label="Date Of Birth" value="{!item.Date_of_Birth__c}"/>
<lightning:input type="text" name="input1" label="Blood Group" value="{!item.Blood_Group__c}"/>
<lightning:input type="text" name="input1" label="Mobile__c" value="{!item.Mobile__c}"/>
</p>
</lightning:card>
</aura:set>
</aura:if>
</aura:iteration>
</div>
</div>
</div>
</aura:component>
EmployeeController.apxc
public class EmployeeController {
@AuraEnabled
public static list<Map<String,Object>> getLightningPickListValues(String fieldName, string objectName) {
list<Map<String,Object>> returnList = new list<Map<String,Object>>();
try {
returnList.add(new Map<String,Object>{'label'=>'--Select--','value'=>'--Select--'});
Map<String, schema.SObjectField> feildMap = Schema.getGlobalDescribe().get(objectName.trim()).getDescribe().fields.getMap();
list<Schema.PicklistEntry> values = feildMap.get(fieldName.trim()).getDescribe().getPickListValues();
for (Schema.PicklistEntry obj : values) {
returnList.add(new Map<String,Object>{'label'=>obj.getLabel(),'value'=>obj.getValue().remove('\'').escapeUnicode()});
}
System.debug('MAP with FEILD TYPE : '+returnList);
} catch (Exception e) {
System.debug('Error in lightning picklist values : '+e.getMessage()+' at line no :'+e.getLineNumber());
// return null;
}
return returnList;
}
@AuraEnabled
public static List<employee__c> getEmployee(string typeEmployee){
if(typeEmployee == 'All'){
return [select id, name,Date_of_Birth__c,Mobile__c,Blood_Group__c from employee__c];
}else{
return [select id, name,Date_of_Birth__c,Mobile__c,Blood_Group__c from employee__c where Department__c =:typeEmployee ];
}
}
@AuraEnabled
public static List<employee__c> updateEmployee(List<employee__c> dataList){
system.debug('Data before update : '+dataList);
update dataList;
system.debug('Data after update : '+dataList);
return dataList;
}
}
EmployeeComponentController.js
({
doInit : function(component, event, helper) {
console.log('In Doint');
var action = component.get("c.getLightningPickListValues");
action.setParams({
"fieldName":'Department__c',
"objectName":'Employee__c'
});
action.setCallback(this,function(response){
console.log('response of picklist : ',response.getReturnValue());
component.set("v.employeeOptions",response.getReturnValue());
var actionTwo = component.get("c.getEmployee");
actionTwo.setParams({
"typeEmployee":"All"
});
actionTwo.setCallback(this,function(response){
component.set("v.spinner",false);
console.log('data : ',response.getReturnValue());
component.set("v.employeeList",response.getReturnValue());
})
$A.enqueueAction(actionTwo);
});
$A.enqueueAction(action);
},
handleChange : function(component,event,helper){
component.set("v.spinner",true);
const type = event.getSource().get("v.value");
var actionTwo = component.get("c.getEmployee");
actionTwo.setParams({
"typeEmployee":type
});
actionTwo.setCallback(this,function(response){
component.set("v.spinner",false);
console.log('data : ',response.getReturnValue());
component.set("v.employeeList",response.getReturnValue());
component.set("v.spinner",false);
})
$A.enqueueAction(actionTwo);
},
handleEdit : function(component,event,helper){
console.log('edit');
component.set("v.isEdit",false);
},
handleCancel : function(component,event,helper){
console.log('cancel');
component.set("v.isEdit",true);
},
handleSave : function(component,event,helper){
var list = component.get("v.employeeList");
console.log('Data : ',list[0]);
component.set("v.spinner",true);
var actionTwo = component.get("c.updateEmployee");
actionTwo.setParams({
"dataList":list
});
actionTwo.setCallback(this,function(response){
console.log('data : ',response.getReturnValue());
component.set("v.employeeList",response.getReturnValue());
component.set("v.spinner",false);
component.set("v.isEdit",true);
$A.get('e.force:refreshView').fire();
})
$A.enqueueAction(actionTwo);
}
})
Hi,
I'm doing a task on aura components in which employees will be available in different Departments. I'm fetching the data and can edit but only thing left is functionalities like adding New record, Delete and adding image functionality.
Please help me in this. Below is my code
EmployeeComponent.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" Controller="EmployeeController">
<aura:attribute name="employeeOptions" type="List" default="[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"></aura:handler>
<aura:attribute name="spinner" type="boolean" default="true"/>
<aura:attribute name="isEdit" type="boolean" default="true"/>
<aura:attribute name="employeeList" type="List" default="[]"/>
<aura:if isTrue="{!v.spinner}">
<div class="exampleHolder">
<lightning:spinner alternativeText="Loading" size="large" />
</div>
</aura:if>
<div style="background:white">
<div class="demo-only demo-only--sizing slds-grid slds-wrap" >
<div class="slds-size_2-of-4">
<lightning:combobox name="Employee__c" label="Select Department" value="All" placeholder="Select Type" options="{! v.employeeOptions }" onchange="{! c.handleChange }"/>
</div>
<div class="slds-size_1-of-2 slds-p-left_x-small" style="margin-top:20px">
<lightning:button variant="brand" label="Delete" title="Brand action" onclick="{!c.handleClick}" />
<lightning:button variant="brand" label="Save" title="Brand action" onclick="{!c.handleSave}" />
<lightning:button variant="brand" label="Edit" title="Brand action" onclick="{!c.handleEdit}" />
<lightning:button variant="brand" label="Cancel" title="Brand action" onclick="{!c.handleCancel}" />
</div>
</div>
<div class="slds-p-top_large">
<div class="demo-only demo-only--sizing slds-grid slds-wrap">
<aura:iteration items="{!v.employeeList}" var="item">
<aura:if isTrue="{!v.isEdit}">
<div class="slds-size_1-of-4">
<lightning:card>
<p class="slds-p-horizontal_small">
{!item.Name}<br></br>
{!item.Date_of_Birth__c}<br></br>
{!item.Blood_Group__c}<br></br>
{!item.Mobile__c}<br></br>
</p>
</lightning:card>
</div>
<aura:set attribute="else">
<lightning:card>
<p class="slds-p-horizontal_small">
<lightning:input type="text" name="input1" label="Name" value="{!item.Name}"/>
<lightning:input type="date" name="input1" label="Date Of Birth" value="{!item.Date_of_Birth__c}"/>
<lightning:input type="text" name="input1" label="Blood Group" value="{!item.Blood_Group__c}"/>
<lightning:input type="text" name="input1" label="Mobile__c" value="{!item.Mobile__c}"/>
</p>
</lightning:card>
</aura:set>
</aura:if>
</aura:iteration>
</div>
</div>
</div>
</aura:component>
EmployeeController.apxc
public class EmployeeController {
@AuraEnabled
public static list<Map<String,Object>> getLightningPickListValues(String fieldName, string objectName) {
list<Map<String,Object>> returnList = new list<Map<String,Object>>();
try {
returnList.add(new Map<String,Object>{'label'=>'--Select--','value'=>'--Select--'});
Map<String, schema.SObjectField> feildMap = Schema.getGlobalDescribe().get(objectName.trim()).getDescribe().fields.getMap();
list<Schema.PicklistEntry> values = feildMap.get(fieldName.trim()).getDescribe().getPickListValues();
for (Schema.PicklistEntry obj : values) {
returnList.add(new Map<String,Object>{'label'=>obj.getLabel(),'value'=>obj.getValue().remove('\'').escapeUnicode()});
}
System.debug('MAP with FEILD TYPE : '+returnList);
} catch (Exception e) {
System.debug('Error in lightning picklist values : '+e.getMessage()+' at line no :'+e.getLineNumber());
// return null;
}
return returnList;
}
@AuraEnabled
public static List<employee__c> getEmployee(string typeEmployee){
if(typeEmployee == 'All'){
return [select id, name,Date_of_Birth__c,Mobile__c,Blood_Group__c from employee__c];
}else{
return [select id, name,Date_of_Birth__c,Mobile__c,Blood_Group__c from employee__c where Department__c =:typeEmployee ];
}
}
@AuraEnabled
public static List<employee__c> updateEmployee(List<employee__c> dataList){
system.debug('Data before update : '+dataList);
update dataList;
system.debug('Data after update : '+dataList);
return dataList;
}
}
EmployeeComponentController.js
({
doInit : function(component, event, helper) {
console.log('In Doint');
var action = component.get("c.getLightningPickListValues");
action.setParams({
"fieldName":'Department__c',
"objectName":'Employee__c'
});
action.setCallback(this,function(response){
console.log('response of picklist : ',response.getReturnValue());
component.set("v.employeeOptions",response.getReturnValue());
var actionTwo = component.get("c.getEmployee");
actionTwo.setParams({
"typeEmployee":"All"
});
actionTwo.setCallback(this,function(response){
component.set("v.spinner",false);
console.log('data : ',response.getReturnValue());
component.set("v.employeeList",response.getReturnValue());
})
$A.enqueueAction(actionTwo);
});
$A.enqueueAction(action);
},
handleChange : function(component,event,helper){
component.set("v.spinner",true);
const type = event.getSource().get("v.value");
var actionTwo = component.get("c.getEmployee");
actionTwo.setParams({
"typeEmployee":type
});
actionTwo.setCallback(this,function(response){
component.set("v.spinner",false);
console.log('data : ',response.getReturnValue());
component.set("v.employeeList",response.getReturnValue());
component.set("v.spinner",false);
})
$A.enqueueAction(actionTwo);
},
handleEdit : function(component,event,helper){
console.log('edit');
component.set("v.isEdit",false);
},
handleCancel : function(component,event,helper){
console.log('cancel');
component.set("v.isEdit",true);
},
handleSave : function(component,event,helper){
var list = component.get("v.employeeList");
console.log('Data : ',list[0]);
component.set("v.spinner",true);
var actionTwo = component.get("c.updateEmployee");
actionTwo.setParams({
"dataList":list
});
actionTwo.setCallback(this,function(response){
console.log('data : ',response.getReturnValue());
component.set("v.employeeList",response.getReturnValue());
component.set("v.spinner",false);
component.set("v.isEdit",true);
$A.get('e.force:refreshView').fire();
})
$A.enqueueAction(actionTwo);
}
})
Hi Lokesh,
Kindly take the refernce from this example that matches your requirement.
https://www.forcetalks.com/blog/image-uploader-an-amazing-lightning-component/
Please mark it as best answer if it helps.
Regards,
Priya Ranjan