I'm trying to create a simple form component in Lightning which on load would show all existing values on Database. There's also a Create button which would allow to insert/update.
I've written below code (component , helper and apex controller) but no records are coming up on the section where i intend to show existing records. Could anyone help me where i'm going wrong? Please note that i'm yet to put any code in place for Create button.
<aura:component implements="flexipage:availableForAllPageTypes" controller="getAccPicklistValues">
<aura:attribute name="account" type="Account" default="{'sObjectType':'Account',
'Name':'',
'Industry':'',
'Phone':''}"/>
<aura:attribute name="accounts" type="Account[]"/>
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
<div class="slds-page-header" role="banner">
<div class="slds-grid">
<div class="slds-col">
<p class="slds-text-heading--label">Account Creation Page</p>
<p class="slds-text-heading--small">Enter Account Information</p>
</div>
</div>
</div>
<div class="slds-col slds-col--padded slds-p-top--large">
<fieldset class="slds-box slds-theme--default slds-container--small">
<form class="slds-form--stacked">
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputText class="slds-input" label="Account Name" value="{!v.account.Name}" required="true"/>
</div>
</div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputSelect class="slds-input" label="Industry" aura:id="inputSelectDynamic" value="{!v.account.Industry}" required="true"/>
</div>
</div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputPhone class="slds-input" label="Phone" aura:id="phone" value="{!v.account.Phone}" required="true"/>
</div>
</div>
<div class="slds-form-element">
<ui:button class="slds-button slds-button--brand" label="Create Account" press="{!c.createAccount}" />
</div>
</form>
</fieldset>
</div>
<div class="slds-card slds-p-top--medium">
<header class="slds-card__header">
<h3 class="slds-text-heading--small">Accounts</h3>
</header>
<section class="slds-card__body">
<div id="list" class="row">
<aura:iteration items="{!v.accounts}" var="ac">
<ui:outputText value="{!ac.Name}"/>
</aura:iteration>
</div>
</section>
</div>
JS Controller:
({
doInit : function(component, event, helper) {
helper.getPicklist(component);
helper.showAccounts(component);
}
})
Helper:
({
getPicklist : function(component) {
var action = component.get("c.getPickListValues");
var inputsel = component.find("inputSelectDynamic");
var opts=[];
action.setCallback(this, function(response) {
var state = response.getState();
console.log(response.getReturnValue());
if(state == "SUCCESS"){
for(var i=0;i< response.getReturnValue().length;i++){
opts.push({"class": "optionClass", label: response.getReturnValue()[i], value: response.getReturnValue()[i]});
}
inputsel.set("v.options", opts);
}
});
$A.enqueueAction(action);
},
showAccounts : function(component){
var action = component.get("c.getAccounts");
action.setCallback(this, function(response) {
var state = response.getState();
console.log(response.getReturnValue());
if(state == "SUCCESS"){
var accounts = component.get("v.accounts");
accounts.push(response.getReturnValue());
component.set("v.accounts", accounts);
console.log(JSON.stringify(accounts));
}
});
$A.enqueueAction(action);
}
})
Class:
public class getAccPicklistValues{
@AuraEnabled
public static List<String> getPickListValues(){
List<String> options = new List<String>();
Schema.DescribeFieldResult fieldResult = Account.Industry.getDescribe();
List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
for (Schema.PicklistEntry f: ple) {
options.add(f.getLabel());
}
return options;
}
@AuraEnabled
public static List<Account> getAccounts(){
return[SELECT Name, Industry, Phone FROM Account];
}
@AuraEnabled
public static void createAccount(Account acc){
upsert acc;
}
}