Salesforce Lightning手风琴(五)

Salesforce Lightning手风琴(五)

。
今天，学习一个Salesforce lightning小知识，它跟手风琴很相似，一次只扩展一个手风琴部分。选择一个部分时，它会被展开或折叠。每个部分可以容纳一个或多个闪电组件。
现在 ， 我正在从Salesforce检索联系人列表，然后填充到Lightning手风琴中。

• 首先，创建apex类

  AccordionAuraController

代码如下 ：

// An highlighted block
public class AccordionAuraController {
    @AuraEnabled
    public static List<Contact> getContacts(){
        List<Contact> contactList = new List<Contact>();
        for(Contact oCon : [SELECT Id, Name, Email, Phone, MailingStreet, MailingCity, MailingState, MailingPostalCode, MailingCountry From Contact LIMIT 10]){
           contactList.add(oCon); 
        }
        return contactList;
    }
}

• Salesforce lightning

AccordionDemo

代码如下：

// An highlighted block
<aura:component controller="AccordionAuraController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
  <!--on component load call doInit javaScript function and fetch records from server-->  
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <aura:attribute name="conList" type="List"/>
    
    <div class="slds-m-around_x-large">
        
        <lightning:accordion >
            <aura:iteration items="{!v.conList}" var="con">
                <lightning:accordionSection name="{!con.name}" label="{!con.Name}">
                    <aura:set attribute="body">
                        <p><b>Street</b> : {!con.MailingStreet}</p>
                        <p><b>City</b> : {!con.MailingCity}</p>
                        <p><b>State</b> : {!con.MailingState}</p>
                        <p><b>Postcode</b> : {!con.MailingPostalcode}</p>
                        <p><b>Country</b> : {!con.MailingCountry}</p>
                        <p><b>Email</b> : {!con.Email}</p>
                        <p><b>Phone</b> : {!con.Phone}</p>
                    </aura:set>
                </lightning:accordionSection>
            </aura:iteration>
        </lightning:accordion>
        
    </div>
    
</aura:component>

• JS 【Controller】

AccordionDemoController

代码如下：

({    
    doInit: function(component,event,helper){
        var action = component.get('c.getContacts');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === 'SUCCESS' && component.isValid()){
                //get contact list
                component.set('v.conList', response.getReturnValue());
            }else{
                alert('ERROR...');
            }
        });
        $A.enqueueAction(action);
    }
})

• lightning 应用

demo

• 最后，我们点击右方的淡蓝色部分
  

看到的页面就是这样的：