2019-12-03 Lightning Record Page

Lightning App Builder提供了一个易于使用的图形界面，可用于创建App Page, Home Page 和 Record Page。App page是用来某个App的界面。顾名思义，Home Page就是用来主页面的设置， Record Page 是针对某个Object的具体页面展示。
Record Page
首先在Lightning App Builder中可以选项Desktop或者Phone，但是如果你没有Enable New Salesforce Mobile App feature的话，其实它是没有用的。在手机端的显示永远是像下面的图片. 只有当你Enable这个Feature你才可以自定义你的手机端UI的显示。 还有一种形式是我们可以另外写一个VF Page，在Related item 里面可以添加你想添加的Component。

<apex:page standardController="Route__c" docType="html-5.0">
<apex:variable var="isDetailPage" value="{!IF(CONTAINS($CurrentPage.URL,'vfRetURLInSFX'),true,false)}" />
<apex:includeLightning />
<apex:slds />
<apex:outputPanel rendered="{! !isDetailPage }">

<article class="slds-card" style="border:0;">
<div class="slds-card__header slds-grid" style="padding-left: 0;">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__figure" style="width: 2rem;height: 2rem;">
<span class="slds-icon_container slds-icon-standard-account" title="account">
<img data-aura-rendered-by="61:2813;a" src="/img/icon/t4v35/standard/related_list_120.png" class="icon " alt="" title="" />
</span>
</div>
<div class="slds-media__body">
<h2 class="header-title-container">
<span class="slds-card__header-title slds-truncate">
Route Management
</span>
</h2>
</div>
</header>
</div>
</article>

</apex:outputPanel>
<apex:outputPanel rendered="{! !isDetailPage }">
<div id="lightning" />

<script>
var routeId = '{!Route__c.Id}';
console.log(routeId)
$Lightning.use("c:RouteManageApp", function() {
$Lightning.createComponent("c:pgVisitChangeOwnerForm",
{ recordId:routeId },
"lightning",
function(cmp) {
cmp.set("v.recordId", routeId);
});
});
</script>
</apex:outputPanel>
</apex:page>

App Page
如果想在Mobile端看到你自己设置的tab，需要在Setup -->Salesforce Navigation里面去设置。然后还可以通过排序设置你在Mobile端显示的位置。
Home Page
关于Home Page的结构我们还可以通过自定义的形式去设置。比如我现在需要三行三列的一个页面结构，我们可以通过下面的方式设置。

<aura:component implements="lightning:homeTemplate" description="Custom Home Page">
    <aura:attribute name="left1" type="Aura.Component[]" />
    <aura:attribute name="middle1" type="Aura.Component[]" />
    <aura:attribute name="right1" type="Aura.Component[]" />
    <aura:attribute name="left2" type="Aura.Component[]" />
    <aura:attribute name="middle2" type="Aura.Component[]" />
    <aura:attribute name="right2" type="Aura.Component[]" />

    <div>
        <div>
        <lightning:layout>
            <lightning:layoutItem size="4" flexibility="grow"
                                  class="slds-m-right_small">
                {!v.left1}
            </lightning:layoutItem>
            <lightning:layoutItem size="4" flexibility="grow"
                                  class="slds-m-right_small">
                {!v.middle1}
            </lightning:layoutItem>
            <lightning:layoutItem size="{! $Browser.isDesktop ? '4' : '3' }" flexibility="grow">
                {!v.right1}
            </lightning:layoutItem>
          </lightning:layout>
         </div>
            <div>
            <lightning:layout>
            <lightning:layoutItem size="4" flexibility="grow"
                                  class="slds-m-right_small">
                {!v.left2}
            </lightning:layoutItem>
            <lightning:layoutItem size="4" flexibility="grow"
                                  class="slds-m-right_small">
                {!v.middle2}
            </lightning:layoutItem>
            <lightning:layoutItem size="4" flexibility="grow">
                {!v.right2}
            </lightning:layoutItem>
            </lightning:layout>
            </div>       
    </div>
    
</aura:component>