Salesforce Lightning - 工作中常用的技能总结

最新推荐文章于 2025-03-28 09:50:38 发布

置顶 sf_wilson

最新推荐文章于 2025-03-28 09:50:38 发布

阅读量3.8k

点赞数 5

分类专栏： Lightning Experience 文章标签： Lightning

本文链接：https://blog.csdn.net/itsme_web/article/details/79681465

版权

Lightning Experience 专栏收录该内容

23 篇文章

订阅专栏

34、【使用公式字段代替Custom Link并兼容Classic和LEX】：

公式字段：

IF( $User.UITheme == 'Theme4d',
HYPERLINK("/lightning/r/00O580000022P95/view?fv0="& ParentId , "Account Team Report"),
HYPERLINK("/00O580000022P95?pv0="& ParentId , "Account Team Report"))

Also, To pass filter parameter in classic, use pv0 whereas use fv0 in Lightning.

fv0 — The fv stands for “filter value,” and is the name of the parameter. The 0 is the numerical order in which the filter appears in the report. (The first filter is 0, the second filter is 1, the third is 2, and so forth.) Standard filters don’t count in this order, and can’t be filtered using URL parameters, although they appear as the first three filters on any report. To set the value of the fifth filter in the report, specify fv4. Read more here:- https://help.salesforce.com/articleView?id=reports_filter_url.htm&type=5

33、【在LEX中打开VFP小工具】：Preview Visualforce Pages in Lightning During Development

在classic中我们可以用https://yourInstance.salesforce.com/apex/PageName打开自定义vfp，那么在LEX中不妨在浏览器控制台输入以下代码完成：

javascript:(function(){ 
    var pageName = prompt('Enter your VFP Name:'); 
    $A.get("e.force:navigateToURL").setParams(
        {"url": "/apex/" + pageName}
    ).fire();
})();

32、【LEX性能检测】：Lightning Reports and Dashboards Technical Requirements

https://yourDomain.lightning.force.com/one/one.app?eptVisible=1

https://yourDomain.lightning.force.com/speedtest.jsp

31、【合并重复的Case】：
Spring'20，赋予了user像合并重复的account和contact那样合并重复的case；
Related List showing cases that comprise the new merged case.

以下是需要注意的要点：
a. 最多能合并3哥重复的cases，比如master case与case1，case2，case3重复了，那么我们可以把case1，2，3合并到master底下；
b. 可选的可以设置将重复的cases是软删除还是挂在master case底下作为merged cases；
c. 如果不软删除，那么合并后的cases，其高亮面板中Subject处会标明"Merged"；如果删除回在垃圾桶存15d；
d. 如何配置？setup搜索"Case Merge"会出现在Service底下：
New Setup page for merging cases

20、【分配Task给Queue】：
在Spring'20的时候，Task能够支持Queue，只有Task类型的Queue才能搜索到；
经测试，适用于Community和LEX（创建Task从WhoId和WhatId底下创建），但不适用于Global Task；

19、【URL Hack为新建记录预填充值】：Navigate to a Record’s Create Page with Default Field Values
使用下面示例公式构造一个自定义按钮或链接：

/lightning/o/Account/new?defaultFieldValues=
    Name={!URLENCODE(Account.Name)},
    OwnerId={!Account.OwnerId},
    AccountNumber={!Account.AccountNumber},
    NumberOfEmployees=35000,
    CustomCheckbox__c={!IF(Account.SomeCheckbox__c, true, false)}

18、【Lightning Page设定3列布局】：
Setup -> Object Manager -> Case -> Lightning Record Pages -> New -> Record Page选择需要的列布局即可

17、【Record Page Settings】：如果Default Activity View未设定成Timeline Mode，在Edit Record Page拖动Activity组件到画面上，将显示Insufficient Privileges.

16、【清缓存】：如果部署完Aura Lightning Component后，发现页面没有更新，可遵循：
1) Setup > Security > Session Settings > Caching.
2) Uncheck Enable secure and persistent browser caching to improve performance

15、【删除Aura Component组件】：
方法1：在Developer Console中打开.cmp后缀文件执行：File -> Delete
方法2：查询后删除

SELECT Id, DeveloperName, MasterLabel FROM AuraDefinitionBundle

