Usted está aquí:
Personalizar con código
La página de destino se puede configurar como un archivo de recurso estático en formato JSON. Modifique el archivo JSON predeterminado que se proporciona y cárguelo como un recurso estático en Salesforce.
Ediciones necesarias
| Configuración para Móvil sin conexión disponible en: Lightning Experience |
| Permisos de usuario necesarios | |
|---|---|
| Para utilizar Móvil sin conexión | Móvil sin conexión para la aplicación móvil Salesforce Plus |
Se proporciona una configuración de página de destino predeterminada; utilice esta opción predeterminada para crear experiencias de aplicación sin conexión personalizadas.
Requisitos
- Configure el Kit de inicio de la aplicación sin conexión.
- Descargue el recurso estático JSON predeterminado para la página de destino.
Recomendamos que utilice Visual Studio Code para modificar su archivo de definición de página de destino. VS Code se descarga durante la configuración del kit de inicio de desarrollador de aplicación sin conexión.
Configuración de página de destino predeterminada
La configuración predeterminada de la página de destino incluye algunas tarjetas de lista genéricas de muestra para objetos comunes, como Cuentas, Contactos y Oportunidades. Utilice esta configuración como un lugar de inicio para personalizar la página de destino.
{
"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"
}
Formato
Los componentes se leen y se muestran de arriba a abajo, según el archivo de configuración. Algunos componentes pueden tener componentes secundarios incrustados.
Ejemplo de código: Una página de destino que contiene dos tarjetas. Card1 = Lista de artículos. Card2 = un contenedor de formato con 3 botones.
Container
Card
List
Row
Card
Layout Container
Button
Button
ButtonPara la definición JSON, la jerarquía incrustada se define utilizando la propiedad regions: los componentes secundarios de un componente se definen en el área regions.
Ejemplo de código: Un contenedor con un componente secundario de una tarjeta, que tiene una lista como su componente secundario.
{
"definition": "mcf/container",
"properties": {
...
},
"regions": {
"components": {
"components": [
{
"definition": "mcf/card",
"properties": {
...
},
"regions": {
"components": {
"components": [
{
"definition": "mcf/list",
"properties": {
...
},
"regions": {
...
...
...Título de página
Opcionalmente, se puede mostrar un título de página en la parte superior de la página de destino. Defina una propiedad title en las propiedades del elemento raíz.
{
"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"
},
...
}
]
}
}
}Componentes estándar
Más allá de las regions, hay dos partes clave en un componente:
-
definition -
properties
El definition define qué componente mostrar, como mcf/card. Está compuesto de un prefijo que define el marco de trabajo donde se puede encontrar el componente y el nombre del componente. Por ejemplo, mcf/card vive en el marco de mcf y se define como card.
Las properties definen propiedades personalizables para el componente, como cadenas de texto o datos de configuración.
Contenedor desplazable
El contenedor desplazable es un contenedor de alto nivel utilizado como el contenedor general para todos los componentes. Cuando el contenido incluido en este componente supera la altura de la pantalla, se vuelve desplazable.
El color de fondo puede personalizarse.
Propiedades:
- backgroundColor: Cadena hexadecimal
- Color de fondo para contenido
- El valor predeterminado es “#FFFFFF”
{
"definition": "mcf/container",
"properties": {
"backgroundColor": "#F3F2f2"
},
"regions": {
"components": {
"components": [{
...embedded content components go here
}]
}
}Tarjeta
La tarjeta es un contenedor estandarizado con un título opcional. Se utiliza para mostrar contenido de una forma encapsulada, integrada en un rectángulo redondeado con un fondo blanco.
{
"definition": "mcf/card",
"properties": {
"label": "Card Title"
},
"regions": {
"components": {
"components": [{
...embedded content components go here
}]
}
}Acciones globales
La tarjeta de acciones globales permite a los clientes crear una tarjeta para alojar sus Acciones rápidas de Lightning globales. En la tarjeta, un usuario puede agregar hasta seis acciones. Cuando se agregan más de seis acciones, la sexta acción se convierte en un botón Más, que se utiliza para abrir una página de desbordamiento. Los iconos para acciones proceden de los iconos configurados anteriormente en Configuración de Salesforce.
Propiedades:
- Comportamiento predeterminado: Mostramos todas las acciones globales disponibles para ese usuario
- Comportamiento configurado: La configuración puede restringirse
- Máximo de seis acciones en una sola tarjeta
- Si se configuran más de seis acciones, se crea una hoja de desbordamiento.
- Si no se accedió a la hoja de desbordamiento antes de dejar sin conexión, es posible que no haya iconos para esas acciones.
- Si no se utilizan acciones y el comportamiento se almacena en caché, es posible que esta tarjeta no funcione sin conexión.
- Funciones sin conexión limitadas, incluso para acciones en caché
- Algunas acciones requieren permisos de dispositivo.
- Los iconos proceden de la configuración del lado del servidor.
Ejemplo de código: Comportamiento predeterminado
{
"definition": "mcf/card",
"name": "global_actions",
"properties": {
"label": "Global Actions"
},
"regions": {
"components": {
"name": "components",
"components": [
{
"definition": "mcfp/actionList",
"name": "actions_list",
"properties": {},
"regions": {}
}
]
}
}
}Ejemplo de código: Comportamiento configurado
{
"definition": "mcfp/actionList",
"name": "actions_list",
"properties": {},
"regions": {
"components": {
"name": "components",
"components": [
{
"definition": "mcfp/actionItem",
"name": "global_action",
"properties": {
"apiName": "Global.Scanner",
},
"regions": {}
}
]
}
}
}Lista genérica
La tarjeta de lista genérica permite a los usuarios configurar listas de objetos con hasta dos subcampos para esos objetos. Los clientes eligen mostrar u ocultar iconos para tarjetas de lista genéricas, pero no pueden tener una tarjeta con preferencias de filas mezcladas.
Las tarjetas de lista genéricas tienen asistencia de ordenación, permitiendo a los clientes elegir cómo se ordenan y se presentan los datos para los usuarios. Se recomienda que se utilicen estas filas para objetos personalizados o estándar.
Propiedades
-
- Icono / No, iconos predeterminados
- Título y hasta 2 subcampos
- Soporte OrderBy (igual y descendente)
- Valores predeterminados: Fecha de última visualización
- Nombre del campo
- Fecha de creación
- Nombre del propietario
- Nombre Apellidos
- Admite la mayoría de otras configuraciones
- Compatibilidad de filtro
- Sencillo: permite filtrar cuando el valor del campo concreto coincide con la configuración
- Condicional: permite el filtrado cuando el valor coincide con los campos concretos según la condición “and”, “or”
- Campos: Defina todos los campos para consultar y su tipo
- Asignación de campos: indica qué campos se muestran en cada elemento de UX
- Fila sugerida
- Fila de registro; como Oportunidad, Cuenta, Contacto
- Acciones de deslizamiento
- Las acciones de deslizamiento se pueden configurar para que el “deslizamiento a la izquierda” muestre objetos con acciones específicas de desplazamiento, mapas, llamadas y correo electrónico. Para implementar, agregue las siguientes acciones al UEM para la tarjeta de lista genérica a la que desea agregarlas.
- Las acciones de deslizamiento se pueden configurar para que con el “deslizamiento a la derecha” se muestren acciones de LWC.
Cosas de nota:
Size: Numberdefine el número máximo de filas que mostrar. Es opcional con el valor predeterminado 5.- Recomendación de valor máximo: 10
- Recomendación de valor mínimo: 1
View.Moremuestra más registros que el importe inicial definido en el parámetro “Size”. Esta acción puede cargar hasta 200 registros por tarjeta.- Varios campos de ordenación por utilizan campos posteriores para interrumpir los enlaces en los campos anteriores. No se puede utilizar para ordenar antes de aplicar el filtro de tamaño, y luego ordenar de nuevo después de aplicar el filtro. Por ejemplo, no puede ordenar por lastViewedDate y luego ordenar dicha lista alfabéticamente.
- Los objetos personalizados deben terminar en __c
Ejemplo de código: Lista genérica con acciones de llamada, correo electrónico y deslizamiento de mapa
{
"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": {}
}
]
}
}
}Ejemplo de código: Lista genérica sin acciones de deslizamiento
{
"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": {}
}
]
}
}
}Lista temporizada
Muestre una lista de objetos donde las horas de inicio y finalización son datos relevantes.
- Puede personalizar esta lista por tipo de objeto, junto con un mapa de nombres de campo a los datos, permitiendo su uso con objetos personalizados.
- El tamaño de la lista mostrada se puede personalizar.
- La lista muestra registros con una hora de inicio en el día actual.
Los campos a los que se pueden asignar son:
-
startTime -
endTime -
mainField -
subField1 -
subField2
Un elemento de lista con una hora de inicio antes de la hora actual, cuya hora de finalización es posterior a la hora actual, se considera un objeto “Enviado” y tiene una sombreada más oscuro con un indicador. Los elementos de lista con horas de finalización anteriores a la hora actual tienen un aspecto descolorido.
Propiedades:
-
"size": Número
- Define el número máximo de filas para mostrar
- Opcional, el valor predeterminado es 5
- "ObjectApiName": Cadena,
-
"fieldMap": {
- "startTime": Cadena,
- "endTime": Cadena,
- "mainField": Cadena,
- "subField1": Cadena,
- "subField2": Cadena }
- orderBy: establece el orden de las filas. El campo especificado para startTime se utiliza y se ordena de forma ascendente de forma predeterminada.
- Compatibilidad de filtro
- Sencillo: permite filtrar cuando el valor del campo concreto coincide con la configuración
- Condicional: permite el filtrado cuando el valor coincide con los campos concretos según la condición “and”, “or”
- Acciones de deslizamiento
- Las acciones de deslizamiento se pueden configurar para que el “deslizamiento a la izquierda” muestre objetos con acciones específicas de desplazamiento, mapas, llamadas y correo electrónico. Para implementar estas acciones, agregue lo siguiente al UEM para la tarjeta de lista genérica a la que desea agregarlas.
- Las acciones de deslizamiento se pueden configurar para que con el “deslizamiento a la derecha” se muestren acciones de LWC.
Ejemplo de código: Tarjeta de lista temporizada con acciones de deslizamiento
{
"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": {}
}
]
}
}
}
]
}
}
}Ejemplo de código: Tarjeta de lista temporizada sin acciones de deslizamiento
{
"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": {}
}
]
}
}
} }
]
}
}
}Texto
Un campo de texto sencillo puede configurarse con diferentes ponderaciones y estilos de fuente. Utilice la propiedad text para el contenido actual para mostrar.
Propiedades:
-
fontSize: Número
- Opcional, el tamaño predeterminado es 16
-
fontWeight: “regular”, “semibold” o “bold”
- Opcional, el grosor predeterminado es regular
-
color: Cadena hexadecimal
- Opcional, el color predeterminado es #181818
- texto Cadena
{
"definition": "mcf/text",
"properties": {
"text": "This is some text",
"fontWeight": "semibold"
}
}Botón
Puede asignar a un botón una etiqueta y una acción para activar la selección.
Propiedades:
- etiqueta Cadena
- pageRef: Cadena
{
"definition": "mcf/button",
"properties": {
"action": "navigate",
"label": "Let's navigate!",
"pageRef": "{\"type\":\"standard__quickAction\",\"state\":{\"objectApiName\":\"Account\", \"recordId\":\"001RN0000034xHvYAI\"},\"attributes\":{\"actionName\":\"Account.view\"}}"
},
"regions": {}
}Navegar a acciones rápidas de LWC por configuración
- la páginaReferir
typeastandard__quickAction - actionName al nombre de la acción rápida de LWC
"pageRef": "{\"type\":\"standard__quickAction\",\"state\":{\"objectApiName\":\"Account\", \"recordId\":\"001ABCXYZ\"},\"attributes\":{\"actionName\":\"Account.view\"}}"Valores de navegación para botones y acciones
Navegue a Acciones rápidas de LWC globales agregando como prefijo el nombre de API de la acción rápida Global con Global.
"pageRef": "{\"type\":\"standard__quickAction\",\"state\":{\"objectApiName\":\"\", \"recordId\":\"\"},\"attributes\":{\"actionName\":\"Global.barcodeScanner\"}}"Navegue a otra configuración de página de destino.
Este ejemplo de pageRef navega a un recurso estático denominado account_full_list.json. Asegúrese de que el tipo está establecido en native__mobileHomeBuilder.
"pageRef": "{\"type\":\"native__mobileHomeBuilder\",\"state\":{},\"attributes\":{\"source\":\"org\",\"id\":\"account_full_list.json\"}}"Carga de su definición de página de destino
Después de terminar de construir su archivo JSON, cargue su definición de página de destino.
Limitaciones
Almacenamiento en caché de detalles de registros: La página de destino almacena en caché vistas previas de los primeros 200 registros que se aplican a cada tarjeta para su uso sin conexión. Los detalles de registro no se almacenan en caché a menos que esos registros también estén presentes en Briefcase para ese usuario. Si un usuario sin conexión intenta acceder a detalles de registro para un registro que no está en un breve caso, se muestra un error.
Para la experiencia óptima con una página de destino, asegúrese de utilizar objetos compatibles de API de interfaz de usuario.
Acceso sin conexión
Al iniciar la aplicación mientras está sin conexión, se muestra la página en caché anteriormente. Si no se descargó ninguna sustitución de página de destino, se mostrará el contenido de la página de destino predeterminado.
- Cargar su definición de página de destino
Después de terminar de construir su archivo JSON, cárguelo como un recurso estático en su organización.
