刷Trailhead笔记- 用aura component创建app

Trailhead链接

https://trailhead.salesforce.com/content/learn/projects/workshop-lightning-programmatic?trail_id=lex_dev

一 hello world

先初始化一个trailhead playground, 在那里安装一个package用于后续使用. 安装后进入Dreamhouse Lightning app点Data Import。

然后创建一个lightning component.

创建时有5个选项。

Lightning Tab,

Lightning Page, 可用作home page / record page

Lightning Record Page （此次练习选这个）

Lightning Communities Page

Lightning Quick Action.

一个Aura component包括：controller, helper, style, documentation（文档，会出现在自己org的help页面里）, design (据说是最重要的，用于给app builder暴露参数，然鹅平时我不太用到), svg（这个component的矢量icon）

打开developer console, 创建lightning component, 选Lightning Record Page， 相应的在创建后发现它的implements里面包括了flexipage:availableForRecordHome以及force:hasRecordId

有两种方式查看component效果：

a. 添加到一个lightning app中。lightning app是一个独立的app，不是依赖于lightning experience.

b.放在一个page中

到一个record 页面，点击右上角的齿轮->Edit Page，进入lightning app builder的编辑页面，把hello world组件拖进去， save并且activate。在activate这个环节，可选择当前页面是org default/ app default/ app,record type, profile default。

在hello world中添加内容及样式。

可能会发现页面样式并没有被及时刷新。这是浏览器缓存造成的。可以在Setup -> Session Setting里取消勾选“Enable secure and persistent browser caching to improve performance”

 

接下来是component的attribute定义，双向绑定，controller取值 （这咱都会，就略了，呵呵）

在record页面上点齿轮，然后点Edit快速定义record page （之前我一直是进object manager ...很慢）

挑几个值得记一笔的：

lightning:recordViewForm

lightning:layout 它是一个灵活的grid system

lightning:layoutItem size="6"

 

跳转记录

var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": component.get("v.property.Id")
        });
        navEvt.fire();

 

铅笔编辑符号

<lightning:buttonIcon iconName="utility:edit" class="slds-col_bump-left" iconClass="slds-button__icon_hint" variant="bare" alternativeText="Edit Record" onclick="{!c.editRecord}" />

编辑记录

var editRecordEvent = $A.get("e.force:editRecord"); editRecordEvent.setParams({ "recordId": component.get("v.property.Id") }); editRecordEvent.fire();

动态修改style class

$A.util.toggleClass(editForm, "slds-hide");

 

修改记录

<lightning:recordViewForm aura:id="viewForm" recordId="{!v.property.Id}" objectApiName="Property__c">

 

使用data servicee

<force:recordData aura:id="propertyService" recordId="{!v.recordId}" targetRecord="{!v.property}" recordUpdated="{!c.doInit}" layoutType="FULL"/>

 

使用component design parameters: 它暴露给app builder， 每个design attribute在component里必须有一个同名的attribute与之对应。design attribute可以是text input或者是picklist (datasource定义成一个逗号分隔的字符串，表示可选的options列表)

design parameter可以使得app builder在添加component的时候能定义使用哪个参数参与计算，增加component的灵活性。

 

如果在design file里定义了：

<sfdc:objects> <sfdc:object>某sObject的APIName</sfdc:object> </sfdc:objects>

那么它表示这个component可以给指定的sObject使用。如果需要用于多个sObject，添加定义<sfdc:object>即可。

 

自定义component的icon

在slds网站下载Icon,解压缩，把svg文件用text editor打开，copy里面的path部分，打开component的svg文件，替换里面的path部分。