刷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部分。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值