刷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" οnclick="{!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部分。

刷Trailhead笔记- 用aura component创建app相关推荐

【TrailHead】Create a test harness app and component
[TrailHead]Create a test harness app and component 错误内容原因解决确认错误内容 Could not add Lightning compon ...
Aura Component父子组件通信
[前言] 创建Aura Event,是父子组件的一种通信方式.通过子组件发送事件,父组件捕获事件来完成.这种方式需要额外创建新文件来实现,本文认为这可能不是一种最优解,接下来我们一起看看其他的可能解法 ...
Python学习笔记：Day15 部署Web App
前言最近在学习深度学习,已经跑出了几个模型,但Pyhton的基础不够扎实,因此,开始补习Python了,大家都推荐廖雪峰的课程,因此,开始了学习,但光学有没有用,还要和大家讨论一下,因此,写下这些帖 ...
java二叉树转换为链表_leetcode刷题笔记-114. 二叉树展开为链表（java实现）
leetcode刷题笔记-114. 二叉树展开为链表(java实现) 题目描述给你二叉树的根结点 root ,请你将它展开为一个单链表: 展开后的单链表应该同样使用 TreeNode ,其中 rig ...
PyQt5笔记（01） -- 创建空白窗体
目录 PyQt5笔记(01) – 创建空白窗体 PyQt5笔记(02) – 按钮点击事件 PyQt5笔记(03) – 消息框 PyQt5笔记(04) – 文本框的使用 PyQt5笔记(05) – 绝对 ...
LeetCode《编程能力入门》刷题笔记（34 题全）
LeetCode<编程能力入门>刷题笔记基本数据类型 1. 在区间范围内统计奇数数目 _解法1:暴力迭代 _解法2:数学(找规律) 2. 去掉最低工资和最高工资后的工资平均值 _解法1: ...
《剑指 Offer I》刷题笔记 11 ~ 19 题
<剑指 Offer I>刷题笔记 11 ~ 19 题查找算法(中等) 11. 二维数组中的查找 _解法 1:暴力迭代解法 2:标志数解法 3:逐行二分 12. 旋转数组的最小数字 _ ...
《剑指 Offer I》刷题笔记 1 ~10 题
<剑指 Offer I>刷题笔记 1 ~10 题栈与队列(简单) 1. 用两个栈实现队列 _解法 1:暴力做法解法 2:优化解法 1 2. 包含 min 函数的栈 _解法 1:pop( ...
数据库，计算机网络、操作系统刷题笔记20
数据库,计算机网络.操作系统刷题笔记20 2022找工作是学历.能力和运气的超强结合体,遇到寒冬,大厂不招人,可能很多算法学生都得去找开发,测开测开的话,你就得学数据库,sql,oracle,尤其s ...

刷Trailhead笔记- 用aura component创建app

刷Trailhead笔记- 用aura component创建app相关推荐

最新文章

热门文章