使用代码自定义

您在此处：

使用代码自定义

登录页面可配置为 JSON 格式的静态资源文件。编辑提供的默认 JSON 文件，然后将其作为静态资源上载到 Salesforce。

所需的 Edition

重要自 2026 年 7 月 31 日起，离线功能不再适用于新的 Salesforce Mobile App Plus 合同。如果您当前使用离线功能，您可以继续使用并与合同续订。

Mobile Offline 的设置适用于：Lightning Experience

所需用户权限
使用 Mobile Offline	适用于 Salesforce 移动应用程序 Plus 的 Mobile Offline

我们会提供默认登录页面配置；利用此默认设置，构建自定义离线应用程序体验。

备注每个组织仅允许使用一个登录页面布局。

备注如果公文包未包含对象，没有互联网连接，无法访问该对象。

前提条件

设置 Offline 应用程序入门包。
下载登录页面的默认 JSON 静态资源。

我们建议使用 Visual Studio Code 编辑登录页面定义文件。VS Code 可以在 Offline 应用程序开发人员入门包设置期间下载。

默认登录页面配置

默认的登录页面配置包括一些用于客户、联系人和业务机会等常用对象的示例通用列表卡。可将该配置用作对登录页面进行自定义设置的起点位置。

{
  "view":{
    "definition":"generated/landing_page",
    "name":"component_view",
    "properties":{},
    "regions":{
      "components":{
        "name":"components",
        "components":[
          {
            "definition":"mcf/container",
            "name":"container",
            "properties":{
              "backgroundColor":"#F3F2f2"
            },
            "dataProviders":{},
            "regions":{
              "components":{
                "name":"components",
                "components":[
                  {
                    "definition":"mcf/card",
                    "name": "recently_viewed_contacts",
                    "properties":{
                      "label":"Recently Viewed Contacts",
                      "titleColor":"#EB7092"
                    },
                    "regions":{
                      "components":{
                        "name":"components",
                        "components":[
                          {
                            "definition":"mcf/list",
                            "name": "contact_list",
                            "properties":{
                              "label":"Recently Viewed Contacts",
                              "size": 5,
                              "objectApiName":"Contact",
                              "swipeActions": {
                                "call": [
                                  {
                                    "label": "Mobile",
                                    "value": "MobilePhone"
                                  }
                                ],
                                "email": [
                                  {
                                    "label": "Email",
                                    "value": "Email"
                                  }
                                ]
                              },
                              "fieldMap":{
                                "mainField":"Name",
                                "subField1":"MobilePhone"
                              },
                              "fields":{
                                "Name":"StringValue",
                                "MobilePhone":"StringValue",
                                "Email":"StringValue"
                              },
                              "orderBy":[
                                {
                                  "LastViewedDate":"DESC"
                                }
                              ]
                            },
                            "regions":{
                              "components":{
                                "name":"components",
                                "components":[
                                  {
                                    "definition":"mcf/recordRow",
                                    "name": "contact_row",
                                    "properties":{
                                    },
                                    "regions":{
                                    }
                                  }
                                ]
                              }
                            }
                          }
                        ]
                      }
                    }
                  },
                  {
                    "definition":"mcf/card",
                    "name": "account_card",
                    "properties":{
                      "label":"Accounts",
                      "titleColor":"#EB7092"
                    },
                    "regions":{
                      "components":{
                        "name":"components",
                        "components":[
                          {
                            "definition":"mcf/list",
                            "name": "account_list",
                            "properties":{
                              "label":"Accounts",
                              "size":5,
                              "objectApiName":"Account",
                              "fieldMap":{
                                "mainField":"Name",
                                "subField1":"Industry",
                                "subField2":"Id"
                              },
                              "fields":{
                                "Name":"StringValue",
                                "Industry":"StringValue",
                                "Id":"String"
                              },
                              "orderBy":[
                                 {
                                    "Name":"ASC"
                                 }
                              ]
                            },
                            "regions":{
                              "components":{
                                "name":"components",
                                "components":[
                                  {
                                    "definition":"mcf/recordRow",
                                    "name": "account_row",
                                    "properties":{
                                      "displayIcon":false
                                    },
                                    "regions":{
                                    }
                                  }
                                ]
                              }
                            }
                          }
                        ]
                      }
                    }
                  },
                  {
                    "definition":"mcf/card",
                    "name": "opportunity_card",
                    "properties":{
                      "label":"Upcoming Opportunities",
                      "titleColor":"#EB7092"
                    },
                    "regions":{
                      "components":{
                        "name":"components",
                        "components":[
                          {
                            "definition":"mcf/list",
                            "name": "opportunity_list",
                            "properties":{
                              "label":"Upcoming Opportunities",
                              "size":3,
                              "objectApiName":"Opportunity",
                              "fieldMap":{
                                "mainField":"Name"
                              },
                              "fields":{
                                "Name":"StringValue"
                              },
                              "orderBy":[
                                {
                                    "CloseDate":"ASC"
                                }
                              ]
                            },
                            "regions":{
                              "components":{
                                "name":"components",
                                "components":[
                                  {
                                    "definition":"mcf/recordRow",
                                    "name": "opportunity_row",
                                    "properties":{
                                      "displayIcon":false
                                    },
                                    "regions":{
                                    }
                                  }
                                ]
                              }
                            }
                          }
                        ]
                      }
                    }
                  }
                ]
              }
            }
          }
        ]
      }
    }
  },
  "target":"mcf__native",
  "apiName":"landing_page",
  "id":"8592e04f-f59b-4a19-9b1f-af7d55f2b491"
}

