🎨
Interfaz de Usuario y Lightning App Builder
Lightning App Builder, Dynamic Forms, page layouts, acciones, botones, list views, Path, Kanban y componentes Lightning.
⏱️ Tiempo estimado de lectura: 50 minutos
Lightning App Builder: Páginas y Plantillas
Lightning App Builder es la herramienta principal drag-and-drop para diseñar páginas Lightning sin código.
3 tipos de páginas que puedes crear:
1. App Page (Página de aplicación):
- Página standalone accesible desde la navegación de la app.
- Ideal para dashboards personalizados, centros de comando, portales internos.
- Plantillas: una columna, dos columnas, tres columnas.
- Se asigna a una Lightning App y aparece como un tab.
2. Home Page (Página de inicio):
- Reemplaza la página de inicio por defecto.
- Componentes típicos: Assistant, Key Deals, Today's Tasks, Performance Chart, Recent Items.
- Se puede asignar a: toda la org (default) o a perfiles específicos o a una app específica.
- Solo una Home Page activa por perfil/app.
3. Record Page (Página de registro):
- Personaliza la vista de detalle de un registro específico.
- Es el tipo de página más complejo y más preguntado en el examen.
- Se asigna por: Org Default → App Default → App + Record Type + Profile (mayor especificidad gana).
- Plantillas disponibles: Header and One Column, Header and Two Columns (3:9, 6:6, 4:8), Header and Three Columns, Full Width.
Asignación de Record Pages (Activation / Assignment):
Cuando activas una Record Page, puedes asignarla con diferentes niveles de especificidad:
- Org Default: Se aplica a todos los usuarios, todas las apps.
- App Default: Se aplica solo dentro de una Lightning App específica.
- App, Record Type, and Profile: La asignación más específica. Gana sobre las demás.
Regla: La asignación más específica SIEMPRE gana.
Componentes estándar disponibles:
- Related Lists, Related Record, Highlights Panel, Record Detail, Chatter Feed, Path, Activities, Flow (embed Screen Flows), Rich Text, Report Chart, Custom Lightning Components.
Dynamic Forms:
Permiten colocar campos individuales en cualquier región de la página (no atados a secciones del Page Layout). Beneficios:
- Visibility Rules: Mostrar/ocultar campos basándose en el perfil del usuario, record type, valores de campos, permisos, o el dispositivo.
- Elimina la necesidad de múltiples Page Layouts para diferentes combinaciones de visibilidad.
- Solo disponible en Record Pages y solo para Custom Objects (y algunos Standard Objects seleccionados).
Dynamic Actions:
Similar a Dynamic Forms pero para las acciones (botones) del registro. Permite controlar qué acciones se muestran basándose en criterios dinámicos sin necesidad de diferentes Page Layouts por perfil.
- Reemplaza la sección 'Salesforce Mobile and Lightning Experience Actions' del Page Layout.
- Permite asignar acciones diferentes por perfil, Record Type o valor de campo.
Component Visibility Rules:
Cada componente Lightning en el App Builder puede tener reglas de visibilidad:
- Device: Solo desktop, solo móvil, ambos.
- Permissions: Basado en permisos de usuario.
- Field Values: Basado en el valor de un campo del registro.
- Advanced (Custom): Fórmulas booleanas personalizadas.
3 tipos de páginas que puedes crear:
1. App Page (Página de aplicación):
- Página standalone accesible desde la navegación de la app.
- Ideal para dashboards personalizados, centros de comando, portales internos.
- Plantillas: una columna, dos columnas, tres columnas.
- Se asigna a una Lightning App y aparece como un tab.
2. Home Page (Página de inicio):
- Reemplaza la página de inicio por defecto.
- Componentes típicos: Assistant, Key Deals, Today's Tasks, Performance Chart, Recent Items.
- Se puede asignar a: toda la org (default) o a perfiles específicos o a una app específica.
- Solo una Home Page activa por perfil/app.
3. Record Page (Página de registro):
- Personaliza la vista de detalle de un registro específico.
- Es el tipo de página más complejo y más preguntado en el examen.
- Se asigna por: Org Default → App Default → App + Record Type + Profile (mayor especificidad gana).
- Plantillas disponibles: Header and One Column, Header and Two Columns (3:9, 6:6, 4:8), Header and Three Columns, Full Width.
Asignación de Record Pages (Activation / Assignment):
Cuando activas una Record Page, puedes asignarla con diferentes niveles de especificidad:
- Org Default: Se aplica a todos los usuarios, todas las apps.
- App Default: Se aplica solo dentro de una Lightning App específica.
- App, Record Type, and Profile: La asignación más específica. Gana sobre las demás.
Regla: La asignación más específica SIEMPRE gana.
Componentes estándar disponibles:
- Related Lists, Related Record, Highlights Panel, Record Detail, Chatter Feed, Path, Activities, Flow (embed Screen Flows), Rich Text, Report Chart, Custom Lightning Components.
Dynamic Forms:
Permiten colocar campos individuales en cualquier región de la página (no atados a secciones del Page Layout). Beneficios:
- Visibility Rules: Mostrar/ocultar campos basándose en el perfil del usuario, record type, valores de campos, permisos, o el dispositivo.
- Elimina la necesidad de múltiples Page Layouts para diferentes combinaciones de visibilidad.
- Solo disponible en Record Pages y solo para Custom Objects (y algunos Standard Objects seleccionados).
Dynamic Actions:
Similar a Dynamic Forms pero para las acciones (botones) del registro. Permite controlar qué acciones se muestran basándose en criterios dinámicos sin necesidad de diferentes Page Layouts por perfil.
- Reemplaza la sección 'Salesforce Mobile and Lightning Experience Actions' del Page Layout.
- Permite asignar acciones diferentes por perfil, Record Type o valor de campo.
Component Visibility Rules:
Cada componente Lightning en el App Builder puede tener reglas de visibilidad:
- Device: Solo desktop, solo móvil, ambos.
- Permissions: Basado en permisos de usuario.
- Field Values: Basado en el valor de un campo del registro.
- Advanced (Custom): Fórmulas booleanas personalizadas.
Puntos Clave
- ✓ 3 tipos de página: App Page, Home Page, Record Page
- ✓ Record Pages se asignan por Org Default → App Default → App + RT + Profile (más específico gana)
- ✓ Dynamic Forms: campos individuales con Visibility Rules en Record Pages (solo Custom Objects)
- ✓ Dynamic Actions: controlar qué acciones se muestran según criterios dinámicos
- ✓ Component Visibility Rules: cada componente puede tener filtros por dispositivo, perfil o valor de campo
Page Layouts, Compact Layouts y Related Lists
Los Page Layouts siguen siendo relevantes, especialmente antes de migrar a Dynamic Forms.
Page Layouts controlan:
1. Fields: Qué campos aparecen y su disposición en la página (columnas, secciones).
2. Sections: Agrupaciones de campos con títulos personalizados.
3. Related Lists: Qué listas relacionadas aparecen y en qué orden.
4. Actions (Buttons): Qué Quick Actions y botones se muestran en la barra de acciones.
- Sección: 'Salesforce Mobile and Lightning Experience Actions'.
- Si no se personaliza, se hereda la sección global (Publisher Global Layout).
5. Field Properties: Marcar campos como Required (requerido) o Read-Only en el contexto del layout.
Asignación de Page Layouts:
- Se asignan mediante la matriz Profile × Record Type.
- Un perfil + un Record Type = un Page Layout específico.
- Si no hay Record Types activos, se asigna un layout por perfil.
Mini Page Layout:
- Controla qué campos aparecen en los hover tooltips (ventana emergente cuando pasas el ratón sobre un hipervínculo de registro).
- Se configura dentro del Page Layout Editor en la sección 'Mini Page Layout'.
Compact Layouts:
- Controlan qué campos aparecen en el Highlights Panel (la barra superior de un registro).
- También controlan qué campos se ven en la App móvil y en las Cards de Lookup.
- Máximo 7 campos (más el campo Name que siempre aparece).
- El primer campo del Compact Layout se usa como el título principal del registro.
- Se asigna por Record Type. Si no hay Record Types, hay un solo Compact Layout activo por objeto.
- System Default Compact Layout: muestra solo el campo Name.
Related Lists:
- Muestran registros hijos asociados al registro actual.
- Se configuran en el Page Layout (arrastrar a la sección Related Lists).
- Related List - Single: Muestra una related list embebida directamente en la Record Page (componente de Lightning App Builder).
- Los campos visibles en la Related List se configuran haciendo clic en la llave inglesa del elemento en el Page Layout Editor.
- Enhanced Related Lists: Permiten acciones inline (editar, borrar) directamente desde la lista.
Blank Spaces & Sections:
- Usa 'Blank Space' para crear espacios vacíos en el layout.
- Las secciones pueden ser de 1 o 2 columnas.
- Las secciones colapsables se pueden configurar como contraídas por defecto.
Page Layouts controlan:
1. Fields: Qué campos aparecen y su disposición en la página (columnas, secciones).
2. Sections: Agrupaciones de campos con títulos personalizados.
3. Related Lists: Qué listas relacionadas aparecen y en qué orden.
4. Actions (Buttons): Qué Quick Actions y botones se muestran en la barra de acciones.
- Sección: 'Salesforce Mobile and Lightning Experience Actions'.
- Si no se personaliza, se hereda la sección global (Publisher Global Layout).
5. Field Properties: Marcar campos como Required (requerido) o Read-Only en el contexto del layout.
Asignación de Page Layouts:
- Se asignan mediante la matriz Profile × Record Type.
- Un perfil + un Record Type = un Page Layout específico.
- Si no hay Record Types activos, se asigna un layout por perfil.
Mini Page Layout:
- Controla qué campos aparecen en los hover tooltips (ventana emergente cuando pasas el ratón sobre un hipervínculo de registro).
- Se configura dentro del Page Layout Editor en la sección 'Mini Page Layout'.
Compact Layouts:
- Controlan qué campos aparecen en el Highlights Panel (la barra superior de un registro).
- También controlan qué campos se ven en la App móvil y en las Cards de Lookup.
- Máximo 7 campos (más el campo Name que siempre aparece).
- El primer campo del Compact Layout se usa como el título principal del registro.
- Se asigna por Record Type. Si no hay Record Types, hay un solo Compact Layout activo por objeto.
- System Default Compact Layout: muestra solo el campo Name.
Related Lists:
- Muestran registros hijos asociados al registro actual.
- Se configuran en el Page Layout (arrastrar a la sección Related Lists).
- Related List - Single: Muestra una related list embebida directamente en la Record Page (componente de Lightning App Builder).
- Los campos visibles en la Related List se configuran haciendo clic en la llave inglesa del elemento en el Page Layout Editor.
- Enhanced Related Lists: Permiten acciones inline (editar, borrar) directamente desde la lista.
Blank Spaces & Sections:
- Usa 'Blank Space' para crear espacios vacíos en el layout.
- Las secciones pueden ser de 1 o 2 columnas.
- Las secciones colapsables se pueden configurar como contraídas por defecto.
Puntos Clave
- ✓ Page Layouts: campos, secciones, related lists, acciones — asignados por Profile × Record Type
- ✓ Compact Layouts: Highlights Panel + Mobile + Lookup Cards — máximo 7 campos
- ✓ Mini Page Layouts: controlan los hover tooltips de los enlaces de registros
- ✓ Dynamic Forms reemplaza la necesidad de múltiples Page Layouts para visibilidad de campos
- ✓ Si la sección de acciones no está personalizada, se hereda del Publisher Global Layout
List Views, Path, Kanban y Herramientas de Productividad
Salesforce ofrece múltiples herramientas visuales para mejorar la productividad y la experiencia del usuario.
List Views (Vistas de lista):
- Muestran registros de un objeto filtrados por criterios.
- Se pueden crear List Views personalizadas con filtros específicos.
- Visibilidad: Private (solo el creador), Shared with specific groups, All users.
- Opciones avanzadas: Inline Editing (editar campos directamente desde la lista), Charts (mini gráficos), Kanban view.
- Los administradores pueden pinear una List View como vista predeterminada para toda la org.
- Mass Actions: Desde una List View se pueden realizar acciones masivas: cambiar propietario, enviar email masivo, cambiar status.
Kanban View:
- Vista visual tipo tablero (como Trello) que agrupa registros por un campo picklist o lookup.
- Ejemplo clásico: Opportunities agrupadas por Stage (columnas: Prospecting, Qualification, Proposal, etc.).
- Permite drag-and-drop para mover registros entre columnas (cambiar el valor del campo).
- Muestra resumen numérico en cada columna (cantidad, suma).
- Disponible desde cualquier List View pulsando el icono de Kanban.
- Se puede configurar qué campo agrupa las columnas y qué campo se resume.
Path (Ruta):
- Banda visual en la parte superior de un registro que muestra las etapas de un proceso.
- Funciona con campos Picklist o Stage (Opportunity).
- Se configura en: Setup > Path Settings > Enable Path > New Path.
- Key Fields: Se pueden configurar campos clave que aparecen en un popup al hacer clic en cada etapa. Ayudan al usuario a saber qué información completar antes de avanzar.
- Guidance for Success: Texto personalizado de ayuda para cada etapa (consejos, mejores prácticas).
- Se añade como componente Path en Lightning App Builder.
- Un solo Path por objeto por Record Type.
Split View:
- Disponible en Console Apps.
- Muestra la List View en un panel lateral y el registro seleccionado en el panel principal.
- Permite navegar rápidamente entre registros sin salir de la lista.
Related Lookup Filters:
- Filtros que restringen los registros disponibles en un campo Lookup.
- Ejemplo: en un campo Lookup a Contact, filtrar para mostrar solo contactos activos de la misma Account.
- Se configuran al editar el campo de relación.
Global Search:
- Búsqueda que busca en todos los objetos simultáneamente.
- Resultados filtrados por permisos del usuario.
- Los administradores pueden configurar qué campos son buscables por objeto (Search Layouts).
- Search Layouts: Controlan qué campos aparecen en los resultados de búsqueda, las lookup dialogs y los resultados de phone/tablet.
List Views (Vistas de lista):
- Muestran registros de un objeto filtrados por criterios.
- Se pueden crear List Views personalizadas con filtros específicos.
- Visibilidad: Private (solo el creador), Shared with specific groups, All users.
- Opciones avanzadas: Inline Editing (editar campos directamente desde la lista), Charts (mini gráficos), Kanban view.
- Los administradores pueden pinear una List View como vista predeterminada para toda la org.
- Mass Actions: Desde una List View se pueden realizar acciones masivas: cambiar propietario, enviar email masivo, cambiar status.
Kanban View:
- Vista visual tipo tablero (como Trello) que agrupa registros por un campo picklist o lookup.
- Ejemplo clásico: Opportunities agrupadas por Stage (columnas: Prospecting, Qualification, Proposal, etc.).
- Permite drag-and-drop para mover registros entre columnas (cambiar el valor del campo).
- Muestra resumen numérico en cada columna (cantidad, suma).
- Disponible desde cualquier List View pulsando el icono de Kanban.
- Se puede configurar qué campo agrupa las columnas y qué campo se resume.
Path (Ruta):
- Banda visual en la parte superior de un registro que muestra las etapas de un proceso.
- Funciona con campos Picklist o Stage (Opportunity).
- Se configura en: Setup > Path Settings > Enable Path > New Path.
- Key Fields: Se pueden configurar campos clave que aparecen en un popup al hacer clic en cada etapa. Ayudan al usuario a saber qué información completar antes de avanzar.
- Guidance for Success: Texto personalizado de ayuda para cada etapa (consejos, mejores prácticas).
- Se añade como componente Path en Lightning App Builder.
- Un solo Path por objeto por Record Type.
Split View:
- Disponible en Console Apps.
- Muestra la List View en un panel lateral y el registro seleccionado en el panel principal.
- Permite navegar rápidamente entre registros sin salir de la lista.
Related Lookup Filters:
- Filtros que restringen los registros disponibles en un campo Lookup.
- Ejemplo: en un campo Lookup a Contact, filtrar para mostrar solo contactos activos de la misma Account.
- Se configuran al editar el campo de relación.
Global Search:
- Búsqueda que busca en todos los objetos simultáneamente.
- Resultados filtrados por permisos del usuario.
- Los administradores pueden configurar qué campos son buscables por objeto (Search Layouts).
- Search Layouts: Controlan qué campos aparecen en los resultados de búsqueda, las lookup dialogs y los resultados de phone/tablet.
Puntos Clave
- ✓ Kanban View: vista tipo tablero con drag-and-drop, agrupa por picklist/lookup
- ✓ Path: etapas visuales con Key Fields y Guidance for Success — se configura por picklist
- ✓ List Views soportan Inline Editing, Charts, acciones masivas y Kanban
- ✓ Split View (Console Apps): lista + registro lado a lado para navegación rápida
- ✓ Search Layouts controlan qué campos aparecen en los resultados de búsqueda global
Componentes Lightning: Estándar, Custom y AppExchange
Lightning Experience está construido sobre una arquitectura de componentes reutilizables.
Tipos de componentes disponibles en Lightning App Builder:
1. Standard Components (Componentes estándar):
Pre-construidos por Salesforce. Incluyen:
- Record Detail: El formulario completo del Page Layout.
- Related Lists: Todas las listas relacionadas configuradas en el Page Layout.
- Related List - Single: Una lista relacionada individual embebida.
- Highlights Panel: Muestra los campos del Compact Layout.
- Chatter: Feed de Chatter del registro.
- Activities: Timeline de actividades (Tareas, Eventos, Emails, Calls).
- Path: Barra de etapas del proceso.
- Flow: Embebe un Screen Flow directamente en la página. El usuario puede interactuar con el flow sin salir del registro.
- Rich Text: Muestra texto formateado, instrucciones o HTML básico.
- Report Chart: Embebe un gráfico de un reporte directamente en la página.
- Accordion: Agrupa contenido en secciones colapsables.
- Tabs: Agrupa componentes en pestañas para ahorrar espacio.
2. Custom Components (LWC - Lightning Web Components):
- Desarrollados por programadores usando HTML, JavaScript y CSS estándar web.
- Pueden exponerse para uso en Lightning App Builder configurando su metadata.
- Pueden recibir parámetros de configuración del administrador (design attributes).
- Son la evolución de los Aura Components (legacy).
- Requieren deployment pero una vez desplegados, los administradores los usan como drag-and-drop.
3. AppExchange Components:
- Instalados desde AppExchange.
- Se usan igual que los Standard Components en App Builder.
- Ejemplos: gráficosavanzados, mapas interactivos, widgets de integración.
Lightning Page Templates:
Definen la estructura de la página (regiones donde se pueden colocar componentes).
- Templates estándar: Full Width, Two Columns (varias proporciones), Three Columns.
- El template se selecciona al crear la página. Se puede cambiar después pero puede requerir reubicar componentes.
Componente Flow en Lightning Pages:
Uno de los usos más poderosos: embeber Screen Flows directamente en una Record Page.
- El flow se ejecuta en el contexto del registro.
- Se puede pasar el
- Caso de uso: formularios de escalamiento, wizards de configuración, encuestas post-venta.
Lightning Email Templates:
- Diseñados visualmente con el drag-and-drop Email Template Builder.
- Soportan campos de merge (ej:
- Se pueden usar en: Quick Actions, Flows, Mass Email.
- Se reemplazan a Letterheads + HTML Templates (que son Classic/Legacy).
Tipos de componentes disponibles en Lightning App Builder:
1. Standard Components (Componentes estándar):
Pre-construidos por Salesforce. Incluyen:
- Record Detail: El formulario completo del Page Layout.
- Related Lists: Todas las listas relacionadas configuradas en el Page Layout.
- Related List - Single: Una lista relacionada individual embebida.
- Highlights Panel: Muestra los campos del Compact Layout.
- Chatter: Feed de Chatter del registro.
- Activities: Timeline de actividades (Tareas, Eventos, Emails, Calls).
- Path: Barra de etapas del proceso.
- Flow: Embebe un Screen Flow directamente en la página. El usuario puede interactuar con el flow sin salir del registro.
- Rich Text: Muestra texto formateado, instrucciones o HTML básico.
- Report Chart: Embebe un gráfico de un reporte directamente en la página.
- Accordion: Agrupa contenido en secciones colapsables.
- Tabs: Agrupa componentes en pestañas para ahorrar espacio.
2. Custom Components (LWC - Lightning Web Components):
- Desarrollados por programadores usando HTML, JavaScript y CSS estándar web.
- Pueden exponerse para uso en Lightning App Builder configurando su metadata.
- Pueden recibir parámetros de configuración del administrador (design attributes).
- Son la evolución de los Aura Components (legacy).
- Requieren deployment pero una vez desplegados, los administradores los usan como drag-and-drop.
3. AppExchange Components:
- Instalados desde AppExchange.
- Se usan igual que los Standard Components en App Builder.
- Ejemplos: gráficosavanzados, mapas interactivos, widgets de integración.
Lightning Page Templates:
Definen la estructura de la página (regiones donde se pueden colocar componentes).
- Templates estándar: Full Width, Two Columns (varias proporciones), Three Columns.
- El template se selecciona al crear la página. Se puede cambiar después pero puede requerir reubicar componentes.
Componente Flow en Lightning Pages:
Uno de los usos más poderosos: embeber Screen Flows directamente en una Record Page.
- El flow se ejecuta en el contexto del registro.
- Se puede pasar el
recordId como input al flow para que trabaje con el registro actual.- Caso de uso: formularios de escalamiento, wizards de configuración, encuestas post-venta.
Lightning Email Templates:
- Diseñados visualmente con el drag-and-drop Email Template Builder.
- Soportan campos de merge (ej:
{!Contact.FirstName}).- Se pueden usar en: Quick Actions, Flows, Mass Email.
- Se reemplazan a Letterheads + HTML Templates (que son Classic/Legacy).
Puntos Clave
- ✓ 3 tipos de componentes en App Builder: Standard, Custom (LWC) y AppExchange
- ✓ El componente Flow embebe Screen Flows directamente en Record Pages
- ✓ LWC (Lightning Web Components) reemplazan a Aura Components (legacy)
- ✓ Report Chart permite embeber gráficos de reportes directamente en páginas
- ✓ Los templates de página definen las regiones disponibles y se pueden cambiar después
- ✓ Los administradores pueden usar LWC custom como drag-and-drop sin escribir código