Lightning Dynamic Drop-down

Apex Class:

global class AccountController{
    
    @AuraEnabled
    public static List<Account> getAllAccount() {
        return [select id, name from Account];
    }
}


Account.Component

<aura:component controller="xyz.AccountController" implements="force:appHostable"> <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> <aura:attribute name="Accounts" type="xyz.Account[]"/> <!--<link rel="stylesheet" type="text/css" href="/resource/SFBootstrap/css/bootstrap.css" />--> <center> <div class="maincontent" align="center" >
/* Single Selection */ <Select class="form-control" style="width:40%;" aura:id="testProj" > <option>Select Account</option> <aura:iteration items="{!v.Accounts}" var="acc"> <option value="{!acc.Id}" >{!acc.Name}</option> </aura:iteration> </Select> <br/>
/* Multi Selections */

<Select class="form-control" style="width:40%;" aura:id="testProj" multiple="true"> <option>Select Account</option> <aura:iteration items="{!v.Accounts}" var="acc"> <option value="{!acc.Id}" >{!acc.Name}</option> </aura:iteration> </Select> </div> </center> </aura:component>

AccountController.JS

({ doInit : function(component, event, helper) { // for demo, just grab this product by name helper.getAllAccount(component); } })

AccountHelper.JS

({ helperMethod : function() { }, getAllAccount: function(component) { console.log(component); var action = component.get("c.getAllAccount"); console.log(action); var self = this; action.setCallback(this, function(a) { console.log(a); component.set("v.Accounts", a.getReturnValue()); }); $A.enqueueAction(action); } })

OUTPUT



Comments

  1. Great start....:) Nice to learn....keep posted on lightening component...


    Thanks

    ReplyDelete

Post a Comment

Popular posts from this blog

How to use Lightning Toast in Visual force Page

Lightning Data Service