布局

根据配置文件，组件将被读取并按照自上而下的方式显示。一些组件可以有嵌入的子组件。

代码示例：包含两个卡片的登录页面。Card1 = 项目列表。Card2 = 一个包含 3 个按钮的布局容器。

Container
    Card
        List
            Row
    Card
        Layout Container
            Button 
            Button
            Button

对于 JSON 定义，使用 regions 属性定义嵌入层次结构 — 组件的子组件在regions区域中定义。

代码示例：带有卡片子组件的容器，其中包含一个列表作为其子组件。

{
    "definition": "mcf/container",
    "properties": {
        ...
    },
    "regions": {
        "components": {
        "components": [
            {
            "definition": "mcf/card",
            "properties": {
                ...
            },
            "regions": {
                "components": {
                "components": [
                    {
                    "definition": "mcf/list",
                    "properties": {
                        ...
                    },
                    "regions": {
                    ...
                    ...
                    ...

页面标题

或者，页面标题可以显示在登录页面的顶部。在根元素的属性中定义title属性。

{
  "view": {
    "definition": "generated/uem_output",
    "properties": {
      "title": "$my_home_page"
    },
    "regions": {
      "components": {
        "name": "components",
        "components": [
          {
            "definition": "mcf/container",
            "name": "mcf_container",
            "properties": {
              "description": "MCF native container",
              "label": "MCF Native",
              "backgroundColor": "#f3f2f2"
            },
            ...
          }
        ]
     }
   }
}

标准组件

除了regions之外，组件还有两个关键部分：

definition
properties

该definition定义了要显示哪个组件，例如mcf/card。它由一个前缀和组件名组成，前缀定义了可以找到组件的框架。例如，mcf/card 位于 mcf 框架中，并被定义为 card。

该properties定义了组件的可自定义属性，例如文本字符串或配置数据。

可滚动容器

可滚动容器是一种高级别容器，用作所有组件的整体容器。当此组件中包含的内容超过屏幕高度时，它就可以滚动。

背景颜色可以自定义。

备注此组件会填充登录页面内容的全部空间。建议将此组件用作“根”组件，这是因为任何其他使用情况可能会导致异常行为。

属性：

backgroundColor：HexString
- 内容的背景颜色
- 默认值为“#FFFFFF”

{
    "definition": "mcf/container",
    "properties": {
        "backgroundColor": "#F3F2f2"
    },
    "regions": {
        "components": {
            "components": [{
                ...embedded content components go here
            }]
    }
}

卡片

卡片是一种具有可选标题的标准化容器。它用于以封装的形式显示内容，并嵌入白色背景的圆角矩形中。

{
    "definition": "mcf/card",
    "properties": {
        "label": "Card Title"
    },
    "regions": {
        "components": {
            "components": [{
                ...embedded content components go here
            }]
    }
}

全局操作

全局操作卡允许客户构建一个卡片，以托管他们的全局 Lightning 快速操作。在卡片上，用户最多可以添加六个操作。添加的操作超过 6 个操作时，第 6 个操作会转换为“更多”按钮，用于打开溢出页面。操作的图标来自此前在 Salesforce“设置”中配置的图标。

备注一些操作无法离线模式下使用，除非之前曾在会话中调用过这些操作。

属性：

默认行为：我们会显示可用于该用户的所有可用全局操作
配置的行为：配置可能受限
单个卡片最多六个操作
- 如果配置 6 个以上的操作，将创建溢出表单。
- 如果在进入离线模式前未访问溢位表单，这些操作可能没有图标
如果未使用操作且行为已缓存，此卡片可能无法在离线模式下使用。
- 离线功能受限，已缓存操作也会受限
一些操作需要设备权限。
图标来自服务器端配置。

备注必须在服务器上设置 LWC 全局操作。

代码示例：默认行为

{
                    "definition": "mcf/card",
                    "name": "global_actions",
                    "properties": {
                      "label": "Global Actions"
                    },
                    "regions": {
                      "components": {
                        "name": "components",
                        "components": [
                          {
                            "definition": "mcfp/actionList",
                            "name": "actions_list",
                            "properties": {},
                            "regions": {}
                          }
                        ]
                      }
                    }
                  }

代码示例：配置的行为

{
        "definition": "mcfp/actionList",
                            "name": "actions_list",
                            "properties": {},
                            "regions": {
                              "components": {
                                "name": "components",
                                "components": [
                                  {
                                    "definition": "mcfp/actionItem",
                                    "name": "global_action",
                                    "properties": {
                                      "apiName": "Global.Scanner",
                                    },
                                    "regions": {}
                                  }
                                ]
                              }
                            }
}

通用列表

通用列表卡允许用户配置最多具有两个子字段的对象列表。客户可以选择显示或隐藏通用列表卡的图标，但不能拥有带有混合行首选项的卡片。

通用列表卡具有排序支持，允许客户选择如何对数据进行排序，如何为客户显示数据。建议将这些行用于自定义或标准对象。

属性

- 图标/无图标，默认图标
- 标题，最多 2 个子字段
- 排序支持（升序和降序）
  - 默认值：上次查看日期
  - 字段名
  - 创建日期
  - 所有人姓名
  - 名字姓氏
  - 支持大部分其他配置
- 筛选器支持
  - 简单：当给定字段的值与配置匹配时，允许筛选
```
"where": {
  "Name": "Test"
}
```
  - 条件：当值与基于条件“与”、“或”的给定字段匹配时，允许筛选
```
"where": {
 "and": {
  "Type": "Customer",
  "Name": "Test"
 }
}
```
- 字段 - 定义要查询的所有字段及其类型
  - 主要字段
    - 子字段 1
    - 子字段 2
- 字段映射 - 指示将哪个字段显示在每个 UX 元素中
  - 主要字段
    - 子字段 1
    - 子字段 2
建议行
- 记录行；例如业务机会、客户、联系人
滑动操作
- 对于具有地图、通话和电子邮件的移动特定操作的对象，滑动操作可以配置为“向左滑动”。若要实施，对于您要添加到通用列表卡中的 UEM，请向它们添加以下操作。
  - 呼叫 - 一个 {label, value} 列表
  - 电子邮件 - 一个 {label, value} 列表
  - 映射 - 一个 {label, value} 列表
    - 值 = 街道、城市、州/省、邮政编码、国家/地区
    - 或者，值-地址（代表整个地址的自定义单个文本字段）
  备注如果要使用的滑动操作未显示字段值，将不会显示滑动操作选项。
- 滑动操作可以配置为“向右滑动”以显示 LWC 操作。

注意事项：

Size: Number 定义了要显示的最大行数。默认值是 5，这是可选项。
- 最大值推荐：10
- 最小值推荐：1
View.More 显示的记录比“大小”参数中定义的初始数量多。每个卡片最多可加载 200 条这样的记录。
多个排序字段可以使用后续字段断开与之前字段的联系。在应用大小筛选器前，无法用于排序，然后在应用筛选器后重新排序。例如，无法按 lastViewedDate 排序，然后按字母顺序对该列表进行排序。
自定义对象必须以 __c 结尾

代码示例：带有呼叫、电子邮件和映射滑动操作的通用列表

{
  "definition": "mcf/list",
  "name": "contact_list",
  "properties": {
    "label": "Contacts",
    "size": 3,
    "objectApiName": "Contact",
    "orderBy":  [
        {"LastViewedDate": "DESC"},
        {"Name": "ASC"}
    ],
    "fields": {
        "Name":"StringValue",
        "Phone":"StringValue",
        "ApiName":"String",
        "MobilePhone": "StringValue",
        "WorkPhone": "StringValue",
        "WorkEmail": "StringValue",
        "ShippingStreet": "StringValue",
        "ShippingCity": "StringValue"
    },
    "fieldMap": {
        "mainField": "Name",
        "subField1": "ApiName",
        "subField2": "Phone"
    },
    "swipeActions": {
        "call": [
        {
            "label": "Mobile Phone",
            "value": "MobilePhone"
        },{
            "label": "Work Phone",
            "value": "WorkPhone"
        }],
        "email": [
        {
            "label": "Work Email",
            "value": "WorkEmail"
        }]
        "map": [
        {
            "label": "Address",
            "value": {
                "street": "ShippingStreet",
                "city": "ShippingCity"
            }
        }]
   }
  },
  "regions": {
    "components": {
      "name": "components",
      "components": [
        {
          "definition": "mcf/recordRow",
          "name": "contact_row",
          "properties": {},
          "regions": {}
        }
      ]
    }
  }
}

代码示例：无滑动操作的通用列表

{
  "definition": "mcf/list",
  "name": "contact_list",
  "properties": {
    "label": "Contacts",
    "size": 3,
    "objectApiName": "Contact",
    "orderBy":  [
        {"LastViewedDate": "DESC"},
        {"Name": "ASC"}
    ],
    "fields": {
        "Name":"StringValue",
        "Phone":"StringValue",
        "ApiName":"String"
    },
    "fieldMap": {
        "mainField": "Name",
        "subField1": "ApiName",
        "subField2": "Phone"
    }
  },
  "regions": {
    "components": {
      "name": "components",
      "components": [
        {
          "definition": "mcf/recordRow",
          "name": "contact_row",
          "properties": {},
          "regions": {}
        }
      ]
    }
  }
}

定时列表

显示开始和结束时间是相关数据的对象列表。

可按对象类型自定义本列表，并将字段名称映射到数据，进而允许与自定义对象一起使用。
所显示列表的大小可以自定义。
该列表可以显示开始时间为当天的记录。

可以映射至的字段：

startTime
endTime
mainField
subField1
subField2

备注对于默认 TimedRow 体验，建议使用mcf/timedRow 。

开始时间在当前时间之前，结束时间在当前时间之后的列表项目将被视为“当前”对象，并具有带有指示器的深色阴影。结束时间早于当前时间的列表项目将会灰显。

属性：

"size":Number
- 定义要显示的最大行数
- 可选，默认为 5
"objectApiName":String,
"fieldMap": {
- "startTime":String,
- "endTime":String,
- “mainField”:String,
- “subField1”:String,
- "subField2":String }
orderBy - 设置行的排序方式。默认情况下，使用为 startTime 指定的字段，并按升序排序。
筛选器支持
- 简单：当给定字段的值与配置匹配时，允许筛选
```
"where": {
  "Name": "Test"
}
```
- 条件：当值与基于条件“与”、“或”的给定字段匹配时，允许筛选
```
"where": {
 "and": {
  "Type": "Customer",
  "Name": "Test"
 }
}
```
滑动操作
- 对于具有地图、通话和电子邮件的移动特定操作的对象，滑动操作可以配置为“向左滑动”。要实施这些操作，将以下内容添加到要添加这些功能的 UEM。
  - 呼叫 - 一个 {label, value} 列表
  - 电子邮件 - 一个 {label, value} 列表
  - 映射 - 一个 {label, value} 列表
    - 值 = 街道、城市、州/省、邮政编码、国家/地区
    - 或者，值-地址（代表整个地址的自定义单个文本字段）
  备注如果要使用的滑动操作未显示字段值，将不会显示滑动操作选项。
- 滑动操作可以配置为“向右滑动”以显示 LWC 操作。

代码示例：带有滑动操作的定时列表卡

{
                    "definition": "mcf/card",
                    "name": "timed_card",
                    "properties": {
                      "label": "Today's Visits",
                      "titleColor": "#EB7092"
                    },
                    "regions": {
                      "components": {
                        "name": "components",
                        "components": [
                          {
                            "definition": "mcf/timedList",
                            "name": "scheduled_object_list",
                            "properties": {
                              "label": "Scheduled Object List",
                              "size": 3,
                              "objectApiName": "Store_Visit__c",
                              "fieldMap": {
                                "startTime": "Start_Date_Time__c",
                                "endTime": "End_Date_Time__c",
                                "mainField": "Name",
                                "subField1": "Store_Display_Name__c",
                                "subField2": "Visit_Status__c"
                              },
                              "fields": {
                                "Name":"StringValue",
                                "Start_Date_Time__c":"DateTimeValue",
                                "End_Date_Time__c":"DateTimeValue",
                                "Store_Display_Name__c":"StringValue",
                                "Visit_Status__c":"PicklistValue",
                                "ShippingStreet": "StringValue",
                                "ShippingCity": "StringValue",
                                "ShippingState": "StringValue",
                                "ShippingPostalCode": "StringValue",
                                "ShippingCountry": "StringValue"
                              },
                              "orderBy": [
                                {"Start_Date_Time__c":  "ASC"}
                              ],
                              "swipeActions":{
                                "map": [
                                    {
                                        "label": "Shipping Address",
                                        "value": {
                                            "street": "ShippingStreet",
                                            "city": "ShippingCity",
                                            "state": "ShippingState",
                                            "postalCode": "ShippingPostalCode",
                                            "country": "ShippingCountry"
                                         }
                                    }
                                ]
                              }
                            },
                            "regions": {
                              "components": {
                                "name": "components",
                                "components": [
                                  {
                                    "definition": "mcf/timedRow",
                                    "name": "simple_scheduled_object_row",
                                    "properties": {},
                                    "regions": {}
                                  }
                                ]
                              }
                            }
                          }
                        ]
                      }
                    }
                  }

代码示例：不带滑动操作的定时列表卡

{
                    "definition": "mcf/card",
                    "name": "timed_card",
                    "properties": {
                      "label": "Today's Visits",
                      "titleColor": "#EB7092"
                    },
                    "regions": {
                      "components": {
                        "name": "components",
                        "components": [
                          {
                            "definition": "mcf/timedList",
                            "name": "scheduled_object_list",
                            "properties": {
                              "label": "Scheduled Object List",
                              "size": 3,
                              "objectApiName": "Store_Visit__c",
                              "fieldMap": {
                                "startTime": "Start_Date_Time__c",
                                "endTime": "End_Date_Time__c",
                                "mainField": "Name",
                                "subField1": "Store_Display_Name__c",
                                "subField2": "Visit_Status__c"
                              },
                              "fields": {
                                "Name":"StringValue",
                                "Start_Date_Time__c":"DateTimeValue",
                                "End_Date_Time__c":"DateTimeValue",
                                "Store_Display_Name__c":"StringValue",
                                "Visit_Status__c":"PicklistValue"
                              },
                              "orderBy": [
                                {"Start_Date_Time__c":  "ASC"}
                              ]
                            },
                            "regions": {
                              "components": {
                                "name": "components",
                                "components": [
                                  {
                                    "definition": "mcf/timedRow",
                                    "name": "simple_scheduled_object_row",
                                    "properties": {},
                                    "regions": {}
                                  }
                                ]
                              }
                            }
      Layout Container
A layout container can be used to arrange components in a line, vertically or horizontally. Use the direction property as either row or column. The components to be aligned are arranged in the desired order as the layout’s children in the region’s area. 
Landing page layout
Properties:
“direction”: “row” or “column”
Code example: Aligning components together horizontally using row. 
{
    "definition": "mcf/layout",
    "properties": {
        "direction": "row"
    },
    "regions": {
        "components": {
            "components": [
            {
                "definition": "mcf/text",
                "properties": {
                    ...text properties
                }
            },
            {
                "definition": "mcf/button",
                "properties": {
                       ...button properties
                    },
                "regions": {}
            }
        ]
        }
    }
  }                    }
                        ]
                      }
                    }
                  }

文本

可以通过不同的字体粗细和样式配置简单的文本字段。对要显示的实际内容使用 text 属性。

属性：

fontSize:Number
- 可选，默认大小为 16
fontWeight: “regular”、“semibold”或“bold”
- 可选，默认粗细为正常
color:Hex String
- 可选，默认颜色为 #181818
text:String

{
    "definition": "mcf/text",
    "properties": {
        "text": "This is some text",
        "fontWeight": "semibold"
    }
}

按钮

您可以为按钮分配标签和被选中时触发的操作。

备注

目前，按钮操作仅支持 navigation。必须提供页面引用。页面引用可定向到 LWC 或其他登录页面 JSON 配置。这些选项将在下文的导航部分介绍。

属性：

标签字符串
pageRef：字符串

{
    "definition": "mcf/button",
    "properties": {
        "action": "navigate",
        "label": "Let's navigate!",
        "pageRef": "{\"type\":\"standard__quickAction\",\"state\":{\"objectApiName\":\"Account\", \"recordId\":\"001RN0000034xHvYAI\"},\"attributes\":{\"actionName\":\"Account.view\"}}"
        },
    "regions": {}
}

通过以下设置导航至 LWC 快速操作

pageRef type到 standard__quickAction
将 actionName 设置为 LWC 快速操作的名称

"pageRef": "{\"type\":\"standard__quickAction\",\"state\":{\"objectApiName\":\"Account\", \"recordId\":\"001ABCXYZ\"},\"attributes\":{\"actionName\":\"Account.view\"}}"

按钮和操作的导航值

通过在快速操作 API 名称前添加 Global 来导航到全局 LWC 快速操作。

"pageRef": "{\"type\":\"standard__quickAction\",\"state\":{\"objectApiName\":\"\", \"recordId\":\"\"},\"attributes\":{\"actionName\":\"Global.barcodeScanner\"}}"

导航到其他登录页面配置。

此 pageRef 示例导航到名为 account_full_list.json 的静态资源。确保类型设置为 native__mobileHomeBuilder。

"pageRef": "{\"type\":\"native__mobileHomeBuilder\",\"state\":{},\"attributes\":{\"source\":\"org\",\"id\":\"account_full_list.json\"}}"

上传登录页面定义

完成构建 JSON 文件后，上传登录页面定义。

限制

记录详细信息缓存 - 登录页面缓存适用于每个卡片，可供离线使用的前 200 条记录的预览。不会缓存记录详细信息，除非该用户的公文包中也有这些记录。如果离线用户尝试访问不在公文包中的记录的记录详细信息，则会显示错误。

为了获得登录页面的最佳体验,请确保使用 UI API 兼容对象。

离线访问

在离线模式下启动应用程序时，将显示之前缓存的页面。如果未下载登录页面覆盖，将显示默认登录页面内容。

上载登录页面定义
完成构建 JSON 文件后，将其作为静态资源上传到您的组织中。

本文章是否解决您的问题？

请与我们共享您的想法，以便我们进行改进！

此文本已使用 Salesforce 机器翻译系统进行翻译。如需了解更多详情，请点击此处。

使用代码自定义

所需的 Edition

前提条件

默认登录页面配置

布局

页面标题

标准组件

可滚动容器

卡片

全局操作

通用列表

定时列表

文本

按钮

按钮和操作的导航值

上传登录页面定义

限制

离线访问

General Information

Required Cookies

Functional Cookies

Advertising Cookies

General Information

Required Cookies

Functional Cookies

Advertising Cookies

Cookie List

此文本已使用 Salesforce 机器翻译系统进行翻译。如需了解更多详情，请点击此处。切换为英语而非现在

产品区域

功能影响

版本

体验

使用代码自定义

所需的 Edition

前提条件

默认登录页面配置

布局

页面标题

标准组件

可滚动容器

卡片

全局操作

通用列表

定时列表

文本

按钮

按钮和操作的导航值

上传登录页面定义

限制

离线访问

此文本已使用 Salesforce 机器翻译系统进行翻译。如需了解更多详情，请点击此处。