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

31、【合并重复的Case】：
Spring'20，赋予了user像合并重复的account和contact那样合并重复的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底下：

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

    

    
        
    

    
parentExpr parentAttr: {!v.parentAttr}
    

    


    
childExpr childAttr: {!v.childAttr}
    

/* 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

    
    
        Show this if condition is true
        
           
        
    

效果说明：如果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：

	
PI的值为：{!v.pi}
    
testing design token
    

        

            
Digital
            
Salesforce
            
SAP
        
    

.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:

    
    
    
PI的值为：{!v.pi}

preview：

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

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://.lightning.force.com/auradocs/reference.app。
c、常用的方法总结：待续......
6、【的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

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

.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将自动更新为官方最新版本，具体用法如下：

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

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

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

2、【Visualforce引入Lightning Design System的两种方式】：slds | bootstrap
a、将包含slds的样式的代码放入里面；
b、将样式上传到静态资源，之后再使用引用；
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