14、【{!expression}与{#expression}的比较】：Using Expressions | Data Binding Between Components
a、{!expression}数据双向绑定 - bound expressions，任何地方改变，所有相关的引入位置都随着改变；
b、{!#expression} - unbond expressions，作用在于赋初始值，之后被引用地相互不影响；
c、sample：exprApp.app / parentExpr.cmp | parentExprController.js / childExpr.cmp | childExprController.js

<!--c:exprApp-->
<aura:application >
    <c:parentExpr />
</aura:application>

<!--c:parentExpr-->
<aura:component>
    <aura:attribute name="parentAttr" type="String" default="parent attribute"/>

    <!-- Instantiate the child component -->
    <c:childExpr childAttr="{!v.parentAttr}" /><!--situation1-->    
    <!--<c:childExpr childAttr="{#v.parentAttr}" />--><!--situation2-->

    <p>parentExpr parentAttr: {!v.parentAttr}</p>
    <p><lightning:button label="Update parentAttr"
          onclick="{!c.updateParentAttr}"/></p>
</aura:component>

<!--c:childExpr-->
<aura:component>
    <aura:attribute name="childAttr" type="String"/>


    <p>childExpr childAttr: {!v.childAttr}</p>
    <p><lightning:button label="Update childAttr" 
          onclick="{!c.updateChildAttr}"/></p>
</aura:component>

/* parentExprController.js */
({
    updateParentAttr: function(cmp) {
        cmp.set("v.parentAttr", "updated parent attribute");
    }
})

/* childExprController.js */
({
    updateChildAttr: function(cmp) {
        cmp.set("v.childAttr", "updated child attribute");
    }
})

d、preview：

situation1和situation2在页面初始化时均为下图：

situation2点击Update childAttr时如下图：
situation2点击Update parentAttr时如下图：
situation1点击先后点击两个按钮均为下图：

e、conclusion：situation2-{#expression}作用仅仅在于为子组件childExpr.cmp赋初始值，即便在childExpr.cmp中的属性设置里面加了default值，也会被parentExpr.cmp的属性default值覆盖；situation1-{!expression}由于数据被双向绑定，任意改变一处，另一处随着变，反之亦然。
13、【component中使用if-else条件表达式渲染组件】：官方文档 | aura:set | {!v.body} | body in js | Conditional Expressions

<aura:component>
    <aura:attribute name="display" type="Boolean" default="false"/>
    <aura:if isTrue="{!v.display}">
        Show this if condition is true
        <aura:set attribute="else">
           <ui:button label="Save" press="{!c.saveRecord}" />
        </aura:set>
    </aura:if>
</aura:component>

效果说明：如果display为true将仅展示"Show this if condition is true"，否则仅展示button。
12、【通过js添加/移除CSS】：Adding and Removing Styles

{
    applyCSS: function(cmp, event) {
        var cmpTarget = cmp.find('changeIt');
        $A.util.addClass(cmpTarget, 'changeMe');
    },
    
    removeCSS: function(cmp, event) {
        var cmpTarget = cmp.find('changeIt');
        $A.util.removeClass(cmpTarget, 'changeMe');
    }
}

11、【在lightning component中使用CSS】：3 Ways to Use CSS
a、overview：我们可以使用行内CSS/也可以从static resource中引用外部CSS/创建STYLE tab使用CSS；
b、particular attention：分清Top Level Elements/Nested Elements/All Top Level Elements With Class/All Nested Level Elements With Class/Elements With Unique ID；
c、sample：

<aura:component implements="force:appHostable">
	<p>PI的值为：{!v.pi}</p>
    <h3 class="title">testing design token</h3>
    <div class="wrap">
        <ul id="ul">
            <li>Digital</li>
            <li class="impt">Salesforce</li>
            <li>SAP</li>
        </ul>
    </div>
</aura:component>

.THIS {
 	   
}
.THIS p {/*invalid*/
    color: #666;
}
p.THIS {
    font-weight: t(fontWeightBold);
    background: token(colorBackgroundInverse);
    color: #fff;
}
.THIS h3 {/*invalid*/
    color: 00f;
}
h3.THIS {
    color: #f00;
}
.THIS .title {/*invalid - h3的class*/
    font-weight: bold;
}
.title.THIS {
    font-weight: bold;
}
.THIS .wrap {/*invalid*/
    background: #0f0;
    padding: 5px;
}
.wrap.THIS {
    background: #0f0;
    padding: 5px;
}
.THIS ul {
    border: 2px solid #000;;
}
.THIS #ul {
    background: #f0f;
}
.THIS li {
    margin-top: 5px;
}
.THIS li.impt {
    font-weight: 700;
}
.THIS li:last-of-type {/*支持css3选择器*/
    margin-bottom: 5px;
}

.THIS ul>li {
    color: #00f;
}

4、preview:

5、remarks：从上面示例我们可以看到，从component bundle创建STYLE时，支持css3选择器，并且无法为html和body设置样式（试想如果组件能设置body，那么如果组件被嵌套，且有各自的body，此时会乱套，违背统一设计原则），如果设置.THIS样式，会作用于组件中的所有标签上。
10、【在comonent中使用custom label】：Using Labels
在lightning中使用自定义标签和classic方式不一样
a、使用默认命名空间的标记表达式中的标签：

{!$Label.c.labelName}

b、组织拥有命名空间时Javascript代码中的标签：

$A.get("$Label.namespace.labelName")

c、针对第二种情况示例如下：

controller.js:

({
    doInit : function(component, event, helper) {
        var pi = $A.get("$Label.DTT.PI");
        component.set('v.pi', pi);
    }
})

component:

<aura:component implements="force:appHostable">
    <aura:attribute name="pi" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <p>PI的值为：{!v.pi}</p>
</aura:component>

preview：

9、【为component添加slds库里面的标准token】：Standard Design Tokens | SLDS-Design-Tokens | Blog Reference
a、新建一个Lightning Tokens，如果是第一次创建token名字必须为defaultTokens；

<aura:tokens extends="force:base">
</aura:tokens>

b、在CSS里面直接使用即可，假如我们想使用下图的样式：

CSS如下：font-weight：token(fontWeightBold)或者t(fontWeightBold)都行；

.THIS .slds-form-element__label {
    font-size: 0.92rem;
    color: #0070d2;
    font-weight: t(fontWeightBold);
}

c、使用token意义：待续......
8、【如何实现在controller.js中定义全局变量计数的效果】：
我们知道controller.js中的method为json格式，假如想统计点击按钮的次数，是无法在json中定义全局变量的，因此，我们可以在component中通过属性来存放计数数量，然后每次点击按钮后先取属性变量，然后累加后，把值赋给它即可达到目的。
7、【Javascript API reference in developing lightning component】：Using Javascript
a、概述：lightning组件在开发时，客户端会使用Js做交互，因此了解$A namespace | Util / Event / Component / Action / AuraLocalizationService Class及对应的方法就显得极为重要。
b、查看API方法：https://<myDomain>.lightning.force.com/auradocs/reference.app。
c、常用的方法总结：待续......
6、【<aura:attribute />的type属性全集】：Basic Types | Function Type | Object Types | Sobject Types | Collection Types | ApexClass Types | Framework-Specific Types
5、【在Lightning Component中使用Icons的几种方法】：
a、使用lightning:icon标签取代svg/use标签，示例如下：Icons | lightning:icon

<lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>
<lightning:icon iconName="action:add_contact" size="large" alternativeText="Indicates add contact"/>
<lightning:icon iconName="custom:custom1" size="large" alternativeText="Indicates custom1"/>
<lightning:icon iconName="doctype:attachment" size="large" alternativeText="Indicates attachment"/>
<lightning:icon iconName="standard:account" size="large" alternativeText="Indicates account"/>
<lightning:icon iconName="utility:announcement" size="large" alternativeText="Indicates announcement"/>

注意：iconName属性值的icon类型部分必须小写，首字母大写会报undefined的错。
扩展：如何自定义图标颜色和大小？
思路：svg有个属性叫做fill，可以通过改变该值来控制svg颜色，对于符合型的icon，可结合父元素的background与fill属性来控制整体颜色。
实例如下：

<aura:application extends="force:slds">
	<lightning:icon class="icon1" iconName="custom:custom1" title="custom1" size="large" alternativeText="Indicates heart"/>
</aura:application>

.THIS .icon1{
    background:transparent !important;
}
.THIS .icon1 svg{
    width: 4rem;/* large => 3rem */    
    height: 4rem;
    fill: #e92444;
    border: 1px solid #f00;
}

4、【Application引入Lightning Design System】：使用后，亦可直接在component中使用lightning design system css.
a、最简单的官方推荐的方式是扩展extends: force:slds，扩展后css将自动更新为官方最新版本，具体用法如下：

<aura:application extends="force:slds">
    <!-- customize your application here -->
</aura:application>

b、使用static source方式指定某一版本的css，推荐命名规范：SLDS+版本号（如：SLDS260 - Version 2.6.0）,方便归档，在application/component中引用方式如下：
Zip类型的引用：

<aura:component>
    <ltng:require styles="{!$Resource.SLDS252 + '/styles/salesforce-lightning-design-system.min.css'}" />
</aura:component>

对单独上传到静态资源的css文件的引用：

<ltng:require styles="{!$Resource.DTT__lightningCss}" />

参考资料：https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/apps_slds.htm
3、【Visualforce页面在手机端自适应的方式】：对外层容器设置最大宽度，并水平居中

<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

2、【Visualforce引入Lightning Design System的两种方式】：slds | bootstrap
a、将包含slds的样式的代码放入<apex:slds>里面；
b、将样式上传到静态资源，之后再使用<apex:stylesheet>引用；
1、【Path Settings】：在商机记录类型中看到有Sales Process这一列，起初不知道啥意思，如下图，后面才知道这个主要用在Lightning版本，会以甘特图形式展示当前单子的进度或状态。并不是所有对象都可以设置。

效果如下：

参考资料：
https://releasenotes.docs.salesforce.com/en-us/winter16/release-notes/rn_sales_sales_path_sfx.htm
https://trailhead.salesforce.com/en/modules/lex_migration_whatsnew/units/lex_migration_whatsnew_